/* Basic styling for the page */
/* Reset body to occupy the entire viewport and provide a dark backdrop for the game. */
html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #000 repeat-x top; /* account for notches */
  padding-bottom: env(safe-area-inset-bottom);
  background-size: auto 100%;
  /* Use our sci‑fi fonts by default throughout the page.  Orbitron
     provides a clean digital look, while Press Start 2P offers a
     pixelated retro feel for UI elements. */
  font-family: 'Orbitron', 'Press Start 2P', monospace;
  color: #fff;
}

/* Define shared CSS custom properties.  The controls bar height is
   referenced by both the canvas sizing and the bar itself.  Setting
   it at :root makes it accessible throughout the stylesheet. */
:root {
  --controls-height: 120px;
  --vh: 1vh; /* dynamic vh set from JS for mobile URL-bar safe sizing */
}

/* -------------------------------------------------------------------
 * Mobile control bar
 *
 * A responsive touch controller appears at the bottom of the screen
 * when the game is played on a mobile device.  The controls are
 * hidden by default and revealed via JavaScript when a touch or
 * mobile environment is detected.  Buttons are styled with a retro
 * gold outline on a deep blue background to evoke an 8‑bit arcade
 * aesthetic.  The layout groups controls logically: shooting and
 * reloading on the left, store/jump/select in the centre, a
 * directional pad on the right and a menu button on the far edge.
 */
#mobile-controls {
  /* Position at the bottom of the screen and stretch full width */
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  /* Height is measured in JS and exposed via --controls-height */
  background: #000;
  display: none; /* shown on mobile via JS */
  z-index: 500;
  padding: 10px 12px;
  box-sizing: border-box;
  font-family: 'Press Start 2P', monospace;
  /* Stack the rows vertically with consistent spacing */
  flex-direction: column;
  gap: 8px;
  padding-bottom: calc(env(safe-area-inset-bottom) + 10px);
  border-top: 2px solid #e3c95b;
  /* Prevent all touch gestures like scroll, zoom, pan */
  touch-action: none;
  -webkit-touch-callout: none;
  overscroll-behavior: contain;
}

/* Base styling for control buttons */
#mobile-controls .control-btn {
  background: #e3c95b;
  border: 3px solid #a58b2e;
  color: #111;
  padding: 6px 8px;
  margin: 0;
  font-size: 12px;
  width: 80px;
  height: 56px;
  text-align: center;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 0 #6d5920, inset 0 2px 0 rgba(255,255,255,0.3);
  /* Prevent browser touch interference */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  /* Smooth transitions for tactile visual feedback */
  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 80ms ease,
              filter 80ms ease,
              background 80ms ease,
              border-color 80ms ease;
  position: relative;
  /* Add subtle glow effect */
  filter: drop-shadow(0 0 2px rgba(227, 201, 91, 0.4));
}

/* Arrow buttons - increased size for better touch targets */
#mobile-controls .arrow-btn {
  width: 52px;
  height: 52px;
  padding: 4px;
  font-size: 16px;
}

/* Wider menu button on desktop; on mobile rows we override width via flex */
#mobile-controls .menu-btn { width: 86px; }

/* Row containers for the control layout */
#mobile-controls .row {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* Dual button group (shoot/reload) */
#mobile-controls .dual-buttons {
  display: flex;
  gap: 8px;
}

/* Arrow cluster containing left/down/right */
#mobile-controls .arrow-cluster {
  display: flex;
  gap: 8px;
}

/* Wrapper that stacks the up arrow above the horizontal arrow cluster */
#mobile-controls .arrow-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

/* Make the jump button expand to fill remaining space */
#mobile-controls .jump-btn {
  flex: 1;
  width: auto;
}

/* Evenly distribute the bottom row buttons (menu/select/store) */
#mobile-controls .row3 .control-btn {
  flex: 1;
  width: auto;
}

/* Remove margin on up-arrow (no longer in first row) */
#mobile-controls .row1 > .control-btn.arrow-btn {
  margin-left: 0;
}

/* Align the first row's contents to the start; it only contains shoot/reload */
#mobile-controls .row1 {
  justify-content: flex-start;
}

/* Game container positions the game and intro video.  On desktop it
   centres the content with a fixed internal resolution scaled via a
   transform.  On mobile it occupies the full viewport width and
   reserves space for the control bar. */
#game-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
  height: 450px;
  image-rendering: pixelated;
}

/* Canvas fills the container.  It no longer has its own transform
   because the container handles positioning. */
#game-container canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* TAP TO START screen appears above everything else */
.tap-to-start-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  background: radial-gradient(ellipse at bottom, #1B2735 0%, #090a0f 100%);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  overflow: hidden;
}

/* Animated starfield layers */
.tap-to-start-screen::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(2px 2px at 20px 30px, white, transparent),
    radial-gradient(2px 2px at 60px 70px, white, transparent),
    radial-gradient(1px 1px at 50px 50px, white, transparent),
    radial-gradient(1px 1px at 130px 80px, white, transparent),
    radial-gradient(2px 2px at 90px 10px, white, transparent),
    radial-gradient(1px 1px at 150px 120px, white, transparent),
    radial-gradient(1px 1px at 200px 90px, white, transparent),
    radial-gradient(2px 2px at 250px 30px, white, transparent),
    radial-gradient(1px 1px at 180px 160px, white, transparent);
  background-size: 300px 300px;
  background-repeat: repeat;
  animation: twinkle 3s ease-in-out infinite;
  opacity: 0.8;
  pointer-events: none;
}

.tap-to-start-screen::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(1px 1px at 120px 140px, rgba(255,255,255,0.8), transparent),
    radial-gradient(1px 1px at 80px 200px, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 220px 180px, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 40px 100px, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 280px 60px, rgba(255,255,255,0.8), transparent);
  background-size: 350px 350px;
  background-repeat: repeat;
  animation: twinkle 4s ease-in-out infinite reverse;
  opacity: 0.6;
  pointer-events: none;
}

@keyframes twinkle {
  0%, 100% {
    opacity: 0.8;
  }
  50% {
    opacity: 0.4;
  }
}

.tap-to-start-content {
  text-align: center;
  animation: fadeInPulse 2s ease-in-out infinite;
  position: relative;
  z-index: 1;
}

.game-title {
  font-family: 'Black Ops One', cursive;
  font-size: 56px;
  color: #00ff41;
  text-shadow:
    0 0 10px #00ff41,
    0 0 20px #00ff41,
    0 0 30px #00ff41,
    0 0 40px #00aa2b,
    2px 2px 0px #000,
    -2px -2px 0px rgba(0,255,65,0.3);
  margin: 0 0 40px 0;
  letter-spacing: 6px;
  position: relative;
  z-index: 1;
}

.tap-prompt {
  font-family: 'Press Start 2P', monospace;
  font-size: 24px;
  color: #fff;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.05);
  }
}

@keyframes fadeInPulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
}

/* Responsive sizing for TAP TO START on mobile */
@media (max-width: 768px) {
  .game-title {
    font-size: 32px;
    margin: 0 0 30px 0;
    letter-spacing: 2px;
  }

  .tap-prompt {
    font-size: 18px;
  }
}

/* Intro video overlays the canvas within the game container.  It
   covers the same area and maintains aspect ratio without stretching
   across the entire page.  Initially visible until ended. */
#game-container .intro-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1000;
  display: block;
}

/* Ensure pixelated rendering on the canvas element itself.  While the
   game container also enables pixelated rendering, some browsers may
   ignore the property on parent elements when scaling the canvas. */
#game-canvas {
  image-rendering: pixelated;
}

/* Adjust container sizing on small screens to leave room for the mobile controls
while preserving the 16:9 aspect ratio without distortion. */
@media (max-width: 768px) {
#game-container {
position: absolute;
/* Center in the space between top of screen and top of controls */
top: calc((calc(var(--vh, 1vh) * 100) - var(--controls-height)) / 2);
left: 50%;
transform: translate(-50%, -50%);
/* Set dimensions to maintain perfect 16:9 ratio */
width: 100vw;
height: auto;
aspect-ratio: 16 / 9;
/* Don't exceed available height (viewport minus controls) */
max-height: calc(calc(var(--vh, 1vh) * 100) - var(--controls-height));
/* Don't exceed calculated width based on max height to maintain ratio */
max-width: calc((calc(var(--vh, 1vh) * 100) - var(--controls-height)) * 16 / 9);
}

#game-container canvas,
#game-container .intro-video {
width: 100%;
height: 100%;
/* Prevent stretching - maintain aspect ratio with letterboxing if needed */
object-fit: contain;
background: #000;
}
}


/* Heads‑up display (HUD) elements */
.hud {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 100;
  font-size: 16px;
  line-height: 1.4;
  pointer-events: none;
}

.menu-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 200;
}

.menu-overlay h1 {
  margin-bottom: 20px;
  font-size: 32px;
}

.menu-overlay .option {
  padding: 8px 12px;
  margin: 4px 0;
  cursor: default;
}

.menu-overlay .selected {
  background: #444;
}


/* --- Responsive touch controls sizing --- */
@media (max-height: 460px) {
  #mobile-controls .control-btn { width: 70px; height: 48px; font-size: 11px; }
  #mobile-controls .arrow-btn { width: 44px; height: 44px; font-size: 14px; }
  #mobile-controls .menu-btn { width: 80px; }
  #mobile-controls { padding: 8px 10px; gap: 6px; }
}


/* --- Tactile hover/touch feedback --- */
/* Simulate hover on touch start for initial feedback */
#mobile-controls .control-btn:hover {
  background: #efd56f;
  border-color: #b89a35;
  filter: drop-shadow(0 0 6px rgba(227, 201, 91, 0.6)) brightness(1.05);
  transform: translateY(-1px);
  box-shadow: 0 5px 0 #6d5920, inset 0 2px 0 rgba(255,255,255,0.4);
}

/* --- Tactile press feedback --- */
#mobile-controls .control-btn:active,
#mobile-controls .control-btn.pressed {
  transform: translateY(4px) scale(0.98);
  box-shadow: 0 0 0 #6d5920, inset 0 3px 6px rgba(0,0,0,0.4);
  filter: drop-shadow(0 0 8px rgba(227, 201, 91, 0.8)) brightness(0.85);
  background: #d4ba4c;
  border-color: #9a7d28;
}

/* Add a subtle pulse effect when button is being pressed */
@keyframes buttonPress {
  0% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(2px) scale(0.99);
  }
  100% {
    transform: translateY(4px) scale(0.98);
  }
}

#mobile-controls .control-btn.pressed {
  animation: buttonPress 100ms ease-out forwards;
}