/* Statle — shared design system (used by index/easy/normal; hard.html keeps its own inline copy) */
:root{
  --bg:#0b0b12; --panel:#14141f; --panel-2:#1b1b28; --line:#272733; --line-2:#34344a;
  --txt:#f4f4f9; --muted:#9a9ab2; --accent:#7c6cff; --accent-2:#2ee6a8;
  --bad:#ff5d73; --good:#2ee6a8; --warn:#ffcf5c; --orange:#ff7a1f;
  --radius:18px; --radius-sm:12px; --shadow:0 24px 70px rgba(0,0,0,.55);
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --display:'Oswald','Inter',sans-serif;
}
body.light{
  --bg:#e9e9f2; --panel:#ffffff; --panel-2:#f4f4fb; --line:#d4d4e3; --line-2:#c1c1d5;
  --txt:#16161f; --muted:#5f5f78; --shadow:0 18px 50px rgba(50,40,100,.14);
  --accent-2:#0ca678; --good:#0ca678;
}
*{box-sizing:border-box} html,body{margin:0;padding:0}
body{font-family:var(--font);color:var(--txt);min-height:100vh;-webkit-font-smoothing:antialiased;
  background:radial-gradient(1100px 560px at 50% -14%,rgba(124,108,255,.16),transparent 60%),radial-gradient(820px 480px at 100% 4%,rgba(46,230,168,.08),transparent 55%),var(--bg);background-attachment:fixed}
a{color:inherit;text-decoration:none}

/* topbar */
.topbar{position:sticky;top:0;z-index:60;backdrop-filter:blur(14px);background:rgba(11,11,18,.72);border-bottom:1px solid var(--line)}
body.light .topbar{background:rgba(255,255,255,.74)}
body.light .opt,body.light .tile,body.light .card{box-shadow:0 2px 10px rgba(40,30,90,.09)}
body.light .opt:hover:not(:disabled){box-shadow:0 4px 14px rgba(124,108,255,.22)}
.topbar .inner{max-width:680px;margin:0 auto;padding:0 16px;height:58px;display:flex;align-items:center;gap:10px}
.brand{display:flex;align-items:center;gap:8px;font-weight:900;letter-spacing:-.5px;font-size:20px}
.brand .word{color:var(--orange)}
.brand .ball{width:23px;height:23px;color:var(--orange);filter:drop-shadow(0 0 9px rgba(255,122,31,.55))}
.topbar .sp{margin-left:auto}
.iconbtn{display:inline-flex;align-items:center;gap:6px;background:none;border:1px solid var(--line);color:var(--muted);font-weight:600;font-size:13px;padding:8px 13px;border-radius:10px;cursor:pointer;font-family:inherit}
.iconbtn:hover{color:var(--txt);border-color:var(--line-2)}
.iconbtn.ic-only{padding:8px 9px}
.iconbtn .ic{font-size:15px;color:var(--accent)}
.iconbtn:hover .ic{color:var(--accent-2)}

.wrap{max-width:680px;margin:0 auto;padding:14px 16px 80px}
.ghead{text-align:center;padding:12px 0 2px}
.ghead h1{font-size:clamp(30px,6.5vw,44px);font-weight:900;letter-spacing:-1.5px;margin:0;color:var(--orange)}
.lead{max-width:540px;margin:10px auto 0;color:var(--txt);font-size:15.5px;line-height:1.5;opacity:.92}
.lead b{font-weight:700}
.lead .daily{text-decoration:underline;text-decoration-color:var(--accent-2);text-decoration-thickness:2px;text-underline-offset:3px;font-weight:700}
.daybadge{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);background:var(--panel-2);border:1px solid var(--line);border-radius:999px;padding:3px 10px}

/* icons */
.ic{width:1em;height:1em;display:inline-block;vertical-align:-.14em;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.cpts{color:#ff8a4c}.creb{color:#49b6ff}.cast{color:#2ee6a8}
body.light .cast{color:#0ca678}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;font-family:inherit;border:1px solid transparent;background:linear-gradient(180deg,#8b7bff,var(--accent));color:#fff;padding:12px 22px;border-radius:var(--radius-sm);font-weight:700;font-size:15px;box-shadow:0 8px 24px rgba(124,108,255,.3);transition:.15s}
.btn:hover{filter:brightness(1.06)} .btn.ghost{background:transparent;border-color:var(--line);color:var(--txt);box-shadow:none} .btn.sm{padding:9px 15px;font-size:13px}
.btn .ic{font-size:17px}
/* prominent "challenge a friend" CTA — bold, mode-colored, shimmering */
.challenge{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;margin:6px 0 12px;padding:16px 18px;border:none;border-radius:16px;cursor:pointer;font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:.6px;text-transform:uppercase;color:#0b0b12;background:linear-gradient(120deg,var(--accent),var(--accent-2));box-shadow:0 12px 34px rgba(0,0,0,.4);position:relative;overflow:hidden;transition:.15s}
.challenge:hover{transform:translateY(-2px);filter:brightness(1.06)}
.challenge:active{transform:translateY(0)}
.challenge .ic{font-size:23px}
.challenge::after{content:"";position:absolute;top:0;left:-60%;width:42%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-18deg);animation:shine 2.8s ease-in-out infinite}
@keyframes shine{0%,55%{left:-60%}100%{left:150%}}
@media (prefers-reduced-motion:reduce){.challenge::after{display:none}}

/* mode cards (landing) */
.cards{display:flex;flex-direction:column;gap:12px;margin:18px 0}
.card{display:block;background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--line);border-radius:var(--radius);padding:18px 18px;transition:.15s;position:relative;overflow:hidden}
.card:hover{border-color:var(--line-2);transform:translateY(-1px)}
.card .tag{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:1px;padding:4px 10px;border-radius:999px;margin-bottom:8px}
.card.easy .tag{color:var(--good);background:rgba(46,230,168,.12)}
.card.normal .tag{color:#49b6ff;background:rgba(73,182,255,.12)}
.card.hard .tag{color:var(--orange);background:rgba(255,122,31,.12)}
.card h2{margin:2px 0 4px;font-size:22px;letter-spacing:-.5px}
.card .blurb{color:var(--muted);font-size:14px;line-height:1.5;margin:0}
.card .go{display:inline-flex;align-items:center;gap:6px;margin-top:12px;color:var(--accent);font-weight:800;font-size:14px}
.card .go .ic{font-size:16px}
.card .cic{position:absolute;right:16px;top:16px;font-size:30px;opacity:.9}

/* shared game UI: question card, options, progress, result */
.qcard{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--line);border-radius:24px;padding:30px 20px 26px;text-align:center;margin:18px 0;box-shadow:0 14px 46px rgba(0,0,0,.28)}
body.light .qcard{box-shadow:0 12px 36px rgba(50,40,100,.10)}
.qcard .qlbl{font-size:11px;text-transform:uppercase;letter-spacing:1.4px;color:var(--muted);font-weight:700}
.qcard .qbig{font-size:clamp(22px,5vw,30px);font-weight:800;letter-spacing:-.5px;margin:8px 0 2px;line-height:1.2}
.qcard .qsub{color:var(--muted);font-size:14px}
.qcard .qnum{font-size:clamp(40px,10vw,56px);font-weight:900;letter-spacing:-1px;line-height:1;background:linear-gradient(120deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.opts{display:flex;gap:10px;margin:14px 0 2px}
.opt{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:64px;padding:12px;border-radius:14px;background:var(--panel-2);border:1px solid var(--line);color:var(--txt);font-weight:800;font-size:16px;cursor:pointer;font-family:inherit;transition:.12s}
.opt .ic{font-size:20px;color:var(--accent)}
.opt small{font-weight:600;font-size:11px;color:var(--muted)}
.opt:hover:not(:disabled){border-color:var(--accent);background:var(--panel)}
.opt:disabled{cursor:default}
.opt.correct{background:rgba(46,230,168,.16);border-color:var(--good);color:var(--good)}
.opt.correct .ic,.opt.correct small{color:var(--good)}
.opt.wrong{background:rgba(255,93,115,.14);border-color:var(--bad);color:var(--bad)}
.opt.wrong .ic,.opt.wrong small{color:var(--bad)}
.opt.dim{opacity:.5}
.h2h{display:flex;gap:10px;align-items:stretch}
.h2h .vs{display:flex;align-items:center;justify-content:center;font-weight:900;color:var(--muted);font-size:13px;flex:0 0 auto}
.reveal{min-height:20px;margin-top:10px;font-size:13px;color:var(--muted);font-weight:600}
.reveal b{color:var(--txt)}
.pdots{display:flex;gap:5px;justify-content:center;margin:10px auto 0;max-width:420px}
.pdot{flex:1;height:6px;border-radius:4px;background:var(--panel-2);border:1px solid var(--line);transition:.2s}
.pdot.g{background:var(--good);border-color:transparent} .pdot.b{background:var(--bad);border-color:transparent} .pdot.cur{background:var(--accent);border-color:transparent;box-shadow:0 0 10px var(--accent)}

/* result + share */
.result{margin-top:16px;text-align:center;padding:20px 16px;border-radius:var(--radius);border:1px solid var(--line);background:linear-gradient(180deg,var(--panel-2),var(--panel))}
.result .rscore{font-size:44px;font-weight:900;letter-spacing:-1px;line-height:1}
.result .rscore b{background:linear-gradient(120deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.result .rof{color:var(--muted);font-size:14px}
.result .rmsg{font-weight:800;margin-top:6px}
.squares{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:14px 0}
.sq{width:30px;height:30px;border-radius:8px;background:var(--panel-2);border:1px solid var(--line)}
.sq.g{background:var(--good);border-color:transparent} .sq.b{background:var(--bad);border-color:transparent}
.racts{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:14px}

/* modal + toast */
.modal{position:fixed;inset:0;background:rgba(6,6,12,.82);display:none;align-items:center;justify-content:center;z-index:90;padding:18px}
.modal.open{display:flex}
.sheet{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);max-width:460px;width:100%;padding:22px;line-height:1.55;box-shadow:var(--shadow)}
.sheet h2{margin:0 0 10px} .sheet p,.sheet li{color:var(--muted);font-size:14px} .sheet b{color:var(--txt)}
.sheet .x{float:right;background:none;border:none;color:var(--muted);font-size:24px;cursor:pointer;line-height:1}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--panel-2);border:1px solid var(--line-2);padding:11px 18px;border-radius:12px;font-size:13px;font-weight:600;opacity:0;transition:.25s;pointer-events:none;z-index:95;box-shadow:var(--shadow)}
.toast.show{opacity:1}
footer{text-align:center;color:var(--muted);font-size:11px;margin-top:26px;line-height:1.6}
.backlink{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:13px;font-weight:600;margin:2px 0 0}
.backlink:hover{color:var(--txt)}

/* prominent stat chip — makes Points/Rebounds/Assists obvious */
.statchip{display:inline-flex;align-items:center;gap:9px;font-size:15px;font-weight:800;text-transform:uppercase;letter-spacing:1.3px;padding:9px 20px;border-radius:999px;margin:12px 0 8px}
.statchip .ic{font-size:22px}
.statchip.cpts{color:#ff8a4c;background:rgba(255,138,76,.15)}
.statchip.creb{color:#49b6ff;background:rgba(73,182,255,.15)}
.statchip.cast{color:#2ee6a8;background:rgba(46,230,168,.15)}
body.light .statchip.cast{color:#0ca678;background:rgba(12,166,120,.14)}
/* line number tinted to match the stat */
.qnum .qunit{font-size:.46em;font-weight:900;letter-spacing:1.5px;margin-left:3px}
.opt small .vstat{font-size:15px;font-weight:900;letter-spacing:.3px}
.opt small .vstat.cpts{color:#ff8a4c}.opt small .vstat.creb{color:#49b6ff}.opt small .vstat.cast{color:#2ee6a8}
body.light .opt small .vstat.cast{color:#0ca678}
/* editor / preview bar (only shown with ?editor) */
#editorBar{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);z-index:120;display:none;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--accent);border-radius:999px;padding:7px 12px 7px 16px;box-shadow:var(--shadow)}
#editorBar .ed-pill{font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--accent)}
#editorBar .ed-seed{font-size:12px;color:var(--muted);max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* display type, court backdrop, monograms, result motion */
.modehead .mname,.ghead h1,.tile .tname{font-family:var(--display)}
.qcard .qnum,.result .rscore{font-family:var(--display);letter-spacing:1px}
.court{position:absolute;inset:0;z-index:0;width:100%;height:100%;color:var(--accent);opacity:.06;fill:none;stroke:currentColor;stroke-width:2.5;pointer-events:none}
body.light .court{opacity:.09}
.qcard>*:not(.court){position:relative;z-index:1}
.mono{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;font-family:var(--display);font-weight:700;font-size:18px;color:#0b0b12;margin:0 auto;letter-spacing:.5px;flex:0 0 auto}
@keyframes sqPop{0%{opacity:0;transform:scale(.4)}60%{transform:scale(1.12)}100%{opacity:1;transform:scale(1)}}
.sq.pop{animation:sqPop .34s cubic-bezier(.2,.8,.3,1) backwards}
@keyframes perfectGlow{0%,100%{filter:none}50%{filter:drop-shadow(0 4px 22px var(--accent))}}
.rscore.win{animation:perfectGlow 1.5s ease-in-out 2}
@media (prefers-reduced-motion:reduce){.sq.pop,.rscore.win{animation:none}}

/* motion & feedback */
@keyframes cardIn{from{opacity:0;transform:translateY(10px) scale(.99)}to{opacity:1;transform:none}}
.qcard.anim{animation:cardIn .3s cubic-bezier(.2,.7,.2,1)}
@keyframes pulseGood{0%{box-shadow:0 0 0 0 rgba(46,230,168,.5)}100%{box-shadow:0 0 0 18px rgba(46,230,168,0)}}
@keyframes shakeBad{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(3px)}30%,50%,70%{transform:translateX(-5px)}40%,60%{transform:translateX(5px)}}
.opt.pulse{animation:pulseGood .6s ease-out}
.opt.shake{animation:shakeBad .42s}
@media (prefers-reduced-motion:reduce){.qcard.anim,.opt.pulse,.opt.shake{animation:none!important}}
.qnum.cpts{background:none;-webkit-text-fill-color:#ff8a4c;color:#ff8a4c}
.qnum.creb{background:none;-webkit-text-fill-color:#49b6ff;color:#49b6ff}
.qnum.cast{background:none;-webkit-text-fill-color:#2ee6a8;color:#2ee6a8}
body.light .qnum.cast{-webkit-text-fill-color:#0ca678;color:#0ca678}

/* landing tiles — three side-by-side, big icon + logo-fied name */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:22px 0}
.tile{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:7px;min-height:152px;padding:22px 8px 16px;border-radius:20px;background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--line);transition:.15s}
.tile:hover{transform:translateY(-3px)}
.tile .tic{font-size:44px;line-height:1;filter:drop-shadow(0 4px 16px rgba(0,0,0,.25))}
.tile .tname{font-weight:900;font-size:clamp(14px,3.8vw,20px);letter-spacing:-.3px;line-height:1.12}
.tile .ttag{font-size:10px;color:var(--muted);font-weight:800;text-transform:uppercase;letter-spacing:1.3px;margin-top:-2px}
.tile.easy .tic,.tile.easy .tname{color:#2ee6a8} body.light .tile.easy .tic,body.light .tile.easy .tname{color:#0ca678}
.tile.normal .tic,.tile.normal .tname{color:#49b6ff}
.tile.hard .tic,.tile.hard .tname{color:var(--orange)}
.tile.easy:hover{border-color:#2ee6a8} .tile.normal:hover{border-color:#49b6ff} .tile.hard:hover{border-color:var(--orange)}

/* Stats modal (shared by Over/Under + Career Clash) */
.statgrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin:6px 0 14px}
.statbox{background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:12px;text-align:center}
.statbox .si{font-size:17px;color:var(--accent);display:block;margin-bottom:4px}
.statbox .v{font-size:24px;font-weight:900;color:var(--accent)}
.statbox .l{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-top:2px}
.histlist{display:flex;flex-direction:column;gap:6px;max-height:220px;overflow:auto}
.hrow{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:var(--panel-2);border:1px solid var(--line);border-radius:10px;font-size:13px}
.hrow .d{color:var(--muted);font-weight:700}
.hrow .s{font-weight:900;color:var(--txt)}

/* Landing FAQ (SEO content) */
.faq{max-width:680px;margin:72px auto 0;text-align:left}
.faq h2{font-size:18px;font-weight:800;letter-spacing:-.3px;margin:0 0 8px;color:var(--txt)}
.faq .faq-intro{color:var(--muted);font-size:14px;line-height:1.55;margin:0 0 14px}
.faq details{border:1px solid var(--line);border-radius:12px;background:var(--panel-2);margin-bottom:8px;overflow:hidden}
.faq summary{cursor:pointer;padding:12px 14px;font-weight:700;font-size:14.5px;color:var(--txt);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:10px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--muted);font-weight:800;font-size:18px}
.faq details[open] summary::after{content:"\2212"}
.faq details p{margin:0;padding:0 14px 13px;color:var(--muted);font-size:13.5px;line-height:1.6}
.faq details p b{color:var(--txt)}

/* SEO stat / player pages */
.wrap.seo{max-width:680px}
.wrap.seo h1{font-size:clamp(24px,5.5vw,32px);font-weight:900;letter-spacing:-.5px;margin:6px 0 6px;color:var(--txt)}
.wrap.seo h2{font-size:18px;font-weight:800;margin:26px 0 10px;color:var(--txt)}
.seo-sub{color:var(--muted);font-size:14.5px;line-height:1.55;margin:0 0 18px}
.seo-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin:0 0 18px}
.seo-stat{background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:14px 12px;text-align:center}
.seo-stat .v{font-family:var(--display);font-size:26px;font-weight:800;letter-spacing:.5px;color:var(--txt)}
.seo-stat .l{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-top:4px;display:flex;flex-direction:column;gap:1px}
.seo-stat .l span{font-size:9.5px;opacity:.8}
.seo-note{color:var(--muted);font-size:13px;line-height:1.6}
.seo-table{width:100%;border-collapse:collapse;font-size:14px;margin:0 0 16px}
.seo-table th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);padding:8px 10px;border-bottom:1px solid var(--line)}
.seo-table td{padding:9px 10px;border-bottom:1px solid var(--line)}
.seo-table td.rk{color:var(--muted);font-weight:800;width:34px}
.seo-table td.val{font-weight:800;font-family:var(--display)}
.seo-table td.muted{color:var(--muted);font-size:13px}
.seo-table a{color:var(--txt);font-weight:600;border-bottom:1px solid var(--line-2)}
.seo-table a:hover{color:var(--accent)}
.seo-cta{margin:24px 0 8px;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--panel-2);text-align:center}
.seo-cta p{margin:0 0 10px;font-weight:700;color:var(--txt)}
.seo-links{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.seo-links a{padding:9px 14px;border-radius:10px;background:var(--panel);border:1px solid var(--line-2);color:var(--txt);font-weight:700;font-size:14px}
.seo-links a:hover{border-color:var(--accent);color:var(--accent)}
.seo-links.big a{font-size:15px;padding:11px 16px}
.seo-players{display:flex;flex-wrap:wrap;gap:7px}
.seo-players a{padding:6px 11px;border-radius:999px;background:var(--panel-2);border:1px solid var(--line);color:var(--muted);font-size:13px;font-weight:600}
.seo-players a:hover{color:var(--accent);border-color:var(--accent)}