:root{--bg:#e9eef2;--panel:#fff;--ink:#12212c;--mute:#586873;--acc:#c8102e;--field:#1f5fbf;--line:#cbd6de;--win:#1e9e5a;--gold:#b8860b;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
:root[data-s="nfl"]{--acc:#d9480f;--field:#1f6b3f}:root[data-s="mlb"]{--acc:#b5532f;--field:#1c3a6b}:root[data-s="nba"]{--acc:#d6246e;--field:#3b2a7a}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0e1820;--panel:#162531;--ink:#e8eff4;--mute:#8da0ad;--line:#2a3d4a;--gold:#e6b422}:root:not([data-theme="light"])[data-s="mlb"]{--field:#4f7fd1}:root:not([data-theme="light"])[data-s="nfl"]{--field:#3a9a62}:root:not([data-theme="light"])[data-s="nba"]{--field:#7a68d1}}
:root[data-theme="dark"]{--bg:#0e1820;--panel:#162531;--ink:#e8eff4;--mute:#8da0ad;--line:#2a3d4a;--gold:#e6b422}
*{box-sizing:border-box}html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.4 Barlow,system-ui,sans-serif}
.wrap{max-width:780px;margin:0 auto;padding:16px}
h1{font:800 60px/.9 'Barlow Condensed',Impact,sans-serif;margin:0;letter-spacing:-1px}h1 span{color:var(--acc)}
h2{font:800 34px 'Barlow Condensed',Impact,sans-serif;margin:12px 0 0}
.yard{height:10px;margin:10px 0 8px;background:repeating-linear-gradient(90deg,var(--field) 0 2px,transparent 2px 22px);opacity:.6}
.sub{color:var(--mute);margin:6px 0 16px}.hide{display:none!important}
.btn{background:var(--acc);color:#fff;border:0;border-radius:999px;padding:12px 24px;font:800 20px 'Barlow Condensed',Impact,sans-serif;cursor:pointer}
.btn.alt{background:var(--field)}.btn.ghost{background:transparent;color:var(--ink);border:2px solid var(--line)}
.btn:disabled{opacity:.4;cursor:not-allowed}.btn:focus-visible,.card:focus-visible,.mode:focus-visible{outline:3px solid var(--field);outline-offset:2px}
.modes{display:grid;gap:10px;margin:14px 0}
.mode{background:var(--panel);border:2px solid var(--line);border-left-width:10px;border-radius:14px;padding:14px 16px;text-align:left;color:inherit;font:inherit;cursor:pointer}
.mode b{font:800 28px 'Barlow Condensed',Impact,sans-serif;display:block}.mode span{color:var(--mute);font-size:14px}
.mode:hover{border-color:var(--field)}
.mode[data-k="nhl"]{border-left-color:#c8102e}.mode[data-k="nfl"]{border-left-color:#1f6b3f}.mode[data-k="mlb"]{border-left-color:#1c3a6b}.mode[data-k="nba"]{border-left-color:#d6246e}
.top{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.top .r{font:800 22px 'Barlow Condensed',Impact,sans-serif}
.reels{display:grid;grid-template-columns:1fr 2fr;gap:10px;margin:8px 0 14px}
.reel{background:var(--panel);border:2px solid var(--line);border-radius:14px;padding:10px 14px;text-align:center}
.reel small{color:var(--mute);display:block;font-size:13px}.reel b{font:800 32px/1.1 'Barlow Condensed',Impact,sans-serif}
.skips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}.skips .btn{font-size:16px;padding:8px 16px}
.prompt{background:var(--panel);border:2px solid var(--acc);border-radius:12px;padding:10px 14px;margin:10px 0}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.card{background:var(--panel);border:2px solid var(--line);border-radius:12px;padding:10px 12px;text-align:left;font:inherit;color:inherit;cursor:pointer}
.card:hover{border-color:var(--field)}.card:disabled{opacity:.4;cursor:not-allowed}
.card .n{font:800 22px/1.05 'Barlow Condensed',Impact,sans-serif}.card .m{color:var(--mute);font-size:13px;margin-top:3px}
.dots{color:var(--gold);letter-spacing:2px;font-size:14px}
.hof{background:var(--gold);color:#fff;border-radius:4px;padding:0 5px;font:800 11px Barlow,system-ui,sans-serif;margin-left:6px;vertical-align:2px}
.pos{background:var(--field);color:#fff;border-radius:4px;padding:0 6px;font:800 12px Barlow,system-ui,sans-serif;margin-right:6px}
.roster{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px;margin-top:18px}
.slot{min-height:70px;border:2px dashed var(--line);border-radius:10px;padding:6px;background:var(--panel);text-align:center;color:var(--mute);display:flex;flex-direction:column;justify-content:center}
.slot.f{border-style:solid;color:var(--ink)}.slot b{font:800 17px/1.05 'Barlow Condensed',Impact,sans-serif}.slot small{font-size:12px;color:var(--mute)}
.board{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap}.board .tn{font:800 22px 'Barlow Condensed',Impact,sans-serif;color:var(--mute)}
.score{font:800 150px/.95 'Barlow Condensed',Impact,sans-serif;letter-spacing:-2px}.board .dash{font:800 90px/1 'Barlow Condensed',Impact,sans-serif;color:var(--line);padding-bottom:6px}
.grade{font:800 34px 'Barlow Condensed',Impact,sans-serif;color:var(--acc)}
.grid{display:grid;gap:2px;margin:14px 0}.grid i{aspect-ratio:1;border-radius:2px;background:var(--acc)}.grid i.w{background:var(--win)}
@media(max-width:520px){h1{font-size:48px}.reel b{font-size:24px}.score{font-size:112px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

.foot{margin:36px 0 8px;padding-top:14px;border-top:2px solid var(--line);color:var(--mute);font-size:13px}.foot a{color:inherit}