* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  background: #05050a;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  overflow: hidden;
  font-family: 'Courier New', monospace;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  overscroll-behavior: none;
}
/* Game world is 900 logical units wide; height follows the container's aspect
   ratio (see resizeCanvas in game.js). On desktop the container keeps the
   classic 900×640 letterbox with glow; on touch devices it goes full-bleed
   and the world adapts to any orientation. */
#gameContainer {
  position: relative;
  box-shadow: 0 0 60px rgba(80,200,255,0.3);
  width: min(900px, 100vw, calc(100vh * 1.40625));
  aspect-ratio: 900 / 640;
}
@supports (height: 100dvh) {
  #gameContainer { width: min(900px, 100vw, calc(100dvh * 1.40625)); }
}
canvas {
  display: block;
  width: 100%;
  height: 100%;
  background: #05050a;
  border: 1px solid rgba(80,200,255,0.2);
  touch-action: none;
}
/* On true touch devices go full-bleed (edge to edge, any orientation); the
   game world's height adapts to the container's aspect ratio. */
@media (pointer: coarse) and (hover: none) {
  #gameContainer {
    width: 100vw;
    height: 100vh;
    aspect-ratio: auto;
    box-shadow: none;
  }
  @supports (height: 100dvh) {
    #gameContainer { height: 100dvh; }
  }
  canvas { border: none; }
  /* Leaderboard collides with centered menu text on narrow/portrait screens */
}
@media (max-width: 560px), ((orientation: portrait) and (pointer: coarse)) {
  #leaderboard-panel { display: none !important; }
}
#hud {
  position: absolute;
  top: 0; left: 0; right: 0;
  padding: 12px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
  z-index: 10;
  font-size: 16px;
  color: #00e5ff;
  text-shadow: 0 0 8px rgba(0,229,255,0.6);
}
#hud .lives { display: flex; gap: 6px; align-items: center; }
#hud .life-icon { width: 16px; height: 16px; }
#hud .callsign-hud {
  font-size: 13px;
  color: #88ccff;
  text-shadow: 0 0 6px rgba(136,204,255,0.4);
}
#overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 20;
  pointer-events: auto;
  text-align: center;
}
#overlay h1 {
  font-size: 42px;
  color: #00e5ff;
  text-shadow: 0 0 20px rgba(0,229,255,0.8), 0 0 40px rgba(0,229,255,0.4);
  letter-spacing: 6px;
  margin-bottom: 10px;
}
#overlay h2 {
  font-size: 22px;
  color: #ff44a0;
  text-shadow: 0 0 12px rgba(255,68,160,0.7);
  letter-spacing: 3px;
  margin-bottom: 20px;
}
#overlay p {
  color: #88ccff;
  font-size: 14px;
  line-height: 1.8;
  text-shadow: 0 0 6px rgba(136,204,255,0.4);
}
#overlay .controls-hint {
  margin-top: 20px;
  font-size: 13px;
  color: #5588aa;
}
/* Callsign entry */
#callsign-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
#callsign-screen label {
  font-size: 14px;
  color: #88ccff;
  text-shadow: 0 0 6px rgba(136,204,255,0.4);
}
#callsign-input {
  background: rgba(0,229,255,0.08);
  border: 1px solid rgba(0,229,255,0.4);
  color: #00e5ff;
  font-family: 'Courier New', monospace;
  font-size: 20px;
  text-align: center;
  padding: 10px 20px;
  border-radius: 4px;
  outline: none;
  text-shadow: 0 0 8px rgba(0,229,255,0.5);
  letter-spacing: 3px;
  text-transform: uppercase;
  width: 200px;
}
#callsign-input:focus {
  border-color: #00e5ff;
  box-shadow: 0 0 12px rgba(0,229,255,0.3);
}
#callsign-error {
  color: #ff4444;
  font-size: 12px;
  min-height: 14px;
  text-shadow: 0 0 6px rgba(255,68,68,0.4);
}
/* Avatar picker */
#avatar-picker {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
#avatar-canvas {
  border: 2px solid rgba(0,229,255,0.3);
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(0,229,255,0.2);
}
.avatar-controls {
  display: flex;
  gap: 16px;
}
.avatar-controls button {
  background: rgba(0,229,255,0.1);
  border: 1px solid rgba(0,229,255,0.4);
  color: #00e5ff;
  font-family: 'Courier New', monospace;
  font-size: 14px;
  padding: 6px 14px;
  border-radius: 4px;
  cursor: pointer;
  text-shadow: 0 0 6px rgba(0,229,255,0.4);
}
.avatar-controls button:hover {
  background: rgba(0,229,255,0.2);
  border-color: #00e5ff;
}
/* Leaderboard panel */
#leaderboard-panel {
  position: absolute;
  top: 50px;
  right: 0;
  width: 200px;
  background: rgba(10,10,20,0.85);
  border-left: 1px solid rgba(0,229,255,0.15);
  padding: 16px 14px;
  font-size: 12px;
  color: #88ccff;
  z-index: 15;
  pointer-events: none;
  display: none;
}
#leaderboard-panel.visible { display: block; }
#leaderboard-panel h3 {
  font-size: 14px;
  color: #00e5ff;
  text-shadow: 0 0 8px rgba(0,229,255,0.5);
  letter-spacing: 2px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(0,229,255,0.2);
  padding-bottom: 6px;
}
.lb-entry {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.lb-rank {
  width: 18px;
  color: #ff44a0;
  font-weight: bold;
  text-shadow: 0 0 4px rgba(255,68,160,0.4);
}
.lb-callsign {
  flex: 1;
  color: #88ccff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lb-score {
  color: #ffdd44;
  text-shadow: 0 0 4px rgba(255,221,68,0.4);
}
.lb-entry.you {
  background: rgba(0,229,255,0.1);
  border-radius: 4px;
  padding: 4px 6px;
}
.lb-entry.you .lb-callsign { color: #00e5ff; }
/* Game over stats */
#gameover-stats {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  margin: 10px 0;
}
#gameover-stats .stat-row {
  display: flex;
  gap: 30px;
  font-size: 16px;
}
#gameover-stats .stat-label {
  color: #5588aa;
}
#gameover-stats .stat-val {
  color: #ffdd44;
  text-shadow: 0 0 6px rgba(255,221,68,0.4);
}
#gameover-rank {
  font-size: 18px;
  color: #00e5ff;
  text-shadow: 0 0 8px rgba(0,229,255,0.5);
  margin: 6px 0;
}
/* Buttons */
.neon-btn {
  background: rgba(0,229,255,0.1);
  border: 1px solid rgba(0,229,255,0.5);
  color: #00e5ff;
  font-family: 'Courier New', monospace;
  font-size: 16px;
  padding: 10px 24px;
  border-radius: 4px;
  cursor: pointer;
  text-shadow: 0 0 8px rgba(0,229,255,0.5);
  letter-spacing: 2px;
  margin-top: 8px;
}
.neon-btn:hover {
  background: rgba(0,229,255,0.2);
  border-color: #00e5ff;
  box-shadow: 0 0 15px rgba(0,229,255,0.3);
}
/* Power-up indicator */
#powerup-indicator {
  position: absolute;
  bottom: 12px; left: 20px;
  z-index: 10;
  pointer-events: none;
  font-size: 13px;
  color: #ffdd44;
  text-shadow: 0 0 8px rgba(255,221,68,0.6);
}
.pu-bar {
  display: inline-block;
  width: 60px;
  height: 4px;
  background: rgba(255,221,68,0.2);
  border-radius: 2px;
  margin-left: 6px;
  overflow: hidden;
}
.pu-bar-fill {
  height: 100%;
  background: #ffdd44;
  box-shadow: 0 0 6px #ffdd44;
  transition: width 0.1s linear;
}

/* ═══════════════════════════════════════════
   TOUCH / MOBILE CONTROLS
   ═══════════════════════════════════════════ */
#pause-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 44px;
  height: 44px;
  z-index: 30;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(10,10,20,0.55);
  border: 1px solid rgba(0,229,255,0.4);
  border-radius: 8px;
  color: #00e5ff;
  font-size: 15px;
  line-height: 1;
  font-family: 'Courier New', monospace;
  font-weight: bold;
  letter-spacing: 1px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
#pause-btn.show { display: flex; }
#joy {
  position: absolute;
  width: 112px;
  height: 112px;
  margin-left: -56px;
  margin-top: -56px;
  border-radius: 50%;
  border: 1.5px dashed rgba(0,229,255,0.35);
  background: radial-gradient(circle, rgba(0,229,255,0.10) 0%, rgba(0,229,255,0.03) 60%, transparent 70%);
  z-index: 11;
  pointer-events: none;
  display: none;
}
#joy.show { display: block; }
#joy .joy-knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 48px;
  height: 48px;
  margin-left: -24px;
  margin-top: -24px;
  border-radius: 50%;
  background: rgba(0,229,255,0.25);
  border: 2px solid #00e5ff;
  box-shadow: 0 0 14px rgba(0,229,255,0.7), inset 0 0 10px rgba(0,229,255,0.4);
}
#joy.thrusting { border-style: solid; border-color: #ff8844; }
#joy.thrusting .joy-knob {
  background: rgba(255,136,68,0.3);
  border-color: #ff8844;
  box-shadow: 0 0 16px rgba(255,136,68,0.8), inset 0 0 10px rgba(255,136,68,0.5);
}
#zone-hint {
  position: absolute;
  bottom: 18px;
  left: 0;
  right: 0;
  z-index: 11;
  display: none;
  justify-content: space-between;
  padding: 0 24px;
  pointer-events: none;
  color: rgba(136,204,255,0.75);
  font-size: 13px;
  letter-spacing: 2px;
  text-shadow: 0 0 8px rgba(0,229,255,0.4);
}
#zone-hint.show { display: flex; }
#hud { gap: 8px; }
/* Pause button sits in the HUD's top-right corner; keep the lives out of its way */
#hud .lives { margin-right: 40px; }
#leaderboard-panel { top: 58px; }

/* ═══════════════════════════════════════════
   RESPONSIVE SCALE-DOWN (small screens)
   ═══════════════════════════════════════════ */
@media (max-width: 560px), (max-height: 380px) {
  #hud {
    padding: calc(6px + env(safe-area-inset-top)) 8px 4px;
    font-size: 11px;
    flex-wrap: wrap;
    row-gap: 2px;
  }
  #hud .callsign-hud { font-size: 10px; }
  #hud .lives { gap: 3px; }
  #hud .life-icon { width: 11px; height: 11px; }
  #leaderboard-panel { top: 48px; right: 0; width: 140px; padding: 10px 8px; font-size: 10px; }
  #leaderboard-panel h3 { font-size: 11px; letter-spacing: 1px; }
  .lb-callsign { font-size: 10px; }
  #overlay h1 { font-size: clamp(22px, 7vw, 42px); letter-spacing: 3px; }
  #overlay h2 { font-size: clamp(13px, 4vw, 22px); margin-bottom: 12px; }
  #overlay p { font-size: 12px; line-height: 1.6; }
  #overlay .controls-hint { font-size: 11px; margin-top: 12px; }
  .neon-btn { font-size: 14px; padding: 12px 22px; }
  #callsign-input { width: 170px; font-size: 17px; }
  #powerup-indicator { bottom: calc(8px + env(safe-area-inset-bottom)); left: 10px; font-size: 11px; }
  #gameover-stats .stat-row { gap: 16px; font-size: 13px; }
  #gameover-rank { font-size: 14px; }
  .avatar-controls { gap: 10px; }
  .avatar-controls button { font-size: 12px; padding: 8px 12px; }
}
/* Safe areas for notched devices */
#powerup-indicator { bottom: calc(12px + env(safe-area-inset-bottom)); }
#hud { padding-top: calc(12px + env(safe-area-inset-top)); }