:root{
  --asph:#16181D; --asph2:#22252D; --asph3:#2E323B; --paper:#F6F4EF; --card:#FFFFFF; --ink:#16181D; --mute:#6B6F78; --line:#E4E0D7;
  --acc:#FF5A1F; --link:#1F4FD1; --hl:#FFE36E;
  --cond:'Barlow Condensed','Arial Narrow',sans-serif; --ui:'Barlow','Helvetica Neue',Arial,sans-serif; --read:'Source Serif 4',Georgia,serif;
  --check:conic-gradient(#fff 25%,#16181D 0 50%,#fff 0 75%,#16181D 0) 0 0/8px 8px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;overflow-x:hidden;background:var(--paper);color:var(--ink);font:16px/1.45 var(--ui)}
button{font:inherit;cursor:pointer;color:inherit}
button:disabled{opacity:.45;cursor:default}
input{font:inherit}

/* brand */
.brand{display:flex;align-items:center;gap:10px;font:italic 800 28px/1 var(--cond);letter-spacing:.01em;text-transform:uppercase}
.brand b{color:var(--acc);font-weight:800}
.brand .mark{width:30px;height:22px;background:var(--check);background-size:7.5px 7.5px;border:2px solid var(--ink);transform:skewX(-12deg)}

/* buttons */
.btn{border:0;border-radius:6px;padding:14px 20px;font:700 17px/1 var(--ui);background:var(--ink);color:#fff;transition:transform .08s,background .15s}
.btn:active{transform:translateY(1px)}
.btn.go{background:var(--acc);color:#fff;box-shadow:0 3px 0 #C23E0C}
.btn.go:hover:not(:disabled){background:#FF6B34}
.btn.big{width:100%;padding:18px;font:italic 800 24px/1 var(--cond);text-transform:uppercase;letter-spacing:.03em}
.btn.ghost{background:transparent;color:var(--ink);border:2px solid var(--ink)}
.btn.small{padding:9px 14px;font-size:14px}
.link{background:none;border:0;color:var(--mute);text-decoration:underline;text-underline-offset:3px;font-size:14px;padding:6px}
.chip{border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:7px 13px;font:600 14px/1 var(--ui);white-space:nowrap}
.chip:hover:not(:disabled){border-color:var(--ink)}
.chip.dark{background:var(--ink);color:#fff;border-color:var(--ink)}
.chip.quiet{border-color:transparent;background:transparent;color:var(--mute)}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:22px}
.rlabel{font:700 12px/1 var(--ui);text-transform:uppercase;letter-spacing:.12em;color:var(--mute);margin-bottom:12px;display:flex;justify-content:space-between}
.rlabel span{color:var(--ink)}

/* landing */
.land{min-height:100vh;max-width:1080px;margin:0 auto;padding:28px 24px 60px;display:grid;grid-template-columns:1.25fr 1fr;grid-template-rows:auto 1fr;gap:28px 56px;align-items:center}
.landtop{grid-column:1/-1}
.hero h1{font:italic 800 clamp(52px,7.5vw,96px)/.9 var(--cond);text-transform:uppercase;margin:0 0 22px;letter-spacing:-.005em}
.hero h1 em{color:var(--acc);font-style:italic}
.hero p{font-size:19px;color:#3B3F47;max-width:520px;margin:0 0 28px}
.demo{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.demo span{font:600 14px/1 var(--ui);background:#fff;border:1.5px solid var(--ink);border-radius:999px;padding:8px 12px;opacity:0;animation:hop .4s forwards}
.demo span:last-of-type{background:var(--ink);color:#fff}
.demo i{width:14px;height:2px;background:var(--ink)}
.demo .flag{width:28px;height:22px;background:var(--check);border:2px solid var(--ink);opacity:0;animation:hop .4s 1.8s forwards}
@keyframes hop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.joinform{display:flex;flex-direction:column;gap:14px;padding:28px;box-shadow:0 18px 40px -24px rgba(22,24,29,.35)}
.joinform label{display:flex;flex-direction:column;gap:8px;font:700 12px/1 var(--ui);text-transform:uppercase;letter-spacing:.12em;color:var(--mute)}
.joinform input,.row input,.custom input{border:2px solid var(--line);border-radius:6px;padding:13px 14px;font-size:18px;color:var(--ink);background:#fff;outline:0;text-transform:none;letter-spacing:0;font-weight:500}
.joinform input:focus,.custom input:focus{border-color:var(--ink)}
.joincode{font-size:15px;color:var(--mute)}.joincode b{color:var(--ink);font:italic 800 22px/1 var(--cond);letter-spacing:.08em}
.or{display:flex;align-items:center;gap:10px;color:var(--mute);font-size:13px}.or:before,.or:after{content:"";flex:1;height:1px;background:var(--line)}
.row{display:flex;gap:8px}.row input{flex:1;min-width:0;text-transform:uppercase;letter-spacing:.2em;font-weight:700}

/* lobby */
.lob{max-width:1180px;margin:0 auto;padding:22px 24px 48px}
.lobtop{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}
.lobgrid{display:grid;grid-template-columns:260px 280px 1fr;gap:18px;align-items:start}
.roomcard{text-align:center;display:flex;flex-direction:column;align-items:center}
.rcode{font:italic 800 76px/.9 var(--cond);letter-spacing:.06em;margin:-4px 0 14px}
.qr{width:170px;height:170px;padding:10px;background:#fff;border:1px solid var(--line);border-radius:8px}
.rhint{font-size:13px;color:var(--mute);margin:12px 0 14px;line-height:1.4}.rhint b{color:var(--ink)}
.racers ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.racers li{display:flex;align-items:center;gap:10px;padding:7px 4px;border-bottom:1px dashed var(--line);animation:hop .3s}
.racers li i{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:#fff;font:italic 800 16px/1 var(--cond);font-style:normal;flex:none}
.racers li span{flex:1;font-weight:600}.racers li em{color:var(--mute);font-weight:400;font-style:normal}
.racers li small{font:700 10px/1 var(--ui);text-transform:uppercase;letter-spacing:.1em;background:var(--ink);color:#fff;padding:4px 6px;border-radius:3px}
.racers li.off{opacity:.45}
.racers .x{border:0;background:none;color:var(--mute);font-size:20px;line-height:1;padding:0 4px}
.empty{color:var(--mute);font-size:14px;margin-top:14px}
.setup{display:flex;flex-direction:column;gap:18px}
.matchup{position:relative}
.mlabel{font:italic 800 26px/1 var(--cond);text-transform:uppercase;margin-bottom:12px}
.mcards{display:grid;grid-template-columns:1fr 46px 1fr;align-items:stretch}
.matchup.picking .mcards{opacity:.35;filter:grayscale(1)}
.pcard{border:2px solid var(--ink);border-radius:8px;overflow:hidden;background:#fff;display:flex;flex-direction:column;min-width:0}
.pcard .pk{font:700 11px/1 var(--ui);text-transform:uppercase;letter-spacing:.14em;padding:8px 10px;background:var(--ink);color:#fff}
.pcard.goal{border-color:var(--acc)}
.pcard.goal .pk{background:var(--acc);position:relative}
.pcard.goal .pk:after{content:"";position:absolute;right:0;top:0;bottom:0;width:44px;background:var(--check);background-size:7px 7px}
.pimg{height:110px;background:#EEE center/cover no-repeat}
.pimg.none{display:grid;place-items:center;font:italic 800 56px/1 var(--cond);color:#C9C4B8;background:#F1EEE7}
.pt{font:italic 800 24px/1 var(--cond);text-transform:uppercase;padding:10px 12px 2px;overflow-wrap:anywhere}
.pd{font-size:13px;color:var(--mute);padding:0 12px 12px;line-height:1.3}
.arrow{display:grid;place-items:center;position:relative}
.arrow:before{content:"";position:absolute;left:4px;right:4px;top:50%;border-top:2px dashed var(--ink)}
.arrow span{position:relative;background:var(--acc);color:#fff;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font:800 16px/1 var(--cond)}
.spin{position:absolute;inset:40px 0 0;display:grid;place-items:center;font-weight:700}
.spin:before{content:"";width:20px;height:20px;border:3px solid var(--line);border-top-color:var(--acc);border-radius:50%;animation:rot .7s linear infinite;margin-bottom:60px;position:absolute}
@keyframes rot{to{transform:rotate(360deg)}}
.rerolls{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.custom{display:flex;gap:6px;flex:1 1 260px}.custom input{flex:1;min-width:0;padding:7px 12px;font-size:14px;border-radius:999px}
.settings{display:grid;grid-template-columns:auto 1fr;gap:20px}
.seg{display:inline-flex;border:2px solid var(--ink);border-radius:7px;overflow:hidden}
.seg button{border:0;background:#fff;padding:8px 12px;font-weight:600;font-size:14px;border-right:1px solid var(--line)}
.seg button:last-child{border-right:0}.seg button.on{background:var(--ink);color:#fff}
.val{font-weight:600}
.waiting{text-align:center;padding:16px;border:2px dashed var(--line);border-radius:8px;color:var(--mute)}.waiting b{color:var(--ink)}

/* race track */
.track{position:sticky;top:0;z-index:20;background:var(--asph);color:#fff;padding:10px 18px 8px;box-shadow:0 6px 18px -10px rgba(0,0,0,.5)}
.trow{display:grid;grid-template-columns:130px 1fr 170px;align-items:center;gap:14px;height:30px;border-radius:5px;padding:0 6px}
.trow.thead{height:22px;font:700 11px/1 var(--ui);text-transform:uppercase;letter-spacing:.12em;color:#8A8F99}
.thead .tlane{border:0;display:flex;justify-content:space-between;align-items:center}
.thead .sl,.thead .gl{max-width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.thead .gl{color:#fff}
.tname{display:flex;align-items:center;gap:8px;font:700 15px/1 var(--ui);min-width:0}
.tname span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tname i{width:10px;height:10px;border-radius:2px;flex:none}
.tlane{position:relative;height:100%;border-bottom:1px dashed rgba(255,255,255,.14)}
.trow[data-id] .tlane:after{content:"";position:absolute;right:0;top:3px;bottom:3px;width:12px;background:var(--check);background-size:6px 6px;opacity:.9}
.trail{position:absolute;left:0;top:50%;height:3px;margin-top:-1.5px;background:linear-gradient(90deg,transparent,var(--c));opacity:.55;transition:width .7s cubic-bezier(.3,1.3,.5,1)}
.tok{position:absolute;top:50%;margin-top:-12px;width:30px;height:24px;border-radius:12px;background:var(--c);display:grid;place-items:center;font:800 14px/1 var(--cond);color:#fff;transition:left .7s cubic-bezier(.3,1.3,.5,1);z-index:2;box-shadow:0 0 0 2px var(--asph)}
.trow.me{background:var(--asph2)}
.trow.me .tok{box-shadow:0 0 0 2px #fff}
.trow.lead .tname:after{content:"LEADER";font:800 9px/1 var(--ui);letter-spacing:.1em;background:var(--hl);color:var(--ink);padding:3px 4px;border-radius:2px;flex:none}
.trow.fin .tname:after{content:none}
.trow.out{opacity:.45}
.trow.peek{cursor:pointer}.trow.peek:hover{background:var(--asph3)}
.trow.watching{background:var(--asph3);outline:1.5px solid #fff}
.tstat{display:flex;align-items:center;gap:8px;font-size:14px;color:#C7CBD3;min-width:0;white-space:nowrap}
.tstat .hot{color:var(--hl)}.tstat .warm{color:#FFB38F}
.tstat .muted{color:#7A7F89}
.tstat .pl{font:italic 800 18px/1 var(--cond);color:#fff}.tstat .p1{color:var(--hl)}
.tstat em.on{font-style:normal;color:#8A8F99;overflow:hidden;text-overflow:ellipsis;font-size:12px}
.peekhint{font-size:12px;color:var(--hl);text-align:center;height:0;overflow:visible;transform:translateY(-2px)}
.peekhint:not(:empty){height:16px}

/* hud */
.hud{position:sticky;z-index:19;display:flex;align-items:center;gap:12px;padding:10px 18px;background:#fff;border-bottom:1px solid var(--line);flex-wrap:wrap}
.goalbtn{display:flex;align-items:center;gap:8px;border:2px solid var(--ink);background:#fff;border-radius:6px;padding:6px 10px 6px 6px;font:italic 800 20px/1 var(--cond);text-transform:uppercase;max-width:280px}
.goalbtn small{font:700 10px/1 var(--ui);letter-spacing:.12em;background:var(--check);background-size:6px 6px;color:transparent;width:22px;height:18px;border-radius:2px;flex:none;overflow:hidden}
.crumbs{display:flex;align-items:center;gap:6px;flex:1;min-width:0;overflow:hidden;white-space:nowrap;font-size:14px;color:var(--mute)}
.crumbs span{overflow:hidden;text-overflow:ellipsis;max-width:180px}
.crumbs span.cur{color:var(--ink);font-weight:700}
.crumbs i{font-style:normal;color:#B5B0A5}
.clicks{font-size:14px;color:var(--mute)}.clicks b{font:italic 800 22px/1 var(--cond);color:var(--ink)}
.hright{display:flex;align-items:center;gap:10px;margin-left:auto}
.clock{font:italic 800 26px/1 var(--cond);font-variant-numeric:tabular-nums;min-width:62px;text-align:right}
.clock.low{color:var(--acc);animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:.4}}
.donebar,.watchbar{flex:1;display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
.donebar span{color:var(--mute);font-size:14px}
.watchbar i{width:12px;height:12px;border-radius:3px}.watchbar .crumbs{flex-basis:100%}
.goalpop{position:absolute;left:18px;top:calc(100% + 8px);width:min(420px,calc(100vw - 36px));background:#fff;border:2px solid var(--ink);border-radius:8px;padding:12px;display:flex;gap:12px;box-shadow:0 18px 30px -18px rgba(0,0,0,.5);animation:hop .2s}
.goalpop img{width:90px;height:90px;object-fit:cover;border-radius:4px;flex:none}
.goalpop b{font:italic 800 22px/1 var(--cond);text-transform:uppercase;display:block}
.goalpop em{font-size:13px;color:var(--mute);font-style:normal}
.goalpop p{font-size:14px;margin:6px 0 0;line-height:1.4}

/* article */
.art{max-width:860px;margin:0 auto;padding:26px 26px 120px;transition:opacity .15s}
.art.loading{opacity:.35;pointer-events:none}
.ahead{border-bottom:3px solid var(--ink);margin-bottom:18px;padding-bottom:10px}
.akick{font:700 11px/1 var(--ui);text-transform:uppercase;letter-spacing:.14em;color:var(--mute)}
.ahead h1{font:italic 800 clamp(36px,5vw,56px)/1 var(--cond);text-transform:uppercase;margin:6px 0 0}
.abody{font:17px/1.65 var(--read);color:#22252B}
.abody p{margin:0 0 1em}
.abody h2{font:italic 800 30px/1.05 var(--cond);text-transform:uppercase;margin:1.4em 0 .4em;padding-bottom:4px;border-bottom:1px solid var(--line);clear:both}
.abody h3{font:700 19px/1.2 var(--ui);margin:1.2em 0 .3em}
.abody h4{font:700 16px/1.2 var(--ui);margin:1em 0 .3em}
.abody ul,.abody ol{padding-left:1.4em}
.abody a.wl{color:var(--link);text-decoration:none;background:linear-gradient(var(--hl),var(--hl)) 0 100%/0 40% no-repeat;transition:background-size .15s;border-bottom:1px solid rgba(31,79,209,.25)}
.abody a.wl:hover{background-size:100% 40%;color:#0B2C8A}
.abody.ro a.wl{color:inherit;border-bottom-color:transparent;cursor:default;background:none}
.abody img{max-width:100%;height:auto}
.abody figure,.abody .thumb{float:right;clear:right;margin:4px 0 14px 20px;max-width:280px;font:13px/1.35 var(--ui);color:var(--mute)}
.abody figure img{border-radius:4px;display:block}
.abody figcaption{margin-top:6px}
.abody table{border-collapse:collapse;font:14px/1.4 var(--ui);margin:1em 0;max-width:100%}
.abody td,.abody th{border:1px solid var(--line);padding:5px 8px;vertical-align:top}
.abody table.infobox{float:right;clear:right;width:300px;margin:0 0 16px 22px;background:#fff;border:2px solid var(--ink);font-size:13px}
.abody .infobox th,.abody .infobox td{border:0;border-bottom:1px solid var(--line)}
.abody .infobox caption,.abody .infobox .infobox-above{font:italic 800 22px/1.05 var(--cond);text-transform:uppercase;padding:8px}
.abody .infobox img{max-width:100%}
.abody .navbox,.abody .vertical-navbox,.abody .sidebar{font:13px/1.4 var(--ui);width:100%;background:#FAF9F6}
.abody .vertical-navbox,.abody .sidebar{float:right;clear:right;width:240px;margin:0 0 14px 20px}
.abody .hatnote{font:italic 14px/1.4 var(--ui);color:var(--mute);margin-bottom:10px}
.abody .gallery{display:flex;flex-wrap:wrap;gap:10px;padding:0;list-style:none}
.abody .mw-collapsible-toggle,.abody .navbar{display:none}
.abody blockquote{border-left:3px solid var(--acc);margin:1em 0;padding-left:16px;color:#444}

/* countdown */
.cdwrap{position:fixed;inset:0;z-index:50;background:rgba(22,24,29,.92);display:grid;place-items:center;padding:20px;animation:hop .2s}
.cdin{width:min(640px,100%);text-align:center;color:#fff}
.cdk{font:700 13px/1 var(--ui);letter-spacing:.16em;text-transform:uppercase;color:#8A8F99;margin-bottom:16px}
.cdin .pcard{color:var(--ink);text-align:left}
.cdin .arrow:before{border-color:#fff}
.cdn{font:italic 800 120px/1 var(--cond);margin-top:18px;text-transform:uppercase}
.cdn.pop{animation:pop .45s cubic-bezier(.2,1.6,.4,1)}
@keyframes pop{from{transform:scale(1.6);opacity:0}to{transform:none;opacity:1}}
.cdtip{color:#A6ABB5;font-size:15px}

/* results */
.res{max-width:1180px;margin:0 auto;padding:26px 24px 60px}
.rhead{margin-bottom:22px}
.rk{font:700 12px/1 var(--ui);text-transform:uppercase;letter-spacing:.14em;color:var(--mute)}
.rhead h2{font:italic 800 clamp(38px,5.5vw,64px)/.95 var(--cond);text-transform:uppercase;margin:8px 0 6px}
.rhead h2 span{color:var(--c);-webkit-text-stroke:0}
.rhead p{margin:0;color:var(--mute);font-size:17px}
.resgrid{display:grid;grid-template-columns:1fr 420px;gap:18px;align-items:start}
.side{display:flex;flex-direction:column;gap:18px}
.route{padding:12px 0;border-bottom:1px dashed var(--line)}.route:last-child{border:0}
.route.dnf{opacity:.6}
.rtop{display:flex;align-items:center;gap:8px;margin-bottom:8px}.rtop i{width:12px;height:12px;border-radius:3px}
.rtop span{margin-left:auto;font-size:14px;color:var(--mute)}
.hops{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.hops span{font-size:13px;font-weight:600;border:1.5px solid var(--line);border-radius:999px;padding:5px 10px;background:#fff}
.hops span:first-child{border-color:var(--ink)}
.hops span.end{background:var(--c);border-color:var(--c);color:#fff}
.hops i{font-style:normal;color:#B5B0A5;font-size:13px}
.board ol{list-style:none;margin:0;padding:0;counter-reset:b}
.board li{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px dashed var(--line);counter-increment:b}
.board li:before{content:counter(b);font:italic 800 20px/1 var(--cond);width:18px;color:var(--mute)}
.board li i{width:12px;height:12px;border-radius:3px}.board li span{flex:1;font-weight:600}
.board li small{color:var(--mute);font-size:12px}.board li b{font:italic 800 26px/1 var(--cond)}

/* toasts & confetti */
#toasts{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:80;display:flex;flex-direction:column;gap:8px;align-items:center;width:min(520px,calc(100vw - 24px));pointer-events:none}
.toast{background:var(--ink);color:#fff;padding:12px 16px;border-radius:8px;font-size:15px;box-shadow:0 12px 30px -12px rgba(0,0,0,.5);animation:hop .25s;transition:opacity .4s,transform .4s;text-align:center}
.toast.big{background:var(--acc);font-size:17px}
.toast.out{opacity:0;transform:translateY(8px)}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:90;overflow:hidden}
.confetti i{position:absolute;top:-12px;width:9px;height:14px;animation:fall linear forwards}
@keyframes fall{to{top:105%;transform:rotate(720deg) translateX(40px)}}

/* responsive */
@media (max-width:1000px){
  .lobgrid{grid-template-columns:1fr 1fr}.setup{grid-column:1/-1;grid-row:1}
  .resgrid{grid-template-columns:1fr}
}
@media (max-width:760px){
  .land{grid-template-columns:1fr;gap:20px;padding:20px 18px 40px;align-items:start}
  .hero h1{font-size:58px}.hero p{font-size:17px}
  .lob,.res{padding:16px 14px 40px}
  .lobgrid{grid-template-columns:1fr}.roomcard{grid-row:2}
  .rcode{font-size:60px}.qr{width:140px;height:140px}
  .settings{grid-template-columns:1fr}
  .pimg{height:80px}.pt{font-size:20px}
  .card{padding:16px}
  .track{padding:6px 8px}
  .trow{grid-template-columns:72px 1fr 64px;gap:8px;height:24px}
  .tname{font-size:13px}.tname i{display:none}
  .trow.lead .tname:after{display:none}
  .tok{width:26px;height:20px;margin-top:-10px;font-size:12px}
  .tstat{font-size:12px}.tstat em.on{display:none}
  .hud{padding:8px 10px;gap:8px}
  .goalbtn{font-size:16px;max-width:58vw;order:1}
  .hright{order:2}.hud .back{order:3}.hud .clicks{order:4;margin-left:auto}
  .crumbs{order:5;flex-basis:100%;font-size:12px}
  .donebar,.watchbar{order:6;flex-basis:100%;font-size:14px}
  .trow.thead{height:16px;font-size:9px}.trow.thead .tstat{display:none}
  .trow{height:22px}
  .clock{font-size:22px}
  .art{padding:18px 16px 100px}
  .abody{font-size:16px}
  .abody table.infobox,.abody figure,.abody .thumb,.abody .vertical-navbox,.abody .sidebar{float:none;width:auto;max-width:100%;margin:0 0 14px}
  .abody table{display:block;overflow-x:auto}
  .cdn{font-size:90px}
}

/* ---------- upgrades: par, modes, heat, replay ---------- */
.parline{display:flex;align-items:center;gap:10px;margin:12px 0 4px;font-size:14px;color:var(--mute)}
.par{font-family:var(--cond);font-style:italic;text-transform:uppercase;font-size:20px;color:#fff;background:var(--ink);padding:2px 10px;border-radius:4px;white-space:nowrap}
.par.solving{background:var(--line);color:var(--mute);animation:pulse 1s ease-in-out infinite alternate}
@keyframes pulse{from{opacity:.5}to{opacity:1}}
.parchip{font-family:var(--cond);font-weight:700;font-style:italic;text-transform:uppercase;background:var(--ink);color:#fff;border-radius:4px;padding:3px 8px;font-size:15px;white-space:nowrap}
.mcards.three{grid-template-columns:1fr auto 1fr auto 1fr}
.mcards.three .pt{font-size:18px}
.pcard.cp{border-color:#7950F2}.pcard.cp .pk{background:#7950F2;color:#fff}
.modes{margin:16px 0 4px}
.modes .seg{flex-wrap:wrap}
.mdesc{margin:8px 0 0;font-size:14px;color:var(--mute)}
.banned{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;font-size:12px}
.banned s{background:#F1EEE7;border-radius:999px;padding:2px 8px;color:var(--mute)}
.banned span{color:var(--mute);padding:2px 4px}
.teamwins{display:flex;gap:8px;align-items:center;margin-top:8px;font-family:var(--cond);font-weight:700;text-transform:uppercase}
.teamwins span{padding:3px 10px;border-radius:4px;color:#fff}
.t0 .teamwins,.teamwins .t0{background:#FF5A1F}.teamwins .t1{background:#2F6BFF}
.racers li.team.t0{box-shadow:inset 4px 0 #FF5A1F;padding-left:8px}
.racers li.team.t1{box-shadow:inset 4px 0 #2F6BFF;padding-left:8px}
.trow.team.t0 .tname{box-shadow:inset 3px 0 #FF5A1F;padding-left:6px}
.trow.team.t1 .tname{box-shadow:inset 3px 0 #2F6BFF;padding-left:6px}
.trow.ko{opacity:.35}
.tstat .mild{color:#9FD3FF}
.tstat .heat{color:hsl(calc(210 - 200 * var(--h)),90%,65%);font-weight:600}
.tstat .heat i{font-style:normal;font-size:10px;margin-left:3px}
.tstat .up{color:#FF8A5B}.tstat .dn{color:#7FB2FF}
.tstat .cpk{display:block;font-size:10px;color:#B9A8FF;letter-spacing:.04em;text-transform:uppercase}
.goalbtn .then{margin:0 4px}
a.wl.ban{color:var(--mute);text-decoration:line-through;border-bottom:0;cursor:not-allowed}
.banner{margin-top:10px;display:inline-block;padding:6px 12px;border-radius:6px;font-weight:600;color:#fff;background:var(--ink);margin-right:8px}
.banner.t0{background:#FF5A1F}.banner.t1{background:#2F6BFF}.banner.ko{background:#6B6F78}.banner.champ{background:linear-gradient(90deg,#F2B705,#FF5A1F)}
.route em{font-style:normal;font-size:12px;margin-left:6px;padding:1px 6px;border-radius:4px;background:#F1EEE7;color:var(--mute)}
.route em.beat{background:#12B886;color:#fff}.route em.match{background:var(--ink);color:#fff}
.route.solver .rtop i{background:repeating-linear-gradient(90deg,#999 0 4px,transparent 4px 7px)!important;height:3px;width:18px;border-radius:0}
.route.solver .hops span{border-style:dashed}
.replay{margin:0 auto 20px;max-width:1132px}
.rpscroll{overflow:auto;max-height:420px;margin-top:10px;border:1px solid var(--line);border-radius:8px;background:#FBFAF7}
.replay svg{display:block}
.pline{fill:none;stroke-width:3;stroke-linejoin:round;stroke-linecap:round;opacity:.85}
.solverline{fill:none;stroke:#9A9A9A;stroke-width:2;stroke-dasharray:5 4}
.rn circle{fill:#fff;stroke:var(--ink);stroke-width:2}
.rn.root circle{fill:var(--ink)}
.rn.goal circle{fill:var(--acc);stroke:var(--acc)}
.rn text{font:600 11px var(--ui);fill:var(--ink);paint-order:stroke;stroke:#FBFAF7;stroke-width:3px}
.rdot{stroke:#fff;stroke-width:2.5;transition:transform .45s cubic-bezier(.3,.7,.3,1);filter:drop-shadow(0 1px 2px rgba(0,0,0,.3))}
.rpbar{display:flex;align-items:center;gap:12px;margin-top:10px;flex-wrap:wrap}
.rpbar input{flex:1;min-width:140px;accent-color:var(--acc)}
.rpbar #rptime{font-family:var(--cond);font-weight:700;font-size:18px;min-width:44px}
.rpkey{font-size:12px;color:var(--mute);display:flex;align-items:center;gap:6px}
.rpkey i{display:inline-block;width:20px;border-top:2px dashed #9A9A9A}
@media (max-width:760px){.mcards.three{grid-template-columns:1fr}.mcards.three .arrow{display:none}.parline{flex-wrap:wrap}}
.res.done .rk .clock{font:inherit;display:inline;color:var(--acc)}
.res.done .rtop .watchbtn{margin-left:auto;padding:4px 12px;font-size:13px}
.res.done .rtop span .hot,.res.done .rtop span .warm,.res.done .rtop span .mild,.res.done .rtop span .heat{color:var(--acc)}
.oncur{font-size:14px;color:var(--mute);margin-top:4px;padding-left:22px}
.rlabel.gap{margin-top:22px}
.mini{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:10px 0;font-weight:600}
.mini span{border:1.5px solid var(--ink);border-radius:999px;padding:3px 10px;font-size:14px}
.mini span.cp{border-color:#7950F2;color:#7950F2}.mini span.g{background:var(--acc);border-color:var(--acc);color:#fff}
.mini i{color:var(--mute);font-style:normal}

/* ---------- party: power-ups, reactions, sound, TV ---------- */
.tvland{background:none;border:1.5px dashed var(--line);border-radius:8px;padding:10px 12px;text-align:left;font-size:13px;color:var(--mute);line-height:1.35}
.tvland b{color:var(--ink);display:block;font-size:14px}.tvland:hover{border-color:var(--ink)}
.tvlink{margin-top:12px;font-size:13px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:6px}
.tvlink .live{width:8px;height:8px;border-radius:50%;background:#12B886;box-shadow:0 0 0 3px rgba(18,184,134,.2)}
.settings .full{grid-column:1/-1}
.pwr{border:2px solid var(--ink);background:var(--hl);border-radius:999px;padding:6px 13px;font:italic 800 17px/1 var(--cond);text-transform:uppercase;letter-spacing:.03em;animation:pwrpulse 1.6s ease-in-out infinite}
@keyframes pwrpulse{50%{box-shadow:0 0 0 5px rgba(255,227,110,.45)}}
.pwrpop{position:absolute;right:18px;top:calc(100% + 8px);width:min(340px,calc(100vw - 24px));background:#fff;border:2px solid var(--ink);border-radius:8px;padding:12px;box-shadow:0 18px 30px -18px rgba(0,0,0,.5);animation:hop .2s;z-index:30}
.pwrpop b{font:italic 800 22px/1 var(--cond);text-transform:uppercase}.pwrpop p{margin:4px 0 10px;font-size:14px;color:var(--mute)}
.pwrlist{display:flex;flex-direction:column;gap:6px}
.pwrlist .chip{display:flex;align-items:center;gap:8px;padding:10px 12px;font-size:15px;text-align:left}
.pwrlist .chip i{width:12px;height:12px;border-radius:3px}.pwrlist .chip small{margin-left:auto;color:var(--mute);font-weight:500}
.tstat .pw{font-size:13px;opacity:.9}
.trow.fogged .tok{filter:blur(1.5px);box-shadow:0 0 0 3px rgba(255,255,255,.5)}
.art.fogged .abody{filter:blur(7px);transition:filter .3s}
#fogtag{position:fixed;left:50%;top:45%;transform:translate(-50%,-50%);z-index:40;background:rgba(22,24,29,.88);color:#fff;padding:14px 20px;border-radius:10px;font:italic 800 26px/1 var(--cond);text-transform:uppercase;pointer-events:none}
#fogtag b{color:var(--hl)}
#peekpop{position:fixed;right:16px;top:50%;transform:translateY(-50%);z-index:45;width:min(320px,calc(100vw - 32px));background:var(--asph);color:#fff;border-radius:10px;padding:14px 16px;box-shadow:0 20px 40px -18px rgba(0,0,0,.6);animation:hop .2s}
#peekpop .pk{font:700 11px/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--hl);margin-bottom:8px}
#peekpop .pc{font:italic 800 30px/1 var(--cond);text-transform:uppercase;margin:4px 0 8px}
#peekpop .crumbs{flex-wrap:wrap;white-space:normal;font-size:12px;color:#A6ABB5}#peekpop .crumbs span.cur{color:#fff}
.toast.hit{background:#7950F2}
#dock{position:fixed;right:14px;bottom:14px;z-index:70;display:flex;align-items:center;gap:8px}
#dock[hidden]{display:none}
#dock .db{width:44px;height:44px;border-radius:50%;border:2px solid var(--ink);background:#fff;font-size:20px;line-height:1;display:grid;place-items:center;box-shadow:0 6px 14px -8px rgba(0,0,0,.5)}
#dock .emos{display:none;gap:4px;background:#fff;border:2px solid var(--ink);border-radius:999px;padding:4px 6px;box-shadow:0 6px 14px -8px rgba(0,0,0,.5)}
#dock.open .emos{display:flex}
#dock .emos button{border:0;background:none;font-size:24px;width:38px;height:38px;border-radius:50%}
#dock .emos button:hover{background:#F1EEE7;transform:scale(1.15)}
#dock.tv #emobtn,#dock.tv .emos{display:none}
.floatemo{position:fixed;bottom:60px;z-index:85;pointer-events:none;display:flex;flex-direction:column;align-items:center;animation:floatup 2.8s cubic-bezier(.2,.6,.4,1) forwards}
.floatemo span{font-size:46px;line-height:1}
.floatemo small{margin-top:2px;color:#fff;font:700 11px/1 var(--ui);padding:3px 6px;border-radius:4px}
.tvmode .floatemo span{font-size:84px}.tvmode .floatemo small{font-size:16px;padding:4px 8px}
@keyframes floatup{0%{transform:translateY(20px) scale(.5);opacity:0}12%{transform:translateY(0) scale(1.1);opacity:1}100%{transform:translateY(-60vh) scale(1);opacity:0}}
#sndhint{position:fixed;left:16px;bottom:16px;z-index:70;background:var(--hl);color:var(--ink);font-weight:700;font-size:14px;padding:8px 12px;border-radius:6px;animation:pulse 1s ease-in-out infinite alternate}

/* TV */
body.tvmode.s-tv{background:var(--asph);color:#fff}
.tvwrap{min-height:100vh;display:flex;flex-direction:column}
.tvlob{max-width:1500px;width:100%;margin:0 auto;padding:3vh 3vw;flex:1;display:flex;flex-direction:column}
.tvtop{display:flex;justify-content:space-between;align-items:center;margin-bottom:3vh}
.tvmode .tvtop .brand{font-size:40px}.tvmode .brand .mark{border-color:#fff}
.tvmeta{font:italic 800 26px/1 var(--cond);text-transform:uppercase;color:#A6ABB5}
.tvmain{display:grid;grid-template-columns:minmax(300px,30%) 1fr;gap:4vw;flex:1;align-items:start}
.tvjoin{background:#fff;color:var(--ink);border-radius:14px;padding:28px;text-align:center}
.tvqr{width:100%;max-width:340px;aspect-ratio:1;display:block;margin:0 auto 18px}
.tvjoin .rlabel{justify-content:center;margin:10px 0 6px}
.tvurl{font:700 22px/1.2 var(--ui);overflow-wrap:anywhere}
.tvcode{font:italic 800 110px/.9 var(--cond);letter-spacing:.06em;color:var(--acc)}
.tvinfo .rlabel{color:#8A8F99;font-size:14px}.tvinfo .rlabel span{color:#fff}
.tvppl{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:4vh}
.tvp{background:var(--asph2);border-radius:10px;padding:14px;display:flex;align-items:center;gap:12px;border-left:5px solid var(--c);animation:hop .3s}
.tvp i{width:42px;height:42px;border-radius:50%;background:var(--c);display:grid;place-items:center;font:italic 800 24px/1 var(--cond);font-style:normal;flex:none}
.tvp b{font:italic 800 26px/1 var(--cond);text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tvp small{margin-left:auto;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--hl)}
.tvempty{grid-column:1/-1;font-size:24px;color:#A6ABB5;padding:22px;border:2px dashed var(--asph3);border-radius:10px}
.tvinfo .matchup .pcard{color:var(--ink)}.tvinfo .arrow:before{border-color:#fff}
.tvinfo .parline{color:#A6ABB5;font-size:17px}.tvinfo .par{background:#fff;color:var(--ink)}
.tvwait{margin-top:4vh;font:italic 800 34px/1 var(--cond);text-transform:uppercase;color:#A6ABB5}.tvwait b{color:#fff}
.tvmode .track{position:static}
.tvrace{flex:1;display:grid;grid-template-columns:1fr 380px;gap:18px;padding:18px;min-height:0}
.tvgrid{display:grid;grid-template-columns:repeat(var(--cols),1fr);grid-template-rows:repeat(var(--rows),minmax(150px,1fr));gap:14px;min-height:0}
.tile{position:relative;overflow:hidden;background:var(--asph2);border-radius:12px;border-top:6px solid var(--c);padding:16px 18px;display:flex;flex-direction:column;gap:6px;min-width:0}
.tbg{position:absolute;inset:0;background:center/cover no-repeat;opacity:.22;filter:grayscale(.3);mask-image:linear-gradient(90deg,transparent 20%,#000);-webkit-mask-image:linear-gradient(90deg,transparent 20%,#000);transition:opacity .4s}
.tile>*:not(.tbg){position:relative}
.ttop{display:flex;align-items:center;gap:10px}.ttop i{width:14px;height:14px;border-radius:4px;background:var(--c)}
.ttop b{font:italic 800 26px/1 var(--cond);text-transform:uppercase}
.ttop span{margin-left:auto;color:#A6ABB5;font-size:15px}.ttop em{font:italic 800 30px/1 var(--cond);color:#fff}
.tcur{font:italic 800 clamp(26px,2.8vw,48px)/.95 var(--cond);text-transform:uppercase;overflow-wrap:anywhere;margin-top:auto}
.tdesc{color:#A6ABB5;font-size:15px;min-height:1em}
.tfoot{display:flex;align-items:center;gap:10px}.tfoot .tstat{font-size:17px}.tfoot .tstat .pl{font-size:26px}
.tpw{margin-left:auto;font:italic 800 16px/1 var(--cond);text-transform:uppercase;background:var(--hl);color:var(--ink);padding:4px 8px;border-radius:4px}
.tpath .crumbs,.tpath{font-size:13px;color:#8A8F99}.tpath span.cur{color:#fff}
.tile.fin{background:linear-gradient(160deg,var(--asph2),color-mix(in srgb,var(--c) 35%,var(--asph2)))}
.tile.quit{opacity:.45}
.tile.fog>*:not(.tfog){filter:blur(5px)}
.tfog{position:absolute!important;inset:0;display:grid;place-items:center;font:italic 800 40px/1 var(--cond);text-transform:uppercase;color:#fff;background:rgba(160,170,190,.25)}
.tvside{background:var(--asph2);border-radius:12px;padding:18px;display:flex;flex-direction:column;min-height:0;overflow:hidden}
.tvclock{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.tvclock .rlabel{margin:0;color:#8A8F99}
.tvclock .clock{font-size:54px}
.tvside .mini span{border-color:#fff;color:#fff}.tvside .mini span.g{border-color:var(--acc)}.tvside .mini .parchip{background:#fff;color:var(--ink);border:0}
.tvhead{min-height:90px;margin:12px 0 16px;padding:14px;background:var(--asph);border-radius:10px;border-left:5px solid var(--acc)}
.tvhead .hl{font:italic 800 30px/1.02 var(--cond);text-transform:uppercase;animation:hop .35s}
.tvside>.rlabel{color:#8A8F99}
.feed{list-style:none;margin:0;padding:0;overflow:hidden;flex:1}
.feed li{display:flex;gap:10px;padding:7px 0;border-bottom:1px solid var(--asph3);font-size:16px;animation:hop .3s}
.feed time{color:#7A7F89;font-variant-numeric:tabular-nums;font-size:13px;padding-top:2px;flex:none}
.feed li.k-move{color:#A6ABB5}.feed li.k-finish,.feed li.k-close{color:var(--hl)}
@media (max-width:1000px){.tvrace{grid-template-columns:1fr}.tvmain{grid-template-columns:1fr}.tvppl{grid-template-columns:repeat(2,1fr)}}
.ic{width:1em;height:1em;vertical-align:-.14em;flex:none}
#dock .db .ic{width:22px;height:22px}
.tvhead .ic,.tfog .ic,#fogtag .ic{stroke-width:2.8}
#dock .db{color:var(--ink)}
@media (max-width:760px){#toasts{bottom:72px!important}}
.toast.earn{background:var(--hl);color:var(--ink)}