/* Touch flight controls (#touch, built by js/game/input.js).
   Visible only on touch devices while flying: floating left thumb-stick, right throttle lever,
   a thumb-reachable button cluster and a pause button. Translucent glass, large hit areas,
   safe-area aware. They answer fingers and pens only (computers fly with the keyboard); the
   pause button also takes a click. */

#touch {
  --tc-glass: rgba(14, 19, 34, 0.30);
  --tc-glass-strong: rgba(14, 19, 34, 0.48);
  --tc-edge: rgba(255, 255, 255, 0.20);
  --tc-edge-soft: rgba(255, 255, 255, 0.10);
  --tc-text: rgba(242, 245, 255, 0.92);
  --tc-amber: #FFB547;
  --tc-cyan: #5CE1FF;
  /* Button size: the preferred size, shrunk (never below 44 px) when the HUD readouts on the
     right leave less room above the bottom edge: input.js measures that room into --tc-room. */
  --tc-btn-base: clamp(50px, 8.6vmin, 64px);
  --tc-rows: 3;
  --tc-btn: min(var(--tc-btn-base), max(44px, calc((var(--tc-room, 9999px) - (var(--tc-rows) - 1) * var(--tc-gap)) / var(--tc-rows))));
  --tc-gap: clamp(8px, 1.6vmin, 12px);
  --tc-pad-b: calc(var(--safe-b, 0px) + clamp(12px, 3vmin, 22px));
  --tc-pad-r: calc(var(--safe-r, 0px) + clamp(12px, 3vmin, 22px));
  --tc-pad-l: calc(var(--safe-l, 0px) + clamp(12px, 3vmin, 22px));
  /* The HUD minimap sits at the top right on touch layouts. Its bottom edge, from the HUD's
     published --hud-minimap-left (the map is square: its size is that minus its 18 px right
     margin), keeps the throttle lever's % label and the pause button off the map, whatever the
     screen, HUD scale or map size. */
  --tc-map-bottom: calc(var(--safe-t, 0px) + 10px + var(--hud-minimap-left, 146px) - 18px - var(--safe-r, 0px));
  color: var(--tc-text);
  font: 600 11px/1 var(--font, system-ui, sans-serif);
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}
#touch > * { display: none; }
#touch.tc-on > * { display: block; }
#touch.tc-on > .tc-buttons { display: grid; }
#touch.tc-on > .tc-pause { display: grid; }

/* Glass surface shared by every control */
#touch .tc-btn, #touch .tc-pause, #touch .tc-thr-track, #touch .tc-stick-ring {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.02) 55%), var(--tc-glass);
  border: 1px solid var(--tc-edge);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  backdrop-filter: blur(12px) saturate(150%);
}

/* ── Touch zones ── */
#touch .tc-zone { position: absolute; pointer-events: auto; touch-action: none; }
#touch .tc-zone-stick { left: 0; bottom: 0; width: 50%; height: 78%; }
#touch .tc-zone-look { right: 0; top: 0; width: 50%; height: 46%; }
#touch.tc-tilt .tc-zone-stick, #touch.tc-tilt .tc-hint { display: none; }

/* ── Floating stick ── */
#touch .tc-stick {
  position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none;
  opacity: 0; transition: opacity .18s ease;
}
#touch .tc-stick.on { opacity: 1; }
#touch .tc-stick-ring {
  position: absolute; left: 0; top: 0;
  width: clamp(112px, 22vmin, 148px); height: clamp(112px, 22vmin, 148px);
  transform: translate(-50%, -50%); border-radius: 50%;
}
#touch .tc-stick-ring::before {           /* crosshair ticks */
  content: ''; position: absolute; inset: 14%; border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.16);
}
#touch .tc-stick-ring::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px;
  border-radius: 50%; background: rgba(255, 255, 255, 0.35);
}
#touch .tc-knob {
  position: absolute; left: 0; top: 0;
  width: clamp(50px, 9.5vmin, 62px); height: clamp(50px, 9.5vmin, 62px);
  transform: translate3d(-50%, -50%, 0); border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, rgba(255, 226, 170, 0.95), rgba(255, 181, 71, 0.9) 45%, rgba(214, 120, 30, 0.9));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.45) inset, 0 6px 18px rgba(0, 0, 0, 0.35), 0 0 26px rgba(255, 181, 71, 0.45);
}

#touch .tc-hint {
  position: absolute; left: var(--tc-pad-l); bottom: var(--tc-pad-b);
  padding: 9px 13px; border-radius: 999px; pointer-events: none;
  background: var(--tc-glass); border: 1px dashed var(--tc-edge);
  color: rgba(242, 245, 255, 0.75); font-weight: 600; letter-spacing: .02em;
  transition: opacity .6s ease;
}
#touch.tc-used .tc-hint { opacity: 0; }

/* ── Throttle lever (right edge) ── */
#touch .tc-throttle {
  /* (Capped below the minimap: see --tc-map-bottom.) */
  position: absolute; right: var(--tc-pad-r); bottom: var(--tc-pad-b);
  width: clamp(58px, 10vmin, 72px);
  height: max(120px, min(clamp(150px, 42vh, 250px), calc(100% - var(--tc-map-bottom) - 12px - var(--tc-pad-b))));
  padding: 26px 0 0; pointer-events: auto; touch-action: none;
}
#touch .tc-thr-track {
  position: relative; width: 100%; height: 100%; border-radius: 20px; overflow: hidden;
}
#touch .tc-thr-fill {
  position: absolute; left: 0; right: 0; bottom: 0; height: 100%;
  transform-origin: bottom; transform: scaleY(0.6);
  background: linear-gradient(0deg, rgba(255, 122, 89, 0.55), rgba(255, 181, 71, 0.45) 70%, rgba(255, 210, 120, 0.5));
}
#touch .tc-thr-ticks {
  position: absolute; inset: 10px 0;
  background: repeating-linear-gradient(0deg, transparent 0 calc(25% - 1px), rgba(255, 255, 255, 0.22) calc(25% - 1px) 25%);
  -webkit-mask: linear-gradient(90deg, transparent 0 22%, #000 22% 34%, transparent 34% 66%, #000 66% 78%, transparent 78%);
  mask: linear-gradient(90deg, transparent 0 22%, #000 22% 34%, transparent 34% 66%, #000 66% 78%, transparent 78%);
}
#touch .tc-thr-handle {
  position: absolute; left: 7px; right: 7px; height: 22px; bottom: 60%; margin-bottom: -11px;
  border-radius: 11px; background: linear-gradient(180deg, #FFF3DC, #FFC66E);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35), 0 0 16px rgba(255, 181, 71, 0.5);
}
#touch .tc-thr-handle::after {
  content: ''; position: absolute; left: 25%; right: 25%; top: 50%; height: 2px; margin-top: -1px;
  border-radius: 1px; background: rgba(120, 70, 10, 0.45);
}
#touch .tc-throttle.active .tc-thr-handle { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35), 0 0 24px rgba(255, 181, 71, 0.85); }
#touch .tc-thr-label {
  position: absolute; left: 0; right: 0; top: 0; text-align: center;
  font: 700 15px/1 var(--mono, ui-monospace, monospace); color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}
#touch .tc-thr-label span { font-size: 10px; opacity: .7; margin-left: 1px; }

/* ── Button cluster (left of the throttle) ── */
#touch .tc-buttons {
  position: absolute; bottom: var(--tc-pad-b);
  right: calc(var(--tc-pad-r) + clamp(58px, 10vmin, 72px) + var(--tc-gap) * 1.6);
  grid-template-columns: repeat(2, var(--tc-btn)); grid-auto-rows: var(--tc-btn);
  gap: var(--tc-gap); pointer-events: none;
  grid-template-areas: "cam smoke" "flaps gear" "brake boost";
}
#touch .tc-btn {
  position: relative; display: grid; place-items: center; align-content: center; gap: 3px;
  width: 100%; height: 100%; padding: 0; border-radius: 50%;
  color: var(--tc-text); pointer-events: auto; touch-action: none; cursor: default;   /* fingers only: the mouse never flies */
  transition: transform .08s ease, background-color .15s ease, box-shadow .15s ease, opacity .2s ease;
}
#touch .tc-btn svg { width: 44%; height: 44%; display: block; }
#touch .tc-btn span { font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; opacity: .82; }
#touch .tc-btn::after {                 /* generous invisible hit area */
  content: ''; position: absolute; inset: -6px; border-radius: 50%;
}
#touch .tc-btn.down { transform: scale(0.93); background-color: rgba(255, 255, 255, 0.16); }
#touch .tc-cam { grid-area: cam; }
#touch .tc-smoke { grid-area: smoke; }
#touch .tc-flaps { grid-area: flaps; }
#touch .tc-gear { grid-area: gear; }
#touch .tc-brake { grid-area: brake; }
#touch .tc-boost { grid-area: boost; }

#touch:not(.tc-has-gear) .tc-gear { display: none; }
#touch:not(.tc-has-boost) .tc-boost { display: none; }
#touch:not(.tc-has-gear) .tc-buttons { grid-template-areas: "cam smoke" ". flaps" "brake boost"; }
#touch:not(.tc-has-boost) .tc-buttons { grid-template-areas: "cam smoke" "flaps gear" ". brake"; }
#touch:not(.tc-has-boost):not(.tc-has-gear) .tc-buttons { grid-template-areas: "cam smoke" ". flaps" ". brake"; }

#touch .tc-boost {
  color: #1B1205;
  background: radial-gradient(circle at 40% 30%, #FFE3AE, #FFB547 55%, #F08A2C);
  border-color: rgba(255, 230, 180, 0.8);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.3), 0 0 22px rgba(255, 160, 60, 0.45);
}
#touch .tc-boost span { opacity: 1; font-weight: 800; }
#touch.tc-boosting .tc-boost { box-shadow: 0 0 0 3px rgba(255, 210, 140, 0.45), 0 0 36px rgba(255, 140, 40, 0.9); }
#touch .tc-brake.down { background-color: rgba(255, 92, 108, 0.32); border-color: rgba(255, 140, 150, 0.7); }
#touch.tc-flaps-on .tc-flaps { border-color: rgba(92, 225, 255, 0.75); color: #CFF6FF; box-shadow: 0 0 18px rgba(92, 225, 255, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.14); }
#touch.tc-gear-up .tc-gear { opacity: .62; }
#touch:not(.tc-gear-up) .tc-gear { border-color: rgba(74, 222, 128, 0.7); color: #D8FFE6; }

/* ── Pause ── */
#touch .tc-pause {
  /* Just left of the HUD minimap (top right on touch devices), level with its top. The HUD
     publishes --hud-minimap-left (px from the right edge to the map's left edge, scale and safe
     area included) and keeps its session panel 70 px clear of it for this button. */
  position: absolute; top: calc(var(--safe-t, 0px) + 10px); right: calc(var(--hud-minimap-left, 146px) + 12px);
  width: 44px; height: 44px; border-radius: 14px; place-items: center; padding: 0;
  color: var(--tc-text); pointer-events: auto; touch-action: none; cursor: pointer;
}
#touch .tc-pause svg { width: 22px; height: 22px; }
#touch .tc-pause::after { content: ''; position: absolute; inset: -8px; }
#touch .tc-pause.down { transform: scale(0.94); }

/* Wide screens (tablets, landscape phones, touch laptops): a low two-row cluster, which stays
   under the altitude readout instead of climbing into it. */
@media (min-width: 700px), (max-height: 420px) {
  #touch { --tc-rows: 2; }
  #touch .tc-buttons { grid-template-columns: repeat(3, var(--tc-btn)); grid-template-areas: "cam smoke flaps" "brake gear boost"; }
  #touch:not(.tc-has-gear) .tc-buttons { grid-template-areas: "cam smoke flaps" ". brake boost"; }
  #touch:not(.tc-has-boost) .tc-buttons { grid-template-areas: "cam smoke flaps" ". brake gear"; }
  #touch:not(.tc-has-boost):not(.tc-has-gear) .tc-buttons { grid-template-areas: "cam smoke flaps" ". . brake"; }
}
/* Small landscape phones: tighter cluster, shorter lever */
@media (max-height: 420px) {
  #touch { --tc-btn-base: clamp(46px, 13vh, 56px); --tc-gap: 7px; }
  #touch .tc-throttle { height: max(110px, min(clamp(140px, 58vh, 210px), calc(100% - var(--tc-map-bottom) - 12px - var(--tc-pad-b)))); }
}
/* Portrait tablets: the full heading tape spans the top centre, so the pause button moves from
   beside the minimap to just under it (left-aligned with the map). */
@media (orientation: portrait) and (min-width: 561px) {
  #touch .tc-pause { top: calc(var(--tc-map-bottom) + 10px); right: calc(var(--hud-minimap-left, 146px) - 44px); }
}
/* Portrait phones: keep the cluster clear of the stick side */
@media (max-width: 480px) and (orientation: portrait) {
  #touch .tc-zone-stick { width: 56%; }
  #touch .tc-hint { max-width: 46vw; white-space: normal; line-height: 1.3; }
}

@media (prefers-reduced-motion: reduce) {
  #touch .tc-btn, #touch .tc-stick, #touch .tc-hint { transition: none; }
}