:root {
  --neon-cyan:   #00f0ff;
  --neon-pink:   #ff2e88;
  --neon-yellow: #ffd800;
  --neon-green:  #39ff14;
  --neon-purple: #b026ff;
  --neon-red:    #ff3b3b;
  --bg-0:        #0a021a;
  --bg-1:        #14043a;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body {
  font-family: 'Press Start 2P', monospace;
  background: radial-gradient(ellipse at 50% 15%, var(--bg-1) 0%, var(--bg-0) 70%, #000 100%);
  color: #fff;
  min-height: 100vh;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.5vh 3vw 3vh;
  position: relative;
  -webkit-font-smoothing: none;
}

/* ---- backdrop ---- */
.grid {
  position: fixed; inset: 0; z-index: 0;
  background-image:
    linear-gradient(rgba(176,38,255,0.20) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,240,255,0.15) 1px, transparent 1px);
  background-size: 44px 44px;
  transform: perspective(400px) rotateX(60deg);
  transform-origin: 50% 100%;
  mask-image: linear-gradient(to top, #000 0%, transparent 65%);
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 65%);
  animation: gridScroll 3s linear infinite;
  opacity: 0.7;
}
@keyframes gridScroll { from { background-position: 0 0; } to { background-position: 0 44px; } }
.scanlines {
  position: fixed; inset: 0; z-index: 50; pointer-events: none;
  background: repeating-linear-gradient(to bottom,
    rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px,
    rgba(0,0,0,0.18) 3px, rgba(0,0,0,0.18) 4px);
  mix-blend-mode: multiply;
}
.vignette { position: fixed; inset: 0; z-index: 49; pointer-events: none;
  box-shadow: inset 0 0 200px rgba(0,0,0,0.9); }

/* ---- lite mode: drop the GPU-heavy effects for weak displays (Smart TVs) ----
   Keeps the neon palette and sharp retro drop-shadows; removes the animated
   perspective grid, scanlines, backdrop blur, glow blurs, and every looping
   animation/transition — the things that saturate a TV's compositor. */
html.lite .grid,
html.lite .scanlines { display: none !important; }
html.lite *,
html.lite *::before,
html.lite *::after {
  animation: none !important;
  transition: none !important;
  text-shadow: none !important;
}
html.lite .overlay {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background: rgba(4,1,15,0.94) !important;
}
html.lite .question,
html.lite .timerfill { box-shadow: none !important; }

/* ---- title ---- */
header { z-index: 10; text-align: center; margin: 0.5vh 0 1.5vh; }
.title {
  font-size: clamp(1.4rem, 5.5vw, 4rem);
  letter-spacing: 2px; line-height: 1.15; color: var(--neon-yellow);
  text-shadow: 3px 3px 0 var(--neon-pink), 6px 6px 0 var(--neon-purple), 0 0 18px rgba(255,46,136,0.8);
  animation: titlePulse 1.6s ease-in-out infinite alternate;
}
.title .bot { color: var(--neon-cyan);
  text-shadow: 3px 3px 0 var(--neon-purple), 6px 6px 0 var(--neon-pink), 0 0 18px rgba(0,240,255,0.9); }
@keyframes titlePulse { from { filter: brightness(1); transform: translateY(0); } to { filter: brightness(1.25); transform: translateY(-3px); } }
.subtitle { margin-top: 1vh; font-size: clamp(0.4rem, 1.2vw, 0.75rem); color: var(--neon-green); letter-spacing: 3px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ---- layout ---- */
.wrap {
  z-index: 10; width: min(1180px, 96vw);
  display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 2vw; align-items: start;
}
@media (max-width: 900px) { .wrap { grid-template-columns: 1fr; } }

.stage { display: flex; flex-direction: column; gap: 2vh; }

.catbar { display: flex; justify-content: space-between; align-items: center; font-size: clamp(0.5rem, 1.4vw, 0.9rem); gap: 1em; }
.category { color: var(--bg-0); background: var(--neon-cyan); padding: 0.7em 1em; border: 3px solid #fff; box-shadow: 4px 4px 0 var(--neon-pink); text-transform: uppercase; }
.qnum { color: var(--neon-purple); white-space: nowrap; }

.question {
  min-height: 5.5em; font-size: clamp(0.72rem, 2.1vw, 1.35rem); line-height: 1.9; color: #fff;
  text-shadow: 0 0 8px rgba(0,240,255,0.5);
  border: 3px solid var(--neon-purple); background: rgba(20,4,58,0.6);
  padding: 1.2em; box-shadow: inset 0 0 30px rgba(176,38,255,0.35);
}
.caret { display: inline-block; width: 0.6em; color: var(--neon-green); animation: blink 0.6s steps(1) infinite; }

.answers { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4vh 1.5vw; }
@media (max-width: 620px) { .answers { grid-template-columns: 1fr; } }

.answer {
  display: flex; align-items: center; gap: 0.8em;
  font-size: clamp(0.58rem, 1.6vw, 1.05rem); line-height: 1.6; text-align: left;
  padding: 1em; border: 3px solid var(--neon-cyan); background: rgba(0,240,255,0.05); color: #cdefff;
  font-family: inherit; cursor: default; width: 100%;
  opacity: 0; transform: translateY(12px);
  transition: opacity 0.25s, transform 0.25s, background 0.15s, color 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.answer.show { opacity: 1; transform: translateY(0); }
.answer .key { color: var(--bg-0); background: var(--neon-yellow); padding: 0.35em 0.6em; flex-shrink: 0; }
.answer.live { cursor: pointer; }
.answer.live:hover { background: rgba(0,240,255,0.18); box-shadow: 0 0 16px rgba(0,240,255,0.5); transform: translateY(-2px); }
.answer.picked { border-color: var(--neon-yellow); background: rgba(255,216,0,0.12); box-shadow: 0 0 20px rgba(255,216,0,0.6); }
.answer.picked .key { background: var(--neon-pink); color: #fff; }
.answer.correct { background: var(--neon-green); color: #04210a; border-color: #fff; box-shadow: 0 0 24px var(--neon-green), 4px 4px 0 var(--neon-purple); animation: flash 0.4s steps(1) 6; }
.answer.correct .key { background: #04210a; color: var(--neon-green); }
.answer.wrongpick { background: rgba(255,59,59,0.2); border-color: var(--neon-red); box-shadow: 0 0 20px rgba(255,59,59,0.6); }
.answer.dim { opacity: 0.28; }
@keyframes flash { 50% { filter: brightness(1.6); } }

/* ---- timer ---- */
.statusbar { display: flex; align-items: center; gap: 1.5vw; }
.timerlabel { font-size: clamp(0.45rem, 1.2vw, 0.85rem); color: var(--neon-yellow); white-space: nowrap; }
.timerbar { flex: 1; height: 22px; border: 3px solid var(--neon-yellow); padding: 3px; background: rgba(0,0,0,0.5); }
.timerfill { height: 100%; width: 100%; background: var(--neon-green); box-shadow: 0 0 12px var(--neon-green); }
.timernum { font-size: clamp(0.8rem, 2.2vw, 1.5rem); color: var(--neon-green); min-width: 2.4em; text-align: right; }
.timernum.warn { color: var(--neon-pink); animation: blink 0.4s steps(1) infinite; }

/* ---- bot speech ---- */
.bot-say {
  min-height: 2.4em; font-size: clamp(0.5rem, 1.4vw, 0.9rem); line-height: 1.7; color: var(--neon-pink);
  border-left: 4px solid var(--neon-pink); padding: 0.8em 1em; background: rgba(255,46,136,0.08);
}
.bot-say b { color: var(--neon-green); }
.bot-say .good { color: var(--neon-green); }
.bot-say .bad { color: var(--neon-red); }

/* ---- sidebar ---- */
.sidebar { display: flex; flex-direction: column; gap: 2vh; }
.panel { border: 3px solid var(--neon-purple); background: rgba(20,4,58,0.6); box-shadow: inset 0 0 20px rgba(176,38,255,0.25); padding: 1em; }
.panel h2 { font-size: clamp(0.55rem, 1.3vw, 0.85rem); color: var(--neon-yellow); margin-bottom: 0.9em; letter-spacing: 1px; }

/* player HUD */
.hud .handle { color: var(--neon-cyan); font-size: 0.85rem; word-break: break-all; }
.hud .row { display: flex; justify-content: space-between; font-size: 0.6rem; line-height: 2.1; color: #cdefff; }
.hud .row b { color: var(--neon-green); }
.hud .pts { font-size: 1.4rem; color: var(--neon-green); text-shadow: 0 0 10px var(--neon-green); margin: 0.3em 0; }

/* join form */
.join p { font-size: 0.55rem; line-height: 1.9; color: #cdefff; margin-bottom: 1em; }
.join input {
  font-family: inherit; width: 100%; padding: 0.8em; font-size: 0.7rem; color: var(--neon-green);
  background: #04010f; border: 3px solid var(--neon-cyan); margin-bottom: 0.8em; outline: none;
}
.join input:focus { border-color: var(--neon-yellow); box-shadow: 0 0 14px rgba(255,216,0,0.5); }
.btn {
  font-family: inherit; width: 100%; padding: 0.9em; font-size: 0.65rem; cursor: pointer;
  color: var(--bg-0); background: var(--neon-green); border: 3px solid #fff; box-shadow: 4px 4px 0 var(--neon-purple);
  transition: transform 0.08s, box-shadow 0.08s;
}
.btn:hover { filter: brightness(1.1); }
.btn:active { transform: translate(4px,4px); box-shadow: 0 0 0 var(--neon-purple); }
.btn.secondary { background: transparent; color: var(--neon-cyan); border-color: var(--neon-cyan); box-shadow: none; font-size: 0.5rem; padding: 0.6em; margin-top: 0.6em; }
.err { color: var(--neon-red); font-size: 0.5rem; line-height: 1.7; min-height: 1.2em; margin-top: 0.4em; }

/* leaderboard */
.lb { list-style: none; display: flex; flex-direction: column; gap: 0.5em; }
.lb li { display: flex; align-items: center; gap: 0.6em; font-size: 0.55rem; line-height: 1.7; color: #cdefff; }
.lb .n { color: var(--neon-yellow); width: 1.6em; }
.lb .h { flex: 1; color: var(--neon-cyan); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb .p { color: var(--neon-green); }
.lb .me { background: rgba(57,255,20,0.12); outline: 1px solid var(--neon-green); padding: 0.2em 0.3em; }
.lb .empty { color: var(--neon-purple); font-size: 0.5rem; }

.float-pts {
  position: fixed; z-index: 60; font-size: 1.6rem; color: var(--neon-green);
  text-shadow: 0 0 12px var(--neon-green); pointer-events: none;
  animation: floatUp 1.6s ease-out forwards;
}
@keyframes floatUp { 0% { opacity: 0; transform: translateY(0) scale(0.6); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateY(-90px) scale(1.2); } }

/* ---- live scoreboard columns ---- */
.lb li .cc { color: var(--neon-green); }
.lb li .ic { color: var(--neon-red); }
.lb li .p { color: var(--neon-yellow); min-width: 3em; text-align: right; }

/* ---- join card on the display ---- */
.joincard p { font-size: 0.5rem; line-height: 1.9; color: #cdefff; margin-bottom: 0.6em; }
.joincard .tiny { font-size: 0.45rem; color: var(--neon-purple); margin-top: 0.6em; }
.joinbig {
  font-size: clamp(0.6rem, 1.4vw, 0.95rem); color: var(--bg-0); background: var(--neon-green);
  border: 3px solid #fff; box-shadow: 4px 4px 0 var(--neon-pink); padding: 0.7em; text-align: center;
  word-break: break-all;
}

/* ---- get-ready lead-in (before each question) ---- */
.getready {
  position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center;
  background: rgba(4,1,15,0.92); padding: 6vw; text-align: center;
}
.getready-card {
  font-size: clamp(1.2rem, 5.5vw, 3.4rem); line-height: 1.6; color: var(--neon-yellow);
  text-shadow: 3px 3px 0 var(--neon-pink), 0 0 22px rgba(255,216,0,0.8);
}

/* ---- lobby / winner overlay ---- */
.overlay {
  position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center;
  background: rgba(4,1,15,0.86); backdrop-filter: blur(2px); padding: 4vw; text-align: center;
}
.overlay-card { max-width: 780px; }
.ov-kicker { font-size: clamp(0.6rem, 1.8vw, 1.1rem); color: var(--neon-pink); letter-spacing: 2px; margin-bottom: 1.2em; }
.ov-title {
  font-size: clamp(1.6rem, 7vw, 4.5rem); color: var(--neon-cyan); line-height: 1.2; word-break: break-word;
  text-shadow: 3px 3px 0 var(--neon-purple), 0 0 22px rgba(0,240,255,0.8);
}
.ov-title.win { color: var(--neon-yellow); text-shadow: 3px 3px 0 var(--neon-pink), 0 0 26px rgba(255,216,0,0.9); animation: titlePulse 1s ease-in-out infinite alternate; }
.ov-count { font-size: clamp(3rem, 12vw, 8rem); color: var(--neon-green); margin: 0.2em 0; text-shadow: 0 0 24px var(--neon-green); }
.ov-score { font-size: clamp(0.9rem, 2.6vw, 1.6rem); color: var(--neon-green); margin: 0.8em 0; }
.ov-sub { font-size: clamp(0.5rem, 1.4vw, 0.85rem); color: #cdefff; line-height: 1.8; margin-top: 0.6em; }
.ov-join { font-size: clamp(0.55rem, 1.6vw, 1rem); color: var(--neon-yellow); margin-top: 1.2em; line-height: 1.8; }
.ov-join b { color: var(--neon-cyan); }
.ov-players, .ov-next { font-size: clamp(0.5rem, 1.3vw, 0.8rem); color: var(--neon-purple); margin-top: 1.2em; }
.ov-qr {
  width: clamp(150px, 22vw, 250px); height: auto; aspect-ratio: 1; display: block; margin: 1.4em auto 0;
  background: #fff; padding: 10px; border: 5px solid var(--neon-cyan); box-shadow: 6px 6px 0 var(--neon-pink);
  image-rendering: pixelated;
}

/* ============ NEW LAYOUT: title centered, QR pinned top-right ============ */
.topbar {
  z-index: 10; width: min(1180px, 96vw); display: flex; align-items: center; justify-content: center;
  margin: 0.5vh 0 1.5vh;
}
.qrbox {
  position: fixed; top: 16px; right: 16px; z-index: 40;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.qrimg {
  width: clamp(74px, 9vw, 128px); height: auto; aspect-ratio: 1; background: #fff; padding: 5px;
  border: 4px solid var(--neon-cyan); box-shadow: 4px 4px 0 var(--neon-pink); image-rendering: pixelated;
}
@media (max-width: 700px) {
  .qrbox { position: static; margin: 0 auto 1vh; } /* stack on narrow screens */
}
.qrlabel { font-size: clamp(0.4rem, 1vw, 0.55rem); color: var(--neon-green); letter-spacing: 1px; }
.qrurl { font-size: 0.42rem; color: var(--neon-cyan); word-break: break-all; max-width: 150px; text-align: center; line-height: 1.5; }
.titleblock { text-align: center; }

/* ============ NEW LAYOUT: stage width + bottom leaderboard ============ */
.stage { width: min(1000px, 94vw); margin: 0 auto; }

.scorebar {
  z-index: 10; width: min(1180px, 96vw); margin: 2.5vh auto 0; border-top: 3px solid var(--neon-purple); padding-top: 1.4vh;
}
.scorebar h2 { font-size: clamp(0.55rem, 1.3vw, 0.85rem); color: var(--neon-yellow); margin-bottom: 1em; letter-spacing: 1px; }
.scorebar h2 .live { color: var(--neon-green); font-size: 0.5rem; margin-left: 0.6em; animation: blink 1s steps(1) infinite; }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 0.7em; }
.chips li {
  display: flex; align-items: center; gap: 0.55em; font-size: clamp(0.5rem, 1.1vw, 0.62rem); line-height: 1.6;
  padding: 0.7em 0.9em; border: 2px solid var(--neon-cyan); background: rgba(0,240,255,0.06);
}
.chips li.lead { border-color: var(--neon-yellow); background: rgba(255,216,0,0.1); box-shadow: 0 0 14px rgba(255,216,0,0.5); }
.chips li.empty { border: none; background: none; color: var(--neon-purple); }
.chips .rk { color: var(--neon-yellow); }
.chips .h { color: var(--neon-cyan); max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chips .cc { color: var(--neon-green); }
.chips .ic { color: var(--neon-red); }
.chips .p { color: var(--neon-yellow); min-width: 2.6em; text-align: right; }
.chips .p.neg { color: var(--neon-red); }

/* ============================================================
   FILL THE SCREEN — big-display layout.
   The display (index.html) is meant for a TV / Pi kiosk, so let
   the stage grow to fill the viewport, widen the content, and
   scale the type up. (play.html has its own inline styles and is
   unaffected by anything in this file.)
   ============================================================ */
/* Type is sized by viewport HEIGHT (vh), not width — height is what constrains
   fit, so 1920x1080 and 2560x1080 (ultrawide) render identically instead of the
   text ballooning on wide screens and overflowing into the timer/leaderboard. */
header.topbar { flex: 0 0 auto; margin: 0.4vh 0 1vh; }
.title { font-size: clamp(1.6rem, 5.4vh, 4rem); }

/* stage spans the screen and grows to fill the vertical space; its content is
   vertically centered so the block sits evenly in the available height. */
.stage {
  width: min(1800px, 96vw);
  flex: 1 0 auto;          /* grow to fill, but never shrink below content */
  justify-content: center;
  gap: 1.8vh;
}

/* category tag + round/difficulty/Q stats, centered as one line under the title */
.catbar { font-size: clamp(0.7rem, 2.4vh, 1.3rem); flex: 0 0 auto; justify-content: center; gap: 1.2em; }
.category { border-width: 4px; }
.qnum { text-align: center; }

.question {
  font-size: clamp(1rem, 3.5vh, 2.2rem);
  line-height: 1.55;
  padding: 0.8em 1.1em;
  min-height: 0;
  flex: 0 0 auto;
  max-height: 44vh;
  overflow: auto;
}

/* answer tiles: natural height (no forced stretch — that overlapped the timer) */
.answers { flex: 0 0 auto; gap: 1.6vh 2vw; }
.answer {
  font-size: clamp(0.85rem, 3.1vh, 1.9rem);
  padding: 0.7em 1.1em;
}

/* timer + bot speech scale by height too */
.statusbar { gap: 2vw; flex: 0 0 auto; }
.timerlabel { font-size: clamp(0.7rem, 2.2vh, 1.2rem); }
.timerbar { height: clamp(20px, 2.6vh, 40px); }
.timernum { font-size: clamp(1.1rem, 4vh, 2.4rem); }
.bot-say { font-size: clamp(0.7rem, 2.4vh, 1.3rem); min-height: 0; flex: 0 0 auto; }

/* leaderboard spans the width with larger chips */
.scorebar { width: min(1800px, 96vw); flex: 0 0 auto; margin: 1.2vh auto 0; }
.scorebar h2 { font-size: clamp(0.7rem, 2vh, 1.1rem); margin-bottom: 0.5em; }
.chips li { font-size: clamp(0.55rem, 1.7vh, 0.95rem); padding: 0.6em 0.9em; }
.chips .h { max-width: 14em; }

/* bigger QR so it scans from across the room */
.qrimg { width: clamp(96px, 10vw, 190px); }