/* _shared/ui/core.css — the core look for every game's menus and screens (the menu kit, ui/screens.js) + the HUD of round
   games (.ah-*). Class names are the first template's (its ui.css is where they come from), so every game shares one house
   style: chunky display font, primary/accent colours, dark panel pills with a thick bottom border, drop-shadowed text,
   big touch targets. THEMING: every brand colour is a custom property below; these :root values are the default look
   (a game.json without `brand`); ui/brandui.js overrides them from game.json `brand.palette` (core/brand.js
   paletteVars) and sets --font-display and the backdrop class. Player colours stay fixed: P1 gold #ffd23f, P2 cyan
   #4ec5f1, P3 pink #ff6fae, P4 green #7ed957, and place colours (gold / silver / bronze). A template adds its own
   stylesheet after this one for anything else. */
:root{
  --bg:#0b1020; --bg-lo:#070a18; --bg-hi:#22306a; --bg-mid:#1a2450; --glow:#3aa0ff; --ink:#1b2350;
  --panel:#232e5c; --panel-lo:#1a2350; --edge:#3d4d8f;
  --btn-hi:#3a4fa8; --btn-lo:#26357a; --btn-fhi:#4a61c8; --btn-flo:#2e3f8f;
  --primary:#ffd23f; --primary-hi:#fff6c0; --primary-lo:#ff9d2f; --primary-ink:#7a3b00;
  --accent:#4ec5f1; --accent-ink:#15506a; --pod-hi:#ffe9a0; --pod-lo:#ff9d6a; --pod-mid:#7a3fd0; --pod-deep:#1a1450; --space-hi:#3a1a8a; --space-lo:#0a0520; --space-accent:#ff6fff;
  --text:#eaf1ff; --text2:#dfe8ff; --muted:#9fb4ff;
  --rb2:#6ff08f; --rb3:#4ec5f1; --rb4:#e9b8ff; --rb5:#ff9ed8; --rb-ink:#2a0f40;   /* the winner's colour cycle */
  --font-display:system-ui,-apple-system,"Segoe UI",sans-serif; --display-spacing:normal; --fs:1;
  --font-num:system-ui,-apple-system,"Segoe UI",sans-serif;
}
@keyframes hxBump{0%{transform:scale(1.5)}100%{transform:scale(1)}}
@keyframes hxSpin{0%{transform:rotate(0) scale(1.4)}100%{transform:rotate(360deg) scale(1)}}
@keyframes hxShake{0%{margin-left:-1px}50%{margin-left:1px}}
@keyframes hxPop{0%{opacity:0;transform:translateX(-50%) scale(.3)}25%{opacity:1;transform:translateX(-50%) scale(1.15)}70%{opacity:1;transform:translateX(-50%) translateY(-.3em) scale(1)}100%{opacity:0;transform:translateX(-50%) translateY(-1em) scale(.9)}}
@keyframes hxCount{0%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(-12deg)}25%{opacity:1;transform:translate(-50%,-50%) scale(1.15) rotate(4deg)}45%{transform:translate(-50%,-50%) scale(1) rotate(0)}88%{opacity:1;transform:translate(-50%,-50%) scale(.96)}100%{opacity:0;transform:translate(-50%,-50%) scale(.9)}}
@keyframes hxGo{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}30%{opacity:1;transform:translate(-50%,-50%) scale(1.3)}75%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}100%{opacity:0;transform:translate(-50%,-50%) scale(2)}}
@keyframes hxRainbow{to{background-position:200% 0}}
@keyframes hxFlash{50%{opacity:.45}}
@keyframes pulse{50%{opacity:.35}}
/* ============================================================== MENUS */
#ui{position:fixed;inset:0;display:none;z-index:10}
#ui img[hidden]{display:none!important}
#ui.on{display:block}
#ui.on:not(.overlay){background:var(--bg-lo)}   /* solid under the fade-in: never flash a stale race frame */
body.menu-open #touch{display:none!important}
#confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:20}
.scr{position:absolute;inset:0;overflow:hidden auto;animation:scrIn .28s ease-out;
  padding:max(2.5vmin,env(safe-area-inset-top)) max(3vmin,env(safe-area-inset-right)) max(2.5vmin,env(safe-area-inset-bottom)) max(3vmin,env(safe-area-inset-left))}
@keyframes scrIn{from{opacity:0;transform:scale(1.02)}}
.bg-dark{background:radial-gradient(ellipse at 50% 30%,var(--bg-hi),var(--bg-lo) 78%)}
.bg-dark::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:var(--pat-dark-op);background:var(--pat-dark);background-size:var(--pat-dark-size);animation:var(--pat-dark-anim)}
@keyframes stripes{to{background-position:18vmin 0}}
.bg-art{background:var(--bg);overflow:hidden}
.bg-art::before{content:"";position:absolute;inset:-20px;background:var(--pat-menu),var(--menu-bg)}   /* no key art ships (the old one showed real people) */
.bg-art::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,color-mix(in srgb,var(--bg-lo) 88%,transparent) 0%,color-mix(in srgb,var(--bg-lo) 60%,transparent) 45%,color-mix(in srgb,var(--bg-lo) 5%,transparent) 75%)}
.bg-art>*{position:relative;z-index:1}
.bg-podium{background:radial-gradient(ellipse at 50% 20%,var(--pod-hi) 0%,var(--pod-lo) 25%,var(--pod-mid) 60%,var(--pod-deep) 100%)}
body:not(.bd-sunburst) .bg-podium::before{content:"";position:absolute;inset:0;pointer-events:none;background:var(--pat-menu);opacity:.8}   /* a branded game's backdrop pattern behind its podium */
.bg-space{background:radial-gradient(ellipse at 50% 40%,var(--space-hi),var(--space-lo) 75%)}
.res{background:color-mix(in srgb,var(--bg-lo) 45%,transparent)}

/* headings + text logo */
.scr h2{font-size:calc(clamp(24px,6.2vmin,64px) * var(--fs));font-weight:900;line-height:1;color:var(--primary);-webkit-text-stroke:.035em var(--primary-ink);paint-order:stroke fill;
  text-shadow:0 .08em 0 rgba(0,0,0,.45);letter-spacing:.01em}
.shead{display:flex;align-items:baseline;gap:.8em;flex-wrap:wrap;margin-bottom:2vmin}
.shead small{display:flex;align-items:center;gap:.35em;font-size:clamp(12px,2.3vmin,22px);letter-spacing:.12em;color:var(--muted)}
.shead small .face{width:1.4em;height:1.4em}
img.mini{width:1.5em;height:1.5em;border-radius:50%}
.txtlogo{display:flex;flex-direction:column;align-items:center;line-height:.9;font-weight:900;letter-spacing:-.02em;filter:drop-shadow(0 .06em 0 rgba(0,0,0,.5))}
.txtlogo .o{font-size:calc(clamp(56px,17vmin,190px) * var(--fs));background:linear-gradient(180deg,#fff 5%,var(--primary) 50%,var(--primary-lo) 90%);-webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-stroke:.03em var(--primary-ink)}
.txtlogo .r{margin-top:.1em;font-size:clamp(20px,5.6vmin,62px);color:#fff;background:linear-gradient(180deg,#ff5d4a,#c22532);padding:.08em .5em .12em;
  transform:skew(-10deg) rotate(-2deg);border-radius:.18em;box-shadow:0 .12em 0 #6a0d14,0 0 0 .08em #fff;letter-spacing:.06em}
.txtlogo.sm .o{font-size:clamp(34px,8.5vmin,96px)}.txtlogo.sm .r{font-size:clamp(13px,2.9vmin,32px)}
/* the title comes from game.json strings.title (≤ 40 chars): longer titles step down and wrap */
.txtlogo .o{max-width:92vw;text-align:center;overflow-wrap:anywhere}
.txtlogo.long .o{font-size:clamp(40px,11vmin,130px)}.txtlogo.xlong .o{font-size:clamp(30px,7.5vmin,90px)}
.txtlogo.sm.long .o{font-size:clamp(26px,6vmin,70px)}.txtlogo.sm.xlong .o{font-size:clamp(20px,4.5vmin,52px)}
.scr-menu .txtlogo .o{text-align:left;max-width:48vw}
.tlogo .tagline{margin-top:.6em;font-size:clamp(14px,2.8vmin,30px);font-weight:900;color:#fff;letter-spacing:.04em;text-align:center;max-width:90vw;
  -webkit-text-stroke:.03em var(--ink);paint-order:stroke fill;text-shadow:0 .08em 0 rgba(0,0,0,.5)}

/* buttons */
.mbtn{pointer-events:auto;cursor:pointer;font:inherit;font-weight:900;display:flex;align-items:center;gap:.55em;color:var(--text);
  font-size:calc(clamp(16px,3.4vmin,34px) * var(--fs));padding:.42em .9em;min-height:44px;border-radius:.6em;background:var(--panel);
  border:.12em solid var(--edge);border-bottom-width:.28em;text-shadow:0 .08em 0 rgba(0,0,0,.4);
  transition:transform .14s cubic-bezier(.2,1.8,.4,1),border-color .12s,background .12s;position:relative}
.mbtn i{width:1.5em;height:1.5em;display:grid;place-items:center;flex:none}.mbtn i svg{width:100%;height:100%}
.mbtn.big{background:linear-gradient(180deg,var(--btn-hi),var(--btn-lo))}
.mbtn.sm{font-size:clamp(12px,2.2vmin,20px)}
.mbtn.focus{border-color:var(--primary);background:linear-gradient(180deg,var(--btn-fhi),var(--btn-flo));color:#fff;transform:scale(1.06);
  box-shadow:0 0 0 .08em color-mix(in srgb,var(--primary) 35%,transparent),0 0 1.1em color-mix(in srgb,var(--primary) 45%,transparent)}
.mbtn.focus::after{content:"▶";position:absolute;left:-1.1em;color:var(--primary);font-size:.8em;animation:nudgeR .6s ease-in-out infinite alternate}
.mbtn:active{transform:translateY(.1em) scale(.98);border-bottom-width:.14em}
@keyframes nudgeR{to{transform:translateX(.25em)}}
.backbtn{pointer-events:auto;cursor:pointer;position:absolute;left:3vmin;bottom:2.5vmin;font:inherit;font-size:clamp(12px,2.3vmin,20px);letter-spacing:.1em;color:var(--muted);
  background:var(--panel-lo);border:.12em solid var(--edge);border-bottom-width:.25em;border-radius:.6em;padding:.45em .9em;min-height:40px}
.backbtn.focus{border-color:var(--primary);color:#fff}
.res-btns{display:flex;gap:1.2em;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:2vmin}
.res-btns.bottom{position:absolute;left:0;right:0;bottom:4vmin}

/* ---------- backdrops: game.json brand.backdrop → body.bd-<name> (src/brandui.js). The :root values are the
   starter's sunburst. Every pattern tiles seamlessly (animations move by whole tiles). */
:root{
  --title-bg:radial-gradient(ellipse at 50% 35%,var(--glow),var(--bg-mid) 70%);
  --pat-title:repeating-conic-gradient(from 0deg at 50% 60%,#fff 0 2deg,transparent 2deg 12deg);
  --pat-anim:spin 40s linear infinite; --pat-op:.12; --pat-inset:-50%; --pat-tf:none; --pat-mask:none;
  --menu-bg:radial-gradient(ellipse at 70% 40%,var(--glow),var(--bg-mid) 70%);
  --pat-menu:repeating-conic-gradient(from 0deg at 70% 45%,rgba(255,255,255,.07) 0 2deg,transparent 2deg 12deg);
  --pat-dark:repeating-linear-gradient(-35deg,#fff 0 2.5vmin,transparent 2.5vmin 9vmin); --pat-dark-size:auto; --pat-dark-op:.07; --pat-dark-anim:stripes 6s linear infinite;
}
body.bd-stripes{
  --pat-title:repeating-linear-gradient(45deg,#fff 0 25%,transparent 0 50%) 0 0/24vmin 24vmin; --pat-anim:bdSlide24 3s linear infinite; --pat-op:.1; --pat-inset:0;
  --title-bg:linear-gradient(160deg,var(--bg-mid) 0 30%,var(--glow) 30% 36%,var(--bg-mid) 36% 42%,var(--accent-ink) 42% 100%);
  --pat-menu:linear-gradient(115deg,transparent 0 55%,color-mix(in srgb,var(--primary) 55%,transparent) 55% 59%,transparent 59% 62%,color-mix(in srgb,var(--accent) 45%,transparent) 62% 66%,transparent 66%);
  --menu-bg:linear-gradient(160deg,var(--bg-mid),var(--bg-hi) 60%,var(--glow));
  --pat-dark:repeating-linear-gradient(45deg,#fff 0 25%,transparent 0 50%); --pat-dark-size:12vmin 12vmin; --pat-dark-anim:bdSlide12 4s linear infinite;
}
body.bd-checker{
  --pat-title:conic-gradient(#fff 25%,transparent 0 50%,#fff 0 75%,transparent 0) 0 0/14vmin 14vmin; --pat-anim:bdSlide28 6s linear infinite; --pat-op:.1; --pat-inset:-30%; --pat-tf:rotate(-9deg);
  --pat-mask:linear-gradient(180deg,transparent 22%,#000 60%);
  --title-bg:radial-gradient(ellipse at 50% 30%,var(--glow),var(--bg-mid) 75%);
  --pat-menu:conic-gradient(rgba(255,255,255,.08) 25%,transparent 0 50%,rgba(255,255,255,.08) 0 75%,transparent 0) 0 0/9vmin 9vmin;
  --menu-bg:linear-gradient(180deg,var(--bg-mid),var(--glow));
  --pat-dark:conic-gradient(#fff 25%,transparent 0 50%,#fff 0 75%,transparent 0); --pat-dark-size:8vmin 8vmin; --pat-dark-op:.05; --pat-dark-anim:bdSlide16 8s linear infinite;
}
body.bd-dots{
  --pat-title:radial-gradient(circle,#fff 0 17%,transparent 19%) 0 0/3.6vmin 3.6vmin; --pat-anim:bdSlide7 5s linear infinite; --pat-op:.2; --pat-inset:0;
  --pat-mask:radial-gradient(ellipse at 15% 20%,#000,transparent 60%),radial-gradient(ellipse at 90% 85%,#000,transparent 55%);
  --title-bg:radial-gradient(circle at 30% 30%,var(--glow),var(--bg-hi) 45%,var(--bg-mid) 80%);
  --pat-menu:radial-gradient(circle,color-mix(in srgb,var(--primary) 28%,transparent) 0 18%,transparent 20%) 0 0/2.8vmin 2.8vmin;
  --menu-bg:radial-gradient(circle at 75% 40%,var(--glow),var(--bg-mid) 65%);
  --pat-dark:radial-gradient(circle,#fff 0 16%,transparent 18%); --pat-dark-size:3vmin 3vmin; --pat-dark-op:.08; --pat-dark-anim:bdSlide6 6s linear infinite;
}
body.bd-stars{
  --pat-title:radial-gradient(circle,#fff 0 .12vmin,transparent .2vmin) 0 0/9vmin 11vmin,radial-gradient(circle,#fff 0 .18vmin,transparent .28vmin) 4vmin 6vmin/17vmin 13vmin,radial-gradient(circle,var(--primary-hi) 0 .25vmin,transparent .4vmin) 11vmin 2vmin/29vmin 23vmin;
  --pat-anim:bdTwinkle 3.5s ease-in-out infinite alternate; --pat-op:.9; --pat-inset:0;
  --title-bg:radial-gradient(ellipse at 50% 110%,var(--glow),transparent 45%),radial-gradient(ellipse at 50% 30%,var(--bg-hi),var(--bg-lo) 80%);
  --pat-menu:radial-gradient(circle,#fff 0 .12vmin,transparent .2vmin) 0 0/9vmin 11vmin,radial-gradient(circle,#fff 0 .2vmin,transparent .3vmin) 4vmin 6vmin/19vmin 15vmin;
  --menu-bg:radial-gradient(ellipse at 75% 45%,var(--bg-hi),var(--bg-lo) 75%);
  --pat-dark:radial-gradient(circle,#fff 0 .15vmin,transparent .25vmin); --pat-dark-size:7vmin 9vmin; --pat-dark-op:.5; --pat-dark-anim:none;
}
body.bd-grid{
  --pat-title:linear-gradient(var(--accent) 0 .35vmin,transparent .35vmin) 0 0/100% 8vmin,linear-gradient(90deg,var(--accent) 0 .35vmin,transparent .35vmin) 0 0/8vmin 100%;
  --pat-anim:bdRun 1.2s linear infinite; --pat-op:.55; --pat-inset:48% -60% -30% -60%; --pat-tf:perspective(40vh) rotateX(62deg);
  --pat-mask:linear-gradient(180deg,transparent,#000 35%);
  --title-bg:linear-gradient(180deg,var(--bg-lo) 0%,var(--bg-mid) 38%,var(--pod-mid) 48%,var(--bg-lo) 48.4%,var(--bg-lo) 100%);
  --pat-menu:linear-gradient(color-mix(in srgb,var(--accent) 22%,transparent) 0 2px,transparent 2px) 0 0/100% 6vmin,linear-gradient(90deg,color-mix(in srgb,var(--accent) 22%,transparent) 0 2px,transparent 2px) 0 0/6vmin 100%;
  --menu-bg:linear-gradient(180deg,var(--bg-lo),var(--bg-mid) 70%,var(--pod-mid));
  --pat-dark:linear-gradient(#fff 0 1px,transparent 1px),linear-gradient(90deg,#fff 0 1px,transparent 1px); --pat-dark-size:5vmin 5vmin; --pat-dark-op:.05; --pat-dark-anim:none;
}
@keyframes bdSlide24{to{background-position:24vmin 0}}
@keyframes bdSlide12{to{background-position:12vmin 0}}
@keyframes bdSlide28{to{background-position:28vmin 14vmin}}
@keyframes bdSlide16{to{background-position:16vmin 8vmin}}
@keyframes bdSlide7{to{background-position:7.2vmin 3.6vmin}}
@keyframes bdSlide6{to{background-position:6vmin 3vmin}}
@keyframes bdTwinkle{from{opacity:.55}to{opacity:1}}
@keyframes bdRun{to{background-position:0 8vmin,0 0}}

/* ---------- title */
.scr-title{padding:0;cursor:pointer;background:var(--bg)}
.scr-title .art{position:absolute;inset:0;overflow:hidden}
.scr-title .art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;animation:kenburns 14s ease-in-out infinite alternate}
@keyframes kenburns{from{transform:scale(1.02)}to{transform:scale(1.1) translate(-1%,1%)}}
.scr-title .art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,color-mix(in srgb,var(--bg-lo) 0%,transparent) 45%,color-mix(in srgb,var(--bg-lo) 35%,transparent) 62%,color-mix(in srgb,var(--bg-lo) 85%,transparent) 100%)}
.scr-title .lines{position:absolute;inset:var(--pat-inset);opacity:var(--pat-op);background:var(--pat-title);animation:var(--pat-anim);mix-blend-mode:screen;transform:var(--pat-tf);transform-origin:50% 0;-webkit-mask:var(--pat-mask);mask:var(--pat-mask)}
@keyframes spin{to{transform:rotate(360deg)}}
.spark{position:absolute;width:3vmin;height:3vmin;z-index:1;animation:twinkle 2.4s ease-in-out infinite;pointer-events:none;
  background:radial-gradient(circle,#fff 0 12%,transparent 13%),conic-gradient(from 45deg,transparent 0 20deg,#fff 22deg 23deg,transparent 25deg 110deg,#fff 112deg 113deg,transparent 115deg 200deg,#fff 202deg 203deg,transparent 205deg 290deg,#fff 292deg 293deg,transparent 295deg);
  -webkit-mask:radial-gradient(circle,#000 0 40%,transparent 70%);mask:radial-gradient(circle,#000 0 40%,transparent 70%)}
@keyframes twinkle{0%,100%{opacity:0;transform:scale(.3) rotate(0)}50%{opacity:1;transform:scale(1.2) rotate(45deg)}}
.scr-title .tlogo{position:absolute;left:0;right:0;bottom:calc(6vmin + 2.2em);display:grid;place-items:center;animation:logoBob 2.6s ease-in-out infinite}
.scr-title .tlogo img{max-width:min(88vw,1100px);max-height:38vh;display:none;filter:drop-shadow(0 .6vmin 1.2vmin rgba(0,0,0,.35))}
.scr-title.haslogo .tlogo img{display:block}.scr-title.haslogo .txtlogo,.scr-title.haslogo .tagline{display:none}
@keyframes logoBob{50%{transform:translateY(-1.2vmin) rotate(-.6deg)}}
.scr-title .press{position:absolute;left:0;right:0;bottom:4vmin;text-align:center;font-size:calc(clamp(20px,4.6vmin,48px) * var(--fs));font-weight:900;color:#fff;
  -webkit-text-stroke:.04em var(--ink);paint-order:stroke fill;text-shadow:0 .08em 0 rgba(0,0,0,.5);animation:pressP 1.1s ease-in-out infinite}
@keyframes pressP{50%{transform:scale(1.08);color:var(--primary)}}
.gamesq{pointer-events:auto;position:absolute;left:3vmin;top:3vmin;z-index:3;font-size:clamp(11px,1.9vmin,15px);letter-spacing:.12em;color:var(--muted);text-decoration:none;
  background:color-mix(in srgb,var(--panel) 85%,transparent);border:2px solid var(--edge);border-bottom-width:4px;border-radius:.6em;padding:.5em .9em}
.stage-slot{position:relative}
.stage-slot .stage-cv{position:absolute;inset:0;width:100%;height:100%;display:block}
.scr-title .stage-slot{position:absolute;inset:0 0 30% 0}
.scr-title.noart{background:var(--title-bg)}

/* ---------- main menu */
.scr-menu{display:flex;flex-direction:column;align-items:flex-start}
/* the game's own racers fill the right of the main menu (was ~70% empty gradient) */
.scr-menu .stage-slot.mstage{position:absolute;left:40%;right:0;top:14%;bottom:10%;z-index:0}
.scr-menu>*:not(.mstage){z-index:1}
.scr-menu .mlogo{display:flex;justify-content:flex-start;margin:0 0 2vmin}
.scr-menu .mlogo img{max-height:16vh;max-width:min(46vw,640px)}.mlogo img.glogo+.txtlogo,.llogo img.glogo+.txtlogo{display:none}
.llogo img{max-height:13vh;max-width:min(60vw,640px);display:block}.llogo .txtlogo .o{font-size:clamp(28px,6vmin,64px)}
.scr-menu .txtlogo{align-items:flex-start}
.mcol{display:flex;flex-direction:column;gap:1.4vmin;align-items:stretch;width:max-content;min-width:min(42vw,440px);padding-left:1.4em}
.mcol .mbtn{font-size:calc(clamp(15px,3.25vmin,34px) * var(--fs))}   /* 6 buttons since ONLINE: 3.8vmin pushed the difficulty chips off a 1280×800 screen */
.diffs{display:flex;gap:1.2vmin;margin-top:2.5vmin;padding-left:1.4em}
.diff{pointer-events:auto;cursor:pointer;font:inherit;font-weight:900;display:flex;flex-direction:column;align-items:center;gap:.15em;color:var(--text2);
  font-size:clamp(11px,2.1vmin,20px);letter-spacing:.08em;padding:.45em .7em .35em;border-radius:.7em;background:color-mix(in srgb,var(--panel-lo) 85%,transparent);
  border:.14em solid var(--edge);border-bottom-width:.3em;min-width:5.6em;transition:transform .14s cubic-bezier(.2,1.8,.4,1)}
.diff .face{width:2.6em;height:2.6em}
.diff.sel{background:linear-gradient(180deg,var(--primary-hi),var(--primary));color:var(--primary-ink);border-color:var(--primary-hi) var(--primary-hi) var(--primary-ink)}
.diff.focus{transform:scale(1.1);box-shadow:0 0 0 .12em var(--primary),0 0 1em color-mix(in srgb,var(--primary) 60%,transparent)}
.diff:not(.sel) .face{opacity:.75}

/* ---------- character select */
.scr-select{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);grid-template-rows:auto 1fr;column-gap:3vmin}
.scr-select .shead{grid-column:1/3}
.sgrid{grid-column:1;display:grid;grid-template-columns:repeat(4,1fr);gap:1.6vmin;align-content:center;
  width:min(100%,calc((100vh - 11em) * 1.45));justify-self:center;padding-bottom:5vmin}
.rtile{pointer-events:auto;cursor:pointer;font:inherit;font-weight:900;display:flex;flex-direction:column;align-items:center;gap:.2em;padding:.4em .2em .3em;
  background:color-mix(in srgb,var(--panel-lo) 80%,transparent);border:.14em solid var(--edge);border-bottom-width:.3em;border-radius:.8em;color:var(--text2);
  font-size:clamp(11px,2.1vmin,20px);transition:transform .15s cubic-bezier(.2,1.8,.4,1),border-color .12s}
.rtile img{width:100%;aspect-ratio:1;border-radius:50%;display:block}
.rtile{min-width:0}
.rtile span{display:block;max-width:100%;white-space:normal;text-align:center;line-height:1.05;overflow-wrap:anywhere;font-size:calc(1em * var(--fs))}
.rtile.sel{background:color-mix(in srgb,var(--rc) 45%,var(--panel-lo));border-color:#fff}
.rtile.focus{transform:scale(1.1);border-color:var(--primary);box-shadow:0 0 0 .12em var(--primary),0 0 1.2em color-mix(in srgb,var(--primary) 55%,transparent);z-index:2}
.scr-select.chosen .rtile.sel{animation:hxBump .5s cubic-bezier(.2,2,.4,1)}
.spanel{grid-column:2;grid-row:2;display:grid;grid-template-rows:1fr auto auto;min-height:0;border-radius:1.2em;
  background:radial-gradient(ellipse at 50% 70%,color-mix(in srgb,var(--accent) 28%,transparent),color-mix(in srgb,var(--panel-lo) 50%,transparent) 70%);box-shadow:inset 0 0 0 .14em color-mix(in srgb,var(--muted) 25%,transparent);padding:1.5vmin 2vmin 2vmin}
.spanel .stage-slot{min-height:0}
.sinfo h3{font-size:calc(clamp(22px,5.4vmin,56px) * var(--fs));font-weight:900;line-height:1;-webkit-text-stroke:.04em #fff;paint-order:stroke fill;text-shadow:0 .07em 0 rgba(0,0,0,.4)}
.sinfo p{font-weight:700;font-size:clamp(11px,2.1vmin,19px);color:var(--text2);margin:.35em 0 .6em;line-height:1.3;min-height:2.6em}
.stats{display:grid;gap:.35em}
.stat{display:flex;align-items:center;gap:.6em;font-size:clamp(11px,2vmin,18px);letter-spacing:.1em;color:var(--muted)}
.stat span{width:4.2em}
.stat .bar{display:flex;gap:.25em;flex:1}
.stat .bar i{flex:1;height:.8em;border-radius:.3em;background:rgba(255,255,255,.14);transform:skew(-14deg)}
.stat.spd .bar i.on{background:#ff5d4a}.stat.acc .bar i.on{background:var(--primary)}.stat.trn .bar i.on{background:#6ff08f}
.gobtn{pointer-events:auto;cursor:pointer;justify-self:end;margin-top:1.2vmin;font:inherit;font-weight:900;font-size:calc(clamp(18px,4vmin,40px) * var(--fs));color:#1b3a10;
  padding:.3em 1.1em;border-radius:.6em;background:linear-gradient(180deg,#9dff7a,#3fcf4f);border:.12em solid #eaffd8;border-bottom:.28em solid #1f7a2a;min-height:44px}
.gobtn.focus{transform:scale(1.1);box-shadow:0 0 0 .1em var(--primary),0 0 1em color-mix(in srgb,var(--primary) 60%,transparent)}

/* ---------- loading */
.scr-loading{display:grid;place-items:center}
.load{display:flex;flex-direction:column;align-items:center;gap:2vmin}
.lget{font-size:calc(clamp(24px,6vmin,60px) * var(--fs));font-weight:900;color:var(--primary);-webkit-text-stroke:.04em var(--primary-ink);paint-order:stroke fill}
.dots{display:flex;gap:.5em}.dots i{width:.8em;height:.8em;border-radius:50%;background:#fff;animation:dot 1s ease-in-out infinite}
.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}
@keyframes dot{50%{transform:translateY(-.6em);background:var(--primary)}}

/* ---------- results (overlay: the race keeps going behind) */
.scr-results{display:grid;place-items:center}
.rpanel{width:min(94vw,max(760px,98vmin));background:color-mix(in srgb,var(--bg) 86%,transparent);border-radius:1.2em;padding:2.2vmin 3vmin 2.4vmin;box-shadow:0 0 0 .16em color-mix(in srgb,var(--primary) 55%,transparent),0 1em 3em rgba(0,0,0,.5);
  animation:panelIn .45s cubic-bezier(.2,1.6,.4,1)}
@keyframes panelIn{from{transform:translateY(20vh) scale(.8);opacity:0}}
.rhead{display:flex;align-items:center;gap:1em}
.rhead h2{font-size:calc(clamp(26px,7vmin,70px) * var(--fs))}
.rhead p{font-size:clamp(13px,2.6vmin,24px);color:var(--text2);margin-top:.2em}
.rhead>div:nth-child(2){flex:1;min-width:0}
.rport{width:clamp(56px,13vmin,120px);height:clamp(56px,13vmin,120px);border-radius:50%;box-shadow:0 0 0 .2em var(--primary);animation:hxBump .6s .2s cubic-bezier(.2,2,.4,1) both}
.rbadge{font-size:calc(clamp(40px,11vmin,110px) * var(--fs));font-weight:900;line-height:1;color:var(--primary);-webkit-text-stroke:.04em var(--ink);paint-order:stroke fill;text-shadow:0 .07em 0 rgba(0,0,0,.5)}
.rbadge sup{font-size:.38em;vertical-align:top;position:relative;top:.25em}
.p2 .rbadge{color:#e9f0ff}.p3 .rbadge{color:#ffa24a}.p4 .rbadge{color:#8fd3ff}
.p1 .rhead h2{animation:rainbowC 1.6s linear infinite;-webkit-text-stroke-color:var(--rb-ink)}
@keyframes rainbowC{0%,100%{color:var(--primary)}20%{color:var(--rb2)}40%{color:var(--rb3)}60%{color:var(--rb4)}80%{color:var(--rb5)}}
.rlist{list-style:none;margin-top:1.5vmin;display:grid;gap:.25em;font-size:clamp(13px,2.6vmin,24px)}
.rlist li,.stand li{display:flex;align-items:center;gap:.6em;padding:.12em .6em;border-radius:.6em;background:color-mix(in srgb,var(--panel) 55%,transparent)}
.rlist li.me,.stand li.me{background:linear-gradient(90deg,color-mix(in srgb,var(--primary) 55%,transparent),color-mix(in srgb,var(--primary-lo) 30%,transparent));box-shadow:0 0 0 .1em var(--primary)}
.rlist .pl,.stand .pl{width:2.4em;color:var(--text2);font-size:1em}
.rlist .pl sup{font-size:.55em}
.rlist li.top1 .pl{color:var(--primary)}.rlist li.top2 .pl{color:#e9f0ff}.rlist li.top3 .pl{color:#ffa24a}
.rlist img,.stand img{width:1.5em;height:1.5em;border-radius:50%}
.rlist .nm,.stand .nm{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rlist .tm{font-variant-numeric:tabular-nums;color:var(--text2);font-size:.85em}
.rlist .tm.est{opacity:.6}
.rlist .racing{color:var(--muted);font-style:normal;animation:pulse 1s ease-in-out infinite}
.rlist .gain,.stand .gain{font-style:normal;color:#6ff08f;width:2.4em;text-align:right}

/* ---------- cup standings */
.scr-standings{display:flex;flex-direction:column;align-items:center}
.scr-standings .shead{align-self:stretch}
.cstrip{display:flex;gap:1.6vmin;justify-content:center;margin-bottom:2vmin}
.cstep{position:relative;width:clamp(80px,17vmin,170px);border-radius:.6em;overflow:hidden;background:var(--panel-lo);border:.12em solid var(--edge);opacity:.7}
.cstep .cthumb{aspect-ratio:16/9;background:linear-gradient(160deg,var(--c1,#4ec5f1),var(--c2,#232e5c))}
.cstep img{width:100%;height:100%;object-fit:cover;display:block}
.cstep span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-size:clamp(9px,1.6vmin,14px);line-height:1.1;padding:.2em .4em;overflow:hidden;overflow-wrap:anywhere}
.cstep.done{opacity:.55}.cstep.done b{position:absolute;right:.3em;top:.1em;color:#6ff08f;font-size:clamp(16px,3.4vmin,32px);-webkit-text-stroke:.05em #0b3a14}
.cstep.next{opacity:1;border-color:var(--primary);transform:scale(1.1);box-shadow:0 0 1em color-mix(in srgb,var(--primary) 50%,transparent)}
.stand{width:min(88vw,max(620px,80vmin))}
.stand ol{list-style:none;position:relative;height:calc(8 * 1.75em);font-size:clamp(12px,2.6vmin,24px)}
.stand li{position:absolute;left:0;right:0;height:1.55em;top:calc(var(--i) * 1.75em);transition:top .8s cubic-bezier(.3,1.3,.5,1)}
.stand .pts{width:2.2em;text-align:right;font-variant-numeric:tabular-nums;color:var(--primary)}
.stand li.up .pts{animation:hxBump .5s .2s}
.scr-standings .res-btns{margin-top:2.5vmin}

/* ---------- podium */
.scr-podium{padding:0}
.stage-slot.full{position:absolute;inset:0}
.podtop{position:absolute;left:50%;top:3vmin;transform:translateX(-50%);width:max-content;max-width:94vw;text-align:center;padding:1.2vmin 3vmin 1.4vmin;
  border-radius:1em;background:color-mix(in srgb,var(--bg) 72%,transparent);box-shadow:0 0 0 .14em color-mix(in srgb,var(--primary) 55%,transparent),0 .6em 2em rgba(0,0,0,.35)}   /* a plate: the title reads over any glow (confetti avoids it) */
.podtop h2{font-size:calc(clamp(26px,7.5vmin,76px) * var(--fs));-webkit-text-stroke:.045em var(--primary-ink)}
.podtop p{font-size:clamp(14px,3vmin,30px);color:#fff;text-shadow:0 .08em 0 rgba(0,0,0,.5);margin-top:.3em}

/* ---------- pause + settings + controls panels */
.scr-pause{display:grid;place-items:center}
.ppanel{display:flex;flex-direction:column;align-items:stretch;gap:1.6vmin;background:color-mix(in srgb,var(--bg) 86%,transparent);border-radius:1.2em;padding:3vmin 5vmin;
  box-shadow:0 0 0 .16em color-mix(in srgb,var(--muted) 40%,transparent);animation:panelIn .35s cubic-bezier(.2,1.6,.4,1)}
.ppanel h2{text-align:center;margin-bottom:1vmin}
.ppanel .mbtn{justify-content:center}
.scr-settings,.scr-controls{display:grid;place-items:center}
.setp{width:min(94vw,max(760px,98vmin));background:color-mix(in srgb,var(--bg) 80%,transparent);border-radius:1.2em;padding:2.4vmin 3.5vmin;box-shadow:0 0 0 .16em color-mix(in srgb,var(--muted) 35%,transparent)}
.setp.wide{width:min(96vw,980px)}
.setp h2{text-align:center;margin-bottom:1.5vmin}
.opts{display:grid;gap:1vmin}
.opt{display:flex;align-items:center;gap:.5em;padding:.3em .7em;border-radius:.7em;border:.12em solid transparent;background:color-mix(in srgb,var(--panel) 55%,transparent);
  pointer-events:auto;cursor:pointer;font-size:clamp(13px,2.6vmin,24px);min-height:44px}
.opt.focus{border-color:var(--primary);background:color-mix(in srgb,var(--btn-hi) 70%,transparent)}
.opt .lbl{flex:1;min-width:6em;display:flex;flex-direction:column}
.opt .lbl small{font-size:.55em;color:var(--muted);font-weight:700;letter-spacing:.04em}
.opt .pct{width:3em;text-align:right;color:var(--primary)}
.opt .val{min-width:6em;text-align:center;color:var(--primary)}
.nudge{pointer-events:auto;cursor:pointer;flex:none;width:1.9em;height:1.9em;min-width:32px;min-height:32px;font:inherit;font-size:.85em;border-radius:.45em;background:var(--panel);color:var(--text2);
  border:2px solid var(--edge);border-bottom-width:4px}
.nudge:active{border-bottom-width:2px;transform:translateY(2px)}
.meter{pointer-events:auto;cursor:pointer;flex:0 1 12em;height:1.1em;border-radius:.6em;touch-action:none;background:var(--panel-lo);box-shadow:inset 0 0 0 2px var(--edge);overflow:hidden}
.meter i{display:block;height:100%;transform-origin:left;background:linear-gradient(90deg,var(--accent),var(--primary))}
.ctab{width:100%;border-collapse:separate;border-spacing:0 .5vmin;font-size:clamp(11px,2.2vmin,20px)}
.ctab thead th{color:var(--muted);letter-spacing:.14em;font-size:.75em;text-align:left;padding:0 .4em}
.ctab tbody th{text-align:left;color:var(--primary);padding:.2em .6em;white-space:nowrap;background:color-mix(in srgb,var(--panel) 55%,transparent);border-radius:.5em 0 0 .5em}
.ctab td{padding:.2em .4em;background:color-mix(in srgb,var(--panel) 55%,transparent)}
.ctab td:last-child{border-radius:0 .5em .5em 0}
.ctab td small{color:var(--muted)}
kbd{display:inline-block;background:var(--panel);border:2px solid var(--edge);border-bottom-width:5px;border-radius:.45em;padding:.12em .5em;margin:.1em .15em;
  font:inherit;font-size:.85em;color:#fff;min-width:1.8em;text-align:center}
.pad{display:inline-grid;place-items:center;min-width:1.8em;height:1.8em;border-radius:50%;margin:.1em .15em;font-size:.8em;color:#fff;background:#3a3f52;
  box-shadow:inset 0 -.18em 0 rgba(0,0,0,.35),0 0 0 2px rgba(255,255,255,.25)}
.pad.a{background:#3fbf4f}.pad.b{background:#e0453a}.pad.x{background:#3a7ae0}.pad.y{background:#e8b91a}
.pad.sh,.pad.trig,.pad.st{border-radius:.5em;padding:0 .45em;background:#4a5068}.pad.trig{border-radius:.5em .5em .9em .9em}
.pad.dpad{background:#2a2e3c;font-size:1em}.pad.stick{background:radial-gradient(circle at 40% 35%,#6a7088,#2a2e3c)}
.tch{display:inline-grid;place-items:center;width:1.9em;height:1.9em;border-radius:50%;margin:.1em .15em;background:rgba(255,255,255,.16);border:2px solid rgba(255,255,255,.4);font-size:.85em}
.howto{margin-top:1.5vmin;font-size:clamp(11px,2.1vmin,19px);line-height:1.6;color:var(--text2);text-align:center}

/* ---------- 2 PLAYERS (multiplayer agent): P badges, join screen, 2P results/standings */
.pbadge{display:inline-grid;place-items:center;padding:.05em .38em;border-radius:.45em;font-weight:900;font-style:normal;font-size:.8em;line-height:1.15;letter-spacing:.02em;
  color:#1b1b2a;-webkit-text-stroke:0;text-shadow:none;vertical-align:middle;background:#ffd23f;box-shadow:0 0 0 .1em #fff,0 .12em 0 rgba(0,0,0,.35)}
.pbadge.pb2{background:#4ec5f1}
.pbadge.sm{font-size:.62em}
.pbadge.big{font-size:clamp(22px,5vmin,48px);padding:.08em .45em;border-radius:.35em}
.scr-join{display:flex;flex-direction:column;align-items:center}
.scr-join .shead{align-self:stretch}
.jcols{display:grid;grid-template-columns:1fr 1fr;gap:3vmin;width:min(94vw,1100px)}
.jp{position:relative;display:flex;flex-direction:column;gap:1.2vmin;padding:2.2vmin 2.4vmin;border-radius:1.1em;background:color-mix(in srgb,var(--bg) 72%,transparent);
  box-shadow:0 0 0 .16em color-mix(in srgb,var(--primary) 55%,transparent);font-size:clamp(13px,2.4vmin,22px)}
.jp2{box-shadow:0 0 0 .16em rgba(78,197,241,.6)}
.jp.wait{box-shadow:0 0 0 .16em color-mix(in srgb,var(--muted) 28%,transparent)}
.jp .pbadge.big{align-self:flex-start}
.jdev{display:flex;align-items:center;gap:.6em;min-height:3.2em;font-weight:900;font-size:1.25em;color:#fff}
.jdev i{width:3.4em;height:2.1em;flex:none}.jdev i svg{width:100%;height:100%}
.jpress{font-size:.8em;line-height:1.5;color:var(--text2);animation:pulse 1.1s ease-in-out infinite}
.jkeys{min-height:2.4em;font-size:.72em;line-height:1.7;color:var(--text2)}
.jp.wait .opt{opacity:.55}
.jp.pop{animation:hxBump .5s cubic-bezier(.2,2,.4,1)}
.mbtn.locked{opacity:.45;filter:saturate(.3)}
.mbtn.locked.nope,.rtile.nope{animation:hxShake .12s linear 3}
.scr-select.sel-p2 .shead h2{color:#4ec5f1;-webkit-text-stroke-color:#0a3a5a}
.rtile.taken{opacity:.4;filter:grayscale(.8);position:relative}
.rtile.taken .pbadge{position:absolute;right:.3em;top:.3em}
.rhead.mp{justify-content:space-between;flex-wrap:wrap;row-gap:.6em}
.rhead.mp>div:first-child{flex:1;min-width:14em}
.rduo{display:flex;gap:1.1em;margin-right:.4em}
.rone{display:flex;align-items:center;gap:.35em;position:relative}
.rone .pbadge{position:absolute;left:-.3em;top:-.35em;z-index:1;font-size:clamp(12px,2.4vmin,22px)}
.rone .rport{width:clamp(44px,10vmin,92px);height:clamp(44px,10vmin,92px)}
.rone.rp2 .rport{box-shadow:0 0 0 .2em #4ec5f1}
.rpanel.mpres .rone .rbadge{font-size:clamp(30px,7.5vmin,76px)}
.rpanel.mpres .rone.pl1 .rbadge{color:var(--primary)}.rpanel.mpres .rone.pl2 .rbadge{color:#e9f0ff}.rpanel.mpres .rone.pl3 .rbadge{color:#ffa24a}.rpanel.mpres .rone.pl4 .rbadge{color:#8fd3ff}
.rlist li.me.mp2,.stand li.me.mp2{background:linear-gradient(90deg,rgba(78,197,241,.55),rgba(47,111,220,.3));box-shadow:0 0 0 .1em #4ec5f1}
.ctab.c2{font-size:clamp(10px,2vmin,18px)}
.c2h{margin:2vmin 0 .6vmin;font-size:clamp(14px,2.6vmin,24px);color:var(--primary)}
.c2h small{font-size:.65em;color:var(--muted);letter-spacing:.04em}

/* ---------- small landscape phones */
@media (max-height:520px){
  .scr h2{font-size:clamp(20px,7vmin,40px)}
  .shead{margin-bottom:1vmin}
  .scr-menu .mlogo{margin-bottom:1vmin}
  .mcol{gap:1vmin}.mcol .mbtn{font-size:clamp(14px,4.4vmin,26px);min-height:36px;padding:.25em .8em}
  .diffs{margin-top:1.4vmin}.diff .face{width:2em;height:2em}
  .sinfo p{min-height:0;margin:.2em 0 .3em}
  .rpanel{padding:1.5vmin 2.5vmin}
  .rlist{grid-template-columns:1fr 1fr;column-gap:.6em;gap:.2em .6em;font-size:clamp(11px,3.4vmin,18px)}
  .rport{width:48px;height:48px}
  .stand ol{font-size:clamp(11px,3.2vmin,18px)}
  .cstrip{margin-bottom:1vmin}
  .res-btns{margin-top:1.2vmin}
  .setp{padding:1.5vmin 3vmin}
  .opt{min-height:36px;padding:.15em .6em}
}
@media (max-aspect-ratio:1/1){
  .scr-select{grid-template-columns:1fr;grid-template-rows:auto auto 1fr}
  .spanel{grid-column:1;grid-row:3}
  .sgrid{width:100%}
}

/* ---------- ONLINE (online agent: src/online.js) — lobby list, racer select, waiting room, spectate, bars */
.pbadge.pbn{background:#4ec5f1}
.rlist li.mpn{box-shadow:0 0 0 .1em #4ec5f1;background:linear-gradient(90deg,rgba(78,197,241,.35),color-mix(in srgb,var(--panel) 55%,transparent))}
.scr-online{display:flex;flex-direction:column;align-items:center}
.scr-online .shead{align-self:stretch}
.scr-online>.lobbies{margin-top:auto}.scr-online>.res-btns{margin-bottom:auto}
.mbtn[hidden]{display:none}
.lobbies{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.4vmin;width:min(94vw,1150px);margin-top:1vmin}
.lobby{pointer-events:auto;cursor:pointer;font:inherit;font-weight:900;color:var(--text);display:flex;flex-direction:column;align-items:center;gap:1.2vmin;
  padding:2.2vmin 1.4vmin 1.8vmin;border-radius:1.1em;background:color-mix(in srgb,var(--panel-lo) 88%,transparent);border:.14em solid var(--edge);border-bottom-width:.34em;
  font-size:clamp(12px,2.3vmin,22px);transition:transform .15s cubic-bezier(.2,1.8,.4,1),border-color .12s;min-height:44px}
.lobby .lface .face{width:5.2em;height:5.2em;display:block}
.lobby .lname{font-size:calc(1.9em * var(--fs));letter-spacing:.06em;color:#fff;-webkit-text-stroke:.03em var(--bg);paint-order:stroke fill}
.lobby .lslots{display:flex;gap:.45em}
.slot{display:grid;place-items:center;width:2.6em;height:2.6em;border-radius:50%;border:.14em dashed color-mix(in srgb,var(--muted) 45%,transparent);font-style:normal;color:var(--muted);overflow:hidden;flex:none}
.slot.p{border:.14em solid #4ec5f1;box-shadow:0 0 .5em rgba(78,197,241,.55)}
.slot.p img{width:100%;height:100%;display:block}
.slot.q{border-style:solid;border-color:var(--muted);font-size:1.2em;animation:pulse 1.1s ease-in-out infinite}
.lobby .lstate{min-height:2.4em;text-align:center;font-size:.8em;letter-spacing:.08em;color:var(--primary);line-height:1.25}
.lobby.busy{border-color:#4ec5f1}
.lobby.focus{transform:scale(1.06);border-color:var(--primary);box-shadow:0 0 0 .12em var(--primary),0 0 1.4em color-mix(in srgb,var(--primary) 55%,transparent);z-index:2}
.lobby.locked{opacity:.5;filter:saturate(.35)}
.onmsg{display:none;margin-top:2vmin;max-width:min(90vw,900px);text-align:center;font-size:clamp(13px,2.6vmin,24px);color:#fff;background:rgba(255,93,115,.22);
  border-radius:.8em;padding:.6em 1.1em;box-shadow:0 0 0 .12em rgba(255,93,115,.6)}
.onmsg.on{display:block;animation:hxBump .5s cubic-bezier(.2,2,.4,1)}
.onmsg.fatal{background:color-mix(in srgb,var(--primary) 20%,transparent);box-shadow:0 0 0 .12em var(--primary)}
.scr-onselect{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);grid-template-rows:auto 1fr;column-gap:3vmin}
.scr-onselect .shead{grid-column:1/3}
.scr-onselect .shead small b.pbadge{margin:0 .15em}
.rtile.taken .pbadge.pbn{position:absolute;right:.3em;top:.3em}
.scr-onwait{display:flex;flex-direction:column;align-items:center}
.scr-onwait .shead{align-self:stretch}
.wbig{font-size:calc(clamp(22px,6vmin,62px) * var(--fs));font-weight:900;color:#fff;-webkit-text-stroke:.04em var(--ink);paint-order:stroke fill;text-shadow:0 .08em 0 rgba(0,0,0,.45);margin:.2em 0 .5em}
.wbig b{color:var(--primary);display:inline-block;min-width:1.2em;text-align:center;animation:hxBump .9s ease-in-out infinite}
.wbig.pop{animation:hxBump .5s cubic-bezier(.2,2,.4,1)}
.wplayers{display:flex;gap:2.2vmin;flex-wrap:wrap;justify-content:center}
.wp{position:relative;display:flex;flex-direction:column;align-items:center;gap:.35em;width:clamp(90px,17vmin,180px);padding:1.2vmin;border-radius:1em;
  background:color-mix(in srgb,var(--panel-lo) 85%,transparent);box-shadow:0 0 0 .14em #4ec5f1;font-weight:900;font-size:clamp(12px,2.3vmin,22px)}
.wp img{width:100%;aspect-ratio:1;border-radius:50%;display:block}
.wp .slot{width:100%;height:auto;aspect-ratio:1;font-size:2em}
.wp .pbadge{position:absolute;top:.4em;right:.4em}
.wp.me{box-shadow:0 0 0 .18em var(--primary),0 0 1.2em color-mix(in srgb,var(--primary) 50%,transparent)}
.wp.empty{box-shadow:0 0 0 .12em color-mix(in srgb,var(--muted) 30%,transparent);color:var(--muted);opacity:.7}
.wnext{display:flex;flex-direction:column;align-items:center;gap:.4em;margin-top:2vmin;font-size:clamp(11px,2vmin,18px);letter-spacing:.14em;color:var(--muted)}
.netnext{font-size:clamp(14px,3vmin,30px);font-weight:900;color:#fff;letter-spacing:.04em;margin-right:.8em}
.netnext b{color:var(--primary)}
.pnote{text-align:center;font-size:clamp(11px,2vmin,18px);color:var(--muted);margin-top:-.4em}
#netbar{position:fixed;right:1.2vmin;top:1.2vmin;z-index:12;display:flex;align-items:center;gap:.45em;pointer-events:none;
  font:800 clamp(10px,1.6vmin,14px)/1 system-ui,sans-serif;letter-spacing:.1em;color:var(--text2);background:color-mix(in srgb,var(--bg) 72%,transparent);padding:.45em .8em;border-radius:1em}
#netbar[hidden]{display:none}
#netbar .dot{width:.75em;height:.75em;border-radius:50%;background:#6ff08f;box-shadow:0 0 .5em #6ff08f}
#netbar.wait .dot{background:var(--primary);box-shadow:0 0 .5em var(--primary);animation:pulse .8s ease-in-out infinite}
#netbar.bad .dot{background:#ff5d73;box-shadow:0 0 .5em #ff5d73}
#netbar span{color:var(--muted);font-weight:700}
#netbar.race{right:auto;left:1.2vmin;top:auto;bottom:1.2vmin;opacity:.8}
body.touch #netbar.race{left:50%;transform:translateX(-50%);bottom:auto;top:.4vmin}
body.touch #netbar.race.ok{display:none}
#netspec{position:fixed;left:50%;bottom:calc(3vmin + 3.2em);transform:translateX(-50%);z-index:11;display:flex;align-items:center;gap:.6em;
  font:900 clamp(13px,2.6vmin,26px)/1.1 var(--font-display);color:#fff;background:color-mix(in srgb,var(--bg) 78%,transparent);padding:.45em .7em;border-radius:1.2em;
  box-shadow:0 0 0 .12em #4ec5f1;flex-wrap:wrap;justify-content:center;max-width:94vw}
#netspec[hidden]{display:none}
#netspec .nsw{display:flex;align-items:center;gap:.4em}
#netspec small{font-size:.6em;letter-spacing:.16em;color:var(--muted)}
#netspec img{width:1.8em;height:1.8em;border-radius:50%}
#netspec em{font-style:normal;font-size:.62em;letter-spacing:.1em;color:var(--primary);flex-basis:100%;text-align:center}
.nsb{pointer-events:auto;cursor:pointer;font:inherit;width:2.1em;height:2.1em;min-width:40px;min-height:40px;border-radius:50%;color:#fff;background:var(--panel);border:.12em solid #4ec5f1}
.nsb:active{transform:scale(.92)}
@media (max-height:520px){
  .lobby{gap:.6vmin;padding:1.4vmin 1vmin}.lobby .lface .face{width:3.4em;height:3.4em}.lobby .lname{font-size:1.5em}
}
@media (max-aspect-ratio:1/1){ .lobbies{grid-template-columns:1fr;width:min(92vw,520px)} .lobby{flex-direction:row;flex-wrap:wrap;justify-content:center} }

/* ---------- brand fonts (last: beats the `font:inherit` on buttons) */
/* display font: logo, headings, buttons, HUD banners. Numbers (times, points, scores) keep --font-num:
   the bundled display fonts are CDN subsets without tabular figures. */
#ui .scr h2,#ui .scr h3,#ui .mbtn,#ui .gobtn,#ui .backbtn,.diff span,.rtile,.lget,.podtop h2,.wbig,.lobby .lname,.press,.tagline,.txtlogo,
.shead small,.opt .lbl,.opt .val,.ctab th,.c2h,.jdev,.ppanel,.stat span,.rbadge,
/* ============================================================== round games: page + HUD (.ah-*) (ui/shell.js) */
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;background:var(--bg,#0b1020);color:var(--text);font:800 clamp(14px,2.4vmin,26px)/1.1 system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
canvas#c{display:block;width:100%;height:100%;touch-action:none}
#hud{position:fixed;inset:0;pointer-events:none;z-index:5}
#hud[hidden]{display:none}
.ah-top{position:absolute;left:0;right:0;top:1.6vmin;display:flex;justify-content:center;align-items:flex-start;gap:2vmin;padding:0 2vmin}
.ah-time{min-width:3.2em;text-align:center;font-size:calc(clamp(26px,6.5vmin,64px) * var(--fs));font-weight:900;color:#fff;-webkit-text-stroke:.04em var(--ink);paint-order:stroke fill;
  text-shadow:0 .07em 0 rgba(0,0,0,.5);font-family:var(--font-num);font-variant-numeric:tabular-nums}
.ah-time.low{color:#ff5d73;animation:hxFlash .5s steps(1) infinite}
.ah-round{position:absolute;left:2vmin;top:2vmin;font-size:clamp(11px,2vmin,18px);letter-spacing:.14em;color:var(--text2);background:color-mix(in srgb,var(--bg) 70%,transparent);
  padding:.4em .8em;border-radius:1em}
.ah-round b{color:var(--primary)}
.ah-score{position:absolute;left:0;right:0;bottom:2vmin;display:flex;justify-content:center;gap:1.6vmin;flex-wrap:wrap;padding:0 2vmin}
.ah-chip{display:flex;align-items:center;gap:.45em;padding:.25em .8em .25em .3em;border-radius:2em;background:color-mix(in srgb,var(--bg) 75%,transparent);
  box-shadow:0 0 0 .12em var(--pc,#fff);font-size:clamp(13px,2.6vmin,24px)}
.ah-chip img{width:1.9em;height:1.9em;border-radius:50%;display:block}
.ah-chip .ah-name{max-width:7em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text2);font-size:.8em}
.ah-chip .sc{min-width:1.4em;text-align:right;color:#fff;font-size:1.25em}
.ah-chip.lead .sc{color:var(--primary)}
.ah-chip.bump{animation:hxBump .4s cubic-bezier(.2,2,.4,1)}
.ah-chip .pbadge{font-size:.62em}
.ah-count{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);font-size:calc(clamp(80px,26vmin,260px) * var(--fs));font-weight:900;color:var(--primary);
  -webkit-text-stroke:.035em var(--primary-ink);paint-order:stroke fill;text-shadow:0 .06em 0 rgba(0,0,0,.45);animation:hxCount 1s ease-out both}
.ah-count.go{color:#6ff08f;-webkit-text-stroke-color:#0b3a14;animation:hxGo .9s ease-out both}
.ah-banner{position:absolute;left:50%;top:26%;transform:translateX(-50%);white-space:nowrap;font-size:calc(clamp(24px,7vmin,70px) * var(--fs));font-weight:900;color:#fff;
  -webkit-text-stroke:.04em var(--ink);paint-order:stroke fill;text-shadow:0 .07em 0 rgba(0,0,0,.5);animation:hxBump .5s cubic-bezier(.2,2,.4,1)}
.ah-help{position:absolute;left:50%;bottom:calc(2vmin + 3.2em);transform:translateX(-50%);font-size:clamp(11px,1.9vmin,17px);color:var(--text2);letter-spacing:.06em;
  background:color-mix(in srgb,var(--bg) 60%,transparent);padding:.35em .9em;border-radius:1em;white-space:nowrap}
.ah-p{position:absolute;transform:translate(-50%,-100%);font-size:clamp(10px,1.7vmin,15px);pointer-events:none}
/* the round intro + playlist strip (the match's rounds) */
.scr-intro{display:grid;place-items:center}
.ipanel{display:flex;flex-direction:column;align-items:center;gap:1.6vmin;text-align:center;width:min(92vw,900px)}
.ipanel .inum{font-size:clamp(13px,2.6vmin,24px);letter-spacing:.2em;color:var(--muted)}
.ipanel h2{font-size:calc(clamp(34px,9vmin,96px) * var(--fs))}
.ipanel p{font-size:clamp(15px,3.2vmin,30px);color:#fff;line-height:1.3;max-width:34em}
.ipanel .ikeys{font-size:clamp(11px,2vmin,18px);color:var(--text2);line-height:1.7}
.plist{display:flex;gap:1.2vmin;justify-content:center;flex-wrap:wrap;margin:1vmin 0}
.pstep{padding:.35em .8em;border-radius:.7em;background:var(--panel-lo);border:.12em solid var(--edge);font-size:clamp(11px,2vmin,18px);color:var(--text2);opacity:.75}
.pstep.done{opacity:.5}.pstep.done::after{content:" ✓";color:#6ff08f}
.pstep.next{opacity:1;border-color:var(--primary);color:#fff;transform:scale(1.08)}
.stand li.p2 {background:linear-gradient(90deg,rgba(78,197,241,.55),rgba(47,111,220,.3));box-shadow:0 0 0 .1em #4ec5f1}
.stand .pts,.rlist .sc{font-family:var(--font-num);font-variant-numeric:tabular-nums}
.rlist .sc{width:3em;text-align:right;color:var(--text2)}