:root {
  --bg: #02040a;
  --panel: rgba(15, 18, 29, 0.92);
  --panel2: rgba(23, 27, 41, 0.92);
  --text: #f5f7fb;
  --muted: #aab3c5;
  --red: #ff2848;
  --red-dark: #a70f25;
  --green: #38ff98;
  --chrome: #d8e2ef;
  --orange: #ff9b2f;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: Arial, Helvetica, sans-serif; overflow-x: hidden; }

/* Phase 3.3: iOS/mobile zoom guard.
   Prevent accidental double-tap zoom while playing, but keep text selection inside inputs. */
html {
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overscroll-behavior: none;
}
body {
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
input, textarea {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
  touch-action: manipulation;
}
button, canvas, .game-wrap, .touch-controls, .joystick-base, .touch-fire, .touch-warp {
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

body::before { content: ""; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(circle at 10% 5%, rgba(255,40,72,.32), transparent 32%), radial-gradient(circle at 90% 0%, rgba(216,226,239,.14), transparent 38%), linear-gradient(180deg, #101522 0%, #03050b 62%, #000 100%); }
.app-shell { position: relative; width: min(1920px, 100%); margin: 0 auto; padding: 24px clamp(10px, 2vw, 28px) 18px; }
.topbar { display: flex; justify-content: space-between; gap: 18px; align-items: center; padding: 18px 22px; border: 1px solid rgba(216,226,239,.18); border-radius: 18px; background: linear-gradient(135deg, rgba(19,22,34,.94), rgba(9,11,20,.96)); box-shadow: 0 18px 70px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06); }
.eyebrow { color: var(--red); text-transform: uppercase; letter-spacing: .28em; font-size: 12px; font-weight: 800; }
h1 { margin: 0; font-size: clamp(42px, 5.6vw, 80px); line-height: .9; text-transform: uppercase; letter-spacing: .05em; text-shadow: 0 6px 30px rgba(255,40,72,.22); }
.connection-panel { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
input { border: 1px solid rgba(216,226,239,.22); background: rgba(255,255,255,.08); color: var(--text); border-radius: 999px; padding: 14px 18px; min-width: 220px; font-size: 16px; outline: none; }
input:focus { border-color: rgba(255,40,72,.75); box-shadow: 0 0 0 4px rgba(255,40,72,.12); }
button { border: 0; border-radius: 999px; padding: 14px 25px; color: #fff; background: linear-gradient(180deg, #ff2f50, #b30f27); font-weight: 800; font-size: 16px; cursor: pointer; box-shadow: 0 12px 30px rgba(255,40,72,.24), inset 0 1px 0 rgba(255,255,255,.3); }
button:hover { filter: brightness(1.08); }
button.secondary { background: linear-gradient(180deg, #4b5568, #262c3b); box-shadow: inset 0 1px 0 rgba(255,255,255,.18); }
.badge { display: inline-flex; align-items: center; justify-content: center; min-width: 86px; padding: 12px 18px; border-radius: 999px; border: 1px solid rgba(216,226,239,.2); color: var(--muted); background: rgba(255,255,255,.08); font-weight: 800; text-transform: lowercase; }
.badge.online { color: var(--green); border-color: rgba(56,255,152,.35); background: rgba(56,255,152,.08); }
.game-wrap { position: relative; margin-top: 18px; border-radius: 18px; overflow: hidden; border: 1px solid rgba(216,226,239,.16); background: #000; min-height: 420px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 28px 80px rgba(0,0,0,.35); }
canvas { width: 100%; height: min(70vh, 760px); display: block; background: #02040a; touch-action: none; }
.overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; padding: 22px; background: radial-gradient(circle at 50% 50%, rgba(0,0,0,.25), rgba(0,0,0,.02)); }
.overlay.hidden { display: none; }
.overlay h2 { margin: 0; font-size: clamp(44px, 7vw, 88px); letter-spacing: .12em; text-transform: uppercase; }
.overlay p { color: var(--muted); font-size: 18px; max-width: 720px; }
.keys { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; }
.keys span { border: 1px solid rgba(216,226,239,.2); background: rgba(255,255,255,.08); border-radius: 999px; padding: 9px 13px; }
.hud { display: grid; grid-template-columns: 1fr auto; gap: 12px; margin-top: 14px; align-items: start; }
.scoreboard, .notices, .telemetry { display: flex; gap: 8px; flex-wrap: wrap; }
.telemetry { justify-content: flex-end; color: var(--muted); font-size: 13px; }
.score-pill, .notice, .telemetry span { border: 1px solid rgba(216,226,239,.16); background: rgba(10,12,21,.76); border-radius: 999px; padding: 8px 12px; color: var(--chrome); }
.score-pill.mine { color: var(--green); border-color: rgba(56,255,152,.3); }
.score-pill.dead { opacity: .55; text-decoration: line-through; }
.mobile-controls { display: none; position: sticky; bottom: 0; z-index: 10; gap: 10px; padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, transparent, rgba(2,4,10,.9) 30%); }
.mobile-controls button { flex: 1; min-height: 58px; border-radius: 18px; font-size: 18px; touch-action: none; }
.mobile-controls .fire { background: linear-gradient(180deg, #f7f7f8, #aeb7c7); color: #10131d; }
.mobile-controls .warp { background: linear-gradient(180deg, #5d72ff, #2937a8); }
@media (max-width: 900px) {
  .app-shell { padding: 8px; }
  .topbar { align-items: stretch; flex-direction: column; padding: 14px; border-radius: 15px; }
  .connection-panel { justify-content: stretch; }
  .connection-panel input, .connection-panel button { flex: 1 1 100%; min-width: 0; }
  .badge { flex: 1; }
  .game-wrap { min-height: 58vh; margin-top: 10px; }
  canvas { height: 62vh; }
  .mobile-controls { display: grid; grid-template-columns: repeat(3, 1fr); }
  .hud { grid-template-columns: 1fr; }
  .telemetry { justify-content: flex-start; }
  .overlay h2 { font-size: 34px; }
  .keys { display: none; }
}


/* Phase 3.1 touch controls: only shown on touch-capable phones/tablets. */
.mobile-controls { display: none !important; }
.touch-controls {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  pointer-events: none;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 clamp(12px, 3vw, 32px) calc(14px + env(safe-area-inset-bottom));
}
body.touch-enabled .touch-controls { display: flex; }
.touch-cluster { pointer-events: auto; user-select: none; -webkit-user-select: none; touch-action: none; }
.joystick-base {
  position: relative;
  width: clamp(92px, 18vw, 132px);
  height: clamp(92px, 18vw, 132px);
  border-radius: 999px;
  border: 1px solid rgba(216,226,239,.30);
  background: radial-gradient(circle at 40% 35%, rgba(255,255,255,.16), rgba(255,255,255,.05) 36%, rgba(10,12,21,.74) 72%);
  box-shadow: 0 18px 42px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.22), inset 0 -18px 32px rgba(0,0,0,.24);
  backdrop-filter: blur(8px);
}
.joystick-base::before {
  content: "";
  position: absolute;
  inset: 20%;
  border-radius: inherit;
  border: 1px dashed rgba(216,226,239,.20);
}
.joystick-knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 42%;
  height: 42%;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  background: linear-gradient(145deg, #ff3456, #8f0c1e 58%, #f1f5fb 140%);
  box-shadow: 0 10px 24px rgba(255,40,72,.30), inset 0 1px 0 rgba(255,255,255,.36);
  transition: transform 90ms ease-out;
}
.joystick-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -22px;
  text-align: center;
  color: rgba(216,226,239,.82);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .18em;
}
.touch-right {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}
.touch-fire,
.touch-warp {
  width: clamp(74px, 16vw, 108px);
  height: clamp(74px, 16vw, 108px);
  padding: 0;
  border-radius: 999px;
  font-size: clamp(14px, 3vw, 18px);
  letter-spacing: .08em;
  box-shadow: 0 18px 42px rgba(255,40,72,.30), inset 0 1px 0 rgba(255,255,255,.35);
}
.touch-fire {
  background: radial-gradient(circle at 34% 24%, #ffffff, #e3e8f2 28%, #b8c2d2 64%, #717b8d 100%);
  color: #121827;
  text-shadow: 0 1px 0 rgba(255,255,255,.65);
}
.touch-warp {
  width: clamp(54px, 11vw, 78px);
  height: clamp(54px, 11vw, 78px);
  background: linear-gradient(180deg, #6477ff, #2635a4);
}
.touch-controls button.active,
.touch-controls button:active,
.joystick-base.active {
  filter: brightness(1.14);
  transform: scale(.98);
}
@media (pointer: coarse), (hover: none) {
  body.touch-enabled .touch-controls { display: flex; }
  .app-shell { padding-bottom: 116px; }
}
@media (max-width: 560px) {
  .touch-controls { padding-left: 12px; padding-right: 12px; }
  .joystick-label { display: none; }
  .touch-right { gap: 8px; }
}


/* Phase 3.2: compact in-game mobile header.
   On touch devices, once the room is joined, hide the large login buttons so the playfield has more room. */
body.touch-enabled.game-joined .topbar {
  position: fixed;
  top: calc(8px + env(safe-area-inset-top));
  left: 10px;
  right: 10px;
  z-index: 45;
  padding: 6px 8px;
  min-height: 0;
  border-radius: 999px;
  background: rgba(7, 10, 18, 0.42);
  border-color: rgba(216,226,239,.10);
  box-shadow: none;
  backdrop-filter: blur(8px);
}
body.touch-enabled.game-joined .brand-block,
body.touch-enabled.game-joined #pilotName,
body.touch-enabled.game-joined #connectBtn,
body.touch-enabled.game-joined #muteBtn {
  display: none !important;
}
body.touch-enabled.game-joined .connection-panel {
  width: 100%;
  justify-content: flex-end;
  gap: 0;
}
body.touch-enabled.game-joined .badge {
  min-width: 76px;
  padding: 7px 11px;
  font-size: 13px;
  background: rgba(5, 22, 14, 0.68);
  border-color: rgba(56,255,152,.26);
}
body.touch-enabled.game-joined .app-shell {
  padding-top: 0;
}
body.touch-enabled.game-joined .game-wrap {
  margin-top: 0;
  border-radius: 14px;
}
body.touch-enabled.game-joined canvas {
  height: min(78dvh, 820px);
}
body.touch-enabled.game-joined .hud {
  margin-top: 8px;
}
@media (max-width: 560px) {
  body.touch-enabled.game-joined .app-shell {
    padding: 0 0 108px;
  }
  body.touch-enabled.game-joined .topbar {
    top: calc(6px + env(safe-area-inset-top));
    left: auto;
    right: 10px;
    width: auto;
    padding: 5px;
  }
  body.touch-enabled.game-joined .badge {
    min-width: 68px;
    padding: 6px 10px;
    font-size: 12px;
  }
  body.touch-enabled.game-joined .game-wrap {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
  body.touch-enabled.game-joined canvas {
    height: calc(100dvh - 142px - env(safe-area-inset-bottom));
    min-height: 430px;
  }
  body.touch-enabled.game-joined .scoreboard,
  body.touch-enabled.game-joined .telemetry,
  body.touch-enabled.game-joined .notices {
    font-size: 12px;
  }
}