/* =====================================================================
   ZEPHYR CIRCUIT — game.css
   The DOM shell over the WebGL canvas: HUD, touch pads, screens.
   Owner: agent-ui (this first pass written by the lead).

   The canvas is full-bleed and everything here floats over it. Nothing
   may scroll, and no control may sit where a thumb naturally covers the
   road.
   ===================================================================== */

/* Vendored, SIL OFL, served from our own origin. See assets/fonts/. */
@font-face {
  font-family: 'Outfit';
  src: url('../fonts/outfit-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Outfit';
  src: url('../fonts/outfit-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Outfit';
  src: url('../fonts/outfit-900.woff2') format('woff2');
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Bungee';
  src: url('../fonts/bungee-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  --ink: #12101a;
  --panel: rgba(20, 17, 30, 0.93);
  --edge: rgba(255, 201, 74, 0.30);
  --paper: #f6f1e8;
  --dim: #a79e93;
  --amber: #ffc94a;
  --ember: #ff7a2f;
  --sky: #6fd8ff;
  --pink: #ff5aa0;
  --good: #7ee08a;

  --ui: 'Outfit', 'Avenir Next', 'Segoe UI', Roboto, system-ui, sans-serif;
  --display: 'Bungee', 'Outfit', Impact, sans-serif;

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--ink);
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
  font-family: var(--ui);
}

#zc-ui {
  position: fixed; inset: 0;
  pointer-events: none;
  color: var(--paper);
  z-index: 2;
  -webkit-user-select: none; user-select: none;
}
#zc-ui button, #zc-ui a, #zc-ui input, #zc-ui .zc-pad, #zc-ui .zc-item { pointer-events: auto; }

/* ------------------------------------------------------------------ HUD */
.zc-hud {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 300ms ease;
}
#zc-ui.is-racing .zc-hud { opacity: 1; }

/* A racing HUD lives in the corners: the middle of the screen is the
   road, and anything placed there is in the way at exactly the moment it
   matters most. */
.zc-place {
  position: absolute;
  top: calc(12px + var(--safe-t)); left: calc(16px + var(--safe-l));
  display: flex; align-items: baseline; gap: 2px;
  text-shadow: 0 2px 14px rgba(0,0,0,0.75);
}
.zc-place b {
  font-family: var(--display);
  font-size: clamp(38px, 9vw, 68px);
  line-height: 0.9;
  color: var(--paper);
}
.zc-place span {
  font-size: clamp(13px, 2.6vw, 20px); font-weight: 700;
  color: var(--amber);
}

.zc-lap {
  position: absolute;
  top: calc(14px + var(--safe-t)); right: calc(16px + var(--safe-r));
  text-align: right;
  text-shadow: 0 2px 14px rgba(0,0,0,0.75);
}
.zc-lap .zc-lbl {
  display: block;
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--dim);
}
.zc-lap b {
  font-family: var(--display);
  font-size: clamp(20px, 4.6vw, 34px);
  letter-spacing: 0.02em;
}

.zc-timing {
  position: absolute;
  top: calc(64px + var(--safe-t)); right: calc(16px + var(--safe-r));
  text-align: right;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 10px rgba(0,0,0,0.7);
}
.zc-timing > div { margin-bottom: 3px; }
.zc-timing span {
  font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--dim); margin-right: 7px;
}
.zc-timing b { font-size: clamp(13px, 2.8vw, 18px); font-weight: 700; }
.zc-best b { color: var(--amber); }

.zc-speed {
  position: absolute;
  bottom: calc(14px + var(--safe-b)); right: calc(18px + var(--safe-r));
  display: flex; align-items: baseline; gap: 5px;
  text-shadow: 0 2px 16px rgba(0,0,0,0.8);
}
.zc-speed b {
  font-family: var(--display);
  font-size: clamp(30px, 7.5vw, 56px);
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
}
.zc-speed span {
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--dim);
}

/* Held item. The icon, name and use hint stay together, so players never
   have to decode an unlabeled symbol. On touch this same panel is the item
   button; desktop keeps the keyboard hint visible. */
.zc-item {
  --item-colour: var(--dim);
  appearance: none;
  position: absolute;
  top: calc(88px + var(--safe-t)); left: calc(16px + var(--safe-l));
  width: min(184px, calc(100vw - 32px)); min-height: 58px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  grid-template-rows: 17px 1fr;
  align-items: center;
  padding: 6px 10px 7px 7px;
  border: 1px solid color-mix(in srgb, var(--item-colour) 58%, transparent);
  border-radius: 14px;
  background:
    linear-gradient(105deg, color-mix(in srgb, var(--item-colour) 22%, rgba(12,10,18,0.86)), rgba(12,10,18,0.74));
  color: var(--paper);
  font-family: var(--ui);
  text-align: left;
  box-shadow: 0 10px 28px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.08);
  opacity: 0.72;
  overflow: hidden;
  transition: opacity 140ms ease, transform 90ms ease, border-color 140ms ease;
}
.zc-item::after {
  content: '';
  position: absolute; inset: auto 0 0;
  height: 3px;
  background: var(--item-colour);
  opacity: 0.9;
  box-shadow: 0 0 14px var(--item-colour);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 180ms ease;
}
.zc-item.has-item { opacity: 1; }
.zc-item.has-item::after { transform: scaleX(1); }
.zc-item.is-down { transform: scale(0.97); }
.zc-item-label {
  grid-column: 2; grid-row: 1;
  font-size: 9px; font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--item-colour);
}
.zc-item-icon {
  grid-column: 1; grid-row: 1 / 3;
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--item-colour) 20%, rgba(0,0,0,0.42));
  border: 1px solid color-mix(in srgb, var(--item-colour) 62%, transparent);
  color: var(--item-colour);
  font-family: 'Segoe UI Symbol', 'Arial Unicode MS', var(--ui);
  font-size: 25px; font-weight: 900; line-height: 1;
  text-align: center;
  text-shadow: 0 0 12px var(--item-colour);
}
.zc-item-copy {
  grid-column: 2; grid-row: 2;
  min-width: 0; align-self: start;
}
.zc-item-copy b, .zc-item-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zc-item-copy b { font-size: 14px; line-height: 1.15; }
.zc-item-copy small { margin-top: 2px; font-size: 9px; line-height: 1; letter-spacing: 0.06em; color: var(--dim); }
.zc-item.is-rolling {
  opacity: 1;
  animation: zc-item-roll 240ms steps(2, end) infinite;
}
.zc-item.is-rolling::after { transform: scaleX(1); animation: zc-item-scan 650ms ease-in-out infinite; }
@keyframes zc-item-roll { 50% { filter: brightness(1.26); } }
@keyframes zc-item-scan { 50% { transform: scaleX(0.36); transform-origin: right; } }

/* Drift charge. Colour matches the sparks on the kart, so the meter and
   the world are saying the same thing. */
.zc-charge {
  position: absolute;
  left: 50%; bottom: calc(20px + var(--safe-b));
  transform: translateX(-50%);
  width: min(320px, 46vw); height: 7px;
  background: rgba(0,0,0,0.5);
  border-radius: 4px;
  overflow: hidden;
  opacity: 0;
  transition: opacity 160ms ease;
}
.zc-charge i {
  display: block; height: 100%;
  transform-origin: left center; transform: scaleX(0);
  background: var(--sky);
  transition: transform 60ms linear, background 180ms ease;
}
.zc-charge[data-tier="2"] i { background: var(--amber); }
.zc-charge[data-tier="3"] i { background: var(--pink); box-shadow: 0 0 16px var(--pink); }

.zc-countdown {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--display);
  font-size: clamp(80px, 22vw, 200px);
  color: var(--paper);
  text-shadow: 0 6px 40px rgba(0,0,0,0.8);
  opacity: 0; pointer-events: none;
  transform: scale(1.4);
  transition: opacity 180ms ease, transform 180ms ease;
}
.zc-countdown.is-on { opacity: 1; transform: scale(1); }
.zc-countdown.is-go { color: var(--good); }

/* ---------------------------------------------------------- touch pads */
.zc-pads { position: absolute; inset: 0; opacity: 0; transition: opacity 240ms ease; }
#zc-ui.is-racing.is-touch .zc-pads { opacity: 1; }
#zc-ui:not(.is-touch) .zc-pads { display: none; }

.zc-pad {
  position: absolute;
  display: grid; place-items: center;
  border-radius: 18px;
  background: rgba(18, 16, 26, 0.42);
  border: 1px solid rgba(255,255,255,0.14);
  color: var(--paper);
  backdrop-filter: blur(3px);
  transition: background 90ms ease, transform 90ms ease;
}
.zc-pad.is-down { background: rgba(255, 201, 74, 0.30); transform: scale(0.97); }
.zc-pad svg { width: 44%; height: 44%; fill: currentColor; opacity: 0.85; }

/* Steering sits in the bottom corners where thumbs already are. */
.zc-left, .zc-right {
  bottom: calc(16px + var(--safe-b));
  width: min(108px, 26vw); height: min(108px, 26vw);
}
.zc-left { left: calc(14px + var(--safe-l)); }
.zc-right { left: calc(14px + var(--safe-l) + min(116px, 28vw)); }

.zc-acts {
  position: absolute;
  right: calc(14px + var(--safe-r));
  bottom: calc(84px + var(--safe-b));
  display: flex; flex-direction: column; gap: 10px;
}
.zc-acts .zc-pad {
  position: static;
  width: min(96px, 23vw); height: min(52px, 13vw);
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
}
.zc-drift { border-color: rgba(111, 216, 255, 0.5); color: var(--sky); }

/* -------------------------------------------------------------- screens */
.zc-overlay {
  position: absolute; inset: 0;
  display: none;
  align-items: center; justify-content: center;
  padding: calc(18px + var(--safe-t)) 18px calc(18px + var(--safe-b));
  background: linear-gradient(180deg, rgba(10,8,16,0.55), rgba(10,8,16,0.86));
  pointer-events: auto;
  overflow-y: auto;
}
.zc-overlay.is-open { display: flex; }

.zc-panel {
  width: min(520px, 100%);
  max-height: 100%;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: 18px;
  padding: clamp(20px, 4.5vw, 34px);
  text-align: center;
  box-shadow: 0 28px 80px rgba(0,0,0,0.72), inset 0 1px 0 rgba(255,255,255,0.06);
  animation: zc-rise 280ms cubic-bezier(0.2, 0.9, 0.3, 1);
}
@keyframes zc-rise { from { opacity: 0; transform: translateY(16px); } }

.zc-logo {
  font-family: var(--display);
  font-size: clamp(30px, 8vw, 52px);
  line-height: 0.94;
  margin: 0 0 10px;
  color: var(--amber);
  text-shadow: 0 0 40px rgba(255,201,74,0.35);
}
.zc-logo span { display: block; color: var(--ember); }

.zc-panel h2 { font-family: var(--display); font-weight: 400; margin: 0 0 10px; font-size: clamp(20px, 5vw, 30px); }
.zc-finish { color: var(--amber); font-size: clamp(34px, 9vw, 54px) !important; }
.zc-kicker { font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--dim); margin-bottom: 8px; }
.zc-tag { font-size: clamp(13px, 3vw, 16px); line-height: 1.6; color: #d8d0c6; margin: 0 0 20px; }

.zc-btn {
  appearance: none; display: block; width: 100%;
  margin: 0 0 10px; padding: 14px 20px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.05);
  color: var(--paper);
  font-family: var(--ui); font-size: 15px; font-weight: 700;
  letter-spacing: 0.04em; cursor: pointer; text-align: center;
  text-decoration: none; box-sizing: border-box;
  transition: background 140ms, border-color 140ms, transform 90ms;
}
.zc-btn:hover { background: rgba(255,255,255,0.11); border-color: rgba(255,255,255,0.32); }
.zc-btn:active { transform: translateY(1px); }
.zc-primary {
  background: linear-gradient(180deg, #ffb43a, #e0761a);
  border-color: rgba(255,220,150,0.6);
  color: #2a1704;
  box-shadow: 0 10px 30px rgba(224,118,26,0.32);
}
.zc-primary:hover { background: linear-gradient(180deg, #ffc352, #f0821f); }
.zc-ghost { background: none; color: var(--dim); }

.zc-table { margin: 4px 0 18px; text-align: left; }
.zc-row {
  display: grid; grid-template-columns: 28px 1fr auto;
  gap: 10px; align-items: baseline;
  padding: 6px 8px; border-radius: 7px;
  font-size: 13px;
}
.zc-row.is-you { background: rgba(255,201,74,0.14); color: var(--amber); font-weight: 700; }
.zc-pos { font-family: var(--display); font-size: 13px; color: var(--dim); }
.zc-row.is-you .zc-pos { color: var(--amber); }
.zc-t { font-variant-numeric: tabular-nums; }

.zc-break { text-align: left; margin-bottom: 16px; }
.zc-brow {
  display: flex; justify-content: space-between;
  padding: 7px 2px; font-size: 13px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.zc-brow b { font-variant-numeric: tabular-nums; }
.zc-brow.zc-total { border-bottom: none; font-size: 15px; margin-top: 4px; }
.zc-brow.zc-total b { color: var(--amber); font-size: 20px; font-family: var(--display); }

.zc-best-line { font-size: 12px; color: var(--dim); margin: 10px 0 0; }
.zc-best-line b { color: var(--amber); }
.zc-keys {
  font-size: 11px; line-height: 2; color: var(--dim);
  margin-top: 18px; padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.zc-keys b { color: var(--paper); }
.zc-link {
  display: inline-block; margin-top: 14px;
  color: var(--amber); text-decoration: none; font-size: 13px;
  border-bottom: 1px solid transparent;
}
.zc-link:hover { border-bottom-color: var(--amber); }

.zc-toast {
  position: absolute; left: 50%; top: calc(84px + var(--safe-t));
  transform: translate(-50%, -8px);
  padding: 10px 18px;
  background: rgba(14,12,20,0.94);
  border: 1px solid var(--edge);
  border-radius: 10px;
  font-size: 13px; font-weight: 700;
  opacity: 0; pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease;
}
.zc-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

.zc-modal {
  position: absolute; inset: 0; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  padding: 18px; background: rgba(8,6,12,0.88); pointer-events: auto;
}
.zc-input {
  width: 100%; padding: 12px 14px; margin-bottom: 14px;
  border-radius: 10px; border: 1px solid rgba(255,255,255,0.2);
  background: rgba(0,0,0,0.42); color: var(--paper);
  font-family: var(--ui); font-size: 16px;   /* 16px: smaller zooms iOS */
  text-align: center;
}
.zc-input:focus { outline: none; border-color: var(--amber); }

/* --------------------------------------------------------- small screens */
/* On touch the bottom-right corner belongs to the action buttons, so the
   speed readout moves to the middle of the dock where nothing else sits.
   Left where it was on desktop, which has no buttons to collide with. */
#zc-ui.is-touch .zc-speed {
  right: auto;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(10px + var(--safe-b));
}
#zc-ui.is-touch .zc-speed b { font-size: clamp(24px, 6vw, 40px); }
#zc-ui.is-touch .zc-item {
  top: auto; left: auto;
  right: calc(14px + var(--safe-r));
  bottom: calc(214px + var(--safe-b));
  width: min(156px, 42vw);
  min-height: 54px;
  grid-template-columns: 44px minmax(0, 1fr);
}
#zc-ui.is-touch .zc-item-icon { width: 38px; height: 38px; font-size: 23px; }

/* Portrait puts the steering pads across the bottom-left and the actions
   bottom-right, so the middle of the dock is not free after all — the
   speed readout and the drift meter have to sit above both. */
@media (orientation: portrait) {
  #zc-ui.is-touch .zc-speed { bottom: calc(142px + var(--safe-b)); }
  #zc-ui.is-touch .zc-charge { bottom: calc(186px + var(--safe-b)); width: min(280px, 62vw); }
}

@media (max-height: 460px) and (orientation: landscape) {
  /* The lap block is large and the clock sits directly under it; at this
     height the two overlapped. Put them side by side instead. */
  .zc-lap { top: calc(8px + var(--safe-t)); right: calc(16px + var(--safe-r)); }
  .zc-lap b { font-size: 22px; }
  .zc-timing { top: calc(8px + var(--safe-t)); right: calc(96px + var(--safe-r)); }
  .zc-timing b { font-size: 13px; }
  .zc-place b { font-size: 40px; }

  .zc-acts { bottom: calc(12px + var(--safe-b)); flex-direction: row; }
  .zc-left, .zc-right { width: min(84px, 15vw); height: min(84px, 15vw); }
  .zc-right { left: calc(14px + var(--safe-l) + min(92px, 17vw)); }
  #zc-ui.is-touch .zc-speed { bottom: calc(8px + var(--safe-b)); }
  #zc-ui.is-touch .zc-speed b { font-size: 30px; }
  .zc-charge { bottom: calc(74px + var(--safe-b)); width: min(240px, 30vw); }
  #zc-ui.is-touch .zc-item {
    right: calc(14px + var(--safe-r));
    bottom: calc(74px + var(--safe-b));
    width: min(150px, 25vw);
    min-height: 50px;
  }
  #zc-ui:not(.is-touch) .zc-item { top: calc(56px + var(--safe-t)); }
  .zc-panel { padding: 16px 20px; }
  .zc-keys { display: none; }
}

@media (max-width: 380px) {
  .zc-panel { padding: 18px 16px; }
  .zc-keys { font-size: 10px; }
  #zc-ui.is-touch .zc-item { width: min(184px, 58vw); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ------------------------------------------------------------- polish pass
   The playfield owns the spectacle. The DOM layer should read like a
   broadcast overlay: a few strong anchors, clear grouping, and controls
   that can be found by a thumb without looking away from the apex. */
#zc-ui {
  isolation: isolate;
  width: 100%; max-width: 100vw;
  overflow: hidden;
}

.zc-hud {
  opacity: 0;
  transition: opacity 260ms ease;
}

.zc-place, .zc-lap, .zc-timing, .zc-speed, .zc-item {
  text-shadow: 0 2px 14px rgba(0,0,0,0.72);
}

.zc-place {
  top: calc(16px + var(--safe-t)); left: calc(16px + var(--safe-l));
  min-width: 92px; padding: 9px 14px 10px 11px;
  display: flex; align-items: baseline; flex-wrap: wrap;
  column-gap: 3px; row-gap: 0;
  border: 1px solid rgba(255,255,255,0.16);
  border-left: 3px solid var(--amber);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(18,16,26,0.76), rgba(18,16,26,0.28));
  box-shadow: 0 12px 34px rgba(0,0,0,0.24), inset 0 1px 0 rgba(255,255,255,0.11);
}
.zc-place i {
  display: block; flex-basis: 100%;
  margin-bottom: 2px;
  font-size: 9px; font-style: normal; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--dim);
}
.zc-place b {
  font-size: clamp(38px, 8vw, 62px);
  line-height: 0.82;
  letter-spacing: -0.04em;
}
.zc-place span {
  font-size: clamp(13px, 2.4vw, 18px); font-weight: 900;
  color: var(--amber);
}
.zc-place small {
  margin-left: 2px; font-size: 10px; font-weight: 700;
  color: rgba(246,241,232,0.55);
}

.zc-lap {
  top: calc(16px + var(--safe-t)); right: calc(16px + var(--safe-r));
  min-width: 128px; padding: 9px 12px 10px;
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto;
  column-gap: 14px; align-items: end;
  text-align: right;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 14px;
  background: linear-gradient(225deg, rgba(18,16,26,0.72), rgba(18,16,26,0.24));
  box-shadow: 0 12px 34px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.10);
}
.zc-lap .zc-lbl {
  grid-column: 1; grid-row: 1;
  margin: 0; font-size: 9px; letter-spacing: 0.22em;
  color: var(--dim);
}
.zc-lap-track {
  grid-column: 1; grid-row: 2;
  max-width: 116px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
  color: rgba(246,241,232,0.72);
}
.zc-lap b {
  grid-column: 2; grid-row: 1 / 3;
  font-size: clamp(24px, 4.4vw, 34px); line-height: 0.92;
}

.zc-timing {
  top: calc(92px + var(--safe-t)); right: calc(16px + var(--safe-r));
  width: min(206px, 30vw); min-width: 152px;
  padding: 8px 12px 9px;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(12,10,18,0.90), rgba(12,10,18,0.82));
  box-shadow: 0 10px 26px rgba(0,0,0,0.24), inset 0 1px 0 rgba(255,255,255,0.10);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.zc-timing::before {
  content: 'Race clock'; display: block; margin-bottom: 5px;
  text-align: left; font-size: 8px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--dim);
}
.zc-timing > div {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 2px;
}
.zc-timing span { margin: 0; font-size: 8px; letter-spacing: 0.18em; }
.zc-timing b { font-size: clamp(13px, 2.5vw, 17px); }
.zc-timing .zc-time b { color: var(--paper); }
.zc-timing .zc-best b { color: var(--amber); }

.zc-item {
  top: calc(122px + var(--safe-t));
  width: min(194px, calc(100vw - 32px)); min-height: 60px;
  border-color: rgba(255,255,255,0.18);
  background: linear-gradient(115deg, color-mix(in srgb, var(--item-colour) 26%, rgba(12,10,18,0.92)), rgba(12,10,18,0.64));
  box-shadow: 0 14px 34px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.12);
}
.zc-item.has-item { border-color: color-mix(in srgb, var(--item-colour) 74%, white 8%); }
.zc-item::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,0.12) 50%, transparent 80%);
  transform: translateX(-130%); pointer-events: none;
}
.zc-item.has-item::before { animation: zc-item-glint 2.8s ease-in-out infinite; }
@keyframes zc-item-glint { 50%, 100% { transform: translateX(130%); } }
.zc-item-label { font-size: 8px; letter-spacing: 0.24em; }
.zc-item-copy b { font-size: 15px; letter-spacing: 0.01em; }
.zc-item-copy small { font-size: 9px; }
.zc-item.is-empty { opacity: 0.62; }

.zc-speed {
  right: calc(18px + var(--safe-r)); bottom: calc(18px + var(--safe-b));
  width: min(196px, 24vw); min-width: 146px;
  display: block; padding: 8px 12px 9px;
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(15,13,23,0.12), rgba(15,13,23,0.58));
  box-shadow: 0 14px 30px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.10);
}
.zc-speed-kicker {
  display: block; margin-bottom: 1px;
  font-size: 8px !important; font-weight: 700; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--dim);
}
.zc-speed-readout { display: flex; align-items: baseline; gap: 6px; }
.zc-speed-readout b {
  font-size: clamp(32px, 7vw, 54px); line-height: 0.84;
  letter-spacing: -0.045em;
}
.zc-speed-readout span {
  font-size: 9px !important; font-weight: 700; letter-spacing: 0.18em;
  color: var(--dim);
}
.zc-speed-fill {
  display: block; width: 100%; height: 4px; margin-top: 8px;
  border-radius: 3px; background: rgba(255,255,255,0.15);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 100ms linear;
}
.zc-speed-fill::after {
  content: ''; display: block; width: 100%; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, var(--sky), var(--amber), var(--ember));
  box-shadow: 0 0 12px rgba(255,201,74,0.42);
}

.zc-charge {
  bottom: calc(30px + var(--safe-b));
  width: min(360px, 44vw); height: 10px;
  padding: 2px; border: 1px solid rgba(255,255,255,0.24);
  background: rgba(7,6,12,0.68);
  box-shadow: 0 6px 18px rgba(0,0,0,0.28), 0 0 20px rgba(111,216,255,0.11);
}
.zc-charge::before {
  content: 'Drift charge'; position: absolute; left: 0; bottom: 13px;
  font-size: 8px; font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase; color: rgba(246,241,232,0.68);
}
.zc-charge::after {
  content: 'READY'; position: absolute; right: 0; bottom: 13px;
  font-size: 8px; font-weight: 900; letter-spacing: 0.16em; color: var(--sky);
}
.zc-charge[data-tier="2"]::after { content: 'TIER 2'; color: var(--amber); }
.zc-charge[data-tier="3"]::after { content: 'TIER 3'; color: var(--pink); }
.zc-charge i { border-radius: 3px; box-shadow: 0 0 12px currentColor; }

/* The start cue is a complete moment: context above the number, a launch
   instruction below it, and a quiet ring that survives bright scenery. */
.zc-countdown {
  z-index: 1; display: grid; place-items: center;
  background: radial-gradient(circle at center, rgba(14,12,22,0.20), rgba(14,12,22,0.02) 28%, rgba(7,6,12,0.32) 100%);
  transform: none;
}
.zc-countdown::before {
  content: ''; position: absolute; width: min(54vw, 500px); height: min(54vw, 500px);
  border: 1px solid rgba(255,255,255,0.18); border-radius: 50%;
  box-shadow: 0 0 0 14px rgba(255,255,255,0.025), 0 0 90px rgba(255,201,74,0.14);
  opacity: 0; transform: scale(0.88);
}
.zc-countdown.is-on::before { opacity: 1; transform: scale(1); transition: opacity 300ms, transform 600ms cubic-bezier(0.2,0.8,0.2,1); }
.zc-countdown-content {
  position: relative; z-index: 1;
  min-width: min(270px, 64vw); padding: 22px 34px 25px;
  display: flex; flex-direction: column; align-items: center;
  border: 1px solid rgba(255,255,255,0.17); border-radius: 28px;
  background: linear-gradient(180deg, rgba(22,19,33,0.46), rgba(10,8,16,0.18));
  box-shadow: 0 22px 70px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.12);
  backdrop-filter: blur(4px);
  animation: zc-countdown-in 420ms cubic-bezier(0.16,0.9,0.3,1) both;
}
@keyframes zc-countdown-in { from { opacity: 0; transform: translateY(12px) scale(0.94); } }
.zc-countdown-kicker {
  font-size: 10px; font-weight: 900; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--amber);
}
.zc-countdown-value {
  display: block; margin: 4px 0 1px;
  font-family: var(--display); font-size: clamp(112px, 25vw, 220px);
  line-height: 0.82; color: var(--paper);
  letter-spacing: -0.05em; text-shadow: 0 8px 40px rgba(0,0,0,0.62), 0 0 28px rgba(255,255,255,0.16);
  animation: zc-countdown-pop 280ms cubic-bezier(0.12,0.85,0.2,1) both;
}
@keyframes zc-countdown-pop { from { opacity: 0; transform: scale(0.68); } 70% { transform: scale(1.07); } }
.zc-countdown.is-3 .zc-countdown-value { color: var(--paper); }
.zc-countdown.is-2 .zc-countdown-value { color: var(--amber); }
.zc-countdown.is-1 .zc-countdown-value { color: var(--ember); }
.zc-countdown.is-go .zc-countdown-value { color: var(--good); text-shadow: 0 8px 40px rgba(0,0,0,0.62), 0 0 34px rgba(126,224,138,0.48); }
.zc-countdown-sub {
  font-size: 12px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(246,241,232,0.86);
}
.zc-countdown-track {
  margin-top: 13px; padding-top: 11px; width: 100%;
  border-top: 1px solid rgba(255,255,255,0.12);
  text-align: center; font-size: 9px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--dim);
}

/* ------------------------------------------------------------- touch pass */
.zc-pad {
  touch-action: none; -webkit-tap-highlight-color: transparent;
  min-width: 52px; min-height: 52px;
  border-color: rgba(255,255,255,0.22);
  background: linear-gradient(145deg, rgba(25,23,34,0.68), rgba(15,13,23,0.30));
  box-shadow: 0 12px 28px rgba(0,0,0,0.24), inset 0 1px 0 rgba(255,255,255,0.12);
}
.zc-pad::after {
  position: absolute; bottom: 7px;
  font-size: 7px; font-weight: 900; letter-spacing: 0.18em;
  color: rgba(246,241,232,0.48);
}
.zc-left::after, .zc-right::after { content: 'STEER'; }
.zc-brake::after { content: 'SLOW'; }
.zc-drift::after { content: 'CHARGE'; color: rgba(111,216,255,0.68); }
.zc-pad.is-down { border-color: var(--amber); background: linear-gradient(145deg, rgba(255,201,74,0.36), rgba(53,35,29,0.50)); box-shadow: 0 6px 18px rgba(255,201,74,0.20), inset 0 1px 0 rgba(255,255,255,0.22); }
.zc-left, .zc-right {
  bottom: calc(16px + var(--safe-b));
  width: clamp(78px, 22vw, 112px); height: clamp(78px, 22vw, 112px);
  border-radius: 50%;
}
.zc-left { left: calc(14px + var(--safe-l)); }
.zc-right { left: auto; right: calc(14px + var(--safe-r)); }
.zc-left svg, .zc-right svg { width: 35%; height: 35%; opacity: 0.96; }
.zc-acts {
  right: calc(14px + var(--safe-r)); bottom: calc(122px + var(--safe-b));
  gap: 8px;
}
.zc-acts .zc-pad {
  width: clamp(82px, 22vw, 108px); height: clamp(50px, 11vw, 60px);
  border-radius: 15px; font-size: 10px; letter-spacing: 0.16em;
}
.zc-drift { border-color: rgba(111,216,255,0.62); color: var(--sky); }
.zc-brake { color: rgba(246,241,232,0.78); }

/* ----------------------------------------------------------- screens pass */
.zc-overlay {
  padding: calc(18px + var(--safe-t)) max(14px, calc(18px + var(--safe-l))) calc(18px + var(--safe-b));
  background: radial-gradient(circle at 50% 38%, rgba(80,47,53,0.26), rgba(8,6,14,0.82) 68%), rgba(8,6,14,0.38);
  backdrop-filter: blur(7px) saturate(0.9);
}
.zc-panel {
  width: min(580px, calc(100vw - 28px));
  padding: clamp(22px, 4.2vw, 36px);
  border-color: rgba(255,201,74,0.42); border-radius: 22px;
  box-shadow: 0 28px 100px rgba(0,0,0,0.72), inset 0 1px 0 rgba(255,255,255,0.10);
}
.zc-panel h2 { letter-spacing: -0.02em; }
.zc-grid-flag, .zc-result-overline {
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 10px; font-size: 9px; font-weight: 900;
  letter-spacing: 0.26em; text-transform: uppercase; color: var(--amber);
}
.zc-grid-flag::before, .zc-result-overline::before {
  content: ''; display: inline-block; width: 20px; height: 2px;
  background: currentColor; box-shadow: 8px 0 0 rgba(255,255,255,0.26);
}
.zc-grid .zc-tag { margin-bottom: 16px; }
.zc-grid-meta {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px;
  margin: 2px 0 22px;
}
.zc-grid-meta span {
  padding: 10px 6px 9px; border: 1px solid rgba(255,255,255,0.10);
  border-radius: 10px; background: rgba(255,255,255,0.035);
}
.zc-grid-meta b, .zc-grid-meta small { display: block; }
.zc-grid-meta b { font-family: var(--display); font-size: 19px; color: var(--paper); }
.zc-grid-meta small { margin-top: 2px; font-size: 8px; letter-spacing: 0.16em; color: var(--dim); }
.zc-btn {
  min-height: 54px; margin-bottom: 10px; border-radius: 14px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.16);
}
.zc-btn:focus-visible, .zc-item:focus-visible, .zc-pad:focus-visible, .zc-link:focus-visible, .zc-input:focus-visible {
  outline: 3px solid rgba(111,216,255,0.92); outline-offset: 3px;
}

.zc-results { text-align: left; }
.zc-results .zc-result-overline, .zc-results .zc-section-head { text-align: left; }
.zc-result-hero {
  position: relative; overflow: hidden; margin: 0 0 18px; padding: 18px 20px 17px;
  border: 1px solid rgba(255,201,74,0.30); border-radius: 16px;
  background: radial-gradient(circle at 80% 12%, rgba(255,201,74,0.18), transparent 45%), rgba(255,201,74,0.06);
}
.zc-result-hero::after {
  content: ''; position: absolute; width: 150px; height: 150px; right: -54px; top: -74px;
  border: 1px solid rgba(255,201,74,0.28); border-radius: 50%; box-shadow: 0 0 0 12px rgba(255,201,74,0.04);
}
.zc-results.is-podium .zc-result-hero { border-color: rgba(111,216,255,0.32); background: radial-gradient(circle at 80% 12%, rgba(111,216,255,0.16), transparent 45%), rgba(111,216,255,0.05); }
.zc-results.is-finish .zc-result-hero { border-color: rgba(255,255,255,0.18); background: rgba(255,255,255,0.04); }
.zc-finish-label { display: block; font-size: 9px; font-weight: 900; letter-spacing: 0.28em; text-transform: uppercase; color: var(--amber); }
.zc-finish { margin: 5px 0 13px !important; font-size: clamp(38px, 8vw, 58px) !important; line-height: 0.9; text-align: left; }
.zc-result-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 320px; }
.zc-result-meta span { display: flex; flex-direction: column; gap: 2px; }
.zc-result-meta small { font-size: 8px; font-weight: 700; letter-spacing: 0.18em; color: var(--dim); }
.zc-result-meta b { font-size: 15px; font-variant-numeric: tabular-nums; }
.zc-section-head, .zc-score-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.zc-section-head { margin-bottom: 6px; font-size: 9px; font-weight: 900; letter-spacing: 0.22em; text-transform: uppercase; color: var(--dim); }
.zc-section-head small { font-size: 8px; font-weight: 700; color: rgba(246,241,232,0.42); }
.zc-table { margin: 0 0 14px; padding: 3px 4px; border: 1px solid rgba(255,255,255,0.09); border-radius: 12px; background: rgba(0,0,0,0.18); }
.zc-row { min-height: 31px; padding: 5px 8px; font-size: 13px; }
.zc-row.is-you { box-shadow: inset 3px 0 0 var(--amber); background: linear-gradient(90deg, rgba(255,201,74,0.18), rgba(255,201,74,0.05)); }
.zc-score-head { margin: 2px 0 6px; padding: 10px 12px; border: 1px solid rgba(255,201,74,0.24); border-radius: 11px 11px 0 0; background: rgba(255,201,74,0.07); }
.zc-score-head span { font-size: 9px; font-weight: 900; letter-spacing: 0.20em; text-transform: uppercase; color: var(--dim); }
.zc-score-head b { font-family: var(--display); font-size: 20px; color: var(--amber); }
.zc-break { margin: 0 0 17px; padding: 1px 12px 8px; border: 1px solid rgba(255,255,255,0.09); border-top: 0; border-radius: 0 0 11px 11px; background: rgba(0,0,0,0.18); }
.zc-brow { padding: 6px 0; font-size: 12px; }
.zc-brow.zc-total { margin-top: 3px; padding-top: 9px; border-top: 1px solid rgba(255,255,255,0.12); }
.zc-brow.zc-total b { font-size: 21px; }

@media (orientation: portrait) {
  #zc-ui.is-touch .zc-speed { bottom: calc(154px + var(--safe-b)); width: min(174px, 48vw); min-width: 140px; }
  #zc-ui.is-touch .zc-speed-readout b { font-size: clamp(28px, 7vw, 40px); }
  #zc-ui.is-touch .zc-item { top: auto; left: auto; right: calc(14px + var(--safe-r)); bottom: calc(238px + var(--safe-b)); width: min(194px, calc(100vw - 28px)); min-height: 58px; }
  #zc-ui.is-touch .zc-charge { bottom: calc(204px + var(--safe-b)); width: min(300px, 68vw); }
}

@media (max-height: 460px) and (orientation: landscape) {
  .zc-place { top: calc(8px + var(--safe-t)); padding: 6px 11px 7px; }
  .zc-place b { font-size: 40px; }
  /* The lap card and the race clock share the top-right corner in landscape.
     The clock's offset has to clear the *measured* lap card, not an assumed
     one: `.zc-lap` is a `1fr auto` grid, so its width is the track name
     (up to 116px) plus the lap fraction (up to 34px of display type) plus
     gap and padding — about 208px, which ran straight under a clock parked
     at right:112px and clipped "LAP" to "AP" and "Gullwing Bay" to "Bay".
     Bound the card here so the corner is deterministic, then park the clock
     just outside it. */
  .zc-lap { top: calc(8px + var(--safe-t)); padding: 6px 10px 7px; min-width: 0; max-width: 164px; column-gap: 10px; }
  .zc-lap-track { max-width: 78px; font-size: 9px; }
  .zc-lap b { font-size: 26px; }
  .zc-timing { top: calc(8px + var(--safe-t)); right: calc(190px + var(--safe-r)); width: 170px; min-width: 0; padding: 6px 9px; }
  .zc-timing::before { margin-bottom: 2px; }
  .zc-item { top: calc(64px + var(--safe-t)); }
  .zc-acts { right: calc(14px + var(--safe-r)); bottom: calc(14px + var(--safe-b)); flex-direction: row; }
  .zc-left, .zc-right { width: min(84px, 15vw); height: min(84px, 15vw); }
  .zc-right { left: calc(14px + var(--safe-l) + min(92px, 17vw)); right: auto; }
  #zc-ui.is-touch .zc-speed { right: calc(172px + var(--safe-r)); left: auto; bottom: calc(9px + var(--safe-b)); width: 128px; min-width: 0; padding: 6px 8px; }
  #zc-ui.is-touch .zc-speed-readout b { font-size: 30px; }
  .zc-charge { bottom: calc(76px + var(--safe-b)); width: min(250px, 31vw); }
  #zc-ui.is-touch .zc-item { right: calc(14px + var(--safe-r)); bottom: calc(76px + var(--safe-b)); width: min(170px, 28vw); min-height: 50px; }
  #zc-ui.is-touch .zc-item-icon { width: 36px; height: 36px; font-size: 21px; }
  .zc-panel { padding: 16px 20px; }
  .zc-keys { display: none; }
}

@media (max-width: 380px) {
  .zc-place { min-width: 82px; padding-left: 9px; }
  .zc-place b { font-size: 38px; }
  .zc-lap { min-width: 111px; padding-left: 9px; padding-right: 9px; }
  .zc-lap-track { max-width: 84px; font-size: 9px; }
  .zc-timing { width: 142px; min-width: 0; padding-left: 9px; padding-right: 9px; }
  .zc-timing span { font-size: 7px; }
  .zc-timing b { font-size: 12px; }
  #zc-ui.is-touch .zc-item { width: min(194px, calc(100vw - 28px)); }
  .zc-countdown-content { min-width: 236px; padding-left: 22px; padding-right: 22px; }
  .zc-countdown-value { font-size: clamp(96px, 27vw, 150px); }
  .zc-countdown-sub { font-size: 10px; }
  .zc-panel { padding: 20px 15px; }
  .zc-result-meta b { font-size: 13px; }
}

/* ------------------------------------------------------------------
   Keep a panel's primary action reachable on short screens.

   `.zc-panel` is `overflow-y: auto; max-height: 100%`, so on a 568- or
   390-tall viewport the results table pushes "Race again" below the fold.
   It *is* reachable — measured: the panel scrolls (807px of content in a
   530px box) and both a wheel and a touch-drag bring the button back on
   screen — so this was never a dead end. The problem is that the last
   visible row is "Round score", which reads as the natural end of the
   card, and nothing tells the player there is a button under it. A player
   who does not think to scroll a results screen concludes the game hung.

   Pinning the trailing action to the bottom of its own scroll box means
   the way out of a screen is always on screen. It costs nothing on tall
   viewports, where the panel does not overflow and sticky is inert.
   ------------------------------------------------------------------ */
.zc-panel > .zc-btn:last-child {
  position: sticky;
  bottom: 0;
  z-index: 1;
  margin-bottom: 0;
}

/* Fade the scrolling content out behind the pinned button rather than
   letting rows slide under a hard edge. The button is width:100% inside
   the panel's padding, so content can only ever appear above it — a
   spread upward is all this needs, and box-shadow never affects layout
   or the scrollable area. */
.zc-panel > .zc-btn:last-child::before {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 100%;
  height: 26px;
  background: linear-gradient(180deg, rgba(20, 17, 30, 0), #14111e);
  pointer-events: none;
}
/* The sticky button sits on the panel's padding box, so `bottom: 0` still
   leaves the panel's bottom padding below it — and rows scroll into that
   strip. Paint it out with a downward-offset spread. box-shadow is used
   deliberately: it covers the gap without touching layout or the
   scrollable area, which a pseudo-element with negative insets would.

   The cover is the *opaque* form of --panel (which is 0.93 alpha). At 93%
   a standings row still ghosted through the strip in landscape; the panel
   itself keeps its translucency, only this 40px cover is solid, and
   against the panel's own fill the difference is not visible. */
.zc-panel > .zc-btn:last-child {
  box-shadow: 0 30px 0 12px #14111e;
}
.zc-panel > .zc-primary:last-child {
  /* Same cover, keeping the primary's warm glow. */
  box-shadow: 0 10px 30px rgba(224, 118, 26, 0.32), 0 30px 0 12px #14111e;
}