/* JonnyVroomVroom — mobile layer.
   Everything here is scoped to body.touch-ui, which mobile.js adds on touch-first devices. */

:root {
  --m-safe-t: env(safe-area-inset-top, 0px);
  --m-safe-r: env(safe-area-inset-right, 0px);
  --m-safe-b: env(safe-area-inset-bottom, 0px);
  --m-safe-l: env(safe-area-inset-left, 0px);
  --m-ink: #f4f2ef;
  --m-paper: #f0ede8;
  --m-accent: #ef7159;
  --m-glass: #13212870;
  --m-glass-hi: #f0ede833;
  --m-line: #ffffff55;
}

#m-root, #m-pause, #m-rotate, #m-toast, #m-hint { display: none; }

body.touch-ui {
  touch-action: manipulation;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
body.touch-ui #scene { touch-action: none; }

/* The bundle's own 4-button strip is replaced. */
body.touch-ui #touch { display: none !important; }

/* Keep SOUND on the right even when it is the header's only visible item. */
header #sound { margin-left: auto; }
body.touch-ui .keys { display: none; }

/* HUD never eats touches meant for the controls underneath. */
body.touch-ui #hud, body.touch-ui #hud * { pointer-events: none; }

/* ---------- Intro on short (landscape phone) screens ---------- */
@media (max-height: 520px) {
  body.touch-ui header { top: calc(12px + var(--m-safe-t)); left: calc(16px + var(--m-safe-l)); right: calc(16px + var(--m-safe-r)); }
  body.touch-ui .location { display: none; }
  body.touch-ui #intro { top: 50%; transform: translateY(-50%); left: calc(6% + var(--m-safe-l)); width: min(560px, 80%); }
  body.touch-ui #intro h1 { font-size: 54px; letter-spacing: -3px; margin: 12px 0; }
  body.touch-ui #intro h1 em { letter-spacing: -4px; }
  body.touch-ui #intro p { font-size: 12px; line-height: 1.6; margin: 0 0 16px; }
  body.touch-ui #intro .specs { display: none; }
  body.touch-ui footer { bottom: calc(10px + var(--m-safe-b)); left: calc(16px + var(--m-safe-l)); right: calc(16px + var(--m-safe-r)); }
  body.touch-ui footer #status { display: none; }
  body.touch-ui footer { justify-content: flex-end; }
  body.touch-ui #finish { padding: calc(8vh + var(--m-safe-t)) calc(8% + var(--m-safe-r)) 0 calc(8% + var(--m-safe-l)); }
  body.touch-ui h2 { font-size: 56px; letter-spacing: -4px; margin: 10px 0; }
}

#m-mode {
  color: var(--m-ink);
  background: #0000;
  border: 1px solid var(--m-line);
  letter-spacing: 2px;
  font-size: 10px;
  font-weight: 700;
  padding: 17px 16px;
  margin-left: 10px;
  vertical-align: top;
}
#m-mode b { color: var(--m-accent); margin-left: 6px; }

/* ---------- Race HUD, re-laid out for landscape thumbs ---------- */
body.touch-ui.racing header,
body.touch-ui.racing footer { display: none; }

body.touch-ui .race-stats {
  top: calc(12px + var(--m-safe-t));
  left: calc(18px + var(--m-safe-l));
  gap: 20px;
}
body.touch-ui .race-stats small { font-size: 8px; margin-bottom: 4px; letter-spacing: 1.6px; }
body.touch-ui .race-stats b { font-size: 19px; }
body.touch-ui .race-stats b span { font-size: 12px; }

body.touch-ui .speed {
  left: 50%;
  right: auto;
  bottom: calc(8px + var(--m-safe-b));
  transform: translateX(-50%);
  text-align: center;
  white-space: nowrap;
}
body.touch-ui .speed > b { font-size: 54px; letter-spacing: -3px; }
body.touch-ui .speed > small { font-size: 9px; margin-left: 6px; }
body.touch-ui .gear { font-size: 9px; }
body.touch-ui .gear b { font-size: 18px; }
body.touch-ui .rpm { width: 150px; margin: 2px auto 0; }
body.touch-ui .speed > span { display: none; }

body.touch-ui .map-wrap {
  top: calc(64px + var(--m-safe-t));
  right: calc(14px + var(--m-safe-r));
  left: auto;
  bottom: auto;
  transform: scale(.55);
  transform-origin: 100% 0;
  opacity: .85;
}
body.touch-ui #message { top: 26%; font-size: 40px; }
body.touch-ui[data-mstate="paused"] #message { visibility: hidden; }

/* ---------- Controls ---------- */
body.touch-ui[data-mstate="race"] #m-root,
body.touch-ui[data-mstate="countdown"] #m-root { display: block; }
body.touch-ui.m-pad-connected #m-root .m-drive { display: none; }

#m-root { position: fixed; inset: 0; z-index: 20; pointer-events: none; }
#m-root * { box-sizing: border-box; }
#m-root button, #m-root .m-hit { pointer-events: auto; touch-action: none; }

.m-btn {
  color: var(--m-ink);
  background: var(--m-glass);
  border: 1px solid var(--m-line);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  letter-spacing: 1.6px;
  font-size: 10px;
  font-weight: 700;
  transition: background .08s, transform .08s;
}
.m-btn.on { background: var(--m-glass-hi); border-color: var(--m-paper); transform: scale(.96); }

/* top-right utility row */
#m-top {
  position: absolute;
  top: calc(12px + var(--m-safe-t));
  right: calc(14px + var(--m-safe-r));
  display: flex;
  gap: 8px;
}
#m-top .m-btn { width: 44px; height: 44px; border-radius: 50%; padding: 0; display: grid; place-items: center; }
#m-top svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* left: steering */
#m-zone {
  position: absolute;
  left: 0;
  top: 22%;
  bottom: 0;
  width: 46%;
}
body:not([data-mmode="drag"]) #m-zone { display: none; }
#m-stick {
  position: absolute;
  left: calc(110px + var(--m-safe-l));
  bottom: calc(80px + var(--m-safe-b));
  width: 150px;
  height: 64px;
  margin: 0 0 -32px -75px;
  border: 1px solid var(--m-line);
  border-radius: 32px;
  background: #13212840;
  opacity: .55;
  transition: opacity .15s;
  pointer-events: none;
}
#m-stick.live { opacity: 1; transition: none; }
#m-stick i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 52px;
  height: 52px;
  margin: -26px 0 0 -26px;
  border-radius: 50%;
  background: var(--m-paper);
  box-shadow: 0 2px 12px #0008;
}
#m-stick::before, #m-stick::after {
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -5px;
  border: 5px solid transparent;
}
#m-stick::before { left: 10px; border-right-color: var(--m-line); }
#m-stick::after { right: 10px; border-left-color: var(--m-line); }

#m-arrows {
  position: absolute;
  left: calc(16px + var(--m-safe-l));
  bottom: calc(16px + var(--m-safe-b));
  display: flex;
  gap: 12px;
}
body:not([data-mmode="buttons"]) #m-arrows { display: none; }
#m-arrows .m-btn { width: 92px; height: 92px; font-size: 26px; border-radius: 18px; }

#m-wheel {
  position: absolute;
  left: calc(24px + var(--m-safe-l));
  bottom: calc(20px + var(--m-safe-b));
  width: 74px;
  height: 74px;
  opacity: .8;
}
body:not([data-mmode="tilt"]) #m-wheel { display: none; }
#m-wheel svg { width: 100%; height: 100%; fill: none; stroke: var(--m-ink); stroke-width: 5; filter: drop-shadow(0 1px 4px #0009); }
#m-wheel small {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 8px;
  letter-spacing: 1.6px;
  margin-top: 2px;
}

/* right: pedals */
#m-pedals {
  position: absolute;
  right: calc(14px + var(--m-safe-r));
  bottom: calc(14px + var(--m-safe-b));
  display: flex;
  align-items: flex-end;
  gap: 10px;
}
/* GAS sits directly on top of BRAKE: one thumb rocks up and down between them. */
#m-pedals .m-col { display: flex; flex-direction: column; gap: 4px; }
#m-pedals .m-btn { border-radius: 16px; }
#m-gas { width: 104px; height: 124px; border-radius: 16px 16px 6px 6px; }
#m-brake { width: 104px; height: 96px; border-radius: 6px 6px 16px 16px; }
#m-hb { width: 72px; height: 64px; font-size: 9px; line-height: 1.5; }
#m-gas { background: #ef715938; border-color: #ef7159aa; }
#m-gas.on { background: #ef715980; }
#m-pedals .m-btn span { display: block; font-size: 18px; opacity: .8; }
#m-gas span { margin-bottom: 6px; }
#m-brake span { margin-top: 6px; }

/* ---------- Pause menu ---------- */
body.touch-ui[data-mstate="paused"] #m-pause { display: grid; }
#m-pause {
  position: fixed;
  inset: 0;
  z-index: 40;
  place-items: center;
  background: #151619c9;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  padding: calc(16px + var(--m-safe-t)) calc(20px + var(--m-safe-r)) calc(16px + var(--m-safe-b)) calc(20px + var(--m-safe-l));
  overflow-y: auto;
}
#m-pause .m-panel {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) minmax(240px, 1.2fr);
  gap: 36px;
  width: min(720px, 100%);
  align-items: start;
}
@media (max-width: 560px) { #m-pause .m-panel { grid-template-columns: 1fr; gap: 20px; } }
#m-pause h3 { font-size: 48px; font-weight: 900; font-style: italic; letter-spacing: -3px; margin: 6px 0 18px; }
#m-pause .eyebrow { font-size: 10px; }
#m-pause .m-big {
  display: block;
  width: 100%;
  text-align: left;
  padding: 17px 20px;
  margin-bottom: 10px;
  font-size: 11px;
  letter-spacing: 2px;
  font-weight: 700;
  border: 1px solid var(--m-line);
  background: #0000;
  color: var(--m-ink);
}
#m-pause .m-big.primary { background: var(--m-paper); color: #202124; border-color: var(--m-paper); }
#m-pause .m-big span { float: right; }
#m-pause label, #m-pause .m-label {
  display: block;
  font-size: 9px;
  letter-spacing: 2px;
  color: #d6d5d3;
  margin: 0 0 8px;
}
#m-pause .m-group { margin-bottom: 18px; }
.m-seg { display: flex; border: 1px solid var(--m-line); }
.m-seg button {
  flex: 1;
  padding: 13px 4px;
  background: #0000;
  border: 0;
  color: var(--m-ink);
  font-size: 10px;
  letter-spacing: 1.6px;
  font-weight: 700;
}
.m-seg button + button { border-left: 1px solid var(--m-line); }
.m-seg button[aria-pressed="true"] { background: var(--m-paper); color: #202124; }
#m-pause .m-desc { font-size: 10px; color: #c2c1bf; line-height: 1.6; margin-top: 8px; }
#m-pause input[type="range"] { width: 100%; accent-color: var(--m-accent); height: 28px; }
body:not([data-mmode="tilt"]) #m-sens-group { display: none; }
#m-pause .m-row { display: flex; gap: 10px; }
#m-pause .m-row .m-big { margin: 0; font-size: 9px; padding: 13px 12px; }
body.mp #m-restart { display: none; }

/* ---------- Rotate prompt ---------- */
@media (orientation: portrait) {
  body.touch-ui #m-rotate { display: flex; }
}
#m-rotate {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: #17191c;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  text-align: center;
  padding: 24px;
}
#m-rotate .m-phone {
  width: 54px;
  height: 92px;
  border: 3px solid var(--m-paper);
  border-radius: 10px;
  position: relative;
  animation: m-turn 2.4s cubic-bezier(.6, 0, .3, 1) infinite;
}
#m-rotate .m-phone::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 14px;
  height: 3px;
  margin-left: -7px;
  border-radius: 2px;
  background: var(--m-paper);
}
@keyframes m-turn {
  0%, 20% { transform: rotate(0); }
  55%, 85% { transform: rotate(-90deg); }
  100% { transform: rotate(0); }
}
#m-rotate b { font-size: 26px; font-weight: 900; font-style: italic; letter-spacing: -1px; }
#m-rotate p { margin: 0; font-size: 11px; letter-spacing: 2px; color: #c2c1bf; }

/* ---------- Toast + first-race hint ---------- */
#m-toast, #m-hint {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  pointer-events: none;
  white-space: nowrap;
  letter-spacing: 2px;
  font-size: 10px;
  font-weight: 700;
  color: var(--m-ink);
  background: #151619d9;
  border: 1px solid var(--m-line);
  padding: 12px 18px;
}
#m-toast { top: calc(14px + var(--m-safe-t)); }
#m-toast.show { display: block; }
#m-hint { top: 48%; }
#m-hint.show { display: block; }
#m-hint b { color: var(--m-accent); }

/* ---------- Robust sizing (page zoom, small and large screens) ----------
   mobile.js sets --u to one "design pixel" (an 844x390 landscape phone = 1px) and --uz to the same
   ratio. Controls are sized in --u so pointer hit-testing stays exact; text-heavy overlays and the
   HUD use CSS zoom. Net effect: same physical size whatever the browser zoom is. */
:root { --u: 1px; --uz: 1; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.touch-ui, html.touch-ui body { touch-action: none; overscroll-behavior: none; }
html.touch-ui input, html.touch-ui #m-pause { touch-action: manipulation; }

body.touch-ui :is(header, footer, #intro, #mp-panel, #finish > *, #m-pause .m-panel, #m-rotate > *,
  #m-toast, #m-hint, #mp-toast, #mp-banner, .race-stats, .speed, .map-wrap, #message) { zoom: var(--uz); }

.m-btn { font-size: calc(10 * var(--u)); }
#m-top { top: calc(12 * var(--u) + var(--m-safe-t)); right: calc(14 * var(--u) + var(--m-safe-r)); gap: calc(8 * var(--u)); }
#m-top .m-btn { width: calc(44 * var(--u)); height: calc(44 * var(--u)); }
#m-top svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }

#m-stick {
  left: calc(110 * var(--u) + var(--m-safe-l));
  bottom: calc(80 * var(--u) + var(--m-safe-b));
  width: calc(150 * var(--u));
  height: calc(64 * var(--u));
  margin: 0 0 calc(-32 * var(--u)) calc(-75 * var(--u));
  border-radius: calc(32 * var(--u));
}
#m-stick i { width: calc(52 * var(--u)); height: calc(52 * var(--u)); margin: calc(-26 * var(--u)) 0 0 calc(-26 * var(--u)); }

#m-arrows { left: calc(16 * var(--u) + var(--m-safe-l)); bottom: calc(16 * var(--u) + var(--m-safe-b)); gap: calc(12 * var(--u)); }
#m-arrows .m-btn { width: calc(92 * var(--u)); height: calc(92 * var(--u)); font-size: calc(26 * var(--u)); border-radius: calc(18 * var(--u)); }

#m-wheel { left: calc(24 * var(--u) + var(--m-safe-l)); bottom: calc(20 * var(--u) + var(--m-safe-b)); width: calc(74 * var(--u)); height: calc(74 * var(--u)); }
#m-wheel small { font-size: calc(8 * var(--u)); }

#m-pedals { right: calc(14 * var(--u) + var(--m-safe-r)); bottom: calc(14 * var(--u) + var(--m-safe-b)); gap: calc(10 * var(--u)); }
#m-pedals .m-col { gap: calc(4 * var(--u)); }
#m-gas { width: calc(104 * var(--u)); height: calc(124 * var(--u)); border-radius: calc(16 * var(--u)) calc(16 * var(--u)) calc(6 * var(--u)) calc(6 * var(--u)); }
#m-brake { width: calc(104 * var(--u)); height: calc(96 * var(--u)); border-radius: calc(6 * var(--u)) calc(6 * var(--u)) calc(16 * var(--u)) calc(16 * var(--u)); }
#m-hb { width: calc(72 * var(--u)); height: calc(64 * var(--u)); font-size: calc(9 * var(--u)); border-radius: calc(16 * var(--u)); }
#m-pedals .m-btn span { font-size: calc(18 * var(--u)); }
#m-gas span { margin-bottom: calc(6 * var(--u)); }
#m-brake span { margin-top: calc(6 * var(--u)); }

/* Minimap under the race stats (top-left): the stacked GAS/BRAKE column owns the right edge. */
body.touch-ui .map-wrap {
  top: calc(58px + var(--m-safe-t));
  left: calc(14px + var(--m-safe-l));
  right: auto;
  bottom: auto;
  transform: scale(.5);
  transform-origin: 0 0;
}