/* ============================================================
   DIAMOND IQ — Ballpark scoreboard design system
   Palette: Monster Green / Chalk Cream / Lamp Amber / Out-lamp Red
   Type:    Graduate (varsity display) · Nunito (friendly body)
            Chivo Mono (scoreboard digits)
   ============================================================ */

:root{
  --green-deep:   #12291C;   /* night-game outfield */
  --green-wall:   #1E4033;   /* the Monster */
  --green-panel:  #27503F;   /* scoreboard panel */
  --green-line:   #3A6B54;   /* panel seams */
  --chalk:        #F6EFDC;   /* foul-line chalk / cream lettering */
  --chalk-dim:    #C9C0A6;
  --amber:        #FFB627;   /* scoreboard lamp */
  --amber-deep:   #E09000;
  --out-red:      #E4572E;   /* out lamp */
  --safe-green:   #7BC950;   /* correct flash */
  --dirt:         #B5713F;   /* infield dirt (SVG only) */

  --font-display: 'Graduate', 'Courier New', serif;
  --font-body:    'Nunito', 'Segoe UI', system-ui, sans-serif;
  --font-digits:  'Chivo Mono', 'Courier New', monospace;

  --radius: 14px;
  --shadow: 0 6px 24px rgba(0,0,0,.35);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body);
  background:
    radial-gradient(1200px 500px at 50% -10%, rgba(255,182,39,.08), transparent 60%),
    linear-gradient(var(--green-deep), #0C1D13);
  color:var(--chalk);
  min-height:100vh;
  font-size:17px;
  line-height:1.5;
}
main{max-width:640px;margin:0 auto;padding:20px 16px 56px}

/* ---------- header / wordmark ---------- */
header.brand{
  text-align:center;
  padding:26px 8px 8px;
}
.wordmark{
  font-family:var(--font-display);
  font-size:clamp(38px,9vw,58px);
  letter-spacing:.06em;
  color:var(--chalk);
  text-shadow:0 3px 0 rgba(0,0,0,.45);
  line-height:1;
}
.wordmark .count-dots{color:var(--amber)}
.tagline{
  color:var(--chalk-dim);
  font-size:15px;
  margin-top:8px;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.pennant-rule{
  display:flex;justify-content:center;gap:8px;margin:14px 0 4px;
  color:var(--amber);font-size:13px;letter-spacing:.4em;
}

/* ---------- generic panel ---------- */
.panel{
  background:var(--green-panel);
  border:2px solid var(--green-line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px;
  margin-top:18px;
}
.panel h2{
  font-family:var(--font-display);
  font-size:19px;
  letter-spacing:.08em;
  color:var(--amber);
  margin-bottom:10px;
  text-transform:uppercase;
}

/* ---------- big buttons ---------- */
.btn{
  display:block;width:100%;
  font-family:var(--font-display);
  font-size:19px;letter-spacing:.06em;
  padding:16px 18px;margin-top:12px;
  color:var(--green-deep);
  background:linear-gradient(var(--amber), var(--amber-deep));
  border:none;border-radius:var(--radius);
  cursor:pointer;
  box-shadow:0 4px 0 #9c6400, var(--shadow);
  transition:transform .06s ease;
  text-transform:uppercase;
}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 #9c6400}
.btn.secondary{
  background:linear-gradient(#3F7359,var(--green-wall));
  color:var(--chalk);
  box-shadow:0 4px 0 #10281C, var(--shadow);
}
.btn:focus-visible,.opt:focus-visible,.pos-btn:focus-visible{
  outline:3px solid var(--amber);outline-offset:3px;
}
.btn:disabled{opacity:.55;cursor:default}

.streak-chip{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--green-wall);border:1.5px solid var(--green-line);
  border-radius:999px;padding:6px 14px;margin-top:10px;
  font-family:var(--font-digits);font-size:14px;color:var(--chalk);
}

/* ---------- field position picker ---------- */
.field-wrap{position:relative;margin-top:14px}
.field-wrap svg{width:100%;height:auto;display:block;border-radius:var(--radius)}
.pos-btn{
  position:absolute;transform:translate(-50%,-50%);
  font-family:var(--font-display);
  font-size:14px;letter-spacing:.04em;
  min-width:46px;min-height:46px;
  padding:4px 8px;
  border-radius:50%;
  border:2.5px solid var(--chalk);
  background:var(--green-deep);
  color:var(--chalk);
  cursor:pointer;
  box-shadow:0 3px 10px rgba(0,0,0,.5);
  transition:transform .12s ease, background .12s ease;
}
.pos-btn:hover{background:var(--amber);color:var(--green-deep);transform:translate(-50%,-50%) scale(1.12)}
.bat-row{display:flex;gap:10px;margin-top:12px}
.bat-row .btn{margin-top:0}

/* ---------- hero field card (quiz situation) ---------- */
.fieldcard{
  background:#152F22;
  border:2px solid var(--green-line);
  border-radius:var(--radius);
  padding:12px 14px 14px;
  box-shadow:var(--shadow);
  margin-top:16px;
}
.fc-top{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:4px;
}
.fc-mode{
  font-family:var(--font-display);font-size:14px;letter-spacing:.06em;
  color:var(--amber);text-transform:uppercase;
}
.fc-play{
  font-family:var(--font-digits);font-size:14px;color:var(--chalk-dim);
  letter-spacing:.1em;
}
.hero-diamond{
  display:block;width:100%;max-width:440px;height:auto;margin:4px auto 2px;
}
.runner-dot{ fill:var(--amber); stroke:#0B160F; stroke-width:2; filter:drop-shadow(0 0 5px rgba(255,182,39,.7)); }
.batter-dot{ fill:var(--chalk); stroke:#0B160F; stroke-width:2; }
.pos-marker text{ font-family:var(--font-display); font-size:12px; fill:var(--green-deep); }
.pos-marker circle{ fill:var(--out-red); stroke:var(--chalk); stroke-width:2; filter:drop-shadow(0 0 6px rgba(228,87,46,.6)); }

.corner-timer{
  font-family:var(--font-digits);font-size:13px;color:var(--chalk-dim);
  border:1.5px solid var(--green-line);border-radius:999px;
  padding:2px 9px;margin-right:10px;opacity:.85;
}
.corner-timer.low{color:var(--out-red);border-color:var(--out-red)}
.fc-score-inline{margin-left:12px}
.fc-score-inline #sb-score{
  font-family:var(--font-digits);font-size:17px;color:var(--amber);
  text-shadow:0 0 10px rgba(255,182,39,.45);
}
.fc-pts{font-size:9px;letter-spacing:.2em;color:var(--chalk-dim);text-transform:uppercase;margin-left:4px}
.fb-key{
  font-family:var(--font-display);font-size:10px;fill:var(--chalk-dim);
  text-anchor:middle;letter-spacing:.05em;
}
.svg-lamp{fill:#0B160F;stroke:#3A6B54;stroke-width:1.5}
.svg-lamp.on-ball{fill:var(--amber);stroke:var(--amber);filter:drop-shadow(0 0 4px rgba(255,182,39,.8))}
.svg-lamp.on-strike{fill:var(--out-red);stroke:var(--out-red);filter:drop-shadow(0 0 4px rgba(228,87,46,.8))}
.svg-lamp.on-out{fill:var(--out-red);stroke:var(--out-red);filter:drop-shadow(0 0 4px rgba(228,87,46,.8))}


/* ---------- question & options ---------- */
.q-meta{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:16px;font-family:var(--font-digits);
  font-size:13px;color:var(--chalk-dim);letter-spacing:.1em;
}
.q-text{
  font-size:19px;font-weight:700;line-height:1.45;
  margin-top:10px;color:var(--chalk);
}
.opts{margin-top:16px;display:grid;gap:10px}
.opt{
  text-align:left;font-family:var(--font-body);
  font-size:16.5px;font-weight:700;line-height:1.35;
  padding:15px 16px;border-radius:var(--radius);
  border:2px solid var(--green-line);
  background:var(--green-wall);color:var(--chalk);
  cursor:pointer;display:flex;gap:12px;align-items:flex-start;
  transition:border-color .12s ease, background .12s ease;
  min-height:54px;
}
.opt:hover{border-color:var(--amber)}
.opt .tag{
  font-family:var(--font-display);color:var(--amber);
  flex:0 0 auto;font-size:15px;margin-top:1px;
}
.opt.correct{background:#2E5B2E;border-color:var(--safe-green)}
.opt.wrong{background:#5B2A1E;border-color:var(--out-red)}
.opt.dim{opacity:.5}
.opt:disabled{cursor:default}

.verdict{
  margin-top:14px;padding:14px 16px;border-radius:var(--radius);
  border:2px solid var(--green-line);background:#152F22;
  font-size:16px;
}
.verdict .call{
  font-family:var(--font-display);letter-spacing:.08em;
  font-size:18px;text-transform:uppercase;
}
.verdict.good .call{color:var(--safe-green)}
.verdict.bad .call{color:var(--out-red)}
.verdict .pts{font-family:var(--font-digits);color:var(--amber)}
.verdict p{margin-top:6px;color:var(--chalk)}

/* ---------- results ---------- */
.result-score{
  font-family:var(--font-digits);font-size:52px;color:var(--amber);
  text-align:center;text-shadow:0 0 18px rgba(255,182,39,.4);
}
.result-grade{
  text-align:center;font-family:var(--font-display);
  font-size:26px;letter-spacing:.06em;margin-top:6px;
}
.result-sub{text-align:center;color:var(--chalk-dim);margin-top:6px}
.grid-row{
  display:flex;justify-content:center;gap:6px;margin-top:14px;font-size:24px;
  letter-spacing:2px;
}
.share-note{
  text-align:center;font-family:var(--font-digits);font-size:13px;
  color:var(--safe-green);margin-top:10px;min-height:18px;
}

/* ---------- utility ---------- */
.hidden{display:none!important}
.center{text-align:center}
footer{
  text-align:center;color:var(--chalk-dim);font-size:12.5px;
  margin-top:40px;letter-spacing:.08em;
}

@media (max-width:420px){
  .q-text{font-size:17.5px}
}
@media (prefers-reduced-motion: reduce){
  *{transition:none!important;animation:none!important}
}

/* ---------- drill narration banner ---------- */
.drill-narr{
  margin-top:14px;padding:10px 14px;border-radius:var(--radius);
  border:1.5px dashed var(--green-line);
  background:#152F22;color:var(--chalk-dim);
  font-family:var(--font-digits);font-size:13.5px;line-height:1.5;
}
.drill-narr.fresh{
  border-style:solid;border-color:var(--amber);
  color:var(--amber);letter-spacing:.04em;
}

/* ---------- leaderboard ---------- */
.lb-stats{
  display:flex;justify-content:space-around;gap:8px;margin-bottom:12px;
  font-family:var(--font-digits);font-size:13px;color:var(--chalk-dim);
}
.lb-stats b{display:block;font-size:20px;color:var(--amber);text-align:center}
.lb-list{list-style:none;counter-reset:rank}
.lb-list li{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:10px;margin-bottom:6px;
  background:var(--green-wall);border:1.5px solid var(--green-line);
}
.lb-list li .lb-rank{
  font-family:var(--font-display);font-size:15px;color:var(--amber);
  min-width:34px;text-align:center;
}
.lb-list li.me{border-color:var(--amber);background:#2E5B2E}
.lb-name{flex:1;font-weight:800;font-size:15px}
.lb-score{font-family:var(--font-digits);color:var(--amber);font-size:15px}
.lb-correct{font-family:var(--font-digits);font-size:12px;color:var(--chalk-dim);min-width:38px;text-align:right}
.lb-note{text-align:center;font-family:var(--font-digits);font-size:12.5px;color:var(--chalk-dim);margin-top:10px}

/* ---------- modal ---------- */
.modal-backdrop{
  position:fixed;inset:0;background:rgba(6,15,10,.82);
  display:flex;align-items:center;justify-content:center;padding:20px;z-index:50;
}
.modal{
  background:var(--green-panel);border:2px solid var(--amber);
  border-radius:var(--radius);padding:22px;max-width:400px;width:100%;
  box-shadow:var(--shadow);
}
.modal h2{
  font-family:var(--font-display);color:var(--amber);font-size:20px;
  letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px;
}
.modal p{color:var(--chalk-dim);font-size:14.5px;margin-bottom:14px}
.modal input{
  width:100%;padding:14px;border-radius:var(--radius);
  border:2px solid var(--green-line);background:var(--green-deep);
  color:var(--chalk);font-family:var(--font-body);font-size:17px;font-weight:700;
  margin-bottom:6px;
}
.modal input:focus-visible{outline:3px solid var(--amber);outline-offset:2px}

/* ---------- answer review (Daily, end of game) ---------- */
.review-note{
  font-size:13.5px;color:var(--chalk-dim);margin-bottom:14px;line-height:1.5;
}
.review-list{list-style:none;counter-reset:rev}
.review-list li{
  counter-increment:rev;
  background:var(--green-wall);border:1.5px solid var(--green-line);
  border-radius:12px;padding:13px 15px;margin-bottom:10px;
}
.review-list li::before{
  content:"Q" counter(rev);
  font-family:var(--font-display);font-size:12px;color:var(--chalk-dim);
  letter-spacing:.08em;
}
.rev-verdict{float:right;font-family:var(--font-display);font-size:12px;letter-spacing:.06em}
.rev-verdict.ok{color:var(--amber)}
.rev-verdict.no{color:var(--out-red)}
.rev-q{font-weight:700;font-size:14.5px;margin:6px 0 10px;line-height:1.45}
.rev-line{font-size:13.5px;line-height:1.5;margin:3px 0;padding-left:20px;text-indent:-20px}
.rev-correct{color:var(--chalk)}
.rev-correct b{color:#7FD98A}
.rev-picked{color:var(--chalk-dim)}
.rev-picked b{color:var(--out-red)}
.rev-why{
  font-size:13px;color:var(--chalk-dim);line-height:1.55;
  margin-top:9px;padding-top:9px;border-top:1px solid var(--green-line);
}