html, body {
  margin: 0; height: 100%; background: #02040a; overflow: hidden;
  /* no Safari scroll bounce, pinch zoom, text selection or callouts over the game */
  overscroll-behavior: none; touch-action: none;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
}
#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; cursor: crosshair; outline: none; touch-action: none; }
/* HUD / text overlay at full display resolution; the scene canvas under it takes the input */
#ui { position: fixed; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
#loading {
  position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #02040a; color: #8fd8ff; font: 14px/1.6 "Courier New", ui-monospace, monospace; letter-spacing: 0.25em;
}
#loading .logo { font-size: 28px; color: #ffc040; text-shadow: 0 0 12px #ff8a20; margin-bottom: 18px; }
#loading .bar { width: 240px; height: 3px; margin-top: 14px; background: linear-gradient(90deg, #ff8a20, #8fd8ff, #ff8a20); background-size: 200% 100%; animation: slide 1.2s linear infinite; }
@keyframes slide { from { background-position: 0 0; } to { background-position: -200% 0; } }

/* ---------------------------------------------------------------- touch controls */
.touch {
  --sl: env(safe-area-inset-left, 0px); --sr: env(safe-area-inset-right, 0px);
  --st: env(safe-area-inset-top, 0px); --sb: env(safe-area-inset-bottom, 0px);
  --line: rgba(143, 216, 255, 0.55); --text: #a8e2ff; --amber: #ffc040; --green: #6dff8a;
  position: fixed; inset: 0; pointer-events: none; touch-action: none;
  font: 600 12px/1.1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: 0.06em; color: var(--text);
}
.touch > * { display: none; pointer-events: auto; }
.touch[data-mode="fly"] .t-zone, .touch[data-mode="fly"] .t-throttle,
.touch[data-mode="fly"] .t-left, .touch[data-mode="fly"] .t-right, .touch[data-mode="fly"] .t-respot,
.touch[data-mode="pause"] .t-pause, .touch[data-mode="title"] .t-title { display: flex; }

.t-group { position: absolute; gap: 8px; flex-wrap: wrap; }
.t-btn {
  box-sizing: border-box; width: 64px; height: 46px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 7px; background: rgba(2, 10, 24, 0.5); text-align: center;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.t-btn small { font-size: 9px; opacity: 0.8; margin-top: 3px; }
.t-btn.lit { border-color: var(--green); color: var(--green); box-shadow: 0 0 8px rgba(109, 255, 138, 0.35) inset; }
.t-btn.down { background: rgba(143, 216, 255, 0.3); }
.t-left { left: calc(12px + var(--sl)); top: calc(12px + var(--st)); width: 136px; }
.t-right { right: calc(12px + var(--sr)); top: calc(12px + var(--st)); width: 64px; }
.t-right .pause { height: 40px; font-size: 15px; }
.t-right .launch { height: 58px; border-color: rgba(255, 192, 64, 0.7); color: var(--amber); }
.t-right .launch.lit { border-color: var(--amber); color: #fff; background: rgba(255, 150, 40, 0.35); }
.t-respot { left: 50%; bottom: calc(22% + var(--sb)); transform: translateX(-50%); }
.t-respot .t-btn { width: 150px; height: 54px; font-size: 15px; border-color: var(--amber); color: var(--amber); }
.t-pause { left: 50%; bottom: calc(5% + var(--sb)); transform: translateX(-50%); width: min(92vw, 520px); justify-content: center; }
.t-pause .t-btn { width: 120px; height: 50px; }
.t-pause .wide { border-color: var(--amber); color: var(--amber); }
.t-title { right: calc(12px + var(--sr)); top: calc(12px + var(--st)); }
.t-title .t-btn { width: 110px; height: 40px; }

/* throttle: relative drag, MIL detent, afterburner band at the top */
.t-throttle {
  position: absolute; box-sizing: border-box; left: calc(12px + var(--sl)); width: 62px;
  top: calc(186px + var(--st)); bottom: calc(18px + var(--sb)); max-height: 460px; margin-top: auto;
  border: 1px solid var(--line); border-radius: 10px; background: rgba(2, 10, 24, 0.45); overflow: hidden;
}
.t-thr-fill { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(0deg, rgba(143, 216, 255, 0.12), rgba(143, 216, 255, 0.4)); }
.t-throttle.ab .t-thr-fill { background: linear-gradient(0deg, rgba(143, 216, 255, 0.15), rgba(255, 140, 40, 0.65)); }
.t-thr-knob { position: absolute; left: 4px; right: 4px; height: 6px; margin-bottom: -3px; border-radius: 3px; background: #dff4ff; box-shadow: 0 0 8px #8fd8ff; }
.t-throttle.ab .t-thr-knob { background: #ffd080; box-shadow: 0 0 10px #ff8a20; }
.t-throttle.active { border-color: #dff4ff; }
.t-thr-mark { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed rgba(255, 192, 64, 0.7); }
.t-thr-mark.mil { border-top-style: solid; }
.t-thr-lbl { position: absolute; left: 0; right: 0; text-align: center; font-size: 10px; padding-bottom: 3px; opacity: 0.85; }

/* stick: floats where the thumb lands, springs back to centre on release */
.t-zone { position: absolute; top: 0; right: 0; bottom: 0; width: 52%; }
.t-stick-hint {
  position: absolute; right: calc(13% + var(--sr)); bottom: calc(34% + var(--sb)); width: 120px; height: 120px; margin: -60px;
  border: 1px dashed rgba(143, 216, 255, 0.35); border-radius: 50%; display: flex; align-items: center; justify-content: center; opacity: 0.8;
}
.t-stick-hint span { font-size: 10px; opacity: 0.7; }
.t-stick-base { position: absolute; display: none; border: 1.5px solid var(--line); border-radius: 50%; background: rgba(2, 10, 24, 0.25); }
.t-stick-base::before, .t-stick-base::after { content: ""; position: absolute; background: rgba(143, 216, 255, 0.2); }
.t-stick-base::before { left: 50%; top: 8%; bottom: 8%; width: 1px; }
.t-stick-base::after { top: 50%; left: 8%; right: 8%; height: 1px; }
.t-stick-knob {
  position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, rgba(223, 244, 255, 0.85), rgba(143, 216, 255, 0.35)); box-shadow: 0 0 12px rgba(143, 216, 255, 0.6);
}
.t-zone.active .t-stick-base { display: block; }
.t-zone.active .t-stick-hint { display: none; }