/* STEELRAGE v1.08 — style.css
 * Industrial steel + hazard stripes + neon rage. System fonts only (offline).
 * 1rem scales with the viewport: 20px @1920x1080, 13.3px @1280x720; height-bound on 21:9, width-bound on 4:3.
 */
:root {
  --f-disp: Impact, Haettenschweiler, "Franklin Gothic Heavy", "Arial Narrow Bold", "Inter Display", "Arial Black", "DejaVu Sans Condensed", sans-serif;
  --f-ui: Bahnschrift, "DIN Alternate", "Roboto Condensed", "Segoe UI", Inter, "Helvetica Neue", Arial, sans-serif;
  --f-mono: "Cascadia Mono", Consolas, "DejaVu Sans Mono", monospace;
  --hz: #ffc21a;          /* hazard yellow */
  --hz2: #ffd84d;
  --rage: #ff3b1f;        /* neon rage */
  --rage2: #ff7a1a;
  --ice: #4fd8ff;
  --ok: #3ce36a;
  --ink: #edf0f3;
  --dim: #8e96a0;
  --dim2: #5b626b;
  --steel0: #0b0c0e;
  --steel1: #14161a;
  --steel2: #1e2127;
  --steel3: #2b2f36;
  --edge: rgba(255,255,255,.09);
  --stripe: repeating-linear-gradient(-45deg, var(--hz) 0 .55rem, #111 .55rem 1.1rem);
  --stripe-thin: repeating-linear-gradient(-45deg, var(--hz) 0 .3rem, #0d0d0d .3rem .6rem);
  --chamfer: polygon(0 0, calc(100% - 1rem) 0, 100% 1rem, 100% 100%, 1rem 100%, 0 calc(100% - 1rem));
  --chamfer-s: polygon(0 0, calc(100% - .5rem) 0, 100% .5rem, 100% 100%, .5rem 100%, 0 calc(100% - .5rem));
}
html { font-size: min(calc(100vh / 54), calc(100vw / 96)); }
html, body { margin: 0; height: 100%; background: #000; overflow: hidden; color: var(--ink); font-family: var(--f-ui);
  -webkit-font-smoothing: antialiased; font-synthesis: none; user-select: none; -webkit-user-select: none; }
#game { position: fixed; inset: 0; z-index: 0; }
#game canvas { display: block; width: 100%; height: 100%; }
#ui { position: fixed; inset: 0; z-index: 10; pointer-events: none; overflow: hidden; }
#ui * { box-sizing: border-box; }
.ui-bg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .6s; }
.sr-ui.scr-open:not(.bg-live) .ui-bg { opacity: 1; }
.ui-vignette { position: absolute; inset: 0; opacity: 0; transition: opacity .4s;
  background: radial-gradient(ellipse at 65% 50%, rgba(0,0,0,0) 30%, rgba(0,0,0,.75) 100%),
              linear-gradient(90deg, rgba(5,5,7,.92) 0%, rgba(5,5,7,.55) 38%, rgba(5,5,7,0) 70%); }
.sr-ui.scr-open .ui-vignette { opacity: 1; }
.sr-ui.scr-open.scr-race .ui-vignette { background: rgba(4,4,6,.62); backdrop-filter: blur(6px) saturate(.6); }
.ui-grain { position: absolute; inset: -50%; background: var(--tex-grain); opacity: .5; pointer-events: none; mix-blend-mode: overlay;
  animation: grain 1s steps(6) infinite; display: none; }
.sr-ui.scr-open .ui-grain { display: block; }
@keyframes grain { 0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,-1%)} 80%{transform:translate(3%,3%)} 100%{transform:translate(0,0)} }
.screens, .modals { position: absolute; inset: 0; }
.fps { position: absolute; right: .6rem; bottom: .4rem; font: 700 .8rem var(--f-mono); color: var(--ok); text-shadow: 0 0 4px #000; display: none; z-index: 50; }
.fps.on { display: block; }

/* ------------------------------------------------------------------ */
/* Shared atoms                                                         */
/* ------------------------------------------------------------------ */
.scr { position: absolute; inset: 0; pointer-events: auto; opacity: 0; transition: opacity .25s ease; }
.scr.in { opacity: 1; }
.scr.out { opacity: 0; pointer-events: none; }
.scr.noanim, .scr.noanim * { animation: none !important; transition: none !important; }
.lbl { font: 700 .72rem/1 var(--f-ui); letter-spacing: .18em; color: var(--dim); text-transform: uppercase; }
.lbl.big { font-size: .9rem; color: var(--hz); }
.val { font: italic 900 1.5rem/1.1 var(--f-disp); letter-spacing: .02em; color: var(--ink); }
.mono { font-family: var(--f-mono); }
.ico { display: inline-flex; width: 1.2em; height: 1.2em; }
.ico svg, .mbtn-arrow svg { width: 100%; height: 100%; }
svg { display: block; }

.panel { position: relative; background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0) 30%),
    var(--tex-steel), var(--steel1);
  background-size: auto, 40rem auto, auto;
  border: 1px solid rgba(255,255,255,.07); clip-path: var(--chamfer);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(0,0,0,.6); }
.panel::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: .22rem;
  background: linear-gradient(90deg, var(--rage) 0 4rem, rgba(255,255,255,.1) 4rem); }
.panel-h { display: flex; align-items: center; gap: .8rem; font: 900 .95rem var(--f-disp); letter-spacing: .14em; color: var(--ink); margin-bottom: 1rem; }
.panel-h-hz { flex: 1; height: .5rem; background: var(--stripe-thin); opacity: .8; clip-path: polygon(.4rem 0, 100% 0, calc(100% - .4rem) 100%, 0 100%); }

.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .6rem; cursor: pointer;
  padding: .75rem 1.6rem; min-width: 9rem; font: italic 900 1.15rem/1 var(--f-disp); letter-spacing: .08em; text-transform: uppercase; color: var(--ink);
  background: linear-gradient(180deg, #343941, #1b1e23 55%, #121418); border: 1px solid rgba(255,255,255,.12);
  clip-path: polygon(.8rem 0, 100% 0, calc(100% - .8rem) 100%, 0 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18); transition: transform .12s, filter .12s, background .15s; }
.btn .ico { width: 1.1em; height: 1.1em; }
.btn.focus { background: linear-gradient(180deg, #ff6a3a, var(--rage) 50%, #b5150a); color: #fff; transform: scale(1.04);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 0 1.6rem rgba(255,59,31,.55); text-shadow: 0 1px 0 rgba(0,0,0,.4); }
.btn-primary { background: linear-gradient(180deg, #ffe066, var(--hz) 45%, #d29400); color: #120c00; text-shadow: 0 1px 0 rgba(255,255,255,.35); }
.btn-primary.focus { background: linear-gradient(180deg, #ffe066, var(--hz) 45%, #d29400); color: #120c00; box-shadow: 0 0 0 .18rem #fff inset, 0 0 2rem rgba(255,194,26,.65); text-shadow: none; }
.btn-danger.focus { background: linear-gradient(180deg, #ff5a3a, #d91a0a 55%, #8a0d05); }
.btn-xl { font-size: 1.5rem; padding: 1rem 2.2rem; }
.btn-sm { font-size: .85rem; padding: .5rem 1rem; min-width: 0; }
.btn.disabled { filter: grayscale(1) brightness(.55); }
.btn.pressed { animation: press .25s; }
@keyframes press { 40% { transform: scale(.94); } }

/* prompt bar */
.prompts { position: absolute; right: 2.4rem; bottom: 1.6rem; display: flex; gap: 1.6rem; align-items: center; }
.prompt { display: flex; align-items: center; gap: .55rem; font: 700 .85rem var(--f-ui); letter-spacing: .14em; color: #c9ced4; cursor: pointer; }
.cap { display: inline-flex; align-items: center; justify-content: center; min-width: 1.7rem; height: 1.7rem; padding: 0 .45rem; font: 900 .7rem var(--f-ui); letter-spacing: .04em; }
.cap.key { color: #111; background: linear-gradient(180deg, #f4f6f8, #b9bfc6); border-radius: .25rem; box-shadow: 0 .15rem 0 #5c636b, inset 0 -1px 0 rgba(0,0,0,.2); }
.cap.pad { border-radius: 50%; width: 1.7rem; padding: 0; color: #fff; font-size: .8rem; box-shadow: inset 0 -.15rem 0 rgba(0,0,0,.35), 0 0 0 .12rem rgba(255,255,255,.15); }
.cap.pa { background: #2fae4a; } .cap.pb { background: #d9342b; } .cap.px { background: #2f6fd9; } .cap.py { background: #e5b21a; color: #111; }
.cap.pd { background: #3a3f46; border-radius: .3rem; width: auto; padding: 0 .4rem; font-size: .6rem; }

/* screen header */
.shead { position: absolute; left: 3.2rem; top: 2.4rem; display: flex; align-items: center; gap: 1.2rem; }
.shead-tag { position: relative; width: 4.4rem; height: 4.4rem; display: grid; place-items: center; background: var(--steel1);
  clip-path: polygon(0 0, 100% 0, 100% 70%, 70% 100%, 0 100%); border-left: .3rem solid var(--rage); }
.shead-tag .hz { position: absolute; inset: auto 0 0 0; height: .5rem; background: var(--stripe-thin); }
.shead-tag b { font: italic 900 1.9rem var(--f-disp); color: var(--ink); margin-top: -.4rem; }
.stitle { margin: 0; font: italic 900 3.4rem/0.95 var(--f-disp); letter-spacing: .02em; text-transform: uppercase;
  background: linear-gradient(180deg, #fff 0%, #cfd5dc 45%, #7c848e 52%, #e6eaee 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 .2rem 0 rgba(0,0,0,.6)); }
.ssub { margin-top: .45rem; font: 600 1rem var(--f-ui); color: var(--dim); letter-spacing: .04em; }
.scr .shead { animation: slideR .45s cubic-bezier(.2,.9,.2,1) both; }
@keyframes slideR { from { transform: translateX(-3rem); opacity: 0; } }
@keyframes slideL { from { transform: translateX(3rem); opacity: 0; } }
@keyframes slideU { from { transform: translateY(2rem); opacity: 0; } }
@keyframes pop { from { transform: scale(.85); opacity: 0; } }
.empty { font: 600 1.2rem var(--f-ui); color: var(--dim); padding: 2rem; }

/* ------------------------------------------------------------------ */
/* Logo                                                                 */
/* ------------------------------------------------------------------ */
.logo { width: 100%; height: auto; overflow: visible; }
.lg-shadow .lg-l { fill: rgba(0,0,0,.75); }
.lg-main .lg-l { stroke: #07080a; stroke-width: 5; paint-order: stroke; stroke-linejoin: miter; }
.lg-main .lg-steel { fill: var(--lgs); }
.lg-main .lg-rage { fill: var(--lgr); }
.lg-grit .lg-l { fill: #000; opacity: .45; }
.lg-glow .lg-rage { fill: none; stroke: #ff3b1f; stroke-width: 2; opacity: .9; }
.lg-glow .lg-hide { display: none; }

/* ------------------------------------------------------------------ */
/* Boot / loading                                                       */
/* ------------------------------------------------------------------ */
.load-wrap { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); width: 52rem; text-align: center; }
.load-logo { animation: logoIn 1.1s cubic-bezier(.15,.9,.2,1) both; filter: drop-shadow(0 0 2.5rem rgba(255,60,20,.25)); }
@keyframes logoIn { 0% { transform: scale(1.6); opacity: 0; filter: blur(12px); } 60% { opacity: 1; filter: blur(0); } 70% { transform: scale(.98); } 100% { transform: scale(1); } }
.tagline { margin-top: .6rem; font: italic 900 1.15rem var(--f-disp); letter-spacing: .55em; color: var(--hz); text-shadow: 0 0 1rem rgba(255,194,26,.35); }
.load-box { position: absolute; left: 50%; bottom: 7.5rem; transform: translateX(-50%); width: 48rem; }
.load-row { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: .6rem; }
.load-label { font: italic 900 1.5rem var(--f-disp); letter-spacing: .12em; color: var(--ink); }
.load-pct { display: block; }
.load-bar { position: relative; height: 1.1rem; background: rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.15); clip-path: polygon(.6rem 0, 100% 0, calc(100% - .6rem) 100%, 0 100%); overflow: hidden; }
.load-fill { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(0); transition: transform .25s ease-out;
  background: repeating-linear-gradient(-45deg, var(--hz) 0 .7rem, #e09a00 .7rem 1.4rem); box-shadow: 0 0 1rem rgba(255,194,26,.6); animation: stripeMove .6s linear infinite; }
@keyframes stripeMove { to { background-position: 1.98rem 0; } }
.load-glint { position: absolute; right: 0; top: 0; bottom: 0; width: .3rem; background: #fff; box-shadow: 0 0 1rem #fff, 0 0 2rem var(--hz); }
.load-sub { margin-top: .6rem; font: 600 .9rem var(--f-ui); color: var(--dim); letter-spacing: .06em; }
.load-tip { position: absolute; left: 50%; bottom: 2.6rem; transform: translateX(-50%); width: 48rem; display: flex; gap: 1rem; align-items: baseline; font: 500 1.05rem var(--f-ui); color: #d8dde2; }
.load-tip b { flex: none; font: italic 900 .85rem var(--f-disp); letter-spacing: .2em; color: #111; background: var(--hz); padding: .25rem .6rem; clip-path: polygon(.3rem 0, 100% 0, calc(100% - .3rem) 100%, 0 100%); }
.load-tip span.swap { animation: tipIn .5s ease both; }
@keyframes tipIn { from { opacity: 0; transform: translateY(.5rem); } }
.load-ver, .menu-ver { position: absolute; left: 2.4rem; bottom: 1.8rem; font: 700 .75rem var(--f-mono); color: var(--dim2); letter-spacing: .1em; }
.scr-boot .load-ver, .scr-loading .load-ver { left: auto; right: 2.4rem; }

/* ------------------------------------------------------------------ */
/* Main menu                                                            */
/* ------------------------------------------------------------------ */
.menu-left { position: absolute; left: 4rem; top: 3.2rem; bottom: 4rem; width: 36rem; display: flex; flex-direction: column; }
.menu-logo { width: 34rem; margin-left: -.6rem; animation: logoIn .9s cubic-bezier(.15,.9,.2,1) both; filter: drop-shadow(0 0 2rem rgba(255,60,20,.2)); }
.menu-tag { display: flex; align-items: center; gap: .8rem; margin: .5rem 0 0 .2rem; font: italic 900 .95rem var(--f-disp); letter-spacing: .5em; color: var(--hz); }
.hzbar { width: 3.2rem; height: .55rem; background: var(--stripe-thin); clip-path: polygon(.3rem 0, 100% 0, calc(100% - .3rem) 100%, 0 100%); }
.menu-list { margin-top: 3.2rem; display: flex; flex-direction: column; gap: .35rem; }
.mbtn { position: relative; display: flex; align-items: center; gap: 1.1rem; height: 3.6rem; padding: 0 1.4rem 0 1rem; cursor: pointer; width: 30rem;
  animation: slideR .5s cubic-bezier(.2,.9,.2,1) both; animation-delay: calc(var(--i) * .045s + .15s); }
.mbtn::before { content: ''; position: absolute; inset: 0; transform: skewX(-14deg) scaleX(.0); transform-origin: 0 50%; opacity: 0;
  background: linear-gradient(90deg, var(--rage) 0%, #e2260f 55%, rgba(255,59,31,.0) 100%); transition: transform .22s cubic-bezier(.2,.9,.2,1), opacity .15s; }
.mbtn::after { content: ''; position: absolute; left: -.6rem; top: .3rem; bottom: .3rem; width: .45rem; background: var(--stripe-thin); transform: skewX(-14deg); opacity: 0; transition: opacity .15s; }
.mbtn-idx { position: relative; font: italic 900 .95rem var(--f-disp); color: var(--dim2); width: 1.8rem; transition: color .15s; }
.mbtn-t { position: relative; flex: 1; font: italic 900 2.15rem/1 var(--f-disp); letter-spacing: .03em; color: #c9ced4; transition: color .15s, transform .2s, letter-spacing .2s; text-transform: uppercase; }
.mbtn-arrow { position: relative; width: 1.5rem; height: 1.5rem; color: #fff; opacity: 0; transform: translateX(-.8rem); transition: all .2s; }
.mbtn.focus::before { transform: skewX(-14deg) scaleX(1); opacity: 1; }
.mbtn.focus::after { opacity: 1; }
.mbtn.focus .mbtn-t { color: #fff; transform: translateX(.4rem); text-shadow: 0 .12rem 0 rgba(0,0,0,.35); }
.mbtn.focus .mbtn-idx { color: #ffd2c6; }
.mbtn.focus .mbtn-arrow { opacity: 1; transform: none; }
.mbtn.disabled .mbtn-t { color: #4a5058; }
.mbtn.disabled.focus::before { background: linear-gradient(90deg, #3a3f46, rgba(58,63,70,0)); }
.mbtn.disabled.focus .mbtn-t { color: #8a9098; }
.mbtn.pressed .mbtn-t { animation: press .25s; }
.menu-desc { margin-top: auto; max-width: 30rem; min-height: 3rem; padding-left: 1.2rem; border-left: .25rem solid var(--rage); font: 500 1.08rem/1.45 var(--f-ui); color: #c6ccd2; }
.menu-desc.swap { animation: tipIn .35s ease both; }
.career { position: absolute; right: 3.2rem; top: 3.2rem; width: 25rem; padding: 1.6rem 1.8rem 1.4rem; animation: slideL .55s .2s cubic-bezier(.2,.9,.2,1) both; }
.career-rank { display: flex; align-items: baseline; justify-content: space-between; border-bottom: 1px solid var(--edge); padding-bottom: .8rem; }
.career-rank-n { font: italic 900 4.2rem/0.9 var(--f-disp); color: var(--hz); text-shadow: 0 0 1.4rem rgba(255,194,26,.35); }
.career-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.2rem; padding: 1rem 0; border-bottom: 1px solid var(--edge); }
.cstat .val { margin-top: .35rem; font-size: 1.45rem; }
.cstat.neg .val { color: var(--rage); }
.career-car { display: flex; align-items: center; gap: 1rem; padding-top: .8rem; }
.career-car-svg { width: 9rem; filter: drop-shadow(0 .3rem .4rem rgba(0,0,0,.6)); }
.career-car-t .val { font-size: 1.6rem; margin-top: .25rem; }
.career-seed { margin-top: .9rem; display: flex; gap: .8rem; align-items: baseline; font-size: .8rem; color: var(--dim); }
.career-empty-t { font: italic 900 1.6rem var(--f-disp); color: var(--ink); }
.career-empty-d { margin-top: .5rem; font: 500 .95rem/1.4 var(--f-ui); color: var(--dim); }

/* ------------------------------------------------------------------ */
/* New game                                                             */
/* ------------------------------------------------------------------ */
.ng { position: absolute; left: 4rem; top: 11rem; width: 46rem; padding: 2.2rem 2.4rem 2.4rem; animation: slideU .45s .08s cubic-bezier(.2,.9,.2,1) both; display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.ng-row { display: flex; gap: 1rem; width: 100%; }
.ng-input { flex: 1; position: relative; background: #07080a; border: 1px solid rgba(255,255,255,.14); clip-path: var(--chamfer-s); cursor: text; transition: box-shadow .15s, border-color .15s; }
.ng-input.focus { border-color: var(--hz); box-shadow: 0 0 0 .12rem var(--hz) inset, 0 0 1.2rem rgba(255,194,26,.3); }
.ng-input input { width: 100%; background: transparent; border: 0; outline: 0; padding: .75rem 1.2rem; font: 700 2rem var(--f-mono); letter-spacing: .12em; color: var(--hz); user-select: text; }
.ng-input input.flash { animation: flashTxt .5s; }
@keyframes flashTxt { from { color: #fff; text-shadow: 0 0 1rem var(--hz); } }
.btn-icon { min-width: 0; }
.ng-hint { font: 500 .95rem var(--f-ui); color: var(--dim); }
.ng-warn { display: flex; gap: .7rem; align-items: center; padding: .7rem 1rem; background: rgba(255,59,31,.1); border-left: .25rem solid var(--rage); font: 600 .95rem var(--f-ui); color: #ffb7a8; }
.ng-warn .ico { color: var(--rage); }
.ng .btn-xl { margin-top: .8rem; }

/* ------------------------------------------------------------------ */
/* Race select                                                          */
/* ------------------------------------------------------------------ */
.rs-body { position: absolute; left: 3.2rem; right: 3.2rem; top: 10rem; bottom: 4.8rem; display: flex; gap: 1.6rem; }
.rs-grid { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); gap: 1rem; min-width: 0; }
.rcard { position: relative; overflow: hidden; cursor: pointer; background: var(--steel0); border: 1px solid rgba(255,255,255,.09);
  clip-path: polygon(0 0, calc(100% - 1.2rem) 0, 100% 1.2rem, 100% 100%, 0 100%);
  animation: pop .4s cubic-bezier(.2,.9,.2,1) both; animation-delay: calc(var(--i) * .04s + .1s); transition: transform .18s, border-color .18s, box-shadow .18s; }
.rcard-prev { position: absolute; inset: 0; width: 100%; height: 100%; }
.rcard::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(6,6,8,.95) 88%); pointer-events: none; }
.rcard-num { position: absolute; left: .8rem; top: .5rem; z-index: 2; font: italic 900 2.6rem/1 var(--f-disp); color: rgba(255,255,255,.9); text-shadow: 0 .15rem .5rem #000; }
.rcard-info { position: absolute; left: .9rem; right: .9rem; bottom: .8rem; z-index: 2; }
.rcard-name { font: italic 900 1.25rem/1.05 var(--f-disp); color: #fff; text-transform: uppercase; letter-spacing: .02em; }
.rcard-meta { margin-top: .3rem; font: 700 .72rem var(--f-ui); letter-spacing: .12em; color: var(--dim); text-transform: uppercase; }
.rcard-badge { position: absolute; right: .7rem; top: 1.6rem; z-index: 2; width: 1.8rem; height: 1.8rem; color: #111; padding: .3rem; }
.rcard.won .rcard-badge { background: var(--ok); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
.rcard.locked .rcard-badge { color: var(--dim); }
.rcard-badge.txt { width: auto; height: auto; padding: .2rem .5rem; font: italic 900 .75rem var(--f-disp); letter-spacing: .14em; background: var(--hz); }
.rcard.locked .rcard-name { color: #6a7078; }
.rcard.focus { transform: translateY(-.3rem); border-color: var(--hz); box-shadow: 0 0 0 .14rem var(--hz) inset, 0 1rem 2rem rgba(0,0,0,.6); z-index: 3; }
.rcard.focus::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: .3rem; z-index: 3; background: var(--stripe-thin); }
.rcard.locked.focus { border-color: #6a7078; box-shadow: 0 0 0 .14rem #6a7078 inset; }
.rs-detail { width: 30rem; flex: none; padding: 1.4rem 1.6rem; display: flex; flex-direction: column; animation: slideL .5s .1s cubic-bezier(.2,.9,.2,1) both; }
.rs-dprev { width: 100%; height: 13rem; flex: none; background: #000; }
.rs-dprev-frame { position: absolute; left: 1.6rem; right: 1.6rem; top: 1.4rem; height: 13rem; border: 1px solid rgba(255,255,255,.12); pointer-events: none;
  background: linear-gradient(90deg, var(--hz) 0 1.2rem, transparent 1.2rem) top left / 100% .2rem no-repeat; }
.rs-dnum { margin-top: 1.1rem; font: 700 .78rem var(--f-ui); letter-spacing: .22em; color: var(--rage); }
.rs-dname { margin-top: .3rem; font: italic 900 2.3rem/1 var(--f-disp); text-transform: uppercase; color: #fff; }
.rs-dzone { margin-top: .35rem; font: 700 .9rem var(--f-ui); letter-spacing: .14em; color: var(--dim); text-transform: uppercase; }
.rs-dstats { display: flex; gap: 1.6rem; margin-top: 1.1rem; padding: .9rem 0; border-top: 1px solid var(--edge); border-bottom: 1px solid var(--edge); }
.rs-st .val { margin-top: .3rem; font-size: 1.5rem; }
.skulls { display: flex; gap: .15rem; margin-top: .35rem; }
.skulls span { width: 1.25rem; height: 1.25rem; color: #4a5058; }
.skulls span.on { color: var(--rage); filter: drop-shadow(0 0 .3rem rgba(255,59,31,.6)); }
.rs-dstatus { display: flex; align-items: center; gap: .6rem; margin-top: .9rem; font: 700 .95rem var(--f-ui); letter-spacing: .06em; }
.rs-dstatus svg { width: 1.2rem; height: 1.2rem; }
.rs-dstatus.st-won { color: var(--ok); } .rs-dstatus.st-new { color: var(--hz); } .rs-dstatus.st-lock { color: var(--dim); }
.rs-car { display: flex; align-items: center; gap: .9rem; margin-top: auto; padding-top: .8rem; }
.rs-car-svg { width: 7rem; }
.rs-car-t { flex: 1; } .rs-car-t .val { font-size: 1.3rem; margin-top: .2rem; }
.rs-start { margin-top: 1rem; width: 100%; }

/* ------------------------------------------------------------------ */
/* Garage                                                               */
/* ------------------------------------------------------------------ */
.gr-stage { position: absolute; left: 0; top: 0; right: 30rem; bottom: 0; cursor: grab; --carcol: #c8140c; }
.gr-stage:active { cursor: grabbing; }
.gr-canvas { position: absolute; inset: 0; width: 100%; height: 100%; animation: fadeIn .6s both; }
@keyframes fadeIn { from { opacity: 0; } }
.gr-glow { position: absolute; left: 10%; right: 0; top: 18%; bottom: 10%; background: radial-gradient(ellipse at 50% 60%, color-mix(in srgb, var(--carcol) 35%, transparent), transparent 62%); filter: blur(2rem); opacity: .7; transition: background .4s; }
.gr-stage.locked .gr-glow { background: radial-gradient(ellipse at 50% 60%, rgba(255,59,31,.25), transparent 60%); }
.gr-floorline { position: absolute; left: 0; right: 0; bottom: 8.5rem; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent); }
.gr-placeholder { position: absolute; left: 12%; right: 6%; top: 28%; display: flex; flex-direction: column; align-items: center; }
.gr-placeholder .carside { width: 100%; filter: drop-shadow(0 1rem 1rem rgba(0,0,0,.8)); }
.gr-ph-t { font: 700 .8rem var(--f-ui); letter-spacing: .3em; color: var(--dim2); margin-top: 1rem; }
.gr-lock { position: absolute; left: 50%; top: 58%; transform: translate(-50%, -50%); text-align: center; pointer-events: none; animation: pop .35s both; }
.gr-lock-ico { width: 3.6rem; height: 3.6rem; margin: 0 auto; color: var(--hz); filter: drop-shadow(0 0 1rem rgba(255,194,26,.5)); }
.gr-lock-t { margin-top: .6rem; font: italic 900 2.6rem var(--f-disp); letter-spacing: .1em; color: #fff; text-shadow: 0 .2rem 1rem #000; }
.gr-lock-s { margin-top: .3rem; padding: .45rem 1.1rem; display: inline-block; font: 800 1.1rem var(--f-ui); letter-spacing: .06em; color: #111; background: var(--hz); clip-path: polygon(.5rem 0, 100% 0, calc(100% - .5rem) 100%, 0 100%); text-transform: uppercase; }
.gr-strip { position: absolute; left: 3.2rem; right: 33rem; bottom: 4.8rem; display: flex; align-items: center; gap: .8rem; }
.gr-arrow { width: 2.6rem; height: 2.6rem; padding: .5rem; color: var(--ink); background: var(--steel2); cursor: pointer; clip-path: var(--chamfer-s); flex: none; }
.gr-arrow:hover { background: var(--rage); }
.gr-thumbs { flex: 1; display: flex; gap: .6rem; }
.gr-thumb { flex: 1; height: 3.6rem; padding: .3rem .5rem; background: rgba(10,11,13,.75); border: 1px solid rgba(255,255,255,.08); cursor: pointer; clip-path: var(--chamfer-s); transition: all .15s; display: flex; align-items: center; }
.gr-thumb .carside { width: 100%; }
.gr-thumb.locked { opacity: .55; }
.gr-thumb.cur { border-color: var(--hz); background: rgba(40,32,10,.85); box-shadow: inset 0 -.25rem 0 var(--hz); }
.gr-info { position: absolute; right: 3.2rem; top: 3.2rem; bottom: 4.8rem; width: 27rem; padding: 2rem 2rem 1.6rem; display: flex; flex-direction: column; }
.gr-info.swap > * { animation: tipIn .35s ease both; }
.gr-name { position: relative; font: italic 900 3.6rem/0.95 var(--f-disp); color: #fff; letter-spacing: .02em; text-shadow: 0 .25rem 0 rgba(0,0,0,.5); }
.gr-driver { margin-top: .55rem; display: flex; gap: .7rem; align-items: baseline; font: 700 1.05rem var(--f-ui); color: var(--ink); }
.gr-desc { margin-top: 1rem; min-height: 4.4rem; font: 500 1rem/1.45 var(--f-ui); color: #b8bfc6; }
.gr-bars { margin-top: 1.2rem; display: flex; flex-direction: column; gap: .7rem; }
.gbar { display: grid; grid-template-columns: 8.4rem 1fr 1.6rem; align-items: center; gap: .8rem; }
.gbar-l { font: 700 .74rem var(--f-ui); letter-spacing: .14em; color: var(--dim); }
.gbar-s { display: flex; gap: .18rem; height: .85rem; }
.gbar-s i { flex: 1; background: #24282e; transform: skewX(-20deg); }
.gbar-s i.on { background: linear-gradient(180deg, var(--hz2), #f0a200); box-shadow: 0 0 .5rem rgba(255,194,26,.35); animation: segIn .3s both; animation-delay: var(--d); }
@keyframes segIn { from { background: #fff; opacity: 0; } }
.gbar-v { font: italic 900 1.1rem var(--f-disp); color: var(--ink); text-align: right; }
.gr-specs { display: flex; gap: 2rem; margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--edge); }
.gspec .val { font-size: 1.35rem; margin-top: .3rem; }
.gr-sel { margin-top: auto; width: 100%; }
.gr-sel.selected { background: linear-gradient(180deg, #4ef07c, var(--ok) 50%, #1f9a42); }
.gr-count { position: absolute; left: 3.2rem; bottom: 9.4rem; font: 700 .8rem var(--f-ui); letter-spacing: .2em; color: var(--dim); }
.scr-garage .shead { z-index: 2; }

/* ------------------------------------------------------------------ */
/* Options                                                              */
/* ------------------------------------------------------------------ */
.op-body { position: absolute; left: 3.2rem; right: 3.2rem; top: 9rem; bottom: 4.8rem; display: flex; gap: 2rem; }
.op-list { flex: 1; max-width: 52rem; overflow-y: auto; overflow-x: hidden; padding: 0 .6rem 1rem 0; scrollbar-width: none; }
.op-list::-webkit-scrollbar { display: none; }
.op-sec { display: flex; align-items: center; gap: 1rem; margin: .8rem 0 .4rem; font: italic 900 .95rem var(--f-disp); letter-spacing: .24em; color: var(--rage); }
.op-sec:first-child { margin-top: 0; }
.op-sec-line { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(255,59,31,.5), transparent); }
.op-row { position: relative; display: flex; align-items: center; justify-content: space-between; height: 2.6rem; padding: 0 1rem 0 1.4rem; cursor: pointer;
  background: rgba(14,15,18,.72); border-left: .25rem solid transparent; margin-bottom: .3rem; transition: background .12s, border-color .12s; }
.op-row.focus { background: linear-gradient(90deg, rgba(255,59,31,.28), rgba(255,59,31,.06) 70%, rgba(14,15,18,.72)); border-left-color: var(--rage); }
.op-l { font: italic 900 1.2rem var(--f-disp); letter-spacing: .05em; color: #cfd4d9; text-transform: uppercase; }
.op-row.focus .op-l { color: #fff; }
.op-v { display: flex; align-items: center; gap: .6rem; }
.op-v .arrowL, .op-v .arrowR { width: 1.5rem; height: 1.5rem; padding: .25rem; color: var(--dim2); transition: color .12s; }
.op-row.focus .arrowL, .op-row.focus .arrowR { color: var(--hz); }
.op-choice { display: flex; flex-direction: column; align-items: center; min-width: 11rem; gap: .3rem; }
.op-cv { font: italic 900 1.15rem var(--f-disp); color: var(--ink); letter-spacing: .06em; }
.op-cv.danger { color: var(--rage); }
.pips { display: flex; gap: .25rem; }
.pips i { width: 1.1rem; height: .2rem; background: #33383f; }
.pips i.on { background: var(--hz); box-shadow: 0 0 .4rem rgba(255,194,26,.6); }
.pips i.off { background: repeating-linear-gradient(90deg, #33383f 0 .15rem, transparent .15rem .3rem); }
.slider { display: flex; gap: .14rem; width: 13rem; height: .9rem; }
.slider i { flex: 1; background: #2a2e34; transform: skewX(-20deg); }
.slider i.on { background: linear-gradient(180deg, var(--hz2), #f0a200); }
.slider-n { width: 2.2rem; text-align: right; font: italic 900 1.05rem var(--f-disp); color: var(--ink); }
.op-row.danger.focus { background: linear-gradient(90deg, rgba(255,30,20,.4), rgba(14,15,18,.72)); }
.op-side { width: 34rem; flex: none; padding: 2rem; align-self: flex-start; max-height: 100%; overflow: hidden; animation: slideL .45s .1s cubic-bezier(.2,.9,.2,1) both; }
.op-side-t { font: italic 900 2rem var(--f-disp); color: #fff; text-transform: uppercase; }
.op-side-d { margin-top: .8rem; font: 500 1.05rem/1.5 var(--f-ui); color: #b8bfc6; }
.op-side-x { margin-top: 1.2rem; }
.soon { display: inline-flex; gap: .6rem; align-items: center; padding: .5rem 1rem; background: var(--stripe-thin); color: #111; font: italic 900 1rem var(--f-disp); letter-spacing: .14em; }
.soon span:last-child { background: var(--hz); padding: 0 .4rem; }
.ctrls { display: flex; flex-direction: column; gap: .15rem; }
.ctrl-row { display: grid; grid-template-columns: 1fr 9.5rem 6rem; align-items: center; gap: .6rem; padding: .32rem .5rem; background: rgba(255,255,255,.025); font: 600 .9rem var(--f-ui); color: #cfd4d9; }
.ctrl-row:nth-child(odd) { background: rgba(255,255,255,.05); }
.ctrl-h { background: none !important; font: 800 .7rem var(--f-ui); letter-spacing: .2em; color: var(--rage); }
.ctrl-k { display: flex; gap: .3rem; flex-wrap: wrap; }
kbd { display: inline-block; padding: .14rem .45rem; font: 800 .72rem var(--f-ui); color: #111; background: linear-gradient(180deg, #f4f6f8, #b9bfc6); border-radius: .2rem; box-shadow: 0 .12rem 0 #5c636b; letter-spacing: .02em; }
kbd.padk { background: #3a3f46; color: #fff; box-shadow: 0 .12rem 0 #15171a; }
kbd.pk-A { background: #2fae4a; border-radius: 1rem; } kbd.pk-B { background: #d9342b; border-radius: 1rem; } kbd.pk-X { background: #2f6fd9; border-radius: 1rem; } kbd.pk-Y { background: #e5b21a; color: #111; border-radius: 1rem; }

/* ------------------------------------------------------------------ */
/* Help / credits                                                       */
/* ------------------------------------------------------------------ */
.hp-body { position: absolute; left: 3.2rem; right: 3.2rem; top: 10rem; bottom: 4.8rem; display: flex; gap: 1.6rem; }
.hp-cards { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 1rem; }
.hp-card { padding: 1.5rem 1.4rem; animation: pop .4s both; animation-delay: calc(var(--i) * .05s + .1s); }
.hp-ico { width: 2.6rem; height: 2.6rem; color: var(--hz); filter: drop-shadow(0 0 .6rem rgba(255,194,26,.35)); }
.hp-t { margin-top: .9rem; font: italic 900 1.5rem var(--f-disp); color: #fff; text-transform: uppercase; }
.hp-d { margin-top: .5rem; font: 500 1rem/1.45 var(--f-ui); color: #b8bfc6; }
.hp-ctrl { width: 32rem; flex: none; padding: 1.6rem; animation: slideL .45s .1s both; }
.hp-back, .cr-back { position: absolute; left: 3.2rem; bottom: 1.4rem; }
.cr-wrap { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -52%); width: 46rem; text-align: center; animation: slideU .6s both; }
.cr-logo { width: 30rem; margin: 0 auto 1rem; }
.cr-l1 { font: italic 900 1.1rem var(--f-disp); letter-spacing: .4em; color: var(--hz); margin-bottom: 2rem; }
.cr-row { margin: 1.1rem 0; }
.cr-v { margin-top: .35rem; font: italic 900 1.6rem var(--f-disp); color: #fff; }
.cr-small { margin-top: .6rem; font: 500 .95rem var(--f-ui); color: var(--dim); }
.cr-small.hl { color: var(--rage2); font-weight: 700; margin-top: 1.2rem; }
.cr-ver { margin-top: 1.6rem; font: 700 .75rem var(--f-mono); color: var(--dim2); }

/* ------------------------------------------------------------------ */
/* Pause                                                                */
/* ------------------------------------------------------------------ */
.pa-box { position: absolute; left: 0; top: 0; bottom: 0; width: 40rem; padding: 6rem 3.6rem 3rem 4.4rem;
  background: linear-gradient(90deg, rgba(8,9,11,.96), rgba(8,9,11,.85) 75%, rgba(8,9,11,0)); animation: slideR .35s cubic-bezier(.2,.9,.2,1) both; }
.pa-head { display: flex; align-items: center; gap: 1rem; }
.pa-hz { width: .9rem; height: 4.6rem; background: var(--stripe-thin); }
.pa-title { font: italic 900 5rem/1 var(--f-disp); color: #fff; letter-spacing: .02em; text-shadow: 0 .3rem 0 rgba(0,0,0,.5); }
.pa-quip { margin: .7rem 0 2.4rem 1.9rem; font: 600 1.05rem var(--f-ui); color: var(--dim); }
.pa-list { display: flex; flex-direction: column; gap: .3rem; }
.mbtn.small { height: 3.1rem; width: 27rem; }
.mbtn.small .mbtn-t { font-size: 1.75rem; }
.mbtn.danger.focus::before { background: linear-gradient(90deg, #b5150a, rgba(181,21,10,0)); }
.pa-sum { position: absolute; left: 4.4rem; bottom: 3rem; display: flex; gap: 2rem; }
.pa-s .val { margin-top: .3rem; font-size: 1.6rem; }

/* ------------------------------------------------------------------ */
/* Results */
/* ------------------------------------------------------------------ */
.res-banner { position: absolute; left: 0; right: 0; top: 3.4rem; display: flex; flex-direction: column; align-items: center; }
.res-stripes { position: absolute; left: 0; right: 0; top: .6rem; height: 9.6rem; transform: skewY(-2deg);
  background: linear-gradient(90deg, transparent, rgba(8,8,10,.88) 18%, rgba(8,8,10,.88) 82%, transparent);
  animation: stripeIn .6s cubic-bezier(.2,.9,.2,1) both; }
.res-stripes::before, .res-stripes::after { content: ''; position: absolute; left: 10%; right: 10%; height: .5rem; background: repeating-linear-gradient(-45deg, var(--rc) 0 .55rem, #111 .55rem 1.1rem); }
.res-stripes::before { top: -.25rem; } .res-stripes::after { bottom: -.25rem; }
@keyframes stripeIn { from { transform: skewY(-2deg) scaleX(0); } }
.res-win { --rc: var(--hz); } .res-lose { --rc: var(--rage); }
.res-big { position: relative; font: italic 900 8.6rem/1.2 var(--f-disp); letter-spacing: .04em; text-transform: uppercase; padding: 0 2rem;
  background: linear-gradient(180deg, #fff 0%, #fff3c4 30%, var(--rc) 55%, #6a3a00 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 .4rem 0 rgba(0,0,0,.7)) drop-shadow(0 0 2.4rem color-mix(in srgb, var(--rc) 55%, transparent)); animation: slam .7s cubic-bezier(.2,1.4,.3,1) both; }
.res-lose .res-big { background: linear-gradient(180deg, #fff 0%, #ffc6b8 30%, var(--rage) 55%, #4a0500 100%); -webkit-background-clip: text; background-clip: text; }
@keyframes slam { 0% { transform: scale(3); opacity: 0; } 55% { transform: scale(.94); opacity: 1; } 75% { transform: scale(1.03) rotate(-1deg); } 100% { transform: scale(1); } }
.res-reason { position: relative; margin-top: 1.3rem; font: 700 1.3rem var(--f-ui); color: #fff; letter-spacing: .03em; text-shadow: 0 .1rem .4rem #000; animation: tipIn .5s .5s both; }
.res-quip { position: relative; margin-top: .3rem; font: italic 600 1rem var(--f-ui); color: #aab1b9; text-shadow: 0 .1rem .4rem #000; animation: tipIn .5s .7s both; }
.res-unlock { position: relative; margin-top: .6rem; display: flex; gap: .6rem; align-items: center; font: italic 900 1rem var(--f-disp); letter-spacing: .14em; color: var(--ok); animation: tipIn .4s 1.9s both; }
.res-unlock .ico { width: 1rem; height: 1rem; }
.res-cols { position: absolute; left: 50%; top: 21.5rem; transform: translateX(-50%); display: flex; gap: 1.2rem; align-items: flex-start; }
.res-panel { width: 36rem; padding: 1.4rem 2.2rem 1.2rem; animation: slideU .5s .55s both; }
.res-row { display: flex; justify-content: space-between; align-items: baseline; padding: .55rem 0; border-bottom: 1px solid var(--edge); animation: tipIn .4s both; animation-delay: calc(.7s + var(--i) * .22s); }
.res-row .lbl { font-size: .85rem; }
.res-row .val { font-size: 2rem; }
.res-row.pos .val { color: var(--hz); text-shadow: 0 0 1rem rgba(255,194,26,.35); }
.res-row.neg .val { color: var(--rage); }
.res-rank { display: flex; justify-content: space-between; align-items: center; padding: .8rem 0 .2rem; animation: tipIn .4s 1.4s both; }
.res-rank .lbl { font-size: .85rem; }
.res-rank-v { display: flex; align-items: center; gap: 1rem; font: italic 900 2.6rem var(--f-disp); }
.res-rank-v .from { color: var(--dim); }
.res-rank-v .arr { width: 1.6rem; height: 1.6rem; color: var(--dim2); }
.res-rank.up .to { color: var(--ok); text-shadow: 0 0 1.2rem rgba(60,227,106,.45); }
.res-rank.up .arr { color: var(--ok); }
.res-stolen { width: 24rem; padding: 1.4rem 1.6rem 1.6rem; animation: slideU .5s 1.5s both; }
.res-stolen::before { background: linear-gradient(90deg, var(--hz) 0 4rem, rgba(255,255,255,.1) 4rem); }
.res-stolen > .lbl { color: var(--hz); }
.res-stolen-l { display: flex; flex-direction: column; gap: .8rem; margin-top: 1rem; }
.res-car { position: relative; display: flex; align-items: center; gap: 1rem; padding: .5rem .8rem; background: rgba(0,0,0,.45); border: 1px solid rgba(255,194,26,.25); }
.res-car .carside { width: 7.5rem; flex: none; filter: drop-shadow(0 .3rem .3rem rgba(0,0,0,.7)); }
.res-car-n { font: italic 900 1.4rem var(--f-disp); color: #fff; }
.res-car-tag { position: absolute; right: -.4rem; top: -.6rem; padding: .2rem .5rem; font: italic 900 .8rem var(--f-disp); letter-spacing: .1em; color: #111; background: var(--hz); transform: rotate(5deg); box-shadow: 0 .2rem .6rem rgba(0,0,0,.6); }
.res-btns { position: absolute; left: 50%; bottom: 4.6rem; transform: translateX(-50%); display: flex; gap: 1rem; animation: slideU .4s 1.2s both; }

/* ------------------------------------------------------------------ */
/* Modal + toast */
/* ------------------------------------------------------------------ */
.modal { position: absolute; inset: 0; pointer-events: auto; display: grid; place-items: center; background: rgba(0,0,0,.6); backdrop-filter: blur(4px); opacity: 0; transition: opacity .18s; }
.modal.in { opacity: 1; }
.modal-box { width: 38rem; padding: 2.4rem 2.4rem 2rem; text-align: center; transform: scale(.92); transition: transform .22s cubic-bezier(.2,1.3,.3,1); }
.modal.in .modal-box { transform: none; }
.modal-icon { width: 3rem; height: 3rem; margin: 0 auto; color: var(--hz); }
.modal-text { margin: 1rem 0 1.8rem; font: 700 1.25rem/1.4 var(--f-ui); color: #fff; }
.modal-btns { display: flex; justify-content: center; gap: 1rem; }
.toast { position: absolute; left: 50%; top: 2rem; transform: translate(-50%, -150%); padding: .8rem 1.6rem; background: var(--steel1); border-left: .3rem solid var(--hz); font: 700 1rem var(--f-ui); transition: transform .3s cubic-bezier(.2,1.2,.3,1); z-index: 60; box-shadow: 0 .6rem 2rem rgba(0,0,0,.6); }
.toast.in { transform: translate(-50%, 0); }

/* ================================================================== */
/* HUD                                                                  */
/* ================================================================== */
.hud { position: absolute; inset: 0; display: none; }
.sr-ui.hud-on .hud { display: block; }
.sr-ui.hud-on.scr-race .hud { filter: blur(2px) brightness(.6); }
.hud .h-l { font: italic 900 1.15rem var(--f-disp); letter-spacing: .05em; color: #f2f4f6; text-transform: uppercase; }
.hud .h-n { font: italic 900 2.3rem/1 var(--f-disp); color: var(--hz); text-shadow: 0 0 .8rem rgba(255,170,0,.35); }
.hud .h-d { font: italic 900 1.35rem/1 var(--f-disp); color: var(--hz); opacity: .85; }
.hud .h-n, .hud .h-d, .hud .h-l, .hud .h-big { -webkit-text-stroke: 0; filter: drop-shadow(0 .12rem 0 rgba(0,0,0,.8)); }
.bump { animation: bump .35s cubic-bezier(.2,1.5,.3,1); }
@keyframes bump { 30% { transform: scale(1.18); filter: brightness(1.6); } }

/* top-left */
.h-tl { position: absolute; left: 1.2rem; top: 1.2rem; display: flex; align-items: flex-start; }
.h-portrait { position: relative; width: 7.6rem; height: 7.6rem; overflow: hidden; background: #000;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 1.2rem), calc(100% - 1.2rem) 100%, 0 100%);
  box-shadow: inset 0 0 0 .18rem #3a3f46; }
.h-portrait canvas { position: absolute; inset: .18rem; width: calc(100% - .36rem); height: calc(100% - .36rem); }
.h-portrait::before { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.55), rgba(255,255,255,0) 22%) top left / 100% 100% no-repeat; mix-blend-mode: overlay; }
.h-portrait::after { content: ''; position: absolute; left: 0; right: 1.2rem; bottom: 0; height: .35rem; z-index: 3; background: var(--stripe-thin); }
.h-portrait-gloss { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0,0,0,.12) 0 1px, transparent 1px 3px); }
.h-portrait-flash { position: absolute; inset: 0; z-index: 4; background: var(--rage); opacity: 0; mix-blend-mode: screen; pointer-events: none; }
.h-portrait-flash.go { animation: pflash .45s ease-out; }
@keyframes pflash { from { opacity: .85; } }
.h-status { margin-left: .5rem; padding: .55rem 1.3rem .6rem 1rem; min-width: 17rem;
  background: linear-gradient(90deg, rgba(8,9,11,.82), rgba(8,9,11,.55)); clip-path: polygon(0 0, 100% 0, calc(100% - 1rem) 100%, 0 100%);
  border-top: .16rem solid rgba(255,255,255,.12); }
.h-row { display: flex; align-items: baseline; gap: .35rem; white-space: nowrap; }
.h-row + .h-row { margin-top: .15rem; }
.h-gap { width: .9rem; }
.h-row .h-l { margin-right: .2rem; }
.h-skulls { display: flex; gap: .25rem; margin-top: .35rem; }
.h-skulls span { width: 1.15rem; height: 1.15rem; color: rgba(255,255,255,.16); }
.h-skulls span.on { color: var(--rage); filter: drop-shadow(0 0 .35rem rgba(255,59,31,.8)); animation: bump .4s; }

/* power-ups */
.h-pu { position: absolute; left: 1.2rem; top: 10.4rem; display: flex; flex-direction: column; gap: .5rem; }
.h-pu-i { display: flex; align-items: center; gap: .6rem; padding: .3rem 1.2rem .3rem .3rem; background: linear-gradient(90deg, rgba(8,9,11,.82), rgba(8,9,11,.4));
  clip-path: polygon(0 0, 100% 0, calc(100% - .8rem) 100%, 0 100%); animation: puIn .35s cubic-bezier(.2,1.4,.3,1) both; --pc: var(--ice); }
.h-pu-i.bad { --pc: var(--rage); }
.h-pu-i.gone { animation: puOut .3s both; }
@keyframes puIn { from { transform: translateX(-120%); } }
@keyframes puOut { to { transform: translateX(-120%); opacity: 0; } }
.h-pu-ring { position: relative; width: 2.7rem; height: 2.7rem; color: var(--pc); }
.h-pu-ring svg:first-child { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.h-pu-ring > svg:last-child { position: absolute; inset: .7rem; width: 1.3rem; height: 1.3rem; filter: drop-shadow(0 0 .3rem currentColor); }
.h-pu-ring circle { fill: none; stroke-width: 3.2; }
.h-pu-ring .bg { stroke: rgba(255,255,255,.12); fill: rgba(0,0,0,.4); }
.h-pu-ring .fg { stroke: var(--pc); stroke-dasharray: 106.8; stroke-dashoffset: 0; stroke-linecap: butt; filter: drop-shadow(0 0 .2rem var(--pc)); }
.h-pu-n { font: italic 900 1rem/1 var(--f-disp); color: #fff; letter-spacing: .04em; }
.h-pu-t { margin-top: .15rem; font: 700 .8rem var(--f-mono); color: var(--pc); }
.h-pu-i.ending .h-pu-ring { animation: blink .3s steps(2) infinite; }
@keyframes blink { 50% { opacity: .3; } }

/* timer */
.h-timer { position: absolute; left: 50%; top: 0; transform: translateX(-50%); min-width: 17rem; height: 6.4rem; display: flex; justify-content: center; align-items: center; padding: 0 2.6rem .3rem;
  background: linear-gradient(180deg, rgba(6,7,9,.92), rgba(12,13,16,.75)); clip-path: polygon(0 0, 100% 0, calc(100% - 2rem) 100%, 2rem 100%);
  border-bottom: .18rem solid rgba(255,194,26,.45); }
.h-timer::after { content: ''; position: absolute; left: 2rem; right: 2rem; bottom: 0; height: .18rem; background: var(--hz); box-shadow: 0 0 1rem var(--hz); }
.h-timer-hz { position: absolute; top: 0; width: 2.4rem; height: .5rem; background: var(--stripe-thin); }
.h-timer-hz.l { left: 1rem; } .h-timer-hz.r { right: 1rem; }
.h-timer.low { border-bottom-color: var(--rage); }
.h-timer.low::after { background: var(--rage); box-shadow: 0 0 1.4rem var(--rage); animation: blink .5s steps(2) infinite; }
.h-timer-c { display: block; }
.h-timer.bump { animation: tbump .4s cubic-bezier(.2,1.5,.3,1); }
@keyframes tbump { 30% { transform: translateX(-50%) scale(1.1); filter: brightness(1.5) hue-rotate(140deg); } }
.h-timepops { position: absolute; left: 50%; top: 100%; width: 0; }
.tpop { position: absolute; left: 0; top: .4rem; transform: translateX(-50%); white-space: nowrap; font: italic 900 2.4rem var(--f-disp); color: var(--ice);
  text-shadow: 0 0 1rem rgba(79,216,255,.8), 0 .15rem 0 #000; animation: tpop 1.8s cubic-bezier(.2,1.2,.3,1) both; }
@keyframes tpop { 0% { transform: translate(-50%, 2rem) scale(.4); opacity: 0; } 15% { transform: translate(-50%, 0) scale(1.15); opacity: 1; } 25% { transform: translate(-50%, 0) scale(1); } 75% { opacity: 1; } 100% { transform: translate(-50%, -2.6rem) scale(.8); opacity: 0; } }

/* top-right */
.h-tr { position: absolute; right: 1.2rem; top: 1.2rem; display: flex; flex-direction: column; align-items: flex-end; padding: .5rem 1.2rem .6rem 2.2rem;
  background: linear-gradient(270deg, rgba(8,9,11,.82), rgba(8,9,11,.5)); clip-path: polygon(1rem 0, 100% 0, 100% 100%, 0 100%); border-top: .16rem solid rgba(255,255,255,.12); }
.h-cred { display: flex; align-items: baseline; gap: .4rem; }
.h-big { font: italic 900 2.7rem/1 var(--f-disp); color: var(--hz); text-shadow: 0 0 1rem rgba(255,170,0,.4); }
.h-cred.neg .h-big { color: var(--rage); text-shadow: 0 0 1rem rgba(255,59,31,.5); }
.h-profit { display: flex; align-items: baseline; gap: .4rem; margin-top: .1rem; }
.h-profit .h-n { font-size: 1.35rem; color: var(--ok); text-shadow: none; }
.h-profit .h-l { font-size: .85rem; color: var(--dim); }
.h-profit.neg .h-n { color: var(--rage); }
.h-opp { display: flex; align-items: baseline; gap: .25rem; margin-top: .1rem; }
.h-opp .h-n { font-size: 1.9rem; }
.h-opp .h-l { margin-left: .35rem; }
.h-debt { display: none; margin-top: .35rem; padding: .15rem .6rem; font: italic 900 .85rem var(--f-disp); letter-spacing: .14em; color: #fff; background: var(--rage); animation: blink .7s steps(2) infinite; }
.h-debt.on { display: block; }

/* radar */
.h-radar { position: absolute; right: 1.6rem; top: 12.4rem; width: 11.5rem; height: 11.5rem; border-radius: 50%; }
.h-radar canvas { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; }
.h-radar-ring { position: absolute; inset: -.35rem; border-radius: 50%; border: .3rem solid #2a2e34; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 0 0 1px rgba(0,0,0,.8), 0 .4rem 1rem rgba(0,0,0,.5);
  background: conic-gradient(from -8deg, var(--hz) 0 16deg, transparent 16deg 360deg) border-box; -webkit-mask: radial-gradient(circle, transparent calc(50% - .35rem), #000 calc(50% - .34rem)); mask: radial-gradient(circle, transparent calc(50% - .35rem), #000 calc(50% - .34rem)); }
.h-radar-l { position: absolute; left: 50%; bottom: -1.1rem; transform: translateX(-50%); padding: .1rem .5rem; font: 800 .6rem var(--f-ui); letter-spacing: .3em; color: var(--dim); background: rgba(8,9,11,.8); }

/* damage diagram */
.h-dmg { position: absolute; right: 1.2rem; bottom: 1.2rem; padding: .6rem .9rem .8rem 1rem; background: linear-gradient(180deg, rgba(8,9,11,.82), rgba(8,9,11,.62));
  clip-path: polygon(1rem 0, 100% 0, 100% 100%, 0 100%, 0 1rem); border-top: .16rem solid rgba(255,255,255,.12); }
.h-dmg-h { display: flex; justify-content: space-between; align-items: baseline; font: italic 900 .95rem var(--f-disp); letter-spacing: .14em; color: #e9ecef; margin-bottom: .4rem; }
.h-dmg-pct { color: var(--hz); font-size: 1.25rem; }
.h-dmg.crit .h-dmg-pct { color: var(--rage); animation: blink .5s steps(2) infinite; }
.h-dmg-b { display: flex; gap: .9rem; align-items: center; }
.h-legend { display: flex; flex-direction: column; gap: .12rem; }
.h-lg { display: grid; grid-template-columns: .7rem 1fr 2.4rem; align-items: center; gap: .45rem; font: 700 .64rem var(--f-ui); letter-spacing: .06em; color: #cfd4d9; white-space: nowrap; }
.h-lg i { width: .7rem; height: .7rem; background: #2fe36b; transform: skewX(-12deg); box-shadow: 0 0 .3rem rgba(0,0,0,.6); }
.h-lg-p { text-align: right; font: 700 .66rem var(--f-mono); color: var(--dim); }
.h-lg.crit .h-lg-n { color: #ff8a6a; }
.h-lg.dead .h-lg-n, .h-lg.dead .h-lg-p { color: var(--rage); text-decoration: line-through; }
.h-lg.dead i { background: #000 !important; box-shadow: 0 0 0 1px var(--rage); }
.h-lg.hitr { animation: hitr .5s; }
@keyframes hitr { 0% { background: rgba(255,59,31,.6); } }
.h-diag { width: 5.6rem; }
.h-diag svg { width: 100%; height: auto; overflow: visible; }
.h-diag .pt { fill: #2fe36b; stroke: rgba(0,0,0,.85); stroke-width: 1.4; transition: fill .25s; }
.h-diag .pt.body { fill-opacity: .55; stroke: rgba(255,255,255,.35); stroke-width: 1.6; }
.h-diag .pt.wheel { stroke: rgba(0,0,0,.95); }
.h-diag .pt.dead { stroke: var(--rage); stroke-dasharray: 3 2; animation: blink .6s steps(2) infinite; }
.h-diag .pt.hitp { animation: hitp .45s; }
@keyframes hitp { 0% { filter: brightness(3); } }
.h-diag .pt-sh { pointer-events: none; }
.h-diag .pt-line { fill: rgba(0,0,0,.25); stroke: rgba(0,0,0,.4); stroke-width: 1; }
.h-diag .pt-detail { stroke: rgba(0,0,0,.4); stroke-width: 1.2; fill: none; }
.h-dmgvign { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .6s;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(200,10,0,.35) 100%); }
.h-dmgvign.on { opacity: 1; animation: vpulse 1.2s ease-in-out infinite; }
@keyframes vpulse { 50% { opacity: .5; } }

/* speedometer */
.h-speedo { position: absolute; left: 1.2rem; bottom: 1rem; width: 15rem; height: 15rem; }
.h-dial-bg, .h-dial-fg { position: absolute; inset: 0; width: 100%; height: 100%; }
.h-needle { position: absolute; left: 50%; top: 50%; width: .32rem; height: 6.1rem; margin-left: -.16rem; margin-top: -6.1rem; transform-origin: 50% 100%;
  background: linear-gradient(180deg, #fff 0%, #ff3b1f 20%, #b5150a 100%); clip-path: polygon(50% 0, 100% 100%, 0 100%); filter: drop-shadow(0 0 .3rem rgba(255,59,31,.9)); will-change: transform; }
.h-hub { position: absolute; left: 50%; top: 50%; width: 1.3rem; height: 1.3rem; margin: -.65rem 0 0 -.65rem; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, #8a929c 40%, #22262b); box-shadow: 0 0 0 .15rem #000; }
.h-digits { position: absolute; left: 14.2rem; bottom: .6rem; display: flex; gap: .4rem; align-items: stretch; }
.h-gear, .h-spd { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: .3rem .5rem .25rem;
  background: linear-gradient(180deg, rgba(6,7,9,.9), rgba(14,15,18,.82)); border: 1px solid rgba(255,255,255,.1); box-shadow: inset 0 .5rem 1rem rgba(0,0,0,.6);
  clip-path: polygon(.5rem 0, 100% 0, calc(100% - .5rem) 100%, 0 100%); }
.h-gear canvas, .h-spd canvas { display: block; }
.h-gear .h-l, .h-spd .h-l { font: 800 .55rem var(--f-ui); letter-spacing: .26em; color: var(--dim); font-style: normal; }
.h-gear.bump { animation: gbump .3s; }
@keyframes gbump { 30% { filter: brightness(1.8); transform: scale(1.08); } }

/* centre messages */
.h-msg { position: absolute; left: 0; right: 0; top: 21%; display: flex; justify-content: center; pointer-events: none; }
.msg-big { --mc: var(--rage); position: relative; animation: bigmsg 2.2s cubic-bezier(.2,.9,.2,1) both; }
/* skewed hazard band behind the words */
.msg-big::before { content: ''; position: absolute; left: -12%; right: -12%; top: 18%; bottom: 14%; z-index: 0; transform: skewX(-18deg); transform-origin: left center;
  background: linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.72) 18%, rgba(0,0,0,.72) 82%, rgba(0,0,0,0)),
    repeating-linear-gradient(-45deg, var(--mc) 0 .7rem, transparent .7rem 1.4rem);
  -webkit-mask: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  opacity: .55; animation: bandIn 2.2s cubic-bezier(.2,.9,.2,1) both; animation-duration: inherit; }
@keyframes bandIn { 0% { transform: skewX(-18deg) scaleX(0); } 12% { transform: skewX(-18deg) scaleX(1.05); } 18%, 85% { transform: skewX(-18deg) scaleX(1); opacity: .55; } 100% { transform: skewX(-18deg) scaleX(1.1); opacity: 0; } }
.msg-big-t { position: relative; z-index: 1; font: italic 900 3.1rem/1 var(--f-disp); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
  color: var(--mc); -webkit-text-fill-color: var(--mc); -webkit-text-stroke: .09rem #000; paint-order: stroke fill;
  text-shadow: .16rem .18rem 0 #000, -.07rem -.07rem 0 #000, .07rem -.07rem 0 #000, -.07rem .07rem 0 #000, 0 0 .5rem rgba(0,0,0,.75);
  -webkit-font-smoothing: antialiased; transform: translateZ(0); }
.msg-big-t::before, .msg-big-t::after { content: none; }
@keyframes bigmsg {
  0% { transform: scale(1.5); opacity: 0; }
  8% { transform: scale(.96); opacity: 1; }
  12% { transform: scale(1.02); }
  16%, 84% { transform: none; opacity: 1; }
  100% { transform: translateY(-.8rem); opacity: 0; } }
.h-msg-small { position: absolute; left: 0; right: 0; top: 63%; display: flex; flex-direction: column; align-items: center; gap: .3rem; pointer-events: none; }
.msg-small { font: italic 900 1.45rem var(--f-disp); color: var(--hz); text-transform: uppercase; letter-spacing: .03em; text-shadow: .14rem .14rem 0 #000, 0 0 1.2rem rgba(255,170,0,.55);
  animation: smsg 1.8s cubic-bezier(.2,1.3,.3,1) both; }
@keyframes smsg { 0% { transform: translateX(-4rem) skewX(-20deg); opacity: 0; } 14% { transform: translateX(.4rem) skewX(-6deg); opacity: 1; } 22% { transform: none; } 80% { opacity: 1; transform: none; } 100% { transform: translateX(3rem); opacity: 0; } }
.h-credpops { position: absolute; left: 50%; top: 29%; width: 0; height: 0; pointer-events: none; }
.cpop { position: absolute; left: var(--x); top: 0; transform: translateX(-50%); white-space: nowrap; font: italic 900 2.6rem var(--f-disp); color: #ffe066; letter-spacing: .02em;
  text-shadow: .16rem .16rem 0 #6a3a00, 0 0 1.4rem rgba(255,190,0,.7); animation: cpop 1.7s cubic-bezier(.2,1.2,.3,1) both; }
@keyframes cpop { 0% { transform: translate(-50%, 1.5rem) scale(.3); opacity: 0; } 14% { transform: translate(-50%, 0) scale(1.2); opacity: 1; } 24% { transform: translate(-50%, 0) scale(1); } 70% { opacity: 1; } 100% { transform: translate(-50%, -3.4rem) scale(.9); opacity: 0; } }
.h-warn { position: absolute; left: 0; right: 0; top: 17%; display: flex; justify-content: center; pointer-events: none; }
.warn-i { display: flex; align-items: center; gap: .8rem; padding: .5rem 2rem; background: linear-gradient(90deg, transparent, rgba(180,10,0,.85) 15%, rgba(180,10,0,.85) 85%, transparent);
  font: italic 900 1.8rem var(--f-disp); letter-spacing: .1em; color: #fff; text-transform: uppercase; animation: warnA 2s both; }
.warn-i svg { width: 1.6rem; height: 1.6rem; color: var(--hz); }
@keyframes warnA { 0% { transform: scaleY(0); } 8% { transform: scaleY(1); } 20%,40%,60% { opacity: 1; } 30%,50% { opacity: .55; } 90% { opacity: 1; transform: scaleY(1); } 100% { transform: scaleY(0); opacity: 0; } }

/* achievements */
.h-ach { position: absolute; right: 1.2rem; top: 26.2rem; display: flex; flex-direction: column; gap: .6rem; align-items: flex-end; }
.ach { position: relative; display: flex; gap: .9rem; align-items: center; width: 24rem; padding: .8rem 1.1rem .8rem .8rem; overflow: hidden;
  background: linear-gradient(90deg, rgba(10,11,13,.94), rgba(22,24,28,.94)); border-left: .3rem solid var(--hz); clip-path: polygon(0 0, 100% 0, 100% calc(100% - .8rem), calc(100% - .8rem) 100%, 0 100%);
  box-shadow: 0 .6rem 1.6rem rgba(0,0,0,.6); animation: achIn .55s cubic-bezier(.2,1.3,.3,1) both; }
.ach.out { animation: achOut .45s ease-in both; }
@keyframes achIn { from { transform: translateX(110%); } }
@keyframes achOut { to { transform: translateX(110%); opacity: 0; } }
.ach-ico { flex: none; width: 3.2rem; height: 3.2rem; padding: .6rem; color: #111; background: radial-gradient(circle at 35% 30%, #fff3b0, var(--hz) 45%, #b37a00); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.ach-h { font: 800 .62rem var(--f-ui); letter-spacing: .26em; color: var(--hz); }
.ach-t { margin-top: .2rem; font: italic 900 1.3rem/1.05 var(--f-disp); color: #fff; text-transform: uppercase; }
.ach-d { margin-top: .2rem; font: 500 .82rem/1.3 var(--f-ui); color: #b8bfc6; }
.ach-shine { position: absolute; top: 0; bottom: 0; width: 4rem; left: -5rem; background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent); transform: skewX(-20deg); animation: shine 1.2s .45s ease-out; }
@keyframes shine { to { left: 110%; } }

/* hints */
.h-hint { position: absolute; left: 50%; bottom: 2rem; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .6rem; pointer-events: none; }
.h-repair, .h-recover { display: none; align-items: center; gap: .8rem; padding: .45rem 1.4rem .45rem .5rem; background: linear-gradient(90deg, rgba(8,9,11,.88), rgba(8,9,11,.6));
  clip-path: polygon(0 0, 100% 0, calc(100% - .8rem) 100%, 0 100%); }
.h-repair.on, .h-recover.on { display: flex; animation: puIn2 .3s cubic-bezier(.2,1.4,.3,1); }
@keyframes puIn2 { from { transform: translateY(1.5rem); opacity: 0; } }
.h-repair-ring { position: relative; width: 2.8rem; height: 2.8rem; color: var(--ice); }
.h-repair-ring svg:first-child { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.h-repair-ring > svg:last-child { position: absolute; inset: .75rem; width: 1.3rem; height: 1.3rem; }
.h-repair-ring circle { fill: none; stroke-width: 3.4; }
.h-repair-ring .bg { stroke: rgba(255,255,255,.12); fill: rgba(0,0,0,.4); }
.h-repair-ring .fg { stroke: var(--ice); stroke-dasharray: 100.5; stroke-dashoffset: 100.5; filter: drop-shadow(0 0 .25rem var(--ice)); }
.h-repair:not(.active) .h-repair-ring .fg { stroke-dashoffset: 100.5; }
.h-repair.active .h-repair-ring > svg:last-child { animation: wrench .4s ease-in-out infinite alternate; }
@keyframes wrench { to { transform: rotate(-35deg); } }
.h-repair-t, .h-recover { font-family: var(--f-ui); }
.h-repair-t b, .h-recover b { display: block; font: italic 900 1.15rem var(--f-disp); color: #fff; letter-spacing: .06em; }
.h-repair-t span, .h-recover span { font: 700 .72rem var(--f-mono); color: var(--dim); }
.h-recover { animation: none; }
.h-recover.on { animation: recPulse 1s ease-in-out infinite; }
@keyframes recPulse { 50% { box-shadow: inset 0 0 0 .14rem var(--hz); } }
.h-recover kbd, .h-repair kbd { font-size: 1rem; padding: .25rem .6rem; }
.h-recover kbd.pad { border-radius: 50%; background: #e5b21a; color: #111; box-shadow: none; }
.h-recover b { display: inline; margin-right: .5rem; }

/* countdown */
.h-count { position: absolute; left: 0; right: 0; top: 34%; display: flex; justify-content: center; pointer-events: none; }
.cd { position: relative; display: grid; place-items: center; animation: cdIn .95s cubic-bezier(.2,1.2,.3,1) both; }
.cd-t { position: relative; z-index: 2; font: italic 900 13rem/1 var(--f-disp); color: transparent; letter-spacing: .02em;
  background: linear-gradient(180deg, #fff 0%, #fff6d0 30%, var(--hz) 55%, #8a5200 100%); -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(.4rem .4rem 0 #000) drop-shadow(0 0 2rem rgba(255,170,0,.6)); }
.cd.go .cd-t { font-size: 15rem; background: linear-gradient(180deg, #fff 0%, #d6ffe0 30%, var(--ok) 55%, #0a5a1e 100%); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(.4rem .4rem 0 #000) drop-shadow(0 0 2.4rem rgba(60,227,106,.7)); }
.cd-ring { position: absolute; width: 18rem; height: 18rem; border-radius: 50%; border: .6rem solid var(--hz); animation: ring .95s ease-out both; }
.cd.go .cd-ring { border-color: var(--ok); }
@keyframes cdIn { 0% { transform: scale(2.6); opacity: 0; } 25% { transform: scale(.95); opacity: 1; } 35% { transform: scale(1); } 80% { opacity: 1; } 100% { transform: scale(.7); opacity: 0; } }
@keyframes ring { 0% { transform: scale(.4); opacity: 1; } 100% { transform: scale(1.8); opacity: 0; } }

/* retro style: chunkier, pixelated */
.sr-ui.retro canvas { image-rendering: pixelated; }
.sr-ui.retro .h-portrait canvas { image-rendering: pixelated; }

/* 4:3 and narrow layouts */
@media (max-aspect-ratio: 3/2) {
  .rs-detail { width: 24rem; }
  .rs-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(4, 1fr); }
  .career { width: 22rem; }
  .menu-left { width: 32rem; }
  .op-side { width: 26rem; }
  .hp-ctrl { width: 28rem; }
  .hp-cards { grid-template-columns: repeat(2, 1fr); }
  .gr-stage { right: 26rem; }
  .gr-info { width: 24rem; }
  .gr-strip { right: 29rem; }
  .h-ach { bottom: 21rem; }
}

/* menu hero turntable + new game seed visual */
.menu-hero { position: absolute; left: 32rem; right: 22rem; top: 15rem; bottom: 4rem; pointer-events: none; --carcol: #c8140c; animation: fadeIn 1s .3s both; }
.menu-hero .gr-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.ng-vis { position: absolute; left: 53rem; right: 3.2rem; top: 11rem; height: 22rem; animation: slideL .5s .15s both; }
.ng-vis canvas { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 0 2rem rgba(255,140,60,.2)); }
.ng-vis-l { position: absolute; left: 0; top: -1.4rem; font: 700 .75rem var(--f-ui); letter-spacing: .26em; color: var(--dim); }
.ng-vis-s { position: absolute; right: 0; top: -1.6rem; font: 700 1rem var(--f-mono); color: var(--hz); letter-spacing: .14em; }
@media (max-aspect-ratio: 3/2) { .menu-hero { display: none; } .ng-vis { display: none; } .res-cols { flex-direction: column; align-items: center; top: 20rem; } }
.career-grid .lbl { white-space: nowrap; letter-spacing: .1em; font-size: .66rem; }