*{box-sizing:border-box}[hidden]{display:none!important}body.arena-race{margin:0;color:var(--arena-ink,#242342);font-family:'Golos Text',sans-serif;background:#cceaff}canvas{display:block;width:100vw;height:100vh}
.race-header{position:absolute;top:20px;left:24px;right:24px;display:flex;justify-content:space-between;align-items:flex-start;gap:16px;z-index:2;pointer-events:none}.race-header>*{pointer-events:auto}.race-back{display:inline-flex;align-items:center;gap:8px;text-decoration:none;background:white;color:var(--arena-ink);padding:12px 17px;border-radius:14px;font-size:14px;font-weight:600}.race-back svg{width:18px;height:18px}.race-clock{background:white;padding:12px 20px;border-radius:16px;text-align:right;min-width:174px}.race-clock small{display:block;color:#65647b;font-size:12px;margin-bottom:4px}.race-clock strong{font-family:Unbounded,sans-serif;font-size:22px;font-variant-numeric:tabular-nums;letter-spacing:-.06em}
#panel{position:absolute;top:94px;left:24px;width:min(430px,calc(100vw - 48px));border-radius:24px;background:#fff;padding:26px;z-index:2;box-shadow:0 12px 35px #24234212}#panel h1{font-family:Unbounded,sans-serif;font-size:28px;line-height:1.2;letter-spacing:-.04em;margin:0 0 12px}#panel p{font-size:14px;line-height:1.6;margin:0 0 20px;color:#65647b}.race-actions{display:flex;gap:9px;flex-wrap:wrap}#status{display:block;margin-top:16px;font-size:14px;line-height:1.5;font-weight:600}#invite{border:1px solid #d3d6e5;background:#f0f3fc;color:#242342;border-radius:10px;padding:10px;width:100%;font:12px 'Golos Text',sans-serif;margin-top:10px}.invite-label{display:block;font-size:12px;color:#65647b;margin-top:18px}#receipt{font-size:12px;overflow-wrap:anywhere;color:#65647b;margin-top:12px}#panel footer{font-size:12px;color:#65647b;margin-top:18px}.race-header .race-route{background:#fff;padding:13px 20px;border-radius:16px;display:none;min-width:220px}.race-route strong{font-size:15px;display:block}.race-route span{font-size:12px;color:#65647b}.race-playing #panel{top:auto;bottom:24px;width:330px;padding:18px 20px}.race-playing #panel h1,.race-playing #intro,.race-playing #panel footer{display:none}.race-playing #status{margin-top:0}.race-playing .race-header .race-route{display:block}.race-playing #panel:has(#new-room:not([hidden])) .race-actions{margin-top:12px}#show-result{margin-top:12px}
#controls{position:absolute;bottom:24px;right:24px;display:flex;gap:5px;z-index:2}#controls button{touch-action:none;user-select:none;border:1px solid #ffffff80;background:#ffffffe6;color:#242342;border-radius:13px;min-width:42px;height:46px;font:600 16px 'Golos Text',sans-serif;cursor:pointer}#controls button:last-child{padding:0 15px}.race-result{border:0;padding:0;border-radius:28px;width:min(540px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;color:var(--arena-ink);background:white;box-shadow:0 30px 100px #24234240}.race-result::backdrop{background:#1f204b55;backdrop-filter:blur(5px)}.race-result-content{padding:32px}.race-result-close{position:absolute;right:15px;top:14px;border:0;border-radius:50%;background:#f0f3fc;color:#242342;width:32px;height:32px;font-size:22px;cursor:pointer}.race-result h2{font:700 clamp(30px,6vw,44px)/1.2 Unbounded,sans-serif;letter-spacing:-.055em;margin:12px 0}.race-result p{color:#65647b;font-size:15px;line-height:1.5;margin:0}.race-result .result-mode{font-size:13px;color:var(--arena-violet);font-weight:600}.race-result .result-time{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:24px 0;border-bottom:1px solid #e7e9f1}.result-time span{color:#65647b;font-size:14px}.result-time strong{font:600 28px Unbounded,sans-serif;letter-spacing:-.06em;font-variant-numeric:tabular-nums}.result-rows{list-style:none;padding:0;margin:4px 0 24px}.result-rows li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;border-bottom:1px solid #e7e9f1}.result-rows .player-name{display:block;font-size:14px;font-weight:600}.result-rows .player-state{display:block;font-size:12px;color:#65647b;margin-top:4px}.result-rows .finished .player-state{color:var(--arena-teal)}.result-rows .player-time{font-variant-numeric:tabular-nums;font-size:14px;font-weight:600}.result-actions{display:flex;gap:10px;flex-wrap:wrap}.result-actions a{text-decoration:none}.race-result[data-tone="victory"] h2{color:var(--arena-violet)}.race-result details{margin-top:20px;color:#65647b;font-size:12px;line-height:1.6}.race-result summary{cursor:pointer}.race-result details code{overflow-wrap:anywhere}.race-result-stripe{height:12px;background:repeating-conic-gradient(#5b40e8 0% 25%,#fff 0% 50%) 0 0/24px 24px}.race-countdown{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;pointer-events:none;color:#fff;text-shadow:0 4px 30px #24234233;font:700 96px Unbounded,sans-serif;z-index:1}
:focus-visible{outline:3px solid #f87364;outline-offset:4px}button{cursor:pointer}button:disabled{opacity:.55;cursor:wait}
@media(max-width:650px){.race-header{top:12px;left:12px;right:12px;gap:8px}.race-back{padding:11px 12px}.race-back span{display:none}.race-clock{min-width:150px;padding:9px 12px}.race-clock strong{font-size:18px}.race-header .race-route{min-width:0;padding:10px 12px;flex:1}.race-route strong{font-size:12px}.race-route span{font-size:10px}#panel{top:84px;left:12px;width:calc(100vw - 24px);padding:22px}.race-playing #panel{bottom:82px;left:12px;width:min(320px,calc(100vw - 24px));padding:12px 16px}.race-playing #panel .race-actions{margin-top:8px}#controls{bottom:14px;right:12px;left:12px;justify-content:center}.race-result-content{padding:25px 22px}.result-time strong{font-size:23px}.race-result h2{margin-top:16px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

/* Wobblz identity shares its lettering and token badge with the map catalogue. */
.race-header{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;grid-template-areas:"brand back route clock";align-items:start}
.race-brand{grid-area:brand;display:flex;align-items:center;gap:12px;min-width:0;padding:7px 12px;border-radius:16px;background:#fff;text-decoration:none;color:var(--arena-ink,#242342)}
.race-brand .wobblz-wordmark-image{display:block;flex:none}
.race-brand .wobblz-token{flex:none;white-space:nowrap}
.race-back{grid-area:back;align-self:center}
.race-header .race-route{grid-area:route;justify-self:center}
.race-clock{grid-area:clock}
.race-lobby-identity{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px}
.race-lobby-identity .wobblz-wordmark-image{display:block;max-width:calc(100% - 84px);height:auto}
.race-lobby-identity .wobblz-token{flex:none;white-space:nowrap}
.race-playing #panel .race-lobby-identity{display:none}
@media(max-width:900px){
 .race-header{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"brand back" "route clock";column-gap:12px;row-gap:8px}
 .race-brand{grid-column:1 / -1;grid-row:1;justify-self:start;max-width:calc(100% - 156px);gap:10px}
 .race-back{justify-self:end}
 .race-header .race-route{justify-self:start;min-width:0;width:100%}
 .race-clock{min-width:150px}
}
@media(max-width:650px){
 .race-header{column-gap:8px}
 .race-brand{max-width:calc(100% - 54px);padding:6px 10px;gap:8px}
 .race-brand .wobblz-wordmark-image{width:128px;height:auto}
 .race-lobby-identity{gap:12px;margin-bottom:20px}
}