/* ═══════════════════════════════════════════════════════════
   SHOW.CSS — Game-Show Production Design System
   Reference: classic Jeopardy board presentation.
   Navy board · color-coded plaques · clean value tiles ·
   avatar scoreboard pods · segmented answer timer.
   Loaded LAST in every page. Replaces the retro system.
   ═══════════════════════════════════════════════════════════ */

:root {
  --navy: #0a1a5e;
  --navy-dk: #050d3a;
  --navy-lt: #132a8f;
  --board: #07124a;
  --gold: #e8b64c;
  --gold-dk: #b8862a;
  --white: #ffffff;
  --off: #d7ddf5;
  --muted: #8a94c0;
  --red: #d9342c;
  --orange: #f5a623;
  --green: #37c871;
  --plaque-teal: #0d9aa0;
  --plaque-purple: #6f46c9;
  --plaque-gold: #c99a2e;
  --plaque-blue: #2e6bd8;
  --plaque-pink: #c95a8f;
  --plaque-green: #2f9e63;
}

* { font-family: 'Arial', 'Helvetica Neue', system-ui, sans-serif !important; }

/* ── Board backdrop: deep navy with JEOPARDY watermark ── */
body {
  background: radial-gradient(ellipse at 50% 20%, var(--navy) 0%, var(--board) 62%, #03071f 100%) !important;
  color: var(--white) !important;
}
/* watermark handled by a dedicated div in host.html; solo/player get subtle one */
#game-screen { position: relative; }

/* ── Top bar / game header ── */
.game-header {
  display: flex; align-items: center; gap: 1rem;
  padding: 0.7rem 1.4rem;
  background: rgba(4, 10, 40, 0.85);
  border-bottom: 3px solid var(--gold);
}
.game-title {
  font-weight: 800 !important;
  font-size: 1.05rem !important;
  color: var(--gold) !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  text-shadow: 0 2px 6px rgba(0,0,0,0.6) !important;
}

/* ── SCOREBOARD PODS (avatar · name · bar · score) ── */
.scoreboard-mini { display: flex !important; gap: 1.1rem !important; margin-left: auto !important; }
.score-pod {
  display: flex; align-items: center; gap: 0.65rem;
  background: linear-gradient(180deg, #101c54, #0a1238);
  border: 1px solid #22347e;
  border-radius: 12px;
  padding: 0.45rem 0.8rem;
  min-width: 150px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.45);
}
.score-pod .avatar {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 1rem; color: #fff;
  border: 2px solid rgba(255,255,255,0.7);
  flex-shrink: 0;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.score-pod .pod-main { display: flex; flex-direction: column; min-width: 0; }
.score-pod .pod-name {
  font-size: 0.72rem; font-weight: 700; color: var(--off);
  letter-spacing: 0.04em; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; max-width: 110px; text-transform: uppercase;
}
.score-pod .pod-bar {
  height: 5px; border-radius: 3px; margin: 3px 0;
  background: rgba(255,255,255,0.14);
}
.score-pod .pod-bar > span { display: block; height: 100%; border-radius: 3px; }
.score-pod .pod-lvl { font-size: 0.6rem; color: var(--muted); letter-spacing: 0.08em; }
.score-pod .pod-score {
  font-size: 1.25rem; font-weight: 900; color: #fff; margin-left: auto;
  text-shadow: 0 1px 3px rgba(0,0,0,0.7); white-space: nowrap;
}
.score-pod .pod-score.neg { color: #ff7b72; }

/* ── CATEGORY PLAQUES (color-coded, rounded, clean) ── */
.cat-plaque {
  border-radius: 14px 14px 4px 4px;
  padding: 0.75rem 0.6rem;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  text-align: center;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 3px 0 rgba(0,0,0,0.4) !important;
  min-height: 3.4rem;
  display: flex; align-items: center; justify-content: center;
  word-break: break-word;
}
.cat-plaque.c0 { background: linear-gradient(180deg, #14b6bd, var(--plaque-teal)); }
.cat-plaque.c1 { background: linear-gradient(180deg, #8a5fe0, var(--plaque-purple)); }
.cat-plaque.c2 { background: linear-gradient(180deg, #e2b23f, var(--plaque-gold)); }
.cat-plaque.c3 { background: linear-gradient(180deg, #3f7de6, var(--plaque-blue)); }
.cat-plaque.c4 { background: linear-gradient(180deg, #dd6fa3, var(--plaque-pink)); }
.cat-plaque.c5 { background: linear-gradient(180deg, #42b077, var(--plaque-green)); }

/* ── VALUE TILES — navy gradient, gold values, blue selected ring ── */
.tile-gold {
  font-weight: 900 !important;
  font-size: clamp(1rem, 1.9vw, 1.45rem) !important;
  color: var(--gold) !important;
  background: linear-gradient(180deg, var(--navy-lt) 0%, var(--navy) 58%, #07123f 100%) !important;
  border: none !important;
  border-radius: 8px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 3px 0 rgba(0,0,0,0.45) !important;
  text-shadow: 0 2px 4px rgba(0,0,0,0.7) !important;
  aspect-ratio: auto !important;
  height: 3.9rem;
  cursor: pointer;
  transition: transform 0.07s, box-shadow 0.07s;
}
.tile-gold:hover:not(.used) {
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 3px #3f7de6, inset 0 1px 0 rgba(255,255,255,0.2), 0 5px 0 rgba(0,0,0,0.5) !important;
}
.tile-gold.used {
  background: #050a26 !important;
  color: #2c3766 !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05) !important;
  text-shadow: none !important;
  cursor: default;
}

/* ── Board grid ── */
.board-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.55rem;
  max-width: 1080px;
  margin: 1.2rem auto;
  padding: 0 1rem;
}

/* ── JEOPARDY watermark on board ── */
.board-watermark {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; z-index: 0;
  font-size: clamp(3rem, 12vw, 9rem);
  font-weight: 900;
  color: rgba(255,255,255,0.045);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: rotate(-12deg);
}

/* ── Question view — clean blue panel ── */
.q-screen, .question-card, .q-card {
  background: linear-gradient(180deg, #12308f 0%, #0a1a5e 100%) !important;
  border: none !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 40px rgba(0,0,0,0.55) !important;
}
.question-category, .q-cat {
  color: var(--off) !important;
  font-size: 0.85rem !important;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.question-value, .q-val {
  color: var(--gold) !important;
  font-size: 1.3rem !important;
  font-weight: 900;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5) !important;
}
.question-prompt, .q-prompt {
  color: #fff !important;
  font-size: clamp(1rem, 2.2vw, 1.35rem) !important;
  font-weight: 600;
  line-height: 1.65 !important;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5) !important;
}

/* ── ANSWER TIMER BAR (segmented, red) ── */
.timer-bar {
  display: flex; gap: 4px;
  max-width: 620px; margin: 1.4rem auto 0;
  padding: 0 1rem;
}
.timer-seg {
  height: 14px; flex: 1;
  border-radius: 3px;
  background: #3a0a08;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.6);
  transition: background 0.25s;
}
.timer-seg.on { background: linear-gradient(180deg, #ff5a4e, var(--red)); box-shadow: 0 0 8px rgba(217,52,44,0.6); }
.timer-seg.last { background: linear-gradient(180deg, #ffc96b, var(--orange)); box-shadow: 0 0 10px rgba(245,166,35,0.8); }

/* ── Buttons — clean game-show style ── */
.btn, .btn-primary, .btn-orange, .btn-green, .btn-red, .btn-play,
.btn-pass, .btn-end, .btn-sm, .btn-submit, .btn-music {
  border: none !important;
  border-radius: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  box-shadow: 0 3px 0 rgba(0,0,0,0.4) !important;
  transition: transform 0.06s, box-shadow 0.06s, filter 0.15s !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35) !important;
  font-size: 0.78rem !important;
}
.btn:active, .btn-primary:active, .btn-orange:active, .btn-green:active,
.btn-red:active, .btn-play:active, .btn-pass:active, .btn-end:active,
.btn-sm:active, .btn-submit:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 rgba(0,0,0,0.4);
}
.btn-primary, .btn-play { background: linear-gradient(180deg, #ffd98a, var(--gold) 55%, var(--gold-dk)) !important; color: #3a2600 !important; }
.btn-orange { background: linear-gradient(180deg, #ffc96b, var(--orange) 55%, #c77a12) !important; color: #3a2600 !important; }
.btn-green { background: linear-gradient(180deg, #5ee894, var(--green) 55%, #1f7a44) !important; color: #063018 !important; }
.btn-red, .btn-end { background: linear-gradient(180deg, #ff6b5e, var(--red) 55%, #8f1d19) !important; color: #fff !important; }
.btn-pass, .btn-sm { background: linear-gradient(180deg, #5a6ec4, #33428f 55%, #1c2658) !important; color: #fff !important; }
.btn-music { background: #22347e !important; color: var(--off) !important; padding: 0.5rem 0.8rem !important; font-size: 0.68rem !important; }

/* ── Inputs — dark wells, white text ── */
.input, #input-room, #input-name {
  background: rgba(4, 10, 40, 0.75) !important;
  border: 2px solid #2a3f96 !important;
  border-radius: 10px !important;
  color: #fff !important;
  font-weight: 700 !important;
  text-align: center !important;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.5) !important;
  padding: 0.85rem 1rem !important;
  font-size: 0.95rem !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.input:focus { border-color: var(--gold) !important; }
.input::placeholder { color: #5a6599 !important; }

/* ── Cards / panels ── */
.lobby-card, .intro-card, .player-info, .c-row, .contestant-lineup,
.explain-box, .explanation-box, .buzz-winner {
  background: linear-gradient(180deg, #101c54 0%, #0a1238 100%) !important;
  border: 1px solid #22347e !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45) !important;
  color: var(--off) !important;
}

/* ── Title / logo ── */
.title, .logo, .intro-logo, .room-code, .final-title {
  color: var(--gold) !important;
  font-weight: 900 !important;
  text-shadow: 0 3px 8px rgba(0,0,0,0.65) !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: unset !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}
.room-code {
  font-size: 2.6rem !important;
  letter-spacing: 0.4em !important;
  background: rgba(4,10,40,0.8) !important;
  border: 2px solid var(--gold) !important;
  border-radius: 12px !important;
  padding: 0.7rem 1.4rem !important;
}
.subtitle, .intro-sub, .waiting-text, .label, .buzzer-status {
  color: var(--muted) !important;
  letter-spacing: 0.1em !important;
  font-size: 0.72rem !important;
  text-transform: uppercase;
  font-weight: 700;
}

/* ── Reveal banners ── */
.reveal-correct {
  background: linear-gradient(180deg, #37c871, #1f7a44) !important;
  color: #eafff1 !important; border: none !important;
  border-radius: 12px !important; font-weight: 800;
}
.reveal-wrong {
  background: linear-gradient(180deg, #d9342c, #8f1d19) !important;
  color: #ffe9e7 !important; border: none !important;
  border-radius: 12px !important; font-weight: 800;
}

/* ── Player scores ── */
.player-score, .score, .final-score, .p-score, .sb-score {
  color: #fff !important; font-weight: 900 !important;
  text-shadow: 0 2px 5px rgba(0,0,0,0.6) !important;
}
.player-name, .p-name, .final-player {
  font-weight: 700 !important; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--off) !important;
}

/* ── Final screen podiums ── */
.podium-spot {
  background: linear-gradient(180deg, #101c54, #0a1238) !important;
  border: 1px solid #22347e !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45) !important;
}
.final-rank, .rank { color: var(--gold) !important; font-weight: 900 !important; }

/* ── Buzzer (player) — big round red dome, game-show style ── */
.buzzer-dome {
  border-radius: 50%;
  border: 5px solid #7a1611 !important;
  background: radial-gradient(circle at 38% 30%, #ff9d8f 0%, #e8453c 34%, #a11f1a 72%, #6d0f0b 100%) !important;
  box-shadow:
    inset 0 10px 14px rgba(255,255,255,0.35),
    inset 0 -14px 20px rgba(0,0,0,0.45),
    0 8px 0 #4a0a07,
    0 14px 26px rgba(0,0,0,0.55) !important;
  color: #fff !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
}

/* ── CRT scanlines: REMOVE (modern game-show look) ── */
body::after { display: none !important; }

/* ── Motion ── */
@keyframes showShake {
  0%,100% { transform: translate(0,0); }
  20% { transform: translate(-6px, 3px); }
  40% { transform: translate(5px, -4px); }
  60% { transform: translate(-4px, -3px); }
  80% { transform: translate(4px, 3px); }
}
.shake { animation: showShake 0.32s ease-out; }
@keyframes showPop { 0% { transform: scale(1); } 40% { transform: scale(1.3); color: var(--gold); } 100% { transform: scale(1); } }
.score-pop { animation: showPop 0.4s ease-out; }