/* JETOUR G700 Kiosk Race — KioskUI styles (spec §6).
   Everything is sized from the UI root = the game area (#ui is the "kui" size container, css/layout.css), never from
   the window, with --u = 1 design px:
     - a wide game area (16:9 landscape) uses the original 1920x1080 design: --u = min(W / 1920, H / 1080);
     - a near-square one (width / height <= 1.45: the portrait kiosk's 1080x960 game area) uses a 1080x960 design with
       its own arrangement of every screen (the @container block at the end): --u = min(W / 1080, H / 960), so on the
       1080x1920 kiosk 1u = 1px, the same physical size as the landscape design on a 1080p screen.
   Without a container (KioskUI on document.body) the container units fall back to the viewport.
   Interactive targets never drop under 64 px. No hover-only affordances (touch kiosk).
   All classes are prefixed kui- so they never collide with the Input module's touch overlay. The bottom leaderboard
   section of the portrait kiosk (#board, outside the game area) is styled at the end (.kui-xboard). */
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&display=swap');

.kui {
  --u: min(calc(100cqw / 1920), calc(100cqh / 1080));
  --panel: rgba(12, 16, 20, 0.80);           /* HUD / legend glass: dark enough to read on snow and sand */
  --panel-strong: rgba(10, 13, 17, 0.88);
  --line: rgba(255, 255, 255, 0.16);
  --text: #f3f1ea;
  --muted: #d8d4c8;
  --accent: #f2a43a;
  --accent-ink: #1b1306;
  --crash: #ff4b3e;
  --good: #66db93;
  --tgt: max(64px, calc(var(--u) * 96));      /* standard touch target height */
  --key: max(64px, calc(var(--u) * 100));     /* on-screen keyboard key */
  --gap: max(6px, calc(var(--u) * 12));
  position: absolute;
  inset: 0;
  z-index: 10;
  overflow: hidden;
  pointer-events: none;
  font-family: 'Rajdhani', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: calc(var(--u) * 24);
  line-height: 1.15;
  color: var(--text);
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.kui *, .kui *::before, .kui *::after { box-sizing: border-box; }
.kui-hidden { display: none !important; }
.kui [role="button"] { pointer-events: auto; cursor: pointer; touch-action: manipulation; }

.kui-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: calc(var(--u) * 14);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.kui-lbl {
  font-size: max(13px, calc(var(--u) * 22));
  font-weight: 600;
  letter-spacing: calc(var(--u) * 4);
  color: var(--muted);
  text-transform: uppercase;
}
.kui-kicker {
  font-size: calc(var(--u) * 26);
  font-weight: 700;
  letter-spacing: calc(var(--u) * 9);
  color: var(--accent);
  text-transform: uppercase;
}
.kui-title {
  font-size: calc(var(--u) * 68);
  font-weight: 700;
  letter-spacing: calc(var(--u) * 6);
  text-transform: uppercase;
}
.kui-kc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.7em;
  height: 1.55em;
  padding: 0 0.4em;
  margin: 0 0.06em;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-bottom-width: 3px;
  border-radius: 0.3em;
  background: rgba(255, 255, 255, 0.08);
  font-size: 0.82em;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text);
  vertical-align: middle;
  line-height: 1;
}

/* ------------------------------------------------------------------ brand (persistent, admin hotspot) */
.kui-brand {
  position: absolute;
  top: calc(var(--u) * 24);
  left: calc(var(--u) * 24);
  z-index: 60;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: max(96px, calc(var(--u) * 232));
  min-height: max(64px, calc(var(--u) * 92));
  padding: calc(var(--u) * 14) calc(var(--u) * 22) calc(var(--u) * 14);
  pointer-events: auto;
  touch-action: none;
  transition: opacity .3s;
}
/* the white JETOUR artwork (wordmark + "Drive Your Future", 5.21:1): never stretched, with room around it */
.kui-logo { display: block; width: calc(var(--u) * 188); height: auto; pointer-events: none; }
.kui-model { font-size: calc(var(--u) * 20); font-weight: 700; letter-spacing: calc(var(--u) * 5.5); white-space: nowrap; color: var(--accent); margin-top: calc(var(--u) * 8); line-height: 1; }
/* the start screen: the brand corner grows into the one brand box (JETOUR, the G700 TOPFIRE lockup, CHALLENGE, the stages) */
.kui-brand-hero { display: none; }
.kui[data-screen="attract"] .kui-brand { padding: calc(var(--u) * 20) calc(var(--u) * 28) calc(var(--u) * 22); }
.kui[data-screen="attract"] .kui-logo { width: calc(var(--u) * 230); }
.kui[data-screen="attract"] .kui-model { display: none; }
.kui[data-screen="attract"] .kui-brand-hero { display: block; margin-top: calc(var(--u) * 16); padding-top: calc(var(--u) * 18); border-top: 1px solid var(--line); }
.kui-brand-topfire { display: block; width: calc(var(--u) * 420); height: auto; pointer-events: none; }
.kui-brand-challenge {
  margin-top: calc(var(--u) * 12); font-size: calc(var(--u) * 46); font-weight: 700; letter-spacing: calc(var(--u) * 19.5); line-height: 1; white-space: nowrap;
  background: linear-gradient(90deg, #ffc23a 0%, #f2862a 55%, #e8422a 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.kui-brand-stages { display: flex; gap: calc(var(--u) * 20); margin-top: calc(var(--u) * 16); }
.kui-stage-tag { display: inline-flex; align-items: center; gap: calc(var(--u) * 8); font-size: calc(var(--u) * 20); font-weight: 700; letter-spacing: calc(var(--u) * 3); color: #e4e0d4; }
.kui-stage-tag i { width: calc(var(--u) * 12); height: calc(var(--u) * 12); border-radius: 50%; background: var(--kui-phase); }
/* the result panel carries the logo itself */
.kui[data-screen="finish"] .kui-brand { opacity: 0; visibility: hidden; }
.kui-hold { position: absolute; left: calc(var(--u) * 14); right: calc(var(--u) * 14); bottom: calc(var(--u) * 6); height: 3px; opacity: 0; transition: opacity .2s; }
.kui-hold i { display: block; height: 100%; background: var(--accent); transform-origin: left; transform: scaleX(var(--kui-hold, 0)); border-radius: 2px; }
.kui-brand.kui-holding .kui-hold { opacity: 1; }

/* ------------------------------------------------------------------ screens */
.kui-screen {
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: auto;
  opacity: 0;
  transition: opacity .35s ease;
}
.kui-screen.kui-in { opacity: 1; }

/* ---------- attract (non-interactive: taps fall through to the Input module)
   Layout at 1920x1080: copy column top-left (x 96-856), leaderboard top-right (x 1296-1856), legend along the
   bottom; the cinematic cameras frame the G700 in the free stage between and below them
   (CONFIG.cameras.cinematicFrame), so neither the copy nor the shade covers the car. */
.kui-attract { pointer-events: none; }
.kui-attract-shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.66) 0%, rgba(0,0,0,.34) 30%, rgba(0,0,0,0) 46%, rgba(0,0,0,0) 64%, rgba(0,0,0,.5) 100%),
    linear-gradient(0deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,0) 15%);
}
/* the call to action and HOW TO PLAY side by side at the bottom centre (the brand box is the brand corner, top-left) */
.kui-attract-hero {
  position: absolute; left: 50%; bottom: calc(var(--u) * 56); translate: -50% 0;
  display: flex; align-items: center; gap: calc(var(--u) * 24);
}
.kui-howto-btn {
  display: inline-flex; align-items: center; gap: calc(var(--u) * 12);
  padding: calc(var(--u) * 16) calc(var(--u) * 28); border-radius: calc(var(--u) * 999);
  background: var(--panel-strong); border: calc(var(--u) * 2) solid rgba(255,255,255,.35);
  font-size: calc(var(--u) * 26); font-weight: 700; letter-spacing: calc(var(--u) * 3); color: #fff; white-space: nowrap;
  cursor: pointer; pointer-events: auto;
}
.kui-howto-btn:hover { border-color: var(--accent); }
.kui-install-btn[hidden] { display: none; }        /* INSTALL APP: only where the browser can install it */
.kui-howto-i { display: grid; place-items: center; width: calc(var(--u) * 32); height: calc(var(--u) * 32); border-radius: 50%; background: var(--accent); color: #111; font-size: calc(var(--u) * 22); }
/* the HOW TO PLAY panel: this device's controls, over the scene; a tap anywhere closes it */
.kui-howto { position: absolute; inset: 0; z-index: 70; display: grid; place-items: center; background: rgba(0,0,0,.55); pointer-events: auto; }
.kui-howto[hidden] { display: none; }
.kui--howto .kui-brand { visibility: hidden; }
.kui-howto-card { max-width: calc(var(--u) * 1180); padding: calc(var(--u) * 26) calc(var(--u) * 32) calc(var(--u) * 30); background: var(--panel-strong); }
.kui-howto-head { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 24); }
.kui-howto-title { font-size: calc(var(--u) * 40); font-weight: 700; letter-spacing: calc(var(--u) * 6); color: var(--accent); }
.kui-howto-x { font-size: calc(var(--u) * 34); color: var(--muted); cursor: pointer; padding: 0 calc(var(--u) * 6); }
.kui-howto-goal { margin: calc(var(--u) * 12) 0 calc(var(--u) * 20); font-size: calc(var(--u) * 26); font-weight: 600; color: #e4e0d4; }
.kui-howto-list { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 18); }
/* staff-visible notice (e.g. software rendering): small strip at the top centre of the attract screen */
.kui-notice {
  position: absolute; top: calc(var(--u) * 24); left: 50%; translate: -50% 0; max-width: 60cqw;
  padding: calc(var(--u) * 8) calc(var(--u) * 22); border-radius: calc(var(--u) * 10);
  background: rgba(120, 20, 14, .9); border: 1px solid var(--crash);
  font-size: max(13px, calc(var(--u) * 20)); font-weight: 700; letter-spacing: calc(var(--u) * 2); color: #fff; text-align: center;
}
.kui-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 22);
  padding: calc(var(--u) * 20) calc(var(--u) * 38);
  white-space: nowrap;
  border-radius: calc(var(--u) * 999);
  background: rgba(10, 13, 17, 0.72);
  border: calc(var(--u) * 3) solid var(--accent);
  font-size: calc(var(--u) * 36);
  font-weight: 700;
  letter-spacing: calc(var(--u) * 4);
  color: #fff;
  animation: kui-cta 1.8s ease-in-out infinite;
}
.kui-cta-dot { width: calc(var(--u) * 26); height: calc(var(--u) * 26); border-radius: 50%; background: var(--accent); box-shadow: 0 0 calc(var(--u) * 18) var(--accent); animation: kui-blink 1.8s ease-in-out infinite; }
/* the pulse ring is its own layer animated by opacity / transform only (compositor): an animated box-shadow repainted
   the attract page every frame */
.kui-cta::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;   /* inset 0: no scroll overflow */
  box-shadow: 0 0 0 calc(var(--u) * 17) rgba(242,164,58,.32);                               /* 3u border + 14u ring */
  opacity: 0; will-change: opacity, transform;
  animation: kui-cta-ring 1.8s ease-out infinite;
}
@keyframes kui-cta { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } }
@keyframes kui-cta-ring { 0% { opacity: 1; transform: scale(1); } 55%, 100% { opacity: 0; transform: scale(1.03, 1.2); } }
@keyframes kui-blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.kui-attract-board {
  position: absolute;
  right: calc(var(--u) * 64);
  top: calc(var(--u) * 104);
  width: calc(var(--u) * 620);
  padding: calc(var(--u) * 22) calc(var(--u) * 22) calc(var(--u) * 18);
  background: var(--panel-strong);
}
.kui-board-tabs { display: flex; gap: calc(var(--u) * 28); font-size: calc(var(--u) * 30); font-weight: 700; letter-spacing: calc(var(--u) * 3); color: rgba(255,255,255,.6); }
.kui-board-tabs .kui-on { color: var(--accent); }
.kui-board-rot { height: 3px; margin: calc(var(--u) * 12) 0 calc(var(--u) * 14); background: rgba(255,255,255,.1); border-radius: 2px; overflow: hidden; }
.kui-board-rot i { display: block; height: 100%; background: var(--accent); transform-origin: left; transform: scaleX(0); }
.kui-board-rot i.kui-run { animation: kui-rot linear forwards; }
@keyframes kui-rot { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.kui-board-best { font-size: calc(var(--u) * 28); font-weight: 600; color: var(--muted); letter-spacing: calc(var(--u) * 2); margin-bottom: calc(var(--u) * 10); }
.kui-board-best b { color: var(--text); font-size: 1.15em; }

.kui-legend-item {
  min-width: calc(var(--u) * 330);
  padding: calc(var(--u) * 16) calc(var(--u) * 22);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: calc(var(--u) * 14);
  font-size: calc(var(--u) * 24);             /* 26u no longer fits four columns at 16:9 */
  font-weight: 600;
  color: #e4e0d4;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.kui-legend-item > div + div { margin-top: calc(var(--u) * 8); }
.kui-legend-h { display: flex; align-items: center; gap: calc(var(--u) * 10); font-size: calc(var(--u) * 20); font-weight: 700; letter-spacing: calc(var(--u) * 4); color: var(--accent); }
.kui-ico { width: calc(var(--u) * 10); height: calc(var(--u) * 10); background: var(--accent); transform: rotate(45deg); display: inline-block; }

/* ---------- leaderboard rows (attract + finish) */
.kui-board { list-style: none; margin: 0; padding: 0; }
.kui-row {
  display: grid;
  grid-template-columns: calc(var(--u) * 54) calc(var(--u) * 26) 1fr auto;
  align-items: center;
  gap: calc(var(--u) * 12);
  height: calc(var(--u) * 52);
  padding: 0 calc(var(--u) * 12);
  border-radius: calc(var(--u) * 10);
  font-size: calc(var(--u) * 35);
  font-weight: 600;
}
.kui-row:nth-child(odd) { background: rgba(255,255,255,.04); }
.kui-row-r { color: var(--muted); font-weight: 700; }
.kui-row:nth-child(1) .kui-row-r { color: var(--accent); }
/* a light ring: Obsidian Black and Forest Green dots vanished on the dark panels */
.kui-row-d { width: calc(var(--u) * 22); height: calc(var(--u) * 22); border-radius: 50%; border: 2px solid rgba(255,255,255,.8); box-shadow: 0 0 0 1px rgba(0,0,0,.6); }
.kui-row-n { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; letter-spacing: 0; }
.kui-row-t { font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: calc(var(--u) * 1); }
.kui-row--empty { display: block; height: auto; padding: calc(var(--u) * 26) calc(var(--u) * 14); color: var(--muted); font-size: calc(var(--u) * 30); text-align: center; background: none !important; }
.kui-row--gap { display: block; height: calc(var(--u) * 30); line-height: calc(var(--u) * 24); text-align: center; color: var(--muted); background: none !important; }
.kui-row--me { background: var(--accent) !important; color: var(--accent-ink); animation: kui-me 1.4s ease-in-out infinite; }
.kui-row--me .kui-row-r { color: var(--accent-ink) !important; }
.kui-row--me .kui-row-d { border-color: var(--accent-ink); }
@keyframes kui-me { 0%, 100% { box-shadow: 0 0 0 0 rgba(242,164,58,.6); } 50% { box-shadow: 0 0 calc(var(--u) * 22) calc(var(--u) * 4) rgba(242,164,58,.35); } }

/* ---------- buttons */
.kui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tgt);
  min-width: max(120px, calc(var(--u) * 200));
  padding: 0 calc(var(--u) * 44);
  border-radius: calc(var(--u) * 16);
  background: rgba(255,255,255,.1);
  border: 2px solid rgba(255,255,255,.24);
  font-size: calc(var(--u) * 34);
  font-weight: 700;
  letter-spacing: calc(var(--u) * 4);
  color: var(--text);
  text-transform: uppercase;
  transition: transform .08s, background .12s;
}
.kui-btn.kui-down { transform: scale(.96); background: rgba(255,255,255,.22); }
.kui-btn--primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); box-shadow: 0 calc(var(--u) * 8) calc(var(--u) * 30) rgba(242,164,58,.35); }
.kui-btn--primary.kui-down { background: #ffbf63; }
.kui-btn--ghost { background: rgba(0,0,0,.25); }
.kui-btn--danger { background: rgba(255,75,62,.16); border-color: var(--crash); color: #ffd9d5; }
.kui-btn--danger.kui-down { background: rgba(255,75,62,.4); }

/* focus ring — only once a d-pad / arrow key has been used */
.kui-nav .kui-focus {
  outline: max(3px, calc(var(--u) * 5)) solid var(--accent);
  outline-offset: max(2px, calc(var(--u) * 4));
  box-shadow: 0 0 calc(var(--u) * 26) rgba(242,164,58,.7);
  z-index: 1;
}

/* ---------- player (name + colour) */
.kui-player { background: rgba(6, 8, 10, .74); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.kui-player-head { position: absolute; top: calc(var(--u) * 62); left: 50%; transform: translateX(-50%); text-align: center; white-space: nowrap; }
.kui-cancel { position: absolute; top: calc(var(--u) * 30); right: calc(var(--u) * 36); min-width: 0; }
.kui-player-body {
  position: absolute;
  top: calc(var(--u) * 228);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: flex-start;
  gap: calc(var(--u) * 64);
}
.kui-player-left { display: flex; flex-direction: column; align-items: stretch; }
.kui-namefield {
  position: relative;
  display: flex;
  align-items: center;
  height: max(72px, calc(var(--u) * 124));
  padding: 0 calc(var(--u) * 36);
  border-radius: calc(var(--u) * 18);
  background: rgba(0,0,0,.45);
  border: calc(var(--u) * 3) solid rgba(242,164,58,.85);
  box-shadow: inset 0 0 calc(var(--u) * 30) rgba(0,0,0,.5);
  font-size: calc(var(--u) * 84);
  font-weight: 700;
  letter-spacing: calc(var(--u) * 10);
  white-space: pre;
}
.kui-name-text { color: #fff; }
/* PLAY AGAIN: the previous driver's name is shown selected; the first typed letter replaces it (PLAY-R4-5) */
.kui-namefield.kui-prefill .kui-name-text { background: rgba(242,164,58,.38); border-radius: calc(var(--u) * 6); box-shadow: 0 0 0 calc(var(--u) * 4) rgba(242,164,58,.38); }
.kui-caret { display: inline-block; width: calc(var(--u) * 6); height: .8em; margin-left: calc(var(--u) * 4); background: var(--accent); animation: kui-blink 1s steps(1) infinite; }
.kui-name-ph { position: absolute; left: calc(var(--u) * 54); color: rgba(255,255,255,.22); pointer-events: none; }
.kui-name-count { position: absolute; right: calc(var(--u) * 28); font-size: calc(var(--u) * 28); letter-spacing: calc(var(--u) * 2); color: var(--muted); }
.kui-name-count.kui-full { color: var(--accent); }
.kui-name-msg { height: calc(var(--u) * 58); padding-top: calc(var(--u) * 12); font-size: calc(var(--u) * 30); font-weight: 600; color: var(--muted); text-align: center; letter-spacing: calc(var(--u) * 1); }
.kui .kui-msg--err { color: #ff8a80; }
.kui .kui-msg--good { color: var(--good); }
.kui-shake { animation: kui-shake .42s ease; }
@keyframes kui-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(calc(var(--u) * -18)); } 40% { transform: translateX(calc(var(--u) * 14)); }
  60% { transform: translateX(calc(var(--u) * -9)); } 80% { transform: translateX(calc(var(--u) * 5)); }
}

.kui-osk { display: grid; grid-template-columns: repeat(10, var(--key)); gap: var(--gap); margin-top: calc(var(--u) * 6); }
.kui-key {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--key);
  border-radius: calc(var(--u) * 14);
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.18);
  border-bottom: calc(var(--u) * 4) solid rgba(0,0,0,.35);
  font-size: calc(var(--u) * 44);
  font-weight: 700;
  color: var(--text);
  transition: transform .06s, background .1s;
}
.kui-key.kui-down { background: var(--accent); color: var(--accent-ink); transform: scale(.94); }
.kui-key--fn { font-size: calc(var(--u) * 28); letter-spacing: calc(var(--u) * 2); background: rgba(255,255,255,.14); }
/* the digit zero gets a slash (Rajdhani draws 0 and O almost alike: N00R vs NOOR, PUX3-6) */
.kui-zero { position: relative; display: inline-block; }
.kui-zero::after { content: ''; position: absolute; left: 50%; top: 50%; width: .1em; height: .72em; background: currentColor; border-radius: .05em; transform: translate(-50%, -50%) rotate(32deg); }
.kui-key[data-k="back"] { font-size: calc(var(--u) * 46); }
.kui-key--ok { grid-column: span 2; background: rgba(242,164,58,.35); border-color: rgba(242,164,58,.7); font-size: calc(var(--u) * 36); letter-spacing: calc(var(--u) * 3); }
.kui-key--ok.kui-ready { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

.kui-player-right { width: calc(var(--u) * 500); padding: calc(var(--u) * 24) calc(var(--u) * 26) calc(var(--u) * 26); background: rgba(12,16,20,.7); }
.kui-car { margin: calc(var(--u) * 8) calc(var(--u) * -6) 0; }
.kui-car-svg { display: block; width: 100%; height: auto; }
.kui-car-svg .kui-car-paint { transition: fill .25s; }
.kui-paint-name { text-align: center; font-size: calc(var(--u) * 34); font-weight: 700; letter-spacing: calc(var(--u) * 4); text-transform: uppercase; margin: calc(var(--u) * 2) 0 calc(var(--u) * 16); }
.kui-swatches { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.kui-swatch:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - var(--gap) / 2); }   /* five paints: the last one centred under the pairs */
.kui-swatch {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 14);
  height: max(64px, calc(var(--u) * 92));
  padding: 0 calc(var(--u) * 14);
  border-radius: calc(var(--u) * 14);
  background: rgba(255,255,255,.06);
  border: calc(var(--u) * 3) solid transparent;
  transition: transform .06s;
}
.kui-swatch.kui-down { transform: scale(.96); }
.kui-swatch.kui-sel { border-color: var(--accent); background: rgba(242,164,58,.14); }
.kui-swatch-chip { flex: 0 0 auto; width: max(36px, calc(var(--u) * 58)); height: max(36px, calc(var(--u) * 58)); border-radius: 50%; border: 2px solid rgba(255,255,255,.5); box-shadow: inset 0 calc(var(--u) * -8) calc(var(--u) * 14) rgba(0,0,0,.35), inset 0 calc(var(--u) * 6) calc(var(--u) * 10) rgba(255,255,255,.25); }
.kui-swatch-name { font-size: calc(var(--u) * 22); font-weight: 700; letter-spacing: calc(var(--u) * 1); text-transform: uppercase; line-height: 1.05; }

.kui-hintbar {
  position: absolute;
  left: 0; right: 0;
  bottom: calc(var(--u) * 46);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(var(--u) * 26);
  font-size: calc(var(--u) * 26);
  font-weight: 600;
  color: var(--muted);
}
.kui-hintbar b { color: var(--text); }
.kui-sep { width: 1px; height: calc(var(--u) * 30); background: rgba(255,255,255,.2); display: inline-block; }
.kui-idle {
  position: absolute;
  left: 50%;
  bottom: calc(var(--u) * 120);
  transform: translate(-50%, calc(var(--u) * 20));
  padding: calc(var(--u) * 16) calc(var(--u) * 36);
  border-radius: calc(var(--u) * 999);
  background: rgba(255,75,62,.9);
  font-size: calc(var(--u) * 32);
  font-weight: 700;
  letter-spacing: calc(var(--u) * 2);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s, transform .25s;
}
.kui-idle span { margin-right: calc(var(--u) * 10); }
.kui-idle.kui-show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- countdown */
.kui-count { pointer-events: none; background: radial-gradient(ellipse at center, rgba(0,0,0,.05) 0%, rgba(0,0,0,.5) 100%); }
/* GET READY vs the 3D start-gate banner ("JETOUR G700 · TIME TRIAL"): the banner's place on screen is a fixed
   fraction of the screen height, but on screens taller than 16:9 --u follows the width, so a top of 252u moved
   GET READY up onto the banner text and the two garbled into one another. It now never sits higher than its
   16:9 place (23.3 % of the height, just under the banner) and has its own dark glass pill, so whatever the
   3D scene shows behind it stays unreadable. The extra left padding balances the trailing letter-spacing. */
.kui-count { --kui-ready-top: max(calc(var(--u) * 252), calc(100cqh * 252 / 1080)); }
.kui-count-ready {
  position: absolute; top: var(--kui-ready-top); left: 50%; transform: translateX(-50%); white-space: nowrap; text-align: center;
  font-size: calc(var(--u) * 44); font-weight: 700; line-height: 1.15; letter-spacing: calc(var(--u) * 18); color: var(--accent);
  padding: calc(var(--u) * 10) calc(var(--u) * 34) calc(var(--u) * 10) calc(var(--u) * 52);
  background: var(--panel-strong); border: 1px solid var(--line); border-radius: calc(var(--u) * 14);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 calc(var(--u) * 8) calc(var(--u) * 30) rgba(0,0,0,.35);
}
.kui-count-num {
  position: absolute;
  top: calc(var(--kui-ready-top) + var(--u) * 74);          /* the number's line box starts under the GET READY pill */
  left: 50%;
  width: calc(var(--u) * 900);
  margin-left: calc(var(--u) * -450);
  text-align: center;
  font-size: calc(var(--u) * 360);
  font-weight: 700;
  line-height: 1.05;
  color: #fff;
  text-shadow: 0 0 calc(var(--u) * 60) rgba(242,164,58,.75), 0 calc(var(--u) * 10) calc(var(--u) * 40) rgba(0,0,0,.6);
}
/* GO! on the bright desert start: a dark green outline under the fill and a tight dark shadow (as CRASH! has), so it reads
   as a word, not a washed-out shape (PUX-5) */
.kui-count-num.kui-go {
  color: var(--good);
  -webkit-text-stroke: max(2px, calc(var(--u) * 7)) rgba(4, 48, 22, .85);
  paint-order: stroke fill;
  text-shadow: 0 0 calc(var(--u) * 6) rgba(0,0,0,.75), 0 calc(var(--u) * 6) calc(var(--u) * 24) rgba(0,0,0,.65), 0 0 calc(var(--u) * 70) rgba(102,219,147,.55);
}
.kui-count--go .kui-count-ready { opacity: 0; }
.kui-pop { animation: kui-pop .9s cubic-bezier(.2, .9, .3, 1.2) both; }
@keyframes kui-pop { 0% { transform: scale(1.7); opacity: 0; } 22% { transform: scale(1); opacity: 1; } 80% { opacity: 1; } 100% { transform: scale(.92); opacity: .85; } }
.kui-count-help {
  position: absolute;
  left: 50%;
  bottom: calc(var(--u) * 70);
  transform: translateX(-50%);
  min-width: calc(var(--u) * 900);
  padding: calc(var(--u) * 22) calc(var(--u) * 40) calc(var(--u) * 24);
  text-align: center;
  background: var(--panel-strong);
}
.kui-count-dev { font-size: calc(var(--u) * 22); font-weight: 700; letter-spacing: calc(var(--u) * 6); color: var(--accent); }
.kui-count-line { margin-top: calc(var(--u) * 10); font-size: calc(var(--u) * 36); font-weight: 700; letter-spacing: calc(var(--u) * 2); }
.kui-count-tip { margin-top: calc(var(--u) * 16); font-size: calc(var(--u) * 24); font-weight: 600; color: var(--muted); }
.kui-count-also { font-size: .78em; color: var(--muted); }
.kui-count-also b { color: var(--accent); letter-spacing: calc(var(--u) * 3); }
/* GO!: the car is moving, the help box goes at once (it stayed over the car for the GO hold) */
.kui-count-help { transition: opacity .2s; }
.kui-count--go .kui-count-help { opacity: 0; }
/* touch controls already shown (dimmed) for the countdown: the reminder sits in the free slot between the steering
   block (left 46%) and the pedals (right), above their bottom edge */
.kui-count--touch .kui-count-help { left: 41%; right: 25.5%; transform: none; min-width: 0; bottom: calc(var(--u) * 40); padding: calc(var(--u) * 16) calc(var(--u) * 20); }
.kui-count--touch .kui-count-line { font-size: calc(var(--u) * 28); }
.kui-count--touch .kui-count-tip { font-size: calc(var(--u) * 21); }

/* ------------------------------------------------------------------ HUD */
.kui-hud { position: absolute; inset: 0; z-index: 20; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; }
.kui-hud.kui-show { opacity: 1; visibility: visible; transition: opacity .3s; }
/* top clears the brand box, whose 64 px minimum height is taller than 92u on small screens (4:3 / 5:4 kiosks) */
.kui-hud { --kui-phase-top: max(calc(var(--u) * 132), calc(var(--u) * 24 + 76px)); }
.kui-hud-phase { position: absolute; top: var(--kui-phase-top); left: calc(var(--u) * 24); min-width: calc(var(--u) * 300); padding: calc(var(--u) * 12) calc(var(--u) * 22); }
.kui-hud-phase b { color: var(--text); }
.kui-hud-phasename { font-size: calc(var(--u) * 38); font-weight: 700; text-transform: uppercase; letter-spacing: calc(var(--u) * 2); line-height: 1.05; margin-top: calc(var(--u) * 2); }
.kui-hud-crash { position: absolute; top: calc(var(--kui-phase-top) + max(calc(var(--u) * 120), 64px)); left: calc(var(--u) * 24); min-width: calc(var(--u) * 180); padding: calc(var(--u) * 10) calc(var(--u) * 22); }
.kui-hud-crashn { font-size: calc(var(--u) * 54); font-weight: 700; line-height: 1; }
.kui-hud-crash.kui-has .kui-hud-crashn { color: var(--crash); }
.kui-bump { animation: kui-bump .45s ease; }
@keyframes kui-bump { 0% { transform: scale(1); } 30% { transform: scale(1.18); background: rgba(255,75,62,.45); } 100% { transform: scale(1); } }

.kui-hud-center { position: absolute; top: calc(var(--u) * 20); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 10); }
.kui-hud-timer { padding: calc(var(--u) * 6) calc(var(--u) * 34) calc(var(--u) * 10); text-align: center; background: var(--panel-strong); }
.kui-hud-time { font-size: calc(var(--u) * 104); font-weight: 700; line-height: 1; white-space: nowrap; text-shadow: 0 2px 14px rgba(0,0,0,.45); }
.kui-hud-time .kui-d { display: inline-block; width: .56em; text-align: center; }
.kui-hud-time .kui-p { display: inline-block; width: .26em; text-align: center; color: var(--muted); }
.kui-hud-best { font-size: calc(var(--u) * 24); font-weight: 600; letter-spacing: calc(var(--u) * 3); color: var(--muted); margin-top: calc(var(--u) * 2); }
.kui-hud-best b { color: var(--accent); font-size: 1.1em; }
.kui-hud-best.kui-over b { color: #ff8a80; }
.kui-hud-route { width: calc(var(--u) * 820); padding: calc(var(--u) * 10) calc(var(--u) * 14); }
.kui-hud-bar { position: relative; display: flex; height: calc(var(--u) * 30); border-radius: calc(var(--u) * 7); overflow: visible; }
/* the phase names sit above the darkened "still ahead" part of the bar, so they keep full contrast (dark ink on the
   phase colour); the bar background itself is still darkened ahead of the car */
.kui-seg { flex: 1; display: flex; align-items: center; justify-content: center; font-size: max(13px, calc(var(--u) * 18)); font-weight: 700; letter-spacing: calc(var(--u) * 2); color: rgba(0,0,0,.86); }
.kui-seg span { position: relative; z-index: 2; }
/* still ahead of the car: the segment is darkened by the striped overlay, so its label takes light ink with a dark halo
   where that reads better (dark ink there was 2.2-3.2:1 on FOREST / CANYON; light ink is 6-9:1), A11Y-1 */
.kui-seg.kui-ahead.kui-ink-light { color: #fff; text-shadow: 0 0 2px rgba(0,0,0,.95), 0 1px 3px rgba(0,0,0,.9), 0 0 8px rgba(0,0,0,.55); }
.kui-seg.kui-ahead:not(.kui-ink-light) { color: #141414; text-shadow: 0 0 3px rgba(255,255,255,.55); }   /* SNOW: dark ink is the better one there */
.kui-seg:first-child { border-radius: calc(var(--u) * 7) 0 0 calc(var(--u) * 7); }
.kui-seg:nth-last-child(3) { border-radius: 0 calc(var(--u) * 7) calc(var(--u) * 7) 0; }
.kui-hud-ahead { position: absolute; z-index: 1; top: 0; bottom: 0; left: 0; right: 0; background: repeating-linear-gradient(135deg, rgba(0,0,0,.30) 0 6px, rgba(0,0,0,.42) 6px 12px); border-radius: 0 calc(var(--u) * 7) calc(var(--u) * 7) 0; }
.kui-hud-marker { position: absolute; z-index: 3; top: calc(var(--u) * -6); width: calc(var(--u) * 6); height: calc(var(--u) * 42); margin-left: calc(var(--u) * -3); background: #fff; border-radius: 3px; box-shadow: 0 0 calc(var(--u) * 10) #fff; left: 0; }

.kui-hud-speed { position: absolute; top: calc(var(--u) * 24); right: calc(var(--u) * 24); min-width: calc(var(--u) * 250); padding: calc(var(--u) * 8) calc(var(--u) * 24) calc(var(--u) * 12); text-align: right; }
.kui-hud-kmh { font-size: calc(var(--u) * 96); font-weight: 700; line-height: .95; font-variant-numeric: tabular-nums; }
.kui-hud-kmh.kui-rev { color: #ffd27a; }                     /* "R 11": the car is in the reverse gear */
.kui-hud-splits { position: absolute; top: calc(var(--u) * 184); right: calc(var(--u) * 24); min-width: calc(var(--u) * 330); padding: calc(var(--u) * 12) calc(var(--u) * 20) calc(var(--u) * 14); }
.kui-split { display: grid; grid-template-columns: calc(var(--u) * 10) 1fr auto; align-items: center; gap: calc(var(--u) * 12); margin-top: calc(var(--u) * 8); font-size: calc(var(--u) * 26); font-weight: 600; color: var(--muted); }
.kui-split i { width: calc(var(--u) * 10); height: calc(var(--u) * 26); border-radius: 2px; opacity: .5; }
.kui-split b { font-weight: 700; font-variant-numeric: tabular-nums; }
.kui-split.kui-done { color: var(--text); }
.kui-split.kui-done i { opacity: 1; }
.kui-split.kui-cur { color: var(--text); }
.kui-split.kui-cur i { opacity: 1; box-shadow: 0 0 calc(var(--u) * 10) currentColor; }

/* ---------- flash + phase banner */
.kui-flash {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 22cqh;
  pointer-events: none;
  font-size: calc(var(--u) * 120);
  font-weight: 700;
  letter-spacing: calc(var(--u) * 12);
  text-transform: uppercase;
  text-shadow: 0 calc(var(--u) * 4) calc(var(--u) * 24) rgba(0,0,0,.7);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s, visibility 0s .3s;
}
.kui-flash.kui-show { opacity: 1; visibility: visible; transition: none; animation: kui-flash-in .35s cubic-bezier(.2,.9,.3,1.3); }
/* info flashes (FINISH, STILL THERE…) sit on a dark band, legible on snow and sand */
.kui-flash--info, .kui-flash--good { background: linear-gradient(180deg, rgba(0,0,0,0) 36%, rgba(6,8,10,.62) 44%, rgba(6,8,10,.62) 56%, rgba(0,0,0,0) 64%); }
.kui-flash--info { color: #fff; font-size: calc(var(--u) * 72); }
.kui-flash--good { color: var(--good); font-size: calc(var(--u) * 84); }
.kui-flash--crash {
  color: var(--crash);
  -webkit-text-stroke: max(1px, calc(var(--u) * 3)) rgba(70, 0, 0, .75);
  paint-order: stroke fill;
  text-shadow: 0 0 calc(var(--u) * 40) rgba(255,75,62,.75), 0 calc(var(--u) * 4) calc(var(--u) * 24) rgba(0,0,0,.8);
  background: radial-gradient(ellipse at center, rgba(255,40,30,0) 45%, rgba(255,40,30,.38) 100%);
}
/* the word shakes, the red vignette (the layer's background) stays put: shaking the whole layer showed an unshaded strip of
   the scene at the edge (PUX-10) */
.kui-flash-t { display: inline-block; }
.kui-flash--crash.kui-show { animation: none; }
.kui-flash--crash.kui-show .kui-flash-t { animation: kui-crash .5s ease; }
@keyframes kui-flash-in { from { transform: scale(1.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes kui-crash {
  0% { transform: scale(1.5); opacity: 0; }
  20% { transform: scale(1) translateX(calc(var(--u) * -14)); opacity: 1; }
  40% { transform: translateX(calc(var(--u) * 12)); } 60% { transform: translateX(calc(var(--u) * -8)); }
  80% { transform: translateX(calc(var(--u) * 4)); } 100% { transform: none; }
}

/* phase banner: a compact strip right under the route bar, so the first (tougher) hurdle rows of the new phase
   stay in view (it used to cover the road ahead) */
.kui-banner {
  position: absolute;
  top: calc(var(--u) * 232);
  left: 50%;
  width: max-content;
  max-width: 90cqw;
  margin-left: 0;
  translate: -50% 0;
  padding: calc(var(--u) * 10) calc(var(--u) * 44) calc(var(--u) * 14);
  border-radius: calc(var(--u) * 14);
  background: var(--panel-strong);
  border: 1px solid var(--line);
  z-index: 40;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transform: translateY(calc(var(--u) * -20));
  transition: opacity .6s, transform .6s;
  /* tight outline first so the banner stays legible on the bright snow phase (integration fix) */
  text-shadow: 0 0 calc(var(--u) * 3) rgba(0,0,0,.8), 0 calc(var(--u) * 2) calc(var(--u) * 6) rgba(0,0,0,.55), 0 calc(var(--u) * 3) calc(var(--u) * 18) rgba(0,0,0,.6);
}
.kui-banner.kui-show { opacity: 1; transform: none; transition: opacity .25s, transform .25s; }   /* quick in (it is read while steering), slow out */
.kui-banner-k, .kui-banner-s { width: fit-content; margin-left: auto; margin-right: auto; }
.kui-banner-k { font-size: calc(var(--u) * 22); font-weight: 700; letter-spacing: calc(var(--u) * 10); color: var(--accent); }
.kui-banner-t { display: inline-block; font-size: calc(var(--u) * 64); font-weight: 700; letter-spacing: calc(var(--u) * 6); text-transform: uppercase; line-height: 1.02; padding-bottom: calc(var(--u) * 6); border-bottom: calc(var(--u) * 5) solid var(--kui-phase, var(--accent)); }
.kui-banner-s { margin-top: calc(var(--u) * 8); font-size: calc(var(--u) * 28); font-weight: 600; letter-spacing: calc(var(--u) * 2); }

/* hint pill (reverse hint, idle countdown): between the CRASH flash and the car */
.kui-tip {
  position: absolute; left: 50%; top: calc(var(--u) * 470); translate: -50% 0; z-index: 41;
  padding: calc(var(--u) * 14) calc(var(--u) * 36); border-radius: calc(var(--u) * 999);
  background: var(--panel-strong); border: calc(var(--u) * 3) solid var(--accent);
  font-size: calc(var(--u) * 40); font-weight: 700; letter-spacing: calc(var(--u) * 3); color: #fff; white-space: nowrap;
  pointer-events: none; opacity: 0; visibility: hidden; transform: translateY(calc(var(--u) * 12)); transition: opacity .25s, transform .25s, visibility 0s .25s;
}
.kui-tip.kui-show { opacity: 1; visibility: visible; transform: none; transition: opacity .2s, transform .2s; }
.kui-tip--warn { border-color: var(--crash); }
/* camera name: a small label at the right edge, under the splits (never over the countdown or the road) */
.kui-toast {
  position: absolute; right: calc(var(--u) * 24); top: calc(var(--u) * 400); z-index: 41;
  padding: calc(var(--u) * 10) calc(var(--u) * 22); border-radius: calc(var(--u) * 12);
  background: var(--panel-strong); border: 1px solid var(--line);
  font-size: calc(var(--u) * 26); font-weight: 700; letter-spacing: calc(var(--u) * 3); color: #fff; text-transform: uppercase;
  pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s;
}
.kui-toast.kui-show { opacity: 1; visibility: visible; transition: opacity .15s; }

/* ---------- finish */
/* the result sits on its own dark glass panels; the backdrop is light, so the G700 (framed in the free space between
   the columns and above the buttons, CONFIG.cameras.finishFrame) stays visible on the screen players look at longest */
.kui-finish { background: linear-gradient(90deg, rgba(4,6,8,.5) 0%, rgba(4,6,8,.22) 55%, rgba(4,6,8,.42) 100%); }
.kui-finish-left { position: absolute; left: calc(var(--u) * 96); top: calc(var(--u) * 84);   /* the brand corner is hidden here: the panel has the logo */ width: calc(var(--u) * 908); padding: calc(var(--u) * 20) calc(var(--u) * 24) calc(var(--u) * 24); border-radius: calc(var(--u) * 18); background: var(--panel-strong); }
.kui-finish-name { display: flex; align-items: center; gap: calc(var(--u) * 18); margin-top: calc(var(--u) * 8); font-size: calc(var(--u) * 58); font-weight: 700; letter-spacing: calc(var(--u) * 5); }
.kui-dot { width: calc(var(--u) * 34); height: calc(var(--u) * 34); border-radius: 50%; border: 2px solid rgba(255,255,255,.85); box-shadow: 0 0 0 1px rgba(0,0,0,.6); flex: 0 0 auto; }
.kui-finish-time { font-size: calc(var(--u) * 172); font-weight: 700; line-height: .95; color: var(--accent); font-variant-numeric: tabular-nums; letter-spacing: calc(var(--u) * 2); text-shadow: 0 0 calc(var(--u) * 50) rgba(242,164,58,.35); animation: kui-flash-in .5s cubic-bezier(.2,.9,.3,1.2); }
.kui-finish-rank { display: flex; align-items: baseline; flex-wrap: wrap; gap: calc(var(--u) * 18); margin-top: calc(var(--u) * 8); }
.kui-rank-big { font-size: calc(var(--u) * 96); font-weight: 700; line-height: 1; }
.kui-rank-of { font-size: calc(var(--u) * 40); font-weight: 700; color: var(--muted); letter-spacing: calc(var(--u) * 3); }
.kui-rank-of--long { font-size: calc(var(--u) * 26); letter-spacing: calc(var(--u) * 2); }   /* TODAY · NOT IN THE ALL-TIME TOP 200 / NOT SAVED: one line */
.kui-badge { align-self: center; padding: calc(var(--u) * 8) calc(var(--u) * 20); border-radius: calc(var(--u) * 999); border: 2px solid var(--accent); color: var(--accent); font-size: calc(var(--u) * 28); font-weight: 700; letter-spacing: calc(var(--u) * 3); }
.kui-badge--gold { background: var(--accent); color: var(--accent-ink); animation: kui-me 1.4s ease-in-out infinite; }
.kui-finish-stats { margin-top: calc(var(--u) * 18); padding: calc(var(--u) * 12) calc(var(--u) * 26) calc(var(--u) * 14); }
.kui-fsplit { display: grid; grid-template-columns: calc(var(--u) * 12) 1fr auto calc(var(--u) * 170); align-items: center; gap: calc(var(--u) * 16); height: calc(var(--u) * 44); font-size: calc(var(--u) * 30); font-weight: 600; }
.kui-fsplit i { width: calc(var(--u) * 12); height: calc(var(--u) * 32); border-radius: 2px; }
.kui-fsplit b { font-weight: 700; font-variant-numeric: tabular-nums; }
.kui-fsplit em { font-style: normal; color: var(--muted); font-size: calc(var(--u) * 24); text-align: right; font-variant-numeric: tabular-nums; }
.kui-fsplit--head { height: calc(var(--u) * 30); font-size: calc(var(--u) * 18); font-weight: 700; letter-spacing: calc(var(--u) * 3); color: var(--muted); }
.kui-fsplit--head b, .kui-fsplit--head em { font-size: calc(var(--u) * 18); font-weight: 700; color: var(--muted); }
.kui-finish-gap { margin-top: calc(var(--u) * 2); font-size: calc(var(--u) * 30); font-weight: 700; letter-spacing: calc(var(--u) * 2); color: var(--muted); }
.kui-fcrash { display: flex; justify-content: space-between; align-items: center; margin-top: calc(var(--u) * 10); padding-top: calc(var(--u) * 12); border-top: 1px solid var(--line); font-size: calc(var(--u) * 30); font-weight: 700; letter-spacing: calc(var(--u) * 3); color: var(--muted); }
.kui-fcrash b { font-size: calc(var(--u) * 44); color: var(--text); }
.kui-fcrash.kui-has b { color: var(--crash); }
.kui-finish-right { position: absolute; right: calc(var(--u) * 120); top: calc(var(--u) * 108); width: calc(var(--u) * 660); padding: calc(var(--u) * 24) calc(var(--u) * 28); background: var(--panel-strong); }
.kui-finish-right .kui-lbl { font-size: calc(var(--u) * 26); color: var(--accent); font-weight: 700; margin-bottom: calc(var(--u) * 14); }
.kui-finish-actions { position: absolute; left: calc(var(--u) * 120); right: calc(var(--u) * 120); bottom: calc(var(--u) * 60); display: flex; align-items: center; gap: calc(var(--u) * 28); }
.kui-again { min-height: max(80px, calc(var(--u) * 118)); padding: 0 calc(var(--u) * 70); font-size: calc(var(--u) * 50); }
.kui-exit { min-height: max(80px, calc(var(--u) * 118)); background: var(--panel-strong); }
/* narrow, at the right edge: the wide panel covered the car's tail and spare wheel (UX-3 / VIS-R9) */
.kui-finish-timer { margin-left: auto; width: calc(var(--u) * 340); padding: calc(var(--u) * 14) calc(var(--u) * 20); border-radius: calc(var(--u) * 12); background: var(--panel-strong); font-size: calc(var(--u) * 28); font-weight: 600; color: var(--muted); text-align: right; letter-spacing: calc(var(--u) * 1); }
.kui-finish-timer-bar { height: calc(var(--u) * 8); margin-bottom: calc(var(--u) * 12); border-radius: calc(var(--u) * 4); background: rgba(255,255,255,.12); overflow: hidden; }
.kui-finish-timer-bar i { display: block; height: 100%; background: var(--accent); transform-origin: left; }
/* the buttons on the player's device (UX-3): under the PLAY AGAIN / EXIT row */
.kui-finish-hint { position: absolute; left: 0; top: 100%; margin-top: calc(var(--u) * 10); display: flex; align-items: center; gap: calc(var(--u) * 16); font-size: calc(var(--u) * 24); font-weight: 600; color: var(--muted); white-space: nowrap; }

/* ------------------------------------------------------------------ boot warm-up (KioskUI.warm): drawn once, nearly invisible */
.kui-warm { position: absolute; inset: 0; opacity: 0.01; pointer-events: none; z-index: 0; }
.kui-warm .kui-screen, .kui-warm * { pointer-events: none !important; }   /* the warm-up copies never take input */
.kui-hud.kui-warm-hud { visibility: visible; opacity: 0.01; transition: none; }

/* ------------------------------------------------------------------ admin */
.kui-admin { position: absolute; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.72); pointer-events: auto; opacity: 0; transition: opacity .2s; }
.kui-admin.kui-in { opacity: 1; }
.kui-admin-card { display: flex; flex-direction: column; align-items: stretch; gap: calc(var(--u) * 18); width: max(340px, calc(var(--u) * 600)); padding: calc(var(--u) * 34) calc(var(--u) * 40); background: rgba(14,18,22,.96); text-align: center; }
.kui-admin-title { font-size: calc(var(--u) * 52); font-weight: 700; letter-spacing: calc(var(--u) * 4); }
.kui-admin-info { font-size: calc(var(--u) * 28); font-weight: 600; color: var(--muted); }
.kui-admin-info b { color: var(--text); }
.kui-pin-dots { display: flex; justify-content: center; gap: calc(var(--u) * 22); }
.kui-pin-dots i { width: calc(var(--u) * 30); height: calc(var(--u) * 30); border-radius: 50%; border: calc(var(--u) * 3) solid var(--muted); }
.kui-pin-dots i.kui-on { background: var(--accent); border-color: var(--accent); }
/* the PIN length is known only to the server: one dot per digit typed (at least admin.pinMinLength), smaller from 7 on */
.kui-pin-dots--many { gap: calc(var(--u) * 12); }
.kui-pin-dots.kui-pin-dots--many i { width: calc(var(--u) * 24); height: calc(var(--u) * 24); }
.kui-pin-msg { min-height: calc(var(--u) * 34); font-size: calc(var(--u) * 26); font-weight: 700; letter-spacing: calc(var(--u) * 2); color: var(--muted); }
.kui-pinpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.kui-pinpad .kui-key { height: max(64px, calc(var(--u) * 104)); }
.kui-pinpad .kui-key--ok { grid-column: auto; }
.kui-admin-sub { font-size: calc(var(--u) * 22); font-weight: 600; color: var(--muted); }
.kui-admin-warn { padding: calc(var(--u) * 10); border-radius: calc(var(--u) * 10); background: rgba(255,75,62,.2); border: 1px solid var(--crash); font-size: calc(var(--u) * 24); font-weight: 700; }
.kui-admin-diag { font: calc(var(--u) * 18)/1.3 Consolas, monospace; color: var(--muted); word-break: break-word; }
.kui-admin-list { display: flex; flex-direction: column; gap: calc(var(--u) * 8); }
.kui-admin-row { display: grid; grid-template-columns: calc(var(--u) * 50) 1fr auto auto; align-items: center; gap: calc(var(--u) * 14); font-size: calc(var(--u) * 30); font-weight: 600; text-align: left; }
/* remove list: colour dot and the race's date / time, so two players with the same name can be told apart (PUX3-7) */
.kui-admin-row .kui-row-n { display: flex; align-items: center; gap: calc(var(--u) * 10); min-width: 0; }
.kui-dot.kui-dot--row { width: calc(var(--u) * 22); height: calc(var(--u) * 22); border-width: 1px; }
.kui-row-when { margin-left: auto; padding-left: calc(var(--u) * 8); font-size: calc(var(--u) * 20); font-weight: 600; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.kui-admin-pager { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 14); }
.kui-btn--small { min-width: max(96px, calc(var(--u) * 150)); padding: 0 calc(var(--u) * 18); font-size: calc(var(--u) * 26); }
.kui-btn--danger.kui-armed { background: var(--crash); color: #fff; }

/* ------------------------------------------------------------------ admin: staff menu in two columns (leaderboard | prize draw) */
.kui-admin-card--wide { width: max(340px, calc(var(--u) * 1100)); text-align: left; }
.kui-admin-card--wide > .kui-lbl { text-align: center; }
.kui-admin-cols { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 24); align-items: start; }
.kui-admin-cols--one { grid-template-columns: 1fr; }
.kui-admin-col { display: flex; flex-direction: column; gap: calc(var(--u) * 14); padding: calc(var(--u) * 20) calc(var(--u) * 22); border-radius: calc(var(--u) * 14); background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.kui-admin-col .kui-admin-title { font-size: calc(var(--u) * 38); }
.kui-admin-card--wide .kui-btn { min-height: max(64px, calc(var(--u) * 84)); padding: 0 calc(var(--u) * 20); font-size: calc(var(--u) * 28); letter-spacing: calc(var(--u) * 3); }
.kui-admin-foot { display: flex; gap: calc(var(--u) * 14); }
.kui-admin-foot .kui-btn { flex: 1; }
.kui-admin-card--wide .kui-admin-diag { text-align: center; }

/* ------------------------------------------------------------------ player: phone / prize-draw step (same screen, step 2) */
.kui-phone-body {
  position: absolute;
  top: calc(var(--u) * 228);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: flex-start;
  gap: calc(var(--u) * 64);
}
.kui-phone-left { display: flex; flex-direction: column; align-items: stretch; width: calc(var(--u) * 640); }
.kui-phonefield { gap: calc(var(--u) * 18); letter-spacing: calc(var(--u) * 6); }
.kui-phone-cc { flex: 0 0 auto; padding: 0 calc(var(--u) * 16); border-radius: calc(var(--u) * 12); background: rgba(242,164,58,.18); color: var(--accent); font-size: .6em; letter-spacing: calc(var(--u) * 3); line-height: 1.45; }
.kui-phone-text { color: #fff; }
.kui-phone-ph { color: rgba(255,255,255,.24); font-size: .5em; letter-spacing: calc(var(--u) * 2); white-space: nowrap; }   /* fits inside the field in both designs (PUX-4) */
.kui-phonefield .kui-caret { margin-left: 0; }
.kui-numpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); margin-top: calc(var(--u) * 6); }
.kui-numpad .kui-key { font-size: calc(var(--u) * 50); }
.kui-numpad .kui-key--fn { font-size: calc(var(--u) * 44); }
.kui-phone-right {
  display: flex; flex-direction: column; gap: calc(var(--u) * 18);
  width: calc(var(--u) * 640);
  padding: calc(var(--u) * 24) calc(var(--u) * 28) calc(var(--u) * 28);
  background: rgba(12,16,20,.7);
}
.kui-phone-lbl { color: var(--accent); font-weight: 700; }
.kui-phone-why { font-size: calc(var(--u) * 27); font-weight: 600; line-height: 1.25; color: var(--muted); }
.kui-consent {
  display: grid; grid-template-columns: auto 1fr; align-items: start; gap: calc(var(--u) * 18);
  min-height: var(--tgt);
  padding: calc(var(--u) * 18) calc(var(--u) * 20);
  border-radius: calc(var(--u) * 14);
  background: rgba(255,255,255,.06);
  border: calc(var(--u) * 3) solid rgba(255,255,255,.2);
  transition: border-color .12s, background .12s;
}
.kui-consent.kui-down { background: rgba(255,255,255,.14); }
.kui-consent.kui-on { border-color: var(--good); background: rgba(102,219,147,.12); }
.kui-consent.kui-need:not(.kui-on) { border-color: var(--crash); background: rgba(255,75,62,.10); }   /* PLAY was refused for it */
.kui-check {
  position: relative; display: block;
  width: max(40px, calc(var(--u) * 52)); height: max(40px, calc(var(--u) * 52));
  border-radius: calc(var(--u) * 10);
  border: calc(var(--u) * 3) solid rgba(255,255,255,.75);
  background: rgba(0,0,0,.35);
}
.kui-consent.kui-on .kui-check { background: var(--good); border-color: var(--good); }
.kui-consent.kui-on .kui-check::after {
  content: ''; position: absolute; left: 34%; top: 12%; width: 30%; height: 56%;
  border: solid #0f2c1a; border-width: 0 calc(var(--u) * 6) calc(var(--u) * 6) 0; transform: rotate(45deg);
}
.kui-consent-text { font-size: calc(var(--u) * 24); font-weight: 600; line-height: 1.3; color: var(--text); }
.kui-phone-actions { display: flex; gap: calc(var(--u) * 14); margin-top: calc(var(--u) * 4); }
.kui-phone-actions .kui-btn { min-width: 0; padding: 0 calc(var(--u) * 26); }
.kui-pnext { flex: 1; }
.kui-btn--primary.kui-pnext:not(.kui-ready) { background: rgba(242,164,58,.32); color: var(--text); box-shadow: none; }

/* ------------------------------------------------------------------ finish: logo header + "the board is below" (portrait kiosk) */
.kui-finish-head { display: flex; align-items: center; gap: calc(var(--u) * 20); }
.kui-finish-logo { display: block; width: calc(var(--u) * 200); height: auto; }
.kui-finish-head .kui-kicker { padding-left: calc(var(--u) * 20); border-left: 2px solid var(--line); line-height: 1.2; }
.kui-finish-below { display: none; }
.kui--board-ext .kui-finish-below {
  position: absolute; left: 50%; bottom: calc(var(--u) * 230); translate: -50% 0;
  display: flex; align-items: center; gap: calc(var(--u) * 18); white-space: nowrap;
  padding: calc(var(--u) * 12) calc(var(--u) * 30); border-radius: calc(var(--u) * 999);
  background: var(--panel-strong); border: 1px solid var(--line);
  font-size: calc(var(--u) * 28); font-weight: 700; letter-spacing: calc(var(--u) * 3); color: var(--muted);
}
.kui--board-ext .kui-finish-below.kui-on { color: var(--accent); border-color: var(--accent); }
.kui-below-arrow { color: var(--accent); animation: kui-below 1.2s ease-in-out infinite; }
@keyframes kui-below { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(calc(var(--u) * 6)); } }

/* the portrait kiosk's own leaderboard section is on screen: no leaderboard panels inside the game area */
.kui--board-ext .kui-attract-board,
.kui--board-ext .kui-finish-right { display: none; }

/* ------------------------------------------------------------------ low-effects mode (weak GPUs: CONFIG.quality.uiBlur false)
   backdrop-filter blurs the WebGL canvas behind every panel each frame; off here, with more opaque panels instead */
html.kiosk-lowfx .kui { --panel: rgba(12, 16, 20, 0.9); --panel-strong: rgba(10, 13, 17, 0.94); }
html.kiosk-lowfx .kui *, html.kiosk-lowfx .kui { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html.kiosk-lowfx .kui-player { background: rgba(6, 8, 10, .9); }

@media (prefers-reduced-motion: reduce) {
  .kui-cta, .kui-cta::after, .kui-cta-dot, .kui-row--me, .kui-badge--gold, .kui-caret { animation: none !important; }
  .kui-cta::after { opacity: 0; }
}

/* ==================================================================================================================
   NEAR-SQUARE GAME AREA (width / height <= 1.45): the portrait kiosk's 1080x960 game area, between the top media and
   the leaderboard section. A 1080x960 design: --u = min(W / 1080, H / 960), so 1u = 1px on the 1080x1920 kiosk (the
   same physical sizes as the landscape design at 1080p). Free stage for the 3D car: attract y 300-720, race below the
   HUD's top rows (y > 190, centre), finish the right half (x > 600, y 150-720).
   ================================================================================================================== */
@container kui (max-aspect-ratio: 29 / 20) {
  .kui {
    --u: min(calc(100cqw / 1080), calc(100cqh / 960));
    --tgt: max(56px, calc(var(--u) * 84));
    --key: max(48px, calc(var(--u) * 86));
    --gap: max(5px, calc(var(--u) * 10));
  }

  /* ---------- brand corner */
  .kui-brand { top: calc(var(--u) * 18); left: calc(var(--u) * 18); min-width: 0; min-height: max(56px, calc(var(--u) * 80)); padding: calc(var(--u) * 12) calc(var(--u) * 18); }
  .kui-logo { width: calc(var(--u) * 168); }
  .kui-model { font-size: calc(var(--u) * 17); letter-spacing: calc(var(--u) * 7); margin-top: calc(var(--u) * 7); }
  .kui[data-screen="attract"] .kui-brand { padding: calc(var(--u) * 18) calc(var(--u) * 24) calc(var(--u) * 18); }
  .kui[data-screen="attract"] .kui-logo { width: calc(var(--u) * 210); }
  .kui-brand-topfire { width: calc(var(--u) * 380); }
  .kui-brand-challenge { font-size: calc(var(--u) * 41); letter-spacing: calc(var(--u) * 17.5); }

  /* ---------- attract: logo top-left, copy top-right, the car in the middle, call to action + controls at the bottom */
  .kui-attract-shade {
    background:
      linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.12) 28%, rgba(0,0,0,0) 38%, rgba(0,0,0,0) 66%, rgba(0,0,0,.62) 100%);
  }
  /* the call to action over HOW TO PLAY at the bottom centre (the board is the section below the game) */
  .kui-attract-hero { bottom: calc(var(--u) * 48); flex-direction: column; gap: calc(var(--u) * 18); }
  .kui-cta { padding: calc(var(--u) * 16) calc(var(--u) * 34); gap: calc(var(--u) * 18); font-size: calc(var(--u) * 36); letter-spacing: calc(var(--u) * 4); }
  .kui-cta-dot { width: calc(var(--u) * 22); height: calc(var(--u) * 22); }
  .kui-howto-card { max-width: calc(var(--u) * 1000); }
  /* readable from 2 m on a 43-55" portrait panel: legend text 23u, headings 22u, key caps ~22 px (PUX3-8; were 16-18 px) */
  .kui-legend-item { min-width: 0; padding: calc(var(--u) * 7) calc(var(--u) * 14); font-size: calc(var(--u) * 23); line-height: 1.25; }
  .kui-legend-item > div + div { margin-top: calc(var(--u) * 3); }
  .kui-legend-h { font-size: calc(var(--u) * 22); letter-spacing: calc(var(--u) * 3); gap: calc(var(--u) * 8); }
  .kui-howto .kui-kc, .kui-hintbar .kui-kc { font-size: 0.95em; }
  .kui-notice { top: calc(var(--u) * 300); max-width: 90cqw; font-size: calc(var(--u) * 18); }
  /* no leaderboard section on screen (landscape layout in a square window): a compact top 5 at the right */
  .kui-attract-board { top: calc(var(--u) * 300); right: calc(var(--u) * 18); width: calc(var(--u) * 470); padding: calc(var(--u) * 14) calc(var(--u) * 16) calc(var(--u) * 12); }
  .kui-attract-board .kui-row:nth-child(n+6) { display: none; }
  .kui-board-tabs { font-size: calc(var(--u) * 24); }
  .kui-board-best { font-size: calc(var(--u) * 22); }
  .kui-row { height: calc(var(--u) * 44); font-size: calc(var(--u) * 28); grid-template-columns: calc(var(--u) * 44) calc(var(--u) * 22) 1fr auto; gap: calc(var(--u) * 10); }
  .kui-row-d { width: calc(var(--u) * 18); height: calc(var(--u) * 18); }

  /* ---------- player: name + on-screen keyboard (full width), colours under it */
  .kui-player-head { top: calc(var(--u) * 28); }
  .kui-player .kui-kicker { font-size: calc(var(--u) * 21); letter-spacing: calc(var(--u) * 6); }
  .kui-title { font-size: calc(var(--u) * 54); letter-spacing: calc(var(--u) * 4); }
  .kui-cancel { top: calc(var(--u) * 22); right: calc(var(--u) * 22); padding: 0 calc(var(--u) * 24); font-size: calc(var(--u) * 26); min-height: max(56px, calc(var(--u) * 76)); }
  .kui-player-body { top: calc(var(--u) * 134); left: calc(var(--u) * 24); right: calc(var(--u) * 24); transform: none; flex-direction: column; align-items: stretch; gap: calc(var(--u) * 14); }
  .kui-player-left { align-items: center; }
  .kui-namefield { width: 100%; height: max(56px, calc(var(--u) * 100)); padding: 0 calc(var(--u) * 28); font-size: calc(var(--u) * 66); letter-spacing: calc(var(--u) * 8); border-radius: calc(var(--u) * 16); }
  .kui-name-ph { left: calc(var(--u) * 40); }
  .kui-name-count { right: calc(var(--u) * 22); font-size: calc(var(--u) * 24); }
  .kui-name-msg { height: calc(var(--u) * 44); padding-top: calc(var(--u) * 8); font-size: calc(var(--u) * 23); }
  .kui-osk { margin-top: 0; }
  .kui-key { border-radius: calc(var(--u) * 12); font-size: calc(var(--u) * 38); }
  .kui-key--fn { font-size: calc(var(--u) * 24); }
  .kui-key[data-k="back"] { font-size: calc(var(--u) * 40); }
  .kui-key--ok { font-size: calc(var(--u) * 30); }
  .kui-player-right {
    width: auto;
    display: grid; grid-template-columns: calc(var(--u) * 250) 1fr; grid-template-areas: "lbl lbl" "car sw" "name sw";
    column-gap: calc(var(--u) * 20); align-items: center;
    padding: calc(var(--u) * 12) calc(var(--u) * 20) calc(var(--u) * 14);
  }
  .kui-player-right > .kui-lbl { grid-area: lbl; font-size: calc(var(--u) * 19); margin-bottom: calc(var(--u) * 6); }
  .kui-car { grid-area: car; margin: 0; }
  .kui-paint-name { grid-area: name; margin: 0; font-size: calc(var(--u) * 22); letter-spacing: calc(var(--u) * 2); align-self: start; }
  .kui-swatches { grid-area: sw; grid-template-columns: repeat(3, 1fr); }
  .kui-swatch:last-child:nth-child(odd) { grid-column: auto; justify-self: stretch; width: auto; }
  .kui-swatch { height: max(52px, calc(var(--u) * 70)); gap: calc(var(--u) * 10); padding: 0 calc(var(--u) * 10); }
  .kui-swatch-chip { width: max(30px, calc(var(--u) * 42)); height: max(30px, calc(var(--u) * 42)); }
  .kui-swatch-name { font-size: calc(var(--u) * 19); }
  .kui-hintbar { bottom: calc(var(--u) * 10); gap: calc(var(--u) * 6) calc(var(--u) * 18); font-size: calc(var(--u) * 24); line-height: 1.2; flex-wrap: wrap; padding: 0 calc(var(--u) * 20); }
  .kui-sep { height: calc(var(--u) * 24); }
  /* the idle warning takes the hint bar's place (it used to cut through the colour panel, PUX-2) */
  .kui-idle { bottom: calc(var(--u) * 14); font-size: calc(var(--u) * 26); padding: calc(var(--u) * 12) calc(var(--u) * 28); }
  .kui-player:has(.kui-idle.kui-show) .kui-hintbar { visibility: hidden; }

  /* ---------- player: phone step (number + pad left, prize draw + consent right) */
  .kui-phone-body { top: calc(var(--u) * 134); left: calc(var(--u) * 24); right: calc(var(--u) * 24); transform: none; gap: calc(var(--u) * 22); }
  .kui-phone-left { width: calc(var(--u) * 480); flex: 0 0 auto; }
  .kui-phonefield { font-size: calc(var(--u) * 58); letter-spacing: calc(var(--u) * 5); gap: calc(var(--u) * 14); padding: 0 calc(var(--u) * 22); }
  .kui-numpad .kui-key { height: max(56px, calc(var(--u) * 104)); font-size: calc(var(--u) * 46); }   /* the pad gets the room under it */
  .kui-numpad .kui-key--fn { font-size: calc(var(--u) * 40); }
  .kui-phone-right { flex: 1 1 auto; width: auto; min-width: 0; gap: calc(var(--u) * 14); padding: calc(var(--u) * 18) calc(var(--u) * 22) calc(var(--u) * 20); }
  .kui-phone-lbl { font-size: calc(var(--u) * 19); }
  .kui-phone-why { font-size: calc(var(--u) * 22); }
  .kui-consent { gap: calc(var(--u) * 14); padding: calc(var(--u) * 14) calc(var(--u) * 16); }
  .kui-check { width: max(34px, calc(var(--u) * 44)); height: max(34px, calc(var(--u) * 44)); }
  .kui-consent-text { font-size: calc(var(--u) * 21); }
  .kui-phone-actions { gap: calc(var(--u) * 10); }
  .kui-phone-actions .kui-btn { padding: 0 calc(var(--u) * 16); font-size: calc(var(--u) * 26); letter-spacing: calc(var(--u) * 2); }

  /* ---------- countdown: under the HUD's top rows; the help box at the bottom */
  .kui-count { --kui-ready-top: calc(var(--u) * 196); }
  .kui-count-ready { font-size: calc(var(--u) * 34); letter-spacing: calc(var(--u) * 14); padding: calc(var(--u) * 8) calc(var(--u) * 26) calc(var(--u) * 8) calc(var(--u) * 40); }
  .kui-count-num { top: calc(var(--kui-ready-top) + var(--u) * 58); width: calc(var(--u) * 500); margin-left: calc(var(--u) * -250); font-size: calc(var(--u) * 290); }   /* between the HUD's side panels */
  .kui-count-help { bottom: calc(var(--u) * 26); min-width: 0; width: calc(var(--u) * 1000); max-width: calc(100% - var(--u) * 36); padding: calc(var(--u) * 14) calc(var(--u) * 24) calc(var(--u) * 16); }
  .kui-count-dev { font-size: calc(var(--u) * 19); letter-spacing: calc(var(--u) * 5); }
  .kui-count-line { margin-top: calc(var(--u) * 7); font-size: calc(var(--u) * 29); }
  .kui-count-tip { margin-top: calc(var(--u) * 10); font-size: calc(var(--u) * 20); }

  /* ---------- race HUD: timer centre top, speed right, the route bar across, phase / crashes left, splits right */
  .kui-hud { --kui-phase-top: calc(var(--u) * 198); }
  .kui-hud-center { display: contents; }               /* the timer and the route bar are placed on their own */
  .kui-hud-timer { position: absolute; top: calc(var(--u) * 14); left: 50%; translate: -50% 0; padding: calc(var(--u) * 4) calc(var(--u) * 26) calc(var(--u) * 8); }
  .kui-hud-time { font-size: calc(var(--u) * 76); }
  .kui-hud-best { font-size: calc(var(--u) * 19); letter-spacing: calc(var(--u) * 2); }
  .kui-hud-route { position: absolute; top: calc(var(--u) * 136); left: calc(var(--u) * 18); right: calc(var(--u) * 18); width: auto; padding: calc(var(--u) * 8) calc(var(--u) * 12); }
  .kui-hud-bar { height: calc(var(--u) * 28); }
  .kui-seg { font-size: max(11px, calc(var(--u) * 17)); }
  .kui-hud-marker { top: calc(var(--u) * -5); height: calc(var(--u) * 38); }
  .kui-hud-speed { top: calc(var(--u) * 14); right: calc(var(--u) * 18); min-width: calc(var(--u) * 190); padding: calc(var(--u) * 6) calc(var(--u) * 18) calc(var(--u) * 8); }
  .kui-hud-kmh { font-size: calc(var(--u) * 68); }
  .kui-hud-speed .kui-lbl { font-size: calc(var(--u) * 19); }
  .kui-hud-phase { left: calc(var(--u) * 18); min-width: calc(var(--u) * 232); padding: calc(var(--u) * 9) calc(var(--u) * 16); }
  .kui-hud .kui-lbl { font-size: max(12px, calc(var(--u) * 19)); letter-spacing: calc(var(--u) * 3); }
  .kui-hud-phasename { font-size: calc(var(--u) * 28); }
  .kui-hud-crash { top: calc(var(--kui-phase-top) + var(--u) * 90); left: calc(var(--u) * 18); min-width: calc(var(--u) * 140); padding: calc(var(--u) * 8) calc(var(--u) * 16); }
  .kui-hud-crashn { font-size: calc(var(--u) * 42); }
  .kui-hud-splits { top: var(--kui-phase-top); right: calc(var(--u) * 18); min-width: calc(var(--u) * 262); padding: calc(var(--u) * 9) calc(var(--u) * 16) calc(var(--u) * 11); }
  .kui-shout { top: calc(var(--u) * 198); right: calc(var(--u) * 18); font-size: calc(var(--u) * 30); padding: calc(var(--u) * 6) calc(var(--u) * 18); }
  .kui-split { font-size: calc(var(--u) * 21); gap: calc(var(--u) * 10); margin-top: calc(var(--u) * 5); grid-template-columns: calc(var(--u) * 8) 1fr auto; }
  .kui-split i { width: calc(var(--u) * 8); height: calc(var(--u) * 21); }
  .kui-banner { top: calc(var(--u) * 198); max-width: calc(var(--u) * 466);   /* a gap of 12u+ to the phase box (RED ROCK CANYON) and the splits, PUX-3 */  padding: calc(var(--u) * 8) calc(var(--u) * 26) calc(var(--u) * 10); }
  .kui-banner-k { font-size: calc(var(--u) * 17); letter-spacing: calc(var(--u) * 7); }
  .kui-banner-t { font-size: calc(var(--u) * 44); letter-spacing: calc(var(--u) * 4); border-bottom-width: calc(var(--u) * 4); }
  .kui-banner-s { font-size: calc(var(--u) * 21); letter-spacing: calc(var(--u) * 1); width: auto; max-width: calc(var(--u) * 414); }
  .kui-flash { font-size: calc(var(--u) * 96); letter-spacing: calc(var(--u) * 9); padding-bottom: 14cqh; }
  .kui-flash--info { font-size: calc(var(--u) * 54); }
  .kui-flash--good { font-size: calc(var(--u) * 62); }
  .kui-tip { top: calc(var(--u) * 392); font-size: calc(var(--u) * 30); padding: calc(var(--u) * 10) calc(var(--u) * 26); }
  .kui-toast { top: calc(var(--u) * 372); right: calc(var(--u) * 18); font-size: calc(var(--u) * 21); }

  /* ---------- finish: result panel left, the car on the right, buttons at the bottom; the top 5 is the section below */
  .kui-finish { background: linear-gradient(90deg, rgba(4,6,8,.5) 0%, rgba(4,6,8,.18) 62%, rgba(4,6,8,.3) 100%); }
  .kui-finish-left { left: calc(var(--u) * 18); top: calc(var(--u) * 18); width: calc(var(--u) * 560); padding: calc(var(--u) * 16) calc(var(--u) * 22) calc(var(--u) * 18); border-radius: calc(var(--u) * 16); }
  .kui-finish-logo { width: calc(var(--u) * 168); }
  .kui-finish-head .kui-kicker { font-size: calc(var(--u) * 22); letter-spacing: calc(var(--u) * 6); padding-left: calc(var(--u) * 16); }
  .kui-finish-name { margin-top: calc(var(--u) * 10); font-size: calc(var(--u) * 42); letter-spacing: calc(var(--u) * 4); gap: calc(var(--u) * 14); }
  .kui-dot { width: calc(var(--u) * 28); height: calc(var(--u) * 28); }
  .kui-finish-time { font-size: calc(var(--u) * 122); }
  .kui-finish-gap { font-size: calc(var(--u) * 24); }
  .kui-finish-rank { gap: calc(var(--u) * 14); margin-top: calc(var(--u) * 4); }
  .kui-rank-big { font-size: calc(var(--u) * 72); }
  .kui-rank-of { font-size: calc(var(--u) * 30); }
  .kui-rank-of--long { font-size: calc(var(--u) * 20); }
  .kui-badge { font-size: calc(var(--u) * 21); padding: calc(var(--u) * 6) calc(var(--u) * 14); }
  .kui-finish-stats { margin-top: calc(var(--u) * 12); padding: calc(var(--u) * 8) calc(var(--u) * 18) calc(var(--u) * 10); }
  .kui-fsplit { grid-template-columns: calc(var(--u) * 10) 1fr auto calc(var(--u) * 128); gap: calc(var(--u) * 12); height: calc(var(--u) * 36); font-size: calc(var(--u) * 24); }
  .kui-fsplit i { width: calc(var(--u) * 10); height: calc(var(--u) * 26); }
  .kui-fsplit em { font-size: calc(var(--u) * 20); }
  .kui-fsplit--head { height: calc(var(--u) * 26); font-size: calc(var(--u) * 18); }
  .kui-fsplit--head b, .kui-fsplit--head em { font-size: calc(var(--u) * 18); }
  .kui-fcrash { margin-top: calc(var(--u) * 6); padding-top: calc(var(--u) * 8); font-size: calc(var(--u) * 24); }
  .kui-fcrash b { font-size: calc(var(--u) * 34); }
  .kui-finish-right { right: calc(var(--u) * 18); top: calc(var(--u) * 18); width: calc(var(--u) * 470); padding: calc(var(--u) * 16) calc(var(--u) * 18); }
  .kui-finish-right .kui-lbl { font-size: calc(var(--u) * 20); margin-bottom: calc(var(--u) * 8); }
  .kui-finish-right .kui-row:nth-child(n+6):not(.kui-row--me):not(.kui-row--gap) { display: none; }
  .kui--board-ext .kui-finish-below { bottom: calc(var(--u) * 168); font-size: calc(var(--u) * 24); padding: calc(var(--u) * 10) calc(var(--u) * 24); gap: calc(var(--u) * 14); }
  .kui-finish-actions { left: calc(var(--u) * 18); right: calc(var(--u) * 18); bottom: calc(var(--u) * 56); gap: calc(var(--u) * 14); }
  .kui-again { min-height: max(64px, calc(var(--u) * 96)); padding: 0 calc(var(--u) * 40); font-size: calc(var(--u) * 40); }
  .kui-exit { min-height: max(64px, calc(var(--u) * 96)); padding: 0 calc(var(--u) * 30); font-size: calc(var(--u) * 30); min-width: 0; }
  .kui-finish-timer { width: calc(var(--u) * 270); padding: calc(var(--u) * 10) calc(var(--u) * 16); font-size: calc(var(--u) * 21); }
  .kui-finish-timer-bar { height: calc(var(--u) * 7); margin-bottom: calc(var(--u) * 8); }
  .kui-finish-hint { margin-top: calc(var(--u) * 8); font-size: calc(var(--u) * 21); gap: calc(var(--u) * 12); }

  /* ---------- admin */
  .kui-admin-card { width: max(320px, calc(var(--u) * 600)); padding: calc(var(--u) * 24) calc(var(--u) * 28); gap: calc(var(--u) * 13); }
  .kui-admin-card--wide { width: calc(100% - var(--u) * 28); max-width: calc(var(--u) * 1050); }
  .kui-admin-title { font-size: calc(var(--u) * 44); }
  .kui-admin-col { padding: calc(var(--u) * 16) calc(var(--u) * 16); gap: calc(var(--u) * 11); }
  .kui-admin-col .kui-admin-title { font-size: calc(var(--u) * 30); }
  .kui-admin-info { font-size: calc(var(--u) * 24); }
  .kui-admin-sub { font-size: calc(var(--u) * 19); }
  .kui-admin-card--wide .kui-btn { min-height: max(56px, calc(var(--u) * 72)); font-size: calc(var(--u) * 24); letter-spacing: calc(var(--u) * 2); }
  .kui-pinpad .kui-key { height: max(56px, calc(var(--u) * 84)); }
  .kui-pin-dots i { width: calc(var(--u) * 26); height: calc(var(--u) * 26); }
  .kui-admin-row { font-size: calc(var(--u) * 26); }
  .kui-admin-diag { font-size: calc(var(--u) * 16); }
}

/* ==================================================================================================================
   BOTTOM LEADERBOARD SECTION of the portrait kiosk (#board, 1080x480; KioskUI.renderBoard). Outside the game area, so it
   has its own unit: --b = min(W / 1080, H / 480) of #board (a size container, css/layout.css). Big rank and time digits:
   readable from 2 m. The run that just finished is highlighted (amber, pulsing) until the next player.
   ================================================================================================================== */
.kui-xboard {
  --b: min(calc(100cqw / 1080), calc(100cqh / 480));
  --xb-accent: #f2a43a;
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  padding: calc(var(--b) * 24) calc(var(--b) * 42) calc(var(--b) * 22);
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(242,164,58,.10) 0%, rgba(242,164,58,0) 70%),
    linear-gradient(180deg, #11161b 0%, #07090b 100%);
  border-top: calc(var(--b) * 3) solid rgba(242,164,58,.75);
  color: #f3f1ea;
  font-family: 'Rajdhani', system-ui, -apple-system, 'Segoe UI', sans-serif;
  line-height: 1.1;
  user-select: none; -webkit-user-select: none;
}
.kxb-head {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: calc(var(--b) * 24);
  padding-bottom: calc(var(--b) * 14);
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.kxb-logo { display: block; height: calc(var(--b) * 46); width: auto; }
.kxb-title { font-size: calc(var(--b) * 40); font-weight: 700; letter-spacing: calc(var(--b) * 6); color: #d8d4c8; white-space: nowrap; }
.kxb-title b { color: var(--xb-accent); }
.kxb-list {
  list-style: none; margin: 0; padding: calc(var(--b) * 12) 0 0;
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column; gap: calc(var(--b) * 6);
}
.kxb-row {
  flex: 1 1 0; min-height: 0; max-height: calc(var(--b) * 74);
  display: grid; grid-template-columns: calc(var(--b) * 78) calc(var(--b) * 44) 1fr auto; align-items: center; gap: calc(var(--b) * 18);
  padding: 0 calc(var(--b) * 20);
  border-radius: calc(var(--b) * 12);
  font-size: calc(var(--b) * 46); font-weight: 700;
}
.kxb-row:nth-child(odd) { background: rgba(255,255,255,.045); }
.kxb-r { font-size: calc(var(--b) * 50); color: #c9c5b9; font-variant-numeric: tabular-nums; text-align: center; }
.kxb-row--1 .kxb-r { color: var(--xb-accent); }
.kxb-d { width: calc(var(--b) * 34); height: calc(var(--b) * 34); border-radius: 50%; border: calc(var(--b) * 3) solid rgba(255,255,255,.85); box-shadow: 0 0 0 1px rgba(0,0,0,.6); }
.kxb-n { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; letter-spacing: calc(var(--b) * 1); }
.kxb-t { font-size: calc(var(--b) * 52); font-variant-numeric: tabular-nums; letter-spacing: calc(var(--b) * 1); }
.kxb-row--free { color: rgba(255,255,255,.26); }
.kxb-row--free .kxb-r { color: rgba(255,255,255,.26); }
.kxb-row--free .kxb-d { border-color: rgba(255,255,255,.18); box-shadow: none; }
.kxb-row--me { position: relative; background: var(--xb-accent) !important; color: #1b1306; }
/* the glow pulses on its own layer (opacity only, no repaint of the board every frame while it shows in attract) */
.kxb-row--me::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 calc(var(--b) * 22) calc(var(--b) * 4) rgba(242,164,58,.4);
  opacity: 0; will-change: opacity; animation: kxb-me 1.4s ease-in-out infinite;
}
.kxb-row--me .kxb-r { color: #1b1306; }
.kxb-row--me .kxb-d { border-color: #1b1306; }
@keyframes kxb-me { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
.kxb-gap { flex: 0 0 calc(var(--b) * 14); display: flex; align-items: center; justify-content: center; gap: calc(var(--b) * 10); }
.kxb-gap i { width: calc(var(--b) * 7); height: calc(var(--b) * 7); border-radius: 50%; background: rgba(255,255,255,.35); }
.kxb-empty { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--b) * 14); text-align: center; }
.kxb-empty b { font-size: calc(var(--b) * 58); letter-spacing: calc(var(--b) * 8); color: #f3f1ea; }
.kxb-empty span { font-size: calc(var(--b) * 32); font-weight: 600; color: var(--xb-accent); letter-spacing: calc(var(--b) * 2); }
@media (prefers-reduced-motion: reduce) { .kxb-row--me::after, .kui-below-arrow { animation: none !important; } }

/* ------------------------------------------------------------------ the kiosk's stage 3 extras (15 Oct 2026)
   shoutouts (CLOSE CALL!, CLEAN RUN) and the pickup bonus: a tilted callout under the race clock; the clock pulses green
   when a pickup takes time off; the record's pace on the TO BEAT line; the bonus row and the NEW RECORD confetti on the
   result screen */
/* on the right under the speed (where the SPLITS panel was): never over the road ahead */
.kui-shout { position: absolute; right: calc(var(--u) * 24); top: calc(var(--u) * 196); rotate: -3deg; transform-origin: right center; z-index: 22; pointer-events: none;
  padding: calc(var(--u) * 8) calc(var(--u) * 24); border-radius: calc(var(--u) * 12); background: rgba(10, 13, 17, .78);
  border: calc(var(--u) * 3) solid var(--accent); color: #fff; font-size: calc(var(--u) * 38); font-weight: 700;
  letter-spacing: calc(var(--u) * 5); white-space: nowrap; opacity: 0; visibility: hidden; transition: opacity .25s, visibility 0s .25s; }
.kui-shout--bonus { border-color: var(--good); color: var(--good); }
.kui-shout.kui-show { opacity: 1; visibility: visible; transition: none; animation: kui-shout-in .4s cubic-bezier(.2, .9, .3, 1.4); }
@keyframes kui-shout-in { from { scale: .4; opacity: 0; } to { scale: 1; opacity: 1; } }
.kui-hud-timer.kui-bonus { animation: kui-bonus .7s ease-out; }
@keyframes kui-bonus { 0% { box-shadow: 0 0 0 0 rgba(102, 219, 147, .9); color: var(--good); } 100% { box-shadow: 0 0 0 calc(var(--u) * 26) rgba(102, 219, 147, 0); } }
.kui-pace { margin-left: .4em; font-weight: 700; letter-spacing: .05em; }
.kui-pace--ahead { color: var(--good); }
.kui-pace--behind { color: #ff8a80; }
.kui-fbonus { display: flex; justify-content: space-between; align-items: center; margin-top: calc(var(--u) * 8); font-size: calc(var(--u) * 26);
  font-weight: 700; letter-spacing: calc(var(--u) * 3); color: var(--muted); }
.kui-fbonus b { font-size: calc(var(--u) * 36); color: var(--good); }
.kui-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 3; }
.kui-confetti i { position: absolute; top: -4%; left: var(--x); width: calc(var(--u) * 14); height: calc(var(--u) * 26); border-radius: 2px; opacity: 0;
  animation: kui-confetti var(--t) linear var(--d) 3 both; }
@keyframes kui-confetti { 0% { translate: 0 0; rotate: var(--r); opacity: 1; } 100% { translate: calc(var(--u) * 60) 110cqh; rotate: calc(var(--r) + 720deg); opacity: .9; } }
.kui-badge--record { font-size: 1.25em; }
@media (prefers-reduced-motion: reduce) {
  .kui-shout.kui-show, .kui-hud-timer.kui-bonus { animation: none !important; }
  .kui-confetti { display: none; }
}

/* ------------------------------------------------------------------ the kiosk's staff lock (15 Oct 2026)
   a small padlock in the bottom-left corner of the start screen only (kiosk-ui.js applyLock); deactivated (.kui--locked):
   the attract runs on without the call to action, HOW TO PLAY or INSTALL APP, and no start tap / key starts a race */
.kui-lockbtn { display: none; position: absolute; left: calc(var(--u) * 18); bottom: calc(var(--u) * 18); z-index: 30;
  width: max(56px, calc(var(--u) * 64)); height: max(56px, calc(var(--u) * 64)); border-radius: 50%; flex-direction: column;
  align-items: center; justify-content: center; gap: 1px; background: rgba(10, 13, 17, .55); border: 2px solid rgba(255, 255, 255, .25);
  color: rgba(255, 255, 255, .55); font-size: max(10px, calc(var(--u) * 12)); font-weight: 700; letter-spacing: .1em; }
.kui-lockbtn svg { width: 44%; height: 44%; }
.kui[data-screen="attract"] .kui-lockbtn { display: flex; }
.kui-lockbtn--on { color: var(--accent); border-color: var(--accent); background: rgba(10, 13, 17, .75); }
.kui--locked .kui-cta, .kui--locked .kui-howto-btn, .kui--locked .kui-howto { display: none !important; }
html.kiosk-play .kui, html.kiosk-play .kui * { touch-action: none !important; }

/* ------------------------------------------------------------------ the phone step's country list (18 Oct 2026)
   the code chip in the field is a button (▾); its list takes the number pad's place while open, the chosen country
   highlighted */
.kui-cc-btn { cursor: pointer; pointer-events: auto; white-space: nowrap; border: 2px solid rgba(242,164,58,.55); }
.kui-cc-btn.kui-open, .kui-cc-btn.kui-focus { background: var(--accent); color: var(--accent-ink); }
.kui-cc-list { display: flex; flex-direction: column; gap: calc(var(--u) * 6); margin-top: calc(var(--u) * 6); padding: calc(var(--u) * 8); }
.kui-cc-list.kui-hidden { display: none; }
.kui-cc-opt { display: grid; grid-template-columns: calc(var(--u) * 120) 1fr; align-items: center; gap: calc(var(--u) * 14);
  min-height: max(44px, calc(var(--u) * 64)); padding: 0 calc(var(--u) * 18); border-radius: calc(var(--u) * 10);
  background: rgba(255,255,255,.06); font-size: calc(var(--u) * 30); font-weight: 600; letter-spacing: calc(var(--u) * 1); }
.kui-cc-opt b { color: var(--accent); font-weight: 700; }
.kui-cc-opt i { font-style: normal; }
.kui-cc-short { display: none; }
.kui-cc-opt.kui-sel { background: rgba(242,164,58,.22); outline: 2px solid var(--accent); }
.kui-cc-opt.kui-down, .kui-cc-opt.kui-focus { background: rgba(255,255,255,.18); }