/* =============================================================
   ARCADE.CSS — Shared styles for the Retro Arcade
   
   This file controls the look and feel of the entire arcade.
   It uses CSS variables (custom properties) so you can easily
   change colors in one place and they update everywhere!
   ============================================================= */

/* ---------- Google Font ---------- */
/* "Press Start 2P" gives us that classic pixel/arcade look */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

/* ---------- CSS Variables (Custom Properties) ----------
   Change these to restyle the whole arcade! */
:root {
  --neon-pink:   #ff2d95;
  --neon-cyan:   #00f0ff;
  --neon-green:  #39ff14;
  --neon-yellow: #ffe600;
  --neon-purple: #b026ff;
  --neon-orange: #ff6600;
  --bg-dark:     #0a0a1a;
  --bg-card:     #12122a;
  --text-color:  #e0e0ff;
  --font-pixel:  'Press Start 2P', monospace;
}

/* ---------- Reset & Base ---------- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-pixel);
  background: var(--bg-dark);
  color: var(--text-color);
  min-height: 100vh;
  overflow-x: hidden;
  line-height: 1.6;
}

/* ---------- CRT Scanline Overlay ----------
   This creates the retro TV scanline effect.
   It sits on top of everything using position:fixed
   and pointer-events:none so you can still click through it. */
.crt-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Repeating gradient creates thin horizontal lines */
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.15) 0px,
    rgba(0, 0, 0, 0.15) 1px,
    transparent 1px,
    transparent 3px
  );
  pointer-events: none;   /* Click through the overlay */
  z-index: 9999;           /* Always on top */
}

/* Optional: slight CRT screen curvature effect on the body */
body::after {
  content: '';
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  /* Radial gradient darkens the edges like a curved screen */
  background: radial-gradient(
    ellipse at center,
    transparent 60%,
    rgba(0, 0, 0, 0.4) 100%
  );
  pointer-events: none;
  z-index: 9998;
}

/* ---------- Neon Text Glow ----------
   Use these classes to make text glow in different colors */
.glow-pink {
  color: var(--neon-pink);
  text-shadow:
    0 0 7px var(--neon-pink),
    0 0 10px var(--neon-pink),
    0 0 21px var(--neon-pink),
    0 0 42px var(--neon-pink);
}

.glow-cyan {
  color: var(--neon-cyan);
  text-shadow:
    0 0 7px var(--neon-cyan),
    0 0 10px var(--neon-cyan),
    0 0 21px var(--neon-cyan),
    0 0 42px var(--neon-cyan);
}

.glow-green {
  color: var(--neon-green);
  text-shadow:
    0 0 7px var(--neon-green),
    0 0 10px var(--neon-green),
    0 0 21px var(--neon-green),
    0 0 42px var(--neon-green);
}

.glow-yellow {
  color: var(--neon-yellow);
  text-shadow:
    0 0 7px var(--neon-yellow),
    0 0 10px var(--neon-yellow),
    0 0 21px var(--neon-yellow);
}

.glow-purple {
  color: var(--neon-purple);
  text-shadow:
    0 0 7px var(--neon-purple),
    0 0 10px var(--neon-purple),
    0 0 21px var(--neon-purple),
    0 0 42px var(--neon-purple);
}

/* ---------- Arcade Header ---------- */
.arcade-header {
  text-align: center;
  padding: 30px 20px 10px;
}

.arcade-header h1 {
  font-size: clamp(1.2rem, 4vw, 2.5rem);
  letter-spacing: 4px;
  margin-bottom: 8px;
  animation: flicker 3s infinite alternate;
}

/* Flickering neon sign animation */
@keyframes flicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    opacity: 1;
    text-shadow:
      0 0 7px var(--neon-pink),
      0 0 10px var(--neon-pink),
      0 0 21px var(--neon-pink),
      0 0 42px var(--neon-pink),
      0 0 82px var(--neon-pink);
  }
  20%, 24%, 55% {
    opacity: 0.8;
    text-shadow: none;
  }
}

.arcade-header .subtitle {
  font-size: clamp(0.5rem, 1.5vw, 0.75rem);
  color: var(--neon-cyan);
  letter-spacing: 6px;
  text-transform: uppercase;
}

/* ---------- Game Header (used on individual game pages) ---------- */
.game-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  flex-wrap: wrap;
  gap: 10px;
  border-bottom: 2px solid var(--neon-pink);
}

.game-header .game-title {
  font-size: clamp(0.7rem, 2.5vw, 1.2rem);
}

.game-header .score-display {
  font-size: clamp(0.6rem, 2vw, 1rem);
  color: var(--neon-yellow);
}

/* ---------- Back Button ---------- */
.btn-back {
  font-family: var(--font-pixel);
  font-size: clamp(0.45rem, 1.2vw, 0.65rem);
  color: var(--neon-cyan);
  background: transparent;
  border: 2px solid var(--neon-cyan);
  padding: 8px 16px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.btn-back:hover {
  background: var(--neon-cyan);
  color: var(--bg-dark);
  box-shadow: 0 0 15px var(--neon-cyan);
}

/* ---------- Game Card Grid (Landing Page) ---------- */
.game-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  padding: 40px 30px;
  max-width: 1100px;
  margin: 0 auto;
}

/* Individual game card */
.game-card {
  background: var(--bg-card);
  border: 2px solid transparent;
  border-radius: 12px;
  padding: 30px 25px;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

/* Animated gradient border on hover */
.game-card:hover {
  transform: translateY(-8px) scale(1.02);
}

.game-card.snake-card  { border-color: var(--neon-green); }
.game-card.tetris-card { border-color: var(--neon-cyan); }
.game-card.invaders-card { border-color: var(--neon-pink); }

.game-card.snake-card:hover {
  box-shadow: 0 0 30px rgba(57, 255, 20, 0.3), inset 0 0 30px rgba(57, 255, 20, 0.05);
}
.game-card.tetris-card:hover {
  box-shadow: 0 0 30px rgba(0, 240, 255, 0.3), inset 0 0 30px rgba(0, 240, 255, 0.05);
}
.game-card.invaders-card:hover {
  box-shadow: 0 0 30px rgba(255, 45, 149, 0.3), inset 0 0 30px rgba(255, 45, 149, 0.05);
}

.game-card .game-icon {
  font-size: 3.5rem;
  margin-bottom: 20px;
  display: block;
  /* Subtle floating animation */
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

.game-card .game-name {
  font-size: clamp(0.8rem, 2vw, 1.1rem);
  margin-bottom: 12px;
  letter-spacing: 2px;
}

.game-card .game-desc {
  font-size: clamp(0.45rem, 1vw, 0.55rem);
  color: #8888aa;
  line-height: 2;
}

/* "PRESS START" text on cards */
.game-card .press-start {
  margin-top: 20px;
  font-size: 0.55rem;
  letter-spacing: 3px;
  animation: blink 1.2s step-end infinite;
}

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

/* ---------- Game Canvas Container ---------- */
.game-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  gap: 15px;
}

.game-container canvas {
  border: 2px solid var(--neon-pink);
  background: #000;
  max-width: 100%;
  image-rendering: pixelated;  /* Keeps pixels crisp when scaled */
  box-shadow: 0 0 20px rgba(255, 45, 149, 0.2);
}

/* ---------- Game Info Bar (score, level, etc.) ---------- */
.game-info {
  display: flex;
  gap: 30px;
  font-size: clamp(0.5rem, 1.5vw, 0.7rem);
  flex-wrap: wrap;
  justify-content: center;
}

.game-info span {
  color: var(--neon-yellow);
}

/* ---------- Game Over / Start Screen Overlay ---------- */
.game-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  z-index: 10;
}

.game-overlay h2 {
  font-size: clamp(1rem, 3vw, 1.8rem);
}

.game-overlay .final-score {
  font-size: clamp(0.6rem, 1.5vw, 0.9rem);
  color: var(--neon-yellow);
}

/* ---------- Buttons ---------- */
.btn-play {
  font-family: var(--font-pixel);
  font-size: clamp(0.5rem, 1.3vw, 0.7rem);
  color: var(--bg-dark);
  background: var(--neon-green);
  border: none;
  padding: 12px 28px;
  cursor: pointer;
  transition: all 0.3s ease;
  letter-spacing: 2px;
}

.btn-play:hover {
  box-shadow: 0 0 25px var(--neon-green);
  transform: scale(1.05);
}

.btn-scores {
  font-family: var(--font-pixel);
  font-size: clamp(0.4rem, 1vw, 0.55rem);
  color: var(--neon-cyan);
  background: transparent;
  border: 1px solid var(--neon-cyan);
  padding: 8px 18px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-scores:hover {
  background: var(--neon-cyan);
  color: var(--bg-dark);
}

/* ---------- Leaderboard Modal ---------- */
.leaderboard-modal {
  display: none;  /* Hidden by default */
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.9);
  z-index: 1000;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.leaderboard-modal.active {
  display: flex;
}

.leaderboard-content {
  background: var(--bg-card);
  border: 2px solid var(--neon-cyan);
  border-radius: 12px;
  padding: 30px;
  max-width: 450px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 0 40px rgba(0, 240, 255, 0.2);
}

.leaderboard-content h2 {
  text-align: center;
  margin-bottom: 20px;
  font-size: clamp(0.7rem, 2vw, 1rem);
}

.leaderboard-table {
  width: 100%;
  border-collapse: collapse;
}

.leaderboard-table th,
.leaderboard-table td {
  padding: 8px 12px;
  text-align: left;
  font-size: clamp(0.4rem, 1.1vw, 0.6rem);
  border-bottom: 1px solid #222244;
}

.leaderboard-table th {
  color: var(--neon-pink);
}

.leaderboard-table tr:nth-child(1) td { color: var(--neon-yellow); }
.leaderboard-table tr:nth-child(2) td { color: #c0c0c0; }
.leaderboard-table tr:nth-child(3) td { color: #cd7f32; }

.btn-close-lb {
  font-family: var(--font-pixel);
  font-size: 0.5rem;
  color: var(--neon-pink);
  background: transparent;
  border: 1px solid var(--neon-pink);
  padding: 8px 20px;
  cursor: pointer;
  display: block;
  margin: 20px auto 0;
  transition: all 0.3s ease;
}

.btn-close-lb:hover {
  background: var(--neon-pink);
  color: var(--bg-dark);
}

/* ---------- Name Entry (3-letter initials) ---------- */
.name-entry {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
}

.name-entry input {
  font-family: var(--font-pixel);
  font-size: 1rem;
  width: 120px;
  padding: 8px;
  text-align: center;
  text-transform: uppercase;
  background: #000;
  border: 2px solid var(--neon-cyan);
  color: var(--neon-cyan);
  letter-spacing: 8px;
  outline: none;
}

.name-entry input:focus {
  box-shadow: 0 0 10px var(--neon-cyan);
}

.name-entry button {
  font-family: var(--font-pixel);
  font-size: 0.6rem;
  padding: 10px 15px;
  background: var(--neon-green);
  color: var(--bg-dark);
  border: none;
  cursor: pointer;
}

/* ---------- Touch Controls (Mobile D-Pad) ---------- */
.touch-controls {
  display: none;  /* Hidden on desktop — shown via JS on touch devices */
  position: fixed;
  bottom: 20px;
  left: 0;
  width: 100%;
  padding: 10px 20px;
  z-index: 100;
  justify-content: space-between;
  align-items: flex-end;
}

/* D-Pad (directional buttons) */
.dpad {
  display: grid;
  grid-template-columns: 55px 55px 55px;
  grid-template-rows: 55px 55px 55px;
  gap: 4px;
}

.dpad-btn {
  font-family: var(--font-pixel);
  font-size: 1.2rem;
  background: rgba(255, 255, 255, 0.08);
  border: 2px solid var(--neon-cyan);
  color: var(--neon-cyan);
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
}

.dpad-btn:active {
  background: rgba(0, 240, 255, 0.3);
  box-shadow: 0 0 15px var(--neon-cyan);
}

/* Position d-pad buttons in the grid */
.dpad-up    { grid-column: 2; grid-row: 1; }
.dpad-left  { grid-column: 1; grid-row: 2; }
.dpad-right { grid-column: 3; grid-row: 2; }
.dpad-down  { grid-column: 2; grid-row: 3; }

/* Action buttons (right side) */
.action-buttons {
  display: flex;
  gap: 12px;
  align-items: flex-end;
}

.action-btn {
  font-family: var(--font-pixel);
  font-size: 0.55rem;
  width: 65px;
  height: 65px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 2px solid var(--neon-pink);
  color: var(--neon-pink);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
}

.action-btn:active {
  background: rgba(255, 45, 149, 0.3);
  box-shadow: 0 0 15px var(--neon-pink);
}

/* ---------- Footer ---------- */
.arcade-footer {
  text-align: center;
  padding: 30px 20px;
  font-size: clamp(0.4rem, 1vw, 0.55rem);
  color: #555577;
  border-top: 1px solid #222244;
  margin-top: 40px;
}

.arcade-footer .heart {
  color: var(--neon-pink);
}

/* ---------- Responsive Adjustments ---------- */
@media (max-width: 600px) {
  .game-grid {
    padding: 20px 15px;
    gap: 20px;
  }

  .game-card {
    padding: 25px 20px;
  }

  .game-header {
    justify-content: center;
    text-align: center;
  }

  .game-container {
    padding: 10px;
  }

  /* Show touch controls on small screens / touch devices */
  .touch-controls.visible {
    display: flex;
  }

  /* Make room for touch controls at the bottom */
  .game-container {
    padding-bottom: 200px;
  }
}

/* ---------- Music Toggle Button ---------- */
.music-toggle {
  font-family: var(--font-pixel);
  font-size: 1.2rem;
  background: transparent;
  border: 2px solid var(--neon-purple);
  color: var(--neon-purple);
  padding: 6px 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 6px;
  line-height: 1;
  white-space: nowrap;
}

.music-toggle:hover {
  background: var(--neon-purple);
  color: var(--bg-dark);
  box-shadow: 0 0 15px var(--neon-purple);
}

/* ---------- Utility Classes ---------- */
.text-center { text-align: center; }
.mt-10 { margin-top: 10px; }
.mt-20 { margin-top: 20px; }
.hidden { display: none !important; }

/* ---------- Star Background Animation ---------- */
.stars {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: -1;
  overflow: hidden;
}

.star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: white;
  border-radius: 50%;
  animation: twinkle var(--duration, 3s) ease-in-out infinite;
  opacity: 0;
}

@keyframes twinkle {
  0%, 100% { opacity: 0; }
  50%      { opacity: var(--brightness, 0.8); }
}