/* ── Outer wrap: fills viewport, dark bg, centers the game ─── */
body.drifter { background: #04000d; }

body.drifter nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
}

.game-wrap {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  height: 100vh;
  height: 100dvh;
}

/* ── 16:9 landscape viewport, capped size ────────────────── */
.game-viewport {
  position: relative;
  width:  min(100vw, calc(100vh * 16 / 9));
  height: min(100vh, calc(100vw * 9 / 16));
  width:  min(100vw, calc(100dvh * 16 / 9));
  height: min(100dvh, calc(100vw * 9 / 16));
  max-width: min(100vw, 1200px);
  max-height: min(100vh, 676px);
  max-height: min(100dvh, 676px);
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 0 0 40px rgba(0,20,40,0.8);
}

#game-canvas {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* ── Touch controls container ────────────────────────────── */
.touch-controls {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

.touch-controls button {
  pointer-events: auto;
}

/* ── D-pad (overhead layout) ─────────────────────────────── */
.touch-dpad {
  position: absolute;
  bottom: 12px;
  left: 12px;
  width: 168px;
  height: 168px;
  display: grid;
  grid-template-columns: 56px 56px 56px;
  grid-template-rows: 56px 56px 56px;
  gap: 0;
}

.touch-dpad-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.55);
  font-size: 0;
  border-radius: 6px;
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
  touch-action: none;
}

.touch-dpad-btn::after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border: 8px solid transparent;
}

.touch-dpad-btn[data-action="up"]::after    { border-bottom: 10px solid currentColor; border-top: none; }
.touch-dpad-btn[data-action="down"]::after  { border-top: 10px solid currentColor; border-bottom: none; }
.touch-dpad-btn[data-action="left"]::after  { border-right: 10px solid currentColor; border-left: none; }
.touch-dpad-btn[data-action="right"]::after { border-left: 10px solid currentColor; border-right: none; }

.touch-dpad-btn:active,
.touch-dpad-btn.active {
  background: rgba(0,245,255,0.25);
  border-color: rgba(0,245,255,0.5);
  color: rgba(0,245,255,0.9);
}

.touch-dpad-empty {
  pointer-events: none;
  background: transparent;
  border: none;
}

/* ── Action buttons (right side) ─────────────────────────── */
.touch-actions {
  position: absolute;
  bottom: 16px;
  right: 12px;
  display: flex;
  gap: 10px;
}

.touch-action-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.55);
  font-family: 'Press Start 2P', monospace;
  font-size: 0.35rem;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
  touch-action: none;
}

.touch-action-btn:active,
.touch-action-btn.active {
  background: rgba(0,245,255,0.25);
  border-color: rgba(0,245,255,0.5);
  color: rgba(0,245,255,0.9);
}

/* ── Settings button ────────────────────────────────── */
.game-settings-btn {
  position: absolute;
  z-index: 10;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  background: rgba(5,0,20,0.7);
  border: 1px solid rgba(0,168,204,0.4);
  color: #00f5ff;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: opacity 0.15s;
}

/* ── Fullscreen button (touch devices only) ─────────────── */
.game-fullscreen-btn {
  position: absolute;
  z-index: 10;
  top: 8px;
  right: 48px;
  width: 32px;
  height: 32px;
  background: rgba(5,0,20,0.7);
  border: 1px solid rgba(0,168,204,0.4);
  color: #00f5ff;
  font-size: 16px;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: opacity 0.15s;
}

/* ── Rotate device overlay (shown by JS on title screen only) ── */
.rotate-overlay {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 20;
  background: rgba(0,0,0,0.92);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.rotate-overlay.visible {
  display: flex;
}

.rotate-icon {
  font-size: 3rem;
  animation: rotate-pulse 2s ease-in-out infinite;
}

@keyframes rotate-pulse {
  0%, 100% { transform: rotate(0deg); opacity: 0.7; }
  50% { transform: rotate(90deg); opacity: 1; }
}

.rotate-text {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.6rem;
  color: #00f5ff;
  text-shadow: 0 0 6px #00f5ff;
  letter-spacing: 0.1em;
}

/* ── Fullscreen mode ────────────────────────────────────── */

.game-wrap:fullscreen .game-viewport,
.game-wrap:-webkit-full-screen .game-viewport {
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-width: none !important;
  max-height: none !important;
  border-radius: 0;
}

/* Fallback for browsers without the Fullscreen API on arbitrary elements
   (notably iOS Safari) — manually toggled by main.js instead of the
   native API, so it needs its own z-index above the fixed nav bar. */
.game-wrap.pseudo-fullscreen {
  z-index: 200;
}

.game-wrap.pseudo-fullscreen .game-viewport {
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-width: none !important;
  max-height: none !important;
  border-radius: 0;
}

/* ── Touch device overrides ─────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
  .game-fullscreen-btn {
    display: flex;
  }
}

/* ── Hide touch controls on non-touch devices ────────────── */
@media (hover: hover) and (pointer: fine) {
  .touch-controls { display: none; }
}