:root{
  --carbon:#0C0D0F; --surface:#15171A; --surface2:#1C1F23; --line:#2A2E33; --line2:#3A3F46;
  --ink:#EAE8E1; --muted:#8C9097; --faint:#5A5E64;
  --purple:#9D7BFF; --purple-d:#2A2150; --purple-l:#C6B2FF;
  --green:#36D399; --green-d:#103a2c;
  --amber:#F5B33F; --amber-d:#3d2f10;
  --red:#FF5C5C; --red-d:#3d1717;
  --blue:#5BC8FF; --blue-d:#0f2c3d;
  --display:'Saira Condensed',sans-serif; --ui:'Saira',sans-serif; --mono:'Space Mono',monospace;
  --r:10px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--carbon);color:var(--ink);font-family:var(--ui);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
.wrap{max-width:1040px;margin:0 auto;padding:24px 20px 64px}
h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:.01em;margin:0;text-transform:uppercase}
.mono{font-family:var(--mono)}
em{font-style:normal}
button{font-family:var(--ui);cursor:pointer}
button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--purple);outline-offset:2px}

.topbar{display:flex;align-items:baseline;gap:14px;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:24px;flex-wrap:wrap}
.logo{font-family:var(--display);font-weight:700;font-size:30px;letter-spacing:.04em;line-height:1}
.logo .dot{color:var(--green)}
.logo .tld{color:var(--muted);font-size:16px;font-weight:600;letter-spacing:.02em;margin-left:1px}
.tag{color:var(--muted);font-size:14px}
.tag .hl{color:var(--green);font-family:var(--display);letter-spacing:.02em}
.spacer{flex:1}
.lights{display:flex;gap:5px}
.lights span{width:11px;height:11px;border-radius:50%;background:var(--line2);display:inline-block}
.lights.on span{background:var(--red);box-shadow:0 0 8px var(--red)}

/* buttons */
.btn{background:var(--ink);color:var(--carbon);border:none;border-radius:var(--r);padding:12px 22px;font-size:16px;font-weight:600;font-family:var(--display);letter-spacing:.04em;text-transform:uppercase}
.btn:hover{filter:brightness(.92)}
.btn:active{transform:scale(.985)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line2)}
.btn.ghost:hover{border-color:var(--ink);filter:none}
.btn:disabled{opacity:.35;cursor:not-allowed}
.btn.go{background:var(--green);color:#062018}

/* start */
.hero{display:grid;grid-template-columns:1.3fr .9fr;gap:28px;align-items:start}
@media(max-width:760px){.hero{grid-template-columns:1fr}}
.hero+.panel{margin-top:24px}
.hero h2{font-size:46px;line-height:.96;letter-spacing:.005em}
.hero .lede{color:var(--muted);margin:14px 0 22px;max-width:52ch}
.hero .lede em{color:var(--ink);font-style:normal}
.steps{border-left:2px solid var(--line);padding-left:0;list-style:none;margin:22px 0 0}
.steps li{padding:10px 0 10px 16px;border-left:2px solid var(--purple);margin-left:-2px}
.steps b{font-family:var(--display);letter-spacing:.03em}
.steps span{color:var(--muted);font-size:14px;display:block}
.startcard{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px}
.startcard label{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-family:var(--display)}
.startcard input{width:100%;margin-top:6px;background:var(--surface2);border:1px solid var(--line2);color:var(--ink);border-radius:8px;padding:10px 12px;font-family:var(--mono);font-size:15px}
.startcard .hint{color:var(--faint);font-size:12px;margin-top:8px}

/* era picker */
.eragrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.erapick{display:flex;flex-direction:column;gap:3px;text-align:left;background:var(--surface2);border:1px solid var(--line);border-radius:11px;padding:13px 14px;color:var(--ink);transition:border-color .12s,background .12s}
.erapick:hover{border-color:var(--line2)}
.erapick.sel{border-color:var(--purple);box-shadow:0 0 0 1px var(--purple) inset;background:#1a1726}
.erapick .en{font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:.03em;text-transform:uppercase}
.erapick .ey{font-family:var(--mono);font-size:12px;color:var(--purple-l)}
.erapick .eb{font-size:12.5px;color:var(--muted);margin-top:4px;line-height:1.35}

/* draft layout */
.draft{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
@media(max-width:860px){.draft{grid-template-columns:1fr}}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px}
.phead{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px}
.phead h3{font-size:19px;letter-spacing:.03em}
.phead .sub{color:var(--muted);font-size:13px}

/* garage slots */
.slots{display:flex;flex-direction:column;gap:8px}
.slot{display:flex;align-items:center;gap:12px;background:var(--surface2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;min-height:56px}
.slot.open{border-style:dashed;border-color:var(--line2)}
.slot.target{border-color:var(--purple);box-shadow:0 0 0 1px var(--purple) inset}
.slot.open.place{cursor:pointer;border-style:solid}
.slot.open.place .empty{color:var(--purple-l);font-weight:600}
.slot.open.place:hover{background:var(--purple-d)}
.slot .role{font-family:var(--display);font-size:12px;letter-spacing:.06em;color:var(--muted);text-transform:uppercase;width:96px;flex:none}
.slot .fillname{font-weight:600}
.slot .fillmeta{color:var(--muted);font-size:12.5px;font-family:var(--mono)}
.slot .ovr{margin-left:auto;font-family:var(--mono);font-weight:700;font-size:17px}
.slot .empty{color:var(--faint);font-style:normal}
.slot .swaps{margin-left:auto;display:flex;gap:6px}
.slot .swaps + .ovr{margin-left:12px}
.roleswap{font-family:var(--mono);font-size:11px;letter-spacing:.02em;color:var(--muted);background:var(--surface);border:1px solid var(--line2);border-radius:7px;padding:3px 7px;cursor:pointer;white-space:nowrap}
.roleswap:hover{color:var(--ink);border-color:var(--purple);box-shadow:0 0 0 1px var(--purple) inset}
.badge{font-family:var(--display);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:5px;font-weight:600}
.badge.works{background:var(--purple-d);color:var(--purple-l)}
.badge.cust{background:#26282c;color:var(--muted)}
.yr{font-family:var(--mono);font-size:11px;color:var(--muted);background:#26282c;border-radius:5px;padding:2px 6px;white-space:nowrap}

/* overall meter */
.overall{display:flex;align-items:center;gap:14px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.overall .num{font-family:var(--mono);font-weight:700;font-size:30px;line-height:1}
.overall .lab{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-family:var(--display)}
.bar{flex:1;height:7px;background:var(--surface2);border-radius:4px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--green);width:0;transition:width .5s}

/* spin */
.reel{background:var(--surface2);border:1px solid var(--line2);border-radius:10px;height:64px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;margin-bottom:14px}
.reel:before{display:none}
.reel .rt{font-family:var(--display);font-weight:700;font-size:24px;letter-spacing:.02em;text-transform:uppercase}
.reel .rt small{font-family:var(--mono);font-size:13px;color:var(--muted);font-weight:400;margin-left:8px}
.teamcard{border:1px solid var(--line);border-radius:10px;padding:14px;background:var(--surface2);min-height:120px}
.teamcard .tt{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.teamcard .tt h3{font-size:20px}
.teamcard .rar{font-size:11px;font-family:var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--amber)}
.picks{display:flex;flex-direction:column;gap:7px}
.pick{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:9px 11px;color:var(--ink);font-size:14.5px;transition:border-color .12s}
.pick .ptype{font-family:var(--display);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);width:62px;flex:none}
.pick .pname{font-weight:600}
.pick .pstat{margin-left:auto;font-family:var(--mono);font-size:12.5px;color:var(--muted)}
.pick:not(:disabled):hover{border-color:var(--green)}
.pick:disabled{opacity:.32;cursor:not-allowed}
.pick.sel{border-color:var(--purple);box-shadow:0 0 0 1px var(--purple) inset;background:var(--purple-d)}
.controls{display:flex;gap:10px;margin-top:14px;align-items:center}
.rerolls{font-family:var(--mono);font-size:13px;color:var(--muted)}
.rerolls b{color:var(--ink)}

/* championship bar (playback) */
.champbar{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.cstat{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:11px 16px;min-width:96px}
.cstat.grow{flex:1;min-width:200px}
.cstat .cl{font-family:var(--display);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.cstat .cv{font-family:var(--mono);font-weight:700;font-size:28px;line-height:1.1}
.cstat .cv2{font-family:var(--display);font-weight:700;font-size:19px;text-transform:uppercase;letter-spacing:.02em;line-height:1.15;margin-top:2px}
.cstat .csub{font-size:11px;color:var(--faint);font-family:var(--mono);margin-top:2px}

/* playback board */
.board{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.boardhead{display:flex;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line)}
.boardhead h3{font-size:20px}
.boardhead .sub{color:var(--muted);font-size:13px;margin-left:10px}
.rowhead,.row{display:grid;grid-template-columns:42px 1fr 110px 56px 150px;gap:10px;align-items:center}
.rowhead{padding:8px 18px;border-bottom:1px solid var(--line);font-family:var(--display);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--faint)}
.rowhead span:nth-child(4),.row .pts{text-align:right}
.rows{font-family:var(--mono);font-size:13.5px}
.row{padding:9px 18px;border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:none}
.row .rd{color:var(--faint)}
.row .cc{font-family:var(--ui);font-weight:500}
.row .cc em{color:var(--faint);font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;font-family:var(--display);margin-left:8px}
.row .res b{font-weight:700;margin-right:6px}
.row .res b.w{color:var(--green)}
.row .res b.d{color:var(--red)}
.row .pts{font-weight:700;color:var(--muted)}
.row .note{color:var(--muted);font-size:11.5px;text-align:right}
.row .winner{font-family:var(--mono);font-size:11px;color:var(--amber);margin-left:8px}
.row .cc .wet{display:inline-block;font-family:var(--display);font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--blue);background:var(--blue-d);border-radius:5px;padding:1px 6px;margin-left:8px;vertical-align:1px}
.row.wetrow{box-shadow:inset 3px 0 0 var(--blue)}
.row.win{background:var(--green-d)}
.row.win .pts{color:var(--green)}
.row.pod{background:#221c10}
.row.dnf{background:var(--red-d)}
.row.cur{box-shadow:0 0 0 1px var(--green) inset}
@media(max-width:680px){
  .rowhead,.row{grid-template-columns:34px 1fr 86px 44px;gap:8px;padding-left:12px;padding-right:12px}
  .rowhead span:nth-child(5),.row .note{display:none}
}

/* standings tables */
.standings{display:grid;grid-template-columns:1.4fr 1fr;gap:18px;margin:18px 0}
@media(max-width:760px){.standings{grid-template-columns:1fr}}
.stbl{width:100%;border-collapse:collapse;font-size:14px}
.stbl tbody{max-height:500px;overflow-y:auto;display:block}
.stbl thead,.stbl tbody tr{display:table;width:100%;table-layout:fixed}
.stbl th{font-family:var(--display);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);text-align:left;padding:6px 8px;border-bottom:1px solid var(--line)}
.stbl td{padding:7px 8px;border-bottom:1px solid var(--line)}
.stbl tr:last-child td{border-bottom:none}
.stbl .p{width:26px;color:var(--faint);font-family:var(--mono)}
.stbl .t{color:var(--muted);font-size:12.5px}
.stbl .n{text-align:right;font-family:var(--mono);font-weight:700;width:54px}
.stbl .w{text-align:right;font-family:var(--mono);color:var(--muted);width:34px}
.stbl th.n,.stbl th.w{text-align:right}
.stbl tr.me td{background:#1a1726;color:var(--purple-l)}
.stbl tr.me td.p{color:var(--purple)}
.stbl tr.me td.t{color:#a99bd6}

/* result calendar */
.cal{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:8px}
.cell{border:1px solid var(--line);border-radius:9px;padding:9px 10px;background:var(--surface2)}
.cell .cr{font-family:var(--mono);font-size:11px;color:var(--faint)}
.cell .cn{font-weight:600;font-size:13.5px;margin-top:1px}
.cell .cs{font-size:11px;font-family:var(--display);letter-spacing:.05em;text-transform:uppercase;margin-top:3px;color:var(--muted)}
.cell.win{background:var(--green-d);border-color:#1d5e45}
.cell.win .cs{color:var(--green)}
.cell.pod{background:#221c10;border-color:#5a4a20}
.cell.pod .cs{color:var(--amber)}
.cell.flag{background:var(--red-d);border-color:#6a2424}
.cell.flag .cs{color:var(--red)}
.cell.wetcell{border-top:2px solid var(--blue)}
.cell .cr .wetdot{margin-left:4px}

/* verdict */
.verdict{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px;margin-bottom:18px}
.verdict .big{font-family:var(--display);font-weight:700;font-size:34px;line-height:1.02;text-transform:uppercase}
.verdict .big.perfect{color:var(--green)}
.verdict p{color:var(--muted);margin:12px 0 0;max-width:66ch}
.tbadges{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.tbadge{font-family:var(--display);font-size:12px;letter-spacing:.04em;text-transform:uppercase;padding:4px 10px;border-radius:6px;font-weight:600;background:var(--surface2);border:1px solid var(--line2);color:var(--muted)}
.tbadge.got{background:var(--green-d);border-color:#1d5e45;color:var(--green)}
.statline{display:flex;gap:26px;margin-top:18px;flex-wrap:wrap}
.statline .s .v{font-family:var(--mono);font-weight:700;font-size:22px}
.statline .s .k{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-family:var(--display)}
.actions{display:flex;gap:12px;margin-top:22px;flex-wrap:wrap}

/* footer */
.foot{margin-top:56px;padding-top:18px;border-top:1px solid var(--line)}
.footrow{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.fbrand{font-family:var(--display);font-weight:700;font-size:18px;letter-spacing:.03em}
.fbrand .dot{color:var(--green)}
.fbrand .tld{color:var(--muted);font-size:12px;font-weight:600}
.fcopy{color:var(--muted);font-size:12.5px}
.fdisc{color:var(--faint);font-size:11.5px;line-height:1.5;margin:10px 0 0;max-width:80ch}

.note-inline{color:var(--faint);font-size:12.5px;margin-top:10px}
.note-inline.placing{color:var(--purple-l)}

/* share controls on the result screen */
.sharebar{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 20px;margin-bottom:18px}
.sharehead{display:flex;align-items:baseline;gap:10px}
.sharehead h3{font-size:18px}
.sharehead .sub{color:var(--muted);font-size:13px}
.sharebtns{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.sharemsg{min-height:18px;margin-top:10px;font-size:13px;font-family:var(--mono);color:var(--muted);word-break:break-all}
.sharemsg.ok{color:var(--green)}
.sharemsg.warn{color:var(--amber)}

/* shared-result view (opened from a ?r= link) */
.verdict.shared .sharedtag{font-family:var(--display);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--purple-l);margin-bottom:10px}
.sharedcta{text-align:left}
.sharedcta h3{font-size:20px}

.hidden{display:none!important}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}