/* =========================================================================
   RESET & FULL-SCREEN LAYOUT
   - Removes default margins, makes html/body fill viewport, prevents selection
   - Sets arcade background and default font
   ========================================================================= */
html,
body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url('images/arcade-background.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  font-family: "Arial", "Helvetica Neue", Helvetica, sans-serif;
}

/* =========================================================================
   GAME CONTAINER & CANVAS
   - The .game-container is positioned absolutely to fill the viewport
   - The canvas stretches to fill its parent container
   ========================================================================= */
.game-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%;
}

canvas {
  width: 100%;
  height: 100%;
  display: block;
  background-color: transparent;
  background-image: url('images/cbg.webp');
  background-size: cover;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
  cursor: none;
}

/* =========================================================================
   PREVENT DRAGGING / SELECTION
   - Disables text and image dragging/selection globally
   ========================================================================= */
body,
canvas,
.game-container,
.lives img,
.bullets img {
  user-select: none;
  -webkit-user-drag: none;
}

/* =========================================================================
   HEART & BULLET STYLING
   - Sets fixed dimensions for heart (lives) and bullet icons
   ========================================================================= */
.heart {
  width: 40px;
  height: 40px;
  pointer-events: none;
}

.bullet {
  width: 35px;
  height: 50px;
  pointer-events: none;
}

/* =========================================================================
   BULLET COUNT ICON (MOBILE)
   - Hides the single-bullet icon on desktop; shows on mobile via media query
   ========================================================================= */
#singleBulletIcon {
  display: none;
}

#bulletCount {
  font-size: 18px;
  font-weight: bold;
  color: white;
  display: none;
}

/* =========================================================================
   BUTTON STYLING
   - Base button styles and hover effect
   ========================================================================= */
button,
#restartButton {
  user-select: none;
}

button {
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  background-color: #61DBFB;
  color: white;
  border: none;
  border-radius: 4px;
}

button:hover {
  background-color: #009EDB;
}

/* =========================================================================
   BALANCED HEIGHT FOR SCORE, HIGH SCORE, AND RESTART BUTTON
   - Forces these elements to share identical height and prevents wrapping
   ========================================================================= */
#score,
#highScore,
#restartButton {
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
  white-space: nowrap;
}

/* =========================================================================
   BALANCED HEIGHT & FLEXIBLE WIDTH FOR SCORE & HIGH SCORE
   - Allows up to four digits (or more) to display without clipping
   - Maintains consistent height and centers text
   ========================================================================= */
#score,
#highScore {
  display: inline-block;        /* keep them on the same line */
  vertical-align: middle;       /* align with other inline-blocks */
  line-height: 1;               /* prevent extra vertical spacing */
  white-space: nowrap;          /* no wrapping */
  font-size: 18px;
  color: white;
  background-color: rgba(0, 0, 0, 0.6);
  padding: 0.7em 1em;           /* consistent top/bottom & left/right */
  border-radius: 8px;
  font-weight: bold;
  text-align: center;           /* center the numeric text */
  min-width: 5ch;               /* reserve space for up to ~4 digits */
  /* remove any max-width so numbers can expand when needed */
}

/* =========================================================================
   GAP BETWEEN SCORE & HIGH SCORE
   ========================================================================= */
#highScore {
  color: #FFD700;               /* gold text */
  margin-left: 0.2em;           /* small gap after #score */
}
/* =========================================================================
   SCORE HISTORY LIST SCROLL
   - Limits visible entries to three; adds a vertical scrollbar if more
   ========================================================================= */
/* =========================================================================
   SCORE HISTORY LIST
   - Restrict to three items before scrolling
   ========================================================================= */
#score-history-list {
  list-style: none;
  padding: 0;
  margin: 0;
  /* Approximate height for three list items (each ~38px tall): */
  max-height: 150px;
  overflow-y: auto;
  text-align: left;
}

#score-history-list li {
  display: flex;
  align-items: center;
  gap: 1em;               /* space between columns */
  padding: 0.5em 0.8em;
  margin-bottom: 0.5em;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.1);
  font-size: 0.95em;
  line-height: 1.4;
}
/* =========================================================================
   SCORE HISTORY TEXT COLORS
   - .sh-score   → green
   - .sh-date    → orange
   - .sh-duration→ blue
   ========================================================================= */
.sh-score {
  flex: 0 0 6ch;         /* “6ch” leaves room for “Score:” + 4 digits */
  color: #4CAF50;        /* green */
  font-weight: bold;
  text-align: center;
}

.sh-date {
  flex: 1 1 auto;        /* grow/shrink as needed */
  color: #FF9800;        /* orange */
  overflow: hidden;      /* if it’s _really_ long, trim */
  white-space: nowrap;
  text-overflow: ellipsis;
    font-weight: bold;
  text-align: center;
}

.sh-duration {
  flex: 0 0 5ch;         /* room for “Time:” + 4 characters */
  color: #2196F3;        /* blue */
  text-align: center;
      font-weight: bold;
}


#restartButton {
  font-size: 18px;
  background-color: rgba(0, 0, 0, 0.6);
  color: rgb(47, 230, 11);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  padding: 0.7em 1em;
  font-weight: bold;
  margin-left: 0.2em;
}
/* =========================================================================
   CUSTOM SCROLLBAR FOR SCORE HISTORY LIST
   - Thin, dark grey thumb on transparent track
   - Applies to WebKit (Chrome, Safari, Edge) and Firefox
   ========================================================================= */
/* Firefox */
#score-history-list {
  scrollbar-width: thin;
  scrollbar-color: #555 transparent;
}

/* WebKit */
#score-history-list::-webkit-scrollbar {
  width: 6px;               /* thin width */
}

#score-history-list::-webkit-scrollbar-track {
  background: transparent;  /* no track color */
}

#score-history-list::-webkit-scrollbar-thumb {
  background-color: #555;   /* dark grey thumb */
  border-radius: 3px;       /* rounded corners */
}

#score-history-list::-webkit-scrollbar-thumb:hover {
  background-color: #777;   /* lighter grey on hover */
}


/* =========================================================================
   BOTTOM UI BAR
   - Positioned at the bottom of the safe area
   - Houses lives, bullets, score, high score, and restart button
   ========================================================================= */
.bottom-ui-wrapper {
  position: absolute;
  bottom: env(safe-area-inset-bottom);
  width: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  padding: calc(10px + env(safe-area-inset-bottom)) 0 10px 0;
  display: flex;
  justify-content: center;
}

@supports (constant(safe-area-inset-bottom)) {
  .game-container {
    height: calc(100vh - constant(safe-area-inset-bottom));
  }
  .bottom-ui-wrapper {
    bottom: constant(safe-area-inset-bottom);
    padding: calc(10px + constant(safe-area-inset-bottom)) 0 10px 0;
  }
}

.bottom-ui {
  width: 95%;
  max-width: 1200px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.lives-bullets-container {
  display: flex;
  align-items: center;
  gap: 20px;
}

.lives,
.bullets {
  display: flex;
  gap: 10px;
}

.bullets {
  align-items: center;
  gap: 5px;
}

/* =========================================================================
   RULES OVERLAY
   - Full-screen overlay that shows game instructions
   ========================================================================= */
.game-rules-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}

.game-rules {
  background-color: rgba(0, 0, 0, 0.9);
  color: white;
  padding: 30px;
  border-radius: 8px;
  max-width: 700px;
  text-align: center;
  font-size: 16px;
  line-height: 1.8;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}

.game-rules h2 {
  font-size: 26px;
  margin-bottom: 15px;
  color: #61DBFB;
}

.game-rules ul {
  list-style: none;
  padding: 0;
}

.game-rules li {
  margin-bottom: 10px;
}
/* Add spacing for the nested list under “Settings” in the rules overlay */
.game-rules ul li > ul {
  margin-top: 0.5em;       /* space between “Settings…” text and its sub‐list */
  padding-left: 1.5em;     /* indent the Day/Night & Sound items */
}

.game-rules ul li > ul > li {
  margin-top: 0.3em;       /* vertical gap between each sub‐item */
}

/* Optional: slightly increase line‐height for readability */
.game-rules ul li {
  line-height: 1.5;
}

/* Tweak toggle‐icon spacing so 🌗 and 🔊 don’t sit too tight against text */
.game-rules .toggle-icon {
  margin: 0 0.25em;        /* small left/right gap around each icon */
  vertical-align: middle;  /* keep the icon aligned with text baseline */
}


#startGameButton {
  padding: 15px 30px;
  font-size: 18px;
  background-color: #61DBFB;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  margin-top: 20px;
}

#startGameButton:hover {
  background-color: #009EDB;
}

/* =========================================================================
   RELOAD MESSAGE
   - Centered “Reload!” text when out of bullets
   ========================================================================= */
.reload-message {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 32px;
  font-weight: bold;
  text-shadow: 0 0 8px rgba(255, 0, 0, 0.9);
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
  background: rgba(0, 0, 0, 0.7);
  padding: 1em;
  border-radius: 5px;
}

.reload-message.show {
  opacity: 1;
}

/* =========================================================================
   ROTATE DEVICE MESSAGE
   - Overlay prompting users to rotate device in portrait mode
   ========================================================================= */
.rotate-message-overlay {
  position: fixed;       /* fixed so it stays anchored to the viewport */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: none;         /* toggled on when in portrait */
  justify-content: center;
  align-items: center;
  z-index: 9999;         /* make sure it sits above everything else */
}


.rotate-message {
  color: white;
  text-align: center;
  padding: 30px;
  border-radius: 8px;
  background-color: rgba(0, 0, 0, 0.9);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}

.rotate-message h2 {
  font-size: 26px;
  color: #61DBFB;
}

.rotate-message p {
  font-size: 18px;
  margin-top: 10px;
  line-height: 1.5;
}

@media (orientation: portrait) {
  .rotate-message-overlay {
    display: flex;
  }
  .game-container {
    pointer-events: none;
    opacity: 0.5;
  }
}

@media (orientation: landscape) {
  .rotate-message-overlay {
    display: none;
  }
  .game-container {
    pointer-events: auto;
    opacity: 1;
  }
}

/* =========================================================================
   RULE ICONS
   - Styling for in-rule-list icons (UAV) with yellow glow effect
   ========================================================================= */
.rule-icon {
  width: 50px;
  height: 50px;
  vertical-align: middle;
  margin: 0 6px;
  filter:
    drop-shadow(0 0 3px rgba(255, 255, 0, 0.8))
    drop-shadow(0 0 8px rgba(255, 255, 0, 0.4));
}

/* =========================================================================
   POPUP MODALS (High Score & Score History)
   - Full-screen semi-transparent overlay with centered content box
   ========================================================================= */
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 50;
}

.popup-overlay.hidden {
  display: none;
}

.popup-content {
  background-color: #1a1a1a;
  color: white;
  padding: 1.5em 2em;
  border-radius: 8px;
  max-width: 410px;
  width: 90%;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.popup-content h3 {
  margin-top: 0;
  margin-bottom: 1em;
  font-size: 1.4em;
  color: #FFD700;
}

.popup-content p {
  margin: 0.5em 0;
  font-size: 1em;
}

.popup-content button {
  margin-top: 1.2em;
  padding: 0.6em 1.2em;
  font-size: 1em;
  background-color: #61DBFB;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.popup-content button:hover {
  background-color: #009EDB;
}

/* =========================================================================
   RESPONSIVE TWEAKS
   - Adjust styles for screens up to 1024px wide
   ========================================================================= */
@media (max-width: 1024px) {
  .bottom-ui-wrapper {
    padding: 5px 0;
  }
  .bullets {
    flex-direction: row;
  }
  .bullet {
    display: none;
  }
  #singleBulletIcon {
    display: inline-block;
  }
  #bulletCount {
    display: inline-block;
    font-size: 16px;
    margin-left: 8px;
  }
  #score {
    font-size: 14px;
    padding: 5px 8px;
  }
  button,
  #restartButton {
    padding: 6px 12px;
    font-size: 12px;
  }
  .heart {
    width: 25px;
    height: 25px;
  }
  .game-rules {
    font-size: 14px;
  }
  .game-rules h2 {
    font-size: 22px;
  }
  #startGameButton {
    padding: 10px 20px;
    font-size: 14px;
  }
}









/* ------------------------------------------------------------- */
/* Settings icon (top-right gear)                                */
/* ------------------------------------------------------------- */
#settingsIcon {
  position: absolute;
  z-index: 30;
  top: 10px;
  right: 10px;

  /* Fixed square container */
  width: 32px;
  height: 32px;

  /* Center the emoji exactly */
  display: flex;
  align-items: center;
  justify-content: center;

  /* Make the gear fill the box without extra vertical offset */
  font-size: 32px;
  line-height: 32px;      /* match container height */
  text-align: center;

  /* Pivot exactly at its geometric center */
  transform-origin: 50% 50%;
  transition: transform 0.6s ease-in-out;
}

#settingsIcon:hover {
  transform: rotate(240deg);
}

/* ------------------------------------------------------------- */
/* New: toggle-container for day/night and sound toggles         */
/* ------------------------------------------------------------- */
.toggle-container {
  position: relative;
  width: 48px;
  height: 48px;
  cursor: pointer;

  /* FLEX CENTERING: ensures the emoji (🌗 or 🔊) is perfectly centered */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The icon itself (🌗 or 🔊), with no extra margins or transforms */
.toggle-container span {
  display: block;
  font-size: 48px;
  line-height: 1;        /* collapse any built-in line-height quirks */
  text-align: center;
      margin-right: 10px;
}

/* ------------------------------------------------------------- */
/* The red circle (“off” overlay) that appears when opacity = 1  */
/* ------------------------------------------------------------- */
.toggle-slash {
  position: absolute;
  top: 0;
  left: 0;
  width: 60px;
  height: 60px;
  border: 4px solid rgba(255, 0, 0, 0.9);
  border-radius: 50%;
  pointer-events: none;
  transition: opacity 0.3s ease-in-out;
  opacity: 0; /* default hidden (toggle is “on”). JS flips opacity → 1 when “off.” */
  margin:-10px;
}

/* The diagonal red line inside the circle */
.toggle-line {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60%;
  height: 4px;
  background-color: rgba(255, 0, 0, 0.9);
  transform: translate(-50%, -50%) rotate(45deg);
  pointer-events: none;
}

/* ------------------------------------------------------------- */
/* Specific “slash” adjustments per toggle type                  */
/* ------------------------------------------------------------- */

/* (1) Day/Night slash: no extra shift needed (🌗 is visually centered) */
.dn-slash {
  transform: translateX(-5px);
}

/* (2) Speaker slash: shift left by 5px so 🔊 lines up perfectly */
.sound-slash {
  transform: translateX(-5px);
}
/* =============================================================================
   HIDE CURSOR ON TOUCH DEVICES
   - `pointer: coarse` targets phones/tablets (no mouse hover).
   ============================================================================= */
@media (pointer: coarse) {
  canvas {
    cursor: none !important;
  }
}
/* ────────────────────────────────────────────────────────────────────
   COUNTDOWN OVERLAY
   ──────────────────────────────────────────────────────────────────── */
#countdownOverlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;            /* sit above everything else */
  pointer-events: none;     /* let clicks “pass through” if needed */
  user-select: none;
  /* initially hidden; JS will toggle this */
  display: none;
}

/* Each digit starts large and then shrinks/fades to zero */
.countdown-number {
  color: white;
  font-family: Arial, sans-serif;
  /* initial scale is 2× normal, you can tweak */
  font-size: 10rem;
  line-height: 1;
  transform-origin: center center;
  animation: countdownShrink 1s forwards ease-in;
}

/* Keyframes: scale down from 2× → 0 and fade out opacity */
@keyframes countdownShrink {
  0% {
    transform: scale(2);
    opacity: 1;
  }
  100% {
    transform: scale(0);
    opacity: 0;
  }
}