/* ============================================================
   JEOPARDY STUDIO — "Midnight Broadcast"
   A dark game-show stage: ultramarine tiles, gold scoreboard
   type, spotlight gradients, and confetti when it counts.
   ============================================================ */

/* ---------- Fonts (self-hosted, fully offline) ---------- */
@font-face {
  font-family: 'Bungee';
  src: url('../fonts/Bungee.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Big Shoulders Display';
  src: url('../fonts/BigShouldersDisplay.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Bitter';
  src: url('../fonts/Bitter.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Bitter';
  src: url('../fonts/Bitter-italic.woff2') format('woff2');
  font-weight: 100 900; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  src: url('../fonts/AtkinsonHyperlegible.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  src: url('../fonts/AtkinsonHyperlegible-bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  src: url('../fonts/AtkinsonHyperlegible-italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --bg-0: #06070d;
  --bg-1: #0c0e1d;
  --panel: #12152b;
  --panel-2: #1a1e3c;
  --panel-3: #232858;
  --line: rgba(160, 172, 255, 0.14);
  --line-strong: rgba(160, 172, 255, 0.28);

  --tile-hi: #2940e2;
  --tile-md: #1d2cc0;
  --tile-lo: #111c8e;
  --tile-edge: #4a63ff;

  --gold: #ffc73d;
  --gold-hi: #ffe08a;
  --gold-deep: #c98f12;

  --ink: #f5f2e9;
  --muted: #a7accf;
  --faint: #6b7099;

  --dd: #ff3d7f;
  --dd-deep: #b3164f;
  --ok: #34e0a1;
  --bad: #ff5566;

  --f-display: 'Bungee', 'Arial Black', sans-serif;
  --f-cond: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
  --f-serif: 'Bitter', Georgia, serif;
  --f-ui: 'Atkinson Hyperlegible', 'Helvetica Neue', sans-serif;

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;

  --shadow-pop: 0 18px 50px rgba(0, 0, 0, 0.55), 0 4px 14px rgba(0, 0, 0, 0.4);
  --ease-snap: cubic-bezier(0.2, 1.4, 0.3, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Base ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--bg-0);
  color: var(--ink);
  font-family: var(--f-ui);
  font-size: 16px;
  line-height: 1.45;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
button { font-family: inherit; color: inherit; cursor: pointer; background: none; border: none; }
button:disabled { cursor: not-allowed; }
input, textarea, select { font-family: inherit; color: inherit; }
::selection { background: rgba(255, 199, 61, 0.35); }

#stage { position: fixed; inset: 0; display: flex; }
#app { flex: 1; display: flex; min-width: 0; min-height: 0; position: relative; z-index: 2; }

/* Stage atmosphere: two slow-breathing spotlights + grain */
.stage-glow {
  position: fixed; border-radius: 50%; filter: blur(90px);
  pointer-events: none; z-index: 0; opacity: 0.55;
  animation: breathe 14s ease-in-out infinite alternate;
}
.stage-glow-a {
  width: 60vw; height: 60vw; top: -25vw; left: -15vw;
  background: radial-gradient(circle, rgba(45, 62, 210, 0.5), transparent 65%);
}
.stage-glow-b {
  width: 50vw; height: 50vw; bottom: -22vw; right: -12vw;
  background: radial-gradient(circle, rgba(255, 156, 32, 0.16), transparent 65%);
  animation-delay: -7s;
}
@keyframes breathe {
  from { transform: scale(1) translateY(0); }
  to { transform: scale(1.18) translateY(3vh); }
}
.grain {
  position: fixed; inset: -50%; z-index: 1; pointer-events: none; opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain-shift 1.2s steps(4) infinite;
}
@keyframes grain-shift {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-2%, 1%); }
  50% { transform: translate(1%, -2%); }
  75% { transform: translate(-1%, 2%); }
  100% { transform: translate(0, 0); }
}

#confetti { position: fixed; inset: 0; z-index: 90; pointer-events: none; }

/* ---------- Shared bits ---------- */
.screen {
  flex: 1; display: flex; flex-direction: column;
  min-width: 0; min-height: 0;
  animation: screen-in 0.45s var(--ease-out);
}
@keyframes screen-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--f-cond); font-weight: 700; font-size: 17px;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 10px 20px; border-radius: var(--r-md);
  background: var(--panel-2); border: 1px solid var(--line-strong);
  transition: transform 0.15s var(--ease-snap), background 0.15s, border-color 0.15s, box-shadow 0.15s, opacity 0.15s;
}
.btn:hover:not(:disabled) { background: var(--panel-3); transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(1px) scale(0.98); }
.btn:disabled { opacity: 0.45; }
.btn-gold {
  background: linear-gradient(180deg, var(--gold-hi), var(--gold) 45%, var(--gold-deep));
  color: #2b1d00; border-color: var(--gold-hi);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
  box-shadow: 0 4px 18px rgba(255, 199, 61, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.btn-gold:hover:not(:disabled) {
  background: linear-gradient(180deg, #fff0bd, var(--gold-hi) 45%, var(--gold));
  box-shadow: 0 6px 26px rgba(255, 199, 61, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.btn-blue {
  background: linear-gradient(180deg, var(--tile-hi), var(--tile-lo));
  border-color: var(--tile-edge);
  box-shadow: 0 4px 18px rgba(41, 64, 226, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.btn-blue:hover:not(:disabled) { background: linear-gradient(180deg, #3550ff, var(--tile-md)); }
.btn-danger { border-color: rgba(255, 85, 102, 0.5); color: var(--bad); }
.btn-danger:hover:not(:disabled) { background: rgba(255, 85, 102, 0.12); }
.btn-ghost { border-color: transparent; background: transparent; color: var(--muted); }
.btn-ghost:hover:not(:disabled) { color: var(--ink); background: rgba(160, 172, 255, 0.08); }
.btn-big { font-size: 22px; padding: 14px 34px; border-radius: var(--r-lg); }
.btn-sm { font-size: 14px; padding: 6px 12px; border-radius: var(--r-sm); }
.btn-icon {
  width: 38px; height: 38px; padding: 0; border-radius: 10px; font-size: 17px;
  font-family: var(--f-ui);
}

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--f-cond); font-weight: 700; font-size: 14px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); background: rgba(160, 172, 255, 0.08);
  border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px;
}
.chip-gold { color: var(--gold); border-color: rgba(255, 199, 61, 0.35); background: rgba(255, 199, 61, 0.08); }
.chip-dd { color: var(--dd); border-color: rgba(255, 61, 127, 0.4); background: rgba(255, 61, 127, 0.1); }

.input, textarea.input {
  width: 100%; background: rgba(6, 7, 13, 0.6);
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  padding: 10px 12px; font-size: 16px; color: var(--ink);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.input:focus, textarea.input:focus {
  outline: none; border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(255, 199, 61, 0.18);
}
.input::placeholder { color: var(--faint); }
textarea.input { resize: vertical; min-height: 86px; font-family: var(--f-serif); line-height: 1.5; }

.label {
  display: block; font-family: var(--f-cond); font-weight: 700;
  font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 6px;
}

kbd {
  font-family: var(--f-ui); font-size: 12px; color: var(--muted);
  background: rgba(160, 172, 255, 0.1); border: 1px solid var(--line);
  border-bottom-width: 2px; border-radius: 5px; padding: 1px 6px;
}

/* ---------- Modal / overlay scaffolding ---------- */
.overlay {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background: rgba(4, 5, 10, 0.75); backdrop-filter: blur(6px);
  animation: fade-in 0.2s ease;
  padding: 24px;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.modal {
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line-strong); border-radius: var(--r-lg);
  box-shadow: var(--shadow-pop);
  padding: 26px; width: min(560px, 100%);
  max-height: calc(100vh - 48px); overflow: auto;
  animation: modal-in 0.3s var(--ease-snap);
}
@keyframes modal-in {
  from { opacity: 0; transform: translateY(22px) scale(0.96); }
  to { opacity: 1; transform: none; }
}
.modal h3 {
  font-family: var(--f-cond); font-weight: 800; font-size: 24px;
  letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 10px;
}
.modal p { color: var(--muted); margin-bottom: 8px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }

#toast-root {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%);
  z-index: 95; display: flex; flex-direction: column; align-items: center; gap: 8px;
  pointer-events: none;
}
.toast {
  background: var(--panel-3); border: 1px solid var(--line-strong);
  border-radius: 999px; padding: 9px 20px;
  font-size: 15px; box-shadow: var(--shadow-pop);
  animation: toast-in 0.3s var(--ease-snap);
}
.toast-err { border-color: rgba(255, 85, 102, 0.55); color: #ffb9c1; }
.toast-ok { border-color: rgba(52, 224, 161, 0.5); color: #b8f5de; }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(14px) scale(0.92); }
  to { opacity: 1; transform: none; }
}
.toast.toast-out { animation: toast-out 0.3s ease forwards; }
@keyframes toast-out { to { opacity: 0; transform: translateY(10px); } }

/* ============================================================
   HOME
   ============================================================ */
.home {
  align-items: center; overflow-y: auto; padding: 5vh 24px 60px;
}
.home-inner { width: min(980px, 100%); display: flex; flex-direction: column; align-items: center; }

.logo { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 8px; }
.logo-tiles { display: flex; gap: 7px; perspective: 700px; }
.logo-tile {
  font-family: var(--f-display); font-size: clamp(26px, 4.6vw, 46px);
  color: var(--ink); line-height: 1;
  background: linear-gradient(160deg, var(--tile-hi), var(--tile-lo));
  border: 1px solid var(--tile-edge); border-radius: 10px;
  padding: 10px 8px 6px; min-width: 1.45em; text-align: center;
  box-shadow: 0 8px 22px rgba(17, 28, 142, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.35);
  animation: tile-drop 0.6s var(--ease-snap) backwards;
}
.logo-tile:nth-child(even) { transform: rotate(1.6deg); }
.logo-tile:nth-child(odd) { transform: rotate(-1.4deg); }
.logo-tile.logo-gold {
  background: linear-gradient(160deg, var(--gold-hi), var(--gold-deep));
  border-color: var(--gold-hi); color: #2b1d00; text-shadow: 0 2px 0 rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 22px rgba(201, 143, 18, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
@keyframes tile-drop {
  from { opacity: 0; transform: translateY(-40px) rotateX(70deg); }
  to { opacity: 1; }
}
.logo-sub {
  font-family: var(--f-display); font-size: clamp(15px, 2vw, 21px);
  color: var(--gold); letter-spacing: 0.42em; text-indent: 0.42em;
  animation: screen-in 0.6s 0.45s var(--ease-out) backwards;
}
.tagline {
  color: var(--muted); font-style: italic; font-family: var(--f-serif);
  margin-bottom: 30px; animation: screen-in 0.6s 0.6s var(--ease-out) backwards;
}

.resume-card {
  width: 100%; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: linear-gradient(120deg, rgba(255, 199, 61, 0.14), rgba(255, 199, 61, 0.04));
  border: 1px solid rgba(255, 199, 61, 0.45); border-radius: var(--r-lg);
  padding: 16px 20px; margin-bottom: 26px;
  box-shadow: 0 0 34px rgba(255, 199, 61, 0.12);
  animation: screen-in 0.5s 0.2s var(--ease-out) backwards;
}
.resume-card .resume-info { flex: 1; min-width: 220px; }
.resume-card .resume-title { font-family: var(--f-cond); font-weight: 800; font-size: 20px; letter-spacing: 0.04em; }
.resume-card .resume-meta { color: var(--muted); font-size: 14px; margin-top: 2px; }

.home-tabs { display: flex; gap: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 5px; margin-bottom: 24px; }
.home-tab {
  font-family: var(--f-cond); font-weight: 700; font-size: 16px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); padding: 8px 22px; border-radius: 999px;
  transition: all 0.2s;
}
.home-tab.active { background: linear-gradient(180deg, var(--tile-hi), var(--tile-lo)); color: var(--ink); box-shadow: 0 2px 12px rgba(41, 64, 226, 0.5); }

.home-toolbar { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.home-toolbar .hint { color: var(--faint); font-size: 14px; }

.game-grid { width: 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(285px, 1fr)); gap: 14px; }
.game-card {
  position: relative;
  background: linear-gradient(170deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 18px; display: flex; flex-direction: column; gap: 10px;
  transition: transform 0.18s var(--ease-snap), border-color 0.18s, box-shadow 0.18s;
  animation: screen-in 0.4s var(--ease-out) backwards;
}
.game-card:hover { transform: translateY(-3px); border-color: var(--line-strong); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45); }
.game-card h4 { font-family: var(--f-cond); font-weight: 800; font-size: 21px; letter-spacing: 0.03em; line-height: 1.15; }
.game-card .card-meta { display: flex; gap: 6px; flex-wrap: wrap; }
.game-card .card-cats { color: var(--faint); font-size: 13px; font-style: italic; font-family: var(--f-serif); flex: 1; }
.game-card .card-actions { display: flex; gap: 8px; align-items: center; }
.game-card .card-actions .btn { flex: 1; }
.diff-easy { color: var(--ok); border-color: rgba(52, 224, 161, 0.4); background: rgba(52, 224, 161, 0.08); }
.diff-medium { color: var(--gold); border-color: rgba(255, 199, 61, 0.4); background: rgba(255, 199, 61, 0.08); }
.diff-hard { color: var(--dd); border-color: rgba(255, 61, 127, 0.4); background: rgba(255, 61, 127, 0.08); }

.empty-state {
  width: 100%; text-align: center; padding: 60px 20px; color: var(--muted);
  border: 2px dashed var(--line); border-radius: var(--r-lg);
}
.empty-state .big { font-size: 42px; margin-bottom: 10px; }

.menu-pop {
  position: fixed; z-index: 60; min-width: 190px;
  background: var(--panel-3); border: 1px solid var(--line-strong);
  border-radius: var(--r-md); box-shadow: var(--shadow-pop); padding: 6px;
  animation: modal-in 0.16s var(--ease-snap);
}
.menu-pop button {
  display: flex; width: 100%; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 8px; font-size: 15px; text-align: left;
}
.menu-pop button:hover { background: rgba(160, 172, 255, 0.1); }
.menu-pop button.danger { color: var(--bad); }
.menu-pop button.danger:hover { background: rgba(255, 85, 102, 0.12); }

.home-foot { margin-top: 38px; color: var(--faint); font-size: 13px; text-align: center; }

/* ============================================================
   EDITOR
   ============================================================ */
.editor { padding: 0; }
.ed-top {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 20px; border-bottom: 1px solid var(--line);
  background: rgba(12, 14, 29, 0.85); backdrop-filter: blur(8px);
}
.ed-top .name-wrap { flex: 1; min-width: 200px; }
.ed-top input.game-name {
  width: 100%; background: transparent; border: none; border-bottom: 2px dashed var(--line-strong);
  font-family: var(--f-cond); font-weight: 800; font-size: 26px; letter-spacing: 0.03em;
  color: var(--ink); padding: 2px 4px;
}
.ed-top input.game-name:focus { outline: none; border-bottom-color: var(--gold); }
.ed-top input.game-name::placeholder { color: var(--faint); }

.ed-status { display: flex; align-items: center; gap: 10px; }

.ed-tabs { display: flex; gap: 8px; padding: 14px 20px 0; }
.ed-tab {
  font-family: var(--f-cond); font-weight: 700; font-size: 16px; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--muted);
  padding: 9px 18px; border-radius: 12px 12px 0 0; border: 1px solid transparent; border-bottom: none;
  position: relative;
}
.ed-tab.active { color: var(--ink); background: var(--panel-2); border-color: var(--line-strong); }
.ed-tab .tab-badge {
  display: inline-block; min-width: 19px; padding: 0 5px; margin-left: 6px;
  background: var(--bad); color: #fff; border-radius: 999px; font-size: 12px; line-height: 19px;
}
.ed-tab .tab-ok { color: var(--ok); margin-left: 6px; }

.ed-body { flex: 1; overflow: auto; padding: 0 20px 30px; }
.ed-board-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 2px; }
.ed-board-tools .spacer { flex: 1; }
.dd-mode-on { outline: 2px solid var(--dd); color: var(--dd); }

.ed-grid {
  display: grid; grid-template-columns: repeat(6, minmax(130px, 1fr));
  gap: 8px; min-width: 850px;
}
.ed-cat-head input {
  width: 100%; text-align: center;
  background: linear-gradient(180deg, var(--panel-3), var(--panel-2));
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  font-family: var(--f-cond); font-weight: 800; font-size: 16px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink); padding: 12px 8px;
}
.ed-cat-head input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(255, 199, 61, 0.15); }
.ed-cat-head input.missing, .ed-cell.missing { border-color: rgba(255, 85, 102, 0.55); }

.ed-cell {
  position: relative; min-height: 88px; border-radius: var(--r-sm);
  background: linear-gradient(165deg, var(--tile-md), var(--tile-lo));
  border: 1px solid rgba(74, 99, 255, 0.45);
  padding: 8px 9px; text-align: left; display: flex; flex-direction: column; gap: 4px;
  transition: transform 0.14s var(--ease-snap), box-shadow 0.14s, filter 0.14s;
}
.ed-cell:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(8, 12, 60, 0.6); filter: brightness(1.12); }
.ed-cell .val { font-family: var(--f-cond); font-weight: 800; font-size: 17px; color: var(--gold); }
.ed-cell .prev {
  font-family: var(--f-serif); font-size: 12.5px; line-height: 1.35; color: rgba(245, 242, 233, 0.85);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.ed-cell .prev.empty { color: rgba(245, 242, 233, 0.4); font-style: italic; }
.ed-cell.is-empty { background: rgba(17, 28, 142, 0.25); border-style: dashed; }
.dd-badge {
  position: absolute; top: 6px; right: 6px;
  font-family: var(--f-display); font-size: 10px; color: #fff;
  background: linear-gradient(160deg, var(--dd), var(--dd-deep));
  border-radius: 6px; padding: 3px 5px 1px;
  box-shadow: 0 2px 10px rgba(255, 61, 127, 0.5);
}
.editor.dd-placing .ed-cell { cursor: crosshair; }
.editor.dd-placing .ed-cell:hover { outline: 2px dashed var(--dd); }

.ed-final { max-width: 680px; margin: 18px auto; display: flex; flex-direction: column; gap: 16px; }

.issue-list { margin: 10px 0 0; padding-left: 0; list-style: none; }
.issue-list li { padding: 7px 0 7px 26px; position: relative; color: var(--muted); border-bottom: 1px dashed var(--line); }
.issue-list li::before { content: '✗'; position: absolute; left: 4px; color: var(--bad); }

/* AI writer progress */
.ai-bar {
  height: 6px; border-radius: 999px; overflow: hidden;
  background: rgba(160, 172, 255, 0.12); margin-bottom: 8px;
}
.ai-bar-fill {
  height: 100%; width: 36%; border-radius: 999px;
  background: linear-gradient(90deg, var(--gold), var(--dd));
  animation: ai-slide 1.1s ease-in-out infinite alternate;
}
@keyframes ai-slide {
  from { transform: translateX(-40%); }
  to { transform: translateX(220%); }
}

/* Clue cell editor modal */
.cell-modal-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.cell-modal-head .where { font-family: var(--f-cond); font-weight: 700; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; }
.cell-modal-head .val { font-family: var(--f-display); color: var(--gold); font-size: 26px; }
.cell-nav { display: flex; gap: 8px; align-items: center; }
.field { margin-bottom: 14px; }

/* ============================================================
   SETUP
   ============================================================ */
.setup { overflow-y: auto; padding: 4vh 24px 50px; align-items: center; }
.setup-inner { width: min(860px, 100%); display: flex; flex-direction: column; gap: 26px; }
.setup h2, .section-title {
  font-family: var(--f-cond); font-weight: 800; font-size: 30px;
  letter-spacing: 0.05em; text-transform: uppercase;
}
.setup .for-game { color: var(--muted); font-family: var(--f-serif); font-style: italic; margin-top: -18px; }

.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 14px; }
.team-card {
  position: relative; border-radius: var(--r-lg); padding: 16px;
  background: linear-gradient(170deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line-strong);
  border-top: 4px solid var(--tc, var(--gold));
  display: flex; flex-direction: column; gap: 12px;
  animation: screen-in 0.35s var(--ease-out) backwards;
}
.team-card .team-row { display: flex; gap: 10px; align-items: center; }
.team-logo-big {
  width: 54px; height: 54px; flex: none; border-radius: 16px; font-size: 30px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--tc) 22%, transparent);
  border: 2px solid var(--tc);
  box-shadow: 0 0 18px color-mix(in srgb, var(--tc) 35%, transparent);
}
.swatch-row { display: flex; gap: 7px; flex-wrap: wrap; }
.swatch {
  width: 27px; height: 27px; border-radius: 50%; border: 2px solid transparent;
  background: var(--sw); transition: transform 0.12s var(--ease-snap);
}
.swatch:hover { transform: scale(1.18); }
.swatch.sel { border-color: #fff; box-shadow: 0 0 0 2px var(--sw), 0 0 14px var(--sw); }
.emoji-row { display: flex; gap: 5px; flex-wrap: wrap; }
.emoji-pick {
  width: 34px; height: 34px; border-radius: 9px; font-size: 19px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(160, 172, 255, 0.06); border: 1px solid transparent;
  transition: transform 0.12s var(--ease-snap);
}
.emoji-pick:hover { transform: scale(1.15); background: rgba(160, 172, 255, 0.14); }
.emoji-pick.sel { border-color: var(--tc, var(--gold)); background: color-mix(in srgb, var(--tc, var(--gold)) 18%, transparent); }
.team-remove { position: absolute; top: 8px; right: 8px; color: var(--faint); font-size: 17px; width: 30px; height: 30px; border-radius: 8px; }
.team-remove:hover { color: var(--bad); background: rgba(255, 85, 102, 0.12); }

.add-team {
  border: 2px dashed var(--line-strong); border-radius: var(--r-lg);
  min-height: 120px; display: flex; align-items: center; justify-content: center; gap: 10px;
  color: var(--muted); font-family: var(--f-cond); font-weight: 700; font-size: 18px;
  letter-spacing: 0.08em; text-transform: uppercase;
  transition: all 0.15s;
}
.add-team:hover { border-color: var(--gold); color: var(--gold); background: rgba(255, 199, 61, 0.05); }

.mode-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.mode-card {
  text-align: left; border-radius: var(--r-lg); padding: 18px 20px;
  background: linear-gradient(170deg, var(--panel-2), var(--panel));
  border: 2px solid var(--line); transition: all 0.15s;
  display: flex; gap: 14px; align-items: flex-start;
}
.mode-card:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.mode-card.sel { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 0 30px rgba(255, 199, 61, 0.15); }
.mode-card .mode-emoji { font-size: 32px; }
.mode-card h4 { font-family: var(--f-cond); font-weight: 800; font-size: 20px; letter-spacing: 0.05em; text-transform: uppercase; }
.mode-card p { color: var(--muted); font-size: 14.5px; margin-top: 4px; }

.setup-actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }

/* ============================================================
   GAME — top bar & scores
   ============================================================ */
.game-screen { padding: 0; }
.g-top {
  display: flex; align-items: center; gap: 14px; padding: 10px 18px;
  border-bottom: 1px solid var(--line); background: rgba(8, 9, 18, 0.7); backdrop-filter: blur(8px);
  flex-wrap: wrap;
}
.g-top .g-name { font-family: var(--f-cond); font-weight: 800; font-size: 19px; letter-spacing: 0.04em; max-width: 28ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-top .spacer { flex: 1; }
.round-pill {
  font-family: var(--f-display); font-size: 13px; color: var(--gold);
  border: 1px solid rgba(255, 199, 61, 0.4); background: rgba(255, 199, 61, 0.07);
  padding: 5px 14px 3px; border-radius: 999px; letter-spacing: 0.06em;
}

.board-wrap { flex: 1; display: flex; flex-direction: column; min-height: 0; padding: 14px 18px 8px; }
.board {
  flex: 1; display: grid; grid-template-columns: repeat(6, 1fr);
  grid-template-rows: minmax(58px, 0.9fr) repeat(5, 1fr);
  gap: clamp(5px, 0.8vw, 10px); min-height: 0; perspective: 1400px;
}
.cat-cell {
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: linear-gradient(180deg, #0f1538, #0a0e29);
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  padding: 6px 8px;
  font-family: var(--f-cond); font-weight: 800;
  font-size: clamp(12px, 1.45vw, 21px); line-height: 1.12;
  letter-spacing: 0.05em; text-transform: uppercase;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
  animation: cat-in 0.5s var(--ease-out) backwards;
}
@keyframes cat-in { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; } }
.cat-cell.cleared { color: transparent; text-shadow: none; background: rgba(10, 14, 41, 0.4); border-color: var(--line); }

.tile {
  position: relative; border-radius: var(--r-sm);
  background: linear-gradient(165deg, var(--tile-hi) 0%, var(--tile-md) 55%, var(--tile-lo) 100%);
  border: 1px solid var(--tile-edge);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -10px 24px rgba(5, 8, 50, 0.55), 0 4px 10px rgba(0, 0, 0, 0.35);
  font-family: var(--f-display); color: var(--gold);
  font-size: clamp(17px, 2.7vw, 40px);
  display: flex; align-items: center; justify-content: center;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.4), 0 0 26px rgba(255, 199, 61, 0.3);
  transition: transform 0.16s var(--ease-snap), filter 0.16s, box-shadow 0.16s;
  animation: tile-in 0.5s var(--ease-out) backwards;
}
@keyframes tile-in {
  from { opacity: 0; transform: rotateX(58deg) scale(0.86); }
  to { opacity: 1; }
}
.tile:hover:not(:disabled) {
  transform: scale(1.035); filter: brightness(1.2); z-index: 2;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 10px 30px rgba(20, 34, 180, 0.6), 0 0 0 2px var(--gold);
}
.tile:disabled, .tile.played {
  background: rgba(13, 16, 40, 0.55); border-color: var(--line); color: transparent;
  text-shadow: none; box-shadow: none; cursor: default;
}
.tile.played::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
}

.score-strip {
  display: flex; gap: 10px; padding: 10px 18px 14px; align-items: stretch;
}
.score-card {
  flex: 1; display: flex; align-items: center; gap: 10px;
  background: linear-gradient(170deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line-strong); border-bottom: 4px solid var(--tc, var(--gold));
  border-radius: var(--r-md); padding: 8px 12px; min-width: 0;
  transition: box-shadow 0.2s, transform 0.2s;
}
.score-card.leading { box-shadow: 0 0 24px color-mix(in srgb, var(--tc) 30%, transparent); }
.score-card .t-logo {
  width: 38px; height: 38px; flex: none; border-radius: 11px; font-size: 21px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--tc) 22%, transparent); border: 1.5px solid var(--tc);
}
.score-card .t-info { min-width: 0; flex: 1; }
.score-card .t-name { font-family: var(--f-cond); font-weight: 700; font-size: 15px; letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.score-card .t-score {
  font-family: var(--f-cond); font-weight: 800; font-size: clamp(20px, 2.3vw, 30px);
  line-height: 1; letter-spacing: 0.02em; font-variant-numeric: tabular-nums;
}
.score-card .t-score.neg { color: var(--bad); }
.score-card.bump { animation: score-bump 0.5s var(--ease-snap); }
@keyframes score-bump { 30% { transform: translateY(-5px) scale(1.04); } }

/* ============================================================
   CLUE OVERLAY
   ============================================================ */
.clue-overlay {
  position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(41, 64, 226, 0.32), transparent 60%),
    radial-gradient(100% 80% at 50% 110%, rgba(10, 16, 90, 0.8), transparent 60%),
    linear-gradient(170deg, #0e1670, #060a38 60%, #04062a);
  animation: clue-zoom 0.42s var(--ease-out);
  transform-origin: var(--ox, 50%) var(--oy, 50%);
}
@keyframes clue-zoom {
  from { opacity: 0.4; transform: scale(0.12); border-radius: 30px; }
  to { opacity: 1; transform: scale(1); border-radius: 0; }
}
.clue-head { display: flex; align-items: center; gap: 12px; padding: 16px 22px; }
.clue-head .clue-where { font-family: var(--f-cond); font-weight: 800; font-size: 19px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(245, 242, 233, 0.8); }
.clue-head .clue-val { font-family: var(--f-display); font-size: 24px; color: var(--gold); text-shadow: 0 0 24px rgba(255, 199, 61, 0.45); }

.clue-body {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 20px clamp(20px, 8vw, 120px); text-align: center; gap: 26px; min-height: 0;
}
.clue-prompt {
  font-family: var(--f-serif); font-weight: 600;
  font-size: clamp(24px, 4.2vw, 52px); line-height: 1.3;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.6);
  max-width: 24ch;
  animation: prompt-in 0.55s 0.15s var(--ease-out) backwards;
}
@keyframes prompt-in {
  from { opacity: 0; transform: translateY(26px) scale(0.96); letter-spacing: 0.06em; }
  to { opacity: 1; }
}
.clue-response {
  font-family: var(--f-serif); font-style: italic; font-weight: 500;
  font-size: clamp(20px, 3vw, 36px); color: var(--gold-hi);
  text-shadow: 0 0 30px rgba(255, 199, 61, 0.35);
  animation: response-in 0.5s var(--ease-snap);
  border-top: 1px solid rgba(255, 199, 61, 0.35); padding-top: 22px;
  max-width: 28ch;
}
@keyframes response-in {
  from { opacity: 0; transform: translateY(18px); filter: blur(6px); }
  to { opacity: 1; filter: none; }
}

.clue-foot { padding: 16px 22px 24px; display: flex; flex-direction: column; gap: 14px; align-items: center; }
.judge-row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.judge-team {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: rgba(6, 8, 30, 0.55); border: 2px solid var(--tc, var(--line-strong));
  border-radius: var(--r-md); padding: 12px 18px; min-width: 130px;
  transition: all 0.15s var(--ease-snap); position: relative;
}
.judge-team:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5), 0 0 18px color-mix(in srgb, var(--tc, #fff) 30%, transparent); }
.judge-team .jt-logo { font-size: 26px; }
.judge-team .jt-name { font-family: var(--f-cond); font-weight: 700; font-size: 16px; letter-spacing: 0.04em; max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.judge-team .jt-key { position: absolute; top: 6px; left: 8px; }
.judge-team.mark-right { background: rgba(52, 224, 161, 0.16); border-color: var(--ok); box-shadow: 0 0 22px rgba(52, 224, 161, 0.3); }
.judge-team.mark-wrong { background: rgba(255, 85, 102, 0.14); border-color: var(--bad); box-shadow: 0 0 22px rgba(255, 85, 102, 0.25); }
.judge-team .jt-mark { font-size: 19px; font-weight: 700; height: 22px; }
.judge-team.mark-right .jt-mark { color: var(--ok); }
.judge-team.mark-wrong .jt-mark { color: var(--bad); }
.judge-team .jt-mark:empty::before { content: '—'; color: var(--faint); font-weight: 400; }
.judge-nobody { min-width: 110px; border-style: dashed; color: var(--muted); }

/* All-Answer / Final cards: tap toggles ✓, the corner ✗ toggles wrong */
.jt-togglable { cursor: pointer; user-select: none; padding-top: 16px; }
.jt-x {
  position: absolute; top: 6px; right: 6px; width: 27px; height: 27px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px; font-size: 14px; font-weight: 700; line-height: 1;
  color: var(--muted); background: rgba(255, 85, 102, 0.08);
  border: 1px solid rgba(255, 85, 102, 0.35);
  transition: all 0.12s var(--ease-snap);
}
.jt-x:hover { background: rgba(255, 85, 102, 0.3); color: #fff; transform: scale(1.12); }
.jt-x.on { background: var(--bad); border-color: var(--bad); color: #fff; box-shadow: 0 0 12px rgba(255, 85, 102, 0.55); }

.reveal-hint { color: rgba(245, 242, 233, 0.55); font-size: 14px; }

/* ============================================================
   DAILY DOUBLE
   ============================================================ */
.dd-overlay {
  position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 30px; overflow: hidden;
  background: radial-gradient(110% 100% at 50% 50%, #6e1038 0%, #3c0a3e 45%, #16052e 100%);
  animation: fade-in 0.3s ease;
}
.dd-rays {
  position: absolute; inset: -60%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 199, 61, 0.12) 0deg 9deg, transparent 9deg 22deg);
  animation: rays-spin 36s linear infinite; pointer-events: none;
}
@keyframes rays-spin { to { transform: rotate(360deg); } }
.dd-title {
  font-family: var(--f-display); font-size: clamp(40px, 8.5vw, 110px);
  color: var(--gold); text-align: center; line-height: 1.04; z-index: 1;
  text-shadow: 0 6px 0 var(--dd-deep), 0 0 70px rgba(255, 61, 127, 0.65), 0 0 30px rgba(255, 199, 61, 0.5);
  animation: dd-slam 0.65s var(--ease-snap) backwards;
}
@keyframes dd-slam {
  0% { opacity: 0; transform: scale(3.2) rotate(-7deg); filter: blur(10px); }
  60% { opacity: 1; transform: scale(0.94) rotate(1.2deg); filter: none; }
  100% { transform: scale(1) rotate(0); }
}
.dd-panel {
  z-index: 1; background: rgba(10, 4, 26, 0.72); border: 1px solid rgba(255, 199, 61, 0.35);
  border-radius: var(--r-lg); padding: 24px 28px; width: min(620px, calc(100vw - 40px));
  backdrop-filter: blur(10px); box-shadow: var(--shadow-pop);
  display: flex; flex-direction: column; gap: 16px;
  animation: modal-in 0.4s 0.25s var(--ease-snap) backwards;
}
.dd-panel h3 { font-family: var(--f-cond); font-weight: 800; font-size: 22px; letter-spacing: 0.08em; text-transform: uppercase; text-align: center; }
.dd-teams { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.wager-row { display: flex; gap: 10px; align-items: center; }
.wager-row .input { font-family: var(--f-cond); font-weight: 800; font-size: 28px; text-align: center; }
.quick-picks { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.wager-bounds { text-align: center; color: var(--muted); font-size: 14px; }

/* ============================================================
   INTERSTITIALS (round intro / final intro)
   ============================================================ */
.inter-overlay {
  position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 26px; text-align: center; overflow: hidden;
  background: radial-gradient(110% 100% at 50% 40%, #131c7c 0%, #0a0e3f 55%, #05071f 100%);
  animation: fade-in 0.35s ease; padding: 30px;
}
.inter-kicker { font-family: var(--f-cond); font-weight: 700; font-size: 19px; letter-spacing: 0.35em; text-indent: 0.35em; text-transform: uppercase; color: var(--muted); animation: screen-in 0.5s 0.1s backwards; }
.inter-title {
  font-family: var(--f-display); font-size: clamp(34px, 7vw, 92px); line-height: 1.06;
  color: var(--ink); text-shadow: 0 5px 0 rgba(0, 0, 0, 0.45), 0 0 60px rgba(74, 99, 255, 0.55);
  animation: dd-slam 0.6s var(--ease-snap) backwards;
}
.inter-title.gold { color: var(--gold); text-shadow: 0 5px 0 var(--gold-deep), 0 0 70px rgba(255, 199, 61, 0.5); }
.inter-sub { color: var(--muted); font-size: 17px; max-width: 52ch; animation: screen-in 0.5s 0.3s backwards; }

/* ============================================================
   FINAL JEOPARDY
   ============================================================ */
.final-cat-banner {
  font-family: var(--f-cond); font-weight: 800; font-size: clamp(28px, 5vw, 56px);
  letter-spacing: 0.08em; text-transform: uppercase;
  background: linear-gradient(165deg, var(--tile-hi), var(--tile-lo));
  border: 1px solid var(--tile-edge); border-radius: var(--r-md);
  padding: 22px 38px; box-shadow: var(--shadow-pop), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  animation: dd-slam 0.55s var(--ease-snap) backwards;
  max-width: min(90vw, 800px);
}
.wager-cards { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; max-width: 980px; }
.wager-card {
  background: rgba(6, 8, 30, 0.6); border: 1px solid var(--line-strong);
  border-top: 4px solid var(--tc, var(--gold)); border-radius: var(--r-md);
  padding: 14px 16px; width: 215px; display: flex; flex-direction: column; gap: 9px;
  animation: screen-in 0.4s var(--ease-out) backwards;
}
.wager-card .wc-team { display: flex; align-items: center; gap: 8px; font-family: var(--f-cond); font-weight: 700; font-size: 16px; }
.wager-card .wc-score { color: var(--muted); font-size: 13px; }
.wager-card.locked { border-color: var(--ok); }
.wager-card.locked .lockmsg { color: var(--ok); font-size: 14px; }
.wager-card.sitout { opacity: 0.55; }
.wager-card .input { text-align: center; font-family: var(--f-cond); font-weight: 800; font-size: 22px; }

/* ============================================================
   RESULTS
   ============================================================ */
.results { align-items: center; justify-content: center; overflow-y: auto; padding: 30px 20px; gap: 8px; }
.results .res-kicker { font-family: var(--f-cond); font-weight: 700; letter-spacing: 0.35em; text-indent: 0.35em; text-transform: uppercase; color: var(--muted); font-size: 17px; }
.results .res-winner {
  font-family: var(--f-display); font-size: clamp(30px, 5.6vw, 66px); text-align: center;
  color: var(--gold); line-height: 1.1; margin: 8px 0 4px;
  text-shadow: 0 4px 0 var(--gold-deep), 0 0 60px rgba(255, 199, 61, 0.55);
  animation: dd-slam 0.6s var(--ease-snap) backwards;
}
.results .res-tie { color: var(--muted); font-style: italic; font-family: var(--f-serif); }

.podium-row { display: flex; align-items: flex-end; gap: 14px; margin: 30px 0 10px; flex-wrap: wrap; justify-content: center; }
.podium {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  animation: screen-in 0.5s var(--ease-out) backwards;
}
.podium .p-medal { font-size: 34px; }
.podium .p-logo { font-size: 30px; }
.podium .p-name { font-family: var(--f-cond); font-weight: 800; font-size: 18px; letter-spacing: 0.04em; max-width: 17ch; text-align: center; }
.podium .p-score { font-family: var(--f-cond); font-weight: 800; font-size: 24px; color: var(--gold); font-variant-numeric: tabular-nums; }
.podium .p-score.neg { color: var(--bad); }
.podium .p-block {
  width: 150px; border-radius: 12px 12px 0 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--tc) 75%, #fff 0%), color-mix(in srgb, var(--tc) 45%, #000));
  border: 1px solid color-mix(in srgb, var(--tc) 80%, #fff);
  box-shadow: 0 -2px 30px color-mix(in srgb, var(--tc) 40%, transparent), inset 0 2px 0 rgba(255, 255, 255, 0.35);
  animation: podium-rise 0.7s var(--ease-snap) backwards;
  transform-origin: bottom;
}
@keyframes podium-rise { from { transform: scaleY(0); } }
.results-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 24px; }

/* ============================================================
   MISC
   ============================================================ */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

@media (max-width: 760px) {
  .score-strip { flex-wrap: wrap; }
  .score-card { min-width: 45%; }
  .clue-prompt { font-size: clamp(20px, 6vw, 32px); }
}

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