:root { color-scheme: dark; --bg: #0d0d1a; --panel: #17182b; --line: #363b59; --text: #f5f4ff; --muted: #abb2ca; --accent: #60a5fa; }
body[data-league="nba"] { --accent: #fb923c; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 50% -15%, #26294c, var(--bg) 55%); color: var(--text); font-family: Raleway, Arial, sans-serif; }
main { width: min(100% - 32px, 820px); margin: 36px auto 72px; }
a { color: var(--accent); }
.back { display: inline-block; margin-bottom: 28px; text-decoration: none; font-size: 14px; font-weight: 700; }
.eyebrow { color: var(--accent); text-transform: uppercase; letter-spacing: .2em; font-size: 12px; font-weight: 800; }
h1 { font-size: clamp(52px, 10vw, 90px); letter-spacing: -.07em; margin: 4px 0 12px; }
.intro { color: var(--muted); line-height: 1.5; max-width: 620px; }
.board { margin: 28px 0; padding: clamp(18px, 4vw, 28px); background: var(--panel); border: 1px solid var(--line); border-radius: 20px; }
h2 { font-size: 18px; margin: 0 0 18px; }
#slots { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: 10px; }
#slots li { display: flex; flex-direction: column; justify-content: center; gap: 6px; min-height: 78px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: #101222; }
#slots li.current { border-color: var(--accent); }
#slots li.filled { background: #1b2639; }
#slots span { font-size: 11px; font-weight: 800; color: var(--accent); }
#slots strong { font-size: 13px; }
#slots small { color: var(--muted); font-size: 11px; }
#stage { color: var(--accent); }
.rolls { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 18px 0 24px; }
.roll { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 15px; border: 1px solid var(--line); border-radius: 12px; background: #101222; }
.roll > span { color: var(--accent); font-size: 11px; font-weight: 900; letter-spacing: .16em; }
.roll > strong { font-size: 24px; }
.roll-value { display: flex; align-items: center; gap: 12px; min-height: 42px; font-size: 24px; }
.roll-value img { width: 42px; height: 42px; object-fit: contain; }
.roll-value img[hidden] { display: none; }
.is-rolling .roll-value strong { animation: reel .13s linear infinite alternate; }
.is-rolling .roll-value img { animation: reel .13s linear infinite alternate; }
@keyframes reel { from { opacity: .35; transform: translateY(-2px); } to { opacity: 1; transform: translateY(2px); } }
.roll .secondary { margin-top: 4px; }
.search-label { display: block; margin-bottom: 9px; color: var(--muted); font-size: 12px; font-weight: 800; }
#player-filter { width: 100%; padding: 12px 14px; margin-bottom: 18px; border: 1px solid var(--line); border-radius: 9px; background: #101222; color: var(--text); font: inherit; }
#choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; max-height: 460px; overflow-y: auto; padding: 2px; }
button { font: inherit; cursor: pointer; }
.choice { text-align: left; padding: 14px; min-height: 78px; background: #101222; border: 1px solid var(--line); border-radius: 12px; color: var(--text); transition: border-color .15s, transform .15s; }
.choice:hover { border-color: var(--accent); transform: translateY(-3px); }
.choice strong, .choice span { display: block; }
.choice strong { margin-bottom: 0; }
.choice span { color: var(--muted); font-size: 12px; }
.choice .position { color: var(--accent); font-weight: 900; margin-bottom: 7px; }
.choice .player-details { margin-top: 9px; line-height: 1.4; }
.choice[data-position="PG"], .choice[data-position="QB"] { --position-color: #60a5fa; }
.choice[data-position="SG"], .choice[data-position="RB"] { --position-color: #2dd4bf; }
.choice[data-position="SF"], .choice[data-position="WR"] { --position-color: #c084fc; }
.choice[data-position="PF"], .choice[data-position="TE"] { --position-color: #f472b6; }
.choice[data-position="C"], .choice[data-position="OL"] { --position-color: #fb923c; }
.choice[data-position="DL"] { --position-color: #facc15; }
.choice[data-position="LB"] { --position-color: #a3e635; }
.choice[data-position="DB"] { --position-color: #f87171; }
.choice { border-color: var(--position-color); }
.choice .position { color: var(--position-color); }
.choice:not(:disabled):hover { border-color: var(--position-color); border-width: 2px; }
.choice--locked { border-color: var(--line); background: #141521; opacity: .4; cursor: not-allowed; filter: grayscale(1); }
.choice--locked .position { color: var(--muted); }
.choice--locked:hover { transform: none; border-color: var(--line); }
.choice .locked-label { margin-top: 8px; color: var(--muted); font-size: 11px; font-weight: 800; }
.secondary { margin-top: 16px; padding: 11px 16px; background: transparent; border: 1px solid var(--accent); border-radius: 9px; color: var(--accent); font-weight: 800; }
.secondary:disabled { opacity: .4; cursor: default; }
button:focus-visible, a:focus-visible { outline: 3px solid #a78bfa; outline-offset: 2px; }
#record { font-size: clamp(64px, 15vw, 116px); color: var(--accent); font-weight: 900; letter-spacing: -.07em; }
#rating { color: var(--muted); }
.note { color: var(--muted); font-size: 12px; line-height: 1.5; margin-top: 34px; }
@media (max-width: 580px) { #choices { grid-template-columns: repeat(2, minmax(0, 1fr)); } .choice { min-height: 72px; } .rolls { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .is-rolling .roll-value strong, .is-rolling .roll-value img { animation: none; } }