/* RASH DRIVING — "truck-art arcade". Menus painted like a Punjab truck tailgate, HUD like a
   speedometer someone stickered over. Sizes are in rem; main.js scales the root font so 1rem = 16px
   on a 844×390 landscape phone. */

@font-face { font-family: 'Yatra One'; src: url(../assets/fonts/yatra-latin.woff2) format('woff2'); font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122, U+2212; }
@font-face { font-family: 'Yatra One'; src: url(../assets/fonts/yatra-deva.woff2) format('woff2'); font-display: swap;
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF; }
@font-face { font-family: 'Teko'; src: url(../assets/fonts/teko-latin.woff2) format('woff2'); font-weight: 300 700; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122, U+2212; }

:root {
  --ink: #1a0f1f; --night: #2b1b3d; --deep: #1b0d2a; --plum: #3d2357;
  --pink: #ff2e88; --magenta: #c2187a; --marigold: #ffb000; --saffron: #ff9933; --yellow: #ffe14d;
  --turq: #00c2c7; --teal: #0b7a75; --parrot: #2bd94a; --green: #1f8f3a; --verm: #ff4b1f; --red: #d7263d;
  --royal: #2140d9; --cream: #fff4d6; --chrome: #cfd8dc;
  --display: 'Yatra One', 'Kohinoor Devanagari', 'Noto Sans Devanagari', serif;
  --num: 'Teko', 'Yatra One', 'Arial Narrow', sans-serif;
  --sl: max(env(safe-area-inset-left), .75rem);
  --sr: max(env(safe-area-inset-right), .75rem);
  --st: max(env(safe-area-inset-top), .5rem);
  --sb: max(env(safe-area-inset-bottom), .5rem);
  --chrome-g: linear-gradient(180deg, #ffffff 0%, #dfe6ea 30%, #8a9aa3 48%, #f5f8fa 62%, #9fb0b8 100%);
  /* truck-art borders */
  --zig: linear-gradient(135deg, var(--z1, var(--pink)) 25%, transparent 25%) -.5rem 0 / 1rem 1rem,
         linear-gradient(225deg, var(--z1, var(--pink)) 25%, transparent 25%) -.5rem 0 / 1rem 1rem,
         var(--z2, var(--marigold));
  --dots: radial-gradient(circle, var(--d1, var(--marigold)) .17rem, transparent .2rem) 0 50% / .8rem .8rem repeat-x;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--deep); color: var(--cream);
  font-family: var(--num); font-weight: 500; line-height: 1.1;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: none;
  overscroll-behavior: none; -webkit-text-size-adjust: 100%; }
body { position: fixed; inset: 0; }
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; touch-action: manipulation; }
img.px, canvas.qr { image-rendering: pixelated; image-rendering: crisp-edges; }
.scroll { touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch; }

#game { position: fixed; inset: 0; width: 100vw; height: 100%; display: block; image-rendering: pixelated; image-rendering: crisp-edges;
  background: radial-gradient(ellipse at 50% 30%, #4a2a6a, var(--deep) 70%); }
#backdrop { position: fixed; inset: 0; pointer-events: none; opacity: 0; transition: opacity .35s;
  background:
    radial-gradient(circle, rgba(255, 176, 0, .09) .14rem, transparent .17rem) 0 0 / 1.6rem 1.6rem,
    linear-gradient(180deg, rgba(27, 13, 42, .80), rgba(27, 13, 42, .93)); }
body.dim #backdrop { opacity: 1; }
#ui { position: fixed; inset: 0; z-index: 20; pointer-events: none; }
#ui > .screen { pointer-events: auto; }
#hud { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
#controls { position: fixed; inset: 0; z-index: 12; pointer-events: none; }

.screen { position: absolute; inset: 0; padding: var(--st) var(--sr) var(--sb) var(--sl); display: flex; flex-direction: column; }
body[data-screen="race"] #ui > .screen { pointer-events: none; }

/* ---------------------------------------------------------------- shared bits */
.nazar-wrap { display: inline-block; width: 2.6rem; height: 2.6rem; filter: drop-shadow(0 .15rem 0 var(--ink)); }
.nazar-wrap svg { width: 100%; height: 100%; display: block; }
.ic { display: inline-block; width: 1.2em; height: 1.2em; vertical-align: -.2em; }
.ic svg { width: 100%; height: 100%; display: block; }

.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; flex-direction: column;
  min-height: 3rem; padding: .35rem 1.2rem .15rem; border: .19rem solid var(--ink); border-radius: .85rem;
  font-family: var(--display); font-size: 1.3rem; line-height: 1; letter-spacing: .02em; color: var(--ink);
  background: var(--b, var(--pink));
  box-shadow: inset 0 -.32rem 0 rgba(0, 0, 0, .22), inset 0 .22rem 0 rgba(255, 255, 255, .4), 0 .28rem 0 var(--ink);
  transition: transform .06s, box-shadow .06s; }
.btn::after { content: ''; position: absolute; inset: .28rem; border-radius: .55rem; pointer-events: none;
  border: .12rem dotted rgba(255, 255, 255, .55); }
.btn:active { transform: translateY(.22rem); box-shadow: inset 0 -.2rem 0 rgba(0, 0, 0, .22), inset 0 .22rem 0 rgba(255, 255, 255, .4), 0 .06rem 0 var(--ink); }
.btn small { font-family: var(--num); font-size: .95rem; font-weight: 600; letter-spacing: .04em; opacity: .85; margin-top: .1rem; }
.btn-pink { --b: var(--pink); color: var(--cream); text-shadow: .1rem .1rem 0 var(--ink); }
.btn-marigold { --b: var(--marigold); }
.btn-turquoise { --b: var(--turq); }
.btn-parrot { --b: var(--parrot); }
.btn-ghost { --b: var(--plum); color: var(--cream); }
.btn-ghost::after { border-color: rgba(255, 176, 0, .5); }
.btn.wide { min-width: 11rem; }

.iconbtn { width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: 50%; color: var(--ink);
  background: var(--chrome-g); border: .17rem solid var(--ink); box-shadow: 0 .2rem 0 var(--ink); }
.iconbtn svg { width: 1.5rem; height: 1.5rem; }
.iconbtn:active { transform: translateY(.15rem); box-shadow: none; }

header.bar { display: flex; align-items: center; gap: .8rem; min-height: 3.2rem; padding-bottom: .5rem; position: relative; flex: none; }
header.bar::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: .5rem; --z1: var(--pink); --z2: var(--turq); background: var(--zig); }
.bar-title { flex: 1; margin: 0; font-family: var(--display); font-weight: 400; font-size: 1.9rem; color: var(--marigold);
  text-shadow: .12rem .12rem 0 var(--magenta), .22rem .22rem 0 var(--ink); line-height: 1.1; padding-top: .2rem; }

.money { display: flex; align-items: center; gap: .35rem; height: 2.5rem; padding: 0 .9rem 0 .35rem; border-radius: 1.3rem;
  background: var(--ink); border: .15rem solid var(--marigold); box-shadow: 0 0 0 .15rem var(--ink); }
.money b { font-family: var(--num); font-size: 1.8rem; font-weight: 600; color: var(--yellow); line-height: 1; padding-top: .3rem; letter-spacing: .02em; }
.rupee-coin { width: 1.8rem; height: 1.8rem; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-size: 1.1rem;
  color: var(--ink); background: radial-gradient(circle at 35% 35%, var(--yellow), var(--marigold) 60%, #b37400); border: .12rem solid var(--ink); }

.plaque { display: inline-grid; grid-template-columns: auto auto; align-items: baseline; column-gap: .5rem; padding: .3rem .8rem .2rem;
  background: var(--turq); color: var(--ink); border: .17rem solid var(--ink); border-radius: .5rem; box-shadow: .2rem .2rem 0 var(--ink); }
.pl-n { grid-column: 1 / -1; font-size: .95rem; font-weight: 600; letter-spacing: .12em; }
.pl-name { font-family: var(--display); font-weight: 400; font-size: 1.6rem; line-height: 1; }
.pl-hi { font-family: var(--display); font-size: 1.3rem; color: var(--magenta); }

/* chrome-framed painted panel */
.panel { background: var(--night); border: .2rem solid var(--ink); border-radius: 1rem; box-shadow: 0 0 0 .2rem var(--marigold), 0 0 0 .4rem var(--ink); }

#toast { position: fixed; z-index: 60; left: 50%; top: calc(var(--st) + .5rem); transform: translate(-50%, -150%); padding: .55rem 1.1rem .35rem;
  background: var(--cream); color: var(--ink); border: .17rem solid var(--ink); border-radius: .6rem; font-size: 1.35rem; font-weight: 600;
  box-shadow: .2rem .2rem 0 var(--pink); transition: transform .25s cubic-bezier(.3, 1.5, .5, 1), opacity .2s; opacity: 0; pointer-events: none; max-width: 80vw; text-align: center; }
#toast.show { transform: translate(-50%, 0); opacity: 1; }

#ioshint { position: fixed; z-index: 40; left: 50%; bottom: calc(var(--sb) + .4rem); transform: translate(-50%, 200%); display: flex; align-items: center; gap: .6rem;
  padding: .3rem .4rem .2rem 1rem; background: var(--ink); color: var(--cream); border: .14rem solid var(--turq); border-radius: 2rem; font-size: 1.15rem;
  transition: transform .3s; white-space: nowrap; }
#ioshint b { color: var(--turq); font-weight: 600; }
#ioshint svg { vertical-align: -.15em; color: var(--turq); }
#ioshint.show { transform: translate(-50%, 0); }
#ioshint .x { width: 2.6rem; height: 2.6rem; border-radius: 50%; font-size: 1.1rem; color: var(--cream); background: var(--plum); }

#rotate { position: fixed; inset: 0; z-index: 100; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; text-align: center; padding: 2rem;
  background: radial-gradient(circle, rgba(255, 176, 0, .12) 3px, transparent 4px) 0 0 / 22px 22px, var(--deep); color: var(--cream); }
#rotate svg { animation: tilt 1.8s ease-in-out infinite; }
#rotate b { font-family: var(--display); font-weight: 400; font-size: 30px; color: var(--marigold); text-shadow: 2px 2px 0 var(--magenta); }
#rotate span { font-size: 22px; max-width: 18em; }
@keyframes tilt { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }
/* body.portrait is set by main.js from platform.js's PORTRAIT_QUERY (the same test that pauses the race). */
body.portrait #rotate { display: flex; }

/* ---------------------------------------------------------------- logo */
.logo { display: flex; flex-direction: column; align-items: center; }
.logo-main { display: flex; gap: .7em; font-family: var(--display); font-size: 3rem; line-height: 1; padding-top: .15em;
  filter: drop-shadow(.06em .06em 0 var(--magenta)) drop-shadow(.05em .05em 0 var(--ink)) drop-shadow(-.025em -.025em 0 var(--ink)); }
.logo.big .logo-main { font-size: 5.1rem; }
.logo .word { display: inline-flex; }
.logo .ch { display: inline-block; color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(180deg, #fff6b0 0%, var(--yellow) 30%, var(--marigold) 55%, var(--saffron) 100%);
  -webkit-text-stroke: .025em var(--ink); padding: 0 .02em; transform: rotate(calc((var(--i) - 3) * .4deg)); }
.logo .word + .word .ch { background-image: linear-gradient(180deg, #ffffff 0%, #b8fbff 35%, var(--turq) 60%, var(--teal) 100%); }
.logo-hi { margin-top: -.15rem; position: relative; }
.logo-hi span { position: relative; display: inline-block; font-family: var(--display); font-size: 1.75rem; line-height: 1; color: var(--cream);
  padding: .3rem 2.2rem .1rem; background: var(--pink); text-shadow: .08rem .08rem 0 var(--ink);
  clip-path: polygon(0 0, 100% 0, calc(100% - 1.1rem) 50%, 100% 100%, 0 100%, 1.1rem 50%);
  box-shadow: inset 0 .22rem 0 rgba(255, 255, 255, .3), inset 0 -.22rem 0 rgba(0, 0, 0, .2); }
.logo.big .logo-hi span { font-size: 2.1rem; }
.logo-hi::before { content: ''; position: absolute; inset: .35rem -1rem -.35rem; background: var(--magenta); z-index: -1; filter: brightness(.6);
  clip-path: polygon(0 0, 100% 0, calc(100% - 1rem) 50%, 100% 100%, 0 100%, 1rem 50%); }

/* ---------------------------------------------------------------- title */
.screen.title { align-items: center; justify-content: space-between; cursor: pointer;
  background: linear-gradient(180deg, rgba(27, 13, 42, .7) 0%, rgba(27, 13, 42, 0) 42%, rgba(27, 13, 42, 0) 70%, rgba(27, 13, 42, .75) 100%); }
.title-top { display: flex; align-items: center; gap: 1.2rem; margin-top: .8rem; animation: drop .7s cubic-bezier(.2, 1.4, .4, 1) both; }
.title-top .nazar-wrap { width: 3.2rem; height: 3.2rem; animation: sway 3s ease-in-out infinite; transform-origin: 50% -1rem; }
.title-top .nazar-wrap.right { animation-delay: -1.5s; }
@keyframes sway { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
@keyframes drop { from { transform: translateY(-120%) scale(.9); opacity: 0; } }
.title-tap { display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .6rem 1.8rem .35rem; background: var(--ink); border-radius: .6rem;
  border: .17rem solid var(--marigold); box-shadow: 0 0 0 .2rem var(--ink), 0 0 1.4rem rgba(255, 46, 136, .5); animation: pulse 1.3s ease-in-out infinite; }
.title-tap span { font-family: var(--display); font-size: 1.8rem; color: var(--yellow); letter-spacing: .06em; }
.title-tap small { font-size: 1.1rem; color: var(--turq); letter-spacing: .08em; }
@keyframes pulse { 50% { transform: scale(1.05); } }
.title-foot { width: 100%; display: flex; justify-content: space-between; align-items: flex-end; }
.plate { font-family: var(--display); font-size: 1.05rem; color: var(--ink); background: var(--yellow); padding: .3rem .8rem .1rem; border: .14rem solid var(--ink); border-radius: .3rem;
  box-shadow: inset 0 0 0 .14rem var(--yellow), inset 0 0 0 .26rem var(--ink); }
.ver { font-size: 1rem; opacity: .55; }
body[data-screen="title"] #ioshint.show ~ * .title-foot, body[data-screen="title"] .title-foot { padding-bottom: .1rem; }

/* ---------------------------------------------------------------- story dialog */
.screen.story { justify-content: flex-end; background: linear-gradient(180deg, rgba(27, 13, 42, .25), rgba(27, 13, 42, .85)); }
.dlg { position: relative; display: flex; gap: 1rem; align-items: stretch; min-height: 8.6rem; margin: 0 .2rem .3rem; padding: .7rem .9rem .7rem .7rem; cursor: pointer;
  background: var(--cream); color: var(--ink); border: .2rem solid var(--ink); border-radius: 1rem; box-shadow: 0 0 0 .22rem var(--pink), 0 0 0 .42rem var(--ink), 0 .6rem 0 .42rem rgba(0, 0, 0, .35);
  animation: rise .35s cubic-bezier(.2, 1.3, .4, 1) both; }
.dlg::before { content: ''; position: absolute; left: 1rem; right: 1rem; top: -.6rem; height: 1.1rem; --d1: var(--marigold); background: var(--dots); }
@keyframes rise { from { transform: translateY(120%); } }
.dlg-face { flex: none; position: relative; width: 7.4rem; display: flex; flex-direction: column; align-items: center; }
.dlg-face img { width: 6.6rem; height: 6.6rem; border-radius: 50%; background: radial-gradient(circle, var(--turq) 55%, var(--teal)); border: .2rem solid var(--ink);
  box-shadow: 0 0 0 .22rem var(--marigold), 0 0 0 .38rem var(--ink); object-fit: cover; }
.dlg-name { margin-top: -.6rem; position: relative; font-family: var(--display); font-size: 1.15rem; padding: .2rem .7rem 0; background: var(--pink); color: var(--cream);
  border: .15rem solid var(--ink); border-radius: .4rem; transform: rotate(-3deg); }
.dlg-body { flex: 1; position: relative; display: flex; align-items: center; padding-right: 1.6rem; }
.dlg-text { margin: 0; font-family: var(--num); font-weight: 500; font-size: 1.95rem; line-height: 1.05; min-height: 2.1em; }
.dlg-next { position: absolute; right: 0; bottom: 0; color: var(--pink); font-size: 1.4rem; opacity: 0; }
.dlg-next.ready { opacity: 1; animation: bob .7s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(.3rem); } }
.dlg-count { position: absolute; right: 0; top: -.2rem; font-size: 1rem; color: var(--magenta); font-weight: 600; }
.skip { position: absolute; top: var(--st); right: var(--sr); height: 3rem; padding: .3rem 1.1rem 0; font-family: var(--num); font-weight: 600; font-size: 1.35rem; letter-spacing: .08em;
  color: var(--cream); background: rgba(26, 15, 31, .8); border: .14rem solid var(--cream); border-radius: 1.5rem; }
.story.has-banner { justify-content: space-between; }

.lvl-banner { align-self: center; margin-top: 1.2rem; display: flex; flex-direction: column; align-items: center; padding: .7rem 3rem .5rem; position: relative;
  background: var(--marigold); color: var(--ink); border: .22rem solid var(--ink); border-radius: .4rem; box-shadow: 0 0 0 .25rem var(--pink), 0 0 0 .45rem var(--ink), 0 0 3rem rgba(255, 176, 0, .5);
  animation: stamp .55s cubic-bezier(.2, 1.6, .4, 1) both; }
.lvl-banner::before, .lvl-banner::after { content: ''; position: absolute; top: .4rem; bottom: .4rem; width: 1.2rem; --z1: var(--pink); --z2: var(--marigold);
  background: linear-gradient(45deg, var(--pink) 25%, transparent 25%) 0 -.5rem / 1rem 1rem, linear-gradient(135deg, var(--pink) 25%, transparent 25%) 0 -.5rem / 1rem 1rem; }
.lvl-banner::before { left: .5rem; } .lvl-banner::after { right: .5rem; transform: scaleX(-1); }
@keyframes stamp { from { transform: scale(2.4) rotate(-8deg); opacity: 0; } }
.lb-small { font-size: 1.1rem; font-weight: 600; letter-spacing: .3em; }
.lb-name { font-family: var(--display); font-weight: 400; font-size: 2.6rem; line-height: 1; }
.lb-hi { font-family: var(--display); font-size: 2.2rem; color: var(--magenta); line-height: 1.1; }
.lb-purse { font-size: 1.15rem; font-weight: 600; }

/* ---------------------------------------------------------------- garage */
.garage-bar { gap: 1rem; }
.shop-sign { flex: 1; display: flex; flex-direction: column; padding-top: .2rem; }
.shop-sign b { font-family: var(--display); font-weight: 400; font-size: 1.85rem; line-height: 1; color: var(--marigold); text-shadow: .12rem .12rem 0 var(--magenta), .22rem .22rem 0 var(--ink); }
.shop-sign span { font-size: 1.05rem; color: var(--turq); letter-spacing: .04em; margin-top: .1rem; font-family: var(--num); }
.garage-body { flex: 1; display: grid; grid-template-columns: 1.15fr 1fr; gap: 1.2rem; padding-top: .8rem; min-height: 0; }
.stage { position: relative; display: flex; flex-direction: column; justify-content: flex-end; border-radius: 1rem; overflow: hidden; cursor: pointer;
  background:
    linear-gradient(180deg, transparent 72%, rgba(0, 0, 0, .3) 72%),
    repeating-linear-gradient(180deg, #3d2357 0 .5rem, #321c49 .5rem .6rem),
    var(--plum);
  border: .2rem solid var(--ink); box-shadow: 0 0 0 .22rem var(--turq), 0 0 0 .42rem var(--ink); }
.stage::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: .9rem; --z1: var(--marigold); --z2: var(--pink); background: var(--zig); border-bottom: .15rem solid var(--ink); }
.stage-bike { flex: 1; display: grid; place-items: end center; padding-bottom: .2rem; min-height: 0; }
.bike3 { width: auto; height: 100%; max-height: 10.5rem; max-width: 90%; object-fit: contain; filter: drop-shadow(0 .4rem 0 rgba(0, 0, 0, .35)); }
.stage-plate { position: relative; padding: .45rem .9rem .3rem; background: var(--ink); border-top: .15rem solid var(--marigold); }
.stage-plate b { display: block; font-family: var(--display); font-weight: 400; font-size: 1.35rem; color: var(--yellow); }
.stage-plate span { font-size: 1.1rem; color: var(--cream); opacity: .85; }
.hub { display: flex; flex-direction: column; gap: .75rem; min-height: 0; }
.hub-level { display: flex; align-items: center; gap: .8rem; }
.qwrap { display: grid; grid-template-columns: auto 1fr; column-gap: .4rem; align-items: baseline; }
.qwrap b { font-size: 2rem; font-weight: 600; color: var(--parrot); line-height: 1; }
.qwrap span { font-size: 1.1rem; }
.qticks { grid-column: 1 / -1; display: flex; gap: .25rem; margin-top: .15rem; }
.qticks i { width: .9rem; height: .9rem; border-radius: 50%; background: var(--plum); border: .12rem solid var(--ink); box-shadow: 0 0 0 .1rem rgba(255, 244, 214, .3); }
.qticks i.on { background: var(--parrot); }
.btn.big { min-height: 5rem; font-size: 2.4rem; border-radius: 1.1rem; }
.btn.race { flex: 1; max-height: 6.4rem; }
.btn.race small { font-size: 1.1rem; }
.hub-row { display: flex; gap: .75rem; }
.hub-row > .btn { flex: 1; }
.hub-row.small { align-items: center; }
.hub-row.small > .btn { flex: none; font-size: 1.05rem; min-height: 3rem; }
.hub-hint { flex: 1; font-size: 1.15rem; color: var(--yellow); line-height: 1; }

/* ---------------------------------------------------------------- track select */
.ltabs { display: flex; gap: .4rem; padding: .55rem 0 .4rem; flex: none; }
.ltab { display: flex; align-items: center; gap: .35rem; height: 2.6rem; padding: .2rem .8rem 0; border-radius: .5rem; background: var(--plum); border: .15rem solid var(--ink); color: var(--cream); font-size: 1.15rem; }
.ltab b { font-family: var(--display); font-weight: 400; font-size: 1.2rem; color: var(--marigold); }
.ltab.on { background: var(--marigold); color: var(--ink); box-shadow: 0 .18rem 0 var(--ink); }
.ltab.on b { color: var(--magenta); }
.ltab.locked { opacity: .45; }
.ltab .ic { width: 1rem; height: 1rem; }
.cards { flex: 1; display: flex; gap: .9rem; overflow-x: auto; overflow-y: hidden; padding: .4rem .3rem .6rem; scroll-snap-type: x mandatory; scrollbar-width: none; min-height: 0; }
.cards::-webkit-scrollbar { display: none; }
.cards { align-items: center; }
.card { flex: none; width: 14.5rem; height: 100%; max-height: 18.5rem; display: flex; flex-direction: column; text-align: left; scroll-snap-align: start; border-radius: .8rem; overflow: hidden;
  background: var(--cream); color: var(--ink); border: .2rem solid var(--ink); box-shadow: .3rem .3rem 0 var(--ink); transition: transform .08s; }
.card:active { transform: translate(.15rem, .15rem); box-shadow: .1rem .1rem 0 var(--ink); }
.card-img { position: relative; aspect-ratio: 16 / 9; background: repeating-linear-gradient(45deg, var(--plum) 0 .6rem, var(--night) .6rem 1.2rem); border-bottom: .2rem solid var(--ink); flex: none; }
.card-img img { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.card-img img:not([src]) { visibility: hidden; }
.tod { position: absolute; left: .35rem; top: .35rem; display: flex; gap: .2rem; padding: .25rem .35rem; background: rgba(26, 15, 31, .8); border-radius: .4rem; }
.tod .ic { width: 1.25rem; height: 1.25rem; }
.qbadge { position: absolute; right: .35rem; top: .35rem; width: 2.1rem; height: 2.1rem; padding: .3rem; border-radius: 50%; background: var(--ink); border: .14rem solid var(--parrot); }
.qbadge svg { width: 100%; height: 100%; display: block; }
.card-txt { flex: 1; display: flex; flex-direction: column; padding: .45rem .7rem .4rem; position: relative; min-height: 0; }
.card-city { font-family: var(--display); font-weight: 400; font-size: 1.5rem; line-height: 1.05; color: var(--magenta); }
.card-name { font-size: 1.2rem; font-weight: 600; }
.card-tag { font-size: 1.1rem; font-style: normal; color: var(--teal); line-height: 1; margin-top: .1rem; }
.card-best { margin-top: auto; padding-top: .3rem; font-size: 1.05rem; font-weight: 600; color: #7a5a8a; }
.card.done { box-shadow: .3rem .3rem 0 var(--green); }
.card.done .card-best { color: var(--green); }

/* ---------------------------------------------------------------- briefing */
.brief-body { flex: 1; display: grid; grid-template-columns: 1fr 1.45fr .95fr; gap: 1rem; padding-top: .7rem; min-height: 0; }
.brief-info { display: flex; flex-direction: column; gap: .3rem; min-height: 0; }
.bi-city { font-family: var(--display); font-weight: 400; font-size: 1.5rem; color: var(--turq); line-height: 1.05; }
.bi-tag { font-size: 1.3rem; font-style: normal; color: var(--yellow); }
.bi-facts { display: flex; gap: .3rem; margin: .1rem 0 .2rem; white-space: nowrap; }
.bi-facts > span { padding: .2rem .4rem .02rem; background: var(--plum); border-radius: .3rem; font-size: 1.05rem; }
.purse { flex: 1; display: flex; flex-direction: column; justify-content: space-between; background: var(--cream); color: var(--ink); border: .17rem solid var(--ink); border-radius: .5rem; padding: .3rem .6rem; min-height: 0; }
.purse-h { font-family: var(--display); font-size: 1.1rem; color: var(--magenta); }
.prow { display: flex; justify-content: space-between; font-size: 1.08rem; line-height: 1.08; border-bottom: .08rem dashed rgba(26, 15, 31, .25); }
.prow b { font-weight: 600; }
.prow.q b { color: var(--green); }
.prow.ko { border: 0; color: var(--magenta); }
.brief-rivals { display: flex; flex-direction: column; min-height: 0; }
.br-h { font-family: var(--display); font-size: 1.2rem; color: var(--pink); margin-bottom: .3rem; }
.rgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: .45rem .4rem; }
.rchip { position: relative; display: flex; flex-direction: column; align-items: center; }
.rchip img { width: 3.6rem; height: 3.6rem; border-radius: .5rem; background: var(--turq); border: .15rem solid var(--ink); box-shadow: 0 0 0 .12rem var(--cream); }
.rchip.grudge img { box-shadow: 0 0 0 .16rem var(--verm); background: var(--verm); }
.rchip.boss img { background: #000; box-shadow: 0 0 0 .16rem var(--red); }
.rc-name { font-size: 1rem; margin-top: .15rem; white-space: nowrap; }
.rc-g { position: absolute; right: -.1rem; top: -.35rem; display: flex; color: var(--verm); filter: drop-shadow(0 0 .1rem var(--ink)); }
.rc-g svg { width: .95rem; height: .95rem; }
.brief-go { display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; gap: .5rem; }
.bg-bike { display: flex; flex-direction: column; align-items: center; font-size: 1.15rem; color: var(--yellow); }
.bike2 { width: 100%; max-height: 5rem; object-fit: contain; }
.btn.go { min-height: 6rem; font-size: 2.6rem; }

/* ---------------------------------------------------------------- results / bills */
.screen.results { flex-direction: row; gap: 1.4rem; align-items: stretch; background: linear-gradient(90deg, rgba(27, 13, 42, .55), rgba(27, 13, 42, .9) 55%); }
.res-left { flex: 1.1; display: flex; flex-direction: column; justify-content: center; gap: .7rem; }
.res-place { display: flex; flex-direction: column; animation: stamp .5s cubic-bezier(.2, 1.6, .4, 1) both; }
.res-place b { font-family: var(--display); font-weight: 400; font-size: 5rem; line-height: .95; color: var(--cream);
  text-shadow: .2rem .2rem 0 var(--magenta), .38rem .38rem 0 var(--ink); }
.res-place.qual b { color: var(--yellow); }
.res-place span { font-size: 1.5rem; color: var(--turq); }
.res-quals { display: flex; align-items: center; gap: .8rem; }
.stamp { font-family: var(--display); font-size: 1.15rem; padding: .3rem .7rem .05rem; border: .18rem solid; border-radius: .3rem; transform: rotate(-4deg); }
.stamp.ok { color: var(--parrot); border-color: var(--parrot); }
.stamp.no { color: var(--verm); border-color: var(--verm); }
.res-time { font-size: 1.15rem; opacity: .8; }
.quote { display: flex; gap: .7rem; align-items: center; background: rgba(26, 15, 31, .85); border: .15rem solid var(--plum); border-radius: .8rem; padding: .5rem .8rem .5rem .5rem; max-width: 25rem; }
.quote img { width: 3.8rem; height: 3.8rem; border-radius: .5rem; background: var(--turq); border: .15rem solid var(--ink); flex: none; }
.quote b { font-family: var(--display); font-weight: 400; font-size: 1.1rem; color: var(--pink); }
.quote p { margin: .1rem 0 0; font-size: 1.35rem; line-height: 1.05; }
.res-right { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: .6rem; }
.bill { background: var(--cream); color: var(--ink); border: .2rem solid var(--ink); border-radius: .4rem; padding: .5rem .9rem .4rem; position: relative;
  box-shadow: .35rem .35rem 0 var(--ink); transform: rotate(.6deg); animation: rise .4s .1s cubic-bezier(.2, 1.2, .4, 1) both; }
.bill::before { content: ''; position: absolute; left: 0; right: 0; top: -.6rem; height: .65rem;
  background: radial-gradient(circle at 50% 0, transparent .32rem, var(--cream) .34rem) 0 0 / .8rem .7rem repeat-x; }
.bill-h { font-family: var(--display); font-size: 1.35rem; color: var(--magenta); border-bottom: .14rem solid var(--ink); margin-bottom: .2rem; }
.bl { display: flex; justify-content: space-between; gap: 1rem; font-size: 1.3rem; line-height: 1.25; }
.bl b { font-weight: 600; }
.bl.pos b { color: var(--green); }
.bl.neg b { color: var(--red); }
.bl.total { border-top: .14rem dashed var(--ink); margin-top: .2rem; padding-top: .15rem; font-size: 1.7rem; }
.res-bal { font-size: 1.3rem; text-align: right; }
.res-bal b { color: var(--yellow); font-size: 1.6rem; }
.res-btns { display: flex; gap: .7rem; justify-content: flex-end; }
.res-btns .wide { flex: 1; }

.screen.challan { align-items: center; justify-content: center; background: rgba(15, 8, 25, .78); }
.echallan { position: relative; width: min(42rem, 100%); max-height: 100%; background: #fbfbf7; color: #1f2a44; border-radius: .5rem; overflow: hidden;
  box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .6); border: .1rem solid #b9c0cc; animation: rise .4s cubic-bezier(.2, 1.2, .4, 1) both;
  font-family: var(--num); display: flex; flex-direction: column; }
.ec-head { display: flex; align-items: center; gap: .8rem; padding: .45rem 1rem .35rem; color: #fff;
  background: linear-gradient(90deg, #1b3a8a, #2c5cc5); border-bottom: .3rem solid; border-image: linear-gradient(90deg, #ff9933 33%, #fff 33% 66%, #138808 66%) 1; }
.ec-seal { width: 2.6rem; height: 2.6rem; display: grid; place-items: center; border-radius: 50%; background: #fff; color: #1b3a8a; font-family: var(--display); font-size: 1.6rem; border: .15rem solid #ffcf5a; }
.ec-head b { display: block; font-size: 1.7rem; font-weight: 600; letter-spacing: .06em; line-height: 1; }
.ec-head span { font-size: 1.1rem; }
.ec-head small { display: block; font-size: .95rem; opacity: .8; }
.ec-body { display: flex; gap: 1rem; padding: .55rem 1rem .3rem; min-height: 0; }
.ec-grid { flex: 1; display: grid; grid-template-columns: auto 1fr; gap: .1rem .9rem; font-size: 1.12rem; line-height: 1.15; align-content: start; }
.ec-grid > span { color: #6a7387; }
.ec-grid > b { font-weight: 600; }
.ec-grid > i { font-style: normal; color: #444; }
.ec-plate { display: inline-block; justify-self: start; padding: .1rem .5rem 0; background: #fff; border: .12rem solid #222; border-radius: .2rem; letter-spacing: .08em; }
.ec-off { color: #b3121f; }
.ec-side { display: flex; flex-direction: column; align-items: center; gap: .2rem; color: #6a7387; font-size: .95rem; }
.qr { width: 6.6rem; height: 6.6rem; border: .3rem solid #fff; outline: .1rem solid #ccc; }
.ec-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .5rem 1rem .6rem; background: #eef1f6; border-top: .1rem solid #d0d6e0; }
.ec-amt { display: flex; flex-direction: column; }
.ec-amt span { font-size: 1rem; color: #6a7387; }
.ec-amt b { font-size: 2.3rem; font-weight: 600; color: #b3121f; line-height: 1; }
.ec-amt small { font-size: .95rem; color: #6a7387; }
.ec-amt small.cov { color: var(--green); }
.btn.pay { color: var(--ink); min-width: 12rem; }
.paid { position: absolute; right: 9rem; top: 40%; font-family: var(--display); font-size: 3.6rem; color: #138808; border: .35rem double #138808; padding: .4rem 1rem 0; border-radius: .6rem;
  transform: rotate(-14deg) scale(3); opacity: 0; pointer-events: none; }
.paid.show { animation: paid .35s cubic-bezier(.3, 1.6, .5, 1) forwards; }
@keyframes paid { to { transform: rotate(-14deg) scale(1); opacity: .85; } }

.screen.wrecked { flex-direction: row; align-items: center; gap: 1.6rem; background: radial-gradient(ellipse at 30% 50%, rgba(120, 10, 30, .55), rgba(15, 8, 25, .92) 70%); }
.wreck-left { flex: 1; display: flex; flex-direction: column; gap: .5rem; }
.wreck-title { font-family: var(--display); font-size: 4.4rem; line-height: 1; color: var(--verm); text-shadow: .2rem .2rem 0 var(--ink); transform: rotate(-4deg); animation: stamp .5s cubic-bezier(.2, 1.6, .4, 1) both; }
.wreck-sub { font-size: 1.5rem; color: var(--cream); }
.quote.ustaad img { background: var(--marigold); }
.kbill { flex: 1; max-width: 25rem; background: #f3e9c9; color: #23305e; padding: .6rem 1rem .8rem; border-radius: .2rem; position: relative; transform: rotate(-1.2deg);
  background-image: repeating-linear-gradient(180deg, transparent 0 1.55rem, rgba(35, 48, 94, .22) 1.55rem 1.62rem); box-shadow: .35rem .35rem 0 var(--ink);
  animation: rise .45s cubic-bezier(.2, 1.2, .4, 1) both; display: flex; flex-direction: column; }
.kb-head { display: flex; flex-direction: column; border-bottom: .15rem solid #23305e; margin-bottom: .2rem; }
.kb-head b { font-family: var(--display); font-weight: 400; font-size: 1.4rem; color: var(--red); }
.kb-head span { font-size: 1rem; }
.kb-row { display: flex; justify-content: space-between; font-size: 1.25rem; line-height: 1.24; }
.kb-row b { font-weight: 600; }
.kb-row.disc { color: var(--green); }
.kb-row.total { font-size: 1.8rem; border-top: .15rem solid #23305e; margin: .2rem 0 .6rem; padding-top: .1rem; color: var(--red); }

/* ---------------------------------------------------------------- credits */
.screen.credits { align-items: center; overflow: hidden; }
.roll { display: flex; flex-direction: column; align-items: center; gap: .55rem; animation: roll 26s linear forwards; padding-top: 3rem; }
@keyframes roll { from { transform: translateY(14rem); } to { transform: translateY(-58%); } }
.champ { font-family: var(--display); font-size: 2rem; color: var(--yellow); margin-top: .8rem; text-shadow: .15rem .15rem 0 var(--magenta); }
.cstats { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem .9rem; font-size: 1.35rem; color: var(--turq); max-width: 34rem; margin-bottom: .8rem; }
.cr { display: flex; flex-direction: column; align-items: center; }
.cr span { font-size: 1.1rem; opacity: .75; }
.cr b { font-family: var(--display); font-weight: 400; font-size: 1.5rem; color: var(--cream); }
.cr-end { font-family: var(--display); font-size: 1.6rem; color: var(--pink); margin: 1.5rem 0 .5rem; }
.credits-btn { position: absolute; right: var(--sr); bottom: var(--sb); }

/* ---------------------------------------------------------------- showroom */
.sr-body { flex: 1; display: grid; grid-template-columns: 1.15fr 1fr; gap: 1.3rem; padding-top: .7rem; min-height: 0; }
.sr-left { display: flex; flex-direction: column; gap: .45rem; min-height: 0; }
.sr-stage { flex: 1; position: relative; display: flex; align-items: center; border-radius: 1rem; min-height: 0;
  background:
    radial-gradient(ellipse 60% 14% at 50% 86%, rgba(0, 0, 0, .45), transparent 70%),
    radial-gradient(ellipse at 50% 30%, rgba(255, 46, 136, .35), transparent 60%),
    repeating-conic-gradient(from 0deg at 50% 120%, #3d2357 0 6deg, #2f1a45 6deg 12deg);
  border: .2rem solid var(--ink); box-shadow: 0 0 0 .22rem var(--marigold), 0 0 0 .42rem var(--ink); }
.sr-bike { flex: 1; position: relative; display: grid; place-items: center; height: 100%; min-width: 0; }
.sr-bike .bike3 { max-height: 78%; width: 92%; }
.sr-badge { position: absolute; top: .6rem; left: 50%; transform: translateX(-50%) rotate(-3deg); font-family: var(--display); font-size: 1rem; padding: .2rem .6rem 0;
  background: var(--parrot); color: var(--ink); border: .14rem solid var(--ink); border-radius: .3rem; }
.arrow { flex: none; width: 3.1rem; height: 3.1rem; margin: 0 .4rem; border-radius: 50%; display: grid; place-items: center; font-size: 1.3rem; color: var(--ink);
  background: var(--chrome-g); border: .17rem solid var(--ink); box-shadow: 0 .2rem 0 var(--ink); z-index: 1; }
.arrow:active { transform: translateY(.15rem); box-shadow: none; }
.sr-dots { display: flex; justify-content: center; gap: .35rem; }
.sr-dots i { width: .7rem; height: .7rem; border-radius: 50%; background: var(--plum); border: .1rem solid var(--ink); }
.sr-dots i.mine { background: var(--parrot); }
.sr-dots i.on { background: var(--marigold); transform: scale(1.35); }
.sr-info { display: flex; flex-direction: column; gap: .35rem; min-height: 0; }
.sr-name { font-family: var(--display); font-weight: 400; font-size: 1.75rem; line-height: 1.05; color: var(--yellow); text-shadow: .12rem .12rem 0 var(--magenta); }
.sr-blurb { font-style: normal; font-size: 1.2rem; color: var(--cream); opacity: .85; line-height: 1.05; }
.stats { display: flex; flex-direction: column; gap: .3rem; margin: .2rem 0; }
.stat { display: grid; grid-template-columns: 5.6rem 1fr 4.2rem; align-items: center; gap: .5rem; font-size: 1.15rem; }
.stat i { position: relative; height: .85rem; background: var(--ink); border-radius: .2rem; overflow: visible; box-shadow: 0 0 0 .1rem var(--plum); }
.stat s { position: absolute; inset: 0; transform-origin: left; border-radius: .2rem; background: linear-gradient(90deg, var(--pink), var(--marigold)); }
.stat u { position: absolute; top: -.2rem; bottom: -.2rem; width: .2rem; background: var(--cream); }
.stat em { font-style: normal; text-align: right; color: var(--turq); font-weight: 600; }
.sr-price { display: flex; gap: 1.3rem; }
.sr-price div { display: flex; flex-direction: column; }
.sr-price span { font-size: 1rem; opacity: .75; }
.sr-price b { font-size: 1.6rem; font-weight: 600; color: var(--cream); line-height: 1; }
.sr-info > .btn, .sr-own, .sr-broke { margin-top: auto; }
.btn.buy { min-height: 3.6rem; font-size: 1.6rem; flex-direction: row; gap: .8rem; justify-content: space-between; }
.btn.buy small { font-size: 1.4rem; opacity: 1; }
.btn.buy.armed { --b: var(--marigold); animation: armed .5s ease-in-out infinite alternate; }
.btn.buy.armed small { font-size: 1.05rem; }
@keyframes armed { to { filter: brightness(1.15); } }
.sr-price .sr-net b { color: var(--marigold); }
.sr-price .sr-net.credit b { color: var(--parrot); }
.sr-own { padding: .7rem 1rem .5rem; border: .15rem dashed var(--turq); border-radius: .7rem; font-size: 1.3rem; color: var(--turq); text-align: center; }
.sr-broke { display: flex; flex-direction: column; align-items: center; padding: .5rem 1rem .4rem; border-radius: .7rem; background: var(--ink); border: .15rem solid var(--verm); }
.sr-broke b { font-family: var(--display); font-weight: 400; font-size: 1.5rem; color: var(--verm); }
.sr-broke span { font-size: 1.15rem; }

/* ---------------------------------------------------------------- rivals */
.rcards { flex: 1; display: flex; gap: .9rem; overflow-x: auto; padding: .8rem .3rem .6rem; scroll-snap-type: x mandatory; scrollbar-width: none; min-height: 0; }
.rcards::-webkit-scrollbar { display: none; }
.rcards { align-items: center; }
.rcard { flex: none; width: 15.5rem; display: flex; flex-direction: column; gap: .4rem; padding: .7rem; scroll-snap-align: start; border-radius: .8rem;
  background: var(--cream); color: var(--ink); border: .2rem solid var(--ink); box-shadow: .3rem .3rem 0 var(--pink); }
.rcard:nth-child(3n+2) { box-shadow: .3rem .3rem 0 var(--turq); }
.rcard:nth-child(3n) { box-shadow: .3rem .3rem 0 var(--marigold); }
.rcard.boss { background: #1a1a1a; color: var(--cream); box-shadow: .3rem .3rem 0 var(--red); }
.rc-top { display: flex; gap: .6rem; align-items: center; }
.rc-top .face { width: 4.6rem; height: 4.6rem; border-radius: .6rem; background: var(--turq); border: .17rem solid var(--ink); flex: none; }
.rcard.boss .face { background: #000; border-color: var(--red); }
.rc-top b { display: block; font-family: var(--display); font-weight: 400; font-size: 1.35rem; line-height: 1.05; color: var(--magenta); }
.rcard.boss .rc-top b { color: var(--red); }
.rc-top span { display: block; font-size: 1.1rem; }
.rc-bike { color: var(--teal); font-weight: 600; }
.rc-bio { flex: 1; margin: 0; font-size: 1.2rem; line-height: 1.08; }
.rc-foot { display: flex; align-items: center; gap: .3rem; font-size: .9rem; font-weight: 600; min-width: 0; }
.rc-foot > span:first-child { flex: none; }
.gmeter { flex: none; }
.gmeter { display: flex; gap: .05rem; color: rgba(26, 15, 31, .2); }
.rcard.boss .gmeter { color: rgba(255, 255, 255, .2); }
.gmeter i { width: 1rem; height: 1rem; }
.gmeter i.on { color: var(--verm); }
.gmeter svg { width: 100%; height: 100%; display: block; }
.rc-w { margin-left: auto; display: flex; align-items: center; gap: .2rem; min-width: 0; flex: 0 1 auto; }
.rc-w img { width: 1.5rem; height: 1.5rem; flex: none; }
.rc-wn { min-width: 0; overflow: hidden; white-space: normal; line-height: 1; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere; }
.rcards { align-items: flex-start; }
.rcard.mystery { align-self: stretch; justify-content: center; align-items: center; text-align: center; max-height: 100%; }
.rcard.mystery .q { font-family: var(--display); font-size: 5rem; line-height: 1; color: var(--red); text-shadow: .2rem .2rem 0 #000; }


/* ---------------------------------------------------------------- settings */
.swrap { flex: 1; position: relative; min-height: 0; display: flex; flex-direction: column; }
/* The column gutter (3.4rem) is wider than the scroll cue (2.4rem), and the cue sits centred in it, so
   it never covers a control in either column whatever the scroll position (it used to eat the right
   ~8 px of the Vibration toggle). The scrollbar is hidden so the gutter stays centred on desktop too. */
.sgrid { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 0 3.4rem; overflow-y: auto; padding: .3rem .2rem 1rem; min-height: 0; align-items: start; scrollbar-width: none; }
.sgrid::-webkit-scrollbar { display: none; }
.swrap::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3.2rem; pointer-events: none; opacity: 0; transition: opacity .2s;
  background: linear-gradient(180deg, rgba(27, 13, 42, 0), rgba(27, 13, 42, .95)); }
.scue { position: absolute; left: 50%; bottom: .2rem; z-index: 1; width: 2.4rem; height: 2.6rem; margin-left: -1.2rem; border-radius: 1.1rem; font-size: 1.1rem; line-height: 1;
  color: var(--ink); background: var(--marigold); border: .15rem solid var(--ink); box-shadow: 0 .15rem 0 var(--ink); opacity: 0; pointer-events: none; transition: opacity .2s; }
.swrap.more::after, .swrap.more .scue { opacity: 1; }
.swrap.more .scue { pointer-events: auto; animation: cue 1s ease-in-out infinite; }
@keyframes cue { 50% { transform: translateY(.25rem); } }
.scol h3 { margin: .6rem 0 .1rem; font-family: var(--display); font-weight: 400; font-size: 1.25rem; color: var(--pink); }
.srow { display: flex; align-items: center; gap: .8rem; min-height: 3.1rem; border-bottom: .1rem solid rgba(255, 244, 214, .12); }
.srow label { flex: 1; font-size: 1.35rem; display: flex; flex-direction: column; }
.srow label small { font-size: 1rem; opacity: .6; }
.srow em { width: 2.2rem; font-style: normal; text-align: right; color: var(--turq); font-size: 1.3rem; }
input[type=range] { -webkit-appearance: none; appearance: none; width: 9.5rem; height: 3rem; background: transparent; touch-action: none; }
input[type=range]::-webkit-slider-runnable-track { height: .55rem; background: linear-gradient(90deg, var(--pink), var(--marigold)); border-radius: .3rem; border: .1rem solid var(--ink); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 1.7rem; height: 1.7rem; margin-top: -.65rem; border-radius: 50%; background: var(--chrome-g); border: .15rem solid var(--ink); }
input[type=range]::-moz-range-track { height: .55rem; background: linear-gradient(90deg, var(--pink), var(--marigold)); border-radius: .3rem; }
input[type=range]::-moz-range-thumb { width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--chrome); border: .15rem solid var(--ink); }
.tog { --th: max(44px, 2.8rem); --k: calc(var(--th) - 12px); position: relative; width: calc(var(--th) * 1.75); height: var(--th); border-radius: calc(var(--th) / 2);
  background: var(--plum); border: 2px solid var(--ink); box-shadow: inset 0 .15rem 0 rgba(0, 0, 0, .3); flex: none; }
.tog::before { content: ''; position: absolute; inset: -.3rem -.2rem; } /* bigger hit area */
/* The knob sits inside the track's padding box (inner height = th - 4px) with 4px clearance all round. */
.tog i { position: absolute; top: 4px; left: 4px; width: var(--k); height: var(--k); border-radius: 50%; background: var(--chrome-g); border: 2px solid var(--ink); transition: left .15s; }
.tog.on { background: var(--parrot); }
.tog.on i { left: calc(100% - var(--k) - 4px); }
.seg { display: flex; border: .15rem solid var(--ink); border-radius: .6rem; overflow: hidden; flex: none; }
.seg button { min-height: max(44px, 2.7rem); padding: .25rem .65rem 0; font-size: 1.15rem; background: var(--plum); color: var(--cream); border-left: .1rem solid var(--ink); }
.seg button:first-child { border-left: 0; }
.seg button.on { background: var(--marigold); color: var(--ink); font-weight: 600; }
.srow.tall { min-height: 4.4rem; }
.seg.looks button { display: flex; flex-direction: column; align-items: center; padding: .25rem .5rem .1rem; font-size: 1rem; }
.seg.looks img { width: 2.6rem; height: 2.6rem; }
.btn.coachbtn { font-size: 1.05rem; min-height: max(44px, 2.8rem); padding: .35rem .9rem .15rem; margin-bottom: .3rem; }
.btn.coachbtn.done { --b: var(--plum); color: var(--turq); }
.btn.danger { font-size: 1.05rem; min-height: 3rem; --b: #5a1424; }
.btn.danger.armed { --b: var(--red); }
.sfine { font-size: 1.05rem; opacity: .55; margin: .8rem 0 0; line-height: 1.15; }

/* ---------------------------------------------------------------- pause / loading */
.screen.pause { align-items: center; justify-content: center; background: rgba(15, 8, 25, .72); }
.pause-card { display: flex; flex-direction: column; align-items: stretch; gap: .8rem; padding: 1.1rem 1.6rem 1.4rem; min-width: 22rem; border-radius: 1rem; position: relative;
  background: var(--night); border: .2rem solid var(--ink); box-shadow: 0 0 0 .22rem var(--marigold), 0 0 0 .42rem var(--ink); }
.pause-card::before { content: ''; position: absolute; left: 1rem; right: 1rem; top: -.55rem; height: 1rem; --d1: var(--pink); background: var(--dots); }
.pc-title { font-family: var(--display); font-weight: 400; font-size: 2.6rem; text-align: center; line-height: 1; color: var(--yellow); text-shadow: .15rem .15rem 0 var(--magenta); }
.pc-sub { text-align: center; font-size: 1.2rem; color: var(--turq); margin-top: -.5rem; }
.screen.loading { align-items: center; justify-content: center; gap: 1rem; background: var(--deep); }
.wheel { animation: spin 1s linear infinite; }
.wheel .nazar-wrap { width: 4rem; height: 4rem; }
@keyframes spin { to { transform: rotate(360deg); } }
.ld-text { font-size: 1.6rem; color: var(--cream); }

/* ---------------------------------------------------------------- HUD */
.hud { position: absolute; inset: 0; padding: var(--st) var(--sr) var(--sb) var(--sl); font-family: var(--num); color: var(--cream); }
.hud.hidden { display: none; }
.hud-cop { position: absolute; inset: 0; opacity: 0; pointer-events: none;
  box-shadow: inset 2.2rem 0 2.2rem -1.4rem rgba(255, 30, 60, .95), inset -2.2rem 0 2.2rem -1.4rem rgba(40, 90, 255, .95); }
.hud-cop.on { animation: copflash .5s steps(1) infinite; }
@keyframes copflash { 50% { box-shadow: inset 2.2rem 0 2.2rem -1.4rem rgba(40, 90, 255, .95), inset -2.2rem 0 2.2rem -1.4rem rgba(255, 30, 60, .95); } }
.hud-tl { position: absolute; left: var(--sl); top: var(--st); display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: .6rem; align-items: start; }
.hud-pos { display: flex; align-items: baseline; gap: .15rem; line-height: .8; padding: .5rem .7rem .1rem .55rem; background: rgba(26, 15, 31, .78); border-radius: .6rem;
  border-left: .35rem solid var(--pink); }
.pos-n { font-size: 3.6rem; font-weight: 600; color: var(--yellow); text-shadow: .12rem .12rem 0 var(--magenta); }
.pos-of { font-size: 1.4rem; font-weight: 600; color: var(--cream); }
.hud-bars { grid-column: 1 / -1; display: flex; flex-direction: column; gap: .25rem; margin-top: .35rem; }
.bar { display: flex; align-items: center; gap: .35rem; }
.bar label { width: 4.3rem; display: flex; align-items: center; gap: .2rem; font-size: 1rem; font-weight: 600; letter-spacing: .06em; text-shadow: .08rem .08rem 0 var(--ink); }
/* Heart = DUM (your stamina), spanner = GAADI (bike damage): the bar colours match the icons. */
.bic { flex: none; width: 1.05rem; height: 1.05rem; margin-top: -.15rem; filter: drop-shadow(.06rem .06rem 0 var(--ink)); }
.bic svg { width: 100%; height: 100%; display: block; }
.bar i { position: relative; width: 7.6rem; height: .95rem; background: rgba(26, 15, 31, .8); border: .12rem solid var(--ink); border-radius: .2rem; overflow: hidden; }
.bar s { position: absolute; inset: 0; transform-origin: left; }
.bar-hp s { background: linear-gradient(180deg, #ff7ab5, var(--pink) 50%, var(--magenta)); }
.bar-bike s { background: linear-gradient(180deg, #8af5f7, var(--turq) 50%, var(--teal)); }
.bar.low i { animation: lowblink .4s steps(1) infinite; }
@keyframes lowblink { 50% { border-color: var(--yellow); } }
.hud-weapon { display: flex; flex-direction: column; align-items: center; padding: .25rem .3rem .1rem; background: rgba(26, 15, 31, .78); border-radius: .5rem; border: .14rem solid var(--marigold); }
.hud-weapon img { width: 2.6rem; height: 2.6rem; }
.hud-weapon span { font-size: .95rem; color: var(--marigold); white-space: nowrap; }
.hud-weapon.empty { visibility: hidden; }
.hud-weapon.pop { animation: wpop .5s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes wpop { from { transform: scale(2); } }

.hud-top { position: absolute; left: 50%; top: var(--st); transform: translateX(-50%); width: min(40vw, 22rem); display: flex; flex-direction: column; align-items: center; }
.hud-pause { width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: 50%; pointer-events: auto; color: var(--cream);
  background: rgba(26, 15, 31, .72); border: .14rem solid rgba(255, 244, 214, .6); }
.hud-pause svg { width: 1.3rem; height: 1.3rem; }
.hud-strip { width: 100%; margin-top: .45rem; }
.strip-track { position: relative; height: .5rem; border-radius: .25rem; background: rgba(26, 15, 31, .75); border: .1rem solid rgba(255, 244, 214, .5); }
.strip-flag { position: absolute; right: -.5rem; top: -.45rem; width: .9rem; height: .9rem;
  background: conic-gradient(var(--cream) 25%, var(--ink) 0 50%, var(--cream) 0 75%, var(--ink) 0) 0 0 / .45rem .45rem; border: .08rem solid var(--ink); }
.dot { position: absolute; top: 50%; width: .62rem; height: .62rem; margin: -.31rem 0 0 -.31rem; border-radius: 50%; background: var(--cream); border: .1rem solid var(--ink); }
.dot.player { width: 1.05rem; height: 1.05rem; margin: -.52rem 0 0 -.52rem; background: var(--pink); border: .14rem solid var(--yellow); z-index: 2; }
.dot.cop { animation: copdot .4s steps(1) infinite; background: #ff2030; z-index: 1; }
@keyframes copdot { 50% { background: #2a5bff; } }
.dot.down { opacity: .35; }
.hud-target { display: flex; align-items: center; gap: .35rem; margin-top: .45rem; padding: .2rem .5rem .05rem; background: rgba(26, 15, 31, .8); border-radius: .4rem; opacity: 0; transition: opacity .12s; }
.hud-target.show { opacity: 1; }
.hud-target.right { flex-direction: row-reverse; }
.tg-arrow { color: var(--verm); font-size: 1rem; }
.tg-name { font-size: 1.25rem; font-weight: 600; color: var(--yellow); white-space: nowrap; }
.hud-target i { position: relative; width: 5.5rem; height: .6rem; background: var(--ink); border-radius: .15rem; overflow: hidden; }
.hud-target s { position: absolute; inset: 0; transform-origin: left; background: var(--verm); }

.hud-tr { position: absolute; right: var(--sr); top: var(--st); display: flex; flex-direction: column; align-items: flex-end; }
.hud-speed { display: flex; align-items: baseline; gap: .25rem; line-height: .8; padding: .5rem .55rem .1rem .8rem; background: rgba(26, 15, 31, .78); border-radius: .6rem; border-right: .35rem solid var(--turq); }
.hud-speed b { font-size: 3.6rem; font-weight: 600; min-width: 2.2ch; text-align: right; color: var(--cream); text-shadow: .12rem .12rem 0 var(--teal); font-variant-numeric: tabular-nums; }
.hud-speed span { font-size: 1.15rem; color: var(--turq); }
.hud-dist { margin-top: .25rem; font-size: 1.15rem; font-weight: 600; text-shadow: .08rem .08rem 0 var(--ink); }
.hud-copchip { margin-top: .3rem; padding: .25rem .6rem .05rem; font-size: 1.25rem; font-weight: 600; letter-spacing: .1em; border-radius: .3rem; color: #fff; opacity: 0;
  animation: copdotbg .4s steps(1) infinite; }
.hud-copchip.show { opacity: 1; }
@keyframes copdotbg { 0% { background: #d0102a; } 50% { background: #1f48e0; } }

.hud-msgs { position: absolute; left: 0; right: 0; top: 18%; display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.msg { font-family: var(--display); font-size: 2.1rem; line-height: 1; padding: .2rem .8rem 0; color: var(--yellow); white-space: nowrap;
  text-shadow: .14rem .14rem 0 var(--magenta), .26rem .26rem 0 var(--ink), -.08rem -.08rem 0 var(--ink); will-change: transform; }
.msg.sub { font-size: 2rem; }
.msg.k-hit, .msg.k-ko, .msg.k-knockout { color: var(--yellow); }
.msg.k-warn, .msg.k-wrong, .msg.k-danger { color: var(--verm); text-shadow: .14rem .14rem 0 var(--cream), .26rem .26rem 0 var(--ink); }
.msg.k-cop, .msg.k-busted { color: #fff; text-shadow: .14rem .14rem 0 #1f48e0, .26rem .26rem 0 var(--ink); }
.msg.k-weapon, .msg.k-pickup { color: var(--parrot); }
.msg.k-josh, .msg.k-boost { color: var(--turq); }
.hud-count { position: absolute; left: 0; right: 0; top: 22%; text-align: center; font-family: var(--display); font-size: 7rem; line-height: 1; color: var(--yellow); opacity: 0;
  text-shadow: .25rem .25rem 0 var(--magenta), .45rem .45rem 0 var(--ink); pointer-events: none; }
.hud-count.show { opacity: 1; animation: count .9s ease-out infinite; }
.hud-count.go { color: var(--parrot); font-size: 6rem; animation: go .9s ease-out forwards; }
@keyframes count { from { transform: scale(1.6); } 30% { transform: scale(1); } }
@keyframes go { from { transform: scale(.5) rotate(-6deg); } 25% { transform: scale(1.15) rotate(-4deg); } to { transform: scale(1.3) rotate(-4deg); opacity: 0; } }
/* ---- feel juice (hud.js): JOSH bar, position pop, near-miss streak, impact banner */
.bar-josh s { background: linear-gradient(180deg, #8af5f7, var(--turq) 50%, var(--teal)); }
.bar-josh.ready i { border-color: var(--turq); }
.bar-josh.full i { border-color: var(--yellow); box-shadow: 0 0 .5rem var(--turq), 0 0 1rem rgba(0, 194, 199, .7); animation: joshbar .5s ease-in-out infinite; }
.bar-josh.full s { background: linear-gradient(180deg, #fff6b0, var(--yellow) 45%, var(--turq)); }
.bar-josh.on s { background: linear-gradient(90deg, var(--marigold), var(--yellow), var(--marigold)); }
@keyframes joshbar { 50% { box-shadow: 0 0 .9rem var(--yellow), 0 0 1.6rem rgba(0, 194, 199, .9); } }
body:has(.touch:not(.hidden)) .bar-josh { display: none; }
.hud-pospop { position: absolute; left: calc(100% + .6rem); top: .3rem; font-family: var(--display); font-size: 2.4rem; line-height: 1; white-space: nowrap;
  opacity: 0; pointer-events: none; transform-origin: left center; text-shadow: .12rem .12rem 0 var(--ink), -.06rem -.06rem 0 var(--ink); will-change: transform; }
.hud-pospop.show { opacity: 1; }
.hud-pospop.up { color: var(--parrot); }
.hud-pospop.down { color: #ff3b4f; font-size: 1.9rem; }
.hud-pos.bump-up { animation: posup .45s cubic-bezier(.3, 1.8, .5, 1); border-left-color: var(--parrot); }
.hud-pos.bump-down { animation: posdown .4s ease-out; }
@keyframes posup { from { transform: scale(1.35); background: rgba(43, 217, 74, .55); } }
@keyframes posdown { 0%, 40% { background: rgba(255, 40, 60, .6); } 20% { transform: translateX(-.25rem); } 30% { transform: translateX(.25rem); } }
.hud-streak { margin-top: .35rem; padding: .25rem .65rem .05rem; font-size: 1.5rem; font-weight: 600; letter-spacing: .04em; color: var(--parrot); white-space: nowrap;
  background: rgba(26, 15, 31, .8); border-radius: .4rem; border: .14rem solid var(--parrot); opacity: 0; transform-origin: right center; }
.hud-streak b { font-family: var(--display); font-weight: 400; font-size: 1.7rem; color: var(--yellow); }
.hud-streak.show { opacity: 1; }
.hud-streak.pop { animation: streakpop .35s cubic-bezier(.3, 1.9, .5, 1); }
.hud-streak.hot { border-color: var(--yellow); box-shadow: 0 0 .7rem rgba(255, 225, 77, .7); }
@keyframes streakpop { from { transform: scale(1.6) rotate(-3deg); } }
.msg.big { font-size: 2.5rem; padding: .25rem 1.6rem .05rem; color: var(--yellow);
  background: linear-gradient(90deg, transparent, rgba(194, 24, 122, .88) 12%, rgba(194, 24, 122, .88) 88%, transparent); }
.msg.big.k-down, .msg.big.k-crash { background: linear-gradient(90deg, transparent, rgba(160, 20, 30, .88) 12%, rgba(160, 20, 30, .88) 88%, transparent); color: var(--cream); }
.bubble { position: absolute; left: 0; top: 0; max-width: 13rem; padding: .35rem .65rem .15rem; font-size: 1.2rem; font-weight: 600; line-height: 1; text-align: center;
  background: var(--cream); color: var(--ink); border: .14rem solid var(--ink); border-radius: .7rem; will-change: transform; }
.bubble::after { content: ''; position: absolute; left: 50%; bottom: -.55rem; margin-left: -.4rem; border: .4rem solid transparent; border-top-color: var(--ink); border-bottom: 0; }
.bubble.cop { background: #dfe8ff; border-color: #1f48e0; }

/* ---- elite look (hud.js): one centre banner + sub-line, title cards, takedown / chain chips, nemesis tag,
   badla prompt, counter cue, charge meter, final-stretch treatment, accessibility (.noflash, .calm) */
.msg { transform-origin: 50% 0; }
.msg b { display: block; font-weight: 400; }
.msg small { display: none; margin-top: .1rem; font-family: var(--num); font-weight: 600; font-size: 1rem; letter-spacing: .06em; text-align: center;
  color: var(--cream); text-shadow: .1rem .1rem 0 var(--ink), -.05rem -.05rem 0 var(--ink); }
.msg.has-sub small { display: block; }
.msg.big small { font-size: 1.1rem; }
.hud-msgs.under-card { top: 27%; }   /* a set-piece title card (top 12%) is up: sit under it */
.msg.k-takedown { color: var(--yellow); }
.msg.big.k-takedown { background: linear-gradient(90deg, transparent, rgba(230, 90, 0, .92) 12%, rgba(230, 90, 0, .92) 88%, transparent);
  text-shadow: .14rem .14rem 0 var(--magenta), .26rem .26rem 0 var(--ink), -.08rem -.08rem 0 var(--ink); }
.msg.big.k-badla { color: var(--cream); background: linear-gradient(90deg, transparent, rgba(80, 20, 140, .92) 12%, rgba(80, 20, 140, .92) 88%, transparent);
  text-shadow: .14rem .14rem 0 var(--pink), .26rem .26rem 0 var(--ink); }
.msg.big.k-counter { font-size: 2.3rem; color: var(--ink); background: linear-gradient(90deg, transparent, rgba(255, 225, 77, .95) 12%, rgba(255, 225, 77, .95) 88%, transparent);
  text-shadow: .12rem .12rem 0 var(--cream); }
.hud-charge { grid-column: 1 / -1; position: relative; margin-top: .3rem; width: 7.6rem; height: .7rem; border-radius: .2rem; overflow: hidden;
  background: rgba(26, 15, 31, .8); border: .12rem solid var(--ink); opacity: 0; transition: opacity .1s; }
.hud-charge.show { opacity: 1; }
.hud-charge i { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, var(--verm), var(--marigold), var(--yellow)); }
.hud-charge.full { border-color: var(--yellow); box-shadow: 0 0 .6rem var(--yellow); }
.hud-charge.full i { background: #fff6d0; }
.hud-chain, .hud-td { margin-top: .3rem; padding: .22rem .6rem .04rem; font-size: 1.3rem; font-weight: 600; letter-spacing: .04em; white-space: nowrap;
  background: rgba(26, 15, 31, .82); border-radius: .4rem; border: .14rem solid var(--turq); color: var(--turq); opacity: 0; transform-origin: right center; }
.hud-chain b, .hud-td b { font-family: var(--display); font-weight: 400; font-size: 1.55rem; color: var(--yellow); }
.hud-chain.show, .hud-td.show { opacity: 1; }
.hud-chain.hot { border-color: var(--yellow); box-shadow: 0 0 .7rem rgba(255, 225, 77, .7); }
.hud-td { border-color: var(--verm); color: var(--marigold); }
.hud-chain.pop, .hud-td.pop { animation: streakpop .35s cubic-bezier(.3, 1.9, .5, 1); }
.hud-nem { grid-column: 1 / -1; justify-self: start; display: flex; align-items: baseline; gap: .35rem; margin-top: .3rem; padding: .18rem .55rem .02rem; border-radius: .4rem; white-space: nowrap;
  background: rgba(26, 15, 31, .82); border: .14rem solid var(--pink); opacity: 0; transition: opacity .2s; }
.hud-nem.show { opacity: 1; }
.hud-nem b { font-family: var(--display); font-weight: 400; font-size: 1rem; color: var(--pink); }
.hud-nem .nm-name { font-size: 1.2rem; font-weight: 600; color: var(--cream); }
.hud-nem .nm-dz { font-size: 1.15rem; font-weight: 600; color: var(--yellow); font-variant-numeric: tabular-nums; }
.hud-nem.close { border-color: var(--yellow); box-shadow: 0 0 .6rem rgba(255, 46, 136, .8); }
.hud-nem.down { border-color: var(--parrot); }
.hud-nem.down .nm-dz { color: var(--parrot); }
.hud-card { position: absolute; left: 50%; top: 12%; display: flex; flex-direction: column; align-items: center; pointer-events: none; white-space: nowrap;
  padding: .45rem 2.4rem .15rem; opacity: 0; transform: translateX(-50%) skewX(-8deg);
  background: linear-gradient(90deg, transparent, rgba(26, 15, 31, .9) 10%, rgba(26, 15, 31, .9) 90%, transparent);
  border-top: .22rem solid var(--marigold); border-bottom: .22rem solid var(--marigold); }
.hud-card b { font-family: var(--display); font-weight: 400; font-size: 2.5rem; line-height: 1; color: var(--yellow);
  text-shadow: .14rem .14rem 0 var(--magenta), .24rem .24rem 0 var(--ink); }
.hud-card span { font-size: 1.1rem; font-weight: 600; letter-spacing: .14em; color: var(--cream); }
.hud-card span:empty { display: none; }
.hud-card.show { opacity: 1; }
.hud-card.in { animation: cardin .45s cubic-bezier(.2, 1.5, .4, 1); }
.hud-card.out { opacity: 0; transform: translateX(-30%) skewX(-8deg); transition: opacity .3s, transform .3s ease-in; }
.hud-card.k-climax { border-color: var(--verm); }
.hud-card.k-climax b { color: #fff; text-shadow: .14rem .14rem 0 var(--verm), .24rem .24rem 0 var(--ink); }
.hud-card.k-nemesis { border-color: var(--pink); }
@keyframes cardin { from { transform: translateX(-120%) skewX(-8deg); opacity: 0; } 60% { opacity: 1; } }
.hud-badla { position: absolute; left: 50%; top: 17%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .25rem;
  opacity: 0; pointer-events: none; }
.hud-badla.show { opacity: 1; animation: badlain .25s cubic-bezier(.3, 1.8, .5, 1); }
.hud-badla b { font-family: var(--display); font-weight: 400; font-size: 1.8rem; line-height: 1; color: var(--cream); white-space: nowrap;
  padding: .22rem .9rem .02rem; background: rgba(80, 20, 140, .88); border: .2rem solid var(--pink); border-radius: .5rem;
  text-shadow: .12rem .12rem 0 var(--pink), .2rem .2rem 0 var(--ink); }
.hud-badla i { position: relative; width: 8.5rem; height: .45rem; background: rgba(26, 15, 31, .85); border-radius: .3rem; overflow: hidden; }
.hud-badla s { position: absolute; inset: 0; transform-origin: center; background: linear-gradient(90deg, var(--pink), var(--yellow), var(--pink)); }
@keyframes badlain { from { transform: translateX(-50%) scale(1.6); } }
.hud-counter { position: absolute; right: calc(var(--sr) + 16.4rem); bottom: calc(var(--sb) + 1.2rem); padding: .3rem .8rem .08rem; border-radius: .5rem;
  font-family: var(--display); font-size: 2rem; line-height: 1; color: var(--ink); background: var(--yellow); border: .2rem solid var(--ink);
  box-shadow: 0 0 1rem var(--yellow); opacity: 0; transform: scale(.6); transition: opacity .06s, transform .12s cubic-bezier(.3, 1.8, .5, 1); pointer-events: none; }
.hud-counter span { font-family: var(--num); font-size: 1.1rem; font-weight: 600; letter-spacing: .06em; }
.hud-counter.show { opacity: 1; transform: none; animation: counterblink .16s steps(1) infinite; }
body:has(.touch.lefty) .hud-counter { right: auto; left: calc(var(--sl) + 16.4rem); }
@keyframes counterblink { 50% { background: #fff6d0; } }
/* HUD chips stay above speech bubbles (bubbles are pushed to the sides, where the chips live) */
.hud-tl, .hud-tr, .hud-top { z-index: 2; }
.hud-bubbles { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
/* touch MAAR button: charge ring (input.js/hud.js set --charge, .charging, .charged) and the counter cue */
.tb-attack::before { content: ''; position: absolute; inset: -.5em; border-radius: 50%; opacity: 0; pointer-events: none;
  background: conic-gradient(var(--yellow) calc(var(--charge, 0) * 1turn), rgba(26, 15, 31, .55) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - .42em), #000 calc(100% - .42em));
  mask: radial-gradient(farthest-side, transparent calc(100% - .42em), #000 calc(100% - .42em)); }
.tb-attack.charging::before { opacity: 1; }
.tb-attack.charged::before { background: #fff6d0; filter: drop-shadow(0 0 .4em var(--yellow)); }
.tb-attack.charged { background: rgba(255, 140, 0, .92); }
.tb-attack.counter { border-color: #fff; box-shadow: 0 0 0 .3em var(--yellow), 0 0 1.4em var(--yellow); animation: maarcounter .16s steps(1) infinite; }
@keyframes maarcounter { 50% { box-shadow: 0 0 0 .3em #fff, 0 0 1.8em var(--yellow); } }
/* final stretch: the distance and the strip burn, a warm pulse round the screen edge */
.hud.climax .hud-dist { color: var(--yellow); font-size: 1.45rem; text-shadow: .1rem .1rem 0 var(--verm), .16rem .16rem 0 var(--ink); }
.hud.climax .strip-track { border-color: var(--yellow); box-shadow: 0 0 .5rem rgba(255, 75, 31, .9); }
.hud.climax::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 2.6rem -.6rem rgba(255, 90, 20, .55);
  animation: climaxedge 1.1s ease-in-out infinite; }
@keyframes climaxedge { 50% { box-shadow: inset 0 0 3.4rem -.4rem rgba(255, 60, 20, .75); } }
/* accessibility: flashing off = steady colours, reduce motion = no slides or pulses */
.hud.noflash .hud-cop.on, .hud.noflash .hud-copchip, .hud.noflash .hud-counter.show, .hud.noflash.climax::after, .hud.noflash .bar.low i,
.hud.noflash .bar-josh.full i { animation: none; }
.hud.noflash .hud-cop.on { box-shadow: inset 2.2rem 0 2.2rem -1.4rem rgba(160, 30, 90, .7), inset -2.2rem 0 2.2rem -1.4rem rgba(160, 30, 90, .7); }
.hud.noflash .hud-copchip { background: #7a1a6a; }
body:has(.hud.noflash:not(.hidden)) .tb-attack.counter, body:has(.hud.noflash:not(.hidden)) .tb-josh.full { animation: none; }
/* S9 audit: with flashing off NOTHING in the HUD animates. Blinkers: .hud-cop.on, .hud-copchip, .dot.cop, .bar.low i,
   .bar-josh.full i, .hud-counter.show, .climax::after, .hud-pos.bump-down (red flash); pops/pulses: .hud-count, .hud-weapon.pop,
   .hud-pos.bump-up, .hud-streak/.hud-chain/.hud-td.pop, .hud-card.in, .hud-badla.show; coach .cc.tip/.cring; touch MAAR/JOSH.
   One blanket rule so a future animation can't slip through; the blinkers get steady colours instead. */
.hud.noflash *, .hud.noflash *::before, .hud.noflash *::after, .hud.noflash::after,
body:has(.hud.noflash:not(.hidden)) .coach *, body:has(.hud.noflash:not(.hidden)) .touch * { animation: none !important; }
.hud.noflash .dot.cop { background: #a01aa0; }
.hud.calm .hud-card.in, .hud.calm .hud-badla.show, .hud.calm .hud-chain.pop, .hud.calm .hud-td.pop, .hud.calm .hud-streak.pop { animation: none; }

/* ---------------------------------------------------------------- first-race coach (hud.js createCoach)
   Lives in #hud under #controls, never takes touches. Padding = safe area (used to clamp callouts). */
.coach { position: absolute; inset: 0; pointer-events: none; padding: var(--st) var(--sr) var(--sb) var(--sl); }
.coach.hidden { display: none; }
body[data-screen="pause"] .coach { visibility: hidden; }
.coach * { pointer-events: none; }
.coach-lines { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; opacity: 0; transition: opacity .3s; }
.coach:has(.cc.in) .coach-lines { opacity: .95; }
.cc { --c: var(--marigold); position: absolute; left: 0; top: 0; display: flex; align-items: baseline; gap: .4rem; white-space: nowrap;
  padding: .32rem .65rem .12rem; border-radius: .5rem; background: rgba(26, 15, 31, .9); border: .15rem solid var(--c); color: var(--cream);
  box-shadow: .2rem .2rem 0 var(--ink); font-family: var(--num); font-size: 1.25rem; font-weight: 600; line-height: 1; letter-spacing: .02em;
  text-shadow: .07rem .07rem 0 var(--ink); opacity: 0; transform: scale(.55); transition: opacity .25s, transform .35s cubic-bezier(.3, 1.7, .5, 1); }
.cc.in { opacity: 1; transform: none; }
.cc b { font-family: var(--display); font-weight: 400; font-size: 1.15rem; color: var(--c); letter-spacing: 0;
  text-shadow: .08rem .08rem 0 var(--ink), -.05rem -.05rem 0 var(--ink); }
.cc.bars { flex-direction: column; align-items: flex-start; gap: .12rem; --c: var(--pink); }
.cc.bars div { display: flex; align-items: baseline; gap: .35rem; }
.cc.bars div + div b { color: var(--turq); }
.cc.keys { font-size: 1.15rem; }
.cc.tip { font-size: 1.45rem; padding: .4rem .8rem .15rem; box-shadow: .22rem .22rem 0 var(--ink), 0 0 0 .2rem rgba(26, 15, 31, .5); }
.cc.tip b { font-size: 1.4rem; }
.cc.tip.in { animation: tipbob 1s ease-in-out .35s infinite; }
.cc.cop { --c: var(--red); background: linear-gradient(90deg, rgba(160, 20, 40, .95), rgba(33, 64, 217, .95)); }
.cc.cop b { color: var(--yellow); }
@keyframes tipbob { 50% { transform: translateY(-.18rem); } }
/* little pointer tails (rotated squares in the border colour) */
.cc.tail-l::before, .cc.tail-u::before, .cc.tail-d::before { content: ''; position: absolute; width: .6rem; height: .6rem; background: var(--c); transform: rotate(45deg); }
.cc.tail-l::before { left: -.4rem; top: calc(50% - .3rem); }
.cc.tail-u::before { top: -.4rem; left: 1.1rem; }
.cc.tip.tail-u::before { left: auto; right: 1.4rem; }
.cc.tail-d::before { bottom: -.4rem; left: calc(50% - .3rem); }
.cring { position: absolute; border-radius: 50%; border: .22rem solid var(--c, var(--marigold)); box-shadow: 0 0 0 .14rem var(--ink), 0 0 1rem var(--c, var(--marigold));
  opacity: 0; transition: opacity .25s; }
.cring.in { opacity: 1; animation: ringpulse .8s ease-in-out infinite; }
@keyframes ringpulse { 50% { transform: scale(1.08); } }

/* ---------------------------------------------------------------- touch controls */
.touch { position: absolute; inset: 0; font-size: calc(1rem * var(--cs, 1)); --josh: 0; }
.touch.hidden { display: none; }
.tc-left { position: absolute; left: 0; bottom: 0; padding: 0 0 var(--sb) var(--sl); }
.tc-steer { pointer-events: auto; touch-action: none; display: flex; align-items: flex-end; gap: .8em; padding: 3em 3em .4em .2em; }
.pad { width: 5.6em; height: 5.6em; display: grid; place-items: center; border-radius: 1.4em; color: var(--cream);
  background: rgba(26, 15, 31, .5); border: .2em solid rgba(255, 244, 214, .55); box-shadow: inset 0 -.3em 0 rgba(0, 0, 0, .3); transition: transform .05s; }
.pad svg { width: 2.6em; height: 2.6em; fill: currentColor; }
.pad.on { background: rgba(255, 46, 136, .7); border-color: var(--yellow); transform: scale(.94); }
.tc-right { position: absolute; right: var(--sr); bottom: var(--sb); width: 15.5em; height: 13em; }
.tb { pointer-events: auto; touch-action: none; position: absolute; display: grid; place-items: center; border-radius: 50%; color: var(--cream);
  background: rgba(26, 15, 31, .5); border: .2em solid rgba(255, 244, 214, .55); box-shadow: inset 0 -.3em 0 rgba(0, 0, 0, .3); font-family: var(--num); }
.tb b { font-size: 1.05em; font-weight: 600; letter-spacing: .06em; line-height: 1; }
.tb svg { fill: currentColor; stroke: currentColor; }
.tb.on { transform: scale(.93); }
.tb-attack { right: 0; bottom: .3em; width: 6.6em; height: 6.6em; background: rgba(255, 75, 31, .55); border-color: var(--yellow); display: flex; flex-direction: column; gap: .1em; }
.tb-attack svg { width: 2.8em; height: 2.8em; }
.tb-attack b { font-family: var(--display); font-weight: 400; font-size: 1.15em; letter-spacing: 0; }
.tb-attack.on { background: rgba(255, 75, 31, .9); }
.tb-brake { right: 7.3em; bottom: 0; width: 4.4em; height: 4.4em; }
.tb-brake.on { background: rgba(215, 38, 61, .85); }
.tb-josh { right: 6.7em; bottom: 5em; width: 4.6em; height: 4.6em; overflow: hidden; border-color: var(--turq); }
.josh-fill { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; transform-origin: bottom; transform: scaleY(var(--josh)); background: linear-gradient(0deg, var(--turq), rgba(0, 194, 199, .5)); }
.tb-josh b { position: relative; }
.tb-josh.full { box-shadow: 0 0 1em var(--turq), inset 0 -.3em 0 rgba(0, 0, 0, .3); animation: joshfull .6s ease-in-out infinite; }
@keyframes joshfull { 50% { border-color: var(--yellow); } }
.tb-horn { right: 1.5em; bottom: 7.6em; width: 3.4em; height: 3.4em; display: flex; flex-direction: column; gap: 0; }
.tb-horn svg { width: 1.9em; height: 1.9em; stroke: none; margin-top: -.15em; }
.tb-horn b { font-size: .72em; letter-spacing: .04em; margin-top: -.2em; }
/* Manual gas: GAS sits 1.5em (24 px on an 844x390 phone) clear of BRAKE, which spans right 7.3em..11.7em. */
.tb-gas { display: none; right: 13.2em; bottom: 0; width: 4.4em; height: 4.4em; background: rgba(43, 217, 74, .4); }
.manual-gas .tb-gas { display: grid; }
.manual-gas .tc-right { width: 17.6em; }
.tilt .tc-left { opacity: .45; }
.tilt-ind { display: none; position: absolute; left: 50%; bottom: calc(var(--sb) + .4em); width: 8em; height: .5em; margin-left: -4em; border-radius: .25em; background: rgba(26, 15, 31, .6); }
.tilt .tilt-ind { display: block; }
.tilt-ind i { position: absolute; top: -.25em; left: 50%; width: 1em; height: 1em; margin-left: -.5em; border-radius: 50%; background: var(--yellow); transform: translateX(calc(var(--tilt, 0) * 3.5em)); }
.lefty .tc-left { left: auto; right: 0; padding: 0 var(--sr) var(--sb) 0; }
.lefty .tc-steer { padding: 3em .2em .4em 3em; }
.lefty .tc-right { right: auto; left: var(--sl); transform: scaleX(-1); }
.lefty .tc-right .tb > * { transform: scaleX(-1); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* ================================================================ elite pass: meta (stars, nemesis, Ustaad shop, face-off) */
/* stars (C11) */
.stars { display: flex; gap: .25rem; align-items: flex-start; }
.star { display: flex; flex-direction: column; align-items: center; color: #4a3a5c; }
.star .ic { width: 1.6rem; height: 1.6rem; }
.star.on { color: var(--yellow); }
.star.on .ic { filter: drop-shadow(0 0 .25rem rgba(255, 225, 77, .55)); }
.star small { font-size: .85rem; color: var(--cream); opacity: .7; white-space: nowrap; margin-top: .05rem; }
.star.on small { opacity: 1; }
.star.fresh .ic { animation: starpop .6s var(--d, 0s) cubic-bezier(.3, 1.8, .5, 1) both; }
@keyframes starpop { 0% { transform: scale(0) rotate(-90deg); } 70% { transform: scale(1.5) rotate(10deg); } 100% { transform: scale(1); } }
.stars.sm .ic { width: 1.15rem; height: 1.15rem; }
.stars.sm .star { color: #c9b8a8; }
.stars.sm .star.on { color: var(--marigold); }
.stars.brief { justify-content: space-between; padding: .15rem .3rem .1rem; background: rgba(26, 15, 31, .6); border-radius: .4rem; }
.stars.brief .star { flex: 1; }
.stars.res { gap: 1rem; }
.stars.res .ic { width: 2.3rem; height: 2.3rem; }
.stars.res small { font-size: 1rem; }
.card-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding-top: .2rem; }
.card-foot .card-best { margin: 0; padding: 0; }
.gstars { position: absolute; right: .6rem; top: 1.3rem; z-index: 1; display: flex; align-items: baseline; gap: .15rem; padding: .2rem .55rem .05rem .4rem; color: var(--yellow); background: rgba(26, 15, 31, .8); border-radius: 1rem; border: .12rem solid var(--marigold); }
.gstars .ic { width: 1.3rem; height: 1.3rem; align-self: center; }
.gstars b { font-size: 1.6rem; font-weight: 600; line-height: 1; }
.gstars small { font-size: 1rem; opacity: .7; }

/* level tabs: name over "x/7 · 5 chahiye" (B9, same wording as the garage) */
.ltab { height: auto; min-height: max(44px, 2.75rem); padding: .2rem .7rem .05rem; }
.lt-txt { display: flex; flex-direction: column; line-height: 1; }
.lt-txt small { font-size: .85rem; opacity: .8; white-space: nowrap; }
.lt-txt small.ok { color: var(--parrot); opacity: 1; }
.ltab.on .lt-txt small.ok { color: var(--green); }

/* Kaali boss track badge on its card */
.kaali-badge { position: absolute; left: .35rem; bottom: .35rem; display: flex; align-items: center; gap: .3rem; padding: .12rem .5rem .12rem .12rem;
  background: #0d0710; border: .14rem solid var(--red); border-radius: 1rem; box-shadow: 0 0 .6rem rgba(215, 38, 61, .7); }
.kaali-badge img { width: 1.7rem; height: 1.7rem; border-radius: 50%; }
.kaali-badge b { font-family: var(--display); font-weight: 400; font-size: 1rem; color: var(--red); padding-top: .15rem; letter-spacing: .06em; }

/* briefing: nemesis + bounty (C10) */
.purse-h { line-height: 1; }
.nemesis { margin-top: auto; display: flex; align-items: center; gap: .6rem; padding: .35rem .5rem; background: var(--ink); border: .17rem solid var(--verm); border-radius: .6rem;
  box-shadow: 0 0 0 .14rem var(--ink), 0 0 1rem rgba(255, 75, 31, .35); }
.nemesis img { width: 3.4rem; height: 3.4rem; border-radius: .5rem; background: var(--verm); border: .14rem solid var(--ink); }
.nm-txt { flex: 1; display: flex; flex-direction: column; line-height: 1; min-width: 0; }
.nm-txt small { font-size: .9rem; letter-spacing: .14em; color: var(--verm); font-weight: 600; }
.nm-txt b { font-family: var(--display); font-weight: 400; font-size: 1.4rem; color: var(--cream); white-space: nowrap; }
.nm-txt span { font-size: 1rem; opacity: .75; white-space: nowrap; }
.nm-bounty { display: flex; flex-direction: column; align-items: flex-end; padding: .25rem .55rem .05rem; background: var(--yellow); color: var(--ink); border-radius: .4rem; border: .14rem solid var(--ink); transform: rotate(2deg); }
.nm-bounty small { font-size: .8rem; letter-spacing: .14em; font-weight: 600; }
.nm-bounty b { font-size: 1.6rem; font-weight: 600; line-height: 1; }
.rchip.nem img { box-shadow: 0 0 0 .18rem var(--yellow), 0 0 .7rem var(--verm); }
.rchip.nem::after { content: '₹'; position: absolute; left: -.2rem; top: -.35rem; width: 1.2rem; height: 1.2rem; display: grid; place-items: center; font-family: var(--display); font-size: .8rem;
  color: var(--ink); background: var(--yellow); border: .1rem solid var(--ink); border-radius: 50%; }
.nemesis.boss { border-color: var(--red); background: linear-gradient(90deg, #12060c, #2a0a14); }
.nemesis.boss img { background: #000; }
.screen.briefing.bossrace .brief-body { background: radial-gradient(ellipse at 60% 100%, rgba(215, 38, 61, .18), transparent 60%); }

/* results */
.res-stars { margin: .1rem 0; }
.res-meta { display: flex; }
.stamp.nem { color: var(--yellow); border-color: var(--yellow); transform: rotate(3deg); }

/* garage: three buttons in the middle row */
.btn.ustaadbtn { color: var(--ink); }
.btn.ustaadbtn small { font-size: .85rem; }
.hub-row > .btn { padding-left: .5rem; padding-right: .5rem; }

/* ---------------------------------------------------------------- Ustaad ka adda (C12) */
.us-body { flex: 1; display: grid; grid-template-columns: 1fr 1.3fr; gap: 1.1rem; padding-top: .6rem; min-height: 0; }
.us-left { display: flex; flex-direction: column; gap: .5rem; min-height: 0; }
.us-foot:empty { display: none; }
.us-stage { flex: 1; position: relative; display: grid; grid-template-rows: 1fr auto; place-items: center; border-radius: 1rem; min-height: 0; padding: .4rem .4rem .5rem;
  background:
    radial-gradient(ellipse 50% 10% at 50% 62%, rgba(0, 0, 0, .45), transparent 70%),
    repeating-conic-gradient(from 0deg at 50% 120%, #3d2357 0 6deg, #2f1a45 6deg 12deg);
  border: .2rem solid var(--ink); box-shadow: 0 0 0 .22rem var(--turq), 0 0 0 .42rem var(--ink); }
.us-stage::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: .8rem; --z1: var(--pink); --z2: var(--marigold); background: var(--zig); border-radius: .8rem .8rem 0 0; }
.us-rear { display: grid; place-items: end center; min-height: 0; height: 100%; }
.us-rear img.rear { height: 100%; max-height: 10rem; width: auto; filter: drop-shadow(0 .3rem 0 rgba(0, 0, 0, .35)); }
.us-side img.side { height: 4.6rem; width: auto; }
.us-tag { position: absolute; top: 1.1rem; left: .6rem; font-family: var(--display); font-size: .95rem; padding: .2rem .55rem 0; background: var(--parrot); color: var(--ink); border: .14rem solid var(--ink); border-radius: .3rem; transform: rotate(-3deg); }
.us-tag.prev { background: var(--yellow); animation: pulse 1.2s ease-in-out infinite; }
.us-right { display: flex; flex-direction: column; gap: .45rem; min-height: 0; }
.us-tabs { align-self: stretch; }
.us-tabs button { flex: 1; font-family: var(--display); font-size: 1.15rem; }
.us-panel { flex: 1; display: flex; flex-direction: column; gap: .3rem; min-height: 0; overflow-y: auto; scrollbar-width: none; }
.us-panel::-webkit-scrollbar { display: none; }
.us-h { display: flex; align-items: baseline; gap: .5rem; font-family: var(--display); font-size: 1.05rem; color: var(--pink); line-height: 1; }
.us-h small { font-family: var(--num); font-size: 1rem; color: var(--cream); opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.swatches { display: grid; grid-template-columns: repeat(6, 1fr); gap: .3rem; }
.sw { height: max(44px, 2.75rem); border-radius: .5rem; border: .17rem solid var(--ink); box-shadow: inset 0 -.3rem 0 rgba(0, 0, 0, .25), inset 0 .2rem 0 rgba(255, 255, 255, .3); }
.sw.premium { background-image: linear-gradient(135deg, rgba(255, 255, 255, .55) 0 18%, transparent 30% 60%, rgba(255, 255, 255, .35) 70% 78%, transparent 85%); }
.sw.on { outline: .2rem solid var(--yellow); outline-offset: .1rem; }
.chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: .3rem; }
.chip { min-height: max(44px, 2.75rem); padding: .2rem .3rem 0; font-size: 1.05rem; line-height: 1; border-radius: .5rem; background: var(--plum); color: var(--cream); border: .15rem solid var(--ink); }
.chip.on { background: var(--marigold); color: var(--ink); font-weight: 600; box-shadow: 0 .15rem 0 var(--ink); }
.us-foot { flex: none; }
.btn.usbuy { width: 100%; min-height: 3.1rem; font-size: 1.4rem; }
.us-owned, .us-broke { min-height: 3.1rem; display: flex; align-items: center; justify-content: center; gap: .6rem; border-radius: .7rem; font-size: 1.15rem; }
.us-owned { border: .15rem dashed var(--turq); color: var(--turq); }
.us-broke { background: var(--ink); border: .15rem solid var(--verm); }
.us-broke b { font-family: var(--display); font-weight: 400; color: var(--verm); font-size: 1.2rem; }
.tune-list { display: flex; flex-direction: column; gap: .3rem; }
.tune-row { display: grid; grid-template-columns: 1fr auto 7.4rem; align-items: center; gap: .6rem; min-height: 3.2rem; padding: .2rem .3rem .2rem .7rem; background: rgba(26, 15, 31, .75); border-radius: .6rem; border: .12rem solid var(--plum); }
.tr-name { display: flex; flex-direction: column; line-height: 1.05; min-width: 0; }
.tr-name b { font-family: var(--display); font-weight: 400; font-size: 1.2rem; color: var(--yellow); }
.tr-name small { font-size: .95rem; opacity: .75; white-space: nowrap; }
.pips { display: flex; gap: .25rem; }
.pips i { width: 1.1rem; height: 1.1rem; transform: skewX(-14deg); background: var(--plum); border: .12rem solid var(--ink); }
.pips i.on { background: linear-gradient(180deg, var(--parrot), var(--green)); }
.btn.trbuy { min-height: max(44px, 2.75rem); padding: .3rem .4rem .1rem; font-size: 1.15rem; font-family: var(--num); font-weight: 600; }
.btn.trbuy.poor { opacity: .6; }
.tr-max { text-align: center; font-family: var(--display); color: var(--parrot); font-size: 1.15rem; }
.us-fine { margin: .1rem 0 0; font-size: .95rem; opacity: .65; }

/* ---------------------------------------------------------------- Kaali face-off */
.screen.faceoff { justify-content: space-between; background: radial-gradient(ellipse at 50% 40%, rgba(150, 12, 40, .55), rgba(10, 4, 12, .95) 70%); }
.fo-stage { flex: 1; display: flex; align-items: center; justify-content: center; gap: 2.2rem; min-height: 0; }
.fo-side { display: flex; flex-direction: column; align-items: center; gap: .35rem; animation: slidein .5s cubic-bezier(.2, 1.3, .4, 1) both; }
.fo-side img { width: 8.5rem; height: 8.5rem; border-radius: .8rem; border: .22rem solid var(--ink); }
.fo-side.me img { box-shadow: 0 0 0 .22rem var(--turq), 0 0 0 .4rem var(--ink); }
.fo-side.kaali { --from: 140%; }
.fo-side.kaali img { box-shadow: 0 0 0 .22rem var(--red), 0 0 0 .4rem var(--ink), 0 0 2rem rgba(215, 38, 61, .8); }
.fo-side b { font-family: var(--display); font-weight: 400; font-size: 1.6rem; color: var(--cream); text-shadow: .12rem .12rem 0 var(--ink); }
.fo-side.kaali b { color: var(--red); }
@keyframes slidein { from { transform: translateX(var(--from, -140%)); opacity: 0; } }
.fo-vs { font-family: var(--display); font-size: 4.2rem; color: var(--yellow); text-shadow: .2rem .2rem 0 var(--red), .35rem .35rem 0 var(--ink); animation: stamp .5s .35s cubic-bezier(.2, 1.6, .4, 1) both; }
.fo-bottom { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: .4rem 1rem; align-items: end; }
.fo-say { display: flex; flex-direction: column; padding: .4rem .8rem .3rem; background: #0d0710; border: .15rem solid var(--red); border-radius: .6rem; min-height: 3.6rem; }
.fo-say small { font-family: var(--display); color: var(--red); font-size: .95rem; }
.fo-line { margin: 0; font-size: 1.7rem; line-height: 1.05; color: var(--cream); min-height: 1.1em; }
.fo-rules { grid-column: 1; font-size: 1.1rem; color: var(--yellow); }
.fo-btns { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: .7rem; }

/* B9: in-race toast (assist): one line, below the HUD's top-centre cluster, never over the strip */
#toast.race { top: calc(var(--st) + 9.2rem); font-size: 1.05rem; padding: .4rem .8rem .25rem; white-space: nowrap; max-width: 46vw; overflow: hidden; text-overflow: ellipsis; box-shadow: .15rem .15rem 0 var(--turq); }

/* ================================================================ multiplayer (mp-ui) */
.hc-h0 { --hc: var(--pink); } .hc-h1 { --hc: var(--turq); } .hc-h2 { --hc: var(--marigold); } .hc-h3 { --hc: var(--parrot); }
/* garage header pill (between the shop sign and the money): no taller than the money pill, so the bar keeps its height */
.btn.mpbtn { flex: none; align-self: center; font-size: 1.05rem; min-height: 0; height: 2.6rem; padding: .15rem .85rem 0; line-height: 1; }
.btn.mpbtn small { font-size: .72rem; line-height: 1; }
.btn.off { filter: saturate(.35) brightness(.8); }
.mp-hint { font-size: 1.05rem; color: var(--yellow); max-width: 14rem; text-align: right; line-height: 1; }
.mp-bar .bar-title { font-size: 1.7rem; }
.mp-colh { display: flex; justify-content: space-between; align-items: baseline; font-size: 1.1rem; padding: 0 .2rem .15rem; }
.mp-colh b { font-family: var(--display); font-weight: 400; font-size: 1.25rem; color: var(--marigold); }

/* menu */
.mp-menu-body { flex: 1; display: flex; gap: 1.2rem; align-items: stretch; padding-top: .7rem; min-height: 0; }
.mp-intro { flex: 1.15; padding: .9rem 1.1rem; display: flex; flex-direction: column; gap: .45rem; }
.mp-h { font-family: var(--display); font-weight: 400; font-size: 1.7rem; color: var(--yellow); text-shadow: .1rem .1rem 0 var(--magenta); line-height: 1.05; }
.mp-intro p { margin: 0; font-size: 1.25rem; line-height: 1.12; }
.mp-intro .mp-fine { font-size: 1.05rem; color: var(--turq); }
.mp-record { margin-top: auto; display: flex; gap: .6rem; }
.mp-record span { background: var(--ink); border: .14rem solid var(--marigold); border-radius: .4rem; padding: .25rem .6rem .05rem; font-size: 1.15rem; color: var(--yellow); }
.mp-menu-go { flex: 1; display: flex; flex-direction: column; gap: .7rem; justify-content: center; }
.mp-menu-go .btn.big { min-height: 4.6rem; font-size: 2rem; }
.mp-namerow { display: flex; align-items: center; gap: .6rem; font-size: 1.2rem; }
.mp-name { flex: 1; min-height: max(44px, 2.8rem); font: inherit; font-size: 1.5rem; padding: .3rem .7rem .1rem; border-radius: .5rem; border: .17rem solid var(--ink);
  background: var(--cream); color: var(--ink); box-shadow: inset 0 .15rem 0 rgba(0, 0, 0, .15); -webkit-user-select: text; user-select: text; touch-action: manipulation; }
.mp-name:focus, .mp-codein:focus { outline: .2rem solid var(--turq); outline-offset: .1rem; }

/* tip + status */
.mp-tip { display: flex; align-items: center; gap: .55rem; padding: .4rem .7rem .3rem .5rem; background: var(--yellow); color: var(--ink); border: .15rem solid var(--ink);
  border-radius: .5rem; box-shadow: .18rem .18rem 0 var(--pink); line-height: 1.05; }
.mp-tip .ic { width: 1.9rem; height: 1.9rem; flex: none; }
.mp-tip b { display: block; font-family: var(--display); font-weight: 400; font-size: 1.15rem; }
.mp-tip small { display: block; font-size: .95rem; }
.mp-tip.small { padding: .3rem .6rem .2rem .4rem; }
.mp-tip.small b { font-size: 1.05rem; }
.mp-tip.small small { font-size: .85rem; }
.mp-tip.small .ic { width: 1.5rem; height: 1.5rem; }
.mp-status { font-size: 1.15rem; color: var(--turq); text-align: center; padding: .35rem .3rem .1rem; }
.mp-status.mp-refused { color: var(--yellow); background: rgba(26, 15, 31, .8); border-radius: .5rem; border: .12rem dashed var(--pink); }
.mp-update.hidden { display: none; }
.mp-update { display: flex; align-items: center; gap: .6rem; font-size: 1.1rem; color: var(--yellow); }
.mp-update .btn { flex: none; min-height: 2.4rem; font-size: 1rem; }
.mp-status.busy { color: var(--yellow); background: rgba(26, 15, 31, .8); border-radius: .5rem; border: .12rem dashed var(--marigold); }

/* player rows */
.mp-list { display: flex; flex-direction: column; gap: .3rem; }
.mp-pl { position: relative; display: grid; grid-template-columns: 2.5rem 1fr auto auto; align-items: center; gap: .45rem; min-height: 3.05rem;
  padding: .2rem .35rem .2rem .3rem; background: rgba(26, 15, 31, .82); border: .14rem solid var(--ink); border-left: .45rem solid var(--hc, var(--plum)); border-radius: .5rem; }
.mp-pl.me { background: rgba(61, 35, 87, .92); }
.mp-pl.gone { opacity: .6; }
.mp-pl.empty { grid-template-columns: 2.5rem 1fr; opacity: .55; border-style: dashed; border-left-style: solid; }
.mp-face { width: 2.5rem; height: 2.5rem; border-radius: .4rem; background: var(--hc, var(--plum)); border: .12rem solid var(--ink); }
span.mp-face.empty { display: grid; place-items: center; font-family: var(--display); font-size: 1.4rem; color: var(--cream); background: var(--plum); }
.mp-who { display: flex; flex-direction: column; min-width: 0; line-height: 1; }
.mp-who b { font-family: var(--display); font-weight: 400; font-size: 1.15rem; color: var(--hc, var(--cream)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-top: .15rem; }
.mp-who b small { font-family: var(--num); font-size: .9rem; color: var(--cream); opacity: .7; }
.mp-sub { display: flex; gap: .4rem; font-size: .95rem; opacity: .9; white-space: nowrap; overflow: hidden; }
.mp-ready { color: var(--chrome); }
.mp-ready.on { color: var(--parrot); }
.mp-ready.off { color: var(--verm); }
.mp-ready.ai { color: var(--marigold); }
.mp-net { display: flex; flex-direction: column; align-items: flex-end; gap: .1rem; line-height: 1; }
.mp-pingline { display: flex; align-items: flex-end; gap: .3rem; font-size: 1rem; }
.mp-pathline { display: flex; align-items: center; gap: .3rem; }
.mp-bars { display: inline-flex; align-items: flex-end; gap: .12rem; height: 1rem; }
.mp-bars i { width: .28rem; background: rgba(255, 244, 214, .25); border-radius: .08rem; }
.mp-bars i:nth-child(1) { height: 30%; } .mp-bars i:nth-child(2) { height: 55%; } .mp-bars i:nth-child(3) { height: 78%; } .mp-bars i:nth-child(4) { height: 100%; }
.mp-bars.q-great i.on { background: var(--parrot); } .mp-bars.q-ok i.on { background: var(--marigold); } .mp-bars.q-slow i.on { background: var(--verm); }
.mp-badge { font-size: .8rem; font-weight: 600; letter-spacing: .05em; padding: .12rem .35rem 0; border-radius: .25rem; border: .1rem solid var(--ink); color: var(--ink); background: var(--chrome); }
.mp-badge.q-great { background: var(--parrot); } .mp-badge.q-ok { background: var(--marigold); } .mp-badge.q-slow { background: var(--verm); color: var(--cream); }
.mp-badge.q-host { background: var(--pink); color: var(--cream); font-size: .95rem; padding: .2rem .5rem .05rem; }
.mp-badge.q-off { background: #555; color: var(--cream); }
.mp-lan { font-size: .85rem; color: var(--marigold); }
.mp-lan.on { color: var(--turq); }
.mp-kick { width: 44px; height: 44px; margin: -.3rem -.25rem -.3rem 0; display: grid; place-items: center; font-size: 1.1rem; color: var(--cream); border-radius: .4rem; opacity: .7; }
.mp-kick:active { background: var(--verm); opacity: 1; }
.mp-tbub { position: absolute; left: 2.2rem; top: -.9rem; z-index: 3; padding: .2rem .55rem 0; font-size: 1.05rem; font-weight: 600; color: var(--ink); background: var(--cream);
  border: .14rem solid var(--hc, var(--ink)); border-radius: .6rem; white-space: nowrap; animation: stamp .3s cubic-bezier(.2, 1.6, .4, 1) both; pointer-events: none; }

/* host room */
.mp-host-body, .mp-lobby-body { flex: 1; display: flex; gap: .8rem; padding-top: .5rem; min-height: 0; }
.mp-codecol { width: 12.4rem; flex: none; display: flex; flex-direction: column; align-items: center; gap: .4rem; }
.mp-codebox { width: 100%; display: flex; flex-direction: column; align-items: center; padding: .25rem .4rem 0; background: var(--cream); color: var(--ink);
  border: .2rem solid var(--ink); border-radius: .5rem; box-shadow: 0 0 0 .18rem var(--pink), .3rem .35rem 0 .15rem var(--ink); }
.mp-codebox small { font-size: .85rem; font-weight: 600; letter-spacing: .2em; }
.mp-code { font-family: var(--display); font-weight: 400; font-size: 3.5rem; line-height: 1; letter-spacing: .12em; padding-left: .12em; color: var(--magenta); text-shadow: .12rem .12rem 0 var(--marigold); }
.mp-codebox.wait { gap: .3rem; padding: .5rem; font-size: 1.1rem; }
.mp-codebox.wait .nazar-wrap { width: 2.4rem; height: 2.4rem; }
.mp-qr { padding: .25rem; background: #fff8e6; border: .17rem solid var(--ink); border-radius: .4rem; line-height: 0; }
.mp-qr canvas { width: 8.6rem; height: 8.6rem; image-rendering: pixelated; image-rendering: crisp-edges; }
.mp-qrcap { font-size: .95rem; opacity: .8; }
.mp-midcol { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .3rem; }
.mp-setcol { width: 17.8rem; flex: none; display: flex; flex-direction: column; gap: .45rem; min-height: 0; }
.mp-set { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; background: rgba(26, 15, 31, .82); border: .15rem solid var(--ink);
  border-radius: .6rem; box-shadow: 0 0 0 .14rem var(--plum); padding: .15rem .45rem; scrollbar-width: none; }
.mp-set::-webkit-scrollbar { display: none; }
.mp-srow { display: flex; align-items: center; justify-content: space-between; gap: .4rem; min-height: max(44px, 2.75rem); border-bottom: .1rem solid rgba(255, 244, 214, .1); flex: none; }
.mp-srow:last-child { border-bottom: 0; }
.mp-srow label { font-size: 1.1rem; }
.mp-srow > b { font-size: 1.15rem; color: var(--yellow); text-align: right; }
.mp-seg button { min-width: max(40px, 2.5rem); padding: .2rem .45rem 0; font-size: 1.1rem; }
.mp-sval { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; line-height: 1; min-width: 0; }
.mp-sval b { font-family: var(--display); font-weight: 400; font-size: 1.15rem; color: var(--yellow); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; padding-top: .15rem; }
.mp-sval small { font-size: .9rem; opacity: .75; }
.mp-arr, .mp-step button { width: 44px; height: 44px; flex: none; display: grid; place-items: center; font-size: 1.2rem; color: var(--ink); background: var(--chrome-g);
  border: .14rem solid var(--ink); border-radius: .45rem; box-shadow: 0 .14rem 0 var(--ink); }
.mp-arr:active, .mp-step button:active { transform: translateY(.12rem); box-shadow: none; }
.mp-step { display: flex; align-items: center; gap: .5rem; }
.mp-step b { min-width: 1.6rem; text-align: center; font-size: 1.6rem; color: var(--yellow); padding-top: .2rem; }
.mp-srow .tog { --th: 44px; }
.btn.mp-start { min-height: 3.2rem; font-size: 1.9rem; flex: none; }
.btn.mp-start small { font-size: .85rem; }
.mp-set.read .mp-srow { min-height: 2.45rem; }
.mp-set.read .track .mp-sval { align-items: flex-start; text-align: left; }
.mp-mybike { display: flex; justify-content: center; padding: .2rem 0 0; }
.mp-mybike img { height: 3.2rem; width: auto; }
.btn.mp-ready-btn { min-height: 3.6rem; font-size: 1.9rem; flex: none; }
.btn.mp-ready-btn small { font-size: .9rem; }

/* join */
.mp-join-body { flex: 1; display: flex; gap: 1.2rem; align-items: center; justify-content: center; padding-top: .4rem; }
.mp-codeform { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: .7rem 1.2rem 1rem; }
.mp-codeform small { font-size: .95rem; letter-spacing: .25em; color: var(--marigold); }
.mp-codein { width: 15rem; height: 5rem; font-family: var(--display); font-size: 3rem; text-align: center; letter-spacing: .22em; padding: .6rem 0 0 .22em; text-transform: uppercase;
  background: var(--cream); color: var(--magenta); border: .22rem solid var(--ink); border-radius: .6rem; box-shadow: inset 0 .2rem 0 rgba(0, 0, 0, .15); -webkit-user-select: text; user-select: text; touch-action: manipulation; }
.mp-codein::placeholder { color: rgba(194, 24, 122, .25); }
.btn.mp-joingo { width: 100%; min-height: 3.4rem; font-size: 1.9rem; }
.mp-jstatus { width: 22rem; max-width: 46vw; }
.mp-help { font-size: 1.3rem; line-height: 1.15; margin: 0; }
.mp-wait { display: flex; align-items: center; gap: .8rem; font-size: 1.4rem; color: var(--turq); }
.mp-wait .nazar-wrap { width: 2.6rem; height: 2.6rem; }
.mp-err { background: var(--cream); color: var(--ink); border: .2rem solid var(--ink); border-radius: .5rem; padding: .5rem .8rem .6rem; box-shadow: .25rem .25rem 0 var(--verm);
  display: flex; flex-direction: column; gap: .35rem; }
.mp-err b { font-family: var(--display); font-weight: 400; font-size: 1.4rem; color: var(--red); }
.mp-err p { margin: 0; font-size: 1.15rem; line-height: 1.12; }

/* loading */
.mp-ldnames { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; }
.mp-ldnames span { font-family: var(--display); font-size: 1.2rem; color: var(--hc); padding: .2rem .6rem 0; border: .14rem solid var(--hc); border-radius: .4rem; background: rgba(26, 15, 31, .8); }
.mp-ldsub { font-size: 1.05rem; opacity: .7; }

/* results */
.screen.mp-results { gap: .45rem; background: linear-gradient(180deg, rgba(27, 13, 42, .7), rgba(27, 13, 42, .92) 40%); }
.mp-rhead { display: flex; align-items: center; gap: .9rem; flex: none; }
.mp-rtitle { font-family: var(--display); font-weight: 400; font-size: 2.6rem; line-height: 1; color: var(--cream); text-shadow: .14rem .14rem 0 var(--magenta), .26rem .26rem 0 var(--ink);
  animation: stamp .5s cubic-bezier(.2, 1.6, .4, 1) both; padding-top: .2rem; }
.mp-rtitle.won { color: var(--yellow); }
.mp-rsub { font-size: 1.1rem; color: var(--turq); flex: 1; }
.mp-taunts.inline { display: flex; gap: .4rem; }
.mp-rtable { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: .3rem; overflow-y: auto; }
.mp-rrow { position: relative; display: grid; grid-template-columns: 3rem 2.7rem minmax(7rem, 1fr) 7.6rem repeat(4, 4.6rem); align-items: center; gap: .5rem; min-height: 3.35rem;
  padding: .15rem .6rem .15rem .4rem; background: rgba(26, 15, 31, .85); border: .15rem solid var(--ink); border-left: .5rem solid var(--hc); border-radius: .55rem; }
.mp-rrow.me { background: rgba(61, 35, 87, .95); box-shadow: 0 0 0 .14rem var(--hc); }
.mp-rrow.win .mp-rpos { color: var(--yellow); }
.mp-rpos { font-family: var(--display); font-weight: 400; font-size: 1.9rem; line-height: 1; text-align: center; color: var(--cream); padding-top: .2rem; }
.mp-rrow .mp-face { width: 2.7rem; height: 2.7rem; }
.mp-rname { display: flex; flex-direction: column; min-width: 0; line-height: 1; }
.mp-rname b { font-family: var(--display); font-weight: 400; font-size: 1.3rem; color: var(--hc); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-top: .15rem; }
.mp-rname small { font-size: .95rem; opacity: .8; }
.mp-rbike { height: 3rem; width: auto; max-width: 7.6rem; object-fit: contain; justify-self: center; }
.mp-rstat { display: flex; flex-direction: column; align-items: center; line-height: .95; }
.mp-rstat b { font-size: 1.6rem; color: var(--yellow); }
.mp-rstat small { font-size: .8rem; opacity: .7; white-space: nowrap; }
.mp-rbtns { display: flex; gap: .7rem; justify-content: flex-end; align-items: center; flex: none; }
.mp-rbtns .wide { min-width: 13rem; }
.mp-rwait { font-size: 1.15rem; color: var(--turq); min-width: 13rem; text-align: center; }

/* leave / error dialogs */
.mp-leave .pc-sub, .mp-error .pc-sub { max-width: 24rem; text-align: center; font-size: 1.2rem; line-height: 1.12; }
.screen.mp-leave { background: rgba(15, 8, 25, .62); }
.mp-error .pause-card { max-width: 30rem; }
.mp-error .hub-row > .btn { flex: 1; }

/* ---------------- in-race */
.mphud { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.mphud.hidden { display: none; }
.mp-tags { position: absolute; inset: 0; }
.mp-tag { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; padding: .15rem .45rem 0; border-radius: .35rem; line-height: 1;
  background: rgba(26, 15, 31, .78); border: .13rem solid var(--hc); color: var(--hc); white-space: nowrap; will-change: transform; }
.mp-tag b { font-family: var(--display); font-weight: 400; font-size: 1rem; }
.mp-tag small { font-size: .85rem; color: var(--cream); }
.mp-tag small:empty { display: none; }
.mp-tag.ai { border-style: dashed; }
.mp-bub { border-color: var(--hc, var(--ink)); box-shadow: .12rem .12rem 0 var(--hc, var(--ink)); z-index: 2; }
.mp-pen { position: absolute; left: 50%; top: 47%; transform: translate(-50%, -50%); display: none; flex-direction: column; align-items: center; padding: .3rem 1.4rem .4rem;
  background: rgba(26, 15, 31, .85); border: .2rem solid var(--verm); border-radius: .8rem; box-shadow: 0 0 0 .18rem var(--ink); }
.mp-pen.show { display: flex; }
.mp-pen small { font-size: 1rem; letter-spacing: .25em; color: var(--verm); font-weight: 600; }
.mp-pen b { font-family: var(--num); font-size: 3.6rem; line-height: .9; color: var(--yellow); }
.mp-pen span { font-size: 1.05rem; }
.mp-ping { position: absolute; left: calc(50% + 3.3rem); top: calc(var(--st) + .75rem); display: flex; align-items: center; gap: .3rem;
  padding: .15rem .4rem 0; background: rgba(26, 15, 31, .7); border-radius: .35rem; font-size: .95rem; }
.mp-ping .mp-bars { height: .8rem; }
.mp-ping.q4 .mp-bars i { background: var(--parrot); }
.mp-ping.q3 .mp-bars i:nth-child(-n+3) { background: var(--marigold); }
.mp-ping.q2 .mp-bars i:nth-child(-n+2) { background: var(--verm); }
.mp-ping.q1 .mp-bars i:nth-child(1) { background: var(--verm); }
.hud.mp .hud-pause { width: auto; padding: 0 .75rem; border-radius: 1.5rem; min-width: 44px; min-height: 44px; }
.hud.mp .hud-pause b { font-family: var(--display); font-weight: 400; font-size: 1.05rem; padding-top: .2rem; letter-spacing: .04em; }
.dot.human { width: .9rem; height: .9rem; margin: -.45rem 0 0 -.45rem; background: var(--hc); border: .14rem solid var(--ink); z-index: 2; }
.dot.player.hc-h0, .dot.player.hc-h1, .dot.player.hc-h2, .dot.player.hc-h3 { background: var(--hc); }
.mp-tauntbar { position: fixed; z-index: 13; left: var(--sl); top: calc(var(--st) + 10.6rem); display: flex; gap: .35rem; pointer-events: none; }
.mp-tauntbar.lefty { left: auto; right: var(--sr); }
.mp-tauntbar.hidden { display: none; }
.mp-taunt { position: relative; overflow: hidden; pointer-events: auto; min-height: 44px; padding: .3rem .6rem .1rem; font-size: 1.05rem; font-weight: 600; color: var(--ink);
  background: var(--cream); border: .14rem solid var(--ink); border-radius: 1.4rem 1.4rem 1.4rem .3rem; box-shadow: .12rem .14rem 0 var(--ink); white-space: nowrap; opacity: .9; }
.mp-taunt span { position: relative; z-index: 1; }
.mp-taunt i { position: absolute; left: 0; bottom: 0; top: 0; width: 100%; background: rgba(43, 27, 61, .55); transform-origin: left; transform: scaleX(var(--cd, 0)); }
.mp-taunt.cd { opacity: .55; }
.mp-taunt:active { transform: translateY(.12rem); box-shadow: none; }
.mp-taunts.inline .mp-taunt { opacity: 1; }