/* =========================================================
   Kylaq Sportline Game (style.css)
   Premium, sporty, night-city teaser styling.
   Layout: full-screen canvas with absolutely positioned UI.
   ========================================================= */

@font-face {
  font-family: "SKODA Next";
  src: url("assets/fonts/SKODANext-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "SKODA Next";
  src: url("assets/fonts/SKODANext-Regular.ttf") format("truetype");
  font-weight: 400 699;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "SKODA Next";
  src: url("assets/fonts/SKODANext-Bold.ttf") format("truetype");
  font-weight: 700 899;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "SKODA Next";
  src: url("assets/fonts/SKODANext-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: block;
}

:root {
  /* Škoda brand palette, Emerald Green + Electric Green (skoda-auto / brandcolorcode) */
  --emerald: #0e3a2f;
  --emerald-glass: rgba(15, 46, 42, 0.68);
  --navy-glass: rgba(5, 18, 31, 0.60);
  --emerald-deep: #07140e;
  --electric: #78faae;
  --bg: #07140e;
  --bg2: #0e3a2f;
  --ink: #eaf5ee;
  --muted: #7fa291;
  --red: #ff2d4b;
  --red2: #ff5d54;
  --silver: #cfdbd2;
  --accent: #78faae;
  --gold: #ffd34e;
  --good: #78faae;
  --radius: 14px;
  --shadow: 0 18px 48px rgba(0, 0, 0, 0.46);
  --font: "SKODA Next", sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  font-family: var(--font);
  -webkit-tap-highlight-color: transparent;
  /* Stop swipes/holds on a touch screen from accidentally selecting text or
     popping the iOS text-callout while steering. Inputs opt back in below. */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Real text fields must stay selectable/editable so players can type a name. */
input,
textarea {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

button,
input,
textarea,
select,
kbd {
  font: inherit;
  font-family: var(--font);
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  overscroll-behavior: none;
  touch-action: none;
}

#app {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(900px 540px at 62% 0%, rgba(255, 195, 104, 0.16) 0%, transparent 58%),
    radial-gradient(1200px 700px at 50% -10%, #14503c 0%, transparent 60%),
    linear-gradient(180deg, #0f2e2a, var(--bg));
}

#game {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
}

/* Hero-car overlay: sits just above the gameplay canvas, below the HUD. It is
   rendered at full device resolution with smoothing on (NOT pixelated) so the
   car badge reads clearly while the scene keeps its optimized retro buffer. */
#carLayer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  pointer-events: none;
}

.hidden { display: none !important; }

.desktop-block {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 28px;
  text-align: center;
  background:
    radial-gradient(520px 360px at 50% 38%, rgba(120, 250, 174, 0.14), transparent 64%),
    linear-gradient(180deg, #0f2e2a, #07140e);
}

.desktop-block h2 {
  margin: 0;
  color: #fff0c7;
  font-size: clamp(28px, 6vw, 54px);
  line-height: 1;
  text-transform: uppercase;
  text-shadow: 3px 3px 0 #090719;
}

.desktop-block p {
  margin: 0;
  max-width: 420px;
  color: #c7ded0;
  font-size: 17px;
  line-height: 1.45;
}

.desktop-game-summary {
  width: min(100%, 680px);
  padding-top: 16px;
  border-top: 1px solid rgba(120, 250, 174, 0.22);
}

.desktop-game-summary h3 {
  margin: 0 0 8px;
  color: #78faae;
  font-size: 15px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.desktop-game-summary p {
  max-width: 680px;
  font-size: 14px;
}

.desktop-game-summary p + p { margin-top: 7px; }
.desktop-game-summary b { color: #fff0c7; }

.desktop-phone-icon {
  width: 74px;
  height: 116px;
  border: 5px solid #78faae;
  border-radius: 18px;
  box-shadow: 0 0 24px rgba(120, 250, 174, 0.32), inset 0 0 0 4px rgba(255,255,255,0.08);
  position: relative;
}

.desktop-phone-icon::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 9px;
  width: 22px;
  height: 4px;
  transform: translateX(-50%);
  border-radius: 4px;
  background: #78faae;
}

.desktop-phone-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 9px;
  width: 11px;
  height: 11px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #fff0c7;
}

body.desktop-blocked #game,
body.desktop-blocked #carLayer,
body.desktop-blocked .screen,
body.desktop-blocked .hud,
body.desktop-blocked .touch,
body.desktop-blocked .tutorial,
body.desktop-blocked .floaters,
body.desktop-blocked .phase-banner,
body.desktop-blocked .level-title,
body.desktop-blocked .rotate-hint {
  display: none !important;
}

/* =====================  SCREENS / OVERLAYS  ===================== */
.screen {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 22px;
  z-index: 40;
  animation: fade .35s ease;
}
.screen.active { display: flex; }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ===== Premium race-end transition (gameplay -> results) =====
   Cohesive with the in-game level titles: a deep cinematic veil eases in with
   a soft focus pull, an eyebrow + headline rise with a blur-clear, and a thin
   gold hairline draws beneath. The veil then dissolves as the results card
   rises in. Smooth, unhurried, no hard cuts. */
.race-end {
  position: fixed;
  inset: 0;
  z-index: 60;                 /* above the screens so it veils the swap */
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(140% 120% at 50% 42%, rgba(10, 13, 26, 0.55), rgba(3, 4, 10, 0.96) 78%),
    linear-gradient(180deg, rgba(3, 4, 10, 0.4), rgba(2, 3, 8, 0.86));
}
.race-end.hidden { display: none; }
/* premium easing, slow start, settled finish */
.race-end.in  { animation: raceVeilIn  0.72s cubic-bezier(0.33, 0, 0.18, 1) forwards; }
.race-end.out { animation: raceVeilOut 0.66s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
@keyframes raceVeilIn  {
  0%   { opacity: 0; backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); }
  100% { opacity: 1; backdrop-filter: blur(7px) saturate(1.1); -webkit-backdrop-filter: blur(7px) saturate(1.1); }
}
@keyframes raceVeilOut {
  0%   { opacity: 1; backdrop-filter: blur(7px) saturate(1.1); -webkit-backdrop-filter: blur(7px) saturate(1.1); }
  100% { opacity: 0; backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); }
}

.race-end-inner { text-align: center; padding: 0 24px; }

.race-end-eyebrow {
  font-family: var(--font);
  font-size: clamp(9px, 2.5vw, 12px);
  font-weight: 800;
  letter-spacing: 0.52em;
  text-indent: 0.52em;
  text-transform: uppercase;
  color: rgba(120, 250, 174, 0.82);
  text-shadow: 0 0 14px rgba(57, 230, 90, 0.3);
  margin-bottom: 14px;
  opacity: 0;
  transform: translateY(8px);
  filter: blur(5px);
}
.race-end-label {
  font-family: var(--font);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  text-indent: 0.18em;
  font-size: clamp(26px, 7.4vw, 52px);
  line-height: 1.04;
  color: rgba(255, 246, 224, 0.98);
  text-shadow: 0 0 30px rgba(255, 150, 90, 0.28), 0 2px 0 rgba(8, 5, 20, 0.55);
  opacity: 0;
  transform: translateY(16px) scale(0.97);
  filter: blur(9px);
}
.race-end-rule {
  height: 1px;
  width: min(58vw, 340px);
  margin: 18px auto 0;
  transform: scaleX(0);
  background: linear-gradient(90deg,
    rgba(255, 214, 140, 0) 0%, rgba(255, 214, 140, 0.5) 22%,
    rgba(255, 232, 190, 0.9) 50%, rgba(255, 214, 140, 0.5) 78%, rgba(255, 214, 140, 0) 100%);
  box-shadow: 0 0 12px rgba(255, 196, 120, 0.4);
  opacity: 0;
}
/* sombre palette when the run ended in a wreck */
.race-end.wrecked .race-end-eyebrow { color: rgba(255, 150, 150, 0.8); text-shadow: 0 0 14px rgba(255, 60, 70, 0.3); }
.race-end.wrecked .race-end-label  { color: rgba(255, 224, 218, 0.98); text-shadow: 0 0 30px rgba(255, 70, 80, 0.32), 0 2px 0 rgba(8, 5, 20, 0.55); }
.race-end.wrecked .race-end-rule   { background: linear-gradient(90deg, rgba(255,120,120,0) 0%, rgba(255,120,120,0.5) 22%, rgba(255,180,175,0.9) 50%, rgba(255,120,120,0.5) 78%, rgba(255,120,120,0) 100%); box-shadow: 0 0 12px rgba(255, 90, 95, 0.4); }

.race-end.in .race-end-eyebrow { animation: raceUpBlur 0.66s 0.14s cubic-bezier(0.16, 0.7, 0.22, 1) forwards; }
.race-end.in .race-end-label   { animation: raceUpBlur 0.82s 0.28s cubic-bezier(0.16, 0.7, 0.22, 1) forwards; }
.race-end.in .race-end-rule    { animation: raceRule 0.9s 0.34s cubic-bezier(0.16, 0.84, 0.3, 1) forwards; }
@keyframes raceUpBlur {
  0%   { opacity: 0; transform: translateY(16px) scale(0.97); filter: blur(9px); }
  60%  { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes raceRule {
  0%   { opacity: 0; transform: scaleX(0); }
  30%  { opacity: 1; }
  100% { opacity: 1; transform: scaleX(1); }
}

/* Results card rises gently in as the veil dissolves */
#screenResults .card.enter { animation: resultsRise 0.74s cubic-bezier(0.16, 0.7, 0.22, 1); }
@keyframes resultsRise {
  0%   { opacity: 0; transform: translateY(34px) scale(0.96); filter: blur(6px); }
  100% { opacity: 1; transform: none; filter: blur(0); }
}

@media (prefers-reduced-motion: reduce) {
  .race-end.in, .race-end.out,
  .race-end.in .race-end-eyebrow, .race-end.in .race-end-label, .race-end.in .race-end-rule,
  #screenResults .card.enter { animation-duration: 0.01ms !important; animation-delay: 0s !important; }
}

.screen-inner {
  position: relative;
  width: min(560px, 94vw);
  max-height: 92vh;
  overflow-y: auto;
  z-index: 2;
  -webkit-overflow-scrolling: touch;
}

.card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025)),
    linear-gradient(180deg, rgba(15, 46, 42, 0.88), rgba(5, 18, 31, 0.92));
  border: 1px solid rgba(246, 248, 239, 0.16);
  border-radius: var(--radius);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.10);
  padding: 26px 24px;
  backdrop-filter: blur(14px) saturate(1.1);
}

/* Background neon grid on landing */
.bg-grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(transparent 0, transparent 96%, rgba(120, 250, 174, 0.12) 100%) 0 0 / 100% 42px,
    linear-gradient(90deg, transparent 0, transparent 96%, rgba(120, 250, 174, 0.07) 100%) 0 0 / 42px 100%,
    radial-gradient(900px 500px at 50% 120%, rgba(14, 58, 47, 0.55), transparent 60%);
  mask: linear-gradient(180deg, transparent, #000 40%);
  animation: gridmove 6s linear infinite;
}
@keyframes gridmove { to { background-position: 0 42px, 42px 0, 0 0; } }

/* =====================  LANDING  ===================== */
.landing { text-align: center; }
/* Skoda wordmark from the supplied vector, tinted per surface via CSS masks. */
.skoda-logo {
  width: min(240px, 60vw);
  height: 48px;
  margin: 0 auto 14px;
  background: var(--skoda-logo-color, var(--electric));
  -webkit-mask: url("assets/ui/skoda-wordmark.svg") center / contain no-repeat;
  mask: url("assets/ui/skoda-wordmark.svg") center / contain no-repeat;
  color: transparent;
  font-size: 0;
  line-height: 0;
  text-indent: -9999px;
  filter: drop-shadow(0 0 18px rgba(120, 250, 174, 0.34));
}

.skoda-logo.card-logo {
  width: min(168px, 48vw);
  height: 30px;
  margin-bottom: 14px;
  --skoda-logo-color: #e7d39d;
}
.brand-tag {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.28em;
  font-weight: 700;
  color: var(--electric);
  padding: 6px 12px;
  border: 1px solid rgba(120, 250, 174, 0.35);
  border-radius: 999px;
  background: rgba(120, 250, 174, 0.06);
  margin-bottom: 18px;
}
.title {
  font-size: clamp(34px, 9vw, 62px);
  line-height: 0.92;
  margin: 6px 0 10px;
  font-weight: 900;
  letter-spacing: 0;
  background: linear-gradient(180deg, #fff, var(--silver));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 6px 24px rgba(120, 250, 174, 0.22));
}
.title span {
  display: block;
  background: linear-gradient(90deg, var(--electric), #b7ffd6, var(--electric));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.subtitle {
  font-size: clamp(15px, 4.4vw, 22px);
  font-weight: 700;
  letter-spacing: 0.06em;
  margin: 0 0 10px;
  color: var(--accent);
}
.lede { color: var(--muted); max-width: 420px; margin: 0 auto 22px; line-height: 1.5; }
.teaser {
  margin-top: 20px;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--muted);
  text-transform: uppercase;
}

/* =====================  BUTTONS  ===================== */
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.btn {
  appearance: none;
  border: 1px solid rgba(246, 248, 239, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
    rgba(15, 46, 42, 0.52);
  color: var(--ink);
  font-family: inherit;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.04em;
  padding: 14px 22px;
  border-radius: 10px;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn:hover { transform: translateY(-2px); border-color: rgba(255,255,255,0.34); }
.btn:active { transform: translateY(0) scale(0.98); }
.btn.primary {
  background: linear-gradient(120deg, #c9ffe0, var(--electric) 45%, #46d98a);
  border-color: transparent;
  color: var(--emerald-deep);
  box-shadow: 0 12px 30px rgba(120, 250, 174, 0.35);
}
.btn.primary:hover { box-shadow: 0 16px 40px rgba(120, 250, 174, 0.5); }
.btn.ghost { background: rgba(15, 46, 42, 0.46); }
.btn.lb {
  background: rgba(58, 44, 6, 0.5);
  border-color: rgba(255, 211, 78, 0.55);
  color: var(--gold);
}
.btn.lb:hover { border-color: var(--gold); box-shadow: 0 12px 30px rgba(255, 211, 78, 0.28); }
.btn.testdrive {
  background: linear-gradient(120deg, #0e8a4f, #16b35f 55%, #4fd98a);
  border-color: transparent;
  color: #04240f;
  box-shadow: 0 12px 30px rgba(22, 179, 95, 0.32);
}
.btn.testdrive::before { content: '🚗'; margin-right: 8px; font-size: 1.05em; }
.btn.testdrive:hover { box-shadow: 0 16px 40px rgba(22, 179, 95, 0.5); }
.btn.small { padding: 11px 16px; font-size: 14px; }

/* =====================  CARDS / HEADINGS  ===================== */
.card h2 {
  font-size: clamp(24px, 6vw, 34px);
  margin: 6px 0 16px;
  letter-spacing: 0;
  font-weight: 900;
}
.card h3 { margin: 0 0 8px; font-size: 14px; letter-spacing: 0.12em; color: var(--accent); text-transform: uppercase; }
.muted { color: var(--muted); font-size: 14px; }

.how-list { list-style: none; padding: 0; margin: 0 0 18px; }
.how-list li { padding: 9px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); color: var(--silver); }
.how-list b { color: var(--ink); }

.controls-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
/* Single full-width controls block (desktop instructions removed). */
.controls-grid.controls-solo { grid-template-columns: 1fr; }
.controls-grid.controls-solo p { font-size: 15px; line-height: 1.5; }
.controls-grid p { margin: 6px 0; color: var(--muted); font-size: 14px; }
kbd {
  display: inline-block;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-bottom-width: 2px;
  border-radius: 6px;
  padding: 2px 7px;
  font-size: 12px;
  margin: 0 1px;
  color: var(--ink);
}

/* =====================  CAR SELECT  ===================== */
.car-card { text-align: center; }
.car-stage {
  position: relative;
  margin: 8px auto 14px;
  background: radial-gradient(300px 160px at 50% 60%, rgba(24, 211, 255, 0.12), transparent 70%);
  border-radius: 14px;
  padding: 10px;
  overflow: hidden;
}
#carPreview { width: 100%; max-width: 380px; height: auto; display: block; margin: 0 auto; }
#carPreview.swap { animation: carSwap 0.34s cubic-bezier(0.2, 0.8, 0.3, 1); }
@keyframes carSwap {
  0% { transform: scale(0.985); }
  50% { transform: scale(1.02); }
  100% { transform: scale(1); }
}

/* Diagonal shine that sweeps across the car when a colour is picked */
.car-shine {
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,0.55) 48%, rgba(255,255,255,0.0) 60%);
  transform: translateX(-120%);
  opacity: 0;
  mix-blend-mode: screen;
}
.car-shine.sweep { animation: carShine 0.62s ease-out; }
@keyframes carShine {
  0% { transform: translateX(-120%); opacity: 0; }
  18% { opacity: 1; }
  100% { transform: translateX(120%); opacity: 0; }
}

/* ---- Colour selector swatches ---- */
.car-colors {
  display: flex;
  justify-content: center;
  gap: clamp(10px, 3.4vw, 16px);
  margin: 2px auto 6px;
  flex-wrap: wrap;
}
.swatch {
  position: relative;
  width: 38px; height: 38px;
  border-radius: 50%;
  padding: 0;
  border: 0;
  cursor: pointer;
  background: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.16s cubic-bezier(0.2, 0.8, 0.3, 1);
}
/* glossy disc */
.swatch::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(60% 55% at 34% 28%, var(--spec, #fff), transparent 60%),
    radial-gradient(120% 120% at 50% 50%, var(--swatch, #888), #0a0a12 140%);
  box-shadow: inset 0 -3px 6px rgba(0,0,0,0.45), inset 0 2px 3px rgba(255,255,255,0.25), 0 2px 6px rgba(0,0,0,0.4);
  transition: box-shadow 0.18s ease;
}
/* selection ring */
.swatch::after {
  content: '';
  position: absolute; inset: -5px;
  border-radius: 50%;
  border: 2px solid var(--spec, #fff);
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.2, 1.4, 0.4, 1);
}
.swatch:hover { transform: translateY(-3px) scale(1.08); }
.swatch:focus-visible { outline: none; }
.swatch:focus-visible::after { opacity: 0.5; transform: scale(0.92); }
.swatch.selected { transform: translateY(-2px) scale(1.04); }
.swatch.selected::after { opacity: 1; transform: scale(1); }
.swatch.selected::before { box-shadow: inset 0 -3px 6px rgba(0,0,0,0.45), inset 0 2px 3px rgba(255,255,255,0.3), 0 0 14px var(--spec, #fff), 0 2px 8px rgba(0,0,0,0.5); }
.swatch.pick { animation: swatchPick 0.42s cubic-bezier(0.2, 0.9, 0.3, 1.2); }
@keyframes swatchPick {
  0% { transform: scale(1.04); }
  40% { transform: translateY(-4px) scale(1.22); }
  100% { transform: translateY(-2px) scale(1.04); }
}
.car-color-name {
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 13px;
  color: var(--text, #fff);
  margin: 0 0 12px;
  min-height: 1em;
  transition: color 0.2s ease;
}

/* Engine / drivetrain spec chips */
.car-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2px auto 20px;
  padding: 14px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  width: 100%;
  max-width: 320px;
}
.car-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}
.car-stat-val {
  font-size: 34px;
  font-weight: 900;
  line-height: 1;
  color: var(--electric);
  letter-spacing: -0.02em;
}
.car-stat-unit {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--red2);
  text-transform: uppercase;
  margin-top: 2px;
}
.car-stat-label {
  font-size: 9px;
  letter-spacing: 0.12em;
  color: var(--muted);
  text-transform: uppercase;
  margin-top: 5px;
}
.car-stat-div {
  width: 1px;
  height: 44px;
  background: rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
}
@media (prefers-reduced-motion: reduce) {
  #carPreview.swap, .car-shine.sweep, .swatch.pick { animation: none; }
}
.car-trait {
  display: inline-block;
  font-weight: 900;
  letter-spacing: 0.18em;
  color: var(--red2);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.car-desc { color: var(--muted); margin: 0 auto 16px; max-width: 360px; }
.stat-row { display: grid; gap: 10px; margin: 0 auto 20px; max-width: 360px; }
.stat { display: grid; grid-template-columns: 70px 1fr; align-items: center; gap: 12px; }
.stat span { font-size: 12px; letter-spacing: 0.1em; color: var(--muted); text-align: left; text-transform: uppercase; }
.stat i { display: block; height: 8px; background: rgba(255, 255, 255, 0.08); border-radius: 999px; overflow: hidden; }
.stat i b { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--red)); border-radius: 999px; }
.car-card .btn { display: flex; width: 100%; margin-top: 8px; }

/* =====================  RESULTS  ===================== */
.results { text-align: center; }
.res-line { color: var(--silver); margin: 0 0 16px; }
.res-score { margin: 10px 0 16px; }
.res-score strong { display: block; font-size: clamp(40px, 12vw, 68px); font-weight: 900; color: var(--gold); line-height: 1; }
.res-progress {
  margin: 2px auto 16px;
  max-width: 430px;
  text-align: left;
}
.res-progress-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.res-progress-head b {
  color: var(--ink);
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: none;
  text-align: right;
}
.res-progress-track {
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.36);
}
.res-progress-track i {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--electric), #d9ffe8 58%, var(--red));
  box-shadow: 0 0 16px rgba(120,250,174,0.38);
  transition: width .55s cubic-bezier(.2,.8,.2,1);
}
.res-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 18px; }
.res-grid .cell {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  padding: 10px;
  text-align: left;
}
.res-grid .cell span { display: block; font-size: 11px; letter-spacing: 0.1em; color: var(--muted); text-transform: uppercase; }
.res-grid .cell b { font-size: 19px; }
.res-name { margin-bottom: 16px; }
.res-name label { display: block; font-size: 12px; letter-spacing: 0.12em; color: var(--muted); margin-bottom: 8px; text-transform: uppercase; }
.name-row { display: flex; gap: 8px; }
.name-row + .name-row { margin-top: 8px; }
.name-note { font-size: 11px; margin: 8px 0 0; opacity: 0.8; }

/* Instagram row. The @ is rendered INSIDE the field as a fixed prefix rather
   than explained in helper text: it shows the player where the handle goes and
   that the symbol is already supplied, in less room than a sentence would take.
   Typed or pasted @ and spaces are stripped on input, so both habits work. */
/* The @ anchors to the FIELD, not the row. On mobile .name-row flips to
   flex-direction: column, so a row-relative prefix drifts into the gap below the
   input and lands next to the Save button instead of inside the box. */
.ig-row { display: flex; }

.ig-field {
  position: relative;
  display: flex;
  flex: 1;
  min-width: 0;
}

.ig-at {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  font: inherit;
  line-height: 1;
  color: currentColor;
  opacity: 0.55;
  pointer-events: none;
  z-index: 1;
}

/* Empty field: the @ is part of the prompt, so it takes the placeholder's tone.
   Filled: it belongs to what the player typed, so it takes the text tone. Two
   states, and the prefix reads as native to the field in both -- rather than as
   a stray character in a different colour, which is what one fixed tone gave.
   This is why the input precedes the prefix in the markup. */
.ig-input:placeholder-shown ~ .ig-at {
  color: rgba(255, 240, 199, 0.42);
  opacity: 1;
}

/* ID + class, so this beats the `padding: 12px` shorthand on the shared input
   rule no matter which order the two end up in. Cleared past the @ glyph, which
   measures 13.8px at this font size and sits 13px in. */
#resInsta.ig-input,
#saveReminderInsta.ig-input { padding-left: 32px; }
#resName, #resPhone, #resInsta {
  flex: 1;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  padding: 12px;
  color: var(--ink);
  font-family: inherit;
  font-size: 15px;
}
#resName:focus, #resPhone:focus,
#resInsta:focus { outline: 2px solid var(--accent); }

/* =====================  TERMS FOOTER + DIALOG  ===================== */
/* The footer sits under every menu screen and never over a live run. It is
   fixed rather than in flow so a long screen (the leaderboard scrolls) cannot
   push it out of reach, and it respects the iOS home-indicator inset. */
/* The terms link is part of each panel's content, not a bar floating over the
   game: it sits at the end of the panel's own flex column, so it scrolls and
   centres with everything else and needs no z-index, no gradient and no
   reserved strip at the bottom of the screen. */
.screen-terms {
  margin: 18px 0 0;
  text-align: center;
  flex: 0 0 auto;
}

.terms-link {
  appearance: none;
  border: 0;
  background: none;
  color: var(--ink);
  opacity: 0.5;
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  padding: 8px 10px;      /* small type, still a comfortable tap */
}

.terms-link:hover,
.terms-link:focus-visible { opacity: 0.85; }

.tnc-modal {
  position: fixed;
  inset: 0;
  z-index: 200;                  /* above the save reminder at 150 */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(6px);
  animation: fadeIn 0.18s ease;
}

.tnc-modal.hidden { display: none !important; }

/* Compound selector on purpose. The shared `.card` class carries
   `min-height: 100dvh` for full-screen panels, and min-height beats max-height,
   so a plain `.tnc-card` rule left this dialog exactly viewport-tall with its
   own max-height ignored. `min-height: 0` also lets the scrolling body shrink
   inside the flex column rather than forcing the card open. */
/* A single fixed size rather than one that follows its content: the terms always
   overflow, so an auto height just reported the cap anyway, and pinning it means
   the panel is identical on every screen it opens from. Deliberately smaller than
   the garage panel it sits over. */
.tnc-modal .tnc-card {
  width: min(520px, 100%);
  max-width: none;
  min-height: 0;
  height: min(82vh, 680px);
  max-height: none;
  display: flex;
  flex-direction: column;
  text-align: left;
  padding: 0;
  overflow: hidden;
}

/* Header stays put while the terms scroll under it, so Close is always one tap
   away no matter how far down a reader has gone. */
.tnc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex: 0 0 auto;
  padding: 16px 18px 12px;
  border-bottom: 1px solid rgba(120, 250, 174, 0.16);
}

.tnc-head h2 {
  margin: 0;
  font-size: clamp(18px, 5vw, 24px);
  letter-spacing: 0.02em;
}

.tnc-head .tnc-close {
  flex: 0 0 auto;
  width: auto;
  min-height: 40px;
  padding: 8px 16px;
  font-size: 12px;
  white-space: nowrap;
}

.tnc-body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;  /* scrolling the terms must not scroll the page */
  padding: 14px 18px 20px;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(246, 248, 239, 0.86);
}

.tnc-body:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }

.tnc-lede { margin: 0 0 16px; }

.tnc-body h3 {
  margin: 20px 0 8px;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.tnc-body h3:first-of-type { margin-top: 12px; }
.tnc-body p { margin: 0 0 10px; }

.tnc-body ol,
.tnc-body ul {
  margin: 0 0 12px;
  padding-left: 20px;
}

.tnc-body li { margin: 0 0 7px; }
.tnc-body li:last-child { margin-bottom: 0; }

@media (max-width: 480px) {
  .tnc-modal .tnc-card { height: min(84vh, 620px); }
  .tnc-body { font-size: 12.5px; padding: 12px 14px 18px; }
  .tnc-head { padding: 14px 14px 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .tnc-modal { animation: none; }
}

/* =====================  SAVE REMINDER MODAL  ===================== */
.save-reminder {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(6px);
  animation: fadeIn 0.18s ease;
}
.save-reminder.hidden { display: none !important; }
.save-reminder-card {
  width: 100%;
  max-width: 380px;
  text-align: left;
}
.save-reminder-card h3 {
  margin: 0 0 6px;
  font-size: 19px;
  font-weight: 700;
  color: var(--electric);
}
.save-reminder-card .muted { margin: 0 0 16px; }
#saveReminderName, #saveReminderPhone, #saveReminderInsta {
  flex: 1;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  padding: 12px;
  color: var(--ink);
  font-family: inherit;
  font-size: 15px;
}
#saveReminderName:focus, #saveReminderPhone:focus,
#saveReminderInsta:focus { outline: 2px solid var(--accent); }

/* =====================  BEST RUNS  ===================== */
.board-head, .board-row {
  display: grid;
  grid-template-columns: 28px 1fr 70px 90px;
  gap: 8px;
  align-items: center;
  padding: 9px 6px;
  font-size: 13px;
}
.board-head { color: var(--muted); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.board-row { border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.board-row b { color: var(--gold); }
.board-row .bdg { font-size: 11px; color: var(--accent); }
.board-list { margin-bottom: 14px; }
.board-status { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 12px; opacity: 0.75; }

/* =====================  HUD  ===================== */
.hud {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  padding: max(12px, env(safe-area-inset-top)) 14px 14px;
  display: flex;
  flex-direction: column;
}
.hud-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.hud-block {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.025)),
    linear-gradient(135deg, var(--emerald-glass), var(--navy-glass));
  border: 1px solid rgba(246, 248, 239, 0.18);
  border-radius: 12px;
  padding: 8px 14px;
  backdrop-filter: blur(13px) saturate(1.14);
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04);
}
.hud-label { display: block; font-family: var(--font); font-size: 9px; letter-spacing: 0.18em; color: rgba(234,245,238,0.72); text-transform: uppercase; }
.hud-value { font-family: var(--font); font-size: clamp(18px, 5vw, 26px); font-weight: 900; font-variant-numeric: tabular-nums; }
.hud-value small { font-family: var(--font); font-size: 10px; color: var(--muted); margin-left: 3px; font-weight: 600; }
.hud-score .hud-value { color: #fff7d8; text-shadow: 0 0 18px rgba(255, 211, 78, 0.28); font-size: clamp(20px, 5.6vw, 30px); }
/* "+points" gain pops up just under the running score total at the top, so
   point feedback lives in the HUD instead of being painted over the car. */
.hud-score { position: relative; }
.score-pop {
  position: absolute;
  left: 14px; top: 100%;
  font-family: var(--font);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  font-size: clamp(14px, 4vw, 20px);
  color: var(--gold);
  text-shadow: 0 0 12px rgba(255, 211, 78, 0.55), 0 1px 0 rgba(0,0,0,0.6);
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
}
.score-pop.show { animation: scorePop 0.7s ease-out forwards; }
@keyframes scorePop {
  0% { opacity: 0; transform: translateY(2px) scale(0.7); }
  25% { opacity: 1; transform: translateY(0) scale(1.1); }
  100% { opacity: 0; transform: translateY(-10px) scale(1); }
}
.hud-phase { text-align: center; }
.hud-phase .hud-label { color: var(--red2); font-weight: 800; }
.hud-timer { font-family: var(--font); font-size: clamp(22px, 7vw, 34px); font-weight: 900; color: var(--ink); font-variant-numeric: tabular-nums; }
.hud-speed { text-align: right; }
.hud-speed .hud-value { font-size: clamp(22px, 6vw, 32px); }

/* Route progress, a full-width visual sweep (no countdown number). Lives in its
   own row so it never overlaps the score/phase/speed blocks above it.
   Stacked rows: [label ......... %] / [bar] / [country codes]. The label and the
   percentage sit ABOVE the bar rather than flanking it, which is what lets the
   bar run the full width and line up with the country codes underneath. */
.hud-route {
  --route-n: 13;                 /* segments; set from ROUTE_CODES.length in JS */
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 10px;
}
.hud-route-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.hud-route-label {
  flex: 0 0 auto;
  font-family: var(--font);
  font-size: 9px;
  letter-spacing: 0.18em;
  color: rgba(234, 245, 238, 0.72);
  text-transform: uppercase;
}
.hud-progress {
  position: relative;
  width: 100%;
  height: 13px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
}
.hud-progress-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold), var(--red2));
  box-shadow: 0 0 10px rgba(255, 211, 78, 0.5);
  transition: width .2s ease;
}
/* Country boundary ticks, drawn over the fill. One segment per country, driven
   off the SAME --route-n as the codes grid below, so the two can never drift
   apart the way a hard-coded 20% did while the route grew to twelve stages. */
.hud-progress::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    90deg,
    transparent 0 calc(100% / var(--route-n) - 1.5px),
    rgba(255, 255, 255, 0.4) calc(100% / var(--route-n) - 1.5px),
    rgba(255, 255, 255, 0.4) calc(100% / var(--route-n))
  );
}
.hud-progress.final .hud-progress-fill {
  background: linear-gradient(90deg, var(--red), var(--red2));
  box-shadow: 0 0 12px rgba(255, 45, 75, 0.6);
}
.hud-progress-text {
  flex: 0 0 auto;
  min-width: 34px;
  text-align: right;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
  font-variant-numeric: tabular-nums;
}

.hud-meters {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 10px;
  max-width: 540px;
}
.meter {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.018)),
    linear-gradient(135deg, rgba(15, 46, 42, 0.64), rgba(5, 18, 31, 0.52));
  border: 1px solid rgba(246, 248, 239, 0.14);
  border-radius: 10px;
  padding: 7px 10px;
  backdrop-filter: blur(10px) saturate(1.12);
  box-shadow: 0 8px 22px rgba(0,0,0,0.24), inset 0 1px 0 rgba(255,255,255,0.10);
}
.meter-label { font-family: var(--font); font-size: 8.5px; letter-spacing: 0.15em; color: rgba(234,245,238,0.72); text-transform: uppercase; }
.meter-bar { height: 6px; background: rgba(255, 255, 255, 0.12); border-radius: 999px; overflow: hidden; margin-top: 5px; box-shadow: inset 0 1px 2px rgba(0,0,0,0.35); }
.meter-fill { display: block; height: 100%; width: 100%; border-radius: 999px; transition: width .18s ease; }
.meter-fill.style { background: linear-gradient(90deg, var(--accent), #7c5cff); box-shadow: 0 0 10px rgba(24, 211, 255, 0.45); }
.meter-fill.health { background: linear-gradient(90deg, var(--good), #b6ff5c); }
.meter-fill.grip { background: linear-gradient(90deg, var(--gold), #ff9d3e); }
.meter-fill.boost { background: linear-gradient(90deg, #ff8a1e, #ffb347); box-shadow: 0 0 10px rgba(255, 140, 30, 0.5); }
@keyframes boostDry {
  0%   { background: rgba(255, 45, 75, 0.22); }
  60%  { background: rgba(255, 45, 75, 0.18); }
  100% { background: transparent; }
}
.meter-bar.dry { animation: boostDry 0.4s ease-out; }
.meter-fill.low { animation: pulseLow .55s ease-in-out infinite; box-shadow: 0 0 12px rgba(255, 60, 80, 0.7); }
@keyframes pulseLow { 50% { opacity: 0.35; } }

/* final-sprint HUD state, urgent red frame pulse */
.hud.final .hud-block, .hud.final .meter { border-color: rgba(255, 60, 90, 0.5); }
.hud.final { animation: finalPulse 0.9s ease-in-out infinite; }
@keyframes finalPulse { 50% { filter: drop-shadow(0 0 10px rgba(255, 45, 75, 0.4)); } }

.hud-combo {
  margin: 10px auto 0;
  text-align: center;
  opacity: 0;
  transition: opacity .2s ease, transform .2s ease;
  transform: scale(0.8);
}
.hud-combo.show { opacity: 1; transform: scale(1); }
.hud-combo span { font-family: var(--font); font-size: clamp(26px, 8vw, 40px); font-weight: 900; color: var(--gold); text-shadow: 0 0 22px rgba(255, 211, 78, 0.6); }
.hud-combo small { font-family: var(--font); display: block; font-size: 11px; letter-spacing: 0.2em; color: var(--silver); text-transform: uppercase; }

.hud-buttons { position: absolute; top: 14px; right: 14px; display: flex; gap: 8px; pointer-events: auto; }
.icon-btn {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(246, 248, 239, 0.18);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.03)),
    rgba(15, 46, 42, 0.66);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 22px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.12);
  transition: transform .12s ease, filter .18s ease, border-color .18s ease;
}
.icon-btn:hover { filter: brightness(1.12); border-color: rgba(255,255,255,0.32); }
.icon-btn:active { transform: scale(0.94); }
.icon-btn.off { opacity: 0.45; }

/* =====================  TOUCH CONTROLS  ===================== */
.touch { position: absolute; inset: 0; z-index: 25; pointer-events: none; }
.touch-steer {
  position: absolute;
  bottom: 0; left: 0;
  width: 38%;
  height: 62%;
  pointer-events: auto;
  display: flex;
  align-items: center;            /* arrow hint sits in the vertical middle */
  justify-content: center;
  color: rgba(255, 255, 255, 0.25);
  font-size: 40px;
  user-select: none;
}
.touch-steer.right { left: auto; right: 0; }
.touch-steer.active { background: radial-gradient(circle at 50% 80%, rgba(120, 250, 174, 0.18), transparent 70%); }

/* ---- brake / boost hit zones ----
   The pads only occupy a small rectangle each, so a thumb landing low on the
   screen, below a pad, or in the gap between them, used to fall straight
   through to the steering zone behind and steer instead of braking. These two
   invisible zones claim the whole band from the top of the pad row down to the
   bottom edge: left half brakes, right half boosts. The pads themselves are
   untouched and still look and measure exactly the same.

   --action-band is measured from the live pad row in resize(), so it stays
   correct no matter which of the stacked skins wins the pads' bottom offset. */
.touch-actionzone {
  position: absolute;
  bottom: 0;
  height: var(--action-band, 84px);
  width: 50%;
  pointer-events: auto;
  background: none;
  -webkit-tap-highlight-color: transparent;
}
.touch-actionzone.brake { left: 0; }
.touch-actionzone.boost { right: 0; }

/* Persistent, translucent "tap here" arrows on each side so the player keeps a
   reminder of where the left / right steering zones are. They start hidden and
   only fade in slowly once the steering tutorial finishes (#touch.show-hints,
   added in endTutorial), as the HOLD LEFT/RIGHT guidance fades out. The pulse
   animates transform only, leaving opacity free for the slow reveal. */
.touch-steer span {
  opacity: 0;
  transition: opacity 1.6s ease;
  animation: steerHintPulse 1.8s ease-in-out infinite;
  will-change: transform, opacity;
}
.touch-steer.right span { animation-name: steerHintPulseRight; animation-delay: 0.9s; }
/* Revealed (faded in) once the tutorial is done. Kept very faint at rest so it's
   just a subtle hint, and brightens while that side is held. */
#touch.show-hints .touch-steer span { opacity: 0.22; }
#touch.show-hints .touch-steer.active span { opacity: 0.92; transition: opacity .12s ease; }
/* The zones are anchored to the bottom of the screen; the -4vh lift baked into
   the keyframes keeps the arrows low, just off the bottom of the screen. */
@keyframes steerHintPulse {
  0%, 100% { transform: translateY(-4vh) scale(0.94) translateX(0); }
  50%      { transform: translateY(-4vh) scale(1.06) translateX(-5px); }
}
@keyframes steerHintPulseRight {
  0%, 100% { transform: translateY(-4vh) scale(0.94) translateX(0); }
  50%      { transform: translateY(-4vh) scale(1.06) translateX(5px); }
}

/* ===================== OPENING COACH =====================
   The opening lesson is meant to read as part of the run, not as a layer on
   top of it: no card, no panel, no backdrop, no step counter, no progress
   dots. Everything here is either painted ONTO the control it is talking
   about, or set as low stamped type down where the thumbs already are, the
   same hand-painted rally-poster language as the country-title reveal.

   The overlay never eats taps (pointer-events: none) so presses fall straight
   through to the real steer zones and the boost/brake pads underneath. Each
   beat lights exactly one control, and nothing else. */
.tutorial {
  position: absolute;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  opacity: 0;
  /* Slow, unhurried fades in and out, the coach should never snap on or off. */
  transition: opacity 1.1s ease;
}
.tutorial.show { opacity: 1; }

/* ---- the press-and-hold spot on a steer zone ----
   The steer zones are bottom-left / bottom-right; a spot sits in the middle of
   each and is hidden until its beat is active (.on). Everything about it
   radiates from ONE fixed point: the dashed ring blooms outward in place, the
   hand presses down rather than across, and the progress ring can only be
   filled by a finger that stays put. */
.tut-spot {
  position: absolute;
  bottom: 30%;
  width: clamp(84px, 24vw, 128px);
  height: clamp(84px, 24vw, 128px);
  display: grid;
  place-items: center;
  opacity: 0;
  transform: scale(0.7);
  /* Long ease so the spot drifts into place instead of popping. */
  transition: opacity .8s ease, transform .8s cubic-bezier(0.2, 1.1, 0.4, 1);
  pointer-events: none;
}
.tut-spot.left  { left: 19%;  transform: translateX(-50%) scale(0.7); }
.tut-spot.right { right: 19%; transform: translateX(50%) scale(0.7); }
.tut-spot.on            { opacity: 1; }
.tut-spot.left.on       { transform: translateX(-50%) scale(1); }
.tut-spot.right.on      { transform: translateX(50%) scale(1); }
.tut-spot > * { grid-area: 1 / 1; }

/* Press target, built exactly like a selected colour swatch: a hand-painted
   splat BEHIND, a clean glossy disc in front. The splat carries the poster
   theme; the disc keeps the "press here" affordance unmistakable. */
.tut-spot::before {
  content: "";
  grid-area: 1 / 1;
  width: 100%; height: 100%;
  background: var(--paint-splat) center / contain no-repeat;
  opacity: 0.55;
  animation: tutSplat 3.6s ease-in-out infinite;
}
.tut-dot {
  width: 52%; height: 52%;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 30%, #ffffff, #d8ffea 26%, var(--electric) 62%, #2fae74);
  box-shadow:
    inset 0 -4px 8px rgba(0, 0, 0, 0.3),
    inset 0 3px 5px rgba(255, 255, 255, 0.55),
    0 3px 8px rgba(0, 0, 0, 0.5),
    0 0 20px rgba(120, 250, 174, 0.8);
  animation: tutHold 1.7s ease-in-out infinite;
}
/* While the press is actually being held the disc stops breathing and simply
   sits lit, the reward for keeping still. */
.tut-spot.held .tut-dot { animation: none; transform: scale(1.04); filter: brightness(1.16); }
@keyframes tutSplat {
  0%, 100% { transform: scale(0.94) rotate(-3deg); opacity: 0.45; }
  50%      { transform: scale(1.04) rotate(3deg);  opacity: 0.7; }
}

/* Dashed ring blooming from a FIXED point, a planted press, never a drag. */
.tut-pulse {
  width: 100%; height: 100%;
  border-radius: 50%;
  border: 2px dashed rgba(160, 255, 200, 0.9);
  filter: drop-shadow(0 0 6px rgba(120, 250, 174, 0.5));
  animation: tutRing 2.8s ease-out infinite;
}
/* The bloom is the "start pressing" invitation; once the press is registered
   the filling ring takes over and the bloom steps back. */
.tut-spot.held .tut-pulse { opacity: 0.25; }

/* ---- the hold meter ----
   This is the piece that does the actual teaching. --tut-p is driven from the
   game loop: it climbs while the control is held steady and drains back when
   it is let go, so a swipe or a flick can never complete the beat. No copy
   needed, you can see that stillness is what fills it. */
.tut-ring {
  width: 106%; height: 106%;
  border-radius: 50%;
  background: conic-gradient(from -90deg,
    #ffffff 0deg,
    var(--electric) calc(var(--tut-p, 0) * 340deg),
    rgba(120, 250, 174, 0.12) calc(var(--tut-p, 0) * 360deg));
  -webkit-mask: radial-gradient(circle, transparent 62%, #000 64%);
          mask: radial-gradient(circle, transparent 62%, #000 64%);
  filter: drop-shadow(0 0 7px rgba(120, 250, 174, 0.55));
  opacity: 0.9;
}
.tut-hand {
  font-size: clamp(28px, 7.4vw, 40px);
  transform: translate(14%, 26%);
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.55));
  animation: tutPress 1.7s ease-in-out infinite;
}
/* Held: the hand settles down and stays down. */
.tut-spot.held .tut-hand { animation: none; transform: translate(14%, 18%) scale(0.94); }
@keyframes tutHold {
  0%, 100% { transform: scale(0.9);  filter: brightness(0.96); }
  50%      { transform: scale(1.05); filter: brightness(1.12); }
}
@keyframes tutRing {
  0%   { transform: scale(0.55) rotate(0deg);   opacity: 0; }
  18%  { opacity: 0.85; }
  100% { transform: scale(1.18) rotate(24deg);  opacity: 0; }
}
@keyframes tutPress {
  0%, 100% { transform: translate(14%, 26%) scale(1); }
  50%      { transform: translate(14%, 18%) scale(0.92); }
}

/* ---- the cue on the boost / brake pad ----
   Uses the SAME rough sketched frame as the game's outlined buttons, so the
   highlight looks drawn by the same hand rather than a UI focus ring. */
.action-btn.tut-cue::after {
  content: "" !important;
  position: absolute;
  inset: -13px -16px;
  border: 0;
  border-radius: 0;
  background: var(--grunge-frame) center / 100% 100% no-repeat;
  filter: drop-shadow(0 0 10px rgba(120, 250, 174, 0.55));
  pointer-events: none;
  z-index: 6;
  animation: tutHalo 1.6s ease-in-out infinite;
}
@keyframes tutHalo {
  0%, 100% { transform: scale(1)    rotate(-0.6deg); opacity: 0.55; }
  50%      { transform: scale(1.05) rotate(0.6deg);  opacity: 1; }
}

/* ---- the caption ----
   Sits LOW, in the clear band between the boost/brake pads and the steer
   spots, right where the player is already looking at their thumbs. Being
   down there (rather than centred like a dialog) is most of what stops it
   reading as a pop-up. Stamped italic type straight onto the world: no box,
   no border, no fill. */
.tut-cap {
  position: absolute;
  left: 50%;
  /* Sits just above the hero car's roof. --hero-top is published by resize()
     from the same numbers that place the car, so the caption tracks the car
     instead of being pinned to a percentage that only happened to clear it.
     The 82% fallback is the old fixed placement, for the frame or two before
     the first resize() lands. */
  bottom: calc(100% - var(--hero-top, 82%));
  width: min(80vw, 460px);
  transform: translateX(-50%);
  text-align: center;
  background: none;
  border: 0;
  padding: 0;
  box-shadow: none;
  backdrop-filter: none;
}
/* Each new line rises in on its own, slowly, so the coach reads as a sequence
   of quiet remarks rather than a panel whose text keeps getting swapped. */
.tut-cap-title,
.tut-cap-sub {
  display: block;
  opacity: 0;
  transform: translateY(9px);
  transition: opacity .7s ease, transform .7s cubic-bezier(0.2, 1, 0.4, 1);
}
.tut-cap.in .tut-cap-title,
.tut-cap.in .tut-cap-sub { opacity: 1; transform: translateY(0); }
.tut-cap.in .tut-cap-sub { transition-delay: .22s; }

/* Headline: same stamped italic treatment as the menu + country titles, but a
   size down, so it belongs to the same world without shouting over it. */
.tut-cap-title {
  font-family: var(--font);
  font-style: italic;
  font-weight: 900;
  font-size: clamp(22px, 6.6vw, 34px);
  line-height: 1;
  color: var(--skoda-mist, #f4fff8);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  transform-origin: center;
  text-shadow:
    2px 2px 0 var(--skoda-emerald, #0e3a2f),
    3px 3px 0 rgba(0, 0, 0, 0.7),
    0 0 24px rgba(120, 250, 174, 0.24);
}
.tut-cap.in .tut-cap-title { transform: translateY(0) rotate(-1.6deg); }

.tut-cap-sub {
  font-family: var(--font);
  font-weight: 700;
  font-style: italic;
  font-size: clamp(11.5px, 3.2vw, 14px);
  letter-spacing: 0.06em;
  color: rgba(244, 255, 248, 0.9);
  text-shadow: 0 2px 0 rgba(2, 8, 6, 0.95), 0 0 12px rgba(2, 8, 6, 0.8);
  margin-top: 8px;
  min-height: 1.2em;
}
/* Dashed ornaments flanking the sub-line, the same motif as "PUNE TO PRAGUE"
   and the phase eyebrows, which is what ties the caption to the poster world.
   They only work while the line stays unbroken, so they're dropped on the
   narrowest screens rather than left stranded on a wrapped second row. */
.tut-cap-sub::before,
.tut-cap-sub::after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: clamp(14px, 4.5vw, 28px);
  height: 2px;
  margin: 0 10px;
  background: repeating-linear-gradient(90deg, currentColor 0 6px, transparent 6px 11px);
  opacity: 0.55;
}
@media (max-width: 340px) {
  .tut-cap-sub::before,
  .tut-cap-sub::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tut-dot, .tut-pulse, .tut-hand, .tut-spot::before,
  .action-btn.tut-cue::after { animation: none !important; }
  .tut-pulse { opacity: 0.4; }
  .tut-cap-title, .tut-cap-sub { transition-duration: .01ms; transform: none !important; }
}


.touch-actions {
  position: absolute;
  bottom: 24px; left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 14px;
  /* The row stretches the full width under the retro skin, so if IT caught
     taps then every press beside a pad would land on the container and do
     nothing at all, a dead strip exactly where thumbs sit. Only the pads
     themselves take input; everything else falls through to the brake/boost
     hit zones behind. */
  pointer-events: none;
}
.action-btn {
  pointer-events: auto;
  width: clamp(78px, 22vw, 110px);
  height: clamp(64px, 16vw, 84px);
  border-radius: 14px;
  border: 1px solid rgba(246, 248, 239, 0.18);
  font-family: var(--font) !important;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 0.08em;
  color: #fff;
  cursor: pointer;
  user-select: none;
  backdrop-filter: blur(10px);
  box-shadow:
    0 14px 28px rgba(0, 0, 0, 0.36),
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -10px 24px rgba(0,0,0,0.12);
  transition: transform .12s ease, filter .18s ease, box-shadow .18s ease;
}
.action-btn.boost { background: linear-gradient(135deg, #ff5d54, var(--red) 48%, #9f0926); border-color: rgba(255, 180, 185, 0.36); }
.action-btn.brake { background: linear-gradient(135deg, #173b36, #091926 65%, #061015); }
/* Hover brightening only on devices with a real hover (mouse). On touch, :hover
   "sticks" after a tap and would leave the button lit, so we gate it. The
   pressed look is driven solely by the .pressed class (added on touchstart,
   removed on touchend), so the button snaps back to its original colour the
   instant you let go. */
@media (hover: hover) {
  .action-btn:hover { filter: brightness(1.08); }
}
.action-btn.pressed {
  transform: translateY(2px) scale(0.96);
  filter: brightness(1.18);
  box-shadow:
    0 8px 16px rgba(0, 0, 0, 0.34),
    inset 0 2px 10px rgba(0,0,0,0.20),
    inset 0 1px 0 rgba(255,255,255,0.18);
}

/* =====================  FLOATERS / FEEDBACK  ===================== */
.floaters { position: absolute; inset: 0; z-index: 22; pointer-events: none; overflow: hidden; }
.floater {
  position: absolute;
  font-family: var(--font);
  font-weight: 900;
  font-size: clamp(15px, 4.4vw, 22px);
  letter-spacing: 0.02em;
  white-space: nowrap;
  /* crisp dark outline + glow so popups read over the bright daytime scene */
  text-shadow:
    0 0 1px rgba(0, 0, 0, 0.9), 0 1px 0 rgba(0, 0, 0, 0.85),
    0 0 14px rgba(0, 0, 0, 0.55), 0 2px 10px rgba(0, 0, 0, 0.7);
  -webkit-text-stroke: 0.6px rgba(0, 0, 0, 0.45);
  animation: floatUp 1.05s cubic-bezier(0.18, 0.9, 0.25, 1) forwards;
  transform: translate(-50%, -50%);
}
@keyframes floatUp {
  0% { opacity: 0; transform: translate(-50%, 0) scale(0.55); }
  16% { opacity: 1; transform: translate(-50%, -18px) scale(1.14); }
  30% { transform: translate(-50%, -24px) scale(0.98); }
  100% { opacity: 0; transform: translate(-50%, -74px) scale(1); }
}
.floater.gold { color: var(--gold); }
.floater.red { color: var(--red2); }
.floater.cyan { color: var(--accent); }
.floater.green { color: var(--good); }
.floater.white { color: #fff; }

/* Phase transition banner */
.phase-banner {
  position: absolute;
  top: 28%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 30;
  text-align: center;
  pointer-events: none;
  animation: bannerPop 1.35s ease forwards;
}
.phase-banner span { font-family: var(--font); display: block; font-size: 10px; letter-spacing: 0.24em; color: rgba(57, 230, 90, 0.86); text-transform: uppercase; text-shadow: 2px 2px 0 rgba(8, 5, 20, 0.88); }
.phase-banner strong { font-family: var(--font); font-size: clamp(20px, 5.8vw, 38px); font-weight: 900; text-transform: uppercase; letter-spacing: 0.03em; color: rgba(255, 240, 199, 0.78); text-shadow: 0 0 16px rgba(255, 91, 69, 0.28), 3px 3px 0 rgba(8, 5, 20, 0.7); }
@keyframes bannerPop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.7); }
  16%, 54% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -60%) scale(1.05); }
}

/* ===== Cinematic level-entry title (Ghost of Tsushima style reveal) ===== */
.level-title {
  /* --lt-dur drives the whole reveal; JS sets it per stage (India keeps the
     base pace, later stages run slower/more cinematic). --lt-char-dur is the
     per-letter reveal length. */
  --lt-dur: 3.4s;
  --lt-char-dur: 0.9s;
  position: absolute;
  top: 38%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 32;
  text-align: center;
  pointer-events: none;
  width: min(86vw, 720px);
  /* whole overlay eases out at the end for a clean, soft exit */
  animation: levelTitleVeil var(--lt-dur) ease forwards;
}
.level-title.hidden { display: none; }

/* Thin hairlines that draw outward from the centre */
.level-title-rule {
  height: 1px;
  margin: 0 auto;
  width: 100%;
  transform: scaleX(0);
  background: linear-gradient(90deg,
    rgba(255, 240, 199, 0) 0%,
    rgba(255, 240, 199, 0.55) 20%,
    rgba(255, 240, 199, 0.85) 50%,
    rgba(255, 240, 199, 0.55) 80%,
    rgba(255, 240, 199, 0) 100%);
  box-shadow: 0 0 10px rgba(255, 196, 120, 0.35);
  animation: levelRuleDraw var(--lt-dur) cubic-bezier(0.16, 0.84, 0.3, 1) forwards;
}
.level-title-rule-top { margin-bottom: 16px; }
.level-title-rule-bottom { margin-top: 16px; animation-delay: calc(var(--lt-dur) * 0.018); }

/* Small route label fades up under the top rule */
.level-title-sub {
  font-family: var(--font);
  font-size: clamp(9px, 2.4vw, 12px);
  letter-spacing: 0.5em;
  text-indent: 0.5em; /* compensate trailing letter-spacing for true centring */
  color: rgba(57, 230, 90, 0.92);
  text-transform: uppercase;
  text-shadow: 0 0 12px rgba(57, 230, 90, 0.35), 2px 2px 0 rgba(8, 5, 20, 0.85);
  /* Same blur-rise as the country name's letters, started at the same moment,
     so the two lines appear (and later leave) in unison rather than the label
     snapping in/out faster. */
  opacity: 0;
  transform: translateY(10px);
  filter: blur(7px);
  animation: levelSubReveal var(--lt-char-dur) cubic-bezier(0.18, 0.7, 0.24, 1) forwards;
  animation-delay: var(--lt-sub-delay, 0.45s);
}

/* Big location name, reveals letter by letter */
.level-title-name {
  font-family: var(--font);
  font-size: clamp(26px, 7.4vw, 56px);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 244, 214, 0.96);
  text-shadow: 0 0 22px rgba(255, 120, 70, 0.32), 0 2px 0 rgba(8, 5, 20, 0.6);
  margin: 8px 0 0;
  white-space: pre-wrap;
}
.level-title-name .lt-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(14px) scale(1.18);
  filter: blur(7px);
  animation: levelCharIn var(--lt-char-dur) cubic-bezier(0.18, 0.7, 0.24, 1) forwards;
}
.level-title-name .lt-space {
  display: inline-block;
  width: 0.32em;
}

@keyframes levelTitleVeil {
  0% { opacity: 0; filter: blur(0); }
  6% { opacity: 1; }
  80% { opacity: 1; filter: blur(0); }
  /* both lines blur + drift away together on exit (matches the blur-in feel) */
  100% { opacity: 0; transform: translate(-50%, -54%); filter: blur(5px); }
}
@keyframes levelRuleDraw {
  0% { transform: scaleX(0); opacity: 0; }
  8% { opacity: 1; }
  42% { transform: scaleX(1); }
  80% { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}
@keyframes levelSubReveal {
  0%   { opacity: 0; transform: translateY(10px); filter: blur(7px); }
  60%  { opacity: 1; transform: translateY(0);    filter: blur(0); }
  100% { opacity: 1; transform: translateY(0);    filter: blur(0); }
}
@keyframes levelCharIn {
  0% { opacity: 0; transform: translateY(14px) scale(1.18); filter: blur(7px); }
  60% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@media (prefers-reduced-motion: reduce) {
  .level-title-rule,
  .level-title-sub,
  .level-title-name .lt-char { animation-duration: 0.01ms; animation-delay: 0 !important; }
}

.pause-screen { background: rgba(3, 5, 12, 0.7); backdrop-filter: blur(3px); }
.pause-screen .card { text-align: center; }
.pause-screen .btn { display: flex; width: 100%; margin-top: 10px; }

.rotate-hint {
  position: absolute;
  bottom: 8px; left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  background: rgba(255, 45, 75, 0.92);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 8px 14px;
  border-radius: 999px;
}

/* =====================  RESPONSIVE  ===================== */
@media (max-width: 480px) {
  .controls-grid { grid-template-columns: 1fr; }
  .hud { padding: 8px; }
  .hud-top { gap: 5px; justify-content: flex-start; }
  .hud-block { border-radius: 10px; padding: 5px 9px; }
  .hud-phase {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
  }
  .hud-label { font-size: 7px; letter-spacing: 0.16em; }
  .hud-score .hud-value { font-size: 24px; }
  .hud-timer { font-size: 26px; }
  .hud-speed { display: none; }
  .hud-meters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; max-width: 280px; margin-top: 8px; }
  .meter { border-radius: 9px; padding: 5px 8px; }
  .meter-label { font-size: 7px; letter-spacing: 0.13em; }
  .meter-bar { height: 5px; margin-top: 4px; }
  .hud-buttons { top: 8px; right: 8px; gap: 6px; }
  .icon-btn { width: 34px; height: 34px; border-radius: 8px; font-size: 13px; }
  .touch-steer { width: 34%; height: 58%; font-size: 34px; }
  .touch-actions {
    left: 0;
    right: 0;
    bottom: max(14px, env(safe-area-inset-bottom));
    transform: none;
    justify-content: space-between;
    padding: 0 18px;
    gap: 0;
  }
  .action-btn {
    width: clamp(76px, 24vw, 92px);
    height: clamp(54px, 14vw, 64px);
    border-radius: 14px;
    font-size: 13px;
  }
}

/* =====================  RETRO INDIE GAMEPLAY SKIN  ===================== */
#game {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: #160825;
}

#screenLanding {
  background:
    linear-gradient(180deg, rgba(18, 4, 38, 0.20), rgba(8, 3, 22, 0.78)),
    url("assets/retro/sunset-pixel.png") center / cover no-repeat;
  image-rendering: pixelated;
}

#screenLanding .bg-grid {
  opacity: 0.22;
}

.hud {
  padding: max(12px, env(safe-area-inset-top)) 16px 16px;
}

.hud-top {
  align-items: flex-start;
  gap: 12px;
}

.hud-block,
.meter,
.icon-btn,
.action-btn,
.tut-hint {
  border-radius: 0 !important;
  backdrop-filter: none !important;
}

.hud-block,
.meter {
  position: relative;
  background: #080719 !important;
  border: 3px solid #6e3a78 !important;
  box-shadow:
    0 5px 0 #14091d,
    inset 0 0 0 3px #16102b,
    inset 0 -7px 0 rgba(0, 0, 0, 0.42) !important;
  padding: 9px 13px 10px;
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
}

.hud-label,
.meter-label {
  color: #39e65a !important;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.07em;
  text-shadow: 2px 2px 0 #090719;
}

.hud-phase .hud-label {
  color: #ff384f !important;
}

.hud .hud-phase {
  position: absolute !important;
  top: max(12px, env(safe-area-inset-top)) !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  text-align: center;
}

.hud-value,
.hud-timer {
  color: #fff0c7 !important;
  font-size: clamp(30px, 7vw, 48px);
  line-height: 0.95;
  text-shadow: 3px 3px 0 #27173e, -2px 0 0 #090719;
}

.hud-value small {
  color: #fff0c7;
}

.hud-speed {
  display: none;
}

.hud-meters {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 640px;
  gap: 14px;
  margin-top: 14px;
}

.meter {
  min-width: 210px;
  padding: 9px 12px 11px;
}

.meter-bar {
  height: 18px;
  margin-top: 7px;
  border-radius: 0;
  background:
    repeating-linear-gradient(90deg, #211234 0 10px, #12091f 10px 14px) !important;
  border: 3px solid #6e3a78;
  box-shadow: inset 0 0 0 2px #090719;
}

.meter-fill {
  border-radius: 0;
  transition: width .12s steps(8, end);
}

.meter-fill.health {
  background: repeating-linear-gradient(90deg, #39e65a 0 10px, #1fb747 10px 14px) !important;
}

.meter-fill.boost {
  background: repeating-linear-gradient(90deg, #ff9a2e 0 10px, #f06a12 10px 14px) !important;
}

/* Route progress bar, pixel-skin variant to match the retro HUD chrome. */
.hud-route {
  gap: 6px;
  margin-top: 14px;
}
.hud-route-label {
  color: #39e65a !important;
  font-size: 12px;
  letter-spacing: 0.07em;
  text-shadow: 2px 2px 0 #090719;
  white-space: nowrap;
}
.hud-progress {
  height: 20px;
  border-radius: 0;
  background:
    repeating-linear-gradient(90deg, #211234 0 10px, #12091f 10px 14px) !important;
  border: 3px solid #6e3a78;
  box-shadow: inset 0 0 0 2px #090719;
}
.hud-progress-fill {
  border-radius: 0;
  transition: width .12s steps(8, end);
  background: repeating-linear-gradient(90deg, #ffcf4a 0 10px, #ff8a3d 10px 14px) !important;
  box-shadow: none;
}
.hud-progress.final .hud-progress-fill {
  background: repeating-linear-gradient(90deg, #ff384f 0 10px, #c91e3c 10px 14px) !important;
}
.hud-progress-text {
  font-size: 13px;
  color: #fff0c7;
  text-shadow: 2px 2px 0 #090719;
}
/* One column per country, exactly matching the bar's segments above. Each code
   is centred in its own 1/route-n slice, so a country sits directly beneath the
   stretch of bar it owns, the bar's ticks read as the dividers, which is why
   there are no separator dots any more. */
.hud-route-codes {
  display: grid;
  grid-template-columns: repeat(var(--route-n), 1fr);
  align-items: center;
  font-family: var(--font);
  font-size: 10px;
  line-height: 1;
  color: #6e3a78;
  text-shadow: 2px 2px 0 #090719;
}
.hud-route-codes b,
.hud-route-codes span {
  text-align: center;
  overflow: hidden;
}
.hud-route-codes b {
  color: #39e65a;
  font-weight: 900;
}
.hud-route-codes span {
  color: #fff0c7;
  opacity: 0.62;
}

.hud-buttons {
  top: max(12px, env(safe-area-inset-top));
  right: 16px;
  gap: 12px;
}

.icon-btn {
  width: 54px;
  height: 54px;
  background: #080719 !important;
  border: 3px solid #6e3a78 !important;
  color: #fff0c7;
  box-shadow: 0 5px 0 #14091d, inset 0 0 0 3px #16102b !important;
  font-size: 20px;
  line-height: 1;
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
}

.touch-steer {
  color: rgba(57, 230, 90, 0.7);
  text-shadow: 3px 3px 0 #090719;
}

.touch-steer.active {
  background: transparent;
}

.touch-actions {
  bottom: max(20px, env(safe-area-inset-bottom));
  left: 0;
  right: 0;
  transform: none;
  justify-content: space-between;
  padding: 0 22px;
}

.action-btn {
  width: clamp(96px, 28vw, 134px);
  height: clamp(66px, 15vw, 82px);
  border: 4px solid #6e3a78;
  color: #fff0c7;
  font-size: clamp(17px, 4.4vw, 24px);
  letter-spacing: 0.02em;
  box-shadow:
    0 7px 0 #14091d,
    inset 0 -9px 0 rgba(0,0,0,0.34),
    inset 0 0 0 3px rgba(255,255,255,0.08) !important;
  clip-path: polygon(9px 0, calc(100% - 9px) 0, 100% 9px, 100% calc(100% - 9px), calc(100% - 9px) 100%, 9px 100%, 0 calc(100% - 9px), 0 9px);
}

.action-btn.brake {
  background: #090719 !important;
}

.action-btn.boost {
  background: #e92832 !important;
  border-color: #ffb35f !important;
}

.tut-hint {
  background: #080719;
  border: 3px solid #6e3a78;
  color: #fff0c7;
  box-shadow: 0 5px 0 #14091d;
}

@media (max-width: 480px) {
  .hud { padding: 8px; }
  .hud-top { gap: 6px; }
  .hud-block { padding: 7px 9px 8px; min-width: 76px; }
  .hud .hud-phase { top: 8px !important; max-width: 132px; }
  .hud-label { font-size: 9px; }
  .hud-phase .hud-label { font-size: clamp(7px, 2.4vw, 9px); white-space: normal; line-height: 1.05; }
  .hud-value,
  .hud-timer,
  .hud-score .hud-value { font-size: 32px; }
  .hud-meters { max-width: 320px; gap: 8px; margin-top: 9px; }
  .meter { min-width: 0; padding: 7px 8px 9px; }
  .meter-label { font-size: 9px; }
  .meter-bar { height: 17px; }
  .hud-route { gap: 5px; margin-top: 8px; }
  .hud-route-label { font-size: 9px; }
  .hud-progress { height: 15px; }
  .hud-progress-text { font-size: 10px; }
  .hud-route-codes { font-size: 8px; letter-spacing: -0.02em; }
  .hud-buttons { top: 8px; right: 8px; gap: 7px; }
  .icon-btn { width: 42px; height: 42px; font-size: 16px; }
  .touch-actions { padding: 0 18px; bottom: max(14px, env(safe-area-inset-bottom)); }
  .action-btn { width: 104px; height: 65px; font-size: 19px; }
}

/* =====================  RETRO ARCADE MENU SYSTEM  ===================== */
:root {
  --retro-void: #080719;
  --retro-panel: #12091f;
  --retro-panel-2: #211234;
  --retro-purple: #6e3a78;
  --retro-purple-hot: #b55dd8;
  --retro-green: #39e65a;
  --retro-mint: #9cffb0;
  --retro-cream: #fff0c7;
  --retro-gold: #ffcf4a;
  --retro-orange: #ff8a3d;
  --retro-red: #ff384f;
  --pixel-corner: 14px;
}

.screen {
  background:
    linear-gradient(180deg, rgba(8, 7, 25, 0.22), rgba(8, 7, 25, 0.88)),
    radial-gradient(520px 300px at 50% 12%, rgba(255, 207, 74, 0.13), transparent 68%),
    url("assets/retro/sunset-pixel.png") center / cover no-repeat;
  image-rendering: pixelated;
}

.screen::before,
.screen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.screen::before {
  z-index: 1;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 4px),
    linear-gradient(90deg, rgba(255, 56, 79, 0.07), transparent 18%, transparent 82%, rgba(57, 230, 90, 0.06));
  mix-blend-mode: screen;
  opacity: 0.74;
}

.screen::after {
  z-index: 1;
  box-shadow:
    inset 0 0 0 6px rgba(8, 7, 25, 0.7),
    inset 0 0 0 10px rgba(110, 58, 120, 0.5),
    inset 0 0 96px rgba(0, 0, 0, 0.64);
}

#screenLanding .bg-grid {
  z-index: 1;
  opacity: 0.5;
  background:
    linear-gradient(transparent 0, transparent 92%, rgba(57, 230, 90, 0.25) 100%) 0 0 / 100% 32px,
    linear-gradient(90deg, transparent 0, transparent 92%, rgba(255, 207, 74, 0.16) 100%) 0 0 / 32px 100%,
    linear-gradient(180deg, transparent 0 46%, rgba(255, 56, 79, 0.08) 47%, transparent 55%);
  mask: linear-gradient(180deg, transparent, #000 34%, #000 100%);
}

#screenLanding::after {
  box-shadow:
    inset 0 0 0 6px #080719,
    inset 0 0 0 10px #6e3a78,
    inset 0 0 0 14px rgba(255, 207, 74, 0.22),
    inset 0 0 110px rgba(0, 0, 0, 0.72);
}

.screen-inner {
  scrollbar-color: var(--retro-purple-hot) rgba(8, 7, 25, 0.64);
}

.landing,
.card {
  color: var(--retro-cream);
  border-radius: 0;
  border: 4px solid var(--retro-purple);
  background:
    linear-gradient(180deg, rgba(255, 240, 199, 0.055), transparent 28%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 2px, transparent 2px 8px),
    linear-gradient(180deg, rgba(33, 18, 52, 0.94), rgba(8, 7, 25, 0.96));
  box-shadow:
    0 10px 0 #14091d,
    0 18px 36px rgba(0, 0, 0, 0.48),
    inset 0 0 0 4px #080719,
    inset 0 0 0 7px rgba(255, 207, 74, 0.14);
  clip-path: polygon(var(--pixel-corner) 0, calc(100% - var(--pixel-corner)) 0, 100% var(--pixel-corner), 100% calc(100% - var(--pixel-corner)), calc(100% - var(--pixel-corner)) 100%, var(--pixel-corner) 100%, 0 calc(100% - var(--pixel-corner)), 0 var(--pixel-corner));
  backdrop-filter: none;
}

.landing {
  width: min(620px, 94vw);
  padding: clamp(24px, 5vw, 40px) clamp(18px, 5vw, 36px);
}

.landing::before,
.card::before {
  content: "";
  position: absolute;
  inset: 10px;
  z-index: -1;
  border: 2px solid rgba(57, 230, 90, 0.28);
  clip-path: inherit;
  pointer-events: none;
}

.skoda-logo {
  height: 44px;
  margin-bottom: 12px;
  --skoda-logo-color: var(--retro-green);
  filter:
    drop-shadow(3px 3px 0 #080719)
    drop-shadow(0 0 14px rgba(57, 230, 90, 0.44));
}

.brand-tag,
.board-status,
.res-name label {
  border-radius: 0;
  border: 2px solid rgba(57, 230, 90, 0.55);
  background: rgba(8, 7, 25, 0.78);
  color: var(--retro-green);
  text-shadow: 2px 2px 0 #080719;
  box-shadow: inset 0 -4px 0 rgba(57, 230, 90, 0.08);
}

.brand-tag {
  padding: 7px 12px;
  margin-bottom: 16px;
}

.title {
  margin: 6px 0 12px;
  color: var(--retro-cream);
  background: none;
  letter-spacing: 0;
  text-shadow:
    4px 4px 0 #080719,
    -2px 0 0 var(--retro-red),
    2px 0 0 var(--retro-green),
    0 0 24px rgba(255, 207, 74, 0.32);
  filter: none;
}

.title span {
  color: var(--retro-gold);
  background: none;
  text-shadow:
    4px 4px 0 #080719,
    -2px 0 0 var(--retro-red),
    2px 0 0 var(--retro-green),
    0 0 18px rgba(255, 207, 74, 0.52);
}

.subtitle {
  color: var(--retro-green);
  text-shadow: 2px 2px 0 #080719;
}

.lede,
.teaser,
.muted,
.res-line,
.controls-grid p,
.car-desc {
  color: rgba(255, 240, 199, 0.78);
}

.teaser {
  display: inline-block;
  padding: 8px 12px;
  border-top: 2px solid rgba(255, 207, 74, 0.28);
  border-bottom: 2px solid rgba(255, 207, 74, 0.28);
  color: var(--retro-gold);
  text-shadow: 2px 2px 0 #080719;
}

.btn-row {
  gap: 12px;
}

.btn {
  position: relative;
  min-height: 48px;
  border-radius: 0;
  border: 3px solid var(--retro-purple);
  background:
    linear-gradient(180deg, rgba(255, 240, 199, 0.09), rgba(255, 240, 199, 0)),
    var(--retro-panel);
  color: var(--retro-cream);
  letter-spacing: 0.02em;
  box-shadow:
    0 6px 0 #14091d,
    inset 0 -6px 0 rgba(0, 0, 0, 0.28),
    inset 0 0 0 2px rgba(255, 240, 199, 0.07);
  clip-path: polygon(9px 0, calc(100% - 9px) 0, 100% 9px, 100% calc(100% - 9px), calc(100% - 9px) 100%, 9px 100%, 0 calc(100% - 9px), 0 9px);
}

.btn:hover {
  border-color: var(--retro-green);
  box-shadow:
    0 6px 0 #14091d,
    0 0 18px rgba(57, 230, 90, 0.28),
    inset 0 -6px 0 rgba(0, 0, 0, 0.22);
}

.btn:focus-visible,
.swatch:focus-visible,
#resName:focus,
#resPhone:focus,
#resInsta:focus,
#saveReminderName:focus,
#saveReminderPhone:focus,
#saveReminderInsta:focus {
  outline: 3px solid var(--retro-gold);
  outline-offset: 3px;
}

.btn.primary {
  border-color: #fff0c7;
  background:
    linear-gradient(180deg, #b8ffbd, var(--retro-green) 52%, #19a942);
  color: #080719;
  text-shadow: 1px 1px 0 rgba(255, 240, 199, 0.55);
  box-shadow:
    0 6px 0 #11752e,
    0 0 22px rgba(57, 230, 90, 0.36),
    inset 0 -7px 0 rgba(0, 0, 0, 0.18);
}

.btn.lb {
  border-color: var(--retro-gold);
  background:
    linear-gradient(180deg, #ffe486, var(--retro-gold) 52%, var(--retro-orange));
  color: #2b1430;
  box-shadow:
    0 6px 0 #8f4c1f,
    0 0 22px rgba(255, 207, 74, 0.28),
    inset 0 -7px 0 rgba(0, 0, 0, 0.14);
}

.btn.ghost {
  background:
    linear-gradient(180deg, rgba(181, 93, 216, 0.18), rgba(181, 93, 216, 0)),
    var(--retro-panel);
}

.btn.testdrive {
  border-color: var(--retro-green);
  background:
    linear-gradient(180deg, #d3ffd9, #39e65a 48%, #17983c);
  color: #080719;
  box-shadow:
    0 6px 0 #11752e,
    0 0 22px rgba(57, 230, 90, 0.28),
    inset 0 -7px 0 rgba(0, 0, 0, 0.15);
}

.card h2,
.card h3 {
  color: var(--retro-cream);
  letter-spacing: 0;
  text-shadow:
    3px 3px 0 #080719,
    -1px 0 0 var(--retro-red),
    1px 0 0 var(--retro-green);
}

.card h3 {
  color: var(--retro-green);
  letter-spacing: 0.08em;
}

.how-list li {
  color: rgba(255, 240, 199, 0.82);
  border-bottom: 2px solid rgba(110, 58, 120, 0.42);
}

.how-list b {
  color: var(--retro-gold);
}

.controls-grid > div,
.res-grid .cell {
  border: 3px solid rgba(110, 58, 120, 0.78);
  background:
    repeating-linear-gradient(90deg, rgba(57, 230, 90, 0.04) 0 8px, transparent 8px 12px),
    rgba(8, 7, 25, 0.74);
  box-shadow: inset 0 0 0 2px rgba(255, 240, 199, 0.05);
  padding: 12px;
  border-radius: 0;
}

kbd {
  border-radius: 0;
  border: 2px solid var(--retro-purple);
  background: #080719;
  color: var(--retro-cream);
  box-shadow: 0 3px 0 #14091d;
}

.car-stage {
  border-radius: 0;
  border: 4px solid var(--retro-purple);
  background:
    linear-gradient(180deg, rgba(255, 207, 74, 0.12), transparent 24%),
    radial-gradient(260px 120px at 50% 67%, rgba(57, 230, 90, 0.2), transparent 70%),
    repeating-linear-gradient(0deg, transparent 0 16px, rgba(57, 230, 90, 0.12) 16px 18px),
    repeating-linear-gradient(90deg, transparent 0 22px, rgba(255, 207, 74, 0.08) 22px 24px),
    #080719;
  box-shadow:
    inset 0 0 0 4px #12091f,
    0 6px 0 #14091d;
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
}

.car-stage::before {
  content: "GARAGE SELECT";
  position: absolute;
  top: 9px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 10px;
  background: #080719;
  border: 2px solid var(--retro-gold);
  color: var(--retro-gold);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-shadow: 2px 2px 0 #14091d;
  z-index: 1;
}

#carPreview {
  filter: drop-shadow(5px 9px 0 rgba(8, 7, 25, 0.55));
}

.car-shine {
  background: linear-gradient(115deg, transparent 40%, rgba(255, 240, 199, 0.6) 48%, transparent 58%);
}

.car-colors {
  gap: 12px;
  margin-top: 10px;
}

/* Circular glossy "sphere" colour swatches (restored older look), neutralises
   the heritage square-tile styling (clip-path corners + gold border lines) so
   the paint colours read as glossy discs again. */
.swatch {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: none;
  box-shadow: none;
  clip-path: none;
}

.swatch::before,
.swatch::after {
  border-radius: 50%;
}

.swatch::before {
  inset: 0;
  background:
    radial-gradient(60% 55% at 34% 28%, var(--spec, #fff), transparent 60%),
    radial-gradient(120% 120% at 50% 50%, var(--swatch, #888), #0a0a12 140%);
  box-shadow:
    inset 0 -3px 6px rgba(0, 0, 0, 0.45),
    inset 0 2px 3px rgba(255, 255, 255, 0.25),
    0 2px 6px rgba(0, 0, 0, 0.4);
}

.swatch::after {
  inset: -5px;
  border: 2px solid var(--retro-gold, #fff);
}

.swatch.selected {
  border-color: transparent;
}

.swatch.selected::before {
  box-shadow:
    inset 0 -3px 6px rgba(0, 0, 0, 0.45),
    inset 0 2px 3px rgba(255, 255, 255, 0.3),
    0 0 14px var(--spec, #fff),
    0 2px 8px rgba(0, 0, 0, 0.5);
}

.car-color-name,
.car-stat-val,
.res-score strong,
.board-row b {
  text-shadow: 3px 3px 0 #080719;
}

.car-color-name {
  color: var(--retro-gold);
}

.car-stats {
  max-width: 360px;
  border: 3px solid rgba(110, 58, 120, 0.82);
  background: rgba(8, 7, 25, 0.66);
  box-shadow: inset 0 0 0 3px rgba(255, 240, 199, 0.05);
  padding: 12px 8px;
}

.car-stat-val {
  color: var(--retro-green);
}

.car-stat-unit {
  color: var(--retro-red);
}

.car-stat-label {
  color: rgba(255, 240, 199, 0.66);
}

.car-stat-div {
  background: repeating-linear-gradient(0deg, var(--retro-purple) 0 4px, transparent 4px 8px);
}

.res-progress-track {
  height: 18px;
  border: 3px solid var(--retro-purple);
  border-radius: 0;
  background: repeating-linear-gradient(90deg, #211234 0 10px, #12091f 10px 14px);
  box-shadow: inset 0 0 0 2px #080719;
}

.res-progress-track i {
  border-radius: 0;
  background: repeating-linear-gradient(90deg, var(--retro-gold) 0 10px, var(--retro-orange) 10px 14px);
  box-shadow: none;
  transition: width .16s steps(10, end);
}

.res-grid .cell span {
  color: var(--retro-green);
}

.res-grid .cell b {
  color: var(--retro-cream);
  text-shadow: 2px 2px 0 #080719;
}

.res-name {
  border: 3px solid rgba(110, 58, 120, 0.74);
  background: rgba(8, 7, 25, 0.52);
  padding: 12px;
}

.res-name label {
  display: inline-block;
  padding: 5px 9px;
}

#resName,
#resPhone,
#resInsta,
#saveReminderName,
#saveReminderPhone,
#saveReminderInsta {
  border-radius: 0;
  border: 3px solid var(--retro-purple);
  background: #080719;
  color: var(--retro-cream);
  box-shadow: inset 0 0 0 2px #12091f;
}

#resName::placeholder,
#resPhone::placeholder,
#resInsta::placeholder,
#saveReminderName::placeholder,
#saveReminderPhone::placeholder,
#saveReminderInsta::placeholder {
  color: rgba(255, 240, 199, 0.42);
}

.board-status {
  display: inline-block;
  padding: 5px 9px;
}

.board-head,
.board-row {
  grid-template-columns: 34px minmax(0, 1fr) minmax(76px, auto) minmax(72px, 96px);
  gap: 8px;
  padding: 10px 8px;
}

.board-head {
  border: 3px solid var(--retro-purple);
  background: #080719;
  color: var(--retro-green);
  text-shadow: 2px 2px 0 #080719;
}

.board-row {
  min-height: 48px;
  margin-top: 8px;
  border: 3px solid rgba(110, 58, 120, 0.74);
  background:
    linear-gradient(90deg, rgba(57, 230, 90, 0.08), transparent 48%),
    rgba(8, 7, 25, 0.78);
  box-shadow: 0 4px 0 #14091d, inset 0 0 0 2px rgba(255, 240, 199, 0.04);
}

.board-row:nth-child(1) {
  border-color: var(--retro-gold);
  background:
    linear-gradient(90deg, rgba(255, 207, 74, 0.22), transparent 54%),
    rgba(8, 7, 25, 0.84);
}

.board-row > span:first-child {
  display: inline-grid;
  place-items: center;
  width: 25px;
  height: 25px;
  background: var(--retro-panel-2);
  border: 2px solid var(--retro-purple);
  color: var(--retro-gold);
}

.board-row .bdg {
  color: var(--retro-green);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#bestEmpty {
  margin: 14px 0;
  padding: 14px;
  border: 3px dashed rgba(110, 58, 120, 0.72);
  background: rgba(8, 7, 25, 0.58);
}

.pause-screen {
  background:
    linear-gradient(180deg, rgba(8, 7, 25, 0.66), rgba(8, 7, 25, 0.92)),
    url("assets/retro/sunset-pixel.png") center / cover no-repeat;
  backdrop-filter: none;
}

.save-reminder {
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 4px),
    rgba(8, 7, 25, 0.86);
  backdrop-filter: none;
}

.save-reminder-card h3 {
  color: var(--retro-gold);
  text-shadow: 3px 3px 0 #080719;
}

@media (max-width: 560px) {
  .screen {
    padding: 16px 14px;
  }

  .landing,
  .card {
    --pixel-corner: 11px;
    padding: 22px 16px;
    border-width: 3px;
    box-shadow:
      0 7px 0 #14091d,
      0 14px 26px rgba(0, 0, 0, 0.46),
      inset 0 0 0 3px #080719,
      inset 0 0 0 5px rgba(255, 207, 74, 0.14);
  }

  .title {
    font-size: clamp(38px, 14vw, 58px);
  }

  .btn-row,
  .name-row {
    gap: 10px;
  }

  .landing .btn-row .btn {
    flex: 1 1 100%;
  }

  .btn {
    width: 100%;
    padding: 13px 16px;
  }

  .controls-grid > div {
    padding: 10px;
  }

  .car-stage {
    margin-top: 6px;
    padding: 6px;
  }

  .car-stage::before {
    top: 7px;
    font-size: 8px;
  }

  .car-stats {
    max-width: none;
  }

  .car-stat-val {
    font-size: 28px;
  }

  .board-head,
  .board-row {
    grid-template-columns: 28px minmax(0, 1fr) 72px;
    font-size: 12px;
  }

  .board-head span:nth-child(4),
  .board-row .bdg {
    display: none;
  }

  .res-grid {
    grid-template-columns: 1fr;
  }

  .name-row {
    flex-direction: column;
  }
}

/* =====================  HERITAGE RALLY POSTER UI  ===================== */
:root {
  --poster-black: #030604;
  --poster-ink: #07110b;
  --poster-green: #0d2217;
  --poster-green-2: #173423;
  --poster-sage: #91a360;
  --poster-sage-bright: #bcc886;
  --poster-parchment: #d8c08a;
  --poster-gold: #aa8042;
  --poster-gold-2: #e0bd76;
  --poster-shadow: #020402;
  --poster-red: #8f3327;
}

.screen {
  background:
    radial-gradient(900px 720px at 50% 38%, rgba(142, 116, 60, 0.18), transparent 58%),
    radial-gradient(900px 520px at 50% 100%, rgba(62, 49, 29, 0.2), transparent 62%),
    #000;
  image-rendering: auto;
}

.screen::before {
  z-index: 1;
  background:
    radial-gradient(circle at 14% 18%, rgba(224, 189, 118, 0.12) 0 1px, transparent 1.5px),
    radial-gradient(circle at 84% 34%, rgba(224, 189, 118, 0.10) 0 1px, transparent 1.5px),
    radial-gradient(circle at 42% 78%, rgba(255, 235, 180, 0.08) 0 1px, transparent 1.5px),
    repeating-linear-gradient(0deg, rgba(255, 235, 180, 0.028) 0 1px, transparent 1px 5px),
    linear-gradient(90deg, rgba(170, 128, 66, 0.06), transparent 20%, transparent 80%, rgba(170, 128, 66, 0.06));
  background-size: 180px 180px, 220px 220px, 260px 260px, auto, auto;
  mix-blend-mode: screen;
  opacity: 0.72;
}

.screen::after {
  z-index: 1;
  box-shadow:
    inset 0 0 90px rgba(0, 0, 0, 0.92),
    inset 0 0 0 1px rgba(224, 189, 118, 0.10);
}

#screenLanding {
  background: #000;
}

#screenLanding::after {
  box-shadow:
    inset 0 0 0 8px rgba(3, 6, 4, 0.92),
    inset 0 0 0 11px rgba(224, 189, 118, 0.78),
    inset 0 0 0 15px rgba(19, 47, 30, 0.72),
    inset 0 0 96px rgba(0, 0, 0, 0.82);
}

#screenLanding .bg-grid {
  display: none;
}

.screen-inner {
  scrollbar-color: var(--poster-gold) rgba(3, 6, 4, 0.75);
}

.landing,
.card {
  color: var(--poster-parchment);
  border-radius: 26px;
  border: 2px solid rgba(224, 189, 118, 0.86);
  background:
    linear-gradient(180deg, rgba(216, 192, 138, 0.07), transparent 18%, rgba(0, 0, 0, 0.22)),
    radial-gradient(circle at 25% 18%, rgba(216, 192, 138, 0.08), transparent 22%),
    linear-gradient(180deg, rgba(10, 22, 14, 0.96), rgba(3, 7, 5, 0.98));
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.72),
    inset 0 0 0 5px rgba(5, 10, 6, 0.92),
    inset 0 0 0 7px rgba(224, 189, 118, 0.46),
    inset 0 0 0 12px rgba(7, 17, 11, 0.96),
    inset 0 0 55px rgba(0, 0, 0, 0.62);
  clip-path: none;
  backdrop-filter: none;
  overflow: hidden;
}

.landing::before,
.card::before {
  content: "";
  position: absolute;
  inset: 18px;
  z-index: -1;
  border-radius: 18px;
  border: 1px solid rgba(224, 189, 118, 0.52);
  box-shadow:
    inset 0 0 0 1px rgba(123, 143, 78, 0.18),
    0 0 0 1px rgba(0, 0, 0, 0.42);
  clip-path: none;
  pointer-events: none;
}

.landing::after,
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    repeating-linear-gradient(-9deg, transparent 0 18px, rgba(224, 189, 118, 0.025) 18px 20px),
    radial-gradient(circle at 22% 18%, rgba(255, 238, 185, 0.10) 0 1px, transparent 1.4px),
    radial-gradient(circle at 70% 65%, rgba(255, 238, 185, 0.08) 0 1px, transparent 1.4px);
  background-size: auto, 92px 92px, 130px 130px;
  opacity: 0.85;
}

.landing {
  width: min(640px, 94vw);
  height: min(92vh, 980px);
  min-height: min(780px, calc(100dvh - 28px));
  padding: clamp(30px, 5vh, 48px) clamp(26px, 6vw, 54px) clamp(24px, 4vh, 36px);
  display: flex;
  flex-direction: column;
  text-align: center;
  background:
    linear-gradient(180deg, rgba(3, 6, 4, 0.34), rgba(3, 6, 4, 0.20) 38%, rgba(3, 6, 4, 0.12) 58%, rgba(3, 6, 4, 0.86) 79%, rgba(3, 6, 4, 0.95)),
    url("assets/ui/vintage-route-poster.webp") center / cover no-repeat;
}

.card {
  background:
    linear-gradient(180deg, rgba(216, 192, 138, 0.08), transparent 18%, rgba(0, 0, 0, 0.24)),
    linear-gradient(180deg, rgba(13, 34, 23, 0.96), rgba(3, 7, 5, 0.98)),
    url("assets/ui/vintage-route-poster.webp") center bottom / cover no-repeat;
}

.skoda-logo {
  height: 42px;
  margin: 0 auto 18px;
  opacity: 0.88;
  --skoda-logo-color: #d8c08a;
  filter:
    drop-shadow(0 2px 0 rgba(0, 0, 0, 0.85))
    drop-shadow(0 0 12px rgba(224, 189, 118, 0.22));
}

.brand-tag,
.board-status,
.res-name label {
  border-radius: 0;
  border: 1px solid rgba(224, 189, 118, 0.66);
  border-left-width: 3px;
  border-right-width: 3px;
  background:
    linear-gradient(90deg, transparent, rgba(13, 34, 23, 0.94) 8%, rgba(13, 34, 23, 0.94) 92%, transparent),
    linear-gradient(180deg, rgba(216, 192, 138, 0.08), rgba(0, 0, 0, 0.12));
  color: var(--poster-sage-bright);
  letter-spacing: 0.22em;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.88);
  box-shadow:
    inset 0 0 0 1px rgba(9, 18, 11, 0.92),
    0 1px 0 rgba(224, 189, 118, 0.34);
}

.brand-tag {
  width: min(520px, 86%);
  padding: 9px 12px;
  margin: 0 auto 28px;
  font-size: clamp(10px, 2.4vw, 13px);
  line-height: 1.35;
}

.title {
  margin: 4px auto 8px;
  max-width: min(560px, 96%);
  color: var(--poster-parchment);
  background: none;
  font-size: clamp(52px, 13vw, 96px);
  line-height: 0.78;
  letter-spacing: 0;
  transform: skewX(-7deg);
  -webkit-text-stroke: 1px rgba(4, 8, 5, 0.86);
  text-shadow:
    2px 2px 0 #2b2d19,
    5px 5px 0 rgba(0, 0, 0, 0.88),
    -1px -1px 0 rgba(238, 212, 154, 0.46),
    0 0 22px rgba(224, 189, 118, 0.12);
  filter: none;
}

.title span {
  display: block;
  margin-top: 10px;
  color: #778b4d;
  background: none;
  font-size: 0.95em;
  line-height: 0.72;
  letter-spacing: 0;
  transform: skewX(-9deg) rotate(-2deg);
  -webkit-text-stroke: 1px rgba(5, 10, 5, 0.88);
  text-shadow:
    2px 2px 0 #233018,
    5px 6px 0 rgba(0, 0, 0, 0.9),
    0 0 16px rgba(145, 163, 96, 0.16);
}

.subtitle {
  margin-top: auto;
  margin-bottom: 8px;
  color: var(--poster-sage);
  font-size: clamp(18px, 5vw, 28px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.86);
}

.subtitle::before,
.subtitle::after {
  content: "";
  display: inline-block;
  width: clamp(34px, 9vw, 72px);
  height: 2px;
  margin: 0 10px 0.32em;
  background: linear-gradient(90deg, transparent, var(--poster-gold), transparent);
}

.lede {
  max-width: 440px;
  margin: 0 auto 22px;
  color: rgba(240, 220, 174, 0.92);
  font-size: clamp(15px, 3.7vw, 20px);
  line-height: 1.45;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.92);
}

.teaser {
  width: 100%;
  margin-top: 18px;
  padding: 13px 10px 0;
  border-top: 1px solid rgba(224, 189, 118, 0.36);
  border-bottom: 0;
  color: var(--poster-sage);
  font-size: clamp(12px, 3.4vw, 17px);
  letter-spacing: 0.22em;
  line-height: 1.45;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.9);
}

.btn-row {
  width: 100%;
  gap: 16px;
}

.landing .btn-row,
.results .btn-row {
  display: grid;
  grid-template-columns: 1fr;
}

.btn {
  position: relative;
  min-height: 62px;
  padding: 16px 24px;
  border-radius: 0;
  border: 2px solid rgba(224, 189, 118, 0.78);
  background:
    linear-gradient(180deg, rgba(255, 236, 183, 0.12), rgba(0, 0, 0, 0.12)),
    linear-gradient(90deg, #10261a, #183522 50%, #10261a);
  color: var(--poster-parchment);
  font-size: clamp(16px, 4.2vw, 25px);
  font-weight: 900;
  letter-spacing: 0.16em;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.86);
  box-shadow:
    inset 0 0 0 4px rgba(5, 10, 6, 0.85),
    inset 0 0 0 6px rgba(224, 189, 118, 0.22),
    0 7px 0 rgba(0, 0, 0, 0.78),
    0 14px 22px rgba(0, 0, 0, 0.38);
  clip-path: polygon(20px 0, calc(100% - 20px) 0, 100% 20px, 100% calc(100% - 20px), calc(100% - 20px) 100%, 20px 100%, 0 calc(100% - 20px), 0 20px);
}

.btn::before,
.btn::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 7px;
  height: 7px;
  transform: translateY(-50%) rotate(45deg);
  background: var(--poster-gold-2);
  box-shadow: 0 0 0 2px rgba(5, 10, 6, 0.85);
  opacity: 0.82;
}

.btn::before { left: 18px; }
.btn::after { right: 18px; }

.btn:hover {
  transform: translateY(-2px);
  border-color: var(--poster-gold-2);
  box-shadow:
    inset 0 0 0 4px rgba(5, 10, 6, 0.85),
    inset 0 0 0 6px rgba(224, 189, 118, 0.34),
    0 7px 0 rgba(0, 0, 0, 0.78),
    0 0 28px rgba(224, 189, 118, 0.22);
}

.btn.primary {
  border-color: rgba(224, 189, 118, 0.92);
  background:
    linear-gradient(180deg, rgba(255, 241, 198, 0.14), rgba(0, 0, 0, 0.18)),
    linear-gradient(90deg, #11291b, #24472c 50%, #11291b);
  color: var(--poster-parchment);
  box-shadow:
    inset 0 0 0 4px rgba(5, 10, 6, 0.85),
    inset 0 0 0 7px rgba(224, 189, 118, 0.28),
    0 7px 0 rgba(0, 0, 0, 0.78),
    0 15px 22px rgba(0, 0, 0, 0.44);
}

.btn.lb {
  border-color: rgba(69, 45, 17, 0.82);
  background:
    linear-gradient(180deg, rgba(255, 245, 210, 0.24), rgba(81, 50, 19, 0.12)),
    linear-gradient(90deg, #947241, #d3b376 48%, #987142);
  color: #06110b;
  text-shadow: 0 1px 0 rgba(255, 237, 186, 0.42);
  box-shadow:
    inset 0 0 0 4px rgba(86, 56, 22, 0.55),
    inset 0 0 0 7px rgba(255, 238, 182, 0.26),
    0 7px 0 rgba(0, 0, 0, 0.76),
    0 15px 24px rgba(0, 0, 0, 0.38);
}

.btn.ghost {
  background:
    linear-gradient(180deg, rgba(216, 192, 138, 0.08), rgba(0, 0, 0, 0.18)),
    linear-gradient(90deg, #070a08, #111611 50%, #070a08);
  color: rgba(216, 192, 138, 0.82);
}

.btn.testdrive {
  border-color: rgba(224, 189, 118, 0.92);
  background:
    linear-gradient(180deg, rgba(255, 241, 198, 0.14), rgba(0, 0, 0, 0.18)),
    linear-gradient(90deg, #122b1c, #315a35 50%, #122b1c);
  color: var(--poster-parchment);
}

.btn.testdrive::before {
  content: "";
  margin: 0;
  font-size: 0;
}

.card h2 {
  margin: 8px 0 18px;
  color: var(--poster-parchment);
  font-size: clamp(32px, 8vw, 52px);
  line-height: 0.9;
  letter-spacing: 0.05em;
  -webkit-text-stroke: 1px rgba(4, 8, 5, 0.82);
  text-shadow:
    2px 2px 0 #2b2d19,
    5px 5px 0 rgba(0, 0, 0, 0.82),
    -1px -1px 0 rgba(238, 212, 154, 0.38);
}

.card h3 {
  color: var(--poster-sage-bright);
  letter-spacing: 0.16em;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.86);
}

.muted,
.res-line,
.controls-grid p,
.how-list li,
.car-desc {
  color: rgba(240, 220, 174, 0.84);
}

.how-list li {
  border-bottom: 1px solid rgba(224, 189, 118, 0.20);
}

.how-list b,
.res-grid .cell span {
  color: var(--poster-sage-bright);
}

.controls-grid > div,
.res-grid .cell,
.res-name,
.car-stats,
.board-head,
.board-row,
#bestEmpty {
  border: 1px solid rgba(224, 189, 118, 0.48);
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(216, 192, 138, 0.06), rgba(0, 0, 0, 0.18)),
    rgba(4, 10, 6, 0.74);
  box-shadow:
    inset 0 0 0 3px rgba(5, 10, 6, 0.72),
    inset 0 0 0 4px rgba(224, 189, 118, 0.16);
}

kbd {
  border: 1px solid rgba(224, 189, 118, 0.62);
  border-radius: 0;
  background: rgba(4, 10, 6, 0.8);
  color: var(--poster-parchment);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.82);
}

.car-stage {
  border: 2px solid rgba(224, 189, 118, 0.64);
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(216, 192, 138, 0.08), rgba(0, 0, 0, 0.32)),
    radial-gradient(300px 150px at 50% 70%, rgba(145, 163, 96, 0.16), transparent 70%),
    repeating-linear-gradient(0deg, transparent 0 18px, rgba(224, 189, 118, 0.055) 18px 19px),
    repeating-linear-gradient(90deg, transparent 0 28px, rgba(224, 189, 118, 0.045) 28px 29px),
    #050905;
  box-shadow:
    inset 0 0 0 5px rgba(5, 10, 6, 0.82),
    inset 0 0 0 7px rgba(224, 189, 118, 0.18),
    0 8px 0 rgba(0, 0, 0, 0.66);
  clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px);
}

.car-stage::before {
  top: 12px;
  border: 1px solid rgba(224, 189, 118, 0.82);
  background: rgba(5, 10, 6, 0.92);
  color: var(--poster-gold-2);
  letter-spacing: 0.16em;
  text-shadow: 0 2px 0 #000;
}

/* Cut-corner outline for the garage stage: a normal border is clipped away
   on the diagonal corners, so draw the four diagonal corner lines to finish
   the frame, same treatment as the cut-corner buttons. */
.car-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  --stage-cut: 16px;
  --stage-frame: rgba(224, 189, 118, 0.64);
  background:
    linear-gradient(135deg, transparent calc(50% - 1px), var(--stage-frame) 0 calc(50% + 1px), transparent 0) top left / var(--stage-cut) var(--stage-cut) no-repeat,
    linear-gradient(45deg, transparent calc(50% - 1px), var(--stage-frame) 0 calc(50% + 1px), transparent 0) top right / var(--stage-cut) var(--stage-cut) no-repeat,
    linear-gradient(135deg, transparent calc(50% - 1px), var(--stage-frame) 0 calc(50% + 1px), transparent 0) bottom right / var(--stage-cut) var(--stage-cut) no-repeat,
    linear-gradient(45deg, transparent calc(50% - 1px), var(--stage-frame) 0 calc(50% + 1px), transparent 0) bottom left / var(--stage-cut) var(--stage-cut) no-repeat;
}

.swatch {
  border: 2px solid rgba(224, 189, 118, 0.58);
  border-radius: 0;
  background: #050905;
  box-shadow:
    inset 0 0 0 3px rgba(5, 10, 6, 0.76),
    0 5px 0 rgba(0, 0, 0, 0.72);
}

.swatch.selected {
  border-color: var(--poster-gold-2);
  box-shadow:
    inset 0 0 0 3px rgba(5, 10, 6, 0.76),
    0 5px 0 rgba(0, 0, 0, 0.72),
    0 0 16px rgba(224, 189, 118, 0.28);
}

.swatch::after {
  border-color: var(--poster-sage-bright);
}

.car-color-name,
.car-stat-val,
.res-score strong,
.board-row b {
  color: var(--poster-gold-2);
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.88);
}

.car-stat-unit {
  color: var(--poster-red);
}

.car-stat-label {
  color: rgba(240, 220, 174, 0.72);
}

.car-stat-div {
  background: rgba(224, 189, 118, 0.34);
}

.res-progress-track {
  border: 1px solid rgba(224, 189, 118, 0.58);
  border-radius: 0;
  background: rgba(4, 10, 6, 0.82);
  box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.72);
}

.res-progress-track i {
  background: linear-gradient(90deg, #788a4c, #d8c08a);
}

#resName,
#resPhone,
#resInsta,
#saveReminderName,
#saveReminderPhone,
#saveReminderInsta {
  border: 1px solid rgba(224, 189, 118, 0.58);
  border-radius: 0;
  background: rgba(4, 10, 6, 0.86);
  color: var(--poster-parchment);
  box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.58);
}

.board-status {
  padding: 7px 12px;
}

.board-head {
  color: var(--poster-sage-bright);
}

.board-row {
  min-height: 52px;
  margin-top: 10px;
}

/* Podium tiers, 1st is the loudest, fading down through 2nd and 3rd. */
.board-row.rank-1 {
  border-color: rgba(224, 189, 118, 0.92);
  background:
    linear-gradient(90deg, rgba(224, 189, 118, 0.32), rgba(224, 189, 118, 0.06) 55%, transparent 78%),
    rgba(4, 10, 6, 0.82);
  box-shadow:
    inset 0 0 0 1px rgba(224, 189, 118, 0.35),
    0 0 18px rgba(224, 189, 118, 0.26);
}

.board-row.rank-2 {
  border-color: rgba(206, 212, 218, 0.7);
  background:
    linear-gradient(90deg, rgba(206, 212, 218, 0.18), rgba(206, 212, 218, 0.03) 52%, transparent 74%),
    rgba(4, 10, 6, 0.80);
  box-shadow: 0 0 10px rgba(206, 212, 218, 0.12);
}

.board-row.rank-3 {
  border-color: rgba(196, 132, 84, 0.62);
  background:
    linear-gradient(90deg, rgba(196, 132, 84, 0.13), rgba(196, 132, 84, 0.02) 50%, transparent 70%),
    rgba(4, 10, 6, 0.78);
}

.board-row > span:first-child {
  background: rgba(3, 6, 4, 0.9);
  border: 1px solid rgba(224, 189, 118, 0.6);
  color: var(--poster-gold-2);
}

/* Tier the rank badge + score to match the podium colour. */
.board-row.rank-1 > span:first-child {
  background: linear-gradient(180deg, #ffe9a8, #d8a85a);
  border-color: rgba(255, 233, 168, 0.95);
  color: #2a1c08;
}

.board-row.rank-2 > span:first-child {
  background: linear-gradient(180deg, #eef1f4, #b8c0c8);
  border-color: rgba(238, 241, 244, 0.9);
  color: #1c2228;
}

.board-row.rank-3 > span:first-child {
  background: linear-gradient(180deg, #e6a86a, #c48454);
  border-color: rgba(214, 150, 100, 0.9);
  color: #28140a;
}

.board-row.rank-1 b { color: #ffe19a; }
.board-row.rank-2 b { color: #e7edf2; }
.board-row.rank-3 b { color: #e9b485; }

.board-row .bdg {
  color: var(--poster-sage-bright);
}

.pause-screen,
.save-reminder {
  background:
    radial-gradient(700px 500px at 50% 45%, rgba(81, 63, 28, 0.24), transparent 65%),
    rgba(0, 0, 0, 0.88);
  backdrop-filter: none;
}

.save-reminder-card h3 {
  color: var(--poster-gold-2);
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.84);
}

@media (max-width: 560px) {
  .screen {
    padding: 10px;
  }

  .landing,
  .card {
    border-radius: 24px;
    border-width: 2px;
    box-shadow:
      0 16px 44px rgba(0, 0, 0, 0.72),
      inset 0 0 0 4px rgba(5, 10, 6, 0.92),
      inset 0 0 0 6px rgba(224, 189, 118, 0.46),
      inset 0 0 0 10px rgba(7, 17, 11, 0.96);
  }

  .landing {
    width: min(94vw, 430px);
    height: calc(100dvh - 20px);
    min-height: 720px;
    padding: 28px 22px 24px;
    background-position: center bottom;
  }

  .landing::before,
  .card::before {
    inset: 15px;
    border-radius: 16px;
  }

  .skoda-logo {
    height: 36px;
    margin-bottom: 15px;
  }

  .brand-tag {
    width: 87%;
    margin-bottom: 22px;
    padding: 8px 10px;
    font-size: 10px;
  }

  .title {
    font-size: clamp(44px, 13.2vw, 58px);
    line-height: 0.78;
  }

  .title span {
    margin-top: 8px;
  }

  .subtitle {
    font-size: clamp(17px, 4.6vw, 23px);
    margin-bottom: 7px;
  }

  .subtitle::before,
  .subtitle::after {
    width: 30px;
    margin-left: 7px;
    margin-right: 7px;
  }

  .lede {
    font-size: 15px;
    margin-bottom: 16px;
  }

  .btn-row {
    gap: 13px;
  }

  .btn {
    min-height: 58px;
    padding: 14px 22px;
    font-size: clamp(15px, 4.3vw, 22px);
    letter-spacing: 0.13em;
    clip-path: polygon(17px 0, calc(100% - 17px) 0, 100% 17px, 100% calc(100% - 17px), calc(100% - 17px) 100%, 17px 100%, 0 calc(100% - 17px), 0 17px);
  }

  .btn::before { left: 14px; }
  .btn::after { right: 14px; }

  .teaser {
    margin-top: 14px;
    font-size: 12px;
    letter-spacing: 0.18em;
  }

  .car-stage::before {
    top: 10px;
    font-size: 8px;
  }
}

/* =====================  POLISHED POSTER PLAQUE BUTTONS  ===================== */
.btn {
  overflow: hidden;
  min-height: 62px;
  border-radius: 15px;
  border: 1px solid rgba(224, 189, 118, 0.88);
  clip-path: none;
  background:
    linear-gradient(180deg, rgba(255, 241, 198, 0.12), rgba(255, 241, 198, 0.025) 34%, rgba(0, 0, 0, 0.18) 100%),
    linear-gradient(90deg, #102318, #203d28 48%, #102318);
  box-shadow:
    0 7px 0 rgba(0, 0, 0, 0.78),
    0 14px 24px rgba(0, 0, 0, 0.36),
    inset 0 0 0 4px rgba(4, 9, 5, 0.72),
    inset 0 0 0 6px rgba(224, 189, 118, 0.28),
    inset 0 18px 22px rgba(255, 238, 182, 0.045),
    inset 0 -18px 24px rgba(0, 0, 0, 0.25);
}

.btn::before {
  content: "";
  position: absolute;
  inset: 8px;
  width: auto;
  height: auto;
  transform: none;
  border-radius: 10px;
  border: 1px solid rgba(224, 189, 118, 0.48);
  background: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 241, 198, 0.14),
    inset 0 -1px 0 rgba(0, 0, 0, 0.42);
  opacity: 1;
  pointer-events: none;
}

.btn::after {
  content: "";
  position: absolute;
  inset: 2px;
  width: auto;
  height: 42%;
  transform: none;
  border-radius: 12px 12px 30px 30px / 12px 12px 18px 18px;
  background: linear-gradient(180deg, rgba(255, 246, 208, 0.12), rgba(255, 246, 208, 0));
  box-shadow: none;
  opacity: 0.8;
  pointer-events: none;
}

.btn:hover {
  border-color: rgba(238, 208, 142, 0.96);
  box-shadow:
    0 7px 0 rgba(0, 0, 0, 0.78),
    0 0 28px rgba(224, 189, 118, 0.18),
    inset 0 0 0 4px rgba(4, 9, 5, 0.72),
    inset 0 0 0 6px rgba(224, 189, 118, 0.38),
    inset 0 18px 22px rgba(255, 238, 182, 0.06),
    inset 0 -18px 24px rgba(0, 0, 0, 0.22);
}

.btn.primary,
.btn.testdrive {
  background:
    linear-gradient(180deg, rgba(255, 241, 198, 0.14), rgba(255, 241, 198, 0.03) 36%, rgba(0, 0, 0, 0.18) 100%),
    linear-gradient(90deg, #132a1d, #2c5132 48%, #132a1d);
  color: var(--poster-parchment);
}

.btn.lb {
  border-color: rgba(91, 61, 24, 0.72);
  background:
    linear-gradient(180deg, rgba(255, 250, 222, 0.24), rgba(255, 240, 198, 0.08) 38%, rgba(70, 40, 15, 0.20) 100%),
    linear-gradient(90deg, #957346, #d2b274 48%, #977345);
  color: #06110b;
  box-shadow:
    0 7px 0 rgba(0, 0, 0, 0.76),
    0 14px 24px rgba(0, 0, 0, 0.34),
    inset 0 0 0 4px rgba(91, 61, 24, 0.42),
    inset 0 0 0 6px rgba(255, 242, 199, 0.22),
    inset 0 18px 22px rgba(255, 250, 222, 0.10),
    inset 0 -18px 24px rgba(87, 55, 20, 0.18);
}

.btn.ghost {
  background:
    linear-gradient(180deg, rgba(216, 192, 138, 0.08), rgba(216, 192, 138, 0.02) 38%, rgba(0, 0, 0, 0.22) 100%),
    linear-gradient(90deg, #070a08, #151a13 48%, #070a08);
  color: rgba(216, 192, 138, 0.88);
}

.car-card .btn,
.pause-screen .btn {
  border-radius: 14px;
}

@media (max-width: 560px) {
  .btn {
    min-height: 58px;
    border-radius: 13px;
    clip-path: none;
  }

  .btn::before {
    inset: 7px;
    border-radius: 9px;
  }

  .btn::after {
    border-radius: 10px 10px 24px 24px / 10px 10px 16px 16px;
  }
}

/* =====================  LEADERBOARD SCROLL FIX  ===================== */
#screenBest .card {
  /* Full-bleed like every other screen (no side gap); the board itself is
     kept in a centred max-width column further down. */
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  max-height: min(860px, calc(100dvh - 24px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.board-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 14px;
  flex: 0 0 auto;
}

.board-top h2 {
  margin: 8px 0 10px;
  overflow-wrap: anywhere;
}

/* The status line and its refresh control share a row: the button belongs next
   to the thing it refreshes, and putting it here leaves .board-top's two-column
   grid (title | Back) alone, including the mobile reflow that reorders Back. */
.board-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex: 0 0 auto;
}

.board-status-row .board-status {
  margin: 0;
  min-width: 0;
}

/* Scoped to the row so it outranks the mobile `.btn { width: 100% }`, which
   otherwise makes this full width, pushes the status text onto its own line and
   wraps the icon and label onto two. Same class-vs-id lesson as the Instagram
   field: measure the rendered box, do not trust the declaration you just wrote. */
.board-status-row .board-refresh {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex: 0 0 auto;
  width: auto;
  white-space: nowrap;
  min-height: 38px;
  padding: 8px 14px;
  font-size: 12px;
  letter-spacing: 0.1em;
}

.board-refresh-icon {
  display: inline-block;
  font-size: 15px;
  line-height: 1;
}

/* Spun only while a fetch is genuinely in flight, so the animation means
   "loading" rather than decoration. */
.board-status-row .board-refresh.is-busy .board-refresh-icon {
  animation: board-refresh-spin 0.7s linear infinite;
}

.board-status-row .board-refresh[disabled] {
  opacity: 0.6;
  pointer-events: none;
}

@keyframes board-refresh-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .board-status-row .board-refresh.is-busy .board-refresh-icon { animation: none; }
}

.board-back {
  width: auto;
  min-width: 104px;
  min-height: 46px;
  margin-top: 4px;
  padding: 10px 16px;
  font-size: 13px;
  letter-spacing: 0.12em;
}

#screenBest .board-status,
#screenBest .board-head {
  flex: 0 0 auto;
}

#screenBest .board-head {
  position: relative;
  z-index: 2;
  margin-top: 10px;
  margin-bottom: 0;
}

.board-scroll {
  flex: 1 1 auto;
  min-height: 132px;
  max-height: clamp(220px, 52dvh, 520px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 10px 4px 4px;
  margin: 0 -4px;
  scrollbar-color: rgba(224, 189, 118, 0.78) rgba(3, 6, 4, 0.55);
  scrollbar-width: thin;
}

.board-scroll::-webkit-scrollbar {
  width: 8px;
}

.board-scroll::-webkit-scrollbar-track {
  background: rgba(3, 6, 4, 0.62);
  border-left: 1px solid rgba(224, 189, 118, 0.18);
}

.board-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(224, 189, 118, 0.9), rgba(145, 115, 62, 0.9));
  border-radius: 999px;
}

.board-list {
  margin-bottom: 0;
}

#screenBest #bestEmpty {
  margin: 10px 0 0;
}

@media (max-width: 560px) {
  #screenBest .card {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    max-height: calc(100dvh - 20px);
    padding-top: 24px;
    padding-bottom: 18px;
  }

  .board-top {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .board-top h2 {
    margin: 2px 0 0;
    font-size: clamp(31px, 9vw, 44px);
  }

  .board-back {
    order: -1;
    justify-self: start;
    min-width: 92px;
    min-height: 42px;
    margin: 0;
    padding: 9px 14px;
    font-size: 12px;
  }

  .board-scroll {
    max-height: clamp(260px, 54dvh, 520px);
    padding-top: 8px;
  }
}

/* =====================  MOBILE SAFE SCROLL + LOADING  ===================== */
.screen {
  padding:
    max(10px, env(safe-area-inset-top))
    max(10px, env(safe-area-inset-right))
    max(14px, env(safe-area-inset-bottom))
    max(10px, env(safe-area-inset-left));
}

.screen-inner,
.save-reminder-card {
  max-height: calc(100dvh - max(24px, env(safe-area-inset-top)) - max(28px, env(safe-area-inset-bottom)));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  scrollbar-color: rgba(224, 189, 118, 0.78) rgba(3, 6, 4, 0.55);
  scrollbar-width: thin;
}

.screen-inner::-webkit-scrollbar,
.save-reminder-card::-webkit-scrollbar {
  width: 7px;
}

.screen-inner::-webkit-scrollbar-track,
.save-reminder-card::-webkit-scrollbar-track {
  background: rgba(3, 6, 4, 0.58);
}

.screen-inner::-webkit-scrollbar-thumb,
.save-reminder-card::-webkit-scrollbar-thumb {
  background: rgba(224, 189, 118, 0.78);
  border-radius: 999px;
}

.landing {
  height: auto;
  min-height: 0;
  max-height: calc(100dvh - max(20px, env(safe-area-inset-top)) - max(24px, env(safe-area-inset-bottom)));
  padding-bottom: max(24px, env(safe-area-inset-bottom));
}

#screenCar .card {
  max-height: calc(100dvh - max(20px, env(safe-area-inset-top)) - max(24px, env(safe-area-inset-bottom)));
}

#screenCar .brand-tag {
  margin-bottom: clamp(8px, 1.8vh, 16px);
}

#screenCar h2 {
  margin-bottom: clamp(10px, 1.8vh, 18px);
}

#screenCar .car-stage {
  margin-top: 0;
  margin-bottom: clamp(8px, 1.7vh, 14px);
}

#screenCar #carPreview {
  max-width: min(100%, 340px);
}

#screenCar .car-colors {
  gap: clamp(8px, 2.4vw, 12px);
  margin-top: clamp(5px, 1.2vh, 10px);
}

#screenCar .swatch {
  width: clamp(34px, 9.2vw, 42px);
  height: clamp(34px, 9.2vw, 42px);
}

#screenCar .car-color-name {
  margin-bottom: clamp(7px, 1.4vh, 12px);
}

#screenCar .car-stats {
  margin-bottom: clamp(12px, 2vh, 20px);
}

.loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 180;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(420px 280px at 50% 50%, rgba(224, 189, 118, 0.12), transparent 68%),
    rgba(0, 0, 0, 0.72);
  opacity: 1;
  pointer-events: auto;
}

.loading-overlay.hidden {
  display: none;
}

.loading-plaque {
  width: min(320px, 82vw);
  border: 1px solid rgba(224, 189, 118, 0.84);
  border-radius: 15px;
  padding: 18px 18px 16px;
  color: var(--poster-parchment);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 13px;
  font-weight: 900;
  background:
    linear-gradient(180deg, rgba(255, 241, 198, 0.10), rgba(0, 0, 0, 0.18)),
    linear-gradient(90deg, #102318, #203d28 48%, #102318);
  box-shadow:
    0 16px 42px rgba(0, 0, 0, 0.62),
    inset 0 0 0 4px rgba(4, 9, 5, 0.72),
    inset 0 0 0 6px rgba(224, 189, 118, 0.24);
}

.loading-plaque i {
  display: block;
  height: 6px;
  margin-top: 13px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(3, 6, 4, 0.82);
  box-shadow: inset 0 0 0 1px rgba(224, 189, 118, 0.32);
}

.loading-plaque i::before {
  content: "";
  display: block;
  width: 42%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, var(--poster-gold-2), transparent);
  animation: loadingSweep 0.72s linear infinite;
}

@keyframes loadingSweep {
  from { transform: translateX(-105%); }
  to { transform: translateX(245%); }
}

@media (max-width: 560px) {
  .screen {
    align-items: stretch;
  }

  .screen-inner,
  .save-reminder-card {
    width: min(94vw, 430px);
    margin: auto;
    max-height: calc(100dvh - max(18px, env(safe-area-inset-top)) - max(22px, env(safe-area-inset-bottom)));
  }

  .landing {
    width: min(94vw, 430px);
    height: auto;
    min-height: 0;
    padding: clamp(22px, 3.4vh, 28px) 20px max(22px, env(safe-area-inset-bottom));
  }

  .skoda-logo {
    height: clamp(28px, 5.2vh, 36px);
    margin-bottom: clamp(9px, 1.8vh, 15px);
  }

  .brand-tag {
    margin-bottom: clamp(12px, 2.1vh, 22px);
  }

  .title {
    font-size: clamp(39px, 12vw, 56px);
  }

  .subtitle {
    margin-top: clamp(70px, 15vh, 150px);
  }

  .btn {
    min-height: clamp(50px, 7.1vh, 58px);
    padding-top: 11px;
    padding-bottom: 11px;
  }

  .teaser {
    padding-top: 10px;
  }
}

@media (max-height: 780px) and (max-width: 560px) {
  .landing {
    padding-top: 18px;
  }

  .title {
    font-size: clamp(35px, 11vw, 48px);
  }

  .subtitle {
    margin-top: clamp(42px, 9vh, 82px);
  }

  .lede {
    font-size: 13px;
    margin-bottom: 12px;
  }

  .btn-row {
    gap: 9px;
  }

  .btn {
    min-height: 48px;
    font-size: clamp(13px, 3.9vw, 18px);
  }

  .teaser {
    margin-top: 10px;
    font-size: 10px;
  }

  #screenCar .card {
    padding: 18px 14px 16px;
  }

  #screenCar h2 {
    font-size: clamp(25px, 7.1vw, 34px);
  }

  #screenCar .car-stage {
    padding: 4px;
    margin-bottom: 6px;
  }

  #screenCar .car-stage::before {
    top: 7px;
    font-size: 7px;
    padding: 3px 8px;
  }

  #screenCar #carPreview {
    max-width: min(100%, 270px);
  }

  #screenCar .swatch {
    width: 31px;
    height: 31px;
  }

  #screenCar .car-color-name {
    font-size: 12px;
    margin-bottom: 6px;
  }

  #screenCar .car-stats {
    padding: 8px 4px;
    margin-bottom: 10px;
  }

  #screenCar .car-stat-val {
    font-size: 24px;
  }

  #screenCar .car-stat-unit,
  #screenCar .car-stat-label {
    font-size: 8px;
  }

  #screenCar .btn {
    min-height: 47px;
    font-size: 13px;
  }
}

/* =====================  COMPACT LEADERBOARD DENSITY  ===================== */
#screenBest .card {
  padding-top: clamp(18px, 2.6vh, 26px);
  padding-bottom: clamp(14px, 2.2vh, 22px);
  align-items: center;
}

/* The panel is full-bleed, so keep the board itself in a centred column
   (and aligned across header + rows) instead of stretching edge to edge. */
#screenBest .board-top,
#screenBest .board-status-row,
#screenBest .board-head,
#screenBest .board-scroll {
  width: 100%;
  max-width: min(600px, 94vw);
  margin-left: auto;
  margin-right: auto;
}

/* The status line is now a flex child of .board-status-row, so the width and
   centering above belong to the ROW. Left on the paragraph they made it full
   width inside the row, which shoved the Refresh button clean off the screen. */
#screenBest .board-status-row .board-status {
  width: auto;
  max-width: none;
  margin: 0;
}

#screenBest .board-top {
  gap: 10px;
}

#screenBest .board-top h2 {
  margin-bottom: 4px;
  font-size: clamp(30px, 7vw, 46px);
}

#screenBest .board-back {
  min-height: 38px;
  min-width: 86px;
  padding: 7px 13px;
}

#screenBest .board-status {
  margin-bottom: 7px;
  padding: 5px 10px;
}

#screenBest .board-head,
#screenBest .board-row {
  grid-template-columns: 34px minmax(0, 1fr) minmax(72px, auto) minmax(64px, 88px);
  gap: 7px;
  padding: 7px 8px;
}

#screenBest .board-head {
  margin-top: 6px;
  font-size: 10px;
}

#screenBest .board-scroll {
  max-height: clamp(280px, 62dvh, 620px);
  padding-top: 6px;
}

#screenBest .board-row {
  min-height: 38px;
  margin-top: 6px;
  font-size: 12px;
}

#screenBest .board-row > span:first-child {
  width: 24px;
  height: 24px;
  font-size: 12px;
}

#screenBest .board-row b {
  font-size: 13px;
}

#screenBest .board-row .bdg {
  font-size: 10px;
}

@media (max-width: 560px) {
  #screenBest .card {
    padding: 18px 14px 14px;
  }

  #screenBest .board-top {
    gap: 4px;
  }

  #screenBest .board-top h2 {
    font-size: clamp(27px, 8.1vw, 38px);
    margin-bottom: 2px;
  }

  #screenBest .board-back {
    min-height: 36px;
    min-width: 82px;
    padding: 6px 12px;
    font-size: 11px;
  }

  #screenBest .board-status {
    margin: 4px 0 5px;
    padding: 5px 9px;
    font-size: 10px;
  }

  #screenBest .board-head,
  #screenBest .board-row {
    grid-template-columns: 28px minmax(0, 1fr) 70px;
    gap: 6px;
    padding: 6px 7px;
  }

  #screenBest .board-scroll {
    max-height: clamp(320px, 64dvh, 620px);
    padding-top: 5px;
  }

  #screenBest .board-row {
    min-height: 34px;
    margin-top: 5px;
    font-size: 12px;
  }

  #screenBest .board-row > span:first-child {
    width: 22px;
    height: 22px;
    font-size: 11px;
  }

  #screenBest .board-row b {
    font-size: 12px;
  }
}

/* =====================  CIRCULAR GLOSSY PAINT SWATCHES  =====================
   Restore the older "sphere" colour swatches. Authoritative #screenCar-scoped
   block (id specificity) so it beats every earlier square `.swatch` override
   (clip-path corners, square gold border lines). Size/spacing still come from
   the existing #screenCar .swatch rules. */
#screenCar .swatch {
  border: 0;
  border-radius: 50%;
  background: none;
  box-shadow: none;
  clip-path: none;
}

#screenCar .swatch::before {
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(60% 55% at 34% 28%, var(--spec, #fff), transparent 60%),
    radial-gradient(120% 120% at 50% 50%, var(--swatch, #888), #0a0a12 140%);
  box-shadow:
    inset 0 -3px 6px rgba(0, 0, 0, 0.45),
    inset 0 2px 3px rgba(255, 255, 255, 0.25),
    0 2px 6px rgba(0, 0, 0, 0.4);
}

#screenCar .swatch::after {
  inset: -5px;
  border-radius: 50%;
  border: 2px solid var(--spec, #fff);
}

#screenCar .swatch.selected {
  border-color: transparent;
  box-shadow: none;
}

#screenCar .swatch.selected::before {
  box-shadow:
    inset 0 -3px 6px rgba(0, 0, 0, 0.45),
    inset 0 2px 3px rgba(255, 255, 255, 0.3),
    0 0 14px var(--spec, #fff),
    0 2px 8px rgba(0, 0, 0, 0.5);
}

/* =====================  FULL-BLEED ADAPTIVE UI, NO PANEL BORDER  =============
   The menu panels now fill the whole screen (no letterbox margins) and the
   layered heritage frame is removed so the UI no longer carries a gold
   viewport outline. */
.screen {
  padding: 0;
  align-items: stretch;
  justify-content: stretch;
}

/* kill the decorative outer screen frames (multi-ring insets) */
.screen::after,
#screenLanding::after,
#screenLanding::before {
  box-shadow: none !important;
}

/* one panel, filling the viewport, with no decorative border line */
.screen-inner,
.landing,
.card {
  width: 100%;
  max-width: none;
  min-height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 0;
  border-radius: 0;
  clip-path: none;
  box-shadow: none;
}

/* remove the secondary inner border lines (the extra hairline frames) */
.landing::before,
.card::before,
.landing::after,
.card::after {
  content: none !important;
}

/* =====================  BUTTON CORNER FRAMES  =====================
   Cut-corner buttons need their own polygon frame; a normal CSS border is
   clipped away on the diagonal corners and leaves the sharp edges unfinished. */
.btn,
.icon-btn,
.action-btn {
  --button-cut: 16px;
  --button-frame: rgba(238, 208, 142, 0.96);
  --button-frame-hover: rgba(255, 228, 164, 1);
  position: relative;
  isolation: isolate;
  border-radius: 0;
  border: 3px solid var(--button-frame);
  clip-path: polygon(
    var(--button-cut) 0,
    calc(100% - var(--button-cut)) 0,
    100% var(--button-cut),
    100% calc(100% - var(--button-cut)),
    calc(100% - var(--button-cut)) 100%,
    var(--button-cut) 100%,
    0 calc(100% - var(--button-cut)),
    0 var(--button-cut)
  );
}

.btn.primary,
.btn.testdrive {
  --button-frame: rgba(238, 208, 142, 0.98);
}

.btn.lb {
  --button-frame: rgba(59, 37, 12, 0.92);
  --button-frame-hover: rgba(34, 22, 8, 0.98);
}

.btn.ghost {
  --button-frame: rgba(224, 189, 118, 0.84);
}

.icon-btn {
  --button-cut: 8px;
  --button-frame: #6e3a78;
  --button-frame-hover: #8f58a0;
  border-color: var(--button-frame) !important;
}

.action-btn {
  --button-cut: 9px;
  --button-frame: #6e3a78;
  --button-frame-hover: #8f58a0;
  border-color: var(--button-frame) !important;
}

.action-btn.boost {
  --button-frame: #ffb35f;
  --button-frame-hover: #ffd18c;
  border-color: var(--button-frame) !important;
}

.btn:hover,
.icon-btn:hover,
.action-btn:hover {
  border-color: var(--button-frame-hover) !important;
}

@supports (-webkit-mask: linear-gradient(#000 0 0)) or (mask: linear-gradient(#000 0 0)) {
  .btn,
  .icon-btn,
  .action-btn {
    border: 0 !important;
  }

  .btn::before,
  .icon-btn::before,
  .action-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    padding: 3px;
    pointer-events: none;
    background: var(--button-frame);
    clip-path: inherit;
    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    mask-composite: exclude;
  }

  .btn:hover::before,
  .icon-btn:hover::before,
  .action-btn:hover::before {
    background: var(--button-frame-hover);
  }

  .btn::after,
  .icon-btn::after,
  .action-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    transform: none;
    z-index: 3;
    border-radius: 0;
    pointer-events: none;
    opacity: 1;
    background:
      linear-gradient(135deg, transparent calc(50% - 2px), var(--button-frame) 0 calc(50% + 2px), transparent 0) top left / var(--button-cut) var(--button-cut) no-repeat,
      linear-gradient(45deg, transparent calc(50% - 2px), var(--button-frame) 0 calc(50% + 2px), transparent 0) top right / var(--button-cut) var(--button-cut) no-repeat,
      linear-gradient(135deg, transparent calc(50% - 2px), var(--button-frame) 0 calc(50% + 2px), transparent 0) bottom right / var(--button-cut) var(--button-cut) no-repeat,
      linear-gradient(45deg, transparent calc(50% - 2px), var(--button-frame) 0 calc(50% + 2px), transparent 0) bottom left / var(--button-cut) var(--button-cut) no-repeat;
    box-shadow: none;
  }

  .btn:hover::after,
  .icon-btn:hover::after,
  .action-btn:hover::after {
    background:
      linear-gradient(135deg, transparent calc(50% - 2px), var(--button-frame-hover) 0 calc(50% + 2px), transparent 0) top left / var(--button-cut) var(--button-cut) no-repeat,
      linear-gradient(45deg, transparent calc(50% - 2px), var(--button-frame-hover) 0 calc(50% + 2px), transparent 0) top right / var(--button-cut) var(--button-cut) no-repeat,
      linear-gradient(135deg, transparent calc(50% - 2px), var(--button-frame-hover) 0 calc(50% + 2px), transparent 0) bottom right / var(--button-cut) var(--button-cut) no-repeat,
      linear-gradient(45deg, transparent calc(50% - 2px), var(--button-frame-hover) 0 calc(50% + 2px), transparent 0) bottom left / var(--button-cut) var(--button-cut) no-repeat;
  }
}

@media (min-width: 900px) {
  .touch { display: none !important; }
}

/* =====================  SKODA OFFICIAL BRAND SWEEP  =====================
   Current Skoda CI uses Emerald Green (#0E3A2F) and Electric Green (#78FAAE).
   This final layer intentionally wins over the older retro/poster skins so the
   full UI reads as one branded system. */
:root {
  --skoda-emerald: #0e3a2f;
  --skoda-emerald-deep: #020806;
  --skoda-emerald-dark: #07140e;
  --skoda-emerald-mid: #145646;
  --skoda-electric: #78faae;
  --skoda-electric-soft: #b9ffd6;
  --skoda-mist: #f4fff8;
  --skoda-silver: #c8d8cf;
  --skoda-muted: #8fb6a5;
  --emerald: var(--skoda-emerald);
  --emerald-glass: rgba(14, 58, 47, 0.72);
  --navy-glass: rgba(2, 8, 6, 0.62);
  --emerald-deep: var(--skoda-emerald-deep);
  --electric: var(--skoda-electric);
  --bg: var(--skoda-emerald-deep);
  --bg2: var(--skoda-emerald);
  --ink: var(--skoda-mist);
  --muted: var(--skoda-muted);
  --silver: var(--skoda-silver);
  --accent: var(--skoda-electric);
  --gold: var(--skoda-electric);
  --good: var(--skoda-electric);
  --poster-black: var(--skoda-emerald-deep);
  --poster-ink: var(--skoda-emerald-dark);
  --poster-green: var(--skoda-emerald);
  --poster-green-2: var(--skoda-emerald-mid);
  --poster-sage: var(--skoda-electric);
  --poster-sage-bright: var(--skoda-electric-soft);
  --poster-parchment: var(--skoda-mist);
  --poster-gold: var(--skoda-electric);
  --poster-gold-2: var(--skoda-electric);
  --poster-shadow: #010403;
  --poster-red: var(--skoda-electric-soft);
  --retro-void: var(--skoda-emerald-deep);
  --retro-panel: var(--skoda-emerald-dark);
  --retro-panel-2: var(--skoda-emerald);
  --retro-purple: var(--skoda-emerald-mid);
  --retro-purple-hot: var(--skoda-electric);
  --retro-green: var(--skoda-electric);
  --retro-mint: var(--skoda-electric-soft);
  --retro-cream: var(--skoda-mist);
  --retro-gold: var(--skoda-electric);
  --retro-orange: var(--skoda-electric-soft);
  --retro-red: var(--skoda-electric);
}

html,
body,
#app {
  /* The vertical ramp starts and ends on the deep emerald-black so the very top
     and bottom edges, the iOS safe-area insets and the Safari toolbar band,
     read as one clean dark colour instead of a bright off-green bar. The emerald
     brand glow now lives just below the notch and as a centred radial accent. */
  background:
    radial-gradient(900px 640px at 50% 20%, rgba(120, 250, 174, 0.16), transparent 60%),
    radial-gradient(1000px 760px at 50% 104%, rgba(14, 58, 47, 0.55), transparent 64%),
    linear-gradient(180deg, #020806 0%, #0a241b 7%, #0e3a2f 30%, #0a2017 72%, #020806 100%);
  color: var(--skoda-mist);
}

.desktop-block,
.screen,
.pause-screen,
.save-reminder,
.loading-overlay {
  background:
    radial-gradient(720px 520px at 50% 38%, rgba(120, 250, 174, 0.16), transparent 66%),
    radial-gradient(900px 680px at 50% 100%, rgba(20, 86, 70, 0.40), transparent 70%),
    linear-gradient(180deg, #020806 0%, #0a241b 7%, #0e3a2f 34%, #0a2017 74%, #020806 100%);
  /* Re-assert a solid deep fill (the shorthand above clears background-color):
     iOS paints the safe-area band of a full-bleed screen with this colour. */
  background-color: #020806;
}

.screen::before {
  background:
    radial-gradient(circle at 16% 20%, rgba(120, 250, 174, 0.14) 0 1px, transparent 1.6px),
    radial-gradient(circle at 82% 30%, rgba(185, 255, 214, 0.10) 0 1px, transparent 1.6px),
    repeating-linear-gradient(0deg, rgba(120, 250, 174, 0.026) 0 1px, transparent 1px 5px),
    linear-gradient(90deg, rgba(120, 250, 174, 0.06), transparent 22%, transparent 78%, rgba(120, 250, 174, 0.06));
  background-size: 180px 180px, 240px 240px, auto, auto;
  opacity: 0.85;
}

.landing,
.card {
  color: var(--skoda-mist);
  background:
    linear-gradient(180deg, rgba(2, 8, 6, 0.16), rgba(2, 8, 6, 0.38) 52%, rgba(2, 8, 6, 0.94)),
    linear-gradient(135deg, rgba(120, 250, 174, 0.18), rgba(14, 58, 47, 0.86) 44%, rgba(2, 8, 6, 0.98)),
    url("assets/ui/vintage-route-poster.webp") center / cover no-repeat;
  background-blend-mode: normal, normal, luminosity;
}

.card {
  background:
    radial-gradient(560px 300px at 50% 18%, rgba(120, 250, 174, 0.13), transparent 66%),
    linear-gradient(180deg, rgba(14, 58, 47, 0.96), rgba(2, 8, 6, 0.98)),
    url("assets/ui/vintage-route-poster.webp") center bottom / cover no-repeat;
  background-blend-mode: normal, normal, luminosity;
}

.skoda-logo,
.skoda-logo.card-logo {
  --skoda-logo-color: var(--skoda-electric);
  filter:
    drop-shadow(0 2px 0 rgba(0, 0, 0, 0.82))
    drop-shadow(0 0 18px rgba(120, 250, 174, 0.38));
  opacity: 1;
}

.brand-tag,
.board-status,
.res-name label {
  border-color: rgba(120, 250, 174, 0.66);
  background:
    linear-gradient(90deg, transparent, rgba(14, 58, 47, 0.94) 8%, rgba(14, 58, 47, 0.94) 92%, transparent),
    rgba(120, 250, 174, 0.06);
  color: var(--skoda-electric-soft);
  box-shadow:
    inset 0 0 0 1px rgba(2, 8, 6, 0.92),
    0 1px 0 rgba(120, 250, 174, 0.32);
}

.title,
.card h2 {
  color: var(--skoda-mist);
  -webkit-text-stroke: 1px rgba(2, 8, 6, 0.86);
  text-shadow:
    2px 2px 0 var(--skoda-emerald),
    5px 5px 0 rgba(0, 0, 0, 0.86),
    0 0 26px rgba(120, 250, 174, 0.22);
}

.title span,
.subtitle,
.teaser,
.card h3,
.how-list b,
.res-grid .cell span,
.board-head,
.board-row .bdg,
.car-color-name,
.car-stat-val,
.res-score strong,
.board-row b,
.save-reminder-card h3,
.floater.gold {
  color: var(--skoda-electric) !important;
}

.lede,
.muted,
.res-line,
.controls-grid p,
.how-list li,
.car-desc,
.car-stat-label {
  color: rgba(244, 255, 248, 0.82);
}

.subtitle::before,
.subtitle::after,
.res-progress-track i {
  background: linear-gradient(90deg, transparent, var(--skoda-electric), transparent);
}

.teaser,
.how-list li {
  border-color: rgba(120, 250, 174, 0.24);
}

.btn,
.icon-btn,
.action-btn {
  --button-frame: rgba(120, 250, 174, 0.82);
  --button-frame-hover: rgba(185, 255, 214, 0.98);
}

.btn {
  border-color: rgba(120, 250, 174, 0.72);
  background:
    linear-gradient(180deg, rgba(185, 255, 214, 0.11), rgba(120, 250, 174, 0.025) 36%, rgba(0, 0, 0, 0.18) 100%),
    linear-gradient(90deg, #07140e, #145646 48%, #07140e);
  color: var(--skoda-mist);
  box-shadow:
    0 7px 0 rgba(0, 0, 0, 0.78),
    0 14px 24px rgba(0, 0, 0, 0.36),
    inset 0 0 0 4px rgba(2, 8, 6, 0.72),
    inset 0 0 0 6px rgba(120, 250, 174, 0.22),
    inset 0 18px 22px rgba(185, 255, 214, 0.045),
    inset 0 -18px 24px rgba(0, 0, 0, 0.25);
}

.btn:hover {
  border-color: rgba(185, 255, 214, 0.98);
  box-shadow:
    0 7px 0 rgba(0, 0, 0, 0.78),
    0 0 30px rgba(120, 250, 174, 0.28),
    inset 0 0 0 4px rgba(2, 8, 6, 0.72),
    inset 0 0 0 6px rgba(120, 250, 174, 0.34),
    inset 0 18px 22px rgba(185, 255, 214, 0.08),
    inset 0 -18px 24px rgba(0, 0, 0, 0.22);
}

.btn.primary,
.btn.testdrive,
.action-btn.boost {
  --button-frame: rgba(120, 250, 174, 0.96);
  --button-frame-hover: rgba(185, 255, 214, 1);
  background:
    linear-gradient(180deg, rgba(244, 255, 248, 0.34), rgba(120, 250, 174, 0.92) 42%, rgba(66, 210, 128, 0.96)),
    var(--skoda-electric);
  color: var(--skoda-emerald-deep);
  text-shadow: 0 1px 0 rgba(244, 255, 248, 0.5);
}

.btn.lb,
.btn.ghost {
  --button-frame: rgba(120, 250, 174, 0.62);
  background:
    linear-gradient(180deg, rgba(120, 250, 174, 0.10), rgba(0, 0, 0, 0.20)),
    linear-gradient(90deg, #020806, #0e3a2f 48%, #020806);
  color: var(--skoda-electric-soft);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.84);
}

.btn::before {
  border-color: rgba(120, 250, 174, 0.44);
  box-shadow:
    inset 0 1px 0 rgba(244, 255, 248, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.42);
}

.btn::after {
  background: linear-gradient(180deg, rgba(244, 255, 248, 0.12), rgba(244, 255, 248, 0));
}

.controls-grid > div,
.res-grid .cell,
.res-name,
.car-stats,
.board-head,
.board-row,
#bestEmpty,
.car-stage,
.res-progress-track,
#resName,
#resPhone,
#resInsta,
#saveReminderName,
#saveReminderPhone,
#saveReminderInsta,
kbd,
.loading-plaque {
  border-color: rgba(120, 250, 174, 0.52);
  background:
    linear-gradient(180deg, rgba(120, 250, 174, 0.07), rgba(0, 0, 0, 0.18)),
    rgba(2, 8, 6, 0.76);
  color: var(--skoda-mist);
  box-shadow:
    inset 0 0 0 3px rgba(2, 8, 6, 0.72),
    inset 0 0 0 4px rgba(120, 250, 174, 0.14);
}

.car-stage {
  background:
    linear-gradient(180deg, rgba(120, 250, 174, 0.08), rgba(0, 0, 0, 0.34)),
    radial-gradient(320px 160px at 50% 70%, rgba(120, 250, 174, 0.16), transparent 70%),
    repeating-linear-gradient(0deg, transparent 0 18px, rgba(120, 250, 174, 0.052) 18px 19px),
    repeating-linear-gradient(90deg, transparent 0 28px, rgba(120, 250, 174, 0.042) 28px 29px),
    #020806;
}

.car-stage::before {
  border-color: rgba(120, 250, 174, 0.82);
  background: rgba(2, 8, 6, 0.92);
  color: var(--skoda-electric);
}

.car-stage::after {
  --stage-frame: rgba(120, 250, 174, 0.64);
}

.swatch,
.swatch.selected,
.swatch::after {
  border-color: rgba(120, 250, 174, 0.68);
}

.swatch.selected::before {
  box-shadow:
    inset 0 -3px 6px rgba(0, 0, 0, 0.45),
    inset 0 2px 3px rgba(255, 255, 255, 0.3),
    0 0 16px rgba(120, 250, 174, 0.72),
    0 2px 8px rgba(0, 0, 0, 0.5);
}

.car-stat-unit {
  color: var(--skoda-electric-soft);
}

.car-stat-div {
  background: rgba(120, 250, 174, 0.34);
}

.res-progress-track i {
  background: linear-gradient(90deg, var(--skoda-emerald-mid), var(--skoda-electric));
}

.board-row.rank-1,
.board-row.rank-2,
.board-row.rank-3 {
  border-color: rgba(120, 250, 174, 0.72);
  background:
    linear-gradient(90deg, rgba(120, 250, 174, 0.20), rgba(120, 250, 174, 0.04) 58%, transparent 80%),
    rgba(2, 8, 6, 0.82);
  box-shadow:
    inset 0 0 0 1px rgba(120, 250, 174, 0.22),
    0 0 16px rgba(120, 250, 174, 0.18);
}

.board-row > span:first-child,
.board-row.rank-1 > span:first-child,
.board-row.rank-2 > span:first-child,
.board-row.rank-3 > span:first-child {
  background: linear-gradient(180deg, var(--skoda-electric-soft), var(--skoda-electric));
  border-color: rgba(185, 255, 214, 0.9);
  color: var(--skoda-emerald-deep);
}

.board-row.rank-1 b,
.board-row.rank-2 b,
.board-row.rank-3 b {
  color: var(--skoda-electric);
}

.hud-block,
.meter,
.icon-btn,
.action-btn,
.tut-hint,
.phase-banner {
  background: rgba(2, 8, 6, 0.82) !important;
  border-color: rgba(120, 250, 174, 0.62) !important;
  box-shadow:
    0 5px 0 rgba(0, 0, 0, 0.72),
    inset 0 0 0 3px rgba(14, 58, 47, 0.78),
    inset 0 -7px 0 rgba(0, 0, 0, 0.36) !important;
}

.hud-label,
.meter-label,
.hud-phase .hud-label,
.hud-route-label,
.hud-route-codes,
.tut-text b,
.phase-banner span,
.level-title-sub {
  color: var(--skoda-electric) !important;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.82);
}

.hud-value,
.hud-value small,
.hud-timer,
.phase-banner strong,
.level-title-name,
.tut-text,
.touch-steer span {
  color: var(--skoda-mist) !important;
  text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.82), 0 0 18px rgba(120, 250, 174, 0.20);
}

.meter-bar,
.hud-progress {
  border-color: rgba(120, 250, 174, 0.62) !important;
  background: repeating-linear-gradient(90deg, #020806 0 10px, #07140e 10px 14px) !important;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.82);
}

.meter-fill.health,
.hud-progress-fill {
  background: repeating-linear-gradient(90deg, #78faae 0 10px, #40d982 10px 14px) !important;
}

/* Boost meter reads orange (distinct from the green health/route bars). */
.meter-fill.boost {
  background: repeating-linear-gradient(90deg, #ff9a2e 0 10px, #f06a12 10px 14px) !important;
}

.hud-combo span,
.score-pop {
  color: var(--skoda-electric);
  text-shadow: 0 0 22px rgba(120, 250, 174, 0.62);
}

.race-end-rule {
  background: linear-gradient(90deg,
    rgba(120, 250, 174, 0) 0%, rgba(120, 250, 174, 0.46) 22%,
    rgba(185, 255, 214, 0.9) 50%, rgba(120, 250, 174, 0.46) 78%, rgba(120, 250, 174, 0) 100%);
  box-shadow: 0 0 12px rgba(120, 250, 174, 0.42);
}

.loading-plaque i {
  box-shadow: inset 0 0 0 1px rgba(120, 250, 174, 0.32);
}

/* Touch controls need strong muscle-memory separation without breaking the
   green brand system. */
.touch-actions {
  bottom: max(18px, env(safe-area-inset-bottom));
  padding: 0 clamp(18px, 5vw, 28px);
}

#btnBrake {
  --button-frame: rgba(120, 250, 174, 0.78);
  --button-frame-hover: rgba(185, 255, 214, 0.96);
  background:
    linear-gradient(180deg, rgba(120, 250, 174, 0.11), rgba(0, 0, 0, 0.18)),
    linear-gradient(135deg, #020806, #0e3a2f 70%, #145646) !important;
  color: var(--skoda-mist) !important;
}

#btnBoost {
  --button-frame: rgba(120, 250, 174, 0.96);
  --button-frame-hover: rgba(185, 255, 214, 1);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.26), rgba(255, 154, 79, 0.94) 44%, rgba(227, 70, 38, 0.98)),
    #f26a32 !important;
  color: #020806 !important;
}

#screenCar .card {
  background:
    radial-gradient(620px 360px at 50% 14%, rgba(120, 250, 174, 0.18), transparent 68%),
    linear-gradient(180deg, rgba(20, 86, 70, 0.94), rgba(2, 8, 6, 0.96));
}

#screenCar .car-stage {
  background:
    linear-gradient(180deg, rgba(120, 250, 174, 0.10), rgba(0, 0, 0, 0.22)),
    radial-gradient(360px 180px at 50% 72%, rgba(120, 250, 174, 0.20), transparent 72%),
    repeating-linear-gradient(0deg, transparent 0 18px, rgba(120, 250, 174, 0.065) 18px 19px),
    repeating-linear-gradient(90deg, transparent 0 28px, rgba(120, 250, 174, 0.052) 28px 29px),
    #07140e;
}

#screenCar h2,
#screenCar .car-color-name,
#screenCar .car-stat-val {
  text-shadow:
    2px 2px 0 rgba(0, 0, 0, 0.84),
    0 0 18px rgba(120, 250, 174, 0.26);
}

#btnStartCar {
  box-shadow:
    0 7px 0 rgba(0, 0, 0, 0.78),
    0 0 26px rgba(120, 250, 174, 0.30),
    inset 0 0 0 4px rgba(2, 8, 6, 0.58),
    inset 0 0 0 6px rgba(244, 255, 248, 0.22);
}

/* Final outline normalization: one clipped fill, one matching masked frame.
   This avoids doubled or broken corner strokes from older theme layers. */
.btn,
.icon-btn,
.action-btn {
  --frame-cut: 18px;
  --frame-width: 3px;
  --frame-color: rgba(120, 250, 174, 0.84);
  --frame-hover: rgba(185, 255, 214, 0.98);
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: polygon(
    var(--frame-cut) 0,
    calc(100% - var(--frame-cut)) 0,
    100% var(--frame-cut),
    100% calc(100% - var(--frame-cut)),
    calc(100% - var(--frame-cut)) 100%,
    var(--frame-cut) 100%,
    0 calc(100% - var(--frame-cut)),
    0 var(--frame-cut)
  ) !important;
  overflow: hidden;
}

.btn.primary,
.btn.testdrive,
#btnStartCar {
  --frame-color: rgba(185, 255, 214, 0.96);
}

.btn.lb,
.btn.ghost,
#btnBrake {
  --frame-color: rgba(120, 250, 174, 0.74);
}

.icon-btn {
  --frame-cut: 10px;
  --frame-width: 3px;
}

.action-btn {
  --frame-cut: 14px;
  --frame-width: 3px;
}

#btnBoost {
  --frame-color: rgba(120, 250, 174, 0.96);
  --frame-hover: rgba(185, 255, 214, 1);
}

.btn:hover,
.icon-btn:hover,
.action-btn:hover {
  --frame-color: var(--frame-hover);
}

.btn::before,
.icon-btn::before,
.action-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
  padding: var(--frame-width);
  pointer-events: none;
  background: var(--frame-color);
  clip-path: inherit;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
}

.btn::after,
.icon-btn::after,
.action-btn::after {
  content: none !important;
}

.btn {
  box-shadow:
    0 7px 0 rgba(0, 0, 0, 0.78),
    0 14px 24px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(244, 255, 248, 0.16),
    inset 0 -18px 24px rgba(0, 0, 0, 0.22);
}

.btn:hover {
  box-shadow:
    0 7px 0 rgba(0, 0, 0, 0.78),
    0 0 30px rgba(120, 250, 174, 0.28),
    inset 0 1px 0 rgba(244, 255, 248, 0.18),
    inset 0 -18px 24px rgba(0, 0, 0, 0.20);
}

.btn.primary,
.btn.testdrive,
#btnStartCar {
  box-shadow:
    0 7px 0 rgba(0, 0, 0, 0.78),
    0 0 26px rgba(120, 250, 174, 0.30),
    inset 0 1px 0 rgba(244, 255, 248, 0.34),
    inset 0 -16px 22px rgba(14, 58, 47, 0.16);
}

.btn.lb,
.btn.ghost,
#btnBrake,
#btnBoost {
  box-shadow:
    0 7px 0 rgba(0, 0, 0, 0.78),
    0 13px 22px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(244, 255, 248, 0.12),
    inset 0 -16px 22px rgba(0, 0, 0, 0.22);
}

.car-stage {
  --stage-cut: 16px;
  --stage-frame: rgba(120, 250, 174, 0.72);
  --stage-frame-width: 2px;
  border: 0 !important;
  clip-path: polygon(
    var(--stage-cut) 0,
    calc(100% - var(--stage-cut)) 0,
    100% var(--stage-cut),
    100% calc(100% - var(--stage-cut)),
    calc(100% - var(--stage-cut)) 100%,
    var(--stage-cut) 100%,
    0 calc(100% - var(--stage-cut)),
    0 var(--stage-cut)
  );
}

.car-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  padding: var(--stage-frame-width);
  pointer-events: none;
  background: var(--stage-frame);
  clip-path: inherit;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
}

.car-stage::before {
  z-index: 5;
}

/* Quality pass: continuous premium outlines. No clipped button corners. */
.btn,
.icon-btn,
.action-btn {
  --ui-radius: 8px;
  --ui-border: rgba(120, 250, 174, 0.82);
  --ui-border-hover: rgba(185, 255, 214, 0.98);
  border: 2px solid var(--ui-border) !important;
  border-radius: var(--ui-radius) !important;
  clip-path: none !important;
  overflow: hidden;
  outline: 1px solid rgba(2, 8, 6, 0.72);
  outline-offset: -5px;
}

.btn.primary,
.btn.testdrive,
#btnStartCar {
  --ui-border: rgba(185, 255, 214, 0.96);
}

.btn.lb,
.btn.ghost,
#btnBrake {
  --ui-border: rgba(120, 250, 174, 0.74);
}

.icon-btn {
  --ui-radius: 7px;
}

.action-btn {
  --ui-radius: 8px;
}

#btnBoost {
  --ui-border: rgba(120, 250, 174, 0.96);
}

.btn:hover,
.icon-btn:hover,
.action-btn:hover {
  border-color: var(--ui-border-hover) !important;
}

/* Touch devices keep :hover "stuck" after a tap, which would freeze a button's
   border in its brighter hover colour (most visible on the BOOST/BRAKE pads).
   On touch, make the hover border identical to the resting border so every
   button snaps straight back to its original look the moment you lift off.
   The pressed look stays driven solely by the .pressed class (added on
   touchstart, removed on touchend). */
@media (hover: none) {
  .btn,
  .icon-btn,
  .action-btn {
    --ui-border-hover: var(--ui-border) !important;
  }
}

.btn::before,
.icon-btn::before,
.action-btn::before {
  content: "";
  position: absolute;
  inset: 5px;
  z-index: 6;
  padding: 0;
  pointer-events: none;
  border: 1px solid rgba(185, 255, 214, 0.26);
  border-radius: max(3px, calc(var(--ui-radius) - 4px));
  background: transparent;
  clip-path: none;
  -webkit-mask: none;
  mask: none;
}

.btn::after,
.icon-btn::after,
.action-btn::after {
  content: none !important;
}

.btn {
  box-shadow:
    0 7px 0 rgba(0, 0, 0, 0.72),
    0 13px 24px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(244, 255, 248, 0.18),
    inset 0 -16px 22px rgba(0, 0, 0, 0.20);
}

.btn.primary,
.btn.testdrive,
#btnStartCar {
  box-shadow:
    0 7px 0 rgba(0, 0, 0, 0.72),
    0 0 24px rgba(120, 250, 174, 0.28),
    inset 0 1px 0 rgba(244, 255, 248, 0.34),
    inset 0 -14px 20px rgba(14, 58, 47, 0.14);
}

.car-stage {
  border: 2px solid rgba(120, 250, 174, 0.72) !important;
  border-radius: 8px !important;
  clip-path: none !important;
  outline: 1px solid rgba(2, 8, 6, 0.72);
  outline-offset: -6px;
  overflow: hidden;
}

.car-stage::after {
  content: none !important;
}

/* Safari viewport lock: the page root and every full-screen layer fill the
   full LAYOUT viewport (not the smaller visual viewport). A fixed inset:0 shell
   always covers the screen edge-to-edge, so iOS Safari toolbars can never
   expose the browser's white canvas behind the page (the old "white bars").

   CRITICAL: a SOLID background-color must live on html/body. iOS Safari paints
   the safe-area insets (notch / home indicator) and the overscroll + toolbar
   regions with the ROOT element's background COLOR. The gradients below are
   background-IMAGE only, if they were set via the `background` shorthand they
   would reset background-color to transparent, and Safari would show white
   there. So we set background-color separately and never let it be cleared. */
html,
body {
  width: 100%;
  height: 100%;
  min-height: 100%;
  background-color: var(--skoda-emerald-deep, #020806);
  background-image:
    radial-gradient(900px 640px at 50% 20%, rgba(120, 250, 174, 0.16), transparent 60%),
    radial-gradient(1000px 760px at 50% 104%, rgba(14, 58, 47, 0.55), transparent 64%),
    linear-gradient(180deg, #020806 0%, #0a241b 7%, #0e3a2f 30%, #0a2017 72%, #020806 100%);
  background-repeat: no-repeat;
}

#app,
#game,
#carLayer,
.screen,
.desktop-block,
.loading-overlay,
.race-end,
.tutorial,
.floaters {
  inset: 0 !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* Solid dark fill behind the shell and the gameplay canvas so no white can
   ever read through, even for a frame before the scene paints. */
#app {
  background-color: var(--skoda-emerald-deep, #020806) !important;
}
#game {
  background-color: #160825 !important;
}

/* Clean country title reveal: cinematic lines only, never a UI panel. */
.level-title {
  top: 36% !important;
  width: min(92vw, 760px) !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  clip-path: none !important;
  overflow: visible !important;
  backdrop-filter: none !important;
}

.level-title-rule {
  width: min(78vw, 640px) !important;
  height: 1px !important;
  background: linear-gradient(
    90deg,
    rgba(120, 250, 174, 0) 0%,
    rgba(120, 250, 174, 0.2) 16%,
    rgba(185, 255, 214, 0.88) 50%,
    rgba(120, 250, 174, 0.2) 84%,
    rgba(120, 250, 174, 0) 100%
  ) !important;
  box-shadow:
    0 0 14px rgba(120, 250, 174, 0.36),
    0 0 28px rgba(14, 58, 47, 0.28) !important;
}

.level-title-rule-top {
  margin-bottom: 16px !important;
}

.level-title-rule-bottom {
  margin-top: 18px !important;
}

.level-title-sub,
.level-title-name,
.level-title-name .lt-char {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}

.level-title-sub {
  color: rgba(120, 250, 174, 0.92) !important;
  letter-spacing: 0;
  text-indent: 0;
  text-shadow:
    0 0 12px rgba(120, 250, 174, 0.4),
    0 2px 0 rgba(2, 8, 6, 0.82) !important;
}

.level-title-name {
  color: rgba(244, 255, 248, 0.98) !important;
  letter-spacing: 0;
  text-shadow:
    0 0 22px rgba(120, 250, 174, 0.28),
    0 0 42px rgba(14, 58, 47, 0.34),
    0 3px 0 rgba(2, 8, 6, 0.72) !important;
}

/* =====================  TOUCH PADS: NO STUCK HOVER, EVER  =====================
   The bug: on a phone CSS :hover latches onto the last-tapped element and stays
   applied until you tap elsewhere (and many phones even report `hover: hover`).
   Several layers add hover styling to the pads, a bright green border, a
   brightness bump, and, the real offender, `:hover::before { background:
   var(--button-frame-hover) }` which, because the final ::before runs with
   `mask: none`, FILLS the whole pad bright green. So after you lifted your finger
   the BOOST/BRAKE pad stayed solid green.

   BOOST/BRAKE (.action-btn) and the steer pads (.touch-steer) are touch-ONLY
   controls, the touch overlay is hidden on wide screens and desktop is blocked
   outright, so there is never a case where they want a real mouse-hover. We
   therefore kill ALL of their hover styling unconditionally (no reliance on any
   touch-detection class, so it can't fail to apply). Press feedback comes solely
   from the JS-driven .pressed / .active classes, which are written after this so
   they win while the finger is down; the instant you lift, the class is gone and
   the pad snaps straight back to its resting look. */
.action-btn:hover,
.touch-steer:hover {
  filter: none !important;
  border-color: var(--ui-border) !important;
  --ui-border-hover: var(--ui-border) !important;
  --frame-hover: var(--frame-color) !important;
  --button-frame-hover: var(--button-frame) !important;
}
.action-btn:hover::before,
.action-btn:hover::after,
.touch-steer:hover::before,
.touch-steer:hover::after {
  background: transparent !important;
}

/* Press feedback (wins over the hover neutraliser above while held). */
.action-btn.pressed {
  filter: brightness(1.16) !important;
}
.touch-steer.active {
  filter: brightness(1.12) !important;
}

/* =====================  HARD PORTRAIT LOCK  =====================
   The entire experience is portrait-only. When a touch phone is held in
   landscape this overlay sits above every other layer and covers the screen,
   so no gameplay or UI is ever visible sideways. It is driven both by a JS
   body class (precise: reuses the phone-size + coarse-pointer gate) and by a
   CSS media-query fallback so it appears instantly, even before JS runs. */
.orientation-lock {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding:
    max(24px, env(safe-area-inset-top))
    max(24px, env(safe-area-inset-right))
    max(24px, env(safe-area-inset-bottom))
    max(24px, env(safe-area-inset-left));
  background:
    radial-gradient(720px 520px at 50% 32%, rgba(120, 250, 174, 0.16), transparent 66%),
    linear-gradient(180deg, #020806 0%, #0e3a2f 48%, #020806 100%);
  background-color: #020806;
  color: var(--skoda-mist, #f4fff8);
}
body.landscape-blocked .orientation-lock { display: flex; }
@media (orientation: landscape) and (max-height: 540px) and (any-pointer: coarse) {
  .orientation-lock { display: flex; }
}
/* The desktop gate takes precedence, never stack both blockers. */
body.desktop-blocked .orientation-lock { display: none !important; }

.orientation-lock-inner { max-width: 320px; }
.orientation-lock h2 {
  font-size: 22px;
  font-weight: 700;
  margin: 20px 0 8px;
  letter-spacing: 0.01em;
}
.orientation-lock p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--skoda-muted, #8fb6a5);
  margin: 0;
}
.orientation-lock-phone {
  width: 54px;
  height: 92px;
  margin: 0 auto;
  border: 3px solid var(--skoda-electric, #78faae);
  border-radius: 13px;
  box-shadow: 0 0 22px rgba(120, 250, 174, 0.35);
  animation: orientationNudge 2.4s ease-in-out infinite;
}
.orientation-lock-phone::after {
  content: "";
  display: block;
  width: 18px;
  height: 3px;
  margin: 78px auto 0;
  border-radius: 999px;
  background: rgba(120, 250, 174, 0.7);
}
@keyframes orientationNudge {
  0%, 38%   { transform: rotate(-90deg); }
  60%, 100% { transform: rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
  .orientation-lock-phone { animation: none; transform: rotate(-90deg); }
}

/* =====================  HAND-PAINTED RALLY FINISH  =====================
   Final art-direction pass. The whole UI reads as a hand-painted rally
   poster: primary actions are a ragged green brush stroke, secondary
   actions are chalk-rough sketched outlines, surfaces carry grain and
   paint splatter, and headings sit at a slight stamped tilt.

   One motion language everywhere, things get PAINTED onto the screen:
     1. the brush stroke wipes in left -> right,
     2. the label inks in on top of the wet paint,
     3. the dry-brush flick lands last;
   outlined buttons SKETCH in (blur -> crisp, staggered down the stack),
   headings STAMP down (slight overscale + tilt settling flat), and
   picking a paint swatch SPLATS. Pressing anything squashes it like a
   rubber stamp. All of it is pure CSS driven by the existing show/hide
   flow, so it re-plays every time a screen is entered. */

:root {
  /* Ragged brush-stroke silhouette, used as an alpha mask over painted fills.
     White-only shapes so alpha- and luminance-mask engines agree. */
  /* NOTE: shapes keep a wide margin from the viewBox edge and the filter
     region stays close to the graphic, displaced pixels that get clamped at
     the image boundary otherwise smear into a dead-straight hairline. */
  --paint-stroke-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 120' preserveAspectRatio='none'%3E%3Cfilter id='r' x='-8%25' y='-15%25' width='116%25' height='130%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.011 0.12' numOctaves='4' seed='11'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='20'/%3E%3C/filter%3E%3Cg filter='url(%23r)'%3E%3Crect x='22' y='22' width='436' height='76' fill='%23fff'/%3E%3Crect x='12' y='34' width='24' height='52' fill='%23fff' opacity='.85'/%3E%3Crect x='444' y='30' width='24' height='56' fill='%23fff' opacity='.8'/%3E%3C/g%3E%3C/svg%3E");
  /* Rough double outline for secondary buttons. */
  --grunge-frame: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 120' preserveAspectRatio='none'%3E%3Cfilter id='r' x='-6%25' y='-12%25' width='112%25' height='124%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.018 0.09' numOctaves='3' seed='4'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='9'/%3E%3C/filter%3E%3Cg filter='url(%23r)' fill='none' stroke='%2378faae'%3E%3Crect x='13' y='14' width='454' height='92' rx='16' stroke-width='3.4' opacity='.92'/%3E%3Crect x='23' y='24' width='434' height='72' rx='10' stroke-width='1.5' opacity='.4'/%3E%3C/g%3E%3C/svg%3E");
  /* Fainter single rough outline for passive panels / inputs. */
  --grunge-frame-dim: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 120' preserveAspectRatio='none'%3E%3Cfilter id='r' x='-6%25' y='-12%25' width='112%25' height='124%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.02 0.08' numOctaves='3' seed='19'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='7'/%3E%3C/filter%3E%3Crect x='11' y='12' width='458' height='96' rx='13' fill='none' stroke='%2378faae' stroke-width='2.2' opacity='.5' filter='url(%23r)'/%3E%3C/svg%3E");
  /* Film-grain speckle tile (black, alpha-only) laid over dark surfaces. */
  --grunge-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' seed='7'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.55 0 0 0 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  /* Paint splat that pops behind the selected colour swatch. */
  --paint-splat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cfilter id='s' x='-30%25' y='-30%25' width='160%25' height='160%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.11' numOctaves='3' seed='9'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='16'/%3E%3C/filter%3E%3Cg fill='%2378faae' filter='url(%23s)'%3E%3Ccircle cx='60' cy='60' r='38'/%3E%3Ccircle cx='21' cy='38' r='6'/%3E%3Ccircle cx='101' cy='33' r='5'/%3E%3Ccircle cx='28' cy='97' r='6'/%3E%3Ccircle cx='99' cy='93' r='7'/%3E%3Ccircle cx='11' cy='69' r='3.5'/%3E%3Ccircle cx='110' cy='63' r='3'/%3E%3C/g%3E%3C/svg%3E");
  /* Small dark dry-brush flick that lands on the primary stroke. */
  --paint-flick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 40'%3E%3Cfilter id='f' x='-20%25' y='-40%25' width='140%25' height='180%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.14 0.3' numOctaves='2' seed='5'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='6'/%3E%3C/filter%3E%3Cg fill='%23052314' filter='url(%23f)'%3E%3Cpath d='M6 27 L84 9 L79 16 L12 31 Z'/%3E%3Cpath d='M32 35 L86 21 L84 26 L36 38 Z' opacity='.72'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------- shared motion vocabulary ----------
   One metaphor, no soft-focus tricks: every element is PAINTED on,
   left to right, with the same easing. Nothing blurs, wet paint has
   hard edges. Strokes wipe, outlines draw, headings stamp, flicks land. */

:root {
  --paint-ease: cubic-bezier(0.22, 0.9, 0.28, 1);
}

/* Brush stroke wipes in left -> right (ragged leading edge comes from the
   mask). The slight rotation/drag settle makes it read as a brush PULL,
   not a mask reveal. Resting transform is rotate(-1.2deg), the 100% frame
   must match it. */
@keyframes paintStrokeIn {
  0%   { clip-path: inset(-12% 100% -12% -4%); transform: rotate(-1.7deg) translateX(-7px); }
  100% { clip-path: inset(-12% -4% -12% -4%); transform: rotate(-1.2deg) translateX(0); }
}
/* Label inks in on top of the paint. We animate -webkit-text-fill-color, NOT
   color: the resting label colour is declared with !important, and per the CSS
   cascade an !important author rule overrides a CSS animation, so animating
   `color` did nothing and the text showed from frame 1, before the brush. The
   text-fill-color property always wins over `color` and carries no !important
   here, so the animation reliably hides the label until the paint has crossed.
   (Keyframe omits `to`, so each label resolves back to its own resting fill.) */
@keyframes inkIn {
  from { -webkit-text-fill-color: transparent; text-fill-color: transparent; text-shadow: none; }
}
/* Sketched outline is DRAWN in, same direction and ease as the strokes. */
@keyframes frameDrawIn {
  from { clip-path: inset(-8% 102% -8% -2%); }
  to   { clip-path: inset(-8% -2% -8% -2%); }
}
/* Rubber-stamp landing for headings, crisp, slight overscale settling flat. */
@keyframes stampIn {
  from { opacity: 0; transform: scale(1.16) rotate(-4deg); }
}
/* Crisp painted fade for supporting copy and panels. */
@keyframes brushFadeUp {
  from { opacity: 0; transform: translateY(10px); }
}
@keyframes brushFadeIn {
  from { opacity: 0; }
}
/* Dry-brush sheen sweeping along the stroke on hover. */
@keyframes paintSheen {
  from { background-position: -160% 0, right 20px bottom 14px; }
  to   { background-position: 260% 0, right 20px bottom 14px; }
}
/* Swatch pick splat. */
@keyframes splatPop {
  0%   { transform: scale(0.3) rotate(-30deg); opacity: 0; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* ---------- screens: grain, splatter, deep vignette ---------- */

.screen,
#screenLanding {
  background:
    radial-gradient(720px 520px at 50% 38%, rgba(120, 250, 174, 0.14), transparent 66%),
    radial-gradient(900px 680px at 50% 100%, rgba(20, 86, 70, 0.38), transparent 70%),
    linear-gradient(180deg, #020806 0%, #0a241b 7%, #0e3a2f 34%, #0a2017 74%, #020806 100%);
  background-color: #020806;
}

.screen::before {
  background:
    var(--grunge-noise) 0 0 / 220px 220px,
    radial-gradient(circle at 14% 20%, rgba(120, 250, 174, 0.07), transparent 32%),
    radial-gradient(circle at 86% 66%, rgba(120, 250, 174, 0.05), transparent 28%),
    radial-gradient(circle at 70% 12%, rgba(2, 8, 6, 0.5), transparent 30%);
  background-size: 220px 220px, auto, auto, auto;
  mix-blend-mode: normal;
  opacity: 0.5;
}

.screen::after,
#screenLanding::after {
  box-shadow:
    inset 0 0 120px rgba(0, 0, 0, 0.78),
    inset 0 0 320px rgba(2, 8, 6, 0.45);
}

/* ---------- full-bleed poster surfaces (no panel chrome) ---------- */

.landing,
.card {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  clip-path: none !important;
  background:
    var(--grunge-noise) 0 0 / 240px 240px,
    linear-gradient(180deg, rgba(2, 8, 6, 0.30), rgba(2, 8, 6, 0.16) 40%, rgba(2, 8, 6, 0.82) 78%, rgba(2, 8, 6, 0.95)),
    linear-gradient(150deg, rgba(120, 250, 174, 0.12), rgba(14, 58, 47, 0.84) 44%, rgba(2, 8, 6, 0.97)),
    url("assets/ui/vintage-route-poster.webp") center / cover no-repeat;
  background-color: #041009;
  background-blend-mode: normal, normal, normal, luminosity;
}

.card {
  background:
    var(--grunge-noise) 0 0 / 240px 240px,
    radial-gradient(560px 300px at 50% 16%, rgba(120, 250, 174, 0.12), transparent 66%),
    linear-gradient(180deg, rgba(14, 58, 47, 0.94), rgba(2, 8, 6, 0.97)),
    url("assets/ui/vintage-route-poster.webp") center bottom / cover no-repeat;
  background-color: #041009;
  background-blend-mode: normal, normal, normal, luminosity;
}

.landing::before,
.card::before,
.landing::after,
.card::after {
  content: none !important;
}

/* ---------- stamped, tilted typography ---------- */

.title,
.card h2 {
  font-style: italic;
  animation: stampIn 0.4s cubic-bezier(0.2, 1.15, 0.3, 1) 0.05s both;
}

.title { transform: rotate(-2deg); }

.title span { transform: rotate(-1deg); font-size: 0.82em; }

.brand-tag,
.board-status,
.res-name label {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--skoda-electric-soft) !important;
}

.subtitle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-style: italic;
}

.subtitle::before,
.subtitle::after {
  content: "";
  position: static !important;
  display: block;
  width: clamp(28px, 8vw, 64px);
  height: 2px;
  flex: none;
  background: repeating-linear-gradient(90deg, currentColor 0 7px, transparent 7px 13px) !important;
  box-shadow: none !important;
  opacity: 0.7;
}

.teaser {
  border: 0 !important;
  background: transparent !important;
  font-style: italic;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

/* Bookend dashes, mirroring the subtitle ornaments. */
.teaser::before,
.teaser::after {
  content: "";
  display: block;
  flex: none;
  width: clamp(20px, 6vw, 44px);
  height: 2px;
  background: repeating-linear-gradient(90deg, currentColor 0 7px, transparent 7px 13px);
  opacity: 0.55;
}

/* Landing copy paints in as a stagger under the stamped title. */
.brand-tag  { animation: brushFadeUp 0.5s ease-out 0.18s both; }
.subtitle   { animation: brushFadeUp 0.5s ease-out 0.26s both; }
.lede       { animation: brushFadeUp 0.5s ease-out 0.34s both; }
.teaser     { animation: brushFadeUp 0.6s ease-out 0.7s both; }
.skoda-logo { animation: brushFadeIn 0.55s ease-out both; }

/* ---------- buttons: the paint system ---------- */

.btn-row { gap: 16px 14px; }

/* Stagger: every button carries an entry delay slot so a stack of buttons
   gets painted top-to-bottom, one flick of the wrist apart. */
.btn { --enter-delay: 0s; }
.btn-row .btn:nth-child(2) { --enter-delay: 0.12s; }
.btn-row .btn:nth-child(3) { --enter-delay: 0.24s; }
.btn-row .btn:nth-child(4) { --enter-delay: 0.36s; }

.btn,
.action-btn {
  font-style: italic;
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: 0.07em;
}

.btn {
  border: 0 !important;
  border-radius: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  overflow: visible !important;
  clip-path: none !important;
  isolation: isolate;
  padding: 15px 26px;
  font-size: 16px;
  /* Ink lands with the paint sweep, never before it. The brush stroke wipes
     from delay+0.08 over 0.45s (settles ~delay+0.53); the label inks over the
     final third of that sweep so the text arrives as the paint does. */
  animation: inkIn 0.2s ease-out calc(var(--enter-delay) + 0.34s) both;
}

.btn:hover { transform: translateY(-2px); filter: none; box-shadow: none !important; border: 0 !important; }
.btn:active { transform: translateY(0) scale(0.965) rotate(-0.6deg); }

/* -- primary: the green brush stroke -- */
.btn.primary,
.btn.testdrive,
#btnStartCar {
  color: #04150d !important;
  text-shadow: 0 1px 0 rgba(244, 255, 248, 0.35);
}

.btn.primary::before,
.btn.testdrive::before,
#btnStartCar::before {
  content: "" !important;
  position: absolute;
  inset: -3px -8px;
  z-index: -1;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  pointer-events: none;
  background:
    var(--grunge-noise) 0 0 / 140px 140px,
    repeating-linear-gradient(178deg, rgba(6, 35, 20, 0.06) 0 3px, rgba(255, 255, 255, 0) 3px 9px),
    linear-gradient(180deg, #b2fcce 0%, #85f2b3 32%, #6fe8a0 58%, #3fc476 100%);
  -webkit-mask: var(--paint-stroke-mask) center / 100% 100% no-repeat;
  mask: var(--paint-stroke-mask) center / 100% 100% no-repeat;
  transform: rotate(-1.2deg);
  filter:
    drop-shadow(0 3px 0 rgba(0, 0, 0, 0.5))
    drop-shadow(0 10px 16px rgba(0, 0, 0, 0.35));
  animation: paintStrokeIn 0.45s var(--paint-ease) calc(var(--enter-delay) + 0.08s) both;
}

/* -- primary accents: dry-brush flick + hover sheen, masked to the stroke -- */
.btn.primary::after,
.btn.testdrive::after,
#btnStartCar::after {
  content: "" !important;
  position: absolute;
  inset: -3px -8px;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(115deg, transparent 32%, rgba(244, 255, 248, 0.5) 46%, rgba(244, 255, 248, 0) 58%) no-repeat,
    var(--paint-flick) no-repeat;
  background-size: 60% 100%, 62px 26px;
  background-position: -160% 0, right 20px bottom 14px;
  -webkit-mask: var(--paint-stroke-mask) center / 100% 100% no-repeat;
  mask: var(--paint-stroke-mask) center / 100% 100% no-repeat;
  transform: rotate(-1.2deg);
  /* The flick LANDS, steps(1) makes it appear in a single frame, like a
     real wrist-flick, instead of ghosting in. */
  animation: brushFadeIn 0.06s steps(1, end) calc(var(--enter-delay) + 0.5s) both;
}

@media (hover: hover) {
  .btn.primary:hover::after,
  .btn.testdrive:hover::after,
  #btnStartCar:hover::after {
    animation: paintSheen 0.55s ease-out;
  }
  .btn.primary:hover::before,
  .btn.testdrive:hover::before,
  #btnStartCar:hover::before {
    filter:
      brightness(1.06)
      drop-shadow(0 3px 0 rgba(0, 0, 0, 0.5))
      drop-shadow(0 10px 20px rgba(120, 250, 174, 0.25));
  }
}

/* -- secondary: chalk-rough sketched outline -- */
.btn.lb,
.btn.ghost,
.btn.small {
  color: var(--skoda-electric-soft) !important;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.8);
  /* No fill at all: any tint that touches the element's rectangular edge
     paints a hairline on full-width buttons. The sketched frame + the dark
     poster behind it carry the look, like the reference. */
  background: transparent !important;
}

.btn.lb::before,
.btn.ghost::before,
.btn.small::before {
  content: "" !important;
  position: absolute;
  inset: -2px -3px;
  z-index: -1;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  pointer-events: none;
  -webkit-mask: none;
  mask: none;
  background: var(--grunge-frame) center / 100% 100% no-repeat;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.55));
  animation: frameDrawIn 0.5s var(--paint-ease) calc(var(--enter-delay) + 0.1s) both;
}

.btn.lb::after,
.btn.ghost::after,
.btn.small::after {
  content: none !important;
}

@media (hover: hover) {
  .btn.lb:hover::before,
  .btn.ghost:hover::before,
  .btn.small:hover::before {
    filter: brightness(1.4) drop-shadow(0 0 10px rgba(120, 250, 174, 0.35));
  }
  .btn.lb:hover,
  .btn.ghost:hover,
  .btn.small:hover {
    color: #d9ffe9 !important;
  }
}

/* ---------- HUD icon buttons (pause / mute): clean small rounded ---------- */

.icon-btn {
  background: rgba(3, 12, 9, 0.72) !important;
  border: 1px solid rgba(120, 250, 174, 0.36) !important;
  border-radius: 9px !important;
  outline: none !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4) !important;
  overflow: hidden !important;
  clip-path: none !important;
  isolation: isolate;
}

.icon-btn::before,
.icon-btn::after { content: none !important; }

/* ---------- touch pads: BOOST + BRAKE are matching paint daubs ----------
   Both are a single ragged brush daub, no surrounding box, no second
   border. Boost is orange, brake is emerald, but they share the same
   mask, geometry, shadow and press feel so they read as one pair.
   The #id resets kill the legacy solid-box background / hard drop-shadow
   that older rules painted behind the daub (the "stylish button inside a
   plain box" look). */

.action-btn,
#btnBoost,
#btnBrake {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  overflow: visible !important;
  clip-path: none !important;
  isolation: isolate;
}

/* :hover included so the legacy stuck-hover neutraliser (which blanks
   .action-btn:hover::before) can never blank the paint mid-press. */
.action-btn.boost { color: #200a02 !important; text-shadow: 0 1px 2px rgba(255, 226, 190, 0.45); }
.action-btn.boost::before,
.action-btn.boost:hover::before {
  content: "" !important;
  position: absolute;
  inset: -4px -7px;
  z-index: -1;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  pointer-events: none;
  background:
    var(--grunge-noise) 0 0 / 140px 140px,
    repeating-linear-gradient(178deg, rgba(80, 24, 4, 0.10) 0 3px, rgba(255, 255, 255, 0) 3px 9px),
    linear-gradient(180deg, #ffd9a8 0%, #ff9a3e 40%, #f26a2a 68%, #d84a16 100%) !important;
  -webkit-mask: var(--paint-stroke-mask) center / 100% 100% no-repeat;
  mask: var(--paint-stroke-mask) center / 100% 100% no-repeat;
  transform: rotate(-1.4deg);
  filter: drop-shadow(0 4px 7px rgba(0, 0, 0, 0.45));
}

.action-btn.brake { color: var(--skoda-mist) !important; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.85); }
.action-btn.brake::before,
.action-btn.brake:hover::before {
  content: "" !important;
  position: absolute;
  inset: -4px -7px;
  z-index: -1;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  pointer-events: none;
  background:
    var(--grunge-noise) 0 0 / 140px 140px,
    repeating-linear-gradient(178deg, rgba(255, 255, 255, 0.05) 0 3px, rgba(255, 255, 255, 0) 3px 9px),
    linear-gradient(180deg, #2f8666 0%, #176046 44%, #0c3627 74%, #06231a 100%) !important;
  -webkit-mask: var(--paint-stroke-mask) center / 100% 100% no-repeat;
  mask: var(--paint-stroke-mask) center / 100% 100% no-repeat;
  transform: rotate(-1.4deg);
  filter: drop-shadow(0 4px 7px rgba(0, 0, 0, 0.45));
}

.action-btn::after { content: none !important; }

.action-btn.pressed { transform: scale(0.94) rotate(-0.8deg); filter: brightness(1.14) !important; }

/* ---------- HUD plaques, tutorial, banners: grainy stamped plates ---------- */

.hud-block,
.meter,
.tut-hint,
.phase-banner {
  background:
    var(--grunge-noise) 0 0 / 160px 160px,
    linear-gradient(180deg, rgba(120, 250, 174, 0.05), rgba(0, 0, 0, 0.25)) rgba(2, 8, 6, 0.82) !important;
  border: var(--hud-edge) solid rgba(120, 250, 174, 0.38) !important;
  border-radius: var(--hud-plate-radius) !important;
  box-shadow: 2px 3px 0 rgba(0, 0, 0, 0.5) !important;
}

/* ---------- ONE corner + outline language for every HUD box ----------
   These plates used to carry an 8px octagonal clip-path from the old pixel
   skin AND a 1px border. The clip sliced the border off at all four corners,
   which is why the score/phase/meter plates read as "cut corners with the
   outline missing" while the pause/mute buttons next to them were cleanly
   rounded with an unbroken edge. There is no way to make clip-path and a
   border agree, so the clip goes and every box is rounded to the same token.
   Plates and buttons share a radius; the gauges nested inside them take half,
   so they read as an inner part rather than a second, competing box. */
:root {
  --hud-plate-radius: 10px;      /* plates + icon buttons: the outer boxes */
  --hud-gauge-radius: 5px;       /* bars nested inside a plate */
  --hud-edge: 1px;               /* every outline in the HUD, one weight */
}

.hud-block,
.meter,
.tut-hint,
.phase-banner {
  clip-path: none !important;    /* kill the corner-cutting octagon for good */
}

.icon-btn {
  border-radius: var(--hud-plate-radius) !important;
}

.hud-progress,
.meter-bar {
  border-width: var(--hud-edge) !important;
  border-style: solid !important;
  border-radius: var(--hud-gauge-radius) !important;
  clip-path: none !important;
  overflow: hidden;              /* keep the fill inside the rounded ends */
}

/* The fill has to follow the gauge's rounded ends, otherwise a full bar shows
   square corners poking into the radius. */
.hud-progress-fill,
.meter-fill {
  border-radius: calc(var(--hud-gauge-radius) - 1px);
}

.hud-label,
.meter-label,
.hud-route-label,
.hud-phase .hud-label {
  font-style: italic;
  letter-spacing: 0.2em;
}

/* ---------- data panels: ONE clean card each ----------
   Buttons are the painted hero; informational panels are tidy cards so
   data stays aligned and legible. The old ragged sketch-frame background
   floated a second rectangle inside the panel's own rounded box, the
   "box inside a box" look. One card, one border, consistent radius. */

.controls-grid > div,
.res-grid .cell,
.res-name,
.car-stats,
.board-head,
#bestEmpty,
.loading-plaque {
  border: 1px solid rgba(120, 250, 174, 0.24) !important;
  background:
    var(--grunge-noise) 0 0 / 200px 200px,
    linear-gradient(180deg, rgba(120, 250, 174, 0.05), rgba(0, 0, 0, 0.22)) rgba(3, 12, 9, 0.66) !important;
  box-shadow:
    inset 0 1px 0 rgba(185, 255, 214, 0.08),
    0 8px 20px rgba(0, 0, 0, 0.34) !important;
  border-radius: 12px !important;
  animation: brushFadeUp 0.5s ease-out 0.22s both;
}

/* ---------- stat plate: even columns, centred, consistent rhythm ---------- */

.car-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 18px 6px !important;
  max-width: 340px;
}

.car-stat {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  padding: 0 6px;
}

.car-stat-val {
  line-height: 1;
  margin: 0;
}

.car-stat-unit,
.car-stat-label {
  margin: 0;
  line-height: 1;
  text-align: center;
}

.car-stat-div {
  flex: 0 0 1px;
  width: 1px;
  height: 52px;
  align-self: center;
  margin: 0;
}

/* Results stat cells paint in as a quick left-to-right cascade. */
.res-grid .cell:nth-child(1) { animation-delay: 0.18s; }
.res-grid .cell:nth-child(2) { animation-delay: 0.24s; }
.res-grid .cell:nth-child(3) { animation-delay: 0.3s; }
.res-grid .cell:nth-child(4) { animation-delay: 0.36s; }
.res-grid .cell:nth-child(5) { animation-delay: 0.42s; }
.res-grid .cell:nth-child(6) { animation-delay: 0.48s; }

#resName,
#resPhone,
#resInsta,
#saveReminderName,
#saveReminderPhone,
#saveReminderInsta {
  border: 1px solid rgba(120, 250, 174, 0.3) !important;
  background: rgba(3, 12, 9, 0.7) !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4) !important;
  border-radius: 10px;
}

#resName:focus,
#resPhone:focus,
#resInsta:focus,
#saveReminderName:focus,
#saveReminderPhone:focus,
#saveReminderInsta:focus {
  border-color: rgba(185, 255, 214, 0.7) !important;
  background: rgba(3, 12, 9, 0.82) !important;
  box-shadow:
    inset 0 1px 3px rgba(0, 0, 0, 0.4),
    0 0 0 3px rgba(120, 250, 174, 0.14) !important;
  outline: none;
}

.board-row {
  border: 1px solid rgba(120, 250, 174, 0.2);
  background:
    var(--grunge-noise) 0 0 / 200px 200px,
    linear-gradient(180deg, rgba(120, 250, 174, 0.04), rgba(0, 0, 0, 0.16)) rgba(3, 12, 9, 0.7);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
  border-radius: 10px;
}

/* ---------- save-score modal: one clean panel ----------
   This is the only card that keeps a real box, because it floats over live
   gameplay. It used to stretch the ragged sketch frame, a 480x120 drawing,
   across a tall portrait card, so the turbulence in it smeared into wavy
   blobs along the top and bottom edges and thin threads down the sides. A
   plain panel with a single hairline border reads properly at any height. */
.save-reminder-card {
  /* The full-bleed `.card` rule above pins every card to 100dvh so the menu
     screens fill the phone. This one is a floating dialog, so it has to opt
     back out and be as tall as its own content. */
  width: min(100%, 400px);
  max-width: 400px;
  min-height: 0 !important;
  max-height: calc(100dvh - 48px) !important;
  margin: auto;
  display: block;
  border: 1px solid rgba(120, 250, 174, 0.28) !important;
  border-radius: 18px !important;
  padding: 24px 22px 20px !important;
  background:
    var(--grunge-noise) 0 0 / 180px 180px,
    radial-gradient(420px 240px at 50% 0%, rgba(120, 250, 174, 0.12), transparent 72%),
    linear-gradient(180deg, #0c2a1e, #04120c) !important;
  box-shadow:
    inset 0 1px 0 rgba(185, 255, 214, 0.10),
    0 26px 60px rgba(0, 0, 0, 0.62) !important;
}

.save-reminder-card h3 {
  font-size: 21px !important;
  line-height: 1.18;
  margin: 0 0 6px !important;
}

.save-reminder-card > .muted { margin: 0 0 16px !important; }

.save-reminder-card .name-row + .name-row { margin-top: 10px; }

.save-reminder-card input {
  border-radius: 12px !important;
  padding: 13px 14px !important;
}

/* That shorthand is !important, so the Instagram field's left inset has to be
   too, or the typed handle runs under the @ prefix. */
.save-reminder-card #saveReminderInsta.ig-input { padding-left: 32px !important; }

.save-reminder-card .name-note { margin: 10px 0 0 !important; }

/* Stacked full-width actions: SAVE is the painted hero, "no thanks" the
   sketched secondary, so the choice reads at a glance. */
.save-reminder-actions {
  flex-direction: column;
  gap: 14px;
  margin-top: 20px;
}

.save-reminder-actions .btn { width: 100%; }

/* ---------- garage stage: crop-mark corner brackets, no hard border ---------- */

.car-stage {
  border: 0 !important;
  outline: none !important;
  border-radius: 4px !important;
}

.car-stage::after {
  content: "" !important;
  position: absolute;
  inset: 6px;
  z-index: 4;
  padding: 0 !important;
  pointer-events: none;
  -webkit-mask: none;
  mask: none;
  background:
    linear-gradient(#78faae, #78faae) 0 0 / 26px 2px,
    linear-gradient(#78faae, #78faae) 0 0 / 2px 26px,
    linear-gradient(#78faae, #78faae) 100% 0 / 26px 2px,
    linear-gradient(#78faae, #78faae) 100% 0 / 2px 26px,
    linear-gradient(#78faae, #78faae) 0 100% / 26px 2px,
    linear-gradient(#78faae, #78faae) 0 100% / 2px 26px,
    linear-gradient(#78faae, #78faae) 100% 100% / 26px 2px,
    linear-gradient(#78faae, #78faae) 100% 100% / 2px 26px;
  background-repeat: no-repeat;
  opacity: 0.8;
}

/* ---------- colour swatches: picking a paint splats it ---------- */

.swatch { isolation: isolate; }

/* #screenCar prefix included: the glossy-sphere layer pins the selection ring
   with id specificity, and the splat has to replace that ring, not sit under it. */
.swatch.selected::after,
#screenCar .swatch.selected::after {
  border: 0 !important;
  border-radius: 0;
  inset: -14px;
  z-index: -1; /* the splat lands BEHIND the paint disc, like the reference */
  background: var(--paint-splat) center / contain no-repeat;
  opacity: 1;
  transform: scale(1);
}

.swatch.pick::after {
  animation: splatPop 0.42s cubic-bezier(0.2, 1.5, 0.4, 1);
}

/* Touch screens latch :hover after a tap, never leave a button floated. */
@media (hover: none) {
  .btn:hover { transform: none; }
}

/* ---------- calm everything down for reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .btn,
  .btn::before,
  .btn::after,
  .title,
  .card h2,
  .brand-tag,
  .subtitle,
  .lede,
  .teaser,
  .skoda-logo,
  .controls-grid > div,
  .res-grid .cell,
  .res-name,
  .car-stats,
  .board-head,
  #bestEmpty,
  .loading-plaque,
  .swatch.pick::after {
    animation: none !important;
  }
}

/* ---------------------------------------------------------------------------
   Route loader: real progress
   The plaque now reports actual download progress, so the bar has a determinate
   fill and a byte readout. The old sweeping bar is kept for the brief window
   before any response headers have arrived (.indeterminate), where there is
   genuinely nothing to report yet.
   --------------------------------------------------------------------------- */
.loading-head {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
}

.loading-head em {
  font-style: normal;
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  letter-spacing: 0.06em;
  color: var(--poster-gold-2, #f0d69a);
}

.loading-plaque i {
  position: relative;
}

.loading-plaque i b {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--poster-gold-2, #f0d69a), #fff4d2);
  box-shadow: 0 0 10px rgba(240, 214, 154, 0.45);
  transition: width 0.18s ease-out;
}

/* determinate: hide the sweep, show the fill */
.loading-overlay:not(.indeterminate) .loading-plaque i::before {
  display: none;
}

.loading-overlay.indeterminate .loading-plaque i b {
  display: none;
}

.loading-sub {
  display: block;
  margin-top: 9px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  opacity: 0.72;
  text-transform: none;
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .loading-plaque i b {
    transition: none;
  }
}

/* ---------- country plate: the name sits dead-centre on both axes ----------
   Two things pushed the country name off-centre inside its own plate. The HUD
   plates share a bottom-heavy vertical padding (they carry a drop shadow under
   the text), which lifted the name above the middle. And centred text with
   letter-spacing keeps the trailing gap after the last letter inside the line
   it centres, so the letters themselves sat half a letter-space left.
   Flex-centring the label fixes the first, and pulling that trailing gap back
   off the end (the negative margin matches the label's own letter-spacing)
   fixes the second. */
.hud .hud-phase {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 8px;
  padding-bottom: 8px;
}

.hud-phase .hud-label {
  line-height: 1;
  margin-right: -0.2em;
}

/* ---------------------------------------------------------------------------
   KYLAQ SPORTLINE KEY VISUAL
   The campaign master render carries the menus. It takes the place of the
   vintage-route poster that used to sit under .landing and .card, so this is a
   swap of one background layer rather than a new one stacked on top: no extra
   compositing work, no new DOM, and every scrim, grain and type rule above it
   still lands exactly where it did.

   Scope is the menu shell only. .landing and .card are the panel surfaces
   behind the landing, How to Play, car select, results, leaderboard and pause.
   Nothing here reaches #game or #carLayer, so a run renders frame for frame as
   it did before.

   Brand: the art is the clean campaign render, so the car, its Sportline
   badging and the teal-to-amber light field are reproduced unretouched, and the
   car is never cropped by the phone's aspect ratio (see the note on the plate
   below). The finished press ad is deliberately not the source. Its pricing,
   BNCAP and dealer copy cannot be set at a readable size on a phone, and
   carrying it in unreadable would be a compliance problem, not a design one.
   --------------------------------------------------------------------------- */

:root {
  /* Sampled off the key visual so UI accents can sit against it without
     drifting from the campaign's own colour. */
  --kv-amber: #f2a13c;
  --kv-teal: #0c7a5e;
}

/* ---------- landing + pause: the full key visual ----------
   Both are sparse layouts (a heading, a short line, a stack of buttons) with a
   deliberate empty band through the middle, which is exactly where the car
   sits. The plate is a 1:2 portrait cut with the render's own gradient extended
   above and below the car, so `cover` on any portrait phone crops into flat sky
   or flat asphalt and never into the car itself. */
.landing,
.pause-screen .card {
  background:
    /* Keeps the wordmark, campaign line and title off the bright sky. */
    linear-gradient(180deg, rgba(2, 8, 6, 0.90), rgba(2, 8, 6, 0.60) 14%, rgba(2, 8, 6, 0.16) 27%, rgba(2, 8, 6, 0) 37%),
    /* Lands the button stack on near-solid ground. It only has to cover the
       buttons themselves now that no line of type sits above them, so it is
       held low and fades out well before the car: the road under the wheels
       keeps its reflections instead of going flat black. */
    linear-gradient(0deg, rgba(2, 8, 6, 0.97), rgba(2, 8, 6, 0.93) 14%, rgba(2, 8, 6, 0.66) 22%, rgba(2, 8, 6, 0.20) 31%, rgba(2, 8, 6, 0) 37%),
    /* A whisper of the emerald the rest of the game is built from, so the
       render reads as part of this UI rather than as a pasted-in banner. */
    linear-gradient(150deg, rgba(120, 250, 174, 0.10), transparent 42%),
    var(--grunge-noise) 0 0 / 240px 240px,
    url("assets/ui/kv-kylaq-sportline.webp") center / cover no-repeat;
  background-color: #041009;
  background-blend-mode: normal, normal, normal, soft-light, normal;
}

/* ---------- card screens: the light field only ----------
   How to Play, car select, results and the leaderboard all carry dense content
   of their own, so they get the campaign's light trails without the car in
   them. Nothing competes with the panel, and the screens still read as one set
   with the landing because the texture is cut from the same render. */
.card {
  background:
    radial-gradient(560px 300px at 50% 18%, rgba(120, 250, 174, 0.13), transparent 66%),
    /* Held just light enough that the campaign's light trails read through the
       panel, and just heavy enough that body copy keeps its contrast. */
    linear-gradient(180deg, rgba(2, 8, 6, 0.86), rgba(3, 14, 10, 0.78) 44%, rgba(2, 8, 6, 0.93)),
    var(--grunge-noise) 0 0 / 240px 240px,
    url("assets/ui/kv-kylaq-texture.webp") center / cover no-repeat;
  background-color: #041009;
  background-blend-mode: normal, normal, soft-light, normal;
}

/* Car select keeps its own emerald studio wash, which is what makes the red
   Kylaq pop off the garage plate, so the texture goes in underneath it rather
   than replacing it. This repeats the id selector already used for that screen
   further up the sheet; matched on .card alone the older rule outranks this one
   and car select is the single screen that drops out of the campaign set. */
#screenCar .card {
  background:
    radial-gradient(620px 360px at 50% 14%, rgba(120, 250, 174, 0.18), transparent 68%),
    linear-gradient(180deg, rgba(20, 86, 70, 0.90), rgba(2, 8, 6, 0.94)),
    var(--grunge-noise) 0 0 / 240px 240px,
    url("assets/ui/kv-kylaq-texture.webp") center / cover no-repeat;
  background-color: #041009;
  background-blend-mode: normal, normal, soft-light, normal;
}

/* ---------- the campaign product line ----------
   Set the way the ad sets it: SKODA Next Light, white, sentence case, upright,
   near-normal tracking. It deliberately does not take the menu's italic stamped
   treatment, because in the key visual this line is the quiet one and the
   headline under it is the loud one. Reproducing it any other way would be
   redrawing the campaign's own type. */
/* The product line that used to sit between the Skoda mark and the title was
   removed (the game ships weeks after the car, so "new" dated the screen). It
   was carrying ~27px of vertical rhythm, and the title's line-height is SHORTER
   than its font-size, so its glyphs overflow the box top by ~5px -- without this
   the word "Kylaq" rides up into the mark. Keep the space, drop the words. */
.landing .skoda-logo + .title { margin-top: clamp(16px, 3.4vh, 30px); }

.kv-line {
  margin: 0 0 clamp(6px, 1.3vh, 14px);
  font-size: clamp(13px, 3.9vw, 17px);
  font-weight: 300;
  font-style: normal;
  letter-spacing: 0.005em;
  text-transform: none;
  color: #ffffff;
  text-shadow: 0 2px 12px rgba(2, 8, 6, 0.9);
  animation: brushFadeUp 0.5s ease-out 0.12s both;
}

/* ---------- the campaign headline ----------
   Sits above the car and across the sky, the same relationship it has in the
   key visual. Sized as a share of the panel rather than at a fixed width so the
   tracking stays proportional to the screen the way it is in the ad. */
.landing .kv-restless {
  margin: 0;
  padding: clamp(18px, 3.6vh, 42px) 0 0;
  text-align: center;
  line-height: 0;
  animation: brushFadeIn 0.7s ease-out 0.55s both;
}

.landing .kv-restless img {
  width: min(90%, 460px);
  height: auto;
  /* The lockup is white artwork on transparency, and on a short phone the band
     it lands in is the brightest part of the render rather than the dark
     asphalt. Stacked shadows on the alpha give it a halo that hugs the
     letterforms, which holds the blur legible over the light trail without
     painting a visible box behind it. */
  filter:
    drop-shadow(0 1px 3px rgba(2, 8, 6, 0.95))
    drop-shadow(0 2px 16px rgba(2, 8, 6, 0.9))
    drop-shadow(0 0 34px rgba(2, 8, 6, 0.7));
}

/* ---------- give the car the middle band ----------
   The landing already left a gap between the title and the subtitle. Letting
   the subtitle take the slack instead of the panel's centring pins the title
   block to the top and the buttons to the bottom, which hands the whole of that
   gap to the car rather than splitting it into three pockets of dead space. */
.landing {
  justify-content: flex-start;
}

/* The slack sits on the button stack, so it opens as one band below the
   headline and the car has that whole band to itself. Everything above it stays
   a tight top block (wordmark, product line, title, headline), which is the key
   visual's own stack. On a phone too short for any slack the band collapses to
   zero and the stack simply closes up, rather than overflowing.

   This carried the route line until that line was dropped from the landing; the
   `.subtitle` rules elsewhere in the sheet are now unmatched here. */
.landing .btn-row {
  margin-top: auto;
}

/* Pause takes the same rhythm, for the same reason: its stack was centred, so
   the car landed underneath the buttons. Heading to the top, buttons to the
   bottom, car in the band between them, which is the layout the two scrims
   above are cut for. Resume stays the first and largest button and keeps its
   full width, so the only thing that moves is how far down the screen it sits,
   and it moves into easier thumb reach rather than out of it. */
.pause-screen .card {
  justify-content: flex-start;
  /* Heading sits well down from the top edge rather than against it, so the
     screen reads as three spaced blocks (heading, car, buttons) instead of one
     pinned to each edge. The bottom padding is the counterweight: without it
     the button stack runs into the safe-area edge. */
  padding-top: clamp(64px, 15vh, 140px);
  padding-bottom: max(clamp(30px, 5.5vh, 60px), env(safe-area-inset-bottom));
}

.pause-screen .card h2 {
  margin-bottom: 0;
}

.pause-screen #btnResume {
  margin-top: auto;
}

/* A touch more air between the three buttons than the shared 10px, so the
   stack reads as a spaced group rather than a solid block. */
.pause-screen .btn + .btn {
  margin-top: clamp(12px, 1.8vh, 18px);
}

@media (prefers-reduced-motion: reduce) {
  .kv-line { animation: none !important; }
}

/* ---------- garage stage: never let the frame crop the car ----------
   The garage card is a flex column, so on a short phone it squeezes the stage,
   and because the stage clips its overflow the squeeze used to slice the car's
   wheels off at the bottom edge of the frame. The preview canvas is 720x560,
   so capping its WIDTH by a share of the viewport height is the same thing as
   capping its height, and the frame keeps hugging the canvas instead of
   letterboxing it. Only bites on genuinely short screens; the common phone
   sizes still get the full-width preview. */
@media (max-height: 640px) {
  #screenCar #carPreview {
    max-width: min(100%, 270px, 37vh);
  }
}

@media (max-height: 560px) {
  #screenCar #carPreview {
    max-width: min(100%, 270px, 34vh);
  }
}

/* Sub-500px viewports (old 4in phones) simply cannot spare the room: the card's
   other rows already claim nearly the whole column, so the stage gets what is
   left. Shrink to fit rather than crop, which is what used to happen here. */
@media (max-height: 500px) {
  #screenCar #carPreview {
    max-width: min(100%, 270px, 20vh);
  }
}

/* ---------- crawlable, player-visible game overview ----------
   Kept behind a native disclosure on How to Play so the same descriptive copy
   is available to players, search engines and text-only agents without adding
   noise to the first-run landing screen. */
.about-game {
  max-width: 46ch;
  width: 100%;
  margin: 12px auto 0;
  padding: 10px 12px;
  color: var(--skoda-muted, #8fb6a5);
  text-align: left;
  border: 1px solid rgba(120, 250, 174, 0.18);
  border-radius: 10px;
  background: rgba(2, 16, 11, 0.52);
}

.about-game summary {
  color: var(--skoda-electric, #78faae);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}

.about-game-body { padding-top: 10px; }
.about-game h3 {
  margin: 10px 0 4px;
  color: var(--skoda-silver, #c8d8cf);
  font-size: 12px;
}
.about-game h3:first-child { margin-top: 0; }
.about-game p { margin: 0; font-size: 12px; line-height: 1.5; }

/* ---------- styling & accuracy note ----------
   The scenery and the car are both stylised, and that is said where a player
   actually meets them: a compact line under the landing buttons and the full
   note on How to Play. Muted, never shouty -- it has to be readable and
   findable, not compete with the campaign artwork. */
.legal-note {
  color: var(--skoda-muted, #8fb6a5);
  font-size: 12px;
  line-height: 1.5;
  text-align: left;
  max-width: 46ch;
  margin: 14px auto 0;
}

.legal-note h3 {
  color: var(--skoda-electric, #78faae);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0 0 6px;
}

.legal-note p { margin: 0 0 7px; }
.legal-note p:last-child { margin-bottom: 0; }
.legal-note b { color: var(--skoda-silver, #c8d8cf); font-weight: 700; }

/* The one-liners on the landing and car screens: centred, quieter, and never
   tall enough to push the primary buttons off a short phone. */
.legal-note-compact {
  text-align: center;
  font-size: 11px;
  line-height: 1.45;
  max-width: 40ch;
  margin: 12px auto 0;
  opacity: 0.82;
}

@media (max-height: 700px) {
  .legal-note-compact { font-size: 10px; margin-top: 8px; }
}

/* ---------- overflowing menu cards must stay reachable ----------
   `justify-content: center` on a scrolling flex column puts the overflow ABOVE
   scrollTop:0, so the first line is clipped and cannot be scrolled to at all --
   on How to Play the heading sat at -10px with the container already at the
   top. `safe center` keeps the centring while the content fits and falls back
   to start alignment the moment it does not. The plain value stays first as the
   fallback for engines that do not parse the safe/unsafe keywords. */
.screen-inner,
.landing,
.card {
  justify-content: center;
  justify-content: safe center;
}

/* ---------- garage skeleton ----------
   The colour renders are the biggest images in the game, and on a slow
   connection the stage used to sit empty until one arrived. A blank frame under
   a Skoda logo is not an acceptable brand moment, so the stage holds a
   car-shaped placeholder that shimmers until the real render is decoded. Built
   from four blocks rather than an image so it costs nothing and can never be
   the thing that is still loading. */
.car-skeleton {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.32s ease, visibility 0s linear 0.32s;
}

.car-skeleton.is-on {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s ease, visibility 0s;
}

.cs-car {
  position: relative;
  width: min(52%, 176px);
  aspect-ratio: 1 / 0.72;
}

.cs-car span {
  position: absolute;
  display: block;
  border-radius: 7px;
  background:
    linear-gradient(100deg,
      rgba(120, 250, 174, 0.07) 0%,
      rgba(120, 250, 174, 0.07) 38%,
      rgba(120, 250, 174, 0.20) 50%,
      rgba(120, 250, 174, 0.07) 62%,
      rgba(120, 250, 174, 0.07) 100%);
  background-size: 300% 100%;
  animation: csSweep 1.55s ease-in-out infinite;
}

/* Roughly the Kylaq's rear silhouette: glasshouse, body, two tyres. */
.cs-roof  { left: 17%; top: 0;    width: 66%; height: 34%; border-radius: 10px 10px 5px 5px; }
.cs-body  { left: 3%;  top: 31%;  width: 94%; height: 48%; border-radius: 9px; }
.cs-wheel { top: 74%;  width: 15%; height: 26%; border-radius: 5px; }
.cs-wheel.left  { left: 5%; }
.cs-wheel.right { right: 5%; }

/* Each block starts its sweep slightly later, so the highlight travels across
   the car instead of every block flashing in lockstep. */
.cs-body  { animation-delay: 0.08s; }
.cs-wheel { animation-delay: 0.16s; }

.cs-label {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--skoda-muted, #8fb6a5);
  opacity: 0.85;
  animation: csPulse 1.9s ease-in-out infinite;
}

@keyframes csSweep {
  0%   { background-position: 140% 0; }
  100% { background-position: -40% 0; }
}

@keyframes csPulse {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 0.9; }
}

/* A player who has asked for less motion gets the placeholder without the
   shimmer; it still reads as "something is coming", just quietly. */
@media (prefers-reduced-motion: reduce) {
  .cs-car span,
  .cs-label { animation: none; }
  .cs-car span { background-position: 50% 0; }
}

/* ---------- route loader: the campaign plate, not a dialog on a gradient ----
   The loader is the first thing anyone sees, and it used to be a plaque
   floating on a flat emerald wash while the screen behind it was the Sportline
   key visual. Finishing the load therefore read as a cut to a different screen.
   It now wears the same plate as the landing, in the same composition --
   wordmark and product line at the top, the plaque sitting where the button
   stack will be -- so the handover is a dissolve and the car is already in
   place behind both.

   Same scrims as .landing, for the same reason: the render leaves a deliberate
   empty band through its middle where the car sits, and these keep type off the
   bright sky above it and off the road below. */
.loading-overlay {
  background:
    linear-gradient(180deg, rgba(2, 8, 6, 0.90), rgba(2, 8, 6, 0.60) 14%, rgba(2, 8, 6, 0.16) 27%, rgba(2, 8, 6, 0) 37%),
    /* Shallower than the landing's: that one has to carry a three-button stack,
       this carries one plaque, so the scrim stops sooner and the render's light
       trails keep running under it. */
    linear-gradient(0deg, rgba(2, 8, 6, 0.95), rgba(2, 8, 6, 0.88) 10%, rgba(2, 8, 6, 0.52) 18%, rgba(2, 8, 6, 0.14) 26%, rgba(2, 8, 6, 0) 33%),
    linear-gradient(150deg, rgba(120, 250, 174, 0.10), transparent 42%),
    var(--grunge-noise) 0 0 / 240px 240px,
    url("assets/ui/kv-kylaq-sportline.webp") center / cover no-repeat;
  background-color: #041009;
  background-blend-mode: normal, normal, normal, soft-light, normal;
}

/* No cross-fade needed, and none attempted: the global `.hidden` rule is
   `display: none !important`, and more to the point the loader and the landing
   now paint the SAME plate, so the swap is already invisible. The only thing
   that changes is the content on top of it. */

/* The overlay's own padding is dropped so the stack can start where the
   landing's does; measured, the wordmark previously sat 65px lower than the one
   it dissolves into, which is exactly the jump this screen exists to avoid. */
.loading-overlay {
  padding: 0;
}

.loading-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(560px, 94vw);
  height: 100%;
  padding: clamp(14px, 2.1vh, 26px) 0 max(clamp(26px, 5vh, 56px), env(safe-area-inset-bottom));
  text-align: center;
}

/* Matches the landing's wordmark so the two line up across the dissolve. */
.loading-logo {
  animation: brushFadeUp 0.5s ease-out both;
}

.loading-kv-line {
  margin-bottom: 0;
  animation: brushFadeUp 0.5s ease-out 0.06s both;
}

/* Pushed to the bottom of the column, which is where the landing's buttons
   land. The plaque and the Start button then occupy the same band. */
.loading-inner .loading-plaque {
  margin-top: auto;
  width: min(340px, 86vw);
  padding: 16px 18px 15px;
}

/* A little more presence than the old flat bar: a hairline trough with an
   emerald fill and a soft bloom, matching the HUD meters in the run itself. */
.loading-plaque i {
  height: 7px;
  margin-top: 14px;
  background: rgba(2, 8, 6, 0.86) !important;
  box-shadow: inset 0 0 0 1px rgba(120, 250, 174, 0.26) !important;
}

.loading-plaque i b {
  background: linear-gradient(90deg, #40d982, #78faae 55%, #d8ffe8) !important;
  box-shadow: 0 0 12px rgba(120, 250, 174, 0.55) !important;
}

.loading-overlay.indeterminate .loading-plaque i::before {
  background: linear-gradient(90deg, transparent, rgba(120, 250, 174, 0.95), transparent) !important;
}

.loading-head em {
  color: var(--skoda-electric, #78faae) !important;
}

.loading-sub {
  opacity: 0.78;
  color: var(--skoda-silver, #c8d8cf);
}

/* Short phones: the key visual's empty band is shallower, so tighten the stack
   rather than let the plaque ride up over the car. */
@media (max-height: 680px) {
  .loading-inner {
    padding-top: clamp(8px, 1.3vh, 16px);
  }
  .loading-logo {
    width: min(190px, 50vw);
    height: 38px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .loading-overlay,
  .loading-logo,
  .loading-kv-line {
    transition: none;
    animation: none;
  }
}