/* GassMan — phone layer (on top of Heat City's own touch controls).
   Scoped to html/body.gm-touch, which gassman-mobile.js adds on touch-first devices. */

:root { --uz: 1; }
html.gm-touch { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.gm-touch, html.gm-touch body.playing { touch-action: none; overscroll-behavior: none; }
html.gm-touch input, html.gm-touch select, html.gm-touch #menu, html.gm-touch #assist-panel { touch-action: manipulation; }

/* Same physical size whatever the browser zoom is (--uz is set from the real screen size). */
body.gm-touch :is(header, footer, #menu, #result, #assist-panel, #touch, #gm-toast,
  #hud > .event-info, #hud > #pursuit, #hud > #notice, #hud > .map-wrap, #hud > .speedo, #hud > #focus-meter, #hud > #bounty) {
  zoom: var(--uz);
}

#gm-toast {
  position: fixed;
  left: 50%;
  top: calc(14px + env(safe-area-inset-top, 0px));
  transform: translateX(-50%);
  z-index: 90;
  display: none;
  max-width: 92vw;
  padding: 11px 16px;
  font: 700 10px/1.3 Arial, sans-serif;
  letter-spacing: 1.6px;
  color: #f4f2ef;
  background: #151619e6;
  border: 1px solid #ffffff55;
  pointer-events: none;
}
#gm-toast.show { display: block; }

/* ---------- Landscape: thumbs layout ---------- */
@media (orientation: landscape) {
  /* While driving the header shrinks away; SOUND lives in the toolbar row instead. */
  body.gm-touch.playing header { display: none; }
  body.gm-touch.playing .event-info { top: calc(12px + env(safe-area-inset-top, 0px)); }

  body.gm-touch.playing footer {
    top: calc(10px + env(safe-area-inset-top, 0px));
    right: calc(12px + env(safe-area-inset-right, 0px));
    bottom: auto;
    left: auto;
    padding: 0;
  }
  body.gm-touch.playing footer > div { width: auto; gap: 6px; justify-content: flex-end; }
  body.gm-touch.playing footer :is(#time, #quality) { display: none; }
  body.gm-touch.playing footer :is(button, #sound) {
    min-width: 44px;
    min-height: 40px;
    padding: 6px 10px;
    font-size: 9px;
    letter-spacing: 1px;
  }
  body.gm-touch.playing footer kbd { display: none; }

  /* Controls: steering pad bottom-left; GAS stacked over BRAKE on the right edge so one thumb rocks
     between them; DRIFT and FOCUS beside the pedals; manual gears beside those. */
  body.gm-touch #touch {
    display: block;
    position: fixed;
    inset: 0;
    margin: 0;
    pointer-events: none;
  }
  body.gm-touch #touch > *, body.gm-touch #touch > button { position: absolute; margin: 0; }
  body.gm-touch #steering-pad {
    left: calc(20px + env(safe-area-inset-left, 0px));
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    width: 176px;
    height: 74px;
    border-radius: 37px;
  }
  body.gm-touch .steering-thumb { top: 17px; width: 40px; height: 40px; left: calc(50% - 20px); }
  body.gm-touch #touch [data-key=ArrowDown] {
    right: calc(16px + env(safe-area-inset-right, 0px));
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    width: 104px;
    height: 96px;
    min-width: 0;
    border-radius: 6px 6px 16px 16px;
  }
  body.gm-touch #touch [data-key=ArrowUp] {
    right: calc(16px + env(safe-area-inset-right, 0px));
    bottom: calc(116px + env(safe-area-inset-bottom, 0px));
    width: 104px;
    height: 124px;
    min-width: 0;
    border-radius: 16px 16px 6px 6px;
  }
  body.gm-touch #touch [data-key=ShiftLeft] {
    right: calc(130px + env(safe-area-inset-right, 0px));
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    width: 76px;
    height: 64px;
    min-width: 0;
  }
  body.gm-touch #touch [data-key=KeyE] {
    right: calc(130px + env(safe-area-inset-right, 0px));
    bottom: calc(88px + env(safe-area-inset-bottom, 0px));
    width: 76px;
    height: 50px;
    min-width: 0;
  }
  body.gm-touch #manual-shifts {
    right: calc(214px + env(safe-area-inset-right, 0px));
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  body.gm-touch #manual-shifts[hidden] { display: none; }

  /* HUD around the controls: speed bottom-centre between the thumbs; pursuit, focus and bounty
     stacked under the toolbar on the right, clear of the pedal column. */
  body.gm-touch.playing #hud > .speedo {
    left: 50%;
    right: auto;
    top: auto;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    text-align: center;
    white-space: nowrap;
  }
  body.gm-touch.playing #hud > #pursuit { top: calc(60px + env(safe-area-inset-top, 0px)); right: calc(16px + env(safe-area-inset-right, 0px)); bottom: auto; left: auto; }
  body.gm-touch.playing #hud > #focus-meter { top: calc(98px + env(safe-area-inset-top, 0px)); right: calc(16px + env(safe-area-inset-right, 0px)); bottom: auto; left: auto; }
  body.gm-touch.playing #hud > #bounty { top: calc(122px + env(safe-area-inset-top, 0px)); right: calc(16px + env(safe-area-inset-right, 0px)); bottom: auto; left: auto; }
}