:root{
  --turf:#0f3d24; --turf-deep:#0a2a19; --line:rgba(255,255,255,.14);
  --panel:rgba(8,14,12,.82); --panel-2:rgba(255,255,255,.06); --ink:#f4f6f2; --muted:#a9b8ae;
  --led:#ffcf3f; --accent:#ffcf3f; --accent-ink:#1a1400;
  --good:#3fe07f; --good-bg:rgba(63,224,127,.14); --bad:#ff6b57; --bad-bg:rgba(255,107,87,.14);
  --display:"Bebas Neue",Impact,"Arial Narrow",sans-serif;
}
*{box-sizing:border-box}
html{background:var(--turf-deep)}
body{
  margin:0;color:var(--ink);font:16px/1.45 Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;min-height:100vh;
  background:
    radial-gradient(ellipse 70% 38% at 18% -6%, rgba(255,250,220,.30), transparent 70%),
    radial-gradient(ellipse 70% 38% at 82% -6%, rgba(255,250,220,.30), transparent 70%),
    repeating-linear-gradient(180deg, transparent 0 79px, var(--line) 79px 81px),
    repeating-linear-gradient(180deg, rgba(255,255,255,.025) 0 160px, transparent 160px 320px),
    linear-gradient(180deg, #145232, var(--turf) 40%, var(--turf-deep));
  background-attachment:fixed;
}
.wrap{max-width:720px;margin:0 auto;padding:28px 16px 48px;position:relative}
header{text-align:center;margin-bottom:22px}
h1{font-family:var(--display);font-weight:400;font-size:56px;line-height:.9;margin:0;letter-spacing:.02em;text-shadow:0 3px 0 rgba(0,0,0,.35)}
h1 span{color:var(--led);display:block}
.sub{color:var(--muted);font-size:14px}
header .sub{margin-top:8px;letter-spacing:.18em;text-transform:uppercase;font-size:12px;font-weight:600}
.card{position:relative;background:var(--panel);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:22px;box-shadow:0 10px 40px rgba(0,0,0,.45);backdrop-filter:blur(6px);overflow:hidden}
.card::before{content:"";position:absolute;inset:0 0 auto 0;height:6px;background:var(--stripe,linear-gradient(90deg,var(--led),#fff6c8,var(--led)));transition:background .3s}
.section-label{font-family:var(--display);font-size:22px;letter-spacing:.06em;color:#fff;margin:26px 0 10px;display:flex;align-items:center;gap:10px}
.section-label::after{content:"";flex:1;height:2px;background:var(--line)}
.modes{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.mode{all:unset;cursor:pointer;position:relative;background:var(--panel);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:16px 16px 14px 16px;transition:transform .12s,border-color .12s,box-shadow .12s;overflow:hidden}
.mode:hover,.mode:focus-visible{border-color:var(--led);transform:translateY(-3px) rotate(-.4deg);box-shadow:0 8px 24px rgba(255,207,63,.18)}
.mode .num{position:absolute;right:10px;top:-6px;font-family:var(--display);font-size:64px;line-height:1;color:rgba(255,255,255,.07)}
.mode b{display:block;font-family:var(--display);font-weight:400;font-size:26px;letter-spacing:.03em;margin-bottom:2px;position:relative}
.mode small{color:var(--muted);font-size:13px;position:relative}
.tag{display:inline-block;font-size:11px;font-weight:700;padding:3px 8px;border-radius:99px;background:rgba(255,207,63,.14);color:var(--led);margin-top:10px;letter-spacing:.04em}
.leagues{display:grid;grid-template-columns:repeat(auto-fit,minmax(78px,1fr));gap:8px;max-width:520px}
.league{all:unset;cursor:pointer;min-height:44px;padding:0 8px;display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;border:1px solid rgba(255,255,255,.2);border-radius:12px;background:var(--panel);font-family:var(--display);font-size:24px;letter-spacing:.05em;transition:border-color .12s,background .12s}
.league:hover,.league:focus-visible{border-color:var(--led)}
.league[aria-pressed="true"]{border-color:var(--led);background:rgba(255,207,63,.14);color:var(--led)}
select{font:inherit;font-weight:600;padding:10px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.2);background:var(--panel);color:var(--ink);width:100%;max-width:320px}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
/* scoreboard */
.scoreboard{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;background:#050807;border:2px solid #222;border-radius:12px;padding:8px;margin-bottom:12px;box-shadow:inset 0 0 18px rgba(0,0,0,.8),0 6px 20px rgba(0,0,0,.4)}
.sb{text-align:center}
.sb small{display:block;font-size:10px;letter-spacing:.2em;color:#8a8f8c;font-weight:700}
.sb b{display:block;font-family:var(--display);font-weight:400;font-size:34px;line-height:1;color:var(--led);text-shadow:0 0 8px rgba(255,207,63,.65)}
.sb b.hot{color:#ff8a3d;text-shadow:0 0 10px rgba(255,120,40,.8)}
#quiz-title{font-family:var(--display);font-size:20px;letter-spacing:.05em;color:#fff;text-align:center;margin-bottom:8px}
/* field progress */
.field{position:relative;height:34px;border-radius:8px;margin:0 0 16px;overflow:visible;
  background:repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(255,255,255,.45) calc(10% - 1px) 10%), linear-gradient(90deg,#9b2335 0 6%,#1d6b3c 6% 94%,#9b2335 94%);
  border:2px solid rgba(255,255,255,.6)}
.field .ball{position:absolute;top:50%;left:6%;transform:translate(-50%,-50%) rotate(-25deg);font-size:24px;transition:left .45s cubic-bezier(.3,1.4,.5,1);filter:drop-shadow(0 2px 2px rgba(0,0,0,.5))}
.prompt-label{color:var(--led);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin:6px 0 6px}
.prompt{font-family:var(--display);font-weight:400;font-size:52px;line-height:1;letter-spacing:.02em;margin:0 0 6px}
.hint{color:var(--muted);font-size:13px;margin-bottom:10px}
.options{display:grid;gap:10px;margin-top:16px}
.opt{all:unset;cursor:pointer;display:flex;align-items:center;gap:12px;padding:13px 14px;border:1px solid rgba(255,255,255,.14);border-radius:12px;background:var(--panel-2);font-weight:600;transition:transform .1s,border-color .1s,background .1s}
.opt:hover:not([disabled]),.opt:focus-visible{border-color:var(--led);background:rgba(255,207,63,.08);transform:translateX(3px)}
.opt .k{font-family:var(--display);font-size:18px;color:var(--accent-ink);background:var(--led);border-radius:6px;width:24px;height:24px;display:grid;place-items:center;flex:none}
.opt.correct{background:var(--good-bg);border-color:var(--good);animation:bounce .45s}
.opt.wrong{background:var(--bad-bg);border-color:var(--bad)}
.opt[disabled]{cursor:default}
.swatches{display:flex;gap:6px;flex-wrap:wrap}
.sw{display:flex;flex-direction:column;align-items:center;gap:3px}
.sw i{display:block;width:44px;height:30px;border-radius:6px;border:1px solid rgba(255,255,255,.35)}
.sw span{font-size:11px;color:var(--muted);white-space:nowrap}
.big .sw i{width:76px;height:56px;border-radius:10px;box-shadow:0 4px 12px rgba(0,0,0,.4)}
.big .sw span{font-size:12px}
input[type=text]{font:inherit;font-size:20px;font-weight:600;width:100%;padding:14px 16px;border-radius:12px;border:2px solid rgba(255,255,255,.2);background:rgba(0,0,0,.35);color:var(--ink);margin-top:14px}
input[type=text]:focus{outline:none;border-color:var(--led);box-shadow:0 0 0 4px rgba(255,207,63,.2)}
.btn{all:unset;cursor:pointer;background:var(--led);color:var(--accent-ink);padding:11px 20px;border-radius:12px;font-family:var(--display);font-size:22px;letter-spacing:.05em;text-align:center;box-shadow:0 4px 0 #b88e10;transition:transform .08s,box-shadow .08s}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 #b88e10}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid rgba(255,255,255,.25);box-shadow:none}
.btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
.feedback{margin-top:14px;padding:12px 14px;border-radius:12px;font-weight:600;display:none}
.feedback.good{display:block;background:var(--good-bg);color:var(--good)}
.feedback.bad{display:block;background:var(--bad-bg);color:var(--bad)}
.actions{display:flex;gap:10px;margin-top:18px;justify-content:flex-end;flex-wrap:wrap}
/* big pop text */
.pop{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%) scale(.4);font-family:var(--display);font-size:64px;white-space:nowrap;pointer-events:none;opacity:0;z-index:5;text-shadow:0 4px 0 rgba(0,0,0,.5)}
.pop.go{animation:pop 1s ease-out forwards}
.pop.good{color:var(--led)} .pop.bad{color:var(--bad);font-size:52px}
.shake{animation:shake .4s}
@keyframes pop{0%{opacity:0;transform:translate(-50%,-50%) scale(.4) rotate(-6deg)}20%{opacity:1;transform:translate(-50%,-50%) scale(1.15) rotate(-3deg)}60%{opacity:1;transform:translate(-50%,-55%) scale(1) rotate(-3deg)}100%{opacity:0;transform:translate(-50%,-75%) scale(1) rotate(-3deg)}}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-9px)}40%{transform:translateX(8px)}60%{transform:translateX(-6px)}80%{transform:translateX(4px)}}
@keyframes bounce{0%{transform:scale(1)}40%{transform:scale(1.04)}100%{transform:scale(1)}}
/* results */
.final{background:#050807;border:2px solid #222;border-radius:14px;padding:18px;text-align:center;box-shadow:inset 0 0 24px rgba(0,0,0,.9)}
.final small{display:block;font-size:12px;letter-spacing:.3em;color:#8a8f8c;font-weight:700}
.score{font-family:var(--display);font-size:96px;line-height:1;color:var(--led);text-shadow:0 0 14px rgba(255,207,63,.7);margin:4px 0}
.grade{display:inline-block;font-family:var(--display);font-size:26px;letter-spacing:.05em;padding:4px 14px;border-radius:99px;background:rgba(255,207,63,.15);color:var(--led);margin-bottom:6px}
#res-title{font-family:var(--display);font-size:20px;letter-spacing:.05em;color:#fff;text-align:center;margin-bottom:10px}
#res-msg{text-align:center;margin-top:12px}
.missed{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:8px}
.missed li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;border:1px solid rgba(255,255,255,.14);border-radius:10px;flex-wrap:wrap;background:var(--panel-2)}
.hidden{display:none!important}
#confetti{position:fixed;inset:0;pointer-events:none;z-index:50}
footer{margin-top:28px;color:var(--muted);font-size:12px;text-align:center}
/* basketball (league surface "maple"): a light theme. Bright maple floor with plank seams and an orange key and
   3-point arc at the bottom, so text sitting directly on the background is dark brown and panels are solid */
html[data-surface="maple"]{background:#ddb37c}
[data-surface="maple"]{--panel:#2a1a10}
[data-surface="maple"] body{
  background:
    radial-gradient(ellipse 70% 30% at 50% -6%, rgba(255,255,255,.55), transparent 70%),
    radial-gradient(circle at 50% 108%, transparent 0 150px, rgba(224,89,42,.85) 150px 154px, transparent 154px),
    linear-gradient(90deg, transparent calc(50% - 70px), rgba(224,89,42,.22) calc(50% - 70px) calc(50% + 70px), transparent calc(50% + 70px)) bottom / 100% 14% no-repeat,
    repeating-linear-gradient(180deg, rgba(120,70,30,.16) 0 1px, transparent 1px 30px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 180px, rgba(120,70,30,.05) 180px 330px),
    linear-gradient(180deg, #f1d3a6, #e7c391 50%, #ddb37c);
  background-attachment:fixed;
}
[data-surface="maple"] h1, [data-surface="maple"] .section-label, [data-surface="maple"] #quiz-title{color:#2a1a10;text-shadow:none}
[data-surface="maple"] h1 span{color:#d24e1c}
[data-surface="maple"] header .sub, [data-surface="maple"] footer{color:#5b3d26}
[data-surface="maple"] .section-label::after{background:rgba(42,26,16,.2)}
[data-surface="maple"] .league[aria-pressed="true"]{background:linear-gradient(rgba(255,207,63,.16),rgba(255,207,63,.16)),#2a1a10}
[data-surface="maple"] .field{
  border-color:#2a1a10;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 10px, rgba(255,255,255,.85) 10px 12px, transparent 12px),
    linear-gradient(90deg, transparent calc(50% - 1px), rgba(255,255,255,.85) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(#e0592a,#e0592a) left center / 12% 60% no-repeat,
    linear-gradient(#e0592a,#e0592a) right center / 12% 60% no-repeat,
    repeating-linear-gradient(90deg, rgba(120,70,30,.14) 0 1px, transparent 1px 22px),
    linear-gradient(180deg, #f1d3a6, #e2bb85);
}

/* women's basketball (league surface "seams"): deep plum with a big orange basketball peeking in from the bottom corner */
html[data-surface="seams"]{background:#160a1c}
[data-surface="seams"] body{
  background:
    radial-gradient(ellipse 60% 30% at 50% -6%, rgba(255,160,90,.20), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E %3Cg fill='none' stroke='rgba(255,122,48,0.55)' stroke-width='5'%3E %3Ccircle cx='200' cy='200' r='190'/%3E%3Cpath d='M10 200 H390'/%3E%3Cpath d='M200 10 V390'/%3E %3Cpath d='M66 66 C150 140 150 260 66 334'/%3E%3Cpath d='M334 66 C250 140 250 260 334 334'/%3E %3C/g%3E%3C/svg%3E") right -170px bottom -150px / 460px 460px no-repeat,
    linear-gradient(180deg, #33133d, #241029 50%, #160a1c);
  background-attachment:fixed;
}
[data-surface="seams"] .field{
  background:
    radial-gradient(circle at 50% 50%, transparent 0 10px, rgba(255,122,48,.9) 10px 12px, transparent 12px),
    linear-gradient(90deg, transparent calc(50% - 1px), rgba(255,122,48,.9) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
    radial-gradient(ellipse 22% 120% at 0 50%, transparent 0 95%, rgba(255,122,48,.9) 95% 100%, transparent 100%),
    radial-gradient(ellipse 22% 120% at 100% 50%, transparent 0 95%, rgba(255,122,48,.9) 95% 100%, transparent 100%),
    linear-gradient(180deg, #3d1848, #2a1032);
}

/* baseball (league surface "diamond"): a big infield diamond (bases, dirt, mound) rising from the bottom
   under a night-into-sunset sky */
html[data-surface="diamond"]{background:#7a3446}
[data-surface="diamond"] body{
  background:
    radial-gradient(ellipse 34% 14% at 10% 0, rgba(255,240,210,.30), transparent 70%),
    radial-gradient(ellipse 34% 14% at 90% 0, rgba(255,240,210,.30), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E %3Cpath d='M200 40 L360 200 L200 360 L40 200 Z' fill='rgba(176,112,63,0.34)' stroke='rgba(255,255,255,0.38)' stroke-width='3'/%3E %3Cpath d='M200 120 L280 200 L200 280 L120 200 Z' fill='rgba(40,110,58,0.55)'/%3E %3Ccircle cx='200' cy='200' r='16' fill='rgba(176,112,63,0.6)'/%3E %3Crect x='192' y='32' width='16' height='16' fill='white' transform='rotate(45 200 40)'/%3E %3Crect x='352' y='192' width='16' height='16' fill='white' transform='rotate(45 360 200)'/%3E %3Crect x='32' y='192' width='16' height='16' fill='white' transform='rotate(45 40 200)'/%3E %3Cpath d='M190 352 L210 352 L210 362 L200 370 L190 362 Z' fill='white'/%3E %3C/svg%3E") center bottom -140px / 560px 560px no-repeat,
    radial-gradient(ellipse 90% 40% at 50% 104%, rgba(255,150,80,.38), transparent 70%),
    linear-gradient(180deg, #0a1030 0%, #18194a 30%, #3a1f55 55%, #6a2c52 78%, #8a3a46 100%);
  background-attachment:fixed;
}
[data-surface="diamond"] .field{
  background:
    linear-gradient(#fff,#fff) 28% 50% / 10px 10px no-repeat,
    linear-gradient(#fff,#fff) 50% 50% / 10px 10px no-repeat,
    linear-gradient(#fff,#fff) 72% 50% / 10px 10px no-repeat,
    linear-gradient(90deg, transparent 0 3%, rgba(255,255,255,.85) 3% 3.6%, transparent 3.6% 96.4%, rgba(255,255,255,.85) 96.4% 97%, transparent 97%),
    linear-gradient(180deg, #2f7a3a 0 20%, #b0703f 20% 80%, #2f7a3a 80%);
}

/* hockey (league surface "ice"): a light theme (cool, vs. the NBA's warm maple). A bright ice sheet with red and blue lines,
   so text sitting directly on the background switches to dark navy */
html[data-surface="ice"]{background:#d3e4ef}
[data-surface="ice"]{--panel:#122331}
[data-surface="ice"] body{
  background:
    radial-gradient(ellipse 80% 30% at 50% -4%, rgba(255,255,255,.9), transparent 70%),
    radial-gradient(circle at 50% 50%, transparent 0 128px, rgba(200,16,46,.30) 128px 131px, transparent 131px),
    radial-gradient(circle at 50% 50%, rgba(44,99,196,.45) 0 6px, transparent 6px),
    linear-gradient(180deg, transparent calc(50% - 3px), rgba(200,16,46,.32) calc(50% - 3px) calc(50% + 3px), transparent calc(50% + 3px)),
    linear-gradient(180deg, transparent calc(28% - 7px), rgba(44,99,196,.30) calc(28% - 7px) calc(28% + 7px), transparent calc(28% + 7px)),
    linear-gradient(180deg, transparent calc(72% - 7px), rgba(44,99,196,.30) calc(72% - 7px) calc(72% + 7px), transparent calc(72% + 7px)),
    repeating-linear-gradient(118deg, rgba(255,255,255,.35) 0 1px, transparent 1px 11px),
    repeating-linear-gradient(32deg, rgba(120,160,190,.10) 0 1px, transparent 1px 17px),
    linear-gradient(180deg, #f3f8fb, #e1edf4 50%, #d3e4ef);
  background-attachment:fixed;
}
[data-surface="ice"] h1, [data-surface="ice"] .section-label, [data-surface="ice"] #quiz-title{color:#0b2545;text-shadow:none}
[data-surface="ice"] h1 span{color:#c8102e}
[data-surface="ice"] header .sub, [data-surface="ice"] footer{color:#3d556b}
[data-surface="ice"] .section-label::after{background:rgba(11,37,69,.18)}
[data-surface="ice"] .league[aria-pressed="true"]{background:linear-gradient(rgba(255,207,63,.16),rgba(255,207,63,.16)),#0b2545}
[data-surface="ice"] .field{
  border-color:#0b2545;
  background:
    radial-gradient(circle at 50% 50%, #2c63c4 0 3px, transparent 3px 10px, rgba(44,99,196,.85) 10px 12px, transparent 12px),
    linear-gradient(90deg,
      transparent 0 5%, #c8102e 5% 5.6%, transparent 5.6% 34%, #2c63c4 34% 36%, transparent 36% calc(50% - 2px),
      #c8102e calc(50% - 2px) calc(50% + 2px), transparent calc(50% + 2px) 64%, #2c63c4 64% 66%, transparent 66% 94.4%, #c8102e 94.4% 95%, transparent 95%),
    linear-gradient(180deg, #ffffff, #e8f1f7);
}

@media (max-width:480px){select{max-width:100%;font-size:15px;padding:10px 8px}.leagues{grid-template-columns:repeat(auto-fit,minmax(56px,1fr));gap:6px}.league{flex-direction:column;font-size:18px;gap:0;padding:6px 2px;line-height:1.1;min-height:52px}h1{font-size:46px}.prompt{font-size:40px}.big .sw i{width:58px;height:44px}.score{font-size:76px}.pop,.pop.bad{font-size:44px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}