/* ==========================================================================
   Bizarre Door Quiz – "Glut" design system
   Base tokens taken from the Bizarre Door website (bd-dev/web/static/css/main.css),
   extended for a game UI: category palette, right/wrong states, board, buzzer, timer.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* --- ground */
  --bg: #080403;
  --bg-strong: #050302;
  --surface: #0d0706;
  --surface-2: #140a07;
  --surface-3: #1a0d08;
  --disabled: #2a1812;

  /* --- lines */
  --border: rgba(191, 85, 46, 0.25);
  --border-strong: rgba(217, 122, 79, 0.55);

  /* --- text */
  --text: #ece0d8;
  --text-soft: #e9cdbf;
  --muted: #b6a59b;
  --faint: #7d6a60;

  /* --- ember (brand) */
  --ember: #bf552e;
  --ember-light: #d97a4f;
  --ember-hot: #f0a06a;
  --ember-ink: #100604;
  --ember-glow: rgba(217, 122, 79, 0.35);

  /* --- game states (kept apart from the brand orange on purpose) */
  --right: #e8b75a;          /* gold  – correct, points */
  --right-bg: rgba(232, 183, 90, 0.12);
  --wrong: #e0574f;          /* blood – wrong, minus */
  --wrong-bg: rgba(179, 38, 30, 0.16);
  --info: #8fa9bf;           /* ash blue – neutral info */

  /* --- category palette: warm and muted, but distinguishable column by column */
  --cat-1: #b8643a; /* Kupfer */
  --cat-2: #c08a2e; /* Ocker */
  --cat-3: #8e2f2a; /* Ochsenblut */
  --cat-4: #5f7a8f; /* Aschblau */
  --cat-5: #9a7440; /* Bronze */
  --cat-6: #6b7a44; /* Moos */
  --cat-7: #7a4a63; /* Pflaume */
  --cat-8: #a4472a; /* Rost */

  /* --- type */
  --font-logo: "UnifrakturMaguntia", "Old English Text MT", serif;
  --font-heading: "Cinzel", "Trajan Pro", Georgia, serif;
  --font-body: "EB Garamond", Garamond, Georgia, serif;
  --font-ui: "Inter", "Roboto", system-ui, sans-serif;
  --font-accent: "Tangerine", cursive;

  /* --- shape & motion */
  --radius: 4px;
  --radius-lg: 8px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background:
    radial-gradient(ellipse 70% 50% at 50% -10%, rgba(191, 85, 46, 0.14), transparent 70%),
    var(--bg);
  color: var(--text);
  font: 17px/1.6 var(--font-body);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--ember-light); text-decoration: none; }
a:hover { color: var(--ember-hot); }
img { max-width: 100%; }
[hidden] { display: none !important; }

/* ==========================================================================
   Typography
   ========================================================================== */

.eyebrow {
  font-family: var(--font-heading);
  font-size: 0.72rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--ember-light);
}
.h1, h1 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.8rem, 4vw, 3rem);
  line-height: 1.08;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin: 0 0 0.6rem;
}
.h2, h2 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.3rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0 0 0.75rem;
}
.lead { font-style: italic; font-size: 1.15rem; color: var(--text-soft); }
.muted { color: var(--muted); }
.small { font-size: 0.85rem; }
.ui { font-family: var(--font-ui); }
.num { font-family: var(--font-ui); font-variant-numeric: tabular-nums; }

.logo {
  display: inline-flex; align-items: baseline; gap: 0.5rem;
  color: var(--text); text-decoration: none; white-space: nowrap;
}
.logo .mark { font-family: var(--font-logo); font-size: 1.7rem; line-height: 1; }
.logo .sub {
  font-family: var(--font-heading); font-size: 0.72rem; letter-spacing: 0.35em;
  text-transform: uppercase; color: var(--ember-light);
}

/* ==========================================================================
   Layout pieces
   ========================================================================== */

.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: 0.85rem 1.5rem; border-bottom: 1px solid var(--border);
  background: rgba(5, 3, 2, 0.85); backdrop-filter: blur(6px);
}
.nav { display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; }
.nav a {
  font-family: var(--font-heading); font-size: 0.74rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--text-soft);
}
.nav a:hover, .nav a.active { color: var(--ember-light); }

.panel {
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.4rem;
}
.panel-title {
  font-family: var(--font-heading); font-size: 0.78rem; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--ember-light); margin: 0 0 1rem;
}
.divider { height: 1px; background: linear-gradient(90deg, transparent, var(--border-strong), transparent); border: 0; margin: 1.5rem 0; }

.banner-maintenance {
  background: repeating-linear-gradient(135deg, #3a0f0a, #3a0f0a 14px, #2a0a07 14px, #2a0a07 28px);
  border-bottom: 1px solid var(--wrong);
  color: var(--text); text-align: center; padding: 0.5rem 1rem;
  font-family: var(--font-ui); font-size: 0.85rem;
}
.banner-maintenance b { color: var(--wrong); }

.flash { font-family: var(--font-ui); font-size: 0.9rem; padding: 0.65rem 0.9rem; border-left: 3px solid var(--info); background: var(--surface-2); border-radius: var(--radius); }
.flash.success { border-color: var(--right); }
.flash.error { border-color: var(--wrong); }
.flash.warning { border-color: var(--ember-light); }

/* ==========================================================================
   Buttons & forms
   ========================================================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.75rem 1.6rem; border: 1px solid transparent; border-radius: var(--radius);
  font-family: var(--font-heading); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.08em;
  text-transform: uppercase; cursor: pointer; white-space: nowrap;
  transition: background 0.2s var(--ease), border-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.1s;
  background: var(--ember); color: var(--ember-ink);
}
.btn:hover { background: var(--ember-light); box-shadow: 0 0 24px var(--ember-glow); color: var(--ember-ink); }
.btn:active { transform: translateY(1px); }
.btn:disabled { background: var(--disabled); color: var(--faint); box-shadow: none; cursor: not-allowed; }
.btn.ghost { background: transparent; color: var(--text); border-color: var(--border-strong); text-transform: none; font-weight: 400; letter-spacing: 0.02em; font-size: 0.95rem; }
.btn.ghost:hover { border-color: var(--ember-light); color: var(--ember-hot); box-shadow: none; background: rgba(191, 85, 46, 0.08); }
.btn.right { background: var(--right-bg); color: var(--right); border-color: rgba(232, 183, 90, 0.5); }
.btn.right:hover { background: rgba(232, 183, 90, 0.22); box-shadow: 0 0 20px rgba(232, 183, 90, 0.25); }
.btn.wrong { background: var(--wrong-bg); color: var(--wrong); border-color: rgba(224, 87, 79, 0.5); }
.btn.wrong:hover { background: rgba(179, 38, 30, 0.3); box-shadow: 0 0 20px rgba(224, 87, 79, 0.25); }
.btn.sm { padding: 0.4rem 0.85rem; font-size: 0.72rem; }
.btn.lg { padding: 1rem 2.2rem; font-size: 0.95rem; }
.btn.block { width: 100%; }

.field { display: grid; gap: 0.35rem; margin-bottom: 1.1rem; }
.field label, .label {
  font-family: var(--font-heading); font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted);
}
.input, .field input[type=text], .field input[type=password], .field input[type=number], .field select, .field textarea {
  width: 100%; background: var(--bg-strong); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 0.7rem 0.85rem; color: var(--text); font: 1rem var(--font-ui);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.input:focus, .field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--ember-light); box-shadow: 0 0 0 3px rgba(191, 85, 46, 0.18);
}
.help { font-size: 0.85rem; color: var(--faint); font-style: italic; }
.error-text { font-family: var(--font-ui); font-size: 0.82rem; color: var(--wrong); }
.field.has-error .input { border-color: var(--wrong); }
.check { display: flex; align-items: center; gap: 0.6rem; font-family: var(--font-ui); font-size: 0.95rem; cursor: pointer; }
.check input { accent-color: var(--ember); width: 1.1rem; height: 1.1rem; }
.code-input {
  font-family: var(--font-heading) !important; font-size: 1.8rem !important; letter-spacing: 0.4em;
  text-align: center; text-transform: uppercase;
}

.range { display: grid; grid-template-columns: 5.5rem 1fr 3rem; gap: 0.75rem; align-items: center; font-family: var(--font-ui); font-size: 0.85rem; }
.range input { accent-color: var(--ember); width: 100%; }

.badge {
  display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.15rem 0.6rem; border-radius: 999px;
  font-family: var(--font-ui); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em;
  border: 1px solid var(--border); color: var(--muted); background: var(--surface-2);
}
.badge.ember { color: var(--ember-light); border-color: rgba(217, 122, 79, 0.45); }
.badge.right { color: var(--right); border-color: rgba(232, 183, 90, 0.45); background: var(--right-bg); }
.badge.wrong { color: var(--wrong); border-color: rgba(224, 87, 79, 0.45); background: var(--wrong-bg); }

.avatar {
  width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
  display: inline-grid; place-items: center; background: var(--surface-3); color: var(--ember-light);
  font-family: var(--font-heading); font-weight: 700; border: 1px solid var(--border);
}
.avatar.lg { width: 88px; height: 88px; font-size: 2rem; }

/* ==========================================================================
   Game: status bar & timer ("burning fuse")
   ========================================================================== */

.statusbar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: 0.7rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface);
  font-family: var(--font-ui); font-size: 0.9rem;
}
.statusbar .status { font-family: var(--font-heading); font-size: 1rem; letter-spacing: 0.04em; }
.conn { width: 9px; height: 9px; border-radius: 50%; background: var(--wrong); box-shadow: 0 0 8px var(--wrong); display: inline-block; }
.conn.on { background: var(--right); box-shadow: 0 0 8px var(--right); }
.code-chip { font-family: var(--font-heading); letter-spacing: 0.25em; color: var(--ember-light); border: 1px solid var(--border-strong); padding: 0.1rem 0.6rem; border-radius: var(--radius); }

.fuse { position: relative; height: 4px; background: var(--surface-3); border-radius: 999px; overflow: visible; }
.fuse > .burn {
  position: absolute; inset: 0 auto 0 0; width: var(--left, 100%); border-radius: 999px;
  background: linear-gradient(90deg, var(--ember), var(--ember-light));
  transition: width 0.1s linear;
}
/* the spark at the burning end */
.fuse > .burn::after {
  content: ""; position: absolute; right: -5px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%;
  background: radial-gradient(circle, #fff3dc 0%, var(--ember-hot) 35%, rgba(217, 122, 79, 0) 70%);
  animation: spark 0.35s ease-in-out infinite alternate;
}
.fuse.low > .burn { background: linear-gradient(90deg, #8e2f2a, var(--wrong)); }
@keyframes spark { from { transform: scale(0.8); opacity: 0.8; } to { transform: scale(1.25); opacity: 1; } }

/* ==========================================================================
   Game: board
   ========================================================================== */

.board { display: grid; gap: 0.55rem; grid-template-columns: repeat(var(--cols, 6), minmax(0, 1fr)); }
.cat {
  --c: var(--cat-1);
  position: relative; display: grid; place-items: center; gap: 0.2rem; min-height: 78px; padding: 0.7rem 0.4rem;
  text-align: center; border-radius: var(--radius); border: 1px solid color-mix(in srgb, var(--c) 70%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 38%, var(--bg)), color-mix(in srgb, var(--c) 14%, var(--bg)));
  font-family: var(--font-heading); font-weight: 700; font-size: clamp(0.66rem, 1.2vw, 0.9rem);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--text);
}
.cat .icon { font-size: 1.3rem; line-height: 1; filter: saturate(0.7); }
.cat::after { /* the colored "lintel" above each column */
  content: ""; position: absolute; left: 12%; right: 12%; top: -1px; height: 2px; background: var(--c); box-shadow: 0 0 10px var(--c);
}

/* a card is a closed door with glowing seams */
.tile {
  --c: var(--cat-1);
  position: relative; display: grid; place-items: center; min-height: clamp(58px, 11vh, 108px);
  border-radius: var(--radius); border: 1px solid var(--border);
  background:
    linear-gradient(90deg, transparent 49.4%, rgba(0, 0, 0, 0.55) 49.5%, rgba(0, 0, 0, 0.55) 50.5%, transparent 50.6%),
    linear-gradient(180deg, #1c0f0a, #0f0806);
  font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.05rem, 2.4vw, 1.9rem); color: var(--ember-light);
  text-shadow: 0 0 14px rgba(217, 122, 79, 0.45);
  transition: transform 0.18s var(--ease), border-color 0.18s, box-shadow 0.18s, opacity 0.3s;
  user-select: none;
}
.tile::before { /* light leaking through the seams */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(217, 122, 79, 0.08), inset 0 -10px 18px -12px var(--c);
}
.board.can-pick .tile:not(.used):not(.empty) { cursor: pointer; }
.board.can-pick .tile:not(.used):not(.empty):hover {
  transform: translateY(-2px); border-color: var(--ember-light);
  box-shadow: 0 0 22px var(--ember-glow), inset 0 0 18px rgba(217, 122, 79, 0.18);
  color: var(--ember-hot);
}
.tile.used { opacity: 0.18; text-shadow: none; color: var(--faint); background: var(--bg-strong); }
.tile.used::before { box-shadow: none; }
.tile.empty { visibility: hidden; }
.tile.active {
  border-color: var(--ember-hot); color: #fff3dc;
  box-shadow: 0 0 0 1px var(--ember-hot), 0 0 32px var(--ember-glow);
  animation: pulse-glow 1.6s ease-in-out infinite;
}
@keyframes pulse-glow { 50% { box-shadow: 0 0 0 1px var(--ember-hot), 0 0 46px rgba(240, 160, 106, 0.55); } }

/* ==========================================================================
   Game: question / reveal stage
   ========================================================================== */

.stage {
  position: relative; display: grid; gap: 1.1rem; justify-items: center; text-align: center;
  padding: clamp(1.2rem, 4vw, 2.6rem); min-height: 52vh; align-content: start;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background:
    radial-gradient(ellipse 60% 45% at 50% 0%, rgba(191, 85, 46, 0.16), transparent 70%),
    var(--surface);
  overflow: hidden;
}
.stage-head { display: flex; gap: 0.7rem; align-items: center; flex-wrap: wrap; justify-content: center; }
.cat-chip {
  --c: var(--cat-1);
  font-family: var(--font-heading); font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase;
  padding: 0.3rem 0.8rem; border-radius: 999px; color: var(--text);
  border: 1px solid var(--c); background: color-mix(in srgb, var(--c) 25%, transparent);
}
.points { font-family: var(--font-heading); font-weight: 700; font-size: 1.3rem; color: var(--ember-light); }
.prompt {
  font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.3rem, 3.2vw, 2.4rem);
  line-height: 1.2; max-width: 32ch; white-space: pre-line;
}
.stage .media img, .stage .media video { max-height: 52vh; border-radius: var(--radius); border: 1px solid var(--border); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); }
.countdown { font-family: var(--font-heading); font-size: 5rem; color: var(--ember-light); text-shadow: 0 0 40px var(--ember-glow); line-height: 1; }

/* audio visual: flickering embers instead of a plain equalizer */
.embers { display: flex; gap: 6px; align-items: flex-end; height: 64px; }
.embers span {
  width: 9px; border-radius: 4px 4px 2px 2px; background: linear-gradient(0deg, var(--ember), var(--ember-hot));
  box-shadow: 0 0 12px var(--ember-glow); animation: flame 0.9s ease-in-out infinite;
}
.embers span:nth-child(2) { animation-delay: 0.12s; } .embers span:nth-child(3) { animation-delay: 0.3s; }
.embers span:nth-child(4) { animation-delay: 0.18s; } .embers span:nth-child(5) { animation-delay: 0.42s; }
.embers span:nth-child(6) { animation-delay: 0.06s; } .embers span:nth-child(7) { animation-delay: 0.24s; }
.embers.paused span { animation-play-state: paused; opacity: 0.35; }
@keyframes flame { 0%, 100% { height: 14px; } 50% { height: 60px; } }

.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.7rem; width: 100%; max-width: 760px; }
.choice {
  display: flex; align-items: center; gap: 0.8rem; padding: 0.95rem 1.1rem; text-align: left;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-strong); color: var(--text);
  font-family: var(--font-body); font-size: 1.15rem; cursor: default;
}
.choice .key { font-family: var(--font-heading); color: var(--ember-light); font-size: 0.9rem; min-width: 1.2rem; }
button.choice { cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; }
button.choice:hover { border-color: var(--ember-light); box-shadow: 0 0 18px var(--ember-glow); }
.choice.is-right { border-color: var(--right); color: var(--right); background: var(--right-bg); }
.choice.is-wrong { border-color: var(--wrong); color: var(--wrong); background: var(--wrong-bg); text-decoration: line-through; }

.answer-form { display: flex; gap: 0.6rem; width: 100%; max-width: 560px; }
.answer-form .input { font-size: 1.15rem; }

.reveal { display: grid; gap: 0.5rem; justify-items: center; animation: rise 0.5s var(--ease); }
.reveal .label { color: var(--muted); }
.reveal .answer {
  font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.5rem, 4vw, 2.8rem); color: var(--right);
  text-shadow: 0 0 30px rgba(232, 183, 90, 0.35);
}
.verdict { font-family: var(--font-ui); font-size: 1rem; font-weight: 600; }
.verdict.right { color: var(--right); }
.verdict.wrong { color: var(--wrong); }
.verdict .delta { font-family: var(--font-heading); font-size: 1.2rem; margin-left: 0.3rem; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.host-answer {
  width: 100%; max-width: 560px; text-align: left; padding: 0.75rem 1rem; border-radius: var(--radius);
  border: 1px dashed rgba(232, 183, 90, 0.45); background: rgba(232, 183, 90, 0.06); font-family: var(--font-ui); font-size: 0.9rem;
}
.host-answer b { color: var(--right); font-size: 1.05rem; }

/* the door opens when the question is revealed: two leaves swing away, a short ember flash */
.door-reveal { position: absolute; inset: 0; z-index: 5; display: flex; pointer-events: none; perspective: 1600px; }
.door-reveal .leaf {
  flex: 1; border: 1px solid var(--border-strong);
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.18) 0 2px, transparent 2px 26px),
    linear-gradient(180deg, #24130c, #120906);
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.7);
  transform-origin: left center; animation: door-open-left 0.85s var(--ease) forwards;
}
.door-reveal .leaf.right { transform-origin: right center; animation-name: door-open-right; }
.door-reveal::after {
  content: ""; position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(ellipse 35% 60% at 50% 50%, rgba(240, 160, 106, 0.55), transparent 70%);
  animation: ember-flash 0.85s ease-out forwards;
}
@keyframes door-open-left { to { transform: rotateY(-105deg); opacity: 0; } }
@keyframes door-open-right { to { transform: rotateY(105deg); opacity: 0; } }
@keyframes ember-flash { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }

/* ==========================================================================
   Game: buzzer – a glowing ember orb set in an iron ring
   ========================================================================== */

.buzzer {
  position: relative; width: min(64vw, 230px); aspect-ratio: 1; border-radius: 50%; cursor: pointer;
  border: 6px solid #2a1812; outline: 1px solid var(--border-strong); outline-offset: 4px;
  background: radial-gradient(circle at 38% 30%, #ffd9b0 0%, var(--ember-hot) 12%, var(--ember) 45%, #5a1c0c 80%, #2a0c05 100%);
  box-shadow: 0 0 40px rgba(217, 122, 79, 0.45), inset 0 -12px 30px rgba(0, 0, 0, 0.55), 0 10px 0 #1a0906;
  color: #fff3dc; font-family: var(--font-heading); font-weight: 700; font-size: 1.6rem; letter-spacing: 0.25em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  transition: transform 0.07s, box-shadow 0.07s, filter 0.25s;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  animation: breathe 2.4s ease-in-out infinite;
}
.buzzer:active:not(:disabled) { transform: translateY(8px); box-shadow: 0 0 60px rgba(240, 160, 106, 0.7), inset 0 -6px 20px rgba(0, 0, 0, 0.5), 0 2px 0 #1a0906; }
.buzzer:disabled { cursor: not-allowed; animation: none; filter: grayscale(0.85) brightness(0.45); box-shadow: inset 0 -12px 30px rgba(0, 0, 0, 0.6), 0 10px 0 #1a0906; }
.buzzer.pressed { animation: none; filter: brightness(1.25); box-shadow: 0 0 80px rgba(240, 160, 106, 0.8), 0 2px 0 #1a0906; transform: translateY(8px); }
@keyframes breathe { 50% { box-shadow: 0 0 64px rgba(217, 122, 79, 0.6), inset 0 -12px 30px rgba(0, 0, 0, 0.55), 0 10px 0 #1a0906; } }

/* ==========================================================================
   Game: players
   ========================================================================== */

.players { display: grid; gap: 0.45rem; }
.player {
  display: flex; align-items: center; gap: 0.65rem; padding: 0.55rem 0.7rem;
  border-radius: var(--radius); background: var(--bg-strong); border: 1px solid transparent;
  font-family: var(--font-ui); font-size: 0.92rem; transition: border-color 0.2s, box-shadow 0.2s;
}
.player .turn { font-family: var(--font-heading); color: var(--faint); width: 1.4rem; text-align: right; font-size: 0.8rem; }
.player .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.player .guest { color: var(--faint); font-weight: 400; font-size: 0.8rem; }
.player .score { font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem; color: var(--right); font-variant-numeric: tabular-nums; }
.player .score.neg { color: var(--wrong); }
.player.me { border-color: var(--border-strong); }
.player.picker { border-color: var(--ember-light); box-shadow: inset 3px 0 0 var(--ember-light), 0 0 16px rgba(217, 122, 79, 0.15); }
.player.picker .turn { color: var(--ember-light); }
.player.answering { border-color: var(--ember-hot); box-shadow: 0 0 20px var(--ember-glow); }
.player.offline { opacity: 0.4; }
.player .tools { display: flex; gap: 0.25rem; }
.player .tools button {
  background: transparent; border: 1px solid var(--border); color: var(--muted); border-radius: var(--radius);
  width: 1.6rem; height: 1.6rem; cursor: pointer; font-family: var(--font-ui);
}
.player .tools button:hover { border-color: var(--ember-light); color: var(--ember-hot); }

/* ==========================================================================
   Lobby, podium, error pages
   ========================================================================== */

.halo {
  position: relative; display: grid; justify-items: center; gap: 1rem; text-align: center; padding: 3rem 1.5rem;
}
.halo::before { /* the concentric rings from the website hero */
  content: ""; position: absolute; inset: 50% auto auto 50%; width: 520px; height: 520px; transform: translate(-50%, -50%);
  border-radius: 50%; pointer-events: none;
  background:
    radial-gradient(circle, rgba(191, 85, 46, 0.2) 0%, transparent 45%),
    radial-gradient(circle, transparent 59.6%, rgba(191, 85, 46, 0.18) 60%, transparent 60.4%),
    radial-gradient(circle, transparent 79.6%, rgba(191, 85, 46, 0.1) 80%, transparent 80.4%);
}
.halo > * { position: relative; }
.big-code {
  font-family: var(--font-heading); font-weight: 700; font-size: clamp(2.4rem, 7vw, 4rem); letter-spacing: 0.35em;
  color: var(--ember-light); text-shadow: 0 0 30px var(--ember-glow); padding-left: 0.35em;
}
.chips { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; }

.podium { display: grid; gap: 0.5rem; width: 100%; max-width: 480px; }
.podium .player { font-size: 1.05rem; padding: 0.8rem 1rem; }
.podium .player:first-child { border-color: var(--right); box-shadow: 0 0 26px rgba(232, 183, 90, 0.25); }
.podium .rank { font-family: var(--font-heading); width: 2rem; color: var(--ember-light); }
.podium .player:first-child .rank { color: var(--right); }

.error-code {
  font-family: var(--font-heading); font-weight: 700; font-size: clamp(4rem, 14vw, 7.5rem); line-height: 1;
  color: transparent; -webkit-text-stroke: 1px var(--ember-light); text-shadow: 0 0 40px var(--ember-glow);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}