/* JETOUR G700 Kiosk Race — phones and tablets (the public web game, 5 Oct 2026).
   Every rule here is scoped to the classes index.html's inline script puts on <html> before the first paint (the same
   rules as js/device.js): html.is-mobile = a phone or a tablet, html.is-phone = the phone layout (a mobile device whose
   shorter screen side is under 600 CSS px, or a tablet whose window is too small for the kiosk's layouts: Split View, an
   upright foldable / 8-inch tablet / iPad mini in Safari; js/layout.js keeps it in step with the window), html.is-tablet =
   the others, html.is-tablet-hw = a tablet device whatever its window. The kiosk (Windows, even with a touch screen) and desktops / laptops
   never get any of these classes, so their layout is exactly the one of css/kiosk.css + css/input.css.

   PHONES always play in the landscape layout (js/layout.js): the game area is the whole screen, 640x360 .. 932x430 CSS px
   (minus the safe areas). The kiosk's 1920x1080 design scaled to that height (1u = 0.33 px) made the text 7-10 px and
   its pixel minimums (64 px keys and buttons) pushed the name keyboard and the colour panel off screen, so a phone gets
   its own arrangement of every screen in "phone px": --p = min(H / 360, W / 640) of the game area, 1p = 1 CSS px on a
   640x360 phone, 1.19 px on a 932x430 one. Tap targets >= 40p (keys 46-50p), text >= 11p. Shorter UI areas (Safari's
   bars, which an iPhone can never hide, plus the home-indicator inset: about 300-325 px; Android before the first tap's
   full screen) scale p down to about 0.83: the small texts are floored at 11 px and the buttons, chips and PIN keys at
   40 px there (max(11px, ...), max(40px, ...)), and the layout still fits at 640x300.
   Held upright, the "turn your phone sideways" prompt (#rotate, index.html) covers everything (main.js lets go of every
   finger then).

   TABLETS keep the automatic layout (an upright iPad: the kiosk's top media / game / board sections, the near-square
   1080x960 design; landscape: the 16:9 design) while their window shows that design at >= 0.53 of its size
   (device.js tabletNeedsPhoneLayout); a smaller window gets the phone layout (html.is-phone; upright: the rotate prompt,
   "turn your tablet sideways or make the window wider"). Here: the safe areas, the browser bars, the smallest labels of
   the upright design floored at 11 px, BRAKE's sub-label centred, VIEW's place above GAS. */

/* ------------------------------------------------------------------ all mobile devices */
/* the real visible height (the browser's address bar comes and goes): dvh where the browser knows it */
html.is-mobile #kiosk { bottom: auto; height: 100%; height: 100dvh; }
/* the notch / the rounded corners / the home indicator (viewport-fit=cover): the UI and the touch controls (both in #ui)
   keep clear of them; the 3D view still fills the screen. Only in the full-screen layout: in the portrait sections the
   game area is in the middle of the screen, where no inset reaches. */
html.is-mobile #kiosk.layout-landscape #ui {
  --sa-t: env(safe-area-inset-top, 0px); --sa-r: env(safe-area-inset-right, 0px);
  --sa-b: env(safe-area-inset-bottom, 0px); --sa-l: env(safe-area-inset-left, 0px);
  top: var(--sa-t); right: var(--sa-r); bottom: var(--sa-b); left: var(--sa-l);
}
/* ... but the full-screen dim backdrops (attract shade, countdown vignette, name / phone glass, result shade, staff
   modal) still reach the screen's edges, under the notch and the home indicator: a ::before as big as the screen (#ui
   is a size container without paint containment, so nothing clips it) carries the screen's background */
html.is-mobile #kiosk.layout-landscape .kui { overflow: visible; }   /* (#game-area still clips at the screen edge) */
html.is-mobile #kiosk.layout-landscape .kui-attract-shade { inset: calc(-1 * var(--sa-t)) calc(-1 * var(--sa-r)) calc(-1 * var(--sa-b)) calc(-1 * var(--sa-l)); }
html.is-mobile #kiosk.layout-landscape .kui-player { --kui-bd: rgba(6, 8, 10, .74); --kui-bd-blur: blur(10px); }
html.is-mobile #kiosk.layout-landscape .kui-finish { --kui-bd: linear-gradient(90deg, rgba(4,6,8,.5) 0%, rgba(4,6,8,.22) 55%, rgba(4,6,8,.42) 100%); }
html.is-mobile #kiosk.layout-landscape .kui-count { --kui-bd: radial-gradient(ellipse at center, rgba(0,0,0,.05) 0%, rgba(0,0,0,.5) 100%); }
html.is-mobile #kiosk.layout-landscape .kui-admin { --kui-bd: rgba(0,0,0,.72); }
@container kui (max-aspect-ratio: 29 / 20) {    /* a 4:3 tablet window: kiosk.css's near-square result shade */
  html.is-mobile #kiosk.layout-landscape .kui-finish { --kui-bd: linear-gradient(90deg, rgba(4,6,8,.5) 0%, rgba(4,6,8,.18) 62%, rgba(4,6,8,.3) 100%); }
}
html.is-mobile.kiosk-lowfx #kiosk.layout-landscape .kui-player { --kui-bd: rgba(6, 8, 10, .9); --kui-bd-blur: none; }   /* weak GPU: no blur (kiosk.css) */
html.is-mobile #kiosk.layout-landscape :is(.kui-player, .kui-finish, .kui-count, .kui-admin) {
  background: none; -webkit-backdrop-filter: none; backdrop-filter: none; isolation: isolate;
}
html.is-mobile #kiosk.layout-landscape :is(.kui-player, .kui-finish, .kui-count, .kui-admin)::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  inset: calc(-1 * var(--sa-t)) calc(-1 * var(--sa-r)) calc(-1 * var(--sa-b)) calc(-1 * var(--sa-l));
  background: var(--kui-bd); -webkit-backdrop-filter: var(--kui-bd-blur, none); backdrop-filter: var(--kui-bd-blur, none);
}
/* the 0.625 column of the upright layout from the real visible height too (100vh includes the address bar) */
html.is-mobile #kiosk.layout-portrait { width: min(100vw, calc(100dvh * var(--lay-max-aspect))); }
/* BRAKE's 'HOLD = REVERSE' wraps in an upright tablet's narrow pedal: centred under the label, not against the border */
html.is-mobile .inp-sub { text-align: center; }

/* ------------------------------------------------------------------ the rotate prompt (phones held upright) */
.kiosk-rotate {
  position: fixed; inset: 0; z-index: 400;
  flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  padding: max(24px, env(safe-area-inset-top, 0px)) 24px max(24px, env(safe-area-inset-bottom, 0px));
  background: radial-gradient(ellipse at center, #1a1f25 0%, #050607 75%); color: #f3f1ea; text-align: center;
  font-family: 'Rajdhani', system-ui, 'Segoe UI', sans-serif;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.kiosk-rotate .logo { display: block; width: min(62vw, 280px); height: auto; margin-bottom: 10px; }
.kiosk-rotate .rot-icon { width: 104px; height: 104px; color: #f3f1ea; overflow: visible; }
.kiosk-rotate .rot-phone { transform-origin: 60px 56px; animation: kiosk-rot 2.4s ease-in-out infinite; }
@keyframes kiosk-rot { 0%, 20% { transform: rotate(0deg); } 50%, 80% { transform: rotate(-90deg); } 100% { transform: rotate(0deg); } }
.kiosk-rotate .msg { font-size: 24px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; line-height: 1.2; max-width: 320px; }
.kiosk-rotate .hint { font-size: 15px; font-weight: 600; letter-spacing: .08em; color: #b9b5a8; }
/* the phone layout in a portrait window: a phone held upright, or a tablet whose upright window is too small for the
   kiosk's portrait sections (Split View, an upright foldable / 8-inch tablet, an upright iPad mini in Safari): the phone
   design needs a landscape window. main.js watchUpright() uses the same condition */
.kiosk-rotate .rot-msg-tablet, .kiosk-rotate .rot-lock { display: none; }
html.is-tablet-hw .kiosk-rotate .rot-msg-phone { display: none; }
html.is-tablet-hw .kiosk-rotate .rot-msg-tablet { display: inline; }
html.rot-ios .kiosk-rotate .rot-lock-ios { display: block; }
html.rot-tap:not(:fullscreen) .kiosk-rotate .rot-lock-tap { display: block; }   /* a tap asks for full screen + landscape */
.kiosk-rotate .rot-idle:empty { display: none; }
.kiosk-rotate .rot-idle {
  margin-top: 6px; padding: 8px 16px; border-radius: 10px; background: rgba(255,75,62,.18); border: 2px solid #ff4b3e;
  font-size: 16px; font-weight: 700; letter-spacing: .06em; max-width: 340px;
}
@media (orientation: portrait) {
  html.is-phone .kiosk-rotate { display: flex; }
}
@media (prefers-reduced-motion: reduce) { .kiosk-rotate .rot-phone { animation: none; transform: rotate(-90deg); } }

/* ==================================================================================================================
   PHONES (landscape): every screen in phone px (--p)
   ================================================================================================================== */
html.is-phone .kui,
html.is-phone .inp-overlay { --p: min(calc(100cqh / 360), calc(100cqw / 640)); }
html.is-phone .kui {
  --tgt: max(40px, calc(var(--p) * 40));
  --gap: calc(var(--p) * 5);
  font-size: max(11px, calc(var(--p) * 13));
}
html.is-phone .kui-lbl { font-size: max(11px, calc(var(--p) * 11)); letter-spacing: calc(var(--p) * 1.5); }
html.is-phone .kui-btn {
  min-width: 0; min-height: var(--tgt); padding: 0 calc(var(--p) * 16); border-radius: calc(var(--p) * 10);
  font-size: calc(var(--p) * 15); letter-spacing: calc(var(--p) * 1.5);
}
html.is-phone .kui-btn--primary { box-shadow: 0 calc(var(--p) * 4) calc(var(--p) * 14) rgba(242,164,58,.35); }
html.is-phone .kui-panel { border-radius: calc(var(--p) * 10); }

/* ---------- brand corner (the staff hotspot: hold 5 s) */
html.is-phone .kui-brand { top: calc(var(--p) * 8); left: calc(var(--p) * 10); min-width: 0; min-height: 0; padding: calc(var(--p) * 6) calc(var(--p) * 10); }
html.is-phone .kui-logo { width: calc(var(--p) * 82); }
html.is-phone .kui-model { font-size: max(11px, calc(var(--p) * 11)); letter-spacing: calc(var(--p) * 4); margin-top: calc(var(--p) * 4); }
html.is-phone .kui[data-screen="attract"] .kui-brand { padding: calc(var(--p) * 8) calc(var(--p) * 12); }
html.is-phone .kui[data-screen="attract"] .kui-logo { width: calc(var(--p) * 92); }
/* the start screen's brand box, phone size */
html.is-phone .kui[data-screen="attract"] .kui-brand-hero { margin-top: calc(var(--p) * 7); padding-top: calc(var(--p) * 8); }
html.is-phone .kui-brand-topfire { width: calc(var(--p) * 150); }
html.is-phone .kui-brand-challenge { margin-top: calc(var(--p) * 4); font-size: calc(var(--p) * 16); letter-spacing: calc(var(--p) * 6.8); }
html.is-phone .kui-brand-stages { gap: calc(var(--p) * 7); margin-top: calc(var(--p) * 7); }
html.is-phone .kui-stage-tag { gap: calc(var(--p) * 3); font-size: max(9px, calc(var(--p) * 9)); letter-spacing: calc(var(--p) * .5); }
html.is-phone .kui-stage-tag i { width: calc(var(--p) * 7); height: calc(var(--p) * 7); }
/* the name / phone screen needs the whole height: no brand corner there (attract and the race have it) */
html.is-phone .kui[data-screen="player"] .kui-brand { opacity: 0; visibility: hidden; }

/* ---------- attract: logo + copy top-left, the board top-right, the touch legend bottom-left, TAP TO PLAY bottom-right */
html.is-phone .kui-attract-shade {
  background:
    linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.2) 34%, rgba(0,0,0,0) 48%, rgba(0,0,0,0) 58%, rgba(0,0,0,.45) 100%),
    linear-gradient(0deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 22%);
}
/* TAP TO PLAY bottom-right with HOW TO PLAY beside it */
html.is-phone .kui-attract-hero { left: auto; right: calc(var(--p) * 14); bottom: calc(var(--p) * 16); translate: none; flex-direction: row-reverse; gap: calc(var(--p) * 10); }
html.is-phone .kui-howto-btn { gap: calc(var(--p) * 6); padding: calc(var(--p) * 9) calc(var(--p) * 14); border-width: 1px; font-size: calc(var(--p) * 13); letter-spacing: calc(var(--p) * 1); }
html.is-phone .kui-howto-i { width: calc(var(--p) * 18); height: calc(var(--p) * 18); font-size: calc(var(--p) * 12); }
html.is-phone .kui-howto-card { max-width: calc(100% - var(--p) * 40); padding: calc(var(--p) * 14) calc(var(--p) * 18); }
html.is-phone .kui-howto-title { font-size: calc(var(--p) * 20); letter-spacing: calc(var(--p) * 3); }
html.is-phone .kui-howto-x { font-size: calc(var(--p) * 18); }
html.is-phone .kui-howto-goal { margin: calc(var(--p) * 6) 0 calc(var(--p) * 10); font-size: max(11px, calc(var(--p) * 13)); }
html.is-phone .kui-cta {
  gap: calc(var(--p) * 10); padding: calc(var(--p) * 10) calc(var(--p) * 20); border-width: calc(var(--p) * 2);
  font-size: calc(var(--p) * 18); letter-spacing: calc(var(--p) * 2);
}
html.is-phone .kui-cta::after { box-shadow: 0 0 0 calc(var(--p) * 8) rgba(242,164,58,.32); }
html.is-phone .kui-cta-dot { width: calc(var(--p) * 12); height: calc(var(--p) * 12); box-shadow: 0 0 calc(var(--p) * 8) var(--accent); }
html.is-phone .kui-legend-item { min-width: 0; padding: calc(var(--p) * 6) calc(var(--p) * 10); border-radius: calc(var(--p) * 10); font-size: max(11px, calc(var(--p) * 12)); line-height: 1.3; }
html.is-phone .kui-legend-item > div + div { margin-top: calc(var(--p) * 2); }
html.is-phone .kui-legend-h { font-size: max(11px, calc(var(--p) * 11)); letter-spacing: calc(var(--p) * 2); gap: calc(var(--p) * 6); }
html.is-phone .kui-howto .kui-kc { font-size: max(11px, .95em); }
html.is-phone .kui-ico { width: calc(var(--p) * 6); height: calc(var(--p) * 6); }
html.is-phone .kui-notice { top: calc(var(--p) * 8); max-width: 46cqw; padding: calc(var(--p) * 4) calc(var(--p) * 10); font-size: max(11px, calc(var(--p) * 11)); letter-spacing: 0; }
html.is-phone .kui-attract-board {
  top: calc(var(--p) * 10); right: calc(var(--p) * 12); width: min(calc(var(--p) * 256), calc(100% - var(--p) * 340));
  padding: calc(var(--p) * 8) calc(var(--p) * 10) calc(var(--p) * 8);
}
html.is-phone .kui-attract-board .kui-row:nth-child(n+6) { display: none; }   /* the top 5 */
html.is-phone .kui-board-tabs { gap: calc(var(--p) * 12); font-size: max(11px, calc(var(--p) * 13)); letter-spacing: calc(var(--p) * 1); }
html.is-phone .kui-board-rot { margin: calc(var(--p) * 5) 0 calc(var(--p) * 6); }
html.is-phone .kui-board-best { font-size: max(11px, calc(var(--p) * 11)); letter-spacing: calc(var(--p) * .5); margin-bottom: calc(var(--p) * 4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* leaderboard rows (attract + finish) */
html.is-phone .kui-row {
  grid-template-columns: calc(var(--p) * 20) calc(var(--p) * 11) 1fr auto; gap: calc(var(--p) * 6);
  height: calc(var(--p) * 22); padding: 0 calc(var(--p) * 6); border-radius: calc(var(--p) * 6); font-size: calc(var(--p) * 14);
}
html.is-phone .kui-row-d { width: calc(var(--p) * 10); height: calc(var(--p) * 10); border-width: 1.5px; }
html.is-phone .kui-row-t { letter-spacing: 0; }
html.is-phone .kui-row-n[style] { font-size: max(11px, calc(var(--fit, 1) * 1em)) !important; }   /* a long name shrinks, not under 11 px */
html.is-phone .kui-row--empty { padding: calc(var(--p) * 10) calc(var(--p) * 6); font-size: max(11px, calc(var(--p) * 13)); }
html.is-phone .kui-row--gap { height: calc(var(--p) * 14); line-height: calc(var(--p) * 12); font-size: max(11px, calc(var(--p) * 12)); }

/* ---------- player: title row, the keyboard (digits, letters, ⌫, SPACE, NEXT) left, the colours right */
html.is-phone .kui-player-head { top: calc(var(--p) * 8); }
html.is-phone .kui-player-head .kui-kicker { font-size: max(11px, calc(var(--p) * 11)); letter-spacing: calc(var(--p) * 4); }
html.is-phone .kui-player-head .kui-title { font-size: calc(var(--p) * 22); letter-spacing: calc(var(--p) * 2); margin-top: calc(var(--p) * 2); }
html.is-phone .kui-cancel { top: calc(var(--p) * 8); right: calc(var(--p) * 12); padding: 0 calc(var(--p) * 12); font-size: max(11px, calc(var(--p) * 13)); }
html.is-phone .kui-player-body {
  top: calc(var(--p) * 56); left: calc(var(--p) * 12); right: calc(var(--p) * 12); bottom: calc(var(--p) * 8);
  transform: none; gap: calc(var(--p) * 10);
}
html.is-phone .kui-player-left { flex: 1 1 auto; min-width: 0; }
html.is-phone .kui-namefield {
  height: calc(var(--p) * 40); padding: 0 calc(var(--p) * 14); border-width: calc(var(--p) * 2); border-radius: calc(var(--p) * 10);
  font-size: calc(var(--p) * 24); letter-spacing: calc(var(--p) * 3);
}
html.is-phone .kui-caret { width: calc(var(--p) * 3); margin-left: calc(var(--p) * 2); }
html.is-phone .kui-name-ph { left: calc(var(--p) * 20); }
html.is-phone .kui-name-count { right: calc(var(--p) * 12); font-size: max(11px, calc(var(--p) * 12)); letter-spacing: calc(var(--p) * 1); }
html.is-phone .kui-name-msg { height: calc(var(--p) * 22); padding-top: calc(var(--p) * 4); font-size: max(11px, calc(var(--p) * 12)); letter-spacing: 0; }
html.is-phone .kui-osk { grid-template-columns: repeat(10, minmax(0, 1fr)); gap: calc(var(--p) * 4); margin-top: 0; }
html.is-phone .kui-key {
  height: calc(var(--p) * 50); border-radius: calc(var(--p) * 8); border-bottom-width: calc(var(--p) * 3);
  font-size: calc(var(--p) * 19);
}
html.is-phone .kui-key--fn { font-size: max(11px, calc(var(--p) * 11)); letter-spacing: 0; }
html.is-phone .kui-key[data-k="back"] { font-size: calc(var(--p) * 19); }
html.is-phone .kui-key--ok { font-size: max(11px, calc(var(--p) * 13)); letter-spacing: calc(var(--p) * 1); }
html.is-phone .kui-player-right {
  flex: 0 0 calc(var(--p) * 196); width: calc(var(--p) * 196); align-self: flex-start;
  padding: calc(var(--p) * 8) calc(var(--p) * 10) calc(var(--p) * 10);
}
html.is-phone .kui-player-right > .kui-lbl { text-align: center; }
html.is-phone .kui-car { width: calc(var(--p) * 150); margin: calc(var(--p) * 2) auto 0; }
html.is-phone .kui-paint-name { margin: 0 0 calc(var(--p) * 6); font-size: max(11px, calc(var(--p) * 13)); letter-spacing: calc(var(--p) * 1.5); }
/* six round chips (the chosen one's name is under the car): every colour within reach of a thumb */
html.is-phone .kui-swatches { grid-template-columns: repeat(3, 1fr); gap: calc(var(--p) * 6); }
html.is-phone .kui-swatch { height: max(40px, calc(var(--p) * 40)); justify-content: center; gap: 0; padding: 0; border-width: calc(var(--p) * 2); border-radius: calc(var(--p) * 10); }
html.is-phone .kui-swatch-chip { width: calc(var(--p) * 26); height: calc(var(--p) * 26); }
html.is-phone .kui-swatch-name { display: none; }
html.is-phone .kui-hintbar { display: none; }            /* "TOUCH the keys": a phone has nothing else */
/* the idle warning over the title row (pointer-events none: the keys under it still work) */
html.is-phone .kui-idle {
  top: calc(var(--p) * 10); bottom: auto; z-index: 2; transform: translate(-50%, calc(var(--p) * -6));
  padding: calc(var(--p) * 7) calc(var(--p) * 16); font-size: max(11px, calc(var(--p) * 13)); letter-spacing: calc(var(--p) * 1);
}
html.is-phone .kui-idle.kui-show { transform: translate(-50%, 0); }
html.is-phone .kui-idle span { margin-right: calc(var(--p) * 4); }

/* ---------- player: phone step (number + pad left, prize draw + consent right) */
html.is-phone .kui-phone-body {
  top: calc(var(--p) * 56); left: calc(var(--p) * 12); right: calc(var(--p) * 12); bottom: calc(var(--p) * 8);
  transform: none; gap: calc(var(--p) * 10);
}
html.is-phone .kui-phone-left { flex: 0 0 calc(var(--p) * 250); width: calc(var(--p) * 250); }
html.is-phone .kui-phonefield { font-size: calc(var(--p) * 24); letter-spacing: calc(var(--p) * 3); gap: calc(var(--p) * 8); padding: 0 calc(var(--p) * 12); }
html.is-phone .kui-phone-cc { padding: 0 calc(var(--p) * 6); border-radius: calc(var(--p) * 6); letter-spacing: calc(var(--p) * 1); }
html.is-phone .kui-phone-ph { font-size: max(11px, .5em); letter-spacing: calc(var(--p) * 1); }
html.is-phone .kui-numpad { gap: calc(var(--p) * 5); margin-top: 0; }
html.is-phone .kui-numpad .kui-key { height: calc(var(--p) * 50); font-size: calc(var(--p) * 21); }
html.is-phone .kui-numpad .kui-key--fn { font-size: calc(var(--p) * 19); }
/* the consent text is never cut: the panel scrolls if a longer text does not fit */
html.is-phone .kui-phone-right {
  flex: 1 1 auto; width: auto; min-width: 0; max-height: 100%; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y;
  gap: calc(var(--p) * 8); padding: calc(var(--p) * 10) calc(var(--p) * 12);
}
/* every item keeps its own height (a longer consent text makes the panel scroll; it never runs over the buttons) */
html.is-phone .kui-phone-right > * { flex-shrink: 0; }
html.is-phone .kui-phone-why { font-size: max(11px, calc(var(--p) * 12)); line-height: 1.3; }
html.is-phone .kui-consent { gap: calc(var(--p) * 10); padding: calc(var(--p) * 8) calc(var(--p) * 10); border-width: calc(var(--p) * 2); border-radius: calc(var(--p) * 10); }
html.is-phone .kui-check { width: calc(var(--p) * 26); height: calc(var(--p) * 26); border-width: calc(var(--p) * 2); border-radius: calc(var(--p) * 6); }
html.is-phone .kui-consent.kui-on .kui-check::after { border-width: 0 calc(var(--p) * 3.5) calc(var(--p) * 3.5) 0; }
html.is-phone .kui-consent-text { font-size: max(11px, calc(var(--p) * 12)); line-height: 1.3; }
html.is-phone .kui-phone-actions { gap: calc(var(--p) * 6); margin-top: 0; }
html.is-phone .kui-phone-actions .kui-btn { padding: 0 calc(var(--p) * 10); font-size: calc(var(--p) * 14); letter-spacing: calc(var(--p) * 1); }

/* ---------- countdown: GET READY + the digit between the HUD and the (dimmed) touch controls. The help box has no room
   between the controls on a phone; the attract legend and the controls' own labels say how to drive. */
html.is-phone .kui-count { --kui-ready-top: calc(var(--p) * 96); }
html.is-phone .kui-count-ready {
  font-size: calc(var(--p) * 15); letter-spacing: calc(var(--p) * 7); border-radius: calc(var(--p) * 10);
  padding: calc(var(--p) * 4) calc(var(--p) * 14) calc(var(--p) * 4) calc(var(--p) * 21);
}
html.is-phone .kui-count-num { top: calc(var(--kui-ready-top) + var(--p) * 30); width: calc(var(--p) * 160); margin-left: calc(var(--p) * -80); font-size: calc(var(--p) * 100); }
html.is-phone .kui-count-num.kui-go { -webkit-text-stroke-width: calc(var(--p) * 3); }
html.is-phone .kui-count-help { display: none; }

/* ---------- race HUD: brand / phase / crashes left, timer + route bar centre, speed right (the splits are on the result
   screen: no room for them between the speed and VIEW) */
html.is-phone .kui-hud { --kui-phase-top: calc(var(--p) * 54); }
html.is-phone .kui-hud-center { display: contents; }
html.is-phone .kui-hud-timer { position: absolute; top: calc(var(--p) * 8); left: 50%; translate: -50% 0; padding: calc(var(--p) * 2) calc(var(--p) * 16) calc(var(--p) * 4); }
html.is-phone .kui-hud-time { font-size: calc(var(--p) * 32); text-shadow: 0 1px 6px rgba(0,0,0,.45); }
html.is-phone .kui-hud-best { font-size: max(11px, calc(var(--p) * 11)); letter-spacing: calc(var(--p) * 1); margin-top: 0; }
html.is-phone .kui-hud-route {
  position: absolute; top: calc(var(--p) * 60 + 4px); left: 50%; translate: -50% 0;
  width: min(calc(var(--p) * 330), calc(100% - var(--p) * 320)); padding: calc(var(--p) * 4) calc(var(--p) * 6);
}
html.is-phone .kui-hud-bar { height: calc(var(--p) * 16); border-radius: calc(var(--p) * 4); }
html.is-phone .kui-seg { font-size: max(11px, calc(var(--p) * 11)); letter-spacing: calc(var(--p) * .5); }
html.is-phone .kui-seg:first-child { border-radius: calc(var(--p) * 4) 0 0 calc(var(--p) * 4); }
html.is-phone .kui-seg:nth-last-child(3) { border-radius: 0 calc(var(--p) * 4) calc(var(--p) * 4) 0; }
html.is-phone .kui-hud-ahead { border-radius: 0 calc(var(--p) * 4) calc(var(--p) * 4) 0; }
html.is-phone .kui-hud-marker { top: calc(var(--p) * -3); height: calc(var(--p) * 22); width: calc(var(--p) * 4); margin-left: calc(var(--p) * -2); box-shadow: 0 0 calc(var(--p) * 5) #fff; }
html.is-phone .kui-hud-speed { top: calc(var(--p) * 8); right: calc(var(--p) * 10); min-width: 0; padding: calc(var(--p) * 3) calc(var(--p) * 12) calc(var(--p) * 5); }
html.is-phone .kui-hud-kmh { font-size: calc(var(--p) * 28); }
html.is-phone .kui-hud .kui-lbl { font-size: max(11px, calc(var(--p) * 11)); letter-spacing: calc(var(--p) * 1.5); }
html.is-phone .kui-hud-phase { top: var(--kui-phase-top); left: calc(var(--p) * 10); min-width: 0; padding: calc(var(--p) * 4) calc(var(--p) * 10) calc(var(--p) * 5); }
html.is-phone .kui-hud-phasename { font-size: calc(var(--p) * 15); letter-spacing: calc(var(--p) * 1); margin-top: 0; }
html.is-phone .kui-hud-crash { top: calc(var(--kui-phase-top) + var(--p) * 46); left: calc(var(--p) * 10); min-width: 0; padding: calc(var(--p) * 4) calc(var(--p) * 10) calc(var(--p) * 5); }
html.is-phone .kui-hud-crashn { font-size: calc(var(--p) * 18); }
html.is-phone .kui-hud-splits { display: none; }
/* phase banner under the route bar; CRASH! / FINISH flash, hint pill and camera label in phone sizes */
html.is-phone .kui-banner {
  top: calc(var(--p) * 92); max-width: min(calc(var(--p) * 300), calc(100% - var(--p) * 300));
  padding: calc(var(--p) * 4) calc(var(--p) * 16) calc(var(--p) * 6); border-radius: calc(var(--p) * 10);
}
html.is-phone .kui-banner-k { font-size: max(11px, calc(var(--p) * 11)); letter-spacing: calc(var(--p) * 4); }
html.is-phone .kui-banner-t { font-size: calc(var(--p) * 20); letter-spacing: calc(var(--p) * 2); padding-bottom: calc(var(--p) * 3); border-bottom-width: calc(var(--p) * 3); }
html.is-phone .kui-banner-s { margin-top: calc(var(--p) * 3); font-size: max(11px, calc(var(--p) * 12)); letter-spacing: 0; width: auto; }
html.is-phone .kui-flash { font-size: calc(var(--p) * 46); letter-spacing: calc(var(--p) * 4); padding-bottom: 16cqh; }
html.is-phone .kui-flash--info { font-size: calc(var(--p) * 28); }
html.is-phone .kui-flash--good { font-size: calc(var(--p) * 32); }
html.is-phone .kui-tip {
  top: calc(var(--p) * 160); padding: calc(var(--p) * 6) calc(var(--p) * 16); border-width: calc(var(--p) * 2);
  font-size: calc(var(--p) * 15); letter-spacing: calc(var(--p) * 1); max-width: calc(100% - var(--p) * 20); white-space: normal; text-align: center;
}
html.is-phone .kui-toast { right: calc(var(--p) * 10); top: calc(var(--p) * 62); padding: calc(var(--p) * 4) calc(var(--p) * 10); border-radius: calc(var(--p) * 8); font-size: max(11px, calc(var(--p) * 12)); letter-spacing: calc(var(--p) * 1); }

/* ---------- touch controls: steering bottom-left (◀ wheel ▶), BRAKE + GAS bottom-right, VIEW above BRAKE: all within a
   thumb's reach, under the HUD, the car visible between them */
html.is-phone .inp-steer { left: calc(var(--p) * 10); bottom: calc(var(--p) * 10); width: auto; height: auto; padding: 0; }
html.is-phone .inp-steer-row { gap: calc(var(--p) * 6); }
html.is-phone .inp-wheel { width: calc(var(--p) * 128); height: calc(var(--p) * 128); }
html.is-phone .inp-pad { width: calc(var(--p) * 58); height: calc(var(--p) * 84); padding: calc(var(--p) * 3); }
html.is-phone .inp-hint { display: none; }
html.is-phone .inp-face { border-width: 2px; border-radius: calc(var(--p) * 12); }
html.is-phone .inp-pedals { right: calc(var(--p) * 10); bottom: calc(var(--p) * 10); gap: calc(var(--p) * 10); }
html.is-phone .inp-pedal { padding: calc(var(--p) * 3); }
html.is-phone .inp-pedal .inp-face { border-radius: calc(var(--p) * 12); }
html.is-phone .inp-brake { width: calc(var(--p) * 84); height: calc(var(--p) * 84); }
html.is-phone .inp-gas { width: calc(var(--p) * 78); height: calc(var(--p) * 132); }
html.is-phone .inp-brake .inp-face { border-width: 3px; }
html.is-phone .inp-label { font-size: calc(var(--p) * 15); letter-spacing: .1em; padding-left: .1em; }
html.is-phone .inp-chev { font-size: max(11px, calc(var(--p) * 13)); }
html.is-phone .inp-sub { font-size: max(11px, calc(var(--p) * 11)); letter-spacing: 0; margin-top: .15em; text-align: center; line-height: 1.1; }
html.is-phone .inp-cam {
  right: calc(var(--p) * (10 + 78 + 10 + 14)); bottom: calc(var(--p) * (10 + 84 + 12));
  width: calc(var(--p) * 56); height: calc(var(--p) * 56); padding: calc(var(--p) * 2);
}
html.is-phone .inp-cam .inp-face span { font-size: max(11px, calc(var(--p) * 11)); letter-spacing: .12em; padding-left: .12em; }
html.is-phone .inp-cam .inp-face svg { width: 44%; height: 44%; }
html.is-phone .inp-overlay.is-passive .inp-passive-label { right: calc(var(--p) * 10); bottom: calc(var(--p) * 176); padding: calc(var(--p) * 4) calc(var(--p) * 10); font-size: max(11px, calc(var(--p) * 12)); }

/* ---------- finish: result panel left, top 5 + PLAY AGAIN / EXIT right */
html.is-phone .kui-finish-left {
  left: calc(var(--p) * 12); top: calc(var(--p) * 10); width: calc(var(--p) * 330); max-height: calc(100% - var(--p) * 20);
  padding: calc(var(--p) * 8) calc(var(--p) * 12) calc(var(--p) * 10); border-radius: calc(var(--p) * 12);
}
html.is-phone .kui-finish-head { gap: calc(var(--p) * 10); }
html.is-phone .kui-finish-logo { width: calc(var(--p) * 84); }
html.is-phone .kui-finish-head .kui-kicker { font-size: max(11px, calc(var(--p) * 13)); letter-spacing: calc(var(--p) * 4); padding-left: calc(var(--p) * 10); }
html.is-phone .kui-finish-name { margin-top: calc(var(--p) * 4); gap: calc(var(--p) * 8); font-size: calc(var(--p) * 18); letter-spacing: calc(var(--p) * 2); }
html.is-phone .kui-dot { width: calc(var(--p) * 16); height: calc(var(--p) * 16); }
html.is-phone .kui-finish-time { font-size: calc(var(--p) * 52); letter-spacing: calc(var(--p) * 1); }
html.is-phone .kui-finish-gap { margin-top: 0; font-size: max(11px, calc(var(--p) * 13)); letter-spacing: calc(var(--p) * 1); }
html.is-phone .kui-finish-rank { gap: calc(var(--p) * 8); margin-top: calc(var(--p) * 2); }
html.is-phone .kui-rank-big { font-size: calc(var(--p) * 30); }
html.is-phone .kui-rank-of { font-size: calc(var(--p) * 15); letter-spacing: calc(var(--p) * 1); }
html.is-phone .kui-rank-of--long { font-size: max(11px, calc(var(--p) * 11)); letter-spacing: 0; }
html.is-phone .kui-badge { padding: calc(var(--p) * 3) calc(var(--p) * 8); border-width: 1.5px; font-size: max(11px, calc(var(--p) * 11)); letter-spacing: calc(var(--p) * 1); }
html.is-phone .kui-finish-stats { margin-top: calc(var(--p) * 6); padding: calc(var(--p) * 4) calc(var(--p) * 10) calc(var(--p) * 6); }
html.is-phone .kui-fsplit { grid-template-columns: calc(var(--p) * 6) 1fr auto calc(var(--p) * 64); gap: calc(var(--p) * 8); height: calc(var(--p) * 18); font-size: max(11px, calc(var(--p) * 12)); }
html.is-phone .kui-fsplit i { width: calc(var(--p) * 6); height: calc(var(--p) * 13); }
html.is-phone .kui-fsplit em { font-size: max(11px, calc(var(--p) * 11)); }
html.is-phone .kui-fsplit--head { height: calc(var(--p) * 15); font-size: max(11px, calc(var(--p) * 11)); letter-spacing: calc(var(--p) * 1); }
html.is-phone .kui-fsplit--head b, html.is-phone .kui-fsplit--head em { font-size: max(11px, calc(var(--p) * 11)); }
html.is-phone .kui-fcrash { margin-top: calc(var(--p) * 3); padding-top: calc(var(--p) * 4); font-size: max(11px, calc(var(--p) * 12)); letter-spacing: calc(var(--p) * 1); }
html.is-phone .kui-fcrash b { font-size: calc(var(--p) * 16); }
html.is-phone .kui-finish-right {
  right: calc(var(--p) * 12); top: calc(var(--p) * 10); width: min(calc(var(--p) * 340), calc(100% - var(--p) * 366));
  padding: calc(var(--p) * 8) calc(var(--p) * 10);
}
html.is-phone .kui-finish-right .kui-lbl { font-size: max(11px, calc(var(--p) * 12)); margin-bottom: calc(var(--p) * 4); }
html.is-phone .kui-finish-actions {
  left: auto; right: calc(var(--p) * 12); bottom: calc(var(--p) * 10); width: min(calc(var(--p) * 340), calc(100% - var(--p) * 366));
  flex-wrap: wrap; justify-content: flex-end; gap: calc(var(--p) * 8);
}
html.is-phone .kui-again { flex: 1 1 auto; min-height: max(40px, calc(var(--p) * 44)); padding: 0 calc(var(--p) * 16); font-size: calc(var(--p) * 18); }
html.is-phone .kui-exit { min-height: max(40px, calc(var(--p) * 44)); padding: 0 calc(var(--p) * 16); font-size: calc(var(--p) * 15); }
html.is-phone .kui-finish-timer {
  order: -1; width: 100%; margin-left: 0; padding: calc(var(--p) * 4) calc(var(--p) * 10); border-radius: calc(var(--p) * 8);
  font-size: max(11px, calc(var(--p) * 12)); letter-spacing: 0;
}
html.is-phone .kui-finish-timer-bar { height: calc(var(--p) * 4); margin-bottom: calc(var(--p) * 4); }
html.is-phone .kui-finish-hint { display: none; }          /* key / controller names: a phone has none */

/* ---------- staff PIN pad (hold the logo 5 s) and staff menu: the pad beside the text, a card that scrolls if needed */
html.is-phone .kui-admin-card {
  width: auto; max-width: calc(100% - var(--p) * 20); max-height: calc(100% - var(--p) * 16); overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y;
  gap: calc(var(--p) * 8); padding: calc(var(--p) * 12) calc(var(--p) * 16); border-radius: calc(var(--p) * 12);
}
html.is-phone .kui-admin-card[data-view="pin"] {
  display: grid; grid-template-columns: calc(var(--p) * 200) auto; column-gap: calc(var(--p) * 18); row-gap: calc(var(--p) * 8); align-content: center; align-items: center;
}
html.is-phone .kui-admin-card[data-view="pin"] > * { grid-column: 1; }
html.is-phone .kui-admin-card[data-view="pin"] > .kui-pinpad { grid-column: 2; grid-row: 1 / span 5; }
html.is-phone .kui-admin-title { font-size: calc(var(--p) * 22); letter-spacing: calc(var(--p) * 2); }
html.is-phone .kui-admin-info { font-size: max(11px, calc(var(--p) * 13)); }
html.is-phone .kui-admin-sub { font-size: max(11px, calc(var(--p) * 11)); }
html.is-phone .kui-admin-warn { padding: calc(var(--p) * 6); font-size: max(11px, calc(var(--p) * 12)); }
html.is-phone .kui-admin-diag { font-size: 11px; }
html.is-phone .kui-pin-dots { gap: calc(var(--p) * 10); }
html.is-phone .kui-pin-dots i, html.is-phone .kui-pin-dots.kui-pin-dots--many i { width: calc(var(--p) * 15); height: calc(var(--p) * 15); border-width: 2px; }
html.is-phone .kui-pin-dots--many { gap: calc(var(--p) * 6); }
html.is-phone .kui-pin-msg { min-height: calc(var(--p) * 16); font-size: max(11px, calc(var(--p) * 12)); letter-spacing: calc(var(--p) * 1); }
html.is-phone .kui-pinpad { grid-template-columns: repeat(3, calc(var(--p) * 62)); gap: calc(var(--p) * 5); }
html.is-phone .kui-pinpad .kui-key { height: max(40px, calc(var(--p) * 44)); font-size: calc(var(--p) * 19); }
html.is-phone .kui-pinpad .kui-key--ok { font-size: calc(var(--p) * 14); }
html.is-phone .kui-admin-card--wide { width: calc(100% - var(--p) * 20); }
html.is-phone .kui-admin-cols { gap: calc(var(--p) * 10); }
html.is-phone .kui-admin-col { gap: calc(var(--p) * 6); padding: calc(var(--p) * 8) calc(var(--p) * 10); border-radius: calc(var(--p) * 10); }
html.is-phone .kui-admin-col .kui-admin-title { font-size: calc(var(--p) * 17); }
html.is-phone .kui-admin-card--wide .kui-btn { min-height: var(--tgt); padding: 0 calc(var(--p) * 10); font-size: max(11px, calc(var(--p) * 13)); letter-spacing: calc(var(--p) * 1); }
html.is-phone .kui-admin-foot { gap: calc(var(--p) * 8); }
html.is-phone .kui-admin-list { gap: calc(var(--p) * 4); }
html.is-phone .kui-admin-row { grid-template-columns: calc(var(--p) * 22) 1fr auto auto; gap: calc(var(--p) * 8); font-size: max(11px, calc(var(--p) * 13)); }
html.is-phone .kui-row-when { font-size: 11px; }
html.is-phone .kui-btn--small { min-height: max(36px, calc(var(--p) * 34)); padding: 0 calc(var(--p) * 10); font-size: max(11px, calc(var(--p) * 12)); }
html.is-phone .kui-admin-pager .kui-btn { min-height: max(36px, calc(var(--p) * 36)); }

/* ==================================================================================================================
   TABLETS: the kiosk designs as they are (an upright iPad: the three portrait sections), only the controls legend is
   the touch one (kiosk-ui.js) and the UI keeps clear of the safe areas (above)
   ================================================================================================================== */
/* the name screen's hint bar says only "TOUCH the keys" on a touch device, and in the upright iPad's game area it ran into
   the colour panel: not shown on any phone / tablet */
html.is-mobile .kui-hintbar { display: none; }
/* upright tablet (the kiosk's three sections, a 640-740 px wide game area): VIEW above GAS touched the HUD's splits panel
   (its 98 px minimum is more than 11u there): a little smaller and closer to GAS. (Above BRAKE it sat in the slot the
   countdown help takes.) */
html.is-tablet #kiosk.layout-portrait .inp-cam {
  width: 88px; height: 88px;
  bottom: calc(3.2 * var(--u) + var(--inp-gas-h) + 1.6 * var(--u));
}
/* ... and the result screen's "THE TOP 5 IS BELOW" pill keeps clear of PLAY AGAIN / EXIT, whose 64 px minimum height is
   taller than 96u in a 640 px wide game area */
html.is-tablet .kui--board-ext .kui-finish-below { bottom: calc(var(--u) * 72 + max(64px, calc(var(--u) * 96))); }
/* upright tablets (a 640-740 px wide game area: 1u = 0.53-0.6 px): the kiosk design's smallest labels (17-20u) were
   9-10.5 px there; floored at 11 px like the phone texts */
@container kui (max-aspect-ratio: 29 / 20) {
  html.is-tablet #kiosk.layout-portrait .kui-model { font-size: max(11px, calc(var(--u) * 17)); }
  html.is-tablet #kiosk.layout-portrait .kui[data-screen="attract"] .kui-model { font-size: max(11px, calc(var(--u) * 22)); }
  html.is-tablet #kiosk.layout-portrait .kui-player-right > .kui-lbl,
  html.is-tablet #kiosk.layout-portrait .kui-phone-lbl,
  html.is-tablet #kiosk.layout-portrait .kui-swatch-name,
  html.is-tablet #kiosk.layout-portrait .kui-count-dev,
  html.is-tablet #kiosk.layout-portrait .kui-hud-best { font-size: max(11px, calc(var(--u) * 19)); }
  html.is-tablet #kiosk.layout-portrait .kui-banner-k { font-size: max(11px, calc(var(--u) * 17)); }
  html.is-tablet #kiosk.layout-portrait .kui-fsplit em { font-size: max(11px, calc(var(--u) * 20)); }
  html.is-tablet #kiosk.layout-portrait .kui-fsplit--head,
  html.is-tablet #kiosk.layout-portrait .kui-fsplit--head b,
  html.is-tablet #kiosk.layout-portrait .kui-fsplit--head em { font-size: max(11px, calc(var(--u) * 18)); }
}
/* the phone step's country list (18 Oct 2026): two compact columns, so all seven fit under the field */
html.is-phone .kui-cc-list { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--p) * 4); padding: calc(var(--p) * 4); margin-top: calc(var(--p) * 4); }
html.is-phone .kui-cc-opt { grid-template-columns: auto 1fr; gap: calc(var(--p) * 6); min-height: 40px; padding: 0 calc(var(--p) * 8);
  font-size: max(12px, calc(var(--p) * 13)); letter-spacing: 0; }
html.is-phone .kui-cc-opt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.is-phone .kui-cc-name { display: none; }
html.is-phone .kui-cc-short { display: inline; }