:root{
    --bg:#1a0f08; --panel:#2a1810; --panel2:#3a2216;
    --gold:#f4b43a; --gold2:#ffd36e; --orange:#e2661f; --red:#c0392b;
    --cream:#fff5e1; --muted:#c9a98a;
    --tile:#173a8a; --tile2:#0f2a66; --tileText:#fff;
  }
  *{box-sizing:border-box}
  html,body{margin:0;background:radial-gradient(ellipse at top,#3b1d0d 0%,var(--bg) 70%);color:var(--cream);font-family:Inter,system-ui,sans-serif;min-height:100%}
  body{min-height:100vh}
  button{font-family:inherit;cursor:pointer;border:none;border-radius:10px;font-weight:800;font-size:15px;padding:10px 14px;color:var(--bg);background:var(--gold);transition:transform .08s, filter .15s}
  button:hover{filter:brightness(1.08)} button:active{transform:scale(.97)}
  button.ghost{background:transparent;color:var(--gold);border:2px solid var(--gold)}
  button.red{background:var(--red);color:#fff}
  button.on{background:var(--orange);color:#fff}
  select,input{font-family:inherit;font-size:16px;padding:9px 10px;border-radius:10px;border:2px solid var(--panel2);background:#140b06;color:var(--cream);width:100%}
  header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;flex-wrap:wrap}
  h1{font-family:Bungee,sans-serif;font-weight:400;margin:0;font-size:clamp(22px,4vw,38px);color:var(--gold);text-shadow:0 3px 0 #7a3a0c}
  h1 span{color:var(--orange)}
  nav{display:flex;gap:6px}
  nav button{background:var(--panel2);color:var(--cream)}
  nav button.active{background:var(--gold);color:var(--bg)}
  main{max-width:1100px;margin:0 auto;padding:0 14px 40px}
  .hidden{display:none!important}
  .panel{background:var(--panel);border:2px solid var(--panel2);border-radius:16px;padding:14px}

  /* matchup */
  .matchup{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:stretch;margin-bottom:12px}
  .team{background:var(--panel);border:3px solid var(--panel2);border-radius:16px;padding:10px;display:flex;flex-direction:column;gap:6px;transition:border-color .2s, box-shadow .2s}
  .team.control{border-color:var(--gold);box-shadow:0 0 18px rgba(244,180,58,.45)}
  .team .tscore{font-family:Bungee;font-size:clamp(26px,4vw,40px);color:var(--gold2);text-align:center;line-height:1}
  .team .tlabel{font-size:12px;color:var(--muted);text-align:center;text-transform:uppercase;letter-spacing:.08em}
  .team .row{display:flex;gap:6px}
  .team .row button{flex:1;font-size:13px;padding:8px 6px}
  .vs{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
  .vs b{font-family:Bungee;color:var(--orange);font-size:26px}
  .vs button{font-size:12px;padding:8px 10px;white-space:nowrap}

  /* question */
  .qcard{text-align:center;margin-bottom:12px;position:relative}
  .qmeta{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;color:var(--muted);margin-bottom:6px}
  .qtext{font-family:Bungee;font-weight:400;font-size:clamp(20px,3.4vw,34px);line-height:1.15;color:var(--cream);margin:6px 0 4px}
  .pot{display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap;margin-top:8px}
  .potbox{background:#000;border:3px solid var(--gold);border-radius:12px;padding:4px 22px;font-family:Bungee;font-size:clamp(28px,5vw,48px);color:var(--gold2);min-width:120px}
  .mult{display:flex;gap:4px}
  .mult button{padding:7px 10px;font-size:13px;background:var(--panel2);color:var(--cream)}
  .mult button.on{background:var(--orange);color:#fff}

  /* board */
  .board{background:linear-gradient(#0a1a40,#06112c);border:6px solid var(--gold);border-radius:20px;padding:12px;display:grid;grid-template-columns:1fr 1fr;grid-auto-flow:column;grid-template-rows:repeat(4,1fr);gap:10px;box-shadow:0 0 0 4px #7a3a0c, 0 18px 40px rgba(0,0,0,.6)}
  .slot{perspective:800px;height:clamp(54px,8vw,76px)}
  .flip{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.3,1.4,.6,1)}
  .slot.open .flip{transform:rotateX(180deg)}
  .face{position:absolute;inset:0;backface-visibility:hidden;border-radius:10px;display:flex;align-items:center;border:2px solid #4a74d6}
  .front{background:linear-gradient(#2453b8,var(--tile2));justify-content:center;cursor:pointer}
  .front .num{width:clamp(38px,5vw,52px);height:clamp(38px,5vw,52px);border-radius:50%;background:radial-gradient(#3d6fd9,#0d2560);border:3px solid #9fc0ff;display:flex;align-items:center;justify-content:center;font-family:Bungee;font-size:clamp(18px,2.6vw,26px);color:#fff}
  .front .peek{position:absolute;left:10px;bottom:4px;font-size:11px;color:#9fc0ff;opacity:.9}
  .back{background:linear-gradient(#f9d77a,#e8a72a);color:#2a1406;transform:rotateX(180deg);justify-content:space-between;padding:0 6px 0 14px;border-color:#fff1c2}
  .back .ans{font-weight:800;text-transform:uppercase;font-size:clamp(14px,2.2vw,22px);letter-spacing:.02em;line-height:1.05}
  .back .pts{font-family:Bungee;font-size:clamp(18px,2.8vw,28px);background:#2a1406;color:var(--gold2);border-radius:8px;padding:2px 10px;min-width:56px;text-align:center}
  .slot.empty .face{background:#081634;border-color:#132a5c;cursor:default}
  .slot.empty .num{display:none}
  .slot.open.missed .back{background:linear-gradient(#cfd8e8,#9aa8bf)}

  .survey{display:flex;gap:8px;margin:0 0 12px}
  .survey input{flex:1;font-size:20px;padding:14px;border-color:var(--gold)}
  .survey button{font-family:Bungee;font-weight:400;font-size:18px;padding:0 18px;white-space:nowrap}
  .survey.thinking button{animation:pulse .5s infinite alternate}
  @keyframes pulse{to{background:var(--orange);color:#fff}}
  .strikes{display:flex;justify-content:center;gap:10px;margin:12px 0;min-height:52px}
  .strikes .x{font-family:Bungee;font-size:44px;color:var(--red);text-shadow:0 0 12px rgba(192,57,43,.7);line-height:1}
  .strikes .x.dim{color:#3a2216;text-shadow:none}
  .controls{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
  .banner{text-align:center;font-family:Bungee;font-size:clamp(18px,3vw,26px);color:var(--orange);min-height:30px;margin-top:8px}

  /* big X overlay */
  #bigX{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:50;opacity:0}
  #bigX.show{animation:xpop .9s ease}
  #bigX span{font-family:Bungee;color:var(--red);font-size:min(60vw,420px);text-shadow:0 0 40px rgba(0,0,0,.8),0 0 80px rgba(192,57,43,.8);letter-spacing:-.05em}
  @keyframes xpop{0%{opacity:0;transform:scale(1.6)}15%{opacity:1;transform:scale(1)}75%{opacity:1}100%{opacity:0}}

  /* scores */
  .lb{display:flex;flex-direction:column;gap:8px}
  .lbrow{display:grid;grid-template-columns:48px 1fr auto auto;align-items:center;gap:12px;background:var(--panel);border:2px solid var(--panel2);border-radius:12px;padding:10px 14px}
  .lbrow.first{border-color:var(--gold);background:linear-gradient(90deg,#4a2c0c,var(--panel))}
  .rank{font-family:Bungee;font-size:24px;color:var(--orange);text-align:center}
  .lbname{font-weight:800;font-size:18px}
  .lbgames{font-size:12px;color:var(--muted)}
  .lbscore{font-family:Bungee;font-size:26px;color:var(--gold2)}
  .adj{display:flex;gap:4px}
  .adj button{padding:6px 9px;font-size:13px;background:var(--panel2);color:var(--cream)}
  h2{font-family:Bungee;font-weight:400;color:var(--gold);margin:6px 0 12px;font-size:24px}
  .famgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin-bottom:16px}
  .famgrid label{font-size:12px;color:var(--muted);display:block;margin-bottom:4px}
  .help{font-size:13px;color:var(--muted);line-height:1.5}
  .help kbd{background:var(--panel2);border-radius:4px;padding:1px 6px;color:var(--cream)}
  .modal{position:fixed;inset:0;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;z-index:60;padding:16px}
  .modal .panel{max-width:420px;width:100%;text-align:center}
  .modal .panel p{margin:4px 0 14px}
  .modal .row{display:flex;gap:8px;justify-content:center}

  @media (max-width:720px){
    .board{grid-template-columns:1fr;grid-auto-flow:row;grid-template-rows:none}
    .matchup{grid-template-columns:1fr 1fr}
    .vs{grid-column:1 / -1;flex-direction:row;order:-1}
    .lbrow{grid-template-columns:36px 1fr auto}
    .lbrow .adj{grid-column:1 / -1;justify-content:flex-end}
  }