/* Turbo Kart GP — presentation layer. Agent 5 (UI) owns this file.
   Identity: deep-indigo night stage, chunky ink-outlined display type (Lilita One), candy gradients
   (sun yellow → orange, cyan → blue), slanted racing banners and checkered accents. */
/* Web fonts (Lilita One + Nunito) are injected by src/ui/UI.js after the load event (never blocks startup; falls back to
   rounded system fonts offline). */

:root {
  --bg: #0b0f1a;
  --fg: #ffffff;
  --accent: #ffcc00;
  --ink: #140f33;
  --ink2: #231a5c;
  --panel-a: #3d31a8;
  --panel-b: #241b6e;
  --yellow: #ffd23f;
  --orange: #ff9a1f;
  --red: #ff3d4a;
  --pink: #ff4fb0;
  --cyan: #2fe0ff;
  --blue: #2f7dff;
  --green: #4ddb5a;
  --purple: #7b5cff;
  --display: 'Lilita One', 'Baloo 2', 'Arial Rounded MT Bold', 'Trebuchet MS', system-ui, sans-serif;
  --body: 'Nunito', 'Baloo 2', 'Arial Rounded MT Bold', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --g-sun: linear-gradient(180deg, #fffbd0 0%, #ffe45c 38%, #ffb12a 62%, #ff6a2a 100%);
  --g-ice: linear-gradient(180deg, #e8fdff 0%, #7deeff 40%, #22a8ff 62%, #3a5cff 100%);
  --g-hot: linear-gradient(180deg, #fff0f0 0%, #ff8a8a 35%, #ff3d4a 62%, #b3123c 100%);
  --g-white: linear-gradient(180deg, #ffffff 0%, #ffffff 50%, #d8dcff 100%);
  --o2: 2px 0 0 var(--ink), 1.41px 1.41px 0 var(--ink), 0 2px 0 var(--ink), -1.41px 1.41px 0 var(--ink), -2px 0 0 var(--ink), -1.41px -1.41px 0 var(--ink), 0 -2px 0 var(--ink), 1.41px -1.41px 0 var(--ink);
  --o3: 3px 0 0 var(--ink), 2.6px 1.5px 0 var(--ink), 1.5px 2.6px 0 var(--ink), 0 3px 0 var(--ink), -1.5px 2.6px 0 var(--ink), -2.6px 1.5px 0 var(--ink), -3px 0 0 var(--ink), -2.6px -1.5px 0 var(--ink), -1.5px -2.6px 0 var(--ink), 0 -3px 0 var(--ink), 1.5px -2.6px 0 var(--ink), 2.6px -1.5px 0 var(--ink);
  --o4: 4px 0 0 var(--ink), 3.7px 1.53px 0 var(--ink), 2.83px 2.83px 0 var(--ink), 1.53px 3.7px 0 var(--ink), 0 4px 0 var(--ink), -1.53px 3.7px 0 var(--ink), -2.83px 2.83px 0 var(--ink), -3.7px 1.53px 0 var(--ink), -4px 0 0 var(--ink), -3.7px -1.53px 0 var(--ink), -2.83px -2.83px 0 var(--ink), -1.53px -3.7px 0 var(--ink), 0 -4px 0 var(--ink), 1.53px -3.7px 0 var(--ink), 2.83px -2.83px 0 var(--ink), 3.7px -1.53px 0 var(--ink);
  --o6: 6px 0 0 var(--ink), 5.71px 1.85px 0 var(--ink), 4.85px 3.53px 0 var(--ink), 3.53px 4.85px 0 var(--ink), 1.85px 5.71px 0 var(--ink), 0 6px 0 var(--ink), -1.85px 5.71px 0 var(--ink), -3.53px 4.85px 0 var(--ink), -4.85px 3.53px 0 var(--ink), -5.71px 1.85px 0 var(--ink), -6px 0 0 var(--ink), -5.71px -1.85px 0 var(--ink), -4.85px -3.53px 0 var(--ink), -3.53px -4.85px 0 var(--ink), -1.85px -5.71px 0 var(--ink), 0 -6px 0 var(--ink), 1.85px -5.71px 0 var(--ink), 3.53px -4.85px 0 var(--ink), 4.85px -3.53px 0 var(--ink), 5.71px -1.85px 0 var(--ink);
  --o8: 8px 0 0 var(--ink), 7.73px 2.07px 0 var(--ink), 6.93px 4px 0 var(--ink), 5.66px 5.66px 0 var(--ink), 4px 6.93px 0 var(--ink), 2.07px 7.73px 0 var(--ink), 0 8px 0 var(--ink), -2.07px 7.73px 0 var(--ink), -4px 6.93px 0 var(--ink), -5.66px 5.66px 0 var(--ink), -6.93px 4px 0 var(--ink), -7.73px 2.07px 0 var(--ink), -8px 0 0 var(--ink), -7.73px -2.07px 0 var(--ink), -6.93px -4px 0 var(--ink), -5.66px -5.66px 0 var(--ink), -4px -6.93px 0 var(--ink), -2.07px -7.73px 0 var(--ink), 0 -8px 0 var(--ink), 2.07px -7.73px 0 var(--ink), 4px -6.93px 0 var(--ink), 5.66px -5.66px 0 var(--ink), 6.93px -4px 0 var(--ink), 7.73px -2.07px 0 var(--ink);
  --w12: 12px 0 0 #fff, 11.7px 2.67px 0 #fff, 10.81px 5.21px 0 #fff, 9.38px 7.48px 0 #fff, 7.48px 9.38px 0 #fff, 5.21px 10.81px 0 #fff, 2.67px 11.7px 0 #fff, 0 12px 0 #fff, -2.67px 11.7px 0 #fff, -5.21px 10.81px 0 #fff, -7.48px 9.38px 0 #fff, -9.38px 7.48px 0 #fff, -10.81px 5.21px 0 #fff, -11.7px 2.67px 0 #fff, -12px 0 0 #fff, -11.7px -2.67px 0 #fff, -10.81px -5.21px 0 #fff, -9.38px -7.48px 0 #fff, -7.48px -9.38px 0 #fff, -5.21px -10.81px 0 #fff, -2.67px -11.7px 0 #fff, 0 -12px 0 #fff, 2.67px -11.7px 0 #fff, 5.21px -10.81px 0 #fff, 7.48px -9.38px 0 #fff, 9.38px -7.48px 0 #fff, 10.81px -5.21px 0 #fff, 11.7px -2.67px 0 #fff;
  --panel: linear-gradient(180deg, var(--panel-a), var(--panel-b));
  --lift: inset 0 2px 0 rgba(255,255,255,.28), inset 0 -4px 0 rgba(0,0,0,.22), 0 5px 0 var(--ink), 0 12px 26px rgba(8,4,30,.45);
  --checker: repeating-conic-gradient(#fff 0 25%, #16122e 0 50%);
}

* { box-sizing: border-box; }
html { font-size: clamp(11px, calc(0.45vw + 0.9vh), 22px); }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--fg);
  font-family: var(--body); user-select: none; -webkit-user-select: none; touch-action: none; -webkit-tap-highlight-color: transparent; }
#app, #canvas-root { position: fixed; inset: 0; }
#canvas-root canvas { display: block; width: 100%; height: 100%; }
#ui-root { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
#ui-root .interactive, #ui-root button { pointer-events: auto; }
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
.ico { width: 1em; height: 1em; display: inline-block; vertical-align: middle; flex: none; }
kbd { font-family: var(--body); font-weight: 900; font-size: .85em; display: inline-block; min-width: 1.9em; padding: .12em .45em; border-radius: .38em;
  background: linear-gradient(#fff, #d7dbf5); color: var(--ink); border: 2px solid var(--ink); box-shadow: 0 3px 0 var(--ink); text-align: center; line-height: 1.25; white-space: nowrap; }

/* ── outlined gradient text: element = ink outline layer, ::after = gradient fill (needs data-t) */
.gt, .lw, .ci-name, .res-title, .pause-title, .fin-msg, .ld-name, .hi-name, .hp-num, .hp-suf, .cd, .banner span, .record-banner span {
  position: relative; display: inline-block; color: var(--ink); white-space: nowrap;
}
.gt::after, .lw::after, .ci-name::after, .res-title::after, .pause-title::after, .fin-msg::after, .ld-name::after, .hi-name::after,
.hp-num::after, .hp-suf::after, .cd::after, .banner span::after, .record-banner span::after {
  content: attr(data-t); position: absolute; inset: 0; padding: inherit; color: transparent; text-shadow: none;
  -webkit-background-clip: text; background-clip: text; background-image: var(--fill, var(--g-white));
}

/* ── layers */
.tk .layer { position: absolute; inset: 0; }
.layer-menu > *, .layer-overlay > *, .layer-loading > * { pointer-events: auto; }
.fps { position: absolute; top: .5rem; left: 50%; transform: translateX(-50%); font: 800 .95rem/1 var(--body); padding: .35rem .7rem; border-radius: 99px;
  background: rgba(10,6,30,.6); color: #b9ffcf; letter-spacing: .04em; font-variant-numeric: tabular-nums; z-index: 50; }

/* ── generic buttons & panels */
.panel { background: var(--panel); border: 3px solid var(--ink); border-radius: 1.4rem; box-shadow: var(--lift); position: relative; }
.panel::before { content: ''; position: absolute; inset: 3px 3px auto 3px; height: 40%; border-radius: 1.1rem 1.1rem 50% 50% / 1.1rem 1.1rem 1.2rem 1.2rem;
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0)); pointer-events: none; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-width: 13rem; padding: .7rem 1.8rem .8rem;
  font: 1.8rem/1 var(--display); letter-spacing: .02em; color: #fff; text-shadow: var(--o2), 0 3px 0 var(--ink);
  background: linear-gradient(180deg, #6a5cf0, #4234c4 55%, #3327a6); border: 3px solid var(--ink); border-radius: 99px;
  box-shadow: var(--lift); transition: transform .14s cubic-bezier(.3,1.6,.5,1), background .14s, color .14s; position: relative; }
.btn .ico { font-size: 1.2em; filter: drop-shadow(0 2px 0 var(--ink)); }
.btn.btn-go { background: linear-gradient(180deg, #7cf08a, #34c24a 55%, #219a38); }
.btn.btn-danger { background: linear-gradient(180deg, #ff8a8a, #ec3b4b 55%, #b8203a); }
.btn.is-focus { background: linear-gradient(180deg, #fffbd0, #ffe14a 45%, #ffae1f); color: var(--ink); text-shadow: 0 2px 0 rgba(255,255,255,.7);
  transform: scale(1.08); animation: focus-bob 1.1s ease-in-out infinite; }
.btn.is-focus .ico { filter: none; }
.btn.is-focus::after { content: ''; position: absolute; inset: -9px; border-radius: inherit; border: 3px solid #fff; opacity: .9; animation: ring-pulse 1.1s ease-out infinite; pointer-events: none; }
@keyframes focus-bob { 0%, 100% { transform: scale(1.08) translateY(0); } 50% { transform: scale(1.08) translateY(-3px); } }
@keyframes ring-pulse { 0% { transform: scale(.96); opacity: .95; } 100% { transform: scale(1.12); opacity: 0; } }

/* ── menu screens */
.scr { position: absolute; inset: 0; animation: scr-in .42s cubic-bezier(.2,.9,.25,1) both; }
.scr.is-leaving { animation: scr-out .26s ease-in both; pointer-events: none; }
@keyframes scr-in { from { opacity: 0; transform: translateX(calc(var(--dir, 1) * 60px)); } to { opacity: 1; transform: none; } }
@keyframes scr-out { to { opacity: 0; transform: translateX(calc(var(--dir, 1) * -60px)); } }
.main-list > *, .cc-row > *, .char-grid > *, .trk-grid > *, .ctl-grid > *, .cup-row > * { animation: pop-in .5s cubic-bezier(.2,1.5,.4,1) both; animation-delay: calc(var(--i, 0) * 55ms + 80ms); }
@keyframes pop-in { from { opacity: 0; translate: 0 24px; scale: .9; } to { opacity: 1; translate: 0 0; scale: 1; } }
.main-desc, .char-info, .opt-panel, .ctl-done, .opt-done { animation: fade-up .5s cubic-bezier(.2,1.2,.4,1) .25s both; }
@keyframes fade-up { from { opacity: 0; translate: 0 30px; } to { opacity: 1; translate: 0 0; } }
.layer-menu.is-launching::after { content: ''; position: absolute; inset: 0; background: #fff; animation: launch .38s ease-in forwards; }
@keyframes launch { from { opacity: 0; } to { opacity: 1; } }

/* checkered racing bands top & bottom */
.scr:not(.scr-title)::before, .scr:not(.scr-title)::after { content: ''; position: absolute; left: 0; right: 0; height: .9rem; background: var(--checker); background-size: 1.8rem 1.8rem;
  opacity: .9; animation: checker-run 1.4s linear infinite; pointer-events: none; }
.scr:not(.scr-title)::before { top: 0; box-shadow: 0 3px 0 var(--ink); }
.scr:not(.scr-title)::after { bottom: 0; box-shadow: 0 -3px 0 var(--ink); animation-direction: reverse; }
@keyframes checker-run { to { background-position: 3.6rem 0; } }

.scr-head { position: absolute; top: 2.1rem; left: 2rem; right: 2rem; display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; z-index: 2; pointer-events: none; }
.scr-head > * { pointer-events: auto; }
.head-back { width: 3.4rem; height: 3.4rem; border-radius: 50%; display: grid; place-items: center; font-size: 1.7rem; color: #fff;
  background: linear-gradient(180deg, #6a5cf0, #3327a6); border: 3px solid var(--ink); box-shadow: var(--lift); transition: transform .15s; }
.head-back:hover { transform: scale(1.1) rotate(-8deg); }
.head-logo { font: 1.5rem/1 var(--display); color: #fff; text-shadow: var(--o3), 0 4px 0 var(--ink); letter-spacing: .03em; transform: rotate(-3deg); }
.head-logo b { font-weight: 400; display: inline-block; margin-left: .2em; padding: .05em .3em .1em; color: #fff; background: var(--red); border: 2px solid var(--ink); border-radius: .35em;
  text-shadow: var(--o2); box-shadow: 0 3px 0 var(--ink); transform: rotate(6deg); }
.head-title span { display: inline-block; font: 2.5rem/1 var(--display); letter-spacing: .02em; color: #fff; text-shadow: var(--o3), 0 4px 0 var(--ink); padding: .35rem 2.2rem .45rem 1.6rem;
  background: linear-gradient(90deg, var(--red), var(--pink) 70%, #ff7ad0); border: 3px solid var(--ink); transform: skewX(-12deg); box-shadow: 0 6px 0 var(--ink), 0 14px 26px rgba(0,0,0,.35);
  border-radius: .5rem; }
.head-crumbs { display: flex; align-items: center; gap: .5rem; font: 900 1.1rem/1 var(--body); color: #fff; }
.head-crumbs span { padding: .4rem .8rem; border-radius: 99px; background: rgba(20,15,51,.7); border: 2px solid rgba(255,255,255,.25); text-transform: uppercase; letter-spacing: .06em; }
.head-crumbs i { font-style: normal; color: var(--yellow); font-size: 1.4rem; text-shadow: var(--o2); }
.scr-foot { position: absolute; right: 2rem; bottom: 2rem; z-index: 2; }
.hints { display: flex; gap: 1.6rem; font: 900 1.15rem/1 var(--body); color: #fff; text-shadow: 0 2px 0 var(--ink); }
.hint { display: flex; align-items: center; gap: .45rem; padding: .45rem .9rem .45rem .5rem; border-radius: 99px; background: rgba(20,15,51,.72); border: 2px solid rgba(255,255,255,.2); }
.gpb { font-style: normal; width: 1.7rem; height: 1.7rem; border-radius: 50%; display: grid; place-items: center; font: 900 1rem/1 var(--body); border: 2px solid var(--ink); box-shadow: 0 2px 0 var(--ink); text-shadow: none; }
.gpb-a { background: #4ddb5a; color: var(--ink); } .gpb-b { background: #ff5a5a; color: #fff; }
.is-touch .hints { display: none; }

/* ── title */
.scr-title { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 7vh; cursor: pointer; }
.layer-menu.is-title { background: radial-gradient(ellipse at 50% 120%, rgba(255,80,160,.25), transparent 60%); }
.logo { position: relative; display: flex; flex-direction: column; align-items: center; transform: rotate(-4deg); animation: logo-in 1s cubic-bezier(.2,1.6,.35,1) both, logo-float 4s ease-in-out 1s infinite; }
@keyframes logo-in { from { transform: rotate(-4deg) scale(.2) translateY(-30vh); opacity: 0; } to { transform: rotate(-4deg); opacity: 1; } }
@keyframes logo-float { 0%, 100% { transform: rotate(-4deg) translateY(0); } 50% { transform: rotate(-3deg) translateY(-8px); } }
.logo-row { display: flex; align-items: center; line-height: .82; }
.lw { font: 10.5rem/1 var(--display); letter-spacing: .01em; padding: 0 .06em; text-shadow: var(--o8), var(--w12), 0 16px 0 var(--ink), 0 22px 30px rgba(0,0,0,.45); }
.lw::after { background-image: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.95) 47%, transparent 56%), var(--g-sun); background-size: 300% 100%, 100% 100%;
  background-repeat: no-repeat; animation: shine 3.6s ease-in-out 1.2s infinite; }
.lw2::after { background-image: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.95) 47%, transparent 56%), var(--g-ice); }
.lw2 { font-size: 12.5rem; margin-top: -.5rem; }
@keyframes shine { 0% { background-position: 130% 0, 0 0; } 45%, 100% { background-position: -40% 0, 0 0; } }
.logo-gp { margin-left: .8rem; transform: rotate(10deg) translateY(.8rem); animation: gp-in .7s cubic-bezier(.2,1.8,.4,1) .6s both; }
.logo-gp b { display: block; font: 5.4rem/1 var(--display); color: #fff; padding: .45rem 1.2rem .65rem; border-radius: 1.2rem; font-weight: 400;
  background: linear-gradient(180deg, #ff8a7a, var(--red) 55%, #c0133b); border: 5px solid var(--ink); text-shadow: var(--o4), 0 5px 0 var(--ink);
  box-shadow: 0 0 0 6px #fff, 0 0 0 11px var(--ink), 0 14px 0 5px var(--ink), 0 20px 34px rgba(0,0,0,.45); }
@keyframes gp-in { from { transform: rotate(40deg) scale(0); } to { transform: rotate(10deg) translateY(.8rem); } }
.press { position: absolute; bottom: 14vh; left: 50%; transform: translateX(-50%); }
.press span { display: inline-block; white-space: nowrap; font: 2.4rem/1 var(--display); letter-spacing: .08em; color: #fff; text-shadow: var(--o3), 0 4px 0 var(--ink);
  padding: .8rem 2.4rem 1rem; border-radius: 99px; background: linear-gradient(180deg, rgba(40,28,120,.85), rgba(20,14,70,.85)); border: 3px solid var(--ink);
  box-shadow: 0 0 0 3px rgba(255,255,255,.35), 0 8px 0 var(--ink), 0 0 40px rgba(47,224,255,.35); animation: press-pulse 1.3s ease-in-out infinite; }
@keyframes press-pulse { 0%, 100% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(1.07); filter: brightness(1.25); } }
.title-foot { position: absolute; bottom: 3.5vh; left: 1rem; right: 1rem; text-align: center; font: 800 1rem/1 var(--body); color: rgba(255,255,255,.65); letter-spacing: .08em; text-transform: uppercase; }

/* ── main menu */
.main-list { position: absolute; left: 5vw; top: 50%; transform: translateY(-46%); display: flex; flex-direction: column; gap: 1.1rem; }
.mbtn { --c: var(--yellow); position: relative; display: flex; align-items: center; gap: 1.2rem; width: 30rem; height: 5rem; padding: 0 1.4rem 0 .7rem;
  background: linear-gradient(180deg, #43379f, #2a2080); border: 3px solid var(--ink); border-radius: 1.1rem; box-shadow: var(--lift);
  transform: skewX(-10deg); transition: transform .2s cubic-bezier(.3,1.6,.5,1), background .15s; }
.mbtn > * { transform: skewX(10deg); }
.mbtn-ico { width: 3.5rem; height: 3.5rem; border-radius: .8rem; display: grid; place-items: center; font-size: 2rem; color: #fff;
  background: var(--c); border: 3px solid var(--ink); box-shadow: inset 0 3px 0 rgba(255,255,255,.45), inset 0 -3px 0 rgba(0,0,0,.2); }
.mbtn-ico .ico { filter: drop-shadow(0 2px 0 var(--ink)); }
.mbtn-label { font: 2.5rem/1 var(--display); color: #fff; text-shadow: var(--o3), 0 4px 0 var(--ink); letter-spacing: .02em; }
.mbtn-arrow { margin-left: auto; font-size: 1.4rem; color: var(--ink); opacity: 0; transition: opacity .15s; }
.mbtn.is-focus { background: linear-gradient(180deg, color-mix(in srgb, var(--c) 55%, #fff), var(--c) 55%, color-mix(in srgb, var(--c) 75%, #000)); transform: skewX(-10deg) translateX(1.6rem) scale(1.05); }
.mbtn.is-focus .mbtn-ico { background: #fff; color: var(--ink); animation: ico-wiggle .6s ease-in-out infinite alternate; }
.mbtn.is-focus .mbtn-ico .ico { filter: none; }
.mbtn.is-focus .mbtn-arrow { opacity: 1; animation: arrow-nudge .5s ease-in-out infinite alternate; }
.mbtn.is-focus::after { content: ''; position: absolute; inset: -8px; border-radius: 1.5rem; border: 3px solid #fff; animation: ring-pulse 1.1s ease-out infinite; }
@keyframes ico-wiggle { from { transform: skewX(10deg) rotate(-8deg); } to { transform: skewX(10deg) rotate(8deg) scale(1.1); } }
@keyframes arrow-nudge { from { transform: skewX(10deg) translateX(0); } to { transform: skewX(10deg) translateX(6px); } }
.main-desc { position: absolute; right: 4vw; bottom: 5.8rem; width: 28rem; padding: 1.1rem 1.4rem; border-radius: 1.2rem; background: rgba(18,12,60,.78);
  border: 3px solid var(--ink); box-shadow: 0 0 0 2px rgba(255,255,255,.18), 0 10px 30px rgba(0,0,0,.4); }
.md-title { font: 1.8rem/1.1 var(--display); color: var(--yellow); text-shadow: var(--o2), 0 3px 0 var(--ink); margin-bottom: .35rem; }
.md-text { font: 800 1.2rem/1.35 var(--body); color: #e8e6ff; }

/* ── engine class */
.cc-row { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 2.4rem; padding-top: 3rem; }
.cc-card { --c: var(--green); width: 19rem; padding: 1.6rem 1.4rem 1.8rem; text-align: center; border-radius: 1.5rem; border: 3px solid var(--ink);
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 30%, #3d31a8), #241b6e 60%); box-shadow: var(--lift); transition: transform .2s cubic-bezier(.3,1.6,.5,1); position: relative; }
.cc-num { font: 6rem/1 var(--display); color: #fff; text-shadow: var(--o4), 0 6px 0 var(--ink); }
.cc-num small { font-size: .4em; margin-left: .1em; }
.cc-chev { display: flex; justify-content: center; gap: .35rem; margin: .9rem 0 .8rem; }
.cc-chev i { width: 2.2rem; height: 1.2rem; background: var(--c); clip-path: polygon(0 0, 55% 0, 100% 50%, 55% 100%, 0 100%, 45% 50%); filter: drop-shadow(0 2px 0 var(--ink)); }
.cc-chev i.off { background: rgba(255,255,255,.15); }
.cc-name { font: 2.1rem/1 var(--display); color: var(--c); text-shadow: var(--o3), 0 4px 0 var(--ink); margin-bottom: .6rem; }
.cc-desc { font: 800 1.1rem/1.35 var(--body); color: #dcd9ff; min-height: 4.2em; }
.cc-card.is-focus { transform: translateY(-1rem) scale(1.08); background: linear-gradient(180deg, color-mix(in srgb, var(--c) 65%, #fff), var(--c) 45%, color-mix(in srgb, var(--c) 55%, #000)); }
.cc-card.is-focus .cc-name { color: #fff; }
.cc-card.is-focus .cc-desc { color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.35); }
.cc-card.is-focus .cc-chev i:not(.off) { background: #fff; animation: chev 0.6s ease-in-out infinite alternate; }
.cc-card.is-focus::after, .trk-card.is-focus::after, .cup-card.is-focus::after, .char-card.is-focus::after, .opt-row.is-focus::after {
  content: ''; position: absolute; inset: -9px; border-radius: 1.8rem; border: 4px solid #fff; animation: ring-pulse 1.1s ease-out infinite; pointer-events: none; }
@keyframes chev { to { transform: translateX(4px); } }

/* ── character select */
.char-grid { position: absolute; left: 4vw; top: 50%; transform: translateY(-44%); display: grid; grid-template-columns: repeat(4, 8.6rem); gap: 1rem; }
.char-card { --c: #e8452c; --c2: #7a1d10; position: relative; height: 10.6rem; border-radius: 1.1rem; border: 3px solid var(--ink); overflow: visible;
  background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--c) 45%, #fff) 0%, var(--c) 45%, var(--c2) 100%);
  box-shadow: var(--lift); transition: transform .18s cubic-bezier(.3,1.6,.5,1); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.char-card::before { content: ''; position: absolute; inset: 0; border-radius: .9rem; background: repeating-linear-gradient(135deg, rgba(255,255,255,.1) 0 6px, transparent 6px 14px); }
.cc-face { position: absolute; left: 0; right: 0; top: .2rem; bottom: 2.3rem; display: grid; place-items: center; }
.cc-face .face { width: 8.4rem; height: 8.4rem; object-fit: contain; filter: drop-shadow(0 4px 0 rgba(20,15,51,.55)); transition: transform .2s; }
.cc-nm { position: relative; width: calc(100% + 6px); margin: 0 -3px -3px; padding: .45rem 0 .5rem; border-radius: 0 0 1.1rem 1.1rem; border: 3px solid var(--ink);
  background: var(--ink); font: 1.35rem/1 var(--display); color: #fff; letter-spacing: .03em; text-align: center; }
.char-card.is-focus { transform: scale(1.12) rotate(-2deg); z-index: 2; }
.char-card.is-focus .cc-nm { background: var(--yellow); color: var(--ink); }
.char-card.is-focus .face { transform: scale(1.12) translateY(-4px); animation: face-bob .7s ease-in-out infinite alternate; }
@keyframes face-bob { to { transform: scale(1.12) translateY(-9px) rotate(3deg); } }
.face-fallback { display: grid; place-items: center; width: 6rem !important; height: 6rem !important; border-radius: 50%; background: var(--c); border: 3px solid var(--ink);
  font: 3rem/1 var(--display); color: #fff; text-shadow: var(--o3); }
.char-info { --c: #e8452c; position: absolute; right: 4vw; bottom: 5.4rem; width: 29rem; display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; }
.ci-name { font: 5rem/1 var(--display); letter-spacing: .02em; text-shadow: var(--o6), 0 7px 0 var(--ink), 0 12px 24px rgba(0,0,0,.4); transform-origin: left center;
  --fill: linear-gradient(180deg, #fff 0%, #fff 42%, color-mix(in srgb, var(--c) 60%, #fff) 60%, var(--c) 100%); }
.ci-meta { display: flex; gap: .5rem; }
.ci-meta span { font: 900 1.05rem/1 var(--body); text-transform: uppercase; letter-spacing: .08em; padding: .4rem .8rem; border-radius: 99px; border: 2px solid var(--ink); box-shadow: 0 3px 0 var(--ink); }
.ci-species { background: #fff; color: var(--ink); }
.ci-weight { background: var(--c); color: #fff; text-shadow: var(--o2); }
.ci-tag { font: 800 1.25rem/1.3 var(--body); color: #fff; font-style: italic; text-shadow: 0 2px 0 var(--ink), 0 0 12px rgba(0,0,0,.6); }
.ci-stats { width: 100%; margin-top: .3rem; padding: .9rem 1.1rem; border-radius: 1.1rem; background: rgba(16,10,52,.82); border: 3px solid var(--ink); box-shadow: 0 0 0 2px rgba(255,255,255,.15), 0 8px 22px rgba(0,0,0,.4); display: grid; gap: .5rem; }
.stat { display: flex; align-items: center; gap: .8rem; }
.stat-l { width: 7.4rem; font: 900 1.05rem/1 var(--body); text-transform: uppercase; letter-spacing: .08em; color: #cfcaff; }
.pips { display: flex; gap: .3rem; flex: 1; }
.pips i { flex: 1; height: 1rem; border-radius: .3rem; background: rgba(255,255,255,.12); border: 2px solid rgba(0,0,0,.35); transform: skewX(-18deg); transition: background .2s, transform .25s cubic-bezier(.3,1.8,.5,1); }
.pips i.on { background: linear-gradient(180deg, #fff6a8, var(--yellow) 50%, var(--orange)); border-color: var(--ink); transform: skewX(-18deg) scaleY(1.2); }
.stat[data-stat="speed"] .pips i.on { background: linear-gradient(180deg, #ffb3b3, var(--red)); }
.stat[data-stat="accel"] .pips i.on { background: linear-gradient(180deg, #c8ffcf, var(--green)); }
.stat[data-stat="handling"] .pips i.on { background: linear-gradient(180deg, #d0f8ff, var(--cyan)); }
.stat[data-stat="weight"] .pips i.on { background: linear-gradient(180deg, #e2d6ff, var(--purple)); }
.pips i.on:nth-child(2) { transition-delay: .03s; } .pips i.on:nth-child(3) { transition-delay: .06s; } .pips i.on:nth-child(4) { transition-delay: .09s; } .pips i.on:nth-child(5) { transition-delay: .12s; }

/* ── cup select */
.cup-row { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding-top: 3rem; }
.cup-card { position: relative; display: flex; align-items: center; gap: 2rem; padding: 1.8rem 2.4rem; max-width: 92vw; border-radius: 1.8rem; border: 3px solid var(--ink);
  background: var(--panel); box-shadow: var(--lift); transition: transform .2s cubic-bezier(.3,1.6,.5,1); text-align: left; }
.cup-card.is-focus { transform: scale(1.04); background: linear-gradient(180deg, #5446d0, #33279a); }
.cup-emblem .trophy { width: 11rem; filter: drop-shadow(0 8px 0 rgba(20,15,51,.6)); animation: trophy-bob 2.4s ease-in-out infinite; }
.cup-emblem .trophy.is-ghost { opacity: .95; }
@keyframes trophy-bob { 0%, 100% { transform: rotate(-4deg) translateY(0); } 50% { transform: rotate(4deg) translateY(-8px); } }
.cup-name { font: 3.4rem/1 var(--display); color: var(--yellow); text-shadow: var(--o4), 0 5px 0 var(--ink); margin-bottom: 1rem; }
.cup-tracks { display: grid; grid-template-columns: repeat(4, 8.6rem); gap: .8rem; }
.cup-trk { display: flex; flex-direction: column; gap: .35rem; }
.cup-trk canvas { width: 8.6rem; height: 6.2rem; border-radius: .8rem; border: 3px solid var(--ink); background: linear-gradient(160deg, color-mix(in srgb, var(--tc) 85%, #fff), var(--tc) 60%, color-mix(in srgb, var(--tc) 55%, #000)); }
.cup-trk span { font: 900 .95rem/1.15 var(--body); color: #fff; text-shadow: 0 2px 0 var(--ink); }
.cup-trophies { display: flex; gap: 1rem; margin-top: 1.1rem; }
.cup-tro { display: flex; align-items: center; gap: .3rem; padding: .3rem .8rem .3rem .4rem; border-radius: 99px; background: rgba(0,0,0,.25); border: 2px solid rgba(255,255,255,.15); font: 900 1rem/1 var(--body); }
.cup-tro .trophy { width: 2.2rem; }
.cup-tro.is-cur { border-color: var(--yellow); box-shadow: 0 0 12px rgba(255,210,63,.5); }

/* ── track select */
.trk-grid { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-44%); display: flex; justify-content: center; gap: 1.6rem; flex-wrap: wrap; padding: 0 2rem; }
.trk-card { --tc: #5cc85a; position: relative; width: 17.5rem; border-radius: 1.5rem; border: 3px solid var(--ink); background: var(--panel); box-shadow: var(--lift);
  transition: transform .2s cubic-bezier(.3,1.6,.5,1); text-align: left; padding-bottom: .9rem; }
.trk-art { position: relative; height: 12rem; margin: -3px -3px 0; border-radius: 1.5rem 1.5rem 1rem 1rem; border: 3px solid var(--ink); overflow: hidden;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.45), transparent 50%), linear-gradient(160deg, color-mix(in srgb, var(--tc) 80%, #fff), var(--tc) 50%, color-mix(in srgb, var(--tc) 50%, #000)); }
.trk-art::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(-45deg, rgba(255,255,255,.1) 0 10px, transparent 10px 22px); }
.trk-art canvas { position: absolute; inset: .6rem; width: calc(100% - 1.2rem); height: calc(100% - 1.2rem); }
.trk-theme, .trk-laps { position: absolute; top: .6rem; font: 900 .9rem/1 var(--body); text-transform: uppercase; letter-spacing: .08em; padding: .35rem .6rem; border-radius: 99px; border: 2px solid var(--ink); }
.trk-theme { left: .6rem; background: #fff; color: var(--ink); }
.trk-laps { right: .6rem; background: var(--ink); color: #fff; }
.trk-name { font: 1.9rem/1.05 var(--display); color: #fff; text-shadow: var(--o3), 0 4px 0 var(--ink); padding: .8rem 1rem .4rem; }
.trk-best { display: flex; align-items: center; gap: .45rem; margin: 0 1rem; padding: .35rem .7rem; border-radius: 99px; background: rgba(0,0,0,.28); font: 900 1.1rem/1 var(--body); color: var(--yellow); font-variant-numeric: tabular-nums; }
.trk-best.is-none { color: #a9a3e0; }
.trk-best .face.mini { width: 1.8rem; height: 1.8rem; object-fit: contain; margin-left: auto; }
.trk-best-face { margin-left: auto; display: flex; }
.scr-track.is-tt .trk-best { font-size: 1.3rem; background: rgba(0,0,0,.4); }
.trk-card.is-focus { transform: translateY(-1rem) scale(1.07) rotate(-1deg); }
.trk-card.is-focus .trk-art canvas { animation: map-bob 1.4s ease-in-out infinite alternate; }
@keyframes map-bob { to { transform: scale(1.06) rotate(2deg); } }

/* ── options */
.opt-panel { position: absolute; left: 50%; top: 53%; transform: translate(-50%, -50%); width: min(46rem, 94vw); padding: 1.6rem 1.8rem; display: flex; flex-direction: column; gap: .7rem; }
.pause-card.opt-panel { position: relative; left: auto; top: auto; transform: none; width: min(42rem, 94vw); align-items: stretch; padding-top: 1.4rem; }
.pause-card.opt-panel .pause-title, .pause-card.opt-panel .opt-done { align-self: center; }
.opt-row { position: relative; display: flex; align-items: center; gap: 1rem; padding: .8rem 1.1rem; border-radius: 1rem; background: rgba(10,6,40,.35); border: 3px solid transparent; transition: background .15s, transform .15s; cursor: pointer; }
.opt-row.is-focus { background: rgba(255,255,255,.14); border-color: var(--ink); transform: scale(1.02); }
.opt-row.is-focus::after { border-radius: 1.3rem; inset: -6px; }
.opt-label { flex: 1; font: 1.55rem/1 var(--display); color: #fff; text-shadow: var(--o2), 0 3px 0 var(--ink); letter-spacing: .02em; }
.seg { display: flex; padding: .25rem; border-radius: 99px; background: rgba(0,0,0,.35); border: 2px solid var(--ink); }
.seg span { padding: .45rem 1rem; border-radius: 99px; font: 900 1.05rem/1 var(--body); color: #bdb7f0; text-transform: uppercase; letter-spacing: .05em; transition: all .15s; }
.seg span.on { background: linear-gradient(180deg, #fff7b0, var(--yellow) 55%, var(--orange)); color: var(--ink); box-shadow: 0 2px 0 var(--ink); }
.slider { --v: 50%; position: relative; width: 15rem; height: 1.2rem; border-radius: 99px; background: rgba(0,0,0,.45); border: 2px solid var(--ink); touch-action: none; }
.opt-row { --v: 50%; }
.slider-fill { position: absolute; left: 0; top: 0; bottom: 0; width: var(--v); border-radius: 99px; background: linear-gradient(90deg, var(--cyan), var(--green) 60%, var(--yellow)); }
.slider-knob { position: absolute; top: 50%; left: var(--v); width: 1.9rem; height: 1.9rem; transform: translate(-50%, -50%); border-radius: 50%; background: #fff; border: 3px solid var(--ink); box-shadow: 0 3px 0 var(--ink); }
.opt-row.is-focus .slider-knob { background: var(--yellow); transform: translate(-50%, -50%) scale(1.15); }
.opt-val { width: 3rem; text-align: right; font: 900 1.25rem/1 var(--body); color: var(--yellow); font-variant-numeric: tabular-nums; text-shadow: 0 2px 0 var(--ink); }
.toggle { position: relative; width: 5.6rem; height: 2.4rem; border-radius: 99px; background: #5b5680; border: 3px solid var(--ink); transition: background .2s; font: 900 .9rem/1 var(--body); }
.toggle-knob { position: absolute; top: 50%; left: .2rem; width: 1.8rem; height: 1.8rem; transform: translateY(-50%); border-radius: 50%; background: #fff; border: 2px solid var(--ink); transition: left .22s cubic-bezier(.3,1.6,.5,1); }
.toggle-on, .toggle-off { position: absolute; top: 50%; transform: translateY(-50%); color: #fff; }
.toggle-on { left: .7rem; opacity: 0; } .toggle-off { right: .6rem; }
.opt-row.is-on .toggle { background: var(--green); }
.opt-row.is-on .toggle-knob { left: calc(100% - 2rem); }
.opt-row.is-on .toggle-on { opacity: 1; color: var(--ink); } .opt-row.is-on .toggle-off { opacity: 0; }
.opt-done { align-self: center; margin-top: .6rem; }

/* ── controls */
.ctl-grid { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%); display: flex; gap: 1.4rem; width: min(96vw, 84rem); align-items: stretch; }
.ctl-panel { flex: 1; padding: 1.2rem 1.3rem; }
.ctl-head { display: flex; align-items: center; gap: .6rem; font: 2rem/1 var(--display); color: var(--yellow); text-shadow: var(--o3), 0 4px 0 var(--ink); margin-bottom: .8rem; }
.ctl-head .ico { font-size: 2.2rem; color: #fff; filter: drop-shadow(0 3px 0 var(--ink)); }
.ctl-row { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .5rem 0; border-top: 2px dashed rgba(255,255,255,.12); }
.ctl-act { font: 900 1.05rem/1.2 var(--body); color: #e5e2ff; }
.ctl-keys { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; justify-content: flex-end; }
.ctl-keys i { font-style: normal; color: #8c86c8; font-weight: 900; }
.ctl-done { position: absolute; left: 50%; bottom: 5rem; transform: translateX(-50%); }
.ctl-done.is-focus { transform: translateX(-50%) scale(1.08); animation: none; }

/* ── loading */
.loading { position: absolute; inset: 0; overflow: hidden; background: var(--ink); animation: fade-in .25s ease-out both; }
.loading.is-out { animation: ld-out .45s ease-in forwards; }
@keyframes fade-in { from { opacity: 0; } }
@keyframes ld-out { to { opacity: 0; transform: scale(1.06); } }
.ld-bg { position: absolute; inset: 0; background: radial-gradient(ellipse at 70% 40%, color-mix(in srgb, var(--tc) 85%, #fff) 0%, var(--tc) 30%, color-mix(in srgb, var(--tc) 35%, #140f33) 70%, #140f33 100%); }
.ld-stripes { position: absolute; inset: -20%; background: repeating-linear-gradient(-60deg, rgba(255,255,255,.07) 0 3rem, transparent 3rem 6rem); animation: stripes 2s linear infinite; }
@keyframes stripes { to { transform: translateX(6.93rem); } }
.ld-card { position: absolute; left: 6vw; top: 50%; transform: translateY(-60%); display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; animation: ld-card-in .6s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes ld-card-in { from { opacity: 0; translate: -80px 0; } }
.ld-kicker { font: 900 1.4rem/1 var(--body); color: var(--ink); background: var(--yellow); padding: .5rem 1rem; border: 3px solid var(--ink); border-radius: .5rem; transform: skewX(-10deg); box-shadow: 0 5px 0 var(--ink); text-transform: uppercase; letter-spacing: .06em; }
.ld-name { font: 7rem/1 var(--display); letter-spacing: .01em; text-shadow: var(--o8), 0 12px 0 var(--ink), 0 18px 30px rgba(0,0,0,.4); white-space: normal; max-width: 60vw; --fill: var(--g-white); }
.ld-name::after { white-space: normal; }
.ld-theme { font: 900 1.4rem/1 var(--body); color: #fff; text-shadow: 0 2px 0 var(--ink); text-transform: uppercase; letter-spacing: .12em; }
.ld-map { position: absolute; right: 6vw; top: 50%; width: 30vmin; height: 30vmin; transform: translateY(-60%) rotate(-6deg); animation: ld-map 2.4s ease-in-out infinite alternate; }
@keyframes ld-map { to { transform: translateY(-62%) rotate(4deg) scale(1.04); } }
.ld-foot { position: absolute; left: 6vw; right: 6vw; bottom: 3.5rem; display: flex; align-items: center; gap: 1.2rem; }
.ld-spin { width: 3.6rem; height: 3.6rem; border-radius: 50%; background: var(--ink); border: .5rem solid #2b2b3a; box-shadow: 0 0 0 3px #fff, inset 0 0 0 .3rem #888; animation: spin .7s linear infinite; position: relative; flex: none; }
.ld-spin i { position: absolute; inset: .4rem; border-radius: 50%; background: conic-gradient(#ccc 0 10%, #555 0 25%, #ccc 0 35%, #555 0 50%, #ccc 0 60%, #555 0 75%, #ccc 0 85%, #555 0); }
@keyframes spin { to { transform: rotate(360deg); } }
.ld-tip { font: 800 1.2rem/1.35 var(--body); color: #fff; text-shadow: 0 2px 0 var(--ink); max-width: 60rem; }
.ld-tip b { display: inline-block; margin-right: .6rem; padding: .2rem .5rem; border-radius: .35rem; background: var(--cyan); color: var(--ink); font-weight: 900; text-shadow: none; }

/* ── HUD */
.hud { position: absolute; inset: 0; font-family: var(--display); color: #fff; }
.hud > * { position: absolute; transition: opacity .35s, transform .45s cubic-bezier(.2,1.4,.4,1); }
.hud:not(.is-in) .hud-top, .hud:not(.is-racing) .hud-top { opacity: 0; transform: translateX(-30px); }
.hud:not(.is-racing) .hud-item, .hud:not(.is-racing) .hud-pos, .hud:not(.is-racing) .hud-stand, .hud:not(.is-racing) .hud-map { opacity: 0; transform: scale(.7); }
.hud.is-results .hud-top, .hud.is-results .hud-item, .hud.is-results .hud-pos, .hud.is-results .hud-stand, .hud.is-results .hud-map, .hud.is-finish .hud-item { opacity: 0; transform: scale(.8); }
.hud-top { top: calc(1.4rem + env(safe-area-inset-top)); left: calc(1.6rem + env(safe-area-inset-left)); display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; }
.hud-lap { display: flex; align-items: baseline; gap: .3rem; padding: .25rem 1.2rem .45rem 1rem; transform: skewX(-12deg); background: linear-gradient(180deg, rgba(40,28,120,.85), rgba(20,14,70,.85));
  border: 3px solid var(--ink); border-radius: .7rem; box-shadow: 0 5px 0 var(--ink), 0 0 0 2px rgba(255,255,255,.2); }
.hud-lap > * { transform: skewX(12deg); }
.hl-l { font-size: 1.6rem; color: var(--yellow); text-shadow: var(--o2), 0 3px 0 var(--ink); }
.hl-c { font-size: 3.8rem; line-height: 1; text-shadow: var(--o3), 0 4px 0 var(--ink); }
.hl-t { font-size: 2rem; color: #d0ccff; text-shadow: var(--o2), 0 3px 0 var(--ink); }
.hud.is-final .hl-c { color: var(--yellow); animation: final-pulse .8s ease-in-out infinite alternate; }
@keyframes final-pulse { to { color: #ff7a4a; } }
.hud-time { font: 900 1.9rem/1 var(--body); font-variant-numeric: tabular-nums; letter-spacing: .02em; text-shadow: var(--o3), 0 4px 0 var(--ink); padding-left: .3rem; }
.hud-best { font: 900 1.05rem/1 var(--body); color: var(--cyan); text-shadow: var(--o2); padding-left: .3rem; font-variant-numeric: tabular-nums; }
.hud-best b { color: #fff; }
.hud-lapflash { display: flex; align-items: center; gap: .5rem; opacity: 0; padding: .35rem .8rem; border-radius: .5rem; background: rgba(20,14,70,.85); border: 2px solid var(--ink); font: 900 1.2rem/1 var(--body); }
.hud-lapflash span { color: var(--yellow); }
.hud-lapflash b { font-variant-numeric: tabular-nums; }
.hud-lapflash i { font-style: normal; background: var(--green); color: var(--ink); padding: .15rem .4rem; border-radius: .3rem; font-size: .9rem; }

.hud-item { top: calc(1.2rem + env(safe-area-inset-top)); right: calc(1.4rem + env(safe-area-inset-right)); }
.item-frame { position: relative; width: 8rem; height: 8rem; border-radius: 1.6rem; padding: .45rem; background: linear-gradient(180deg, #fff, #cfd4f5);
  border: 3px solid var(--ink); box-shadow: 0 6px 0 var(--ink), 0 12px 24px rgba(0,0,0,.35); }
.item-win { position: relative; width: 100%; height: 100%; border-radius: 1.1rem; overflow: hidden; border: 3px solid var(--ink);
  background: radial-gradient(circle at 50% 35%, #4a3fb0, #1c1552 75%); box-shadow: inset 0 4px 12px rgba(0,0,0,.5); display: grid; place-items: center; }
.item-win::after { content: ''; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(255,255,255,.35), transparent 45%); pointer-events: none; }
.item-img { width: 84%; height: 84%; object-fit: contain; filter: drop-shadow(0 3px 0 rgba(0,0,0,.4)); }
.item-frame.is-spinning { animation: rainbow-ring .5s linear infinite; }
.item-frame.is-spinning .item-img { filter: blur(.5px) drop-shadow(0 3px 0 rgba(0,0,0,.4)); }
@keyframes rainbow-ring { 0% { background: linear-gradient(180deg, #ffd23f, #ff9a1f); } 33% { background: linear-gradient(180deg, #2fe0ff, #2f7dff); } 66% { background: linear-gradient(180deg, #ff4fb0, #7b5cff); } 100% { background: linear-gradient(180deg, #ffd23f, #ff9a1f); } }
.item-frame.is-trailing { box-shadow: 0 6px 0 var(--ink), 0 0 0 4px var(--cyan), 0 0 26px var(--cyan); }
.item-count { position: absolute; right: -.8rem; bottom: -.8rem; min-width: 2.8rem; padding: .3rem .5rem .4rem; border-radius: 99px; text-align: center;
  background: linear-gradient(180deg, #ff8a7a, var(--red)); border: 3px solid var(--ink); font: 1.6rem/1 var(--display); text-shadow: var(--o2); box-shadow: 0 3px 0 var(--ink); }

.hud-stand { left: calc(1.1rem + env(safe-area-inset-left)); top: calc(10.2rem + env(safe-area-inset-top)); width: 4.6rem; height: calc(8 * 3.3rem); }
.hs-chip { position: absolute; left: 0; top: 0; width: 2.95rem; height: 2.95rem; transform: translateY(calc(var(--n, 0) * 3.3rem)); transition: transform .45s cubic-bezier(.3,1.4,.5,1); }
.hs-face { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--c) 40%, #fff), var(--c) 70%);
  border: 3px solid var(--ink); box-shadow: 0 3px 0 var(--ink); display: grid; place-items: center; }
.hs-face img { width: 135%; height: 135%; object-fit: contain; transform: translateY(8%); }
.hs-face b { font: 1.5rem/1 var(--display); text-shadow: var(--o2); }
.hs-n { position: absolute; right: -.7rem; bottom: -.3rem; z-index: 2; font: 1.2rem/1 var(--display); color: #fff; text-shadow: var(--o2); }
.hs-chip.is-player { z-index: 3; }
.hs-chip.is-player .hs-face { border-color: var(--yellow); box-shadow: 0 0 0 3px var(--ink), 0 0 16px var(--yellow); transform: scale(1.18) translateX(.5rem); }
.hs-chip.is-player .hs-n { color: var(--yellow); right: -1.3rem; }

.hud-map { left: calc(1.4rem + env(safe-area-inset-left)); bottom: calc(1.2rem + env(safe-area-inset-bottom)); width: 13.5rem; height: 13.5rem; }
.hud-map canvas { width: 100%; height: 100%; filter: drop-shadow(0 4px 6px rgba(0,0,0,.35)); }
.hud.is-tt .hud-map { left: auto; right: calc(1.4rem + env(safe-area-inset-right)); }

.hud-pos { right: calc(2rem + env(safe-area-inset-right)); bottom: calc(1.4rem + env(safe-area-inset-bottom)); display: flex; align-items: flex-start; transform-origin: 80% 80%; }
.hp-num { font: 9.5rem/.9 var(--display); text-shadow: var(--o6), 0 9px 0 var(--ink), 0 14px 26px rgba(0,0,0,.4); }
.hp-suf { font: 3.8rem/1 var(--display); margin-top: .3rem; margin-left: .15rem; text-shadow: var(--o4), 0 5px 0 var(--ink); }
.hud-pos.p1 { --fill: var(--g-sun); }
.hud-pos.p2 { --fill: linear-gradient(180deg, #ffffff 0%, #eef2fa 40%, #aeb9cf 62%, #7d89a6 100%); }
.hud-pos.p3 { --fill: linear-gradient(180deg, #ffe2c4 0%, #ffb27a 40%, #d9783f 62%, #a24c1f 100%); }
.hud-pos.p4, .hud-pos.p5 { --fill: linear-gradient(180deg, #e0fbff 0%, #8ff0ff 40%, #35c4ff 62%, #2a7cff 100%); }
.hud-pos.p6, .hud-pos.p7, .hud-pos.p8 { --fill: linear-gradient(180deg, #efe6ff 0%, #c7b0ff 40%, #8a6bff 62%, #5a3fd6 100%); }
.hud.is-tt .hud-pos, .hud.is-tt .hud-stand { display: none; }

.hud-center { left: 50%; top: 40%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 100vw; pointer-events: none; }
.hud-center > * { grid-area: 1 / 1; }
.cd { font: 15rem/1 var(--display); opacity: 0; text-shadow: var(--o8), var(--w12), 0 16px 0 var(--ink), 0 24px 40px rgba(0,0,0,.5); }
.cd.c3 { --fill: var(--g-hot); } .cd.c2 { --fill: linear-gradient(180deg, #fff3d6, #ffc04a 45%, #ff8a1f 62%, #e25a10); } .cd.c1 { --fill: var(--g-sun); }
.cd.c0 { --fill: linear-gradient(180deg, #f2ffe8 0%, #9dff8a 38%, #3fd24f 62%, #1f9a3a 100%); font-size: 17rem; }
.banner { opacity: 0; }
.banner span { font: 8rem/1 var(--display); padding: 0 .1em; text-shadow: var(--o8), var(--w12), 0 14px 0 var(--ink), 0 22px 40px rgba(0,0,0,.45); }
.b-final span { --fill: linear-gradient(180deg, #fffbd0 0%, #ffe14a 35%, #ff8a1f 60%, #ff3d4a 100%); }
.b-finish { padding: 1.2rem 4rem; }
.b-finish::before { content: ''; position: absolute; left: -50vw; right: -50vw; top: 50%; height: 7rem; transform: translateY(-50%); background: var(--checker); background-size: 3.5rem 3.5rem;
  border-top: 5px solid var(--ink); border-bottom: 5px solid var(--ink); opacity: .9; z-index: -1; }
.b-finish span { --fill: var(--g-sun); font-size: 10rem; }

.hud-wrong { left: 50%; top: 22%; transform: translateX(-50%); }
.ww-sign { display: flex; align-items: center; gap: 1rem; padding: .8rem 2rem; border-radius: 1.2rem; background: linear-gradient(180deg, #ff6a6a, #d8182c); border: 4px solid var(--ink);
  box-shadow: 0 0 0 4px #fff, 0 0 0 8px var(--ink), 0 12px 0 4px var(--ink); animation: ww-blink .55s steps(2, jump-none) infinite; }
.ww-sign .ico { font-size: 3.4rem; color: #fff; filter: drop-shadow(0 3px 0 var(--ink)); transform: scaleX(-1); }
.ww-sign span { font: 3.4rem/1 var(--display); color: #fff; text-shadow: var(--o3), 0 4px 0 var(--ink); letter-spacing: .04em; }
@keyframes ww-blink { 0% { filter: brightness(1.2); transform: scale(1.04); } 100% { filter: brightness(.85); transform: scale(1); } }

.hud-flash { inset: 0; opacity: 0; background: radial-gradient(ellipse at center, transparent 45%, rgba(255,40,60,.55) 100%); pointer-events: none; }
.hud.is-star::after { content: ''; position: absolute; inset: 0; pointer-events: none; border: 10px solid transparent; border-image: linear-gradient(90deg, #ff3d4a, #ffd23f, #4ddb5a, #2fe0ff, #7b5cff, #ff4fb0) 1;
  opacity: .8; animation: star-hue .5s linear infinite; }
@keyframes star-hue { to { filter: hue-rotate(360deg); } }

.hud-intro { left: calc(3rem + env(safe-area-inset-left)); bottom: calc(4rem + env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; animation: intro-in .7s cubic-bezier(.2,1.4,.4,1) .15s both; }
.hud-intro.is-out { opacity: 0; transform: translateX(-60px); }
@keyframes intro-in { from { opacity: 0; translate: -100px 0; } }
.hi-kicker { font: 900 1.3rem/1 var(--body); color: var(--ink); background: var(--yellow); padding: .45rem .9rem; border: 3px solid var(--ink); border-radius: .5rem; transform: skewX(-10deg); box-shadow: 0 4px 0 var(--ink); text-transform: uppercase; letter-spacing: .06em; }
.hi-name { font: 5.5rem/1 var(--display); text-shadow: var(--o6), 0 9px 0 var(--ink), 0 14px 26px rgba(0,0,0,.4); }

/* ── touch controls */
.touch { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s; }
.touch.is-in { opacity: 1; }
.touch > * { pointer-events: auto; position: absolute; }
.t-top { top: calc(.8rem + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); display: flex; gap: .6rem; }
.t-pause, .t-auto { height: 3.2rem; min-width: 3.2rem; padding: 0 .8rem; border-radius: 99px; display: flex; align-items: center; gap: .4rem; font: 900 1rem/1 var(--body); color: #fff;
  background: rgba(20,14,70,.7); border: 3px solid var(--ink); box-shadow: 0 3px 0 var(--ink); }
.t-pause .ico { font-size: 1.4rem; }
.t-auto i { width: .9rem; height: .9rem; border-radius: 50%; background: #666; border: 2px solid var(--ink); }
.t-auto.is-on i { background: var(--green); box-shadow: 0 0 8px var(--green); }
.t-steer { left: calc(1rem + env(safe-area-inset-left)); bottom: calc(1.2rem + env(safe-area-inset-bottom)); width: min(46vw, 24rem); height: 9rem; display: flex; align-items: flex-end; touch-action: none; }
.t-steer-track { position: relative; width: 100%; height: 6rem; border-radius: 99px; background: rgba(20,14,70,.55); border: 3px solid rgba(255,255,255,.35); box-shadow: inset 0 0 0 3px rgba(20,15,51,.6); }
.t-arr { position: absolute; top: 50%; transform: translateY(-50%); font-size: 1.6rem; color: rgba(255,255,255,.55); }
.t-arr.l { left: 1rem; } .t-arr.r { right: 1rem; }
.t-steer.is-left .t-arr.l, .t-steer.is-right .t-arr.r { color: var(--yellow); }
.t-knob { position: absolute; left: 50%; top: 50%; width: 5.6rem; height: 5.6rem; margin: -2.8rem 0 0 -2.8rem; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff, #cfd4f5 60%, #9aa2d8);
  border: 3px solid var(--ink); box-shadow: 0 4px 0 var(--ink), 0 8px 16px rgba(0,0,0,.4); transition: transform .12s ease-out; }
.t-steer.is-down .t-knob { transition: none; background: radial-gradient(circle at 40% 35%, #fffbd0, var(--yellow) 60%, var(--orange)); }
.t-btns { right: calc(1rem + env(safe-area-inset-right)); bottom: calc(1.2rem + env(safe-area-inset-bottom)); display: grid; grid-template-columns: auto auto; grid-template-areas: 'item drift' 'brake gas'; gap: .8rem; align-items: center; justify-items: center; }
.t-btn { position: relative; width: 5.8rem; height: 5.8rem; border-radius: 50%; display: grid; place-items: center; border: 3px solid var(--ink); box-shadow: 0 5px 0 var(--ink), 0 10px 18px rgba(0,0,0,.35);
  font: 1.25rem/1 var(--display); color: #fff; text-shadow: var(--o2); transition: transform .08s; touch-action: none; }
.t-btn.is-down { transform: translateY(4px) scale(.94); box-shadow: 0 1px 0 var(--ink); }
.t-gas { grid-area: gas; width: 7rem; height: 7rem; background: radial-gradient(circle at 40% 30%, #c8ffcf, var(--green) 55%, #1f9a3a); font-size: 1.8rem; }
.t-brake { grid-area: brake; width: 4.8rem; height: 4.8rem; background: radial-gradient(circle at 40% 30%, #ffc8c8, var(--red) 55%, #a8182c); }
.t-drift { grid-area: drift; width: 7rem; height: 7rem; background: radial-gradient(circle at 40% 30%, #fff1c0, var(--orange) 55%, #d0600a); font-size: 1.5rem; }
.t-item { grid-area: item; background: radial-gradient(circle at 40% 30%, #e2dcff, #7b6cf0 55%, #3a2fb0); }
.t-item-ico { position: absolute; inset: .5rem; background: center / contain no-repeat; }
.t-item.has-item .t-lbl { opacity: 0; }
.touch.is-auto .t-gas { display: none; }
.touch.is-auto .t-btns { grid-template-areas: 'item drift' 'brake drift'; }

/* ── overlays */
.ovl { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; animation: fade-in .3s ease-out both; }
.ovl.is-out { animation: ovl-out .28s ease-in forwards; pointer-events: none; }
@keyframes ovl-out { to { opacity: 0; } }
.ovl-pause { background: radial-gradient(ellipse at center, rgba(20,15,51,.45), rgba(10,6,30,.85)); backdrop-filter: blur(6px) saturate(1.15); -webkit-backdrop-filter: blur(6px) saturate(1.15); }
.pause-card { width: min(28rem, 92vw); padding: 1.8rem 2rem 2.2rem; display: flex; flex-direction: column; align-items: center; gap: .6rem; animation: pop-in .45s cubic-bezier(.2,1.5,.4,1) both; }
.pause-title { font: 5rem/1 var(--display); text-shadow: var(--o6), 0 8px 0 var(--ink); --fill: var(--g-sun); transform: rotate(-3deg); margin-top: -3.8rem; }
.pause-title.small { font-size: 3.4rem; margin-top: -3rem; margin-bottom: .4rem; }
.pause-sub { font: 900 1.1rem/1 var(--body); color: #cfcaff; text-transform: uppercase; letter-spacing: .08em; margin-bottom: .8rem; text-align: center; }
.pause-btns { display: flex; flex-direction: column; gap: .9rem; width: 100%; }
.pause-btns .btn { width: 100%; }

.ovl-results, .ovl-standings { justify-content: flex-end; padding-right: 4vw; background: linear-gradient(90deg, transparent 30%, rgba(10,6,30,.55)); }
.res-panel { width: min(44rem, 94vw); max-height: 92vh; padding: 1.5rem 1.6rem 1.6rem; display: flex; flex-direction: column; gap: .9rem; animation: panel-in .55s cubic-bezier(.2,1.3,.4,1) both; }
@keyframes panel-in { from { opacity: 0; translate: 120px 0; rotate: 3deg; } }
.res-head { text-align: center; margin-top: -3.4rem; }
.res-title { font: 4.6rem/1 var(--display); text-shadow: var(--o6), 0 8px 0 var(--ink), 0 14px 24px rgba(0,0,0,.4); --fill: var(--g-sun); transform: rotate(-2deg); }
.is-win .res-title { animation: win-wobble 1s ease-in-out infinite alternate; }
@keyframes win-wobble { from { transform: rotate(-3deg) scale(1); } to { transform: rotate(2deg) scale(1.06); } }
.res-sub { font: 900 1.05rem/1.2 var(--body); color: #cfcaff; text-transform: uppercase; letter-spacing: .08em; margin-top: .3rem; }
.res-rows { display: flex; flex-direction: column; gap: .4rem; overflow: auto; }
.res-row, .st-row { --c: #888; display: flex; align-items: center; gap: .8rem; height: 3.5rem; padding: 0 1rem 0 .6rem; border-radius: .9rem; border: 3px solid var(--ink);
  background: linear-gradient(90deg, color-mix(in srgb, var(--c) 45%, #2a2080) 0%, #2a2080 45%); box-shadow: 0 3px 0 var(--ink); animation: row-in .45s cubic-bezier(.2,1.3,.4,1) both; animation-delay: calc(var(--i, 0) * 70ms + .25s); }
@keyframes row-in { from { opacity: 0; translate: 80px 0; } }
.res-row.is-player, .st-row.is-player { background: linear-gradient(90deg, #fff4a8, var(--yellow) 40%, var(--orange)); animation: row-in .45s cubic-bezier(.2,1.3,.4,1) both, player-glow 1.2s ease-in-out 1s infinite alternate; animation-delay: calc(var(--i, 0) * 70ms + .25s), 1.2s; }
@keyframes player-glow { to { box-shadow: 0 3px 0 var(--ink), 0 0 22px rgba(255,210,63,.8); } }
.res-row.is-player .rr-name, .res-row.is-player .rr-time, .st-row.is-player .rr-name, .st-row.is-player .st-pts { color: var(--ink); text-shadow: 0 2px 0 rgba(255,255,255,.5); }
.rr-pos { width: 3.4rem; font: 2.3rem/1 var(--display); color: #fff; text-shadow: var(--o3), 0 3px 0 var(--ink); }
.rr-pos small { font-size: .5em; margin-left: .05em; }
.rr-pos.p1 { color: #ffe14a; } .rr-pos.p2 { color: #e3e9f5; } .rr-pos.p3 { color: #ffae6a; }
.rr-face { width: 3rem; height: 3rem; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--c) 40%, #fff), var(--c) 70%); border: 3px solid var(--ink); display: grid; place-items: center; flex: none; }
.rr-face .face { width: 135%; height: 135%; object-fit: contain; transform: translateY(8%); }
.rr-face .face-fallback { width: 100% !important; height: 100% !important; border: 0; font-size: 1.5rem; }
.rr-name { flex: 1; font: 1.7rem/1 var(--display); color: #fff; text-shadow: var(--o2), 0 3px 0 var(--ink); }
.rr-time { font: 900 1.25rem/1 var(--body); color: #fff; font-variant-numeric: tabular-nums; text-shadow: 0 2px 0 var(--ink); }
.rr-time em { font-style: normal; color: #a9a3e0; font-size: .9em; }
.rr-pts, .st-gain { min-width: 3.4rem; text-align: center; font: 1.4rem/1 var(--display); color: var(--ink); background: var(--green); padding: .3rem .5rem .35rem; border-radius: .5rem; border: 2px solid var(--ink); }
.res-btns { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; margin-top: .4rem; }
.res-btns .btn { min-width: 14rem; }
.st-rows { position: relative; }
.st-row { position: absolute; left: 0; right: 0; top: 0; transition: transform .7s cubic-bezier(.3,1.3,.5,1); animation: none; }
.st-pts { width: 3.6rem; text-align: right; font: 2rem/1 var(--display); color: var(--yellow); text-shadow: var(--o2), 0 3px 0 var(--ink); font-variant-numeric: tabular-nums; }
.st-gain { transition: opacity .4s, transform .4s; }
.is-counted .st-gain { opacity: 0; transform: translateX(20px); }

.record-banner { align-self: center; margin: .2rem 0 .2rem; animation: record 0.8s cubic-bezier(.2,1.8,.4,1) .3s both; }
.record-banner span { font: 3.6rem/1 var(--display); text-shadow: var(--o6), 0 7px 0 var(--ink), 0 0 30px rgba(255,210,63,.8);
  --fill: linear-gradient(90deg, #ff3d4a, #ffd23f, #4ddb5a, #2fe0ff, #7b5cff, #ff4fb0, #ff3d4a); }
.record-banner span::after { background-size: 200% 100%; animation: rainbow-slide 1.5s linear infinite; }
@keyframes rainbow-slide { to { background-position: 200% 0; } }
@keyframes record { from { scale: 0; rotate: -20deg; } }
.tt-total { display: flex; justify-content: space-between; align-items: baseline; padding: .6rem 1.2rem; border-radius: 1rem; background: rgba(0,0,0,.3); border: 3px solid var(--ink); }
.tt-l { font: 1.8rem/1 var(--display); color: var(--yellow); text-shadow: var(--o2); }
.tt-v { font: 900 3rem/1 var(--body); font-variant-numeric: tabular-nums; text-shadow: var(--o3), 0 4px 0 var(--ink); }
.tt-laps { display: flex; flex-direction: column; gap: .35rem; }
.tt-lap { display: flex; align-items: center; gap: 1rem; padding: .5rem 1.2rem; border-radius: .7rem; background: rgba(255,255,255,.08); font: 900 1.3rem/1 var(--body); animation: row-in .45s cubic-bezier(.2,1.3,.4,1) both; animation-delay: calc(var(--i) * 90ms + .4s); }
.tt-lap span { color: #cfcaff; width: 5rem; } .tt-lap b { font-variant-numeric: tabular-nums; }
.tt-lap.is-best { background: rgba(77,219,90,.25); } .tt-lap i { color: var(--yellow); margin-left: auto; font-size: 1.3rem; }
.tt-prev { text-align: center; font: 800 1.1rem/1.3 var(--body); color: #cfcaff; } .tt-prev b { color: var(--green); } .tt-prev b.neg { color: #ff8a8a; }

.ovl-final { background: radial-gradient(ellipse at 50% 30%, rgba(80,40,180,.75), rgba(10,6,30,.94) 70%); }
.confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.fin-wrap { position: relative; display: flex; flex-direction: column; align-items: center; gap: .5rem; width: min(60rem, 96vw); }
.fin-head { display: flex; align-items: center; gap: .6rem; font: 2rem/1 var(--display); color: #fff; text-shadow: var(--o3), 0 4px 0 var(--ink); }
.fin-head i { font-style: normal; font-size: 1.3rem; padding: .3rem .6rem; background: var(--red); border: 2px solid var(--ink); border-radius: .4rem; }
.fin-trophy { position: relative; width: 12rem; height: 13.5rem; display: grid; place-items: center; }
.fin-trophy .trophy { position: relative; z-index: 1; width: 11rem; filter: drop-shadow(0 10px 0 rgba(20,15,51,.6)); animation: trophy-in 1s cubic-bezier(.2,1.6,.4,1) .3s both, trophy-bob 2.4s ease-in-out 1.3s infinite; }
@keyframes trophy-in { from { transform: scale(0) rotate(-40deg); } }
.fin-rays { position: absolute; inset: -9rem; background: repeating-conic-gradient(rgba(255,230,120,.28) 0 8deg, transparent 8deg 22deg); border-radius: 50%;
  -webkit-mask: radial-gradient(circle, #000 20%, transparent 68%); mask: radial-gradient(circle, #000 20%, transparent 68%); animation: spin 14s linear infinite; }
.no-trophy .fin-rays { display: none; } .no-trophy .fin-trophy .trophy { opacity: .6; }
.has-silver .fin-rays { background: repeating-conic-gradient(rgba(220,230,255,.25) 0 8deg, transparent 8deg 22deg); }
.has-bronze .fin-rays { background: repeating-conic-gradient(rgba(255,180,120,.25) 0 8deg, transparent 8deg 22deg); }
.fin-msg { font: 6rem/1 var(--display); text-shadow: var(--o8), var(--w12), 0 14px 0 var(--ink); --fill: var(--g-sun); animation: pop-in .6s cubic-bezier(.2,1.6,.4,1) .6s both; }
.has-silver .fin-msg { --fill: linear-gradient(180deg, #fff, #eef2fa 40%, #aeb9cf 62%, #7d89a6); }
.has-bronze .fin-msg { --fill: linear-gradient(180deg, #ffe2c4, #ffb27a 40%, #d9783f 62%, #a24c1f); }
.no-trophy .fin-msg { --fill: var(--g-ice); }
.fin-sub { font: 900 1.3rem/1 var(--body); color: #fff; text-shadow: 0 2px 0 var(--ink); margin-bottom: .6rem; }
.podium { display: flex; align-items: flex-end; justify-content: center; gap: .6rem; }
.pod { --c: #888; display: flex; flex-direction: column; align-items: center; width: 11rem; animation: pod-in .7s cubic-bezier(.2,1.4,.4,1) both; }
.pod-1 { animation-delay: 1.1s; } .pod-2 { animation-delay: .8s; } .pod-3 { animation-delay: .95s; }
@keyframes pod-in { from { opacity: 0; translate: 0 80px; } }
.pod-face { width: 6.4rem; height: 6.4rem; border-radius: 50%; overflow: hidden; border: 4px solid var(--ink); background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--c) 40%, #fff), var(--c) 70%); display: grid; place-items: center; box-shadow: 0 5px 0 var(--ink); margin-bottom: .3rem; }
.pod-face .face { width: 135%; height: 135%; object-fit: contain; transform: translateY(8%); }
.pod-1 .pod-face { width: 8rem; height: 8rem; }
.pod.is-player .pod-face { border-color: var(--yellow); box-shadow: 0 0 0 4px var(--ink), 0 0 24px var(--yellow); }
.pod-name { font: 1.6rem/1 var(--display); text-shadow: var(--o3), 0 3px 0 var(--ink); margin-bottom: .4rem; }
.pod-block { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: .2rem; padding-top: .6rem; border: 3px solid var(--ink); border-radius: .8rem .8rem 0 0; box-shadow: inset 0 3px 0 rgba(255,255,255,.4); }
.pod-1 .pod-block { height: 9rem; background: linear-gradient(180deg, #fff4a8, var(--yellow) 40%, #e59a0f); }
.pod-2 .pod-block { height: 7rem; background: linear-gradient(180deg, #fff, #d7deea 40%, #98a4ba); }
.pod-3 .pod-block { height: 5.9rem; background: linear-gradient(180deg, #ffd9b0, #e39150 40%, #a8582a); }
.pod-n { font: 3.4rem/1 var(--display); color: #fff; text-shadow: var(--o3), 0 4px 0 var(--ink); }
.pod-pts { font: 900 1rem/1 var(--body); color: var(--ink); }
.fin-rest { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: .6rem; }
.fin-rest span { display: flex; align-items: center; gap: .4rem; padding: .3rem .8rem .3rem .4rem; border-radius: 99px; background: rgba(0,0,0,.35); border: 2px solid rgba(255,255,255,.15); font: 900 1rem/1 var(--body); }
.fin-rest span.is-player { border-color: var(--yellow); color: var(--yellow); }
.fin-rest b { color: #cfcaff; } .fin-rest em { font-style: normal; color: var(--yellow); }
.fin-rest .face { width: 1.8rem; height: 1.8rem; object-fit: contain; }
.fin-rest .face-fallback { width: 1.6rem !important; height: 1.6rem !important; font-size: .9rem; border-width: 2px; }

/* ── portrait / phone layouts */
.is-portrait .main-list { left: 50%; top: auto; bottom: 7rem; transform: translateX(-50%); gap: .8rem; }
.is-portrait .mbtn { width: min(30rem, 84vw); height: 4.4rem; }
.is-portrait .mbtn-label { font-size: 2.1rem; }
.is-portrait .main-desc { display: none; }
.is-portrait .scr-head { top: 1.8rem; left: 1rem; right: 1rem; gap: .6rem; }
.is-portrait .head-logo { display: none; }
.is-portrait .head-title span { font-size: 2rem; }
.is-portrait .head-crumbs { width: 100%; font-size: .95rem; }
.is-portrait .scr-foot { display: none; }
.is-portrait .lw { font-size: 7rem; } .is-portrait .lw2 { font-size: 8.4rem; } .is-portrait .logo-gp b { font-size: 3.8rem; }
.is-portrait .scr-title { padding-top: 12vh; }
.is-portrait .press span { font-size: 2rem; padding: .7rem 1.8rem .85rem; }
.is-portrait .title-foot { font-size: .8rem; }
.is-portrait .cc-row { flex-direction: column; gap: 1rem; padding-top: 7rem; }
.is-portrait .cc-card { width: min(28rem, 88vw); display: grid; grid-template-columns: auto 1fr; grid-template-areas: 'num name' 'num chev' 'desc desc'; text-align: left; column-gap: 1rem; padding: 1rem 1.2rem; }
.is-portrait .cc-num { grid-area: num; font-size: 4.2rem; } .is-portrait .cc-name { grid-area: name; margin: 0; align-self: end; } .is-portrait .cc-chev { grid-area: chev; justify-content: flex-start; margin: .3rem 0 0; }
.is-portrait .cc-desc { grid-area: desc; min-height: 0; margin-top: .5rem; }
.is-portrait .cc-card.is-focus { transform: scale(1.04); }
.is-portrait .char-grid { left: 50%; top: auto; bottom: 1.8rem; transform: translateX(-50%); grid-template-columns: repeat(4, min(21vw, 8rem)); gap: .6rem; }
.is-portrait .char-card { height: min(25vw, 9.4rem); }
.is-portrait .cc-face .face { width: min(22vw, 8rem); height: min(22vw, 8rem); }
.is-portrait .cc-nm { font-size: 1.1rem; }
.is-portrait .char-info { left: 50%; right: auto; bottom: calc(1.8rem + 2 * min(25vw, 9.4rem) + 1.8rem); transform: translateX(-50%); width: min(30rem, 92vw); align-items: center; text-align: center; gap: .35rem; }
.is-portrait .ci-name { font-size: 3.6rem; transform-origin: center; }
.is-portrait .ci-tag { font-size: 1.05rem; }
.is-portrait .ci-stats { padding: .6rem .9rem; gap: .35rem; }
.is-portrait .cup-card { flex-direction: column; padding: 1.4rem; gap: 1rem; text-align: center; }
.is-portrait .cup-tracks { grid-template-columns: repeat(2, 12rem); justify-content: center; }
.is-portrait .cup-trk canvas { width: 12rem; height: 7rem; }
.is-portrait .cup-trophies { justify-content: center; }
.is-portrait .trk-grid { top: 7.5rem; bottom: 1.5rem; transform: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; padding: 1rem; align-content: start; overflow-y: auto; touch-action: pan-y; }
.is-portrait .trk-card { width: auto; }
.is-portrait .trk-art { height: 9rem; }
.is-portrait .trk-name { font-size: 1.5rem; }
.is-portrait .trk-best { font-size: .95rem; }
.is-portrait .trk-card.is-focus { transform: scale(1.04); }
.is-portrait .ctl-grid { flex-direction: column; top: 7rem; bottom: 9rem; transform: translateX(-50%); overflow-y: auto; touch-action: pan-y; }
.is-portrait .ctl-done { bottom: 3rem; }
.is-portrait .ld-card { left: 1.5rem; right: 1.5rem; top: 30%; } .is-portrait .ld-name { font-size: 4.6rem; max-width: 90vw; }
.is-portrait .ld-map { width: 60vw; height: 60vw; right: 50%; top: 66%; transform: translate(50%, -50%) rotate(-6deg); animation: none; }
.is-portrait .hud-map { top: calc(12rem + env(safe-area-inset-top)); bottom: auto; width: 10rem; height: 10rem; left: .8rem; }
.is-portrait .hud-pos { top: calc(10.8rem + env(safe-area-inset-top)); bottom: auto; right: 1.2rem; }
.is-portrait .hp-num { font-size: 7rem; } .is-portrait .hp-suf { font-size: 2.8rem; }
.is-portrait .hud-stand { top: auto; bottom: calc(13rem + env(safe-area-inset-bottom)); left: 50%; width: calc(8 * 3.3rem); height: 3rem; transform: translateX(-50%); }
.is-portrait .hs-chip { width: 2.8rem; height: 2.8rem; transform: translateX(calc(var(--n, 0) * 3.3rem)); }
.is-portrait .hs-chip.is-player .hs-face { transform: scale(1.15) translateY(-.3rem); }
.is-portrait .hs-n { font-size: 1rem; }
.is-portrait .hud-item .item-frame { width: 6.6rem; height: 6.6rem; }
.is-portrait .hud-intro { left: 1.2rem; right: 1.2rem; bottom: 40%; } .is-portrait .hi-name { font-size: 3.8rem; white-space: normal; }
.is-portrait .hud-intro .hi-name::after { white-space: normal; }
.is-portrait .cd { font-size: 11rem; } .is-portrait .cd.c0 { font-size: 12rem; }
.is-portrait .banner span { font-size: 5rem; } .is-portrait .b-finish span { font-size: 6rem; }
.is-portrait .ww-sign span { font-size: 2.4rem; }
.is-portrait .hud-wrong { top: 30%; }
.is-portrait .t-steer { width: 46vw; }
.is-portrait .ovl-results, .is-portrait .ovl-standings { justify-content: center; padding: 0; }
.is-portrait .res-panel { margin-top: 3rem; }
.is-portrait .res-row, .is-portrait .st-row { height: 3.1rem; }
.is-portrait .rr-name { font-size: 1.4rem; }
.is-portrait .res-title { font-size: 3.6rem; }
.is-portrait .pod { width: 30vw; }
.is-portrait .fin-msg { font-size: 4.2rem; }
.is-portrait .pause-title { font-size: 4rem; }

/* touch devices in landscape: keep the bottom corners free for the pads */
.tk.is-touch .hud-intro { bottom: calc(12rem + env(safe-area-inset-bottom)); }
.tk.is-touch:not(.is-portrait) .hud-map { left: auto; right: calc(1.4rem + env(safe-area-inset-right)); top: calc(11rem + env(safe-area-inset-top)); bottom: auto; width: 11.5rem; height: 11.5rem; }
.tk.is-touch:not(.is-portrait) .hud-pos { bottom: calc(15rem + env(safe-area-inset-bottom)); }
@media (max-height: 520px) and (orientation: landscape) {
  .main-list { gap: .6rem; } .mbtn { height: 4rem; }
  .hud-stand { display: none; }
  .hi-name { font-size: 4rem; }
  .hud-map { width: 10rem; height: 10rem; }
  .tk.is-touch:not(.is-portrait) .hud-map { left: calc(1.2rem + env(safe-area-inset-left)); right: auto; top: calc(8.6rem + env(safe-area-inset-top)); width: 9rem; height: 9rem; }
  .tk.is-touch:not(.is-portrait) .hud-pos { bottom: auto; top: calc(10rem + env(safe-area-inset-top)); }
  .tk.is-touch .hud-intro { bottom: calc(10.5rem + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}