/* Shared look for every screen. Themes are picked live from the host panel. */

:root,
[data-theme="trap"] {
  --bg: #060807;
  --surface: #0f1713;
  --surface2: #16221c;
  --line: #24352c;
  --text: #f1f6f3;
  --muted: #8d9c94;
  --accent: #39ff88;
  --accent2: #c6ff3d;
  --on-accent: #03130a;
  --glow: rgba(57, 255, 136, 0.22);
  --tail: #39ff88;
  --fade: #ff3d5e;
  --light: 0;
}

[data-theme="gold"] {
  --bg: #0b0906;
  --surface: #17130c;
  --surface2: #211b10;
  --line: #3a2f1b;
  --text: #fbf6ea;
  --muted: #a89a7f;
  --accent: #f5c542;
  --accent2: #ffe9a3;
  --on-accent: #1d1503;
  --glow: rgba(245, 197, 66, 0.2);
  --tail: #5be38d;
  --fade: #ff4d5e;
}

[data-theme="ice"] {
  --bg: #050b18;
  --surface: #0c1528;
  --surface2: #122039;
  --line: #1f3256;
  --text: #eef6ff;
  --muted: #8ea3c2;
  --accent: #4cc9ff;
  --accent2: #b5ecff;
  --on-accent: #021422;
  --glow: rgba(76, 201, 255, 0.22);
  --tail: #4cffb0;
  --fade: #ff4f7a;
}

[data-theme="fire"] {
  --bg: #0e0504;
  --surface: #1b0b09;
  --surface2: #26110d;
  --line: #44201a;
  --text: #fff3ee;
  --muted: #b39187;
  --accent: #ff5a1f;
  --accent2: #ffb020;
  --on-accent: #1f0800;
  --glow: rgba(255, 90, 31, 0.24);
  --tail: #57e389;
  --fade: #ff3d5e;
}

[data-theme="royal"] {
  --bg: #0a0614;
  --surface: #140d24;
  --surface2: #1c1333;
  --line: #31234f;
  --text: #f5f0ff;
  --muted: #a296bd;
  --accent: #a66bff;
  --accent2: #ff4fd8;
  --on-accent: #12062a;
  --glow: rgba(166, 107, 255, 0.24);
  --tail: #4dffa6;
  --fade: #ff4f7a;
}

[data-theme="chalk"] {
  --bg: #f3f2ec;
  --surface: #ffffff;
  --surface2: #ecebe4;
  --line: #d9d7cd;
  --text: #121212;
  --muted: #6a6a63;
  --accent: #111111;
  --accent2: #e63946;
  --on-accent: #ffffff;
  --glow: rgba(230, 57, 70, 0.12);
  --tail: #12a150;
  --fade: #e63946;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--text);
  background: var(--bg);
}

.display {
  font-family: "Anton", Impact, "Arial Narrow Bold", sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 0.95;
}

/* Page backgrounds (viewer + host). The overlay stays transparent. */
body.page { background-color: var(--bg); background-attachment: fixed; min-height: 100vh; }
[data-bg="glow"] body.page {
  background-image:
    radial-gradient(60rem 40rem at 85% -10%, var(--glow), transparent 60%),
    radial-gradient(50rem 35rem at -10% 110%, var(--glow), transparent 60%);
}
[data-bg="grid"] body.page {
  background-image:
    radial-gradient(50rem 30rem at 50% -10%, var(--glow), transparent 65%),
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: auto, 36px 36px, 36px 36px;
}

.badge {
  display: inline-block;
  padding: 0.2em 0.6em;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.72em;
  letter-spacing: 0.06em;
}
.badge.tail { background: var(--tail); color: #041208; }
.badge.fade { background: var(--fade); color: #fff; }
.badge.wait { background: var(--surface2); color: var(--muted); }

.face {
  flex: none;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 50% 70%, var(--team, var(--surface2)), var(--surface2) 75%);
  display: grid;
  place-items: end center;
}
.face img { width: 130%; height: auto; display: block; margin-bottom: -4%; }
.face.logo { place-items: center; }
.face.logo img { width: 72%; margin: 0; }