/* Layout: arena jumbotron. Spin reel up top, the team as a row of position cards (the "court"), the pool below; rosters on the rail. Topic hue = accent; each versus player gets a jersey color. */
:root{
  --bg:#E9EDF3; --surface:#FFFFFF; --sunk:#DEE3EC; --ink:#111827; --muted:#5A6375; --line:#CDD4E0;
  --jumbo:#0F1626; --jumbo-ink:#F3F5F9; --jumbo-dim:#8C97AD;
  --conq:#9C6517; --pres:#24479A; --dc:#0E7C86; --marvel:#C21F32; --inv:#A87D00; --sw:#5B4BB7; --st:#2F7D3B; --tf:#B45309; --sop:#8B1E3F; --bb:#5F7F1A; --got:#4B5563; --lotr:#1D6E8C; --mash:#C0266D; --wire:#2F4A3A; --parks:#2E7D32; --community:#1F5FA8; --b99:#1A3F7A; --veep:#7A1F3D; --archer:#22303C; --kickin:#B23A1E; --labrats:#0E7C86; --mightymed:#A8172A; --opm:#C99A06; --dbz:#E0670A; --ten:#3F7D20; --golf:#1B6B4A; --suits:#334155; --hp:#7B1E1E; --pj:#0F6CA8; --hg:#A33B1C; --succ:#5E5A24; --atla:#B7791F; --jjk:#4C2A85; --naruto:#D9480F; --aot:#6B4F2A; --fargo:#4A6B82; --ninjago:#C2185B; --dexter:#8E1B1B; --cw:#1F4E9E; --boys:#3A3A3A; --wick:#2B2B44; --godf:#8C2020; --ff:#208C52; --rocky:#83208C; --cobra:#638C20; --bond:#20328C; --mi:#8C4120; --oceans:#208C72; --potc:#8C2074; --mcu:#438C20; --xmov:#2F208C; --incr:#8C6120; --dcau:#20868C; --twd:#8C2054; --ment:#238C20; --pb:#50208C; --hoc:#8C8120; --ent:#20658C; --office:#8C2034; --lasso:#208C3F; --sunny:#70208C; --sp:#768C20; --fg:#20458C; --ad:#8C2D20; --simp:#208C5F;
  --hot:#E0531F; --good:#1F7A4D;
  --p1:#E0531F; --p2:#2563EB; --p3:#0E8F6B; --p4:#B7378A; --p5:#B88A0B; --p6:#6D4AD1;
  --accent:var(--conq);
  --f-display:"Big Shoulders Display", Impact, "Arial Narrow", sans-serif;
  --f-body:"Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-num:"IBM Plex Mono", ui-monospace, Menlo, monospace;
  --r:12px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0B1019; --surface:#151C29; --sunk:#1C2535; --ink:#E8ECF3; --muted:#8F99AD; --line:#263044;
  --jumbo:#05080F; --jumbo-ink:#F3F5F9; --jumbo-dim:#7E8AA2;
  --conq:#DBA44C; --pres:#7F9DEB; --dc:#3CC3CC; --marvel:#F0606D; --inv:#F2C230; --sw:#A595F2; --st:#63C67A; --tf:#F6A05A; --sop:#E37A9C; --bb:#B5D86A; --got:#A9B4C6; --lotr:#62C0E0; --mash:#F27AAE; --wire:#8FC7A4; --parks:#81C784; --community:#7FB2EE; --b99:#7FA4E6; --veep:#E68AA8; --archer:#9FB6CC; --kickin:#F59A80; --labrats:#6FD6DE; --mightymed:#F2808E; --opm:#F5D35C; --dbz:#FFAE66; --ten:#8FD16A; --golf:#5CC79A; --suits:#A7B6CC; --hp:#E58A8A; --pj:#6CB8EC; --hg:#F08A63; --succ:#CFCB7E; --atla:#F2BE5C; --jjk:#B39BEA; --naruto:#FF9A5C; --aot:#CDAA7E; --fargo:#9CC0DC; --ninjago:#F48FB1; --dexter:#EB7A7A; --cw:#86A8F0; --boys:#CFCFCF; --wick:#ABABDD; --godf:#EB7979; --ff:#79EBAD; --rocky:#E279EB; --cobra:#C0EB79; --bond:#798BEB; --mi:#EB9B79; --oceans:#79EBD0; --potc:#EB79D2; --mcu:#9DEB79; --xmov:#8979EB; --incr:#EBBD79; --dcau:#79E4EB; --twd:#EB79B0; --ment:#7BEB79; --pb:#AB79EB; --hoc:#EBE079; --ent:#79C2EB; --office:#EB798D; --lasso:#79EB99; --sunny:#CE79EB; --sp:#D4EB79; --fg:#79A0EB; --ad:#EB8679; --simp:#79EBBB; --hot:#FF7A45; --good:#4CC28A;
  --p1:#FF7A45; --p2:#6EA0FF; --p3:#3FD1A3; --p4:#F070C4; --p5:#E8C04A; --p6:#A58CFF; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0B1019; --surface:#151C29; --sunk:#1C2535; --ink:#E8ECF3; --muted:#8F99AD; --line:#263044;
  --jumbo:#05080F; --jumbo-ink:#F3F5F9; --jumbo-dim:#7E8AA2;
  --conq:#DBA44C; --pres:#7F9DEB; --dc:#3CC3CC; --marvel:#F0606D; --inv:#F2C230; --sw:#A595F2; --st:#63C67A; --tf:#F6A05A; --sop:#E37A9C; --bb:#B5D86A; --got:#A9B4C6; --lotr:#62C0E0; --mash:#F27AAE; --wire:#8FC7A4; --parks:#81C784; --community:#7FB2EE; --b99:#7FA4E6; --veep:#E68AA8; --archer:#9FB6CC; --kickin:#F59A80; --labrats:#6FD6DE; --mightymed:#F2808E; --opm:#F5D35C; --dbz:#FFAE66; --ten:#8FD16A; --golf:#5CC79A; --suits:#A7B6CC; --hp:#E58A8A; --pj:#6CB8EC; --hg:#F08A63; --succ:#CFCB7E; --atla:#F2BE5C; --jjk:#B39BEA; --naruto:#FF9A5C; --aot:#CDAA7E; --fargo:#9CC0DC; --ninjago:#F48FB1; --dexter:#EB7A7A; --cw:#86A8F0; --boys:#CFCFCF; --wick:#ABABDD; --godf:#EB7979; --ff:#79EBAD; --rocky:#E279EB; --cobra:#C0EB79; --bond:#798BEB; --mi:#EB9B79; --oceans:#79EBD0; --potc:#EB79D2; --mcu:#9DEB79; --xmov:#8979EB; --incr:#EBBD79; --dcau:#79E4EB; --twd:#EB79B0; --ment:#7BEB79; --pb:#AB79EB; --hoc:#EBE079; --ent:#79C2EB; --office:#EB798D; --lasso:#79EB99; --sunny:#CE79EB; --sp:#D4EB79; --fg:#79A0EB; --ad:#EB8679; --simp:#79EBBB; --hot:#FF7A45; --good:#4CC28A;
  --p1:#FF7A45; --p2:#6EA0FF; --p3:#3FD1A3; --p4:#F070C4; --p5:#E8C04A; --p6:#A58CFF; color-scheme:dark}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.5}
body[data-topic="conq"]{--accent:var(--conq)} body[data-topic="pres"]{--accent:var(--pres)} body[data-topic="dc"]{--accent:var(--dc)} body[data-topic="marvel"]{--accent:var(--marvel)} body[data-topic="inv"]{--accent:var(--inv)} body[data-topic="sw"]{--accent:var(--sw)} body[data-topic="st"]{--accent:var(--st)} body[data-topic="tf"]{--accent:var(--tf)} body[data-topic="sop"]{--accent:var(--sop)} body[data-topic="bb"]{--accent:var(--bb)} body[data-topic="got"]{--accent:var(--got)} body[data-topic="lotr"]{--accent:var(--lotr)} body[data-topic="mash"]{--accent:var(--mash)} body[data-topic="wire"]{--accent:var(--wire)} body[data-topic="parks"]{--accent:var(--parks)} body[data-topic="community"]{--accent:var(--community)} body[data-topic="b99"]{--accent:var(--b99)} body[data-topic="veep"]{--accent:var(--veep)} body[data-topic="archer"]{--accent:var(--archer)} body[data-topic="kickin"]{--accent:var(--kickin)} body[data-topic="labrats"]{--accent:var(--labrats)} body[data-topic="mightymed"]{--accent:var(--mightymed)} body[data-topic="opm"]{--accent:var(--opm)} body[data-topic="dbz"]{--accent:var(--dbz)} body[data-topic="ten"]{--accent:var(--ten)} body[data-topic="golf"]{--accent:var(--golf)} body[data-topic="suits"]{--accent:var(--suits)} body[data-topic="hp"]{--accent:var(--hp)} body[data-topic="pj"]{--accent:var(--pj)} body[data-topic="hg"]{--accent:var(--hg)} body[data-topic="succ"]{--accent:var(--succ)} body[data-topic="atla"]{--accent:var(--atla)} body[data-topic="jjk"]{--accent:var(--jjk)} body[data-topic="naruto"]{--accent:var(--naruto)} body[data-topic="aot"]{--accent:var(--aot)} body[data-topic="fargo"]{--accent:var(--fargo)} body[data-topic="ninjago"]{--accent:var(--ninjago)} body[data-topic="dexter"]{--accent:var(--dexter)} body[data-topic="cw"]{--accent:var(--cw)} body[data-topic="boys"]{--accent:var(--boys)} body[data-topic="wick"]{--accent:var(--wick)} body[data-topic="godf"]{--accent:var(--godf)} body[data-topic="ff"]{--accent:var(--ff)} body[data-topic="rocky"]{--accent:var(--rocky)} body[data-topic="cobra"]{--accent:var(--cobra)} body[data-topic="bond"]{--accent:var(--bond)} body[data-topic="mi"]{--accent:var(--mi)} body[data-topic="oceans"]{--accent:var(--oceans)} body[data-topic="potc"]{--accent:var(--potc)} body[data-topic="mcu"]{--accent:var(--mcu)} body[data-topic="xmov"]{--accent:var(--xmov)} body[data-topic="incr"]{--accent:var(--incr)} body[data-topic="dcau"]{--accent:var(--dcau)} body[data-topic="twd"]{--accent:var(--twd)} body[data-topic="ment"]{--accent:var(--ment)} body[data-topic="pb"]{--accent:var(--pb)} body[data-topic="hoc"]{--accent:var(--hoc)} body[data-topic="ent"]{--accent:var(--ent)} body[data-topic="office"]{--accent:var(--office)} body[data-topic="lasso"]{--accent:var(--lasso)} body[data-topic="sunny"]{--accent:var(--sunny)} body[data-topic="sp"]{--accent:var(--sp)} body[data-topic="fg"]{--accent:var(--fg)} body[data-topic="ad"]{--accent:var(--ad)} body[data-topic="simp"]{--accent:var(--simp)}
*{box-sizing:border-box}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wrap{max-width:1140px;margin:0 auto;padding-inline:20px;padding-block:24px 64px}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:22px}
.brand{font-family:var(--f-display);font-weight:900;font-size:22px;letter-spacing:.05em;text-transform:uppercase;display:flex;align-items:center;gap:10px;background:none;border:0;padding:0}
.brand i{display:inline-block;width:16px;height:16px;background:var(--accent);transform:skewX(-14deg);transition:background .3s}
.crumb{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:right}
h1,h2,h3{font-family:var(--f-display);text-transform:uppercase;line-height:.92;margin:0;text-wrap:balance}
h2{font-size:clamp(32px,5.4vw,52px);font-weight:900}
h3{font-size:22px;font-weight:800;letter-spacing:.02em}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.num{font-family:var(--f-num);font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}

/* ---------- Jumbotron (shared by home hero + draw card) ---------- */
.jumbo{background:var(--jumbo);color:var(--jumbo-ink);border-radius:var(--r);position:relative;overflow:hidden;isolation:isolate}
.jumbo::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;
  background:radial-gradient(circle at 1px 1px,rgba(255,255,255,.09) 1px,transparent 1.4px) 0 0/7px 7px}
.jumbo::after{content:"";position:absolute;inset:-40% -10%;z-index:-1;background:linear-gradient(100deg,transparent 40%,color-mix(in srgb,var(--accent) 30%,transparent) 50%,transparent 60%);transform:translateX(-60%);animation:sweep 6s ease-in-out infinite}
@keyframes sweep{0%,55%{transform:translateX(-70%)}100%{transform:translateX(70%)}}

/* ---------- Home ---------- */
.hero{padding:34px 30px 30px;margin-bottom:22px;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:26px;align-items:center}
.hero h1{font-size:clamp(46px,8.4vw,96px);font-weight:900}
.hero h1 em{font-style:normal;color:var(--hot)}
.hero p{color:var(--jumbo-dim);font-size:17px;max-width:54ch;margin:14px 0 0}
.demo{display:flex;flex-direction:column;gap:10px}
.demo .reelbox{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12)}
.demo-slots{display:flex;gap:6px}
.demo-slots span{flex:1;text-align:center;border:1px dashed rgba(255,255,255,.25);border-radius:6px;padding:6px 0;font-family:var(--f-display);font-weight:800;letter-spacing:.06em;font-size:15px;color:var(--jumbo-dim)}
.demo-slots span.f{border-style:solid;border-color:var(--hot);color:var(--jumbo-ink);background:color-mix(in srgb,var(--hot) 18%,transparent)}
.how{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0 0 26px}
.how div{border-top:3px solid var(--ink);padding-top:8px;font-size:14px;color:var(--muted)}
.how b{display:block;color:var(--ink);font-family:var(--f-display);font-size:20px;text-transform:uppercase;letter-spacing:.04em}
.shelf{margin-bottom:26px}
.shelf h4{margin:0 0 10px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.topics{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.drawnote{grid-column:1/-1;font-size:13px;color:var(--jumbo-dim);border-top:1px solid rgba(255,255,255,.12);padding-top:8px;margin-top:4px}
.drawnote b{color:var(--jumbo-ink)}
.topic{--accent:var(--c);text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px 20px 18px;display:flex;flex-direction:column;gap:12px;position:relative;overflow:hidden;transition:transform .18s,box-shadow .18s,border-color .18s}
.topic::before{content:"";position:absolute;inset:0 0 auto 0;height:6px;background:var(--c);transform-origin:left;transition:height .2s}
.topic:hover{transform:translateY(-3px);border-color:var(--c);box-shadow:0 14px 30px -18px var(--c)}
.topic:hover::before{height:10px}
.topic h3{font-size:32px}
.topic p{margin:0;color:var(--muted);font-size:14px}
.chips{display:flex;flex-wrap:wrap;gap:5px}
.chip{font-family:var(--f-display);font-weight:800;font-size:13px;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--line);border-radius:4px;padding:2px 7px;color:var(--muted);background:var(--bg)}
.topic .chip{border-color:color-mix(in srgb,var(--c) 45%,var(--line));color:var(--c)}
.topic .meta{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:auto;padding-top:10px;border-top:1px dashed var(--line)}
.topic .meta b{color:var(--c)}

/* ---------- Setup ---------- */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.setup{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:20px;margin-top:20px;align-items:start}
.field{display:flex;flex-direction:column;gap:9px;margin-bottom:22px}
.field:last-child{margin-bottom:0}
.label{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg button{border:1px solid var(--line);background:var(--bg);border-radius:999px;padding:7px 15px;font-weight:600;font-size:14px;transition:background .15s,border-color .15s}
.seg button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.sizes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.size{text-align:left;border:1px solid var(--line);background:var(--bg);border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:8px;transition:border-color .15s,transform .15s}
.size:hover:not(:disabled){transform:translateY(-1px)}
.size b{font-family:var(--f-display);font-size:24px;font-weight:900;text-transform:uppercase;line-height:1}
.size small{color:var(--muted);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.size .chips .chip{font-size:11px;padding:1px 5px}
.size[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);background:var(--surface)}
.size:disabled{opacity:.4;cursor:not-allowed}
.hint{font-size:13px;color:var(--muted)}
.names{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.names label{display:flex;align-items:center;gap:8px}
.names label i{width:10px;height:28px;border-radius:3px;flex:none}
input[type=text],input[type=search]{width:100%;font:inherit;background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:9px 12px;min-width:0}
.toggle{display:flex;align-items:center;gap:10px;font-weight:600}
.toggle input{width:18px;height:18px;accent-color:var(--accent)}
.statlist{display:flex;flex-direction:column;gap:6px}
.statopt{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 10px;text-align:left;border:1px solid var(--line);background:var(--bg);border-radius:8px;padding:9px 12px}
.statopt .dot{grid-row:span 2;width:14px;height:14px;border-radius:50%;border:2px solid var(--muted);margin-top:3px}
.statopt[aria-pressed="true"]{border-color:var(--accent);background:var(--surface)}
.statopt[aria-pressed="true"] .dot{border-color:var(--accent);background:var(--accent);box-shadow:inset 0 0 0 2px var(--surface)}
.statopt span{font-size:13px;color:var(--muted)}
.poskey{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none}
.poskey li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:10px;align-items:baseline;font-size:13.5px}
.poskey li .chip{text-align:center}
.poskey li span{color:var(--muted)}
.poskey li span b{color:var(--ink);font-weight:600}
.go{display:inline-flex;align-items:center;gap:10px;border:0;background:var(--ink);color:var(--bg);font-family:var(--f-display);font-weight:900;font-size:22px;letter-spacing:.06em;text-transform:uppercase;padding:12px 28px;border-radius:8px;transition:background .15s,transform .15s}
.go:hover{background:var(--accent);transform:translateY(-1px)}
.ghost{border:1px solid var(--line);background:transparent;border-radius:8px;padding:9px 16px;font-weight:600}
.ghost:hover{border-color:var(--accent);color:var(--accent)}
.fine{font-size:12.5px;color:var(--muted);margin:16px 0 0;max-width:70ch}

/* ---------- Draft ---------- */
.draft{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:20px;align-items:start}
.drawcard{padding:18px 22px 20px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 18px;align-items:end}
.drawcard .who{display:flex;align-items:center;gap:10px;grid-column:1/-1}
.tag{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:4px 9px;border-radius:4px;background:var(--pc,var(--hot));color:#fff}
.who b{font-family:var(--f-display);font-size:24px;font-weight:900;text-transform:uppercase;letter-spacing:.03em}
.who .pickno{margin-left:auto;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--jumbo-dim)}
.reelbox{height:66px;overflow:hidden;border-radius:8px;position:relative;margin-top:6px;
  mask-image:linear-gradient(transparent,#000 22%,#000 78%,transparent);-webkit-mask-image:linear-gradient(transparent,#000 22%,#000 78%,transparent)}
.strip{display:flex;flex-direction:column}
.strip div{height:66px;line-height:66px;font-family:var(--f-display);font-weight:900;font-size:clamp(28px,4.4vw,48px);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.01em}
.strip.go-spin{animation:reel 1.15s cubic-bezier(.12,.62,.18,1) both}
@keyframes reel{from{transform:translateY(0)}to{transform:translateY(var(--end))}}
.drawsub{grid-column:1;font-size:14px;color:var(--jumbo-dim);min-height:1.5em}
.respin{grid-column:2;grid-row:2/span 2;align-self:center;background:transparent;border:1px solid rgba(255,255,255,.3);color:var(--jumbo-ink);border-radius:8px;padding:8px 12px;font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.respin:hover:not(:disabled){border-color:var(--hot);color:var(--hot)}
.respin:disabled{opacity:.35;cursor:not-allowed}
.court{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:8px;margin:14px 0}
.slot{border:2px dashed var(--line);border-radius:10px;padding:10px 8px 9px;min-height:96px;display:flex;flex-direction:column;gap:3px;background:var(--surface);text-align:left;position:relative;transition:border-color .15s,transform .15s,background .15s}
.slot .ab{font-family:var(--f-display);font-weight:900;font-size:22px;line-height:1;letter-spacing:.04em;color:var(--muted)}
.slot .pl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.slot .nm{font-weight:700;font-size:14px;line-height:1.2;margin-top:auto;overflow-wrap:anywhere}
.slot .sc{position:absolute;top:8px;right:9px;font-family:var(--f-num);font-weight:600;font-size:13px;color:var(--muted)}
.slot.filled{border-style:solid;border-color:var(--pc);background:color-mix(in srgb,var(--pc) 9%,var(--surface))}
.slot.filled .ab{color:var(--pc)}
.slot.just{animation:drop .45s cubic-bezier(.2,1.4,.4,1)}
@keyframes drop{from{transform:translateY(-14px) scale(.94);opacity:.3}}
.slot.target{border-style:solid;border-color:var(--hot);cursor:pointer;animation:pulse 1s ease-in-out infinite}
.slot.target .ab{color:var(--hot)}
.slot.dim{opacity:.45}
@keyframes pulse{50%{box-shadow:0 0 0 4px color-mix(in srgb,var(--hot) 25%,transparent)}}
.selbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:color-mix(in srgb,var(--hot) 12%,var(--surface));border:1px solid var(--hot);border-radius:8px;padding:9px 12px;margin-bottom:12px;font-size:14px}
.selbar b{font-weight:700}
.selbar button{margin-left:auto}
.poolhead{display:flex;gap:10px;align-items:center;margin-bottom:10px}
.poolhead .label{white-space:nowrap}
.opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.opt{text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:10px 12px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;min-width:0;transition:border-color .12s,transform .12s}
.opts.fresh .opt{animation:rise .3s both}
.opt:hover:not(:disabled){border-color:var(--accent);transform:translateY(-1px)}
.opt b{font-weight:700;font-size:15.5px;min-width:0;overflow-wrap:anywhere}
.opt .s{grid-column:1/-1;font-size:12.5px;color:var(--muted)}
.opt .chips{grid-row:1;grid-column:2;flex-wrap:nowrap}
.opt .chip{font-size:11px;padding:1px 5px}
.opt .chip.on{border-color:var(--hot);color:var(--hot)}
.opt[aria-pressed="true"]{border-color:var(--hot);box-shadow:0 0 0 1px var(--hot)}
.opt:disabled{opacity:.42;cursor:not-allowed;background:var(--sunk)}
.opt:disabled .s em{font-style:normal;font-weight:600;color:var(--ink)}
.empty{color:var(--muted);font-size:14px;padding:12px 0}
.rail{display:flex;flex-direction:column;gap:12px}
.roster{background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--pc);border-radius:var(--r);padding:12px 14px}
.roster.active{box-shadow:0 0 0 2px var(--pc)}
.roster header{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:6px}
.roster h3{font-size:19px;min-width:0;overflow-wrap:anywhere}
.roster ol{list-style:none;margin:0;padding:0}
.roster li{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:8px;align-items:baseline;padding:5px 0;border-top:1px solid var(--line);font-size:14px}
.roster li .chip{font-size:11px;padding:0 4px;text-align:center}
.roster li .nm{overflow-wrap:anywhere}
.roster li.open .nm{color:var(--muted)}
.roster li .num{font-weight:600;color:var(--muted)}
.keycard h3{font-size:18px;margin-bottom:8px}

/* ---------- Reveal ---------- */
.cover{padding:44px 26px;text-align:center}
.cover h2{font-size:clamp(40px,8vw,78px)}
.cover p{color:var(--jumbo-dim);margin:12px auto 24px;max-width:46ch}
.cover .go{background:var(--hot);color:#fff}
.banner{padding:22px 24px;margin-bottom:18px;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px}
.banner .eyebrow{color:var(--jumbo-dim)}
.banner h2{color:var(--jumbo-ink)}
.banner h2 em{font-style:normal;color:var(--wc,var(--hot))}
.teams{display:flex;flex-direction:column;gap:16px}
.team{background:var(--surface);border:1px solid var(--line);border-top:6px solid var(--pc);border-radius:var(--r);padding:16px 18px;animation:rise .45s both}
.team.win{box-shadow:0 0 0 2px var(--pc),0 18px 40px -26px var(--pc)}
.team header{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.team .place{font-family:var(--f-display);font-weight:900;font-size:46px;line-height:.85;color:var(--pc);min-width:1.2ch}
.team h3{font-size:28px;min-width:0;overflow-wrap:anywhere}
.team .tot{margin-left:auto;text-align:right;font-family:var(--f-num);font-weight:600;font-size:clamp(30px,6vw,46px);line-height:1}
.team .tot small{display:block;font-family:var(--f-body);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-top:4px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.card{perspective:700px;min-height:136px}
.card .in{position:relative;height:100%;min-height:136px;transform-style:preserve-3d;animation:flip .6s both}
.card .f,.card .b{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:9px;padding:9px 10px;display:flex;flex-direction:column;gap:2px}
.card .b{background:var(--jumbo);color:var(--jumbo-ink)}
.card .b .ab{font-family:var(--f-display);font-weight:900;font-size:30px;margin:auto;color:var(--jumbo-dim)}
.card .f{transform:rotateY(180deg);background:var(--bg);border:1px solid var(--line)}
.card .f .ab{font-family:var(--f-display);font-weight:800;font-size:14px;letter-spacing:.06em;color:var(--pc)}
.card .f .nm{font-weight:700;font-size:14px;line-height:1.2;overflow-wrap:anywhere}
.card .f .pts{margin-top:auto;font-family:var(--f-num);font-weight:600;font-size:22px}
.card .f .why{font-size:11px;color:var(--muted);letter-spacing:.04em}
.card.best .f{border-color:var(--good);box-shadow:inset 0 0 0 1px var(--good)}
@keyframes flip{from{transform:rotateY(0)}to{transform:rotateY(180deg)}}
.meter{height:8px;background:var(--sunk);border-radius:99px;overflow:hidden;margin-top:12px}
.meter i{display:block;height:100%;background:var(--pc);border-radius:99px;animation:grow 1.2s .4s both}
.compare{margin-top:8px;font-size:14px;color:var(--muted)}
.compare b{color:var(--ink)}
.badge{display:inline-block;background:var(--good);color:#fff;font-family:var(--f-body);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:3px 8px;border-radius:4px;margin-left:8px;vertical-align:middle}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes grow{from{width:0}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}
  .card .in{transform:rotateY(180deg)} }
@media (max-width:860px){
  .hero,.setup,.draft{grid-template-columns:1fr}
  .how{grid-template-columns:1fr 1fr}
  .court{grid-template-columns:repeat(min(var(--n),4),minmax(0,1fr))}
}
@media (max-width:560px){
  .topics,.how,.opts,.sizes{grid-template-columns:1fr}
  .court{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero{padding:24px 18px}
  .drawcard{grid-template-columns:1fr}
  .respin{grid-column:1;grid-row:auto;justify-self:start}
}

/* ---------- v4: daily, timer, matchups, leaderboard ---------- */
.top .crumb{margin-left:auto}
.lbbtn{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 14px;font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.lbbtn:hover{border-color:var(--accent);color:var(--accent)}
.daily{border:1px solid rgba(255,255,255,.16);border-left:6px solid var(--c);border-radius:10px;padding:16px 18px;display:flex;flex-direction:column;gap:6px;background:rgba(255,255,255,.04)}
.daily .dname{font-family:var(--f-display);font-weight:900;font-size:34px;text-transform:uppercase;line-height:1;color:var(--jumbo-ink)}
.daily .dsub{font-size:13px;color:var(--jumbo-dim)}
.daily .dsub b{color:var(--jumbo-ink)}
.daily .dlabel{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--jumbo-dim);margin-top:6px}
.drow{display:flex;gap:8px;flex-wrap:wrap}
.drow input{flex:1 1 140px;background:rgba(255,255,255,.08);color:var(--jumbo-ink);border-color:rgba(255,255,255,.2)}
.drow .go{background:var(--hot);color:#fff;font-size:18px;padding:8px 18px}
.clock{font-family:var(--f-num);font-weight:600;font-size:18px;background:rgba(255,255,255,.1);border-radius:6px;padding:2px 8px;min-width:3.2em;text-align:center}
.clock.low{background:var(--hot);color:#fff;animation:pulse 1s infinite}
.postmsg{margin:0;font-size:13px;color:var(--jumbo-dim);max-width:40ch}
.spots{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.matchups{margin-bottom:18px}
.matchups h3{margin-bottom:10px}
.mwrap,.lbwrap{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.matchups table,.lbt{border-collapse:collapse;width:100%}
.matchups th,.matchups td,.lbt th,.lbt td{padding:8px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
.matchups thead th{font-family:var(--f-display);font-size:18px;text-transform:uppercase;border-bottom:3px solid var(--pc,var(--line));white-space:nowrap}
.matchups tbody tr{animation:rise .35s both}
.matchups td{min-width:150px}
.matchups td .nm{display:block;font-weight:600;font-size:14px}
.matchups td .num{font-weight:600;color:var(--muted)}
.matchups td.won{background:color-mix(in srgb,var(--pc) 14%,var(--surface));box-shadow:inset 4px 0 0 var(--pc)}
.matchups td.won .num{color:var(--ink)}
.matchups td.tie{box-shadow:inset 4px 0 0 var(--line)}
.lbfilters{display:flex;flex-direction:column;gap:10px;margin:18px 0}
.lbfilters .pills{display:flex;flex-wrap:wrap;gap:6px}
.pill{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 13px;font-weight:600;font-size:13.5px}
.pill[aria-pressed="true"]{background:var(--c);border-color:var(--c);color:var(--surface)}
.lbtitle{margin:6px 0 10px;font-size:24px}
.lbt th{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.lbt td.nm{font-weight:700;font-size:16px}
.lbt td.sc{font-size:18px;font-weight:600;white-space:nowrap}
.lbt td.sc small{font-size:11px;color:var(--muted)}
.lbt td.lu{font-size:12.5px;color:var(--muted);min-width:240px}
.lbt td.dt{font-size:12px;color:var(--muted);white-space:nowrap}
.lbt tr.podium td:first-child{font-family:var(--f-display);font-weight:900;font-size:22px;color:var(--accent)}
.lbt tr.p1 td{background:color-mix(in srgb,var(--accent) 10%,var(--surface))}
.banner{align-items:center}
.card .f{overflow:hidden}
.card .f .pts{margin-top:auto}

/* How to play */
.guide{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);margin:0 0 26px}
.guide summary{cursor:pointer;list-style:none;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;padding:14px 18px}
.guide summary::-webkit-details-marker{display:none}
.guide summary span{font-family:var(--f-display);font-weight:900;font-size:24px;text-transform:uppercase}
.guide summary span::before{content:"+";display:inline-block;width:1em;color:var(--accent)}
.guide[open] summary span::before{content:"\2212"}
.guide summary small{color:var(--muted);font-size:13px}
.gbody{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px 26px;padding:4px 18px 20px;border-top:1px solid var(--line)}
.gbody h4{font-family:var(--f-display);font-size:18px;text-transform:uppercase;margin:14px 0 6px;letter-spacing:.03em}
.gbody p{margin:0 0 8px;font-size:14px;color:var(--muted);max-width:62ch}
.gbody p b{color:var(--ink)}

/* Phone pass */
.brand{white-space:nowrap}
@media (max-width:600px){
  .top{gap:8px}
  .top .crumb{display:none}
  .lbbtn{margin-left:auto;padding:6px 12px}
  .drawcard .who{flex-wrap:wrap;row-gap:4px}
  .drawcard .who .pickno{margin-left:0;width:100%}
  .who b{font-size:22px}
  .team header{flex-wrap:wrap;gap:4px 12px}
  .team h3{font-size:24px;overflow-wrap:normal;flex:1 1 auto}
  .team .tot{margin-left:auto}
  .spots{order:5;width:100%}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .card,.card .in{min-height:124px}
  .card .f .pts{font-size:19px}
  .matchups td{min-width:128px}
  .matchups td .nm{font-size:13px}
  .banner h2{font-size:clamp(30px,9vw,40px)}
  .guide summary span{font-size:21px}
}

/* Pool search */
.pooltools{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--bg);padding:10px 0 8px;margin:4px 0 6px;display:flex;flex-direction:column;gap:8px;border-bottom:1px solid var(--line)}
.srch{position:relative;display:flex;align-items:center}
.srch input{padding:12px 40px 12px 40px;font-size:16px;border-radius:10px;background:var(--surface);border:2px solid var(--line)}
.srch input:focus{border-color:var(--accent);outline:none}
.srch .glass{position:absolute;left:14px;width:14px;height:14px;border:2px solid var(--muted);border-radius:50%;pointer-events:none}
.srch .glass::after{content:"";position:absolute;width:7px;height:2px;background:var(--muted);right:-6px;bottom:-3px;transform:rotate(45deg)}
.srch .clr{position:absolute;right:6px;border:0;background:var(--sunk);width:28px;height:28px;border-radius:50%;font-size:18px;line-height:1;color:var(--muted)}
.pfrow{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.pfrow .label{margin-right:2px}
.pfchip{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:4px 11px;font-size:12.5px;font-weight:700;letter-spacing:.05em}
.pfchip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.pcount{margin-left:auto;font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.empty .ghost{margin-left:6px}
@media (max-width:600px){
  .court{display:flex;overflow-x:auto;gap:6px;padding-bottom:4px;scroll-snap-type:x proximity}
  .court .slot{flex:0 0 104px;min-height:78px;scroll-snap-align:start}
  .court .slot .ab{font-size:18px}
  .pcount{width:100%;margin-left:0}
}

.draft>div,.draft>aside{min-width:0}
@media (max-width:860px){.draft{grid-template-columns:minmax(0,1fr)}}

/* Board search */
.bsearch{position:relative;display:flex;align-items:center;gap:10px;margin:0 0 20px}
.bsearch input{padding:13px 16px 13px 42px;font-size:16px;border-radius:10px;background:var(--surface);border:2px solid var(--line)}
.bsearch input:focus{border-color:var(--accent);outline:none}
.bsearch .glass{position:absolute;left:15px;width:14px;height:14px;border:2px solid var(--muted);border-radius:50%;pointer-events:none}
.bsearch .glass::after{content:"";position:absolute;width:7px;height:2px;background:var(--muted);right:-6px;bottom:-3px;transform:rotate(45deg)}
.bcount{position:absolute;right:14px;font-size:12.5px;color:var(--muted);pointer-events:none}

/* Trivia tiebreaker */
.tb{padding:22px 24px;margin-bottom:18px;text-align:left}
.tb .eyebrow{color:var(--jumbo-dim)}
.tb h3{color:var(--jumbo-ink);font-size:clamp(24px,4.4vw,36px);margin:4px 0 6px;line-height:1.08}
.tb h3 b{font-weight:inherit}
.tb p{color:var(--jumbo-dim);margin:0 0 14px;max-width:60ch}
.tb .go{background:var(--hot);color:#fff}
.tbds,.tbtag{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.tbd{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:999px;border:1px solid currentColor}
.tbd.e{color:#5CC79A}.tbd.m{color:#F2BE5C}.tbd.h{color:#F27A7A}
.tbsrc{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:999px;background:color-mix(in srgb,var(--jumbo-ink) 12%,transparent);color:var(--jumbo-ink)}
.tbq{font-family:var(--f-body)!important;font-weight:700!important;font-size:clamp(19px,3.2vw,25px)!important;letter-spacing:0!important;text-transform:none!important;max-width:40ch}
.tbq:focus{outline:none}
.tbopts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px}
.tbopt{display:flex;align-items:center;gap:10px;text-align:left;padding:12px 14px;border-radius:10px;border:1px solid color-mix(in srgb,var(--jumbo-ink) 22%,transparent);background:color-mix(in srgb,var(--jumbo-ink) 6%,transparent);color:var(--jumbo-ink);font-weight:600;font-size:15px;min-width:0;overflow-wrap:anywhere;transition:background .15s,border-color .15s}
.tbopt:hover,.tbopt:focus-visible{background:color-mix(in srgb,var(--hot) 22%,transparent);border-color:var(--hot)}
.tbopt .k{flex:none;width:26px;height:26px;border-radius:7px;display:grid;place-items:center;background:color-mix(in srgb,var(--jumbo-ink) 14%,transparent);font-family:var(--f-num);font-size:13px}
.tbans{color:var(--jumbo-ink)!important}
.tbres{list-style:none;padding:0;margin:0 0 12px;display:grid;gap:6px}
.tbres li{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;padding:9px 12px;border-radius:9px;border-left:5px solid var(--pc);background:color-mix(in srgb,var(--jumbo-ink) 7%,transparent);color:var(--jumbo-ink)}
.tbres li span{color:var(--jumbo-dim)}
.tbres .res{margin-left:auto;font-family:var(--f-num);font-weight:600;color:var(--jumbo-ink)!important}
.tbres li.ok .res{color:#5CC79A!important}
.settled .team,.settled .meter i,.settled .matchups tr,.settled .banner{animation:none!important}
.settled .card .in{animation:none!important;transform:rotateY(180deg)}
@media (max-width:600px){.tbopts{grid-template-columns:1fr}}

/* Home: random + filter + sort */
.bfind{display:flex;gap:10px;align-items:stretch;flex-wrap:wrap}
.bfind .bsearch{flex:1 1 260px;margin:0}
.rand{font-size:17px;padding:8px 18px;background:var(--hot);color:#fff;white-space:nowrap}
.rand:disabled{opacity:.45}
.die{width:18px;height:18px;border-radius:5px;border:2px solid currentColor;position:relative;display:inline-block;background:radial-gradient(circle at 30% 30%,currentColor 1.6px,transparent 2.2px),radial-gradient(circle at 70% 70%,currentColor 1.6px,transparent 2.2px),radial-gradient(circle at 50% 50%,currentColor 1.6px,transparent 2.2px)}
.rand.rolling .die{animation:spin .5s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.btools{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:flex-start;justify-content:space-between;margin:12px 0 18px}
.bfilters{display:flex;flex-wrap:wrap;gap:6px;flex:1 1 420px}
.bfilters .pill{--c:var(--ink)}
.bfilters .pill .num{opacity:.6;font-size:12px;margin-left:2px}
.bsort{display:flex;align-items:center;gap:8px}
.bsort .seg button{padding:6px 12px;font-size:13px}
.topic.hl{outline:3px solid var(--hot);outline-offset:2px;transform:translateY(-3px);transition:transform .12s}
@media (max-width:600px){.bfilters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px 2px;flex-basis:100%}.bfilters .pill{flex:none}.rand{flex:1 1 100%;justify-content:center}}

/* ===================== DRAFTVERSE SITE (Draft Card brand) ===================== */
:root{
  --foil:conic-gradient(from 210deg,#FF7A45,#FFD36B,#7CF2C8,#6FA8FF,#C58BFF,#FF7AB8,#FF7A45);
  --chrome:linear-gradient(180deg,#FFFFFF 0%,#DDE3EE 42%,#8792A8 52%,#E8ECF4 70%,#AEB7C8 100%);
  --orange3d:linear-gradient(160deg,#FF8A55,#E0531F 50%,#B23E13);
  --gold:#FFD36B; --card:linear-gradient(180deg,#18223B,#0E1527);
}
html{background:#0B1022}
body{background-color:#0B1022;background-image:radial-gradient(ellipse 50% 40% at 80% 0%,rgba(120,150,255,.14),transparent 70%),radial-gradient(ellipse 45% 30% at 0% 22%,rgba(224,83,31,.12),transparent 70%),radial-gradient(circle at 1px 1px,rgba(255,255,255,.07) 1px,transparent 1.5px);background-size:100% 100%,100% 100%,7px 7px;background-attachment:fixed;min-height:100vh;--bg:#0B1022;--surface:#121A2E;--sunk:#18223B;--line:#263252}
a{color:inherit}
.mono{font-family:var(--f-num)}
.gold{color:var(--gold)!important}
.chrome{background:var(--chrome);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(3px 4px 0 #1A2340) drop-shadow(0 14px 20px rgba(0,0,0,.45))}

/* header */
.site{display:flex;flex-wrap:wrap;align-items:center;gap:12px 26px;margin:0 0 26px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none}
.lcard{width:25px;height:34px;flex:none;border-radius:5px;padding:2px;background:var(--foil);transform:rotate(8deg);display:flex;box-shadow:0 4px 10px rgba(0,0,0,.4)}
.lcard>span{flex:1;border-radius:3px;background:#0E1630;display:grid;place-items:center}
.lcard i{width:11px;height:11px;transform:skewX(-12deg);border-radius:2px;background:var(--orange3d)}
.lword{font-family:var(--f-display);font-weight:900;font-size:29px;text-transform:uppercase;letter-spacing:.02em;background:var(--chrome);-webkit-background-clip:text;background-clip:text;color:transparent}
.snav{display:flex;flex-wrap:wrap;gap:6px 20px;font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.snav a{text-decoration:none;color:#C9D1E0;padding:4px 0;border-bottom:2px solid transparent}
.snav a:hover,.snav a[aria-current]{color:#fff;border-color:var(--hot)}
.playnow{margin-left:auto}
.crumbrow{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:-14px 0 18px}

/* buttons */
.go{background:var(--orange3d);color:#fff;box-shadow:inset 0 2px 0 rgba(255,255,255,.35),0 4px 0 #6B2309,0 12px 22px rgba(224,83,31,.22);border-radius:11px;text-decoration:none}
.go:hover{background:var(--orange3d);filter:brightness(1.08);transform:translateY(-1px)}
.go:active{transform:translateY(2px);box-shadow:inset 0 2px 0 rgba(255,255,255,.3),0 2px 0 #6B2309}
.go:disabled{filter:grayscale(.7) brightness(.8)}
.go.sm{font-size:18px;padding:9px 18px}
.go.lg{font-size:26px;padding:16px 30px}
.drow .go{background:var(--orange3d)}
.ghost{border-color:#2B3758;background:rgba(255,255,255,.03)}
.ghost:hover{border-color:#4A5A85}
.foilbox{padding:3px;border-radius:16px;background:var(--foil);box-shadow:0 18px 40px rgba(0,0,0,.4)}
.foilbox>*{border-radius:13px;background:#0E1527;height:100%;box-sizing:border-box}
.foilbtn{display:inline-flex;border-radius:12px;padding:3px;background:var(--foil);text-decoration:none}
.foilbtn span{border-radius:9px;padding:13px 24px;background:#0E1527;font-family:var(--f-display);font-weight:900;font-size:26px;letter-spacing:.06em;text-transform:uppercase}
.foilbtn:hover span{background:#16203A}

/* page heads */
.pagehead{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 24px;margin:6px 0 24px}
.pagehead h1{font-size:clamp(48px,8vw,84px);line-height:.88}
.pagehead .eyebrow{color:#9AA6BD;margin-bottom:8px}
.dailychip{display:block;text-decoration:none;min-width:min(100%,320px)}
.dailychip>span{display:flex!important;flex-direction:column;gap:2px;padding:12px 18px}
.dailychip b{font-family:var(--f-display);font-size:22px;text-transform:uppercase}
.dailychip .dgo{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}

/* homepage */
.lhero{display:flex;flex-wrap:wrap;align-items:center;gap:40px 48px;margin:22px 0 64px}
.lcopy{flex:1 1 440px;min-width:0;display:flex;flex-direction:column;gap:20px}
.lcopy .eyebrow{color:#9AA6BD;letter-spacing:.2em}
h1.big{font-size:clamp(60px,9vw,112px);line-height:.86}
.lcopy p{margin:0;font-size:19px;line-height:1.5;color:#C9D1E0;max-width:34em}
.lctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:4px}
.hcards{flex:1 1 380px;position:relative;height:380px;min-width:0;max-width:440px;margin:0 auto}
.hc{position:absolute;width:200px;height:280px;border-radius:16px;padding:5px;box-sizing:border-box;background:linear-gradient(180deg,#3A4560,#1A2340);box-shadow:0 24px 44px rgba(0,0,0,.55)}
.hc.left{left:0;top:44px;transform:rotate(-12deg)}
.hc.right{right:0;top:34px;transform:rotate(11deg)}
.hc.front{left:50%;top:0;width:224px;height:316px;margin-left:-112px;padding:7px;background:var(--foil);transform:rotate(-1deg);box-shadow:0 30px 60px rgba(0,0,0,.65)}
.hcin{height:100%;box-sizing:border-box;border-radius:11px;background-color:#121A33;background-image:radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--c) 55%,transparent),transparent 65%),radial-gradient(circle at 1px 1px,rgba(255,255,255,.1) 1px,transparent 1.5px);background-size:100% 100%,6px 6px;padding:16px;display:flex;flex-direction:column;justify-content:space-between}
.hctop{display:flex;justify-content:space-between;align-items:center}
.hcpos{border-radius:6px;padding:4px 8px;background:rgba(255,255,255,.12);font-family:var(--f-num);font-weight:600;font-size:13px}
.hcbest{font-family:var(--f-num);font-weight:600;font-size:11px;letter-spacing:.16em;color:var(--gold);text-transform:uppercase}
.hc b{display:block;font-family:var(--f-display);font-weight:900;font-size:31px;line-height:.95;text-transform:uppercase}
.hc.front b{font-size:38px}
.hc span{font-size:13px;font-weight:600;color:#AEB7C8}
.ldaily{margin:0 0 64px}
.ldin{display:flex;flex-wrap:wrap;align-items:center;gap:20px 40px;padding:28px 30px;background-image:radial-gradient(ellipse 50% 90% at 0% 50%,color-mix(in srgb,var(--c) 30%,transparent),transparent 70%)!important}
.ldl{flex:1 1 340px;display:flex;flex-direction:column;gap:6px;min-width:0}
.ldname{font-family:var(--f-display);font-weight:900;font-size:clamp(40px,6vw,56px);line-height:.95;text-transform:uppercase}
.ldsub{color:#C9D1E0;font-size:15px}
.ldr{flex:1 1 300px;display:flex;flex-direction:column;gap:6px;min-width:0}
.ldlead{font-size:18px;font-weight:700}
.ldlead .num{color:var(--hot)}
.ldr .dlabel{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--jumbo-dim);margin-top:8px}
.lsec{margin:0 0 64px}
.sh{font-size:clamp(36px,5vw,48px);text-shadow:3px 4px 0 #1A2340;margin-bottom:22px}
.shrow{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px}
.more{font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);text-decoration:none}
.steps,.modes{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.step,.mode{border-radius:16px;background:var(--card);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 14px 28px rgba(0,0,0,.3);padding:22px;display:flex;flex-direction:column;gap:8px}
.step>div,.mode>div{padding:19px;display:flex;flex-direction:column;gap:8px}
.step.foilbox,.mode.foilbox{padding:3px}
.sn{font-family:var(--f-display);font-weight:900;font-size:54px;line-height:1;color:var(--hot);text-shadow:3px 3px 0 #5E1F08}
.sn.gold{text-shadow:3px 3px 0 #7A570B}
.step b,.mode b{font-family:var(--f-display);font-weight:900;font-size:28px;text-transform:uppercase;line-height:1}
.step p,.mode p{margin:0;font-size:16px;line-height:1.45;color:#C9D1E0}
.mode{background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)}
.soon{display:inline-block;vertical-align:middle;margin-left:8px;border-radius:6px;padding:3px 8px;background:rgba(255,211,107,.15);font-family:var(--f-num);font-size:11px;letter-spacing:.14em;color:var(--gold)}
.ptiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.ptile{border-radius:16px;overflow:hidden;background:var(--card);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 14px 28px rgba(0,0,0,.3);display:flex;flex-direction:column;text-decoration:none;transition:transform .15s}
.ptile:hover{transform:translateY(-3px)}
.ptile i{height:7px;background:var(--c)}
.ptile>span{padding:16px 18px;display:flex;flex-direction:column;gap:6px}
.ptile b{font-family:var(--f-display);font-weight:900;font-size:28px;line-height:1;text-transform:uppercase}
.ptile small{font-size:13.5px;color:#9AA6BD}
.ptile em{font-style:normal;font-weight:700;color:var(--c)}

/* footer */
.sfoot{margin-top:72px;padding-top:28px;border-top:1px solid rgba(255,255,255,.08);display:flex;flex-wrap:wrap;gap:18px 40px;align-items:flex-start}
.sfoot>div{flex:1 1 320px;min-width:0}
.fword{font-family:var(--f-display);font-weight:900;font-size:24px;text-transform:uppercase}
.sfoot p{font-size:13.5px;line-height:1.5;color:#8C97AD;margin:8px 0 0;max-width:46em}
.sfoot nav{display:flex;flex-wrap:wrap;gap:10px 22px;font-size:14px;font-weight:600}
.sfoot nav a{color:#C9D1E0;text-decoration:none}.sfoot nav a:hover{color:#fff}

/* game screens in the brand */
.card.best .f{border:3px solid transparent;background:linear-gradient(var(--bg),var(--bg)) padding-box,var(--foil) border-box;box-shadow:0 8px 20px rgba(0,0,0,.35)}
.team,.roster,.topic,.guide,.setup .panel{box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 12px 26px rgba(0,0,0,.25)}
.howpage summary{pointer-events:none}.howpage summary span::before{content:none}
.howpage .gbody{border-top:0}

/* share + toast */
.shico{width:16px;height:16px;border:2.5px solid currentColor;border-radius:4px;position:relative;display:inline-block}
.shico::after{content:"";position:absolute;left:3px;top:-7px;width:2.5px;height:11px;background:currentColor;box-shadow:0 0 0 0 currentColor}
.sharebox{display:block;width:100%;max-width:520px;margin:12px 0 0;font-family:var(--f-num);font-size:14px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:10px}
.toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:#F4F6FA;color:#0B1022;font-weight:700;padding:11px 18px;border-radius:10px;box-shadow:0 12px 30px rgba(0,0,0,.4);transition:opacity .2s,transform .2s;z-index:50}
.toast.on{opacity:1;transform:translate(-50%,0)}

@media (max-width:600px){
  .site{gap:10px 14px;margin-bottom:18px}
  .lword{font-size:25px}
  .snav{order:3;width:100%;gap:4px 16px;font-size:13px}
  .playnow{font-size:16px;padding:8px 14px}
  .hcards{height:330px;transform:scale(.86);transform-origin:top center;margin-bottom:-40px}
  .ldin{padding:22px 20px}
  .foilbtn span{font-size:22px;padding:11px 18px}
  .go.lg{font-size:22px;padding:13px 22px}
}
@media (prefers-reduced-motion: reduce){.ptile,.go{transition:none}}

/* legal pages */
.legaldoc{max-width:760px;margin:10px 0 60px}
.legaldoc h1{font-size:clamp(52px,8vw,80px);margin:8px 0 18px}
.legaldoc .eyebrow{color:#9AA6BD}
.legaldoc h2{font-size:30px;margin:30px 0 8px}
.legaldoc p,.legaldoc li{font-size:16.5px;line-height:1.65;color:#C9D1E0}
.legaldoc ul{padding-left:20px}
.legaldoc a{color:var(--gold)}
.hc.right .hcin{align-items:flex-end;text-align:right}
.hc.right .hctop{align-self:stretch;justify-content:flex-end}
@media (max-width:600px){
  .site{flex-wrap:wrap}
  .logo{gap:9px}.lcard{width:21px;height:29px}.lword{font-size:23px}
  .playnow{font-size:15px!important;padding:7px 12px!important;box-shadow:inset 0 2px 0 rgba(255,255,255,.35),0 3px 0 #6B2309}
  .snav{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:2px 16px;gap:18px}
  .snav a{white-space:nowrap}
}
.dailychip em{font-style:normal;font-size:16px;font-weight:600;color:#C9D1E0}