/* JETOUR G700 Kiosk Race — touch driving controls (built by js/input.js inside uiRoot).
   Sizes use container units of the overlay (falls back to vh), so the controls stay correct if the UI
   root is scaled as a 1920x1080 design canvas. Every control is >= 90 px; pedals much larger at 1080p. */

.inp-overlay {
  --inp-accent: #f2a43a;
  --inp-accent-rgb: 242, 164, 58;
  --inp-brake: #ff5b4f;
  --inp-brake-rgb: 255, 91, 79;
  --inp-glass: rgba(8, 11, 15, 0.72);         /* dark enough for white labels on sand and snow */
  --inp-line: rgba(255, 255, 255, 0.72);
  --inp-text: #ffffff;
  --inp-muted: rgba(255, 255, 255, 0.82);
  --u: 1vh;
  --inp-gas-h: clamp(160px, calc(38 * var(--u)), 420px);   /* GAS height: VIEW sits above it (also css/mobile.css) */

  position: absolute;
  inset: 0;
  z-index: 40;
  display: none;
  pointer-events: none;
  container-type: size;
  font-family: 'Rajdhani', 'Segoe UI', system-ui, sans-serif;
  color: var(--inp-text);
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  overscroll-behavior: none;
}
@supports (height: 1cqh) {
  .inp-overlay { --u: 1cqh; }
}
.inp-overlay.is-visible { display: block; }
/* countdown: the controls are already shown, dimmed (a finger can rest on GAS for GO) */
.inp-overlay.is-preview { opacity: 0.55; }
/* boot: drawn once, invisibly, so the first GO does not pay for the first paint */
.inp-overlay.is-warm:not(.is-visible) { display: block; opacity: 0.01; pointer-events: none; }
.inp-overlay.is-warm:not(.is-visible) [data-ctl] { pointer-events: none; }
.inp-overlay.is-fixed { position: fixed; }
.inp-overlay *, .inp-overlay *::before, .inp-overlay *::after { box-sizing: border-box; }
.inp-overlay [data-ctl] { pointer-events: auto; touch-action: none; cursor: pointer; }
.inp-overlay svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* ------------------------------------------------------------ shared control face */
.inp-face {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 3px solid var(--inp-line);
  border-radius: 18px;
  background: var(--inp-glass);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: transform 0.06s ease-out, background-color 0.06s, box-shadow 0.06s, border-color 0.06s;
}

/* ------------------------------------------------------------ steering (left side) */
.inp-steer {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 46%;
  height: 72%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 0 2% calc(3.2 * var(--u));
}
.inp-steer-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, calc(2 * var(--u)), 28px);
}
.inp-wheel {
  flex: none;
  width: clamp(150px, calc(33 * var(--u)), 380px);
  height: clamp(150px, calc(33 * var(--u)), 380px);
  border-radius: 50%;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.55);   /* round element: a box-shadow, not an expensive drop-shadow filter */
}
.inp-wheel-svg { transform-origin: 50% 50%; will-change: transform; }
.inp-wheel .w-disc { fill: rgba(8, 11, 15, 0.55); }
.inp-wheel .w-rim { fill: none; stroke: rgba(255, 255, 255, 0.92); stroke-width: 15; }
.inp-wheel .w-rim-in { fill: none; stroke: rgba(0, 0, 0, 0.35); stroke-width: 3; }
.inp-wheel .w-spoke { fill: rgba(255, 255, 255, 0.80); }
.inp-wheel .w-hub { fill: rgba(12, 16, 20, 0.88); stroke: rgba(255, 255, 255, 0.88); stroke-width: 4; }
.inp-wheel .w-mark { fill: none; stroke: var(--inp-accent); stroke-width: 16; }
.inp-wheel .w-logo {
  fill: #ffffff;
  font: 700 17px 'Rajdhani', 'Segoe UI', sans-serif;
  letter-spacing: 1px;
  text-anchor: middle;
}
.inp-wheel.is-held { box-shadow: 0 0 22px rgba(var(--inp-accent-rgb), 0.85); }
.inp-wheel.is-held .w-rim { stroke: #ffffff; }
.inp-wheel.is-held .w-disc { fill: rgba(var(--inp-accent-rgb), 0.16); }

.inp-pad {
  flex: none;
  width: clamp(100px, calc(12.5 * var(--u)), 150px);
  height: clamp(110px, calc(16 * var(--u)), 190px);
  padding: 5px;                         /* invisible extra hit area for fat fingers */
}
.inp-pad .inp-face svg { width: 56%; height: 56%; color: #ffffff; }

.inp-hint {
  margin-top: calc(1.2 * var(--u));
  padding: 0.25em 0.8em;
  border-radius: 0.6em;
  background: rgba(8, 11, 15, 0.78);
  font-size: clamp(14px, calc(2 * var(--u)), 24px);
  font-weight: 700;
  letter-spacing: 0.22em;
  color: #ffffff;
  white-space: nowrap;
  pointer-events: none;
}

/* "pads" layout: no wheel, bigger arrow pads; "wheel" layout: no pads */
.inp-overlay[data-steer="pads"] .inp-wheel { display: none; }
.inp-overlay[data-steer="pads"] .inp-steer { pointer-events: none; }
.inp-overlay[data-steer="pads"] .inp-steer-row { gap: clamp(16px, calc(5 * var(--u)), 64px); }
.inp-overlay[data-steer="pads"] .inp-pad {
  width: clamp(110px, calc(21 * var(--u)), 250px);
  height: clamp(110px, calc(24 * var(--u)), 270px);
}
.inp-overlay[data-steer="wheel"] .inp-pad { display: none; }

/* ------------------------------------------------------------ pedals + camera (right side) */
.inp-pedals {
  position: absolute;
  right: 2.4%;
  bottom: calc(3.2 * var(--u));
  display: flex;
  align-items: flex-end;
  gap: clamp(12px, calc(2.2 * var(--u)), 32px);
  pointer-events: none;
}
.inp-pedal { flex: none; padding: 7px; }
.inp-brake {
  width: clamp(110px, calc(20 * var(--u)), 240px);
  height: clamp(110px, calc(23 * var(--u)), 260px);
}
.inp-gas {
  width: clamp(106px, calc(16 * var(--u)), 200px);
  height: var(--inp-gas-h);
}
.inp-pedal .inp-face {
  border-radius: 20px;
  background:
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.13) 0 7px, transparent 7px 20px),
    var(--inp-glass);
}
.inp-gas .inp-face { border-color: rgba(var(--inp-accent-rgb), 0.95); }
.inp-brake .inp-face { border-color: rgba(var(--inp-brake-rgb), 0.95); }
.inp-label {
  font-size: clamp(22px, calc(3.6 * var(--u)), 42px);
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1;
  padding-left: 0.16em;                 /* optically centre the letter-spaced word */
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.95);
}
.inp-chev {
  font-size: clamp(18px, calc(3 * var(--u)), 34px);
  line-height: 1;
  color: var(--inp-accent);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.95);
}
.inp-gas .inp-label { color: var(--inp-accent); }
.inp-brake .inp-label { color: #ffffff; }                /* white on dark glass; the red is the border */
.inp-brake .inp-face { border-width: 4px; }
.inp-sub {
  font-size: clamp(14px, calc(1.7 * var(--u)), 20px);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.85);
  margin-top: 0.3em;
}

.inp-gas.is-down .inp-face {
  background:
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0 7px, transparent 7px 20px),
    rgba(var(--inp-accent-rgb), 0.62);
  border-color: var(--inp-accent);
  transform: translateY(4px) scale(0.97);
  box-shadow: 0 0 34px rgba(var(--inp-accent-rgb), 0.8);
}
.inp-brake.is-down .inp-face {
  background:
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0 7px, transparent 7px 20px),
    rgba(var(--inp-brake-rgb), 0.58);
  border-color: var(--inp-brake);
  transform: translateY(4px) scale(0.97);
  box-shadow: 0 0 34px rgba(var(--inp-brake-rgb), 0.75);
}
.inp-gas.is-down .inp-label, .inp-gas.is-down .inp-chev { color: #1b1306; text-shadow: none; }   /* dark ink on the lit orange pedal */
.inp-brake.is-down .inp-label { color: #ffffff; }

.inp-cam {
  position: absolute;
  right: 2.4%;
  bottom: calc(3.2 * var(--u) + var(--inp-gas-h) + 2.6 * var(--u));
  width: clamp(98px, calc(11 * var(--u)), 130px);
  height: clamp(98px, calc(11 * var(--u)), 130px);
  padding: 4px;
}
.inp-cam .inp-face { border-radius: 50%; gap: 0; }
.inp-cam .inp-face svg { width: 46%; height: 46%; color: #ffffff; }
.inp-cam .inp-face span {
  font-size: clamp(15px, calc(1.7 * var(--u)), 19px);
  font-weight: 700;
  letter-spacing: 0.18em;
  padding-left: 0.18em;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.95);
}

.inp-pad.is-down .inp-face,
.inp-cam.is-down .inp-face {
  background: rgba(var(--inp-accent-rgb), 0.58);
  border-color: var(--inp-accent);
  transform: scale(0.95);
  box-shadow: 0 0 26px rgba(var(--inp-accent-rgb), 0.75);
}

/* a wheel, gamepad or the keyboard drives this race: the touch steering and pedals are ignored (a bystander's touch must
   not brake or steer the player's car), so they are dimmed with a short label; VIEW still works. They still take touches
   (ignored by js/input.js), so a touch player gets them back once the other device has been left alone for 3 s. */
.inp-overlay.is-passive .inp-steer, .inp-overlay.is-passive .inp-pedals { opacity: 0.28; }
.inp-passive-label { display: none; }
.inp-overlay.is-passive .inp-passive-label {
  display: block; position: absolute; right: 2%; bottom: calc(var(--u) * 22); pointer-events: none;   /* over the dimmed pedals, clear of VIEW */
  padding: 6px 14px; border-radius: 10px; background: rgba(8, 11, 15, 0.78); border: 1px solid rgba(255, 255, 255, 0.35);
  font-weight: 700; font-size: clamp(15px, calc(var(--u) * 2.2), 26px); letter-spacing: 0.12em; color: #fff;
}
.inp-passive-label:empty { display: none !important; }

/* ------------------------------------------------------------ narrow / portrait screens */
/* 5:4 / 4:3: the steering block keeps to the left edge so the ▶ pad does not end up over the car at screen centre */
@container (max-aspect-ratio: 4 / 3) {
  .inp-steer { width: 46%; height: 55%; align-items: flex-start; padding-left: 1.5%; }
  .inp-steer-row { gap: clamp(8px, 1.2cqw, 16px); }
  .inp-wheel { width: clamp(130px, 22cqw, 280px); height: clamp(130px, 22cqw, 280px); }
  .inp-pad { width: 96px; height: 110px; }
  .inp-hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .inp-face { transition: none; }
}

/* ---------- the kiosk: finger drag steering (touchSteer 'drag', 15 Oct 2026). The whole game area steers; no wheel,
   pads, pedals or camera button (the speed is automatic). The marker: a dot where the finger landed, a bar out to it. */
.inp-drag { display: none; }
.inp-overlay[data-steer="drag"] .inp-drag { display: block; position: absolute; inset: 0; pointer-events: auto; touch-action: none; }
.inp-overlay[data-steer="drag"] .inp-steer, .inp-overlay[data-steer="drag"] .inp-pedals, .inp-overlay[data-steer="drag"] .inp-cam { display: none; }
.inp-drag-dot, .inp-drag-bar { position: absolute; display: none; pointer-events: none; }
.inp-drag.is-on .inp-drag-dot, .inp-drag.is-on .inp-drag-bar { display: block; }
.inp-drag-dot { left: var(--dx); top: var(--dy); width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%;
  border: 3px solid rgba(242, 164, 58, .9); background: rgba(0, 0, 0, .25); }
.inp-drag-bar { left: var(--bl); top: var(--dy); width: var(--bw); height: 8px; margin-top: -4px; border-radius: 4px; background: rgba(242, 164, 58, .85); }
.inp-drag-hint { position: absolute; left: 50%; bottom: 6%; translate: -50% 0; padding: 10px 22px; border-radius: 999px; pointer-events: none;
  background: rgba(10, 13, 17, .6); color: #fff; font: 700 clamp(14px, 2.2vmin, 26px) / 1.2 Rajdhani, system-ui, sans-serif; letter-spacing: .12em;
  white-space: nowrap; transition: opacity .4s; }
.inp-drag.is-on .inp-drag-hint { opacity: 0; }

/* ---------- RESTART (input.restartButton, the kiosk): bottom right of the race screen, above the drag area; the first tap
   asks for a second one (main.js), so a stray touch never throws a good race away */
.inp-restart { display: none; }
.inp-overlay.has-restart .inp-restart { display: block; position: absolute; right: 2.4%; bottom: 3%; width: clamp(96px, calc(10 * var(--u)), 124px);
  height: clamp(96px, calc(10 * var(--u)), 124px); padding: 4px; pointer-events: auto; }
.inp-restart .inp-face { border-radius: 50%; gap: 0; border-color: rgba(255, 255, 255, 0.55); }
.inp-restart .inp-face b { font-size: clamp(30px, calc(3.6 * var(--u)), 44px); line-height: 1; font-weight: 700; }
.inp-restart .inp-face span { font-size: clamp(12px, calc(1.4 * var(--u)), 16px); font-weight: 700; letter-spacing: 0.14em; padding-left: 0.14em;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.95); }
.inp-restart.is-down .inp-face, .inp-overlay.restart-armed .inp-restart .inp-face { background: rgba(var(--inp-accent-rgb), 0.58);
  border-color: var(--inp-accent); box-shadow: 0 0 26px rgba(var(--inp-accent-rgb), 0.75); }
.inp-restart.is-down .inp-face { transform: scale(0.95); }
/* with RESTART on screen the steering hint keeps clear of it on narrow screens (wraps to two lines instead) */
.inp-overlay.has-restart .inp-drag-hint { max-width: calc(100% - 2 * (2.4% + clamp(96px, calc(10 * var(--u)), 124px) + 10px)); white-space: normal; text-align: center; }