/* ui.css — HUD (.hx-*) + menus (#ui .scr-*) for Orion Team Racing. UI agent owns this file.
   House style from Super Orion 2: chunky 800-weight system font, gold/pop colours, dark navy
   pills with a thick bottom border, drop-shadowed text, big touch targets. */

/* ============================================================== HUD */
#hud{font-size:clamp(14px,3.2vmin,34px);text-shadow:0 .1em 0 rgba(0,0,0,.55);color:#fff}
#hud[hidden]{display:none}
#hud .hx-tl{position:absolute;left:2.5vmin;top:2vmin;line-height:1}
.hx-lap{display:flex;align-items:baseline;gap:.2em;font-weight:900}
.hx-lap small{font-size:.6em;letter-spacing:.12em;color:#ffd23f;margin-right:.15em}
.hx-lap b{font-size:1.9em;color:#fff;-webkit-text-stroke:.03em #1b2350;paint-order:stroke fill}
.hx-lap i{font-style:normal;font-size:1.05em;color:#dfe8ff}
.hx-lap.bump b{animation:hxBump .45s cubic-bezier(.2,2,.4,1)}
.hx-time{margin-top:.15em;font-size:.72em;color:#fff;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.hx-best{font-size:.5em;color:#dff4ff;margin-top:.1em;font-variant-numeric:tabular-nums}
.hx-best:empty{display:none}
.hx-laps{list-style:none;margin-top:.15em;font-size:.5em;color:#cfdaff;font-variant-numeric:tabular-nums;line-height:1.25}
.hx-laps small{color:#9fb4ff;font-size:.85em}
.hx-laps li.best{color:#6ff08f}
/* rank list — portraits in race order down the left edge (CTR) */
.hx-ranks{position:absolute;left:2.5vmin;top:calc(2vmin + 4.4em);width:2.6em;height:calc(8 * 1.5em)}
.hx-rank{position:absolute;left:0;top:0;height:1.5em;display:flex;align-items:center;gap:.2em;
  transform:translateY(calc(var(--i,0) * 1.5em));transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
.hx-rank img{width:1.3em;height:1.3em;border-radius:50%;box-shadow:0 .08em 0 rgba(0,0,0,.45);background:#232e5c}
.hx-rank .n{width:.8em;text-align:right;font-size:.62em;color:#dfe8ff}
.hx-rank.lead .n{color:#ffd23f}
.hx-rank.me{z-index:2}
.hx-rank.me img{width:1.5em;height:1.5em;box-shadow:0 0 0 .14em #ffd23f,0 0 .6em rgba(255,210,63,.8)}
.hx-rank.me .n{color:#ffd23f;font-size:.75em}
/* position — huge, coloured by place */
.hx-place{position:absolute;right:3vmin;top:1vmin;font-size:3.3em;line-height:1;font-weight:900;color:var(--pc,#ffd23f);
  -webkit-text-stroke:.045em #1b2350;paint-order:stroke fill;text-shadow:0 .07em 0 rgba(0,0,0,.5)}
.hx-place sup{font-size:.38em;vertical-align:top;position:relative;top:.25em;margin-left:.04em}
.hx-place.bump{animation:hxBump .5s cubic-bezier(.2,2,.4,1)}
/* top centre: stars + item slot */
.hx-top{position:absolute;left:50%;top:1.6vmin;transform:translateX(-50%);display:flex;align-items:center;gap:.5em}
.hx-stars{display:flex;align-items:center;gap:.15em;font-size:1em;color:#ffd23f;background:rgba(11,16,32,.45);
  border-radius:1em;padding:.1em .5em .1em .2em;box-shadow:0 0 0 .1em rgba(255,255,255,.18)}
.hx-stars img,.hx-stars span{width:1.3em;height:1.3em;display:inline-grid;place-items:center}
.hx-stars b{min-width:1.1em;text-align:center;font-variant-numeric:tabular-nums}
.hx-stars.bump img{animation:hxSpin .5s ease-out}
.hx-stars.super{color:#fff;background:linear-gradient(90deg,#ff9d2f,#ffd23f);box-shadow:0 0 0 .1em #fff,0 0 .8em #ffd23f}
.hx-stars.super b{color:#7a3b00;text-shadow:none}
.hx-item{min-width:3.4em;min-height:3.4em;display:grid;place-items:center}
.hx-item:empty{border-radius:.7em;background:rgba(11,16,32,.4);box-shadow:inset 0 0 0 .12em rgba(255,255,255,.3)}
/* minimap */
.hx-map{position:absolute;right:2vmin;bottom:2vmin;width:clamp(110px,24vmin,230px);height:clamp(110px,24vmin,230px);opacity:.92}
/* slide charge meter + boost */
.hx-meter{position:absolute;left:50%;bottom:5vmin;width:min(38vw,380px);height:.75em;transform:translateX(-50%);
  border-radius:.4em;background:rgba(11,16,32,.55);box-shadow:0 0 0 .12em rgba(0,0,0,.45);opacity:.3;transition:opacity .15s}
.hx-meter[data-s="on"],.hx-meter[data-s="red"],.hx-meter[data-s="hot"]{opacity:1}
.hx-meter i{position:absolute;left:0;top:0;bottom:0;width:100%;border-radius:.4em;transform-origin:left;transform:scaleX(0);
  background:linear-gradient(90deg,#8fe3ff,#6ff08f 45%,#ffe14a 70%)}
.hx-meter[data-s="red"] i{background:linear-gradient(90deg,#ff9d2f,#ff3b2f);box-shadow:0 0 .6em #ff5a1f}
.hx-meter[data-s="red"]{animation:hxShake .12s linear infinite}
.hx-meter[data-s="hot"] i{background:#3a3440}
.hx-meter .red{position:absolute;top:-.14em;bottom:-.14em;border-radius:.3em;box-shadow:inset 0 0 0 .13em rgba(255,70,50,.95)}
.hx-meter .pips{position:absolute;left:50%;top:-1.05em;transform:translateX(-50%);display:flex;gap:.3em}
.hx-meter .pips u{display:block;width:.6em;height:.6em;border-radius:50%;background:rgba(255,255,255,.28)}
.hx-meter .pips u.on{background:#b54dff;box-shadow:0 0 .45em #b54dff}
.hx-boost{position:absolute;left:50%;bottom:2.6vmin;width:min(38vw,380px);height:.3em;transform:translateX(-50%);border-radius:.2em;background:rgba(11,16,32,.35)}
.hx-boost i{display:block;height:100%;border-radius:.2em;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,#ffb02e,#ff5a1f)}
#hud.fin .hx-meter,#hud.fin .hx-boost,#hud.fin .hx-wrong{display:none}
/* turbo pops */
.hx-pop{position:absolute;left:50%;bottom:calc(5vmin + 1.9em);transform:translateX(-50%) scale(.3);opacity:0;white-space:nowrap;
  font-size:1.35em;font-weight:900;color:#ffd23f;-webkit-text-stroke:.05em #7a3b00;paint-order:stroke fill;pointer-events:none}
.hx-pop.on{animation:hxPop .9s cubic-bezier(.2,1.8,.4,1) forwards}
.hx-pop.t2{color:#ff9d2f;font-size:1.55em}
.hx-pop.t3{font-size:1.8em;color:#e9b8ff;-webkit-text-stroke-color:#4a0a7a;text-shadow:0 0 .4em #b54dff,0 .08em 0 rgba(0,0,0,.5)}
.hx-pop.oops{color:#cfd6e6;-webkit-text-stroke-color:#2a2f3f}
/* countdown */
.hx-count{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%) scale(.2);font-size:clamp(90px,24vmin,240px);font-weight:900;
  color:#fff;opacity:0;-webkit-text-stroke:.035em #1b2350;paint-order:stroke fill;text-shadow:0 .06em 0 rgba(0,0,0,.5);pointer-events:none}
.hx-count.on{animation:hxCount .95s cubic-bezier(.2,1.9,.4,1) forwards}
.hx-count.c3{color:#ff5d4a}.hx-count.c2{color:#ff9d2f}.hx-count.c1{color:#ffd23f}
.hx-count.cgo{color:#6ff08f;animation:hxGo .9s cubic-bezier(.2,1.9,.4,1) forwards}
/* banners (LAP 2, FINAL LAP!, YOU WIN!) + secondary events + warnings */
.hx-banner{position:absolute;left:50%;top:21%;transform:translateX(-50%) scale(.6);opacity:0;font-size:clamp(26px,8vmin,80px);font-weight:900;
  color:#ffd23f;white-space:nowrap;-webkit-text-stroke:.04em #7a3b00;paint-order:stroke fill;pointer-events:none;
  transition:transform .22s cubic-bezier(.2,1.8,.4,1),opacity .2s}
.hx-banner.on{opacity:1;transform:translateX(-50%) scale(1)}
.hx-banner.final{-webkit-text-stroke-color:#2a0f40;animation:rainbowC 1s linear infinite}
.hx-event{position:absolute;left:50%;top:calc(21% + clamp(34px,10vmin,96px));transform:translateX(-50%) scale(.6);opacity:0;display:flex;align-items:center;gap:.35em;
  font-size:clamp(16px,4.2vmin,42px);font-weight:900;white-space:nowrap;padding:.2em .7em;border-radius:.8em;pointer-events:none;
  background:rgba(40,16,80,.72);color:#fff;box-shadow:0 0 0 .1em #b54dff;transition:transform .2s cubic-bezier(.2,1.8,.4,1),opacity .2s}
.hx-event img{width:1.4em;height:1.4em}
.hx-event.on{opacity:1;transform:translateX(-50%) scale(1)}
.hx-event.good{background:rgba(20,80,40,.75);box-shadow:0 0 0 .1em #6ff08f}
.hx-event.bad,.hx-event.warn{background:rgba(110,20,20,.75);box-shadow:0 0 0 .1em #ff5d4a}
.hx-warn{position:absolute;left:50%;top:calc(21% + clamp(64px,19vmin,180px));white-space:nowrap;transform:translateX(-50%);opacity:0;font-size:1.1em;font-weight:900;color:#fff;
  background:#ff3b2f;padding:.15em .7em;border-radius:.6em;box-shadow:0 0 0 .12em #fff,0 0 1em #ff3b2f;pointer-events:none}
.hx-warn.on{opacity:1;animation:hxFlash .35s steps(2) infinite}
.hx-wrong{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);display:none;flex-direction:column;align-items:center;
  font-size:clamp(22px,6vmin,60px);font-weight:900;color:#fff;-webkit-text-stroke:.04em #7a0000;paint-order:stroke fill;pointer-events:none}
.hx-wrong .arr{font-size:1.8em;line-height:1;color:#ffd23f}
.hx-wrong.on{display:flex;animation:hxFlash .6s steps(2) infinite}
/* the core stub's plain results panel (only when menu.js is missing) */
.hx-results{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:none;min-width:min(520px,90vw);
  background:rgba(11,16,32,.82);border-radius:1em;padding:1em 1.4em;box-shadow:0 0 0 .15em rgba(255,210,63,.6)}
.hx-results.on{display:block}
.hx-results h2{text-align:center;color:#ffd23f;letter-spacing:.2em;margin-bottom:.5em}
.hx-results ol{list-style:none;font-size:.8em}
.hx-results li{display:flex;gap:1em;padding:.25em .4em;border-radius:.4em}
.hx-results li.me{background:rgba(255,210,63,.25)}
.hx-results .p{width:3em;color:#ffd23f}.hx-results .n{flex:1}.hx-results .t{font-variant-numeric:tabular-nums;color:#dfe8ff}
.hx-results .again{margin-top:.8em;text-align:center;font-size:.6em;color:#9fb4ff;animation:pulse 1.1s ease-in-out infinite}
/* solo (Time Trial): no rank list / position */
#hud.solo .hx-ranks,#hud.solo .hx-place{display:none}
/* touch: buttons own the bottom corners — move the minimap up under the position, trim the rank list */
body.touch .hx-map{bottom:auto;top:calc(1vmin + 3.6em);right:1.5vmin;width:clamp(90px,20vmin,170px);height:clamp(90px,20vmin,170px)}
body.touch .tb[data-btn=pause]{top:auto;bottom:calc(31vmin + 16vmin);right:10vmin}
body.touch .hx-meter,body.touch .hx-boost{width:min(34vw,340px)}
@media (max-height:520px){
  #hud .hx-ranks{top:calc(2vmin + 3.6em)}
  .hx-rank{height:1.3em;transform:translateY(calc(var(--i,0) * 1.3em))}
  .hx-rank img{width:1.15em;height:1.15em}.hx-rank.me img{width:1.3em;height:1.3em}
  .hx-laps{display:none}
}

/* ---------- 2P split screen (multiplayer agent): #hud = top half (P1), #hud2 = bottom half (P2).
   Each HUD is laid out inside its half; the countdown and the one minimap sit on the split line. */
#hud2{font-size:clamp(14px,3.2vmin,34px);text-shadow:0 .1em 0 rgba(0,0,0,.55);color:#fff}
#hud2[hidden]{display:none}
#hud2 .hx-tl{position:absolute;left:2.5vmin;top:2vmin;line-height:1}
#hud2.fin .hx-meter,#hud2.fin .hx-boost,#hud2.fin .hx-wrong{display:none}
.hx-pn{display:none}
body.split2 #hud{bottom:50%}
body.split2 #hud2{top:50%}
body.split2 #hud,body.split2 #hud2{font-size:clamp(12px,2.5vmin,26px)}
body.split2 #touch{display:none!important}
body.split2 .hx-pn{display:block;position:absolute;left:2.2vmin;bottom:2vmin;padding:.12em .5em;border-radius:.6em;font-weight:900;font-size:1.05em;
  color:#1b1b2a;text-shadow:none;background:#ffd23f;box-shadow:0 0 0 .12em #fff,0 .15em 0 rgba(0,0,0,.4)}
body.split2 #hud2 .hx-pn{background:#4ec5f1}
body.split2 .hx-laps{display:none}
body.split2 .hx-ranks{top:calc(2vmin + 3.9em)}
body.split2 .hx-rank{height:1.3em;transform:translateY(calc(var(--i,0) * 1.3em))}
body.split2 .hx-rank img{width:1.05em;height:1.05em}
body.split2 .hx-rank.me img{width:1.22em;height:1.22em}
body.split2 #hud2 .hx-rank.me img{box-shadow:0 0 0 .14em #4ec5f1,0 0 .6em rgba(78,197,241,.8)}
body.split2 #hud2 .hx-rank.me .n{color:#4ec5f1}
.hx-rank.mate img{box-shadow:0 0 0 .1em #ffd23f}
.hx-rank.mate.pn2 img{box-shadow:0 0 0 .1em #4ec5f1}
body.split2 .hx-place{font-size:2.9em}
body.split2 .hx-meter{bottom:4.2vmin;width:min(30vw,300px)}
body.split2 .hx-boost{bottom:2.2vmin;width:min(30vw,300px)}
body.split2 .hx-pop{bottom:calc(4.2vmin + 1.8em)}
body.split2 .ih{width:min(10vmin,84px);height:min(10vmin,84px)}
body.split2 .hx-item{min-width:2.9em;min-height:2.9em}
body.split2 .hx-banner{top:25%;font-size:clamp(22px,6vmin,60px)}
body.split2 .hx-event{top:calc(25% + clamp(28px,7vmin,66px));font-size:clamp(14px,3.2vmin,32px)}
body.split2 .hx-warn{top:calc(25% + clamp(50px,12.5vmin,120px))}
body.split2 .hx-wrong{top:62%;font-size:clamp(18px,4.6vmin,46px)}
/* one shared minimap (P1's HUD draws both players, ringed gold/cyan) in the top half's bottom-right
   corner — straddling the split it covered P2's place number; one shared countdown on the split */
body.split2 #hud .hx-map{bottom:1.5vmin;right:1.5vmin;width:clamp(96px,19vmin,190px);height:clamp(96px,19vmin,190px);z-index:3}
body.split2 #hud2 .hx-map,body.split2 #hud2 .hx-count{display:none}
body.split2 #hud .hx-count{top:100%;z-index:4}
#split{position:fixed;left:0;right:0;top:50%;height:6px;margin-top:-3px;pointer-events:none;
  background:linear-gradient(180deg,#0b1020,#26306a 50%,#0b1020);box-shadow:0 0 0 1px rgba(255,210,63,.35)}
#split[hidden]{display:none}

@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.on{display:block}
#ui.on:not(.overlay){background:#070a18}   /* 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%,#22306a,#070a18 78%)}
.bg-dark::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.07;
  background:repeating-linear-gradient(-35deg,#fff 0 2.5vmin,transparent 2.5vmin 9vmin);animation:stripes 6s linear infinite}
@keyframes stripes{to{background-position:18vmin 0}}
.bg-art{background:#0b1020;overflow:hidden}
.bg-art::before{content:"";position:absolute;inset:-20px;background:url(assets/ui/title.jpg) 60% 40%/cover;filter:blur(5px) brightness(.8) saturate(1.1)}
.bg-art::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,10,24,.88) 0%,rgba(7,10,24,.6) 45%,rgba(7,10,24,.05) 75%)}
.bg-art>*{position:relative;z-index:1}
.bg-podium{background:radial-gradient(ellipse at 50% 20%,#ffe9a0 0%,#ff9d6a 25%,#7a3fd0 60%,#1a1450 100%)}
.bg-space{background:radial-gradient(ellipse at 50% 40%,#3a1a8a,#0a0520 75%)}
.res{background:rgba(7,10,24,.45)}

/* headings + text logo */
.scr h2{font-size:clamp(24px,6.2vmin,64px);font-weight:900;line-height:1;color:#ffd23f;-webkit-text-stroke:.035em #7a3b00;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:#9fb4ff}
.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:clamp(56px,17vmin,190px);background:linear-gradient(180deg,#fff 5%,#ffd23f 50%,#ff9d2f 90%);-webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-stroke:.03em #5a2600}
.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)}

/* buttons */
.mbtn{pointer-events:auto;cursor:pointer;font:inherit;font-weight:900;display:flex;align-items:center;gap:.55em;color:#eaf1ff;
  font-size:clamp(16px,3.4vmin,34px);padding:.42em .9em;min-height:44px;border-radius:.6em;background:#232e5c;
  border:.12em solid #3d4d8f;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,#3a4fa8,#26357a)}
.mbtn.sm{font-size:clamp(12px,2.2vmin,20px)}
.mbtn.focus{border-color:#ffd23f;background:linear-gradient(180deg,#4a61c8,#2e3f8f);color:#fff;transform:scale(1.06);
  box-shadow:0 0 0 .08em rgba(255,210,63,.35),0 0 1.1em rgba(255,210,63,.45)}
.mbtn.focus::after{content:"▶";position:absolute;left:-1.1em;color:#ffd23f;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:#9fb4ff;
  background:#1a2350;border:.12em solid #3d4d8f;border-bottom-width:.25em;border-radius:.6em;padding:.45em .9em;min-height:40px}
.backbtn.focus{border-color:#ffd23f;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}

/* ---------- title */
.scr-title{padding:0;cursor:pointer;background:#0b1020}
.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,rgba(7,10,24,0) 45%,rgba(7,10,24,.35) 62%,rgba(7,10,24,.85) 100%)}
.scr-title .lines{position:absolute;inset:-50%;opacity:.12;background:repeating-conic-gradient(from 0deg at 50% 60%,#fff 0 2deg,transparent 2deg 12deg);animation:spin 40s linear infinite;mix-blend-mode:screen}
@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(78vw,1000px);max-height:36vh;display:none}
.scr-title.haslogo .tlogo img{display:block}.scr-title.haslogo .txtlogo{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:clamp(20px,4.6vmin,48px);font-weight:900;color:#fff;
  -webkit-text-stroke:.04em #1b2350;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:#ffd23f}}
.gamesq{pointer-events:auto;position:absolute;left:3vmin;top:3vmin;z-index:3;font-size:clamp(11px,1.9vmin,15px);letter-spacing:.12em;color:#9fb4ff;text-decoration:none;
  background:rgba(35,46,92,.85);border:2px solid #3d4d8f;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:radial-gradient(ellipse at 50% 35%,#3aa0ff,#1a2450 70%)}

/* ---------- main menu */
.scr-menu{display:flex;flex-direction:column;align-items:flex-start}
.scr-menu .mlogo{display:flex;justify-content:flex-start;margin:0 0 2.5vmin}
.scr-menu .mlogo img{max-height:18vh;max-width:40vw}.scr-menu .mlogo img+.txtlogo{display:none}
.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:clamp(17px,3.8vmin,38px)}
.trophies{display:flex;gap:.1em;margin-left:auto;font-style:normal}
.troph{width:1.1em;height:1.1em;position:relative}.troph svg{width:100%;height:100%}
.troph.medium svg{filter:hue-rotate(-20deg) saturate(.4) brightness(1.2)}
.troph.hard svg{filter:hue-rotate(-35deg) saturate(1.4)}
.troph b{position:absolute;right:-.3em;bottom:-.2em;font-size:.55em;color:#fff}
.diffs{display:flex;gap:1.2vmin;margin-top:3.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:#cfdaff;
  font-size:clamp(11px,2.1vmin,20px);letter-spacing:.08em;padding:.45em .7em .35em;border-radius:.7em;background:rgba(26,35,80,.85);
  border:.14em solid #3d4d8f;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,#ffe46a,#ffc21a);color:#5a3a00;border-color:#fff6c0 #fff6c0 #b37f00}
.diff.focus{transform:scale(1.1);box-shadow:0 0 0 .12em #ffd23f,0 0 1em rgba(255,210,63,.6)}
.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:rgba(26,35,80,.8);border:.14em solid #3d4d8f;border-bottom-width:.3em;border-radius:.8em;color:#dfe8ff;
  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 span{white-space:nowrap}
.rtile.sel{background:color-mix(in srgb,var(--rc) 45%,#1a2350);border-color:#fff}
.rtile.focus{transform:scale(1.1);border-color:#ffd23f;box-shadow:0 0 0 .12em #ffd23f,0 0 1.2em rgba(255,210,63,.55);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%,rgba(78,197,241,.28),rgba(26,35,80,.5) 70%);box-shadow:inset 0 0 0 .14em rgba(159,180,255,.25);padding:1.5vmin 2vmin 2vmin}
.spanel .stage-slot{min-height:0}
.sinfo h3{font-size:clamp(22px,5.4vmin,56px);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:#dfe8ff;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:#9fb4ff}
.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:#ffd23f}.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:clamp(18px,4vmin,40px);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 #ffd23f,0 0 1em rgba(255,210,63,.6)}

/* ---------- track select */
.scr-tracks{display:flex;flex-direction:column}
.tgrid{--cw:min(29vw,calc((100vh - 12em) / 1.65));display:flex;flex-wrap:wrap;justify-content:center;align-content:center;gap:2vmin 2.4vmin;flex:1;padding-bottom:6vmin}
.tcard{pointer-events:auto;cursor:pointer;width:var(--cw);border-radius:.9em;overflow:hidden;background:#1a2350;border:.16em solid #3d4d8f;border-bottom-width:.32em;
  transition:transform .16s cubic-bezier(.2,1.8,.4,1),border-color .12s;position:relative}
.tcard .thumb{position:relative;aspect-ratio:16/9;background:linear-gradient(160deg,var(--c1),var(--c2))}
.tcard .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.tcard .tname{font-weight:900;font-size:clamp(13px,2.7vmin,26px);padding:.3em .5em .05em;color:#fff;line-height:1.05}
.tcard .tsub{font-size:clamp(10px,1.8vmin,15px);padding:0 .7em .45em;color:#9fb4ff;font-variant-numeric:tabular-nums}
.tcard .tname:last-child{padding-bottom:.4em}
.tcard.focus{transform:scale(1.07);border-color:#ffd23f;box-shadow:0 0 0 .12em #ffd23f,0 0 1.4em rgba(255,210,63,.55);z-index:2}
.tcard.locked .thumb img{filter:brightness(.25) blur(3px) grayscale(.4)}
.tcard.locked .tname{color:#9fb4ff;letter-spacing:.2em}
.tcard .lockv{position:absolute;inset:0;display:grid;place-items:center}.tcard .lockv svg{width:28%;height:auto;animation:logoBob 2s ease-in-out infinite}
.tcard.nope{animation:hxShake .08s linear 5}
.tcard .gh{position:absolute;right:.4em;top:.4em;display:flex;align-items:center;gap:.25em;font-size:clamp(10px,1.8vmin,15px);background:rgba(11,16,32,.75);padding:.15em .45em;border-radius:.6em;color:#dff4ff}
.tcard .gh svg{width:1.3em;height:1.3em}
.tcard.small{--cw:auto}

/* ---------- loading */
.scr-loading{display:grid;place-items:center}
.load{display:flex;flex-direction:column;align-items:center;gap:2vmin}
.lcard .tcard{--cw:min(60vw,calc(55vh * 1.6));pointer-events:none;animation:logoBob 1.6s ease-in-out infinite}
.lget{font-size:clamp(24px,6vmin,60px);font-weight:900;color:#ffd23f;-webkit-text-stroke:.04em #7a3b00;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:#ffd23f}}

/* ---------- results (overlay: the race keeps going behind) */
.scr-results{display:grid;place-items:center}
.rpanel{width:min(94vw,max(760px,98vmin));background:rgba(11,16,32,.86);border-radius:1.2em;padding:2.2vmin 3vmin 2.4vmin;box-shadow:0 0 0 .16em rgba(255,210,63,.55),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:clamp(26px,7vmin,70px)}
.rhead p{font-size:clamp(13px,2.6vmin,24px);color:#dfe8ff;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 #ffd23f;animation:hxBump .6s .2s cubic-bezier(.2,2,.4,1) both}
.rbadge{font-size:clamp(40px,11vmin,110px);font-weight:900;line-height:1;color:#ffd23f;-webkit-text-stroke:.04em #1b2350;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:#2a0f40}
@keyframes rainbowC{0%,100%{color:#ffd23f}20%{color:#6ff08f}40%{color:#4ec5f1}60%{color:#e9b8ff}80%{color:#ff9ed8}}
.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:rgba(35,46,92,.55)}
.rlist li.me,.stand li.me{background:linear-gradient(90deg,rgba(255,210,63,.55),rgba(255,157,47,.3));box-shadow:0 0 0 .1em #ffd23f}
.rlist .pl,.stand .pl{width:2.4em;color:#dfe8ff;font-size:1em}
.rlist .pl sup{font-size:.55em}
.rlist li.top1 .pl{color:#ffd23f}.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:#dfe8ff;font-size:.85em}
.rlist .tm.est{opacity:.6}
.rlist .racing{color:#9fb4ff;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}
.ttbox{text-align:center;margin-top:1.5vmin}
.ttbox .big{font-size:clamp(40px,10vmin,100px);font-weight:900;color:#fff;font-variant-numeric:tabular-nums;-webkit-text-stroke:.03em #1b2350;paint-order:stroke fill}
.ttlaps{list-style:none;display:flex;justify-content:center;gap:1.4em;font-size:clamp(13px,2.6vmin,24px);color:#dfe8ff;font-variant-numeric:tabular-nums}
.ttlaps small{display:block;color:#9fb4ff;font-size:.6em;letter-spacing:.12em}
.ttlaps li.best{color:#6ff08f}
.ttbest{display:flex;justify-content:center;gap:2em;margin-top:1vmin;font-size:clamp(12px,2.2vmin,20px);color:#9fb4ff;flex-wrap:wrap}
.ttbest b{color:#fff;font-variant-numeric:tabular-nums}.ttbest em{color:#ffd23f;font-style:normal;animation:pulse .8s infinite}

/* ---------- 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:#1a2350;border:.12em solid #3d4d8f;opacity:.7}
.cstep img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.cstep span{display:block;font-size:clamp(9px,1.6vmin,14px);padding:.2em .4em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.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:#ffd23f;transform:scale(1.1);box-shadow:0 0 1em rgba(255,210,63,.5)}
.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:#ffd23f}
.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:0;right:0;top:3vmin;text-align:center;padding:0 3vmin}
.podtop h2{font-size:clamp(26px,7.5vmin,76px);-webkit-text-stroke:.045em #5a2600}
.podtop p{font-size:clamp(14px,3vmin,30px);color:#fff;text-shadow:0 .08em 0 rgba(0,0,0,.5);margin-top:.3em}

/* ---------- unlock */
.scr-unlock{display:grid;place-items:center}
.unl{display:flex;flex-direction:column;align-items:center;gap:2vmin;text-align:center}
.unl h2.rainbow{font-size:clamp(34px,9vmin,100px);-webkit-text-stroke:.05em #2a0f40;animation:rainbowC 1.4s linear infinite,unlIn .8s cubic-bezier(.2,1.8,.4,1);
  text-shadow:0 .06em 0 rgba(0,0,0,.5),0 0 .5em rgba(181,77,255,.8)}
@keyframes unlIn{from{transform:scale(.2) rotate(-20deg);opacity:0}}
.ucard{width:min(60vw,calc(40vh * 1.78));border-radius:1em;overflow:hidden;box-shadow:0 0 0 .2em #fff,0 0 3em #b54dff;animation:ucardIn 1s .2s cubic-bezier(.2,1.5,.4,1) both;background:linear-gradient(160deg,#2a1a6a,#ff6fff)}
.ucard img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.ucard span{display:block;font-weight:900;font-size:clamp(16px,3.4vmin,34px);padding:.25em}
@keyframes ucardIn{from{transform:perspective(600px) rotateY(180deg) scale(.4);opacity:0}}
.unl p{font-size:clamp(13px,2.6vmin,24px);color:#dfe8ff}

/* ---------- pause + settings + controls panels */
.scr-pause{display:grid;place-items:center}
.ppanel{display:flex;flex-direction:column;align-items:stretch;gap:1.6vmin;background:rgba(11,16,32,.86);border-radius:1.2em;padding:3vmin 5vmin;
  box-shadow:0 0 0 .16em rgba(159,180,255,.4);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:rgba(11,16,32,.8);border-radius:1.2em;padding:2.4vmin 3.5vmin;box-shadow:0 0 0 .16em rgba(159,180,255,.35)}
.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:rgba(35,46,92,.55);
  pointer-events:auto;cursor:pointer;font-size:clamp(13px,2.6vmin,24px);min-height:44px}
.opt.focus{border-color:#ffd23f;background:rgba(58,79,168,.7)}
.opt .lbl{flex:1;min-width:6em;display:flex;flex-direction:column}
.opt .lbl small{font-size:.55em;color:#9fb4ff;font-weight:700;letter-spacing:.04em}
.opt .pct{width:3em;text-align:right;color:#ffd23f}
.opt .val{min-width:6em;text-align:center;color:#ffd23f}
.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:#232e5c;color:#dce6ff;
  border:2px solid #3d4d8f;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:#141b3a;box-shadow:inset 0 0 0 2px #3d4d8f;overflow:hidden}
.meter i{display:block;height:100%;transform-origin:left;background:linear-gradient(90deg,#4ec5f1,#ffd23f)}
.ctab{width:100%;border-collapse:separate;border-spacing:0 .5vmin;font-size:clamp(11px,2.2vmin,20px)}
.ctab thead th{color:#9fb4ff;letter-spacing:.14em;font-size:.75em;text-align:left;padding:0 .4em}
.ctab tbody th{text-align:left;color:#ffd23f;padding:.2em .6em;white-space:nowrap;background:rgba(35,46,92,.55);border-radius:.5em 0 0 .5em}
.ctab td{padding:.2em .4em;background:rgba(35,46,92,.55)}
.ctab td:last-child{border-radius:0 .5em .5em 0}
.ctab td small{color:#9fb4ff}
kbd{display:inline-block;background:#232e5c;border:2px solid #6a7bc0;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:#dfe8ff;text-align:center}
.howto b{color:#ffd23f}.howto em{color:#e9b8ff;font-style:normal}
.redbar{display:inline-block;width:4em;height:.7em;border-radius:.3em;background:#1a2350;vertical-align:middle;position:relative;overflow:hidden;box-shadow:inset 0 0 0 2px #ff3b2f}
.redbar i{position:absolute;left:0;top:0;bottom:0;width:85%;background:linear-gradient(90deg,#8fe3ff,#6ff08f 45%,#ff9d2f 70%,#ff3b2f)}

/* ---------- 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:rgba(11,16,32,.72);
  box-shadow:0 0 0 .16em rgba(255,210,63,.55);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 rgba(159,180,255,.28)}
.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:#dfe8ff;animation:pulse 1.1s ease-in-out infinite}
.jkeys{min-height:2.4em;font-size:.72em;line-height:1.7;color:#cfdaff}
.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:#ffd23f}.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:#ffd23f}
.c2h small{font-size:.65em;color:#9fb4ff;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%}
}