/* ═══════════════════════════════════════════════════════════════
   SPACE BLOCKS — style.css  (PIXEL ART EDITION)
   Font: Press Start 2P (headings), VT323 (body/scores)
   Aesthetic: CRT pixel arcade, scanlines, chunky borders
═══════════════════════════════════════════════════════════════ */

/* ── CSS Variables ─────────────────────────────────────────── */
:root {
  --bg-deep: #02030a;
  --bg-dark: #060812;
  --bg-panel: #0a0e22;
  --bg-glass: rgba(8, 12, 30, 0.92);
  --bg-pixel-btn: #0d1535;

  --px-cyan: #00f8ff;
  --px-magenta: #ff00e5;
  --px-purple: #8844ff;
  --px-lime: #00ff44;
  --px-orange: #ff7700;
  --px-gold: #ffdd00;
  --px-red: #ff2244;
  --px-white: #cce8ff;
  --px-dim: #3a4a6a;

  /* Pixel border colours */
  --border-cyan: #00f8ff;
  --border-dim: #1a2240;
  --border-gold: #ffdd00;

  --font-pixel: "Press Start 2P", monospace;
  --font-vt: "VT323", monospace;

  /* Pixel "drop shadow" for buttons - 4px hard offset */
  --px-shadow: 4px 4px 0 #000;
  --px-shadow-sm: 2px 2px 0 #000;
}

/* ── Splash Screen ───────────────────────────────────────────── */
#splash-screen {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--bg-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.5s ease-out;
  pointer-events: none;
}

#splash-screen.splash-hidden {
  opacity: 0;
  pointer-events: none;
}

.splash-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  animation: splash-bounce 0.6s ease-out;
}

.splash-logo {
  width: min(75vw, 400px);
  height: auto;
  image-rendering: pixelated;
  filter: drop-shadow(4px 4px 0 #000);
}

.splash-tagline {
  font-family: var(--font-pixel);
  font-size: clamp(0.6rem, 2vw, 0.9rem);
  color: var(--px-cyan);
  text-shadow: 2px 2px 0 #000;
  letter-spacing: 0.1em;
  animation: splash-pulse 1.5s ease-in-out infinite;
}

.splash-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

@keyframes splash-bounce {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes splash-pulse {
  0%,
  100% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
}

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

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg-deep);
  color: var(--px-white);
  font-family: var(--font-vt);
  font-size: 16px;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: none; /* intentionally crisp for pixel look */
  image-rendering: pixelated;
  touch-action: none;
  user-select: none;
  /* CRT pixel scaling effect */
  letter-spacing: 0.02em;
}

/* ── Scanline overlay ──────────────────────────────────────── */
#scanlines {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 3px,
    rgba(0, 0, 0, 0.18) 3px,
    rgba(0, 0, 0, 0.18) 4px
  );
}

/* ── CRT vignette ──────────────────────────────────────────── */
#crt-vignette {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    transparent 60%,
    rgba(0, 0, 0, 0.6) 100%
  );
}

/* ── tsParticles background ────────────────────────────────── */
#tsparticles {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* ── Shooting Stars Canvas ────────────────────────────────── */
#shootingStarsCanvas {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  image-rendering: pixelated;
}

/* ── Nebula ────────────────────────────────────────────────── */
.nebula {
  position: fixed;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.12;
  animation: nebula-drift 40s ease-in-out infinite alternate;
}
.nebula-1 {
  width: 60vw;
  height: 60vw;
  background: radial-gradient(circle, #5500ff 0%, transparent 70%);
  top: -20%;
  left: -10%;
}
.nebula-2 {
  width: 50vw;
  height: 50vw;
  background: radial-gradient(circle, #0044ff 0%, transparent 70%);
  bottom: -10%;
  right: -5%;
  animation-direction: alternate-reverse;
  animation-duration: 50s;
}
@keyframes nebula-drift {
  0% {
    transform: translate(0, 0) scale(1);
  }
  100% {
    transform: translate(4vw, 3vh) scale(1.08);
  }
}

/* ── App wrapper ───────────────────────────────────────────── */
#app {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}

/* ── Screen transitions ────────────────────────────────────── */
.screen {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s steps(4);
  z-index: 10;
}
.screen.active {
  opacity: 1;
  pointer-events: all;
}

/* ══════════════════════════════════════════════════════════════
   PIXEL PRIMITIVES
══════════════════════════════════════════════════════════════ */

/* ── Pixel Panel ───────────────────────────────────────────── */
.px-panel {
  background: var(--bg-panel);
  /* 4-sided pixel border using box-shadow stack */
  border: 3px solid var(--border-cyan);
  box-shadow:
    inset 0 0 0 2px var(--bg-deep),
    0 0 0 2px var(--bg-deep),
    6px 6px 0 0 rgba(0, 248, 255, 0.25),
    var(--px-shadow);
  image-rendering: pixelated;
}

/* ── Pixel Buttons ─────────────────────────────────────────── */
.px-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--bg-pixel-btn);
  border: 3px solid var(--px-cyan);
  box-shadow:
    4px 4px 0 #000,
    inset 0 1px 0 rgba(0, 248, 255, 0.15);
  color: var(--px-cyan);
  font-family: var(--font-pixel);
  font-size: 0.55rem;
  letter-spacing: 0.05em;
  cursor: pointer;
  padding: 0.8rem 1.2rem;
  text-transform: uppercase;
  image-rendering: pixelated;
  transition:
    transform 0.05s,
    box-shadow 0.05s;
  outline: none;
}
.px-btn:hover {
  background: rgba(0, 248, 255, 0.08);
  box-shadow:
    6px 6px 0 #000,
    inset 0 1px 0 rgba(0, 248, 255, 0.2);
}
.px-btn:active {
  transform: translate(4px, 4px);
  box-shadow: 0 0 0 #000;
}
.px-btn.secondary {
  border-color: var(--px-dim);
  color: #8899bb;
}
.px-btn.secondary:hover {
  border-color: var(--px-purple);
  color: var(--px-purple);
}
.px-btn.adventure-btn {
  border-color: var(--px-magenta);
  color: var(--px-magenta);
  box-shadow:
    4px 4px 0 #000,
    inset 0 1px 0 rgba(255, 0, 229, 0.12);
}
.px-btn.adventure-btn:hover {
  background: rgba(255, 0, 229, 0.08);
}

.px-btn-sm {
  background: var(--bg-pixel-btn);
  border: 2px solid var(--px-dim);
  box-shadow: 2px 2px 0 #000;
  color: #8899bb;
  font-family: var(--font-pixel);
  font-size: 0.45rem;
  letter-spacing: 0.05em;
  cursor: pointer;
  padding: 0.4rem 0.6rem;
  text-transform: uppercase;
  transition:
    transform 0.05s,
    box-shadow 0.05s;
  outline: none;
}
.px-btn-sm:hover {
  border-color: var(--px-cyan);
  color: var(--px-cyan);
}
.px-btn-sm:active {
  transform: translate(2px, 2px);
  box-shadow: none;
}

/* ══════════════════════════════════════════════════════════════
   MENU SCREEN
══════════════════════════════════════════════════════════════ */
#screen-menu {
  background: transparent;
}

.menu-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  padding: 1.5rem;
  max-width: 480px;
  width: 100%;
  background: rgba(6, 8, 18, 0.85);
  position: relative;
  z-index: 2;
  margin: auto;
}

.menu-logo {
  width: min(60vw, 260px);
  height: auto;
  image-rendering: pixelated;
  filter: drop-shadow(3px 3px 0 #000);
  animation: logo-bounce 2s ease-in-out infinite;
  margin-bottom: 0.5rem;
  position: relative;
}

.menu-logo::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120%;
  height: 120%;
  border-radius: 12px;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 248, 255, 0.3) 0%,
    transparent 70%
  );
  animation: logo-glow 3s ease-in-out infinite;
  z-index: -1;
  pointer-events: none;
}

@keyframes logo-glow {
  0% {
    background: radial-gradient(
      ellipse at center,
      rgba(0, 248, 255, 0.35) 0%,
      transparent 70%
    );
  }
  25% {
    background: radial-gradient(
      ellipse at center,
      rgba(255, 0, 229, 0.35) 0%,
      transparent 70%
    );
  }
  50% {
    background: radial-gradient(
      ellipse at center,
      rgba(136, 68, 255, 0.35) 0%,
      transparent 70%
    );
  }
  75% {
    background: radial-gradient(
      ellipse at center,
      rgba(0, 255, 68, 0.35) 0%,
      transparent 70%
    );
  }
  100% {
    background: radial-gradient(
      ellipse at center,
      rgba(0, 248, 255, 0.35) 0%,
      transparent 70%
    );
  }
}

@keyframes logo-bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(8px);
  }
}

/* NES.css button overrides - Block style */
.menu-container .nes-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  padding: 0.4rem 0.8rem;
  font-family: var(--font-pixel);
  font-size: 0.5rem;
  min-width: 120px;
  min-height: 40px;
  transition: transform 0.1s;
  border-radius: 0;
  position: relative;
  image-rendering: pixelated;
  animation: button-pulse 1.5s ease-in-out infinite;
}

@keyframes button-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.03);
  }
}

.menu-container .nes-btn:active {
  transform: translateY(2px);
  animation: none;
}

.menu-container .nes-btn:active {
  transform: translateY(2px);
}

/* Classic button - Cyan block style */
.menu-container .nes-btn.is-primary {
  background: #00f8ff;
  color: #000;
  border: 4px solid #007a90;
  box-shadow:
    inset 2px 2px 0 #aaffff,
    inset -2px -2px 0 #003040,
    4px 4px 0 #000;
}

/* Adventure button - Gold block style */
.menu-container .nes-btn.is-warning {
  background: #ffdd00;
  color: #000;
  border: 4px solid #887700;
  box-shadow:
    inset 2px 2px 0 #ffff99,
    inset -2px -2px 0 #333300,
    4px 4px 0 #000;
}

/* Button pressed state */
.menu-container .nes-btn.is-primary:active {
  box-shadow:
    inset 2px 2px 0 #003040,
    inset -2px -2px 0 #aaffff,
    2px 2px 0 #000;
}

.menu-container .nes-btn.is-warning:active {
  box-shadow:
    inset 2px 2px 0 #333300,
    inset -2px -2px 0 #ffff99,
    2px 2px 0 #000;
}

.btn-icon {
  font-size: 1.2rem;
}

.btn-label {
  font-size: 0.9rem;
}

.btn-sub {
  font-family: var(--font-vt);
  font-size: 0.9rem;
  opacity: 0.8;
}

/* Title */
.title-block {
  text-align: center;
}

.pixel-deco {
  font-family: var(--font-pixel);
  font-size: 0.45rem;
  color: var(--px-purple);
  letter-spacing: 0.4em;
  margin-bottom: 0.5rem;
}

.game-title {
  font-family: var(--font-pixel);
  font-size: clamp(1.6rem, 6vw, 2.8rem);
  font-weight: 400;
  line-height: 1.3;
  color: var(--px-white);
  text-shadow:
    2px 2px 0 #000,
    0 0 12px rgba(0, 248, 255, 0.7),
    0 0 30px rgba(0, 248, 255, 0.3);
  letter-spacing: 0.08em;
}
.title-accent {
  color: var(--px-cyan);
  display: block;
  animation: px-blink-glow 2.5s ease-in-out infinite;
}
@keyframes px-blink-glow {
  0%,
  100% {
    text-shadow:
      2px 2px 0 #000,
      0 0 12px rgba(0, 248, 255, 0.9),
      0 0 40px rgba(0, 248, 255, 0.4);
  }
  50% {
    text-shadow:
      2px 2px 0 #000,
      0 0 6px rgba(0, 248, 255, 0.4),
      0 0 15px rgba(0, 248, 255, 0.15);
  }
}

.subtitle {
  font-family: var(--font-vt);
  font-size: clamp(1rem, 3vw, 1.3rem);
  color: var(--px-purple);
  letter-spacing: 0.15em;
  margin-top: 0.2rem;
  margin-bottom: 0.2rem;
}

/* Mode cards */
.mode-cards {
  display: flex;
  gap: 1rem;
  width: 100%;
  justify-content: center;
}
.mode-card {
  flex: 1;
  max-width: 180px;
  gap: 0.4rem;
  padding: 1rem 0.8rem;
}

/* Mobile stack */
@media (max-width: 480px) {
  #screen-menu {
    align-items: center;
    justify-content: center;
  }

  .menu-container {
    padding: 1rem 0.8rem;
    margin: 0 auto;
    max-width: 95vw;
    gap: 0.5rem;
    overflow-y: auto;
    max-height: 95vh;
  }

  .title-block {
    text-align: center;
  }

  .menu-logo {
    width: min(65vw, 220px);
    margin: 0 auto 0.2rem;
  }

  .subtitle {
    font-size: 1rem;
    margin: 0 auto 0.3rem;
  }

  .mode-cards {
    flex-direction: column;
    align-items: center;
    width: 100%;
  }
  .mode-card {
    max-width: 200px;
    width: 100%;
  }

  .hs-panel {
    padding: 0.5rem 1rem;
  }

  .game-audio-controls {
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }

  .controls-hint {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.3rem;
  }

  .dev-footer {
    margin-top: 0.8rem;
    padding: 0.5rem;
  }

  /* ── Mobile HUD ────────────────────────────────────────── */
  #hud-top {
    padding: 0.25rem 0.3rem !important;
    gap: 0.2rem;
    flex-wrap: wrap;
    justify-content: center;
  }

  #btn-back {
    padding: 0.4rem 0.7rem !important;
    font-size: 0.55rem !important;
    min-height: 36px;
    letter-spacing: 0.05em;
  }

  #hud-center {
    order: 3;
    width: 100%;
    text-align: center;
    margin-top: 0.15rem;
  }

  #mode-label {
    font-size: 0.35rem;
  }

  #level-label {
    font-size: 0.45rem;
  }

  #hud-scores {
    gap: 0.3rem;
    align-items: center;
  }

  #hud-scores .score-box {
    padding: 0.15rem 0.3rem !important;
    min-width: 36px;
  }

  .score-label {
    font-size: 0.8rem !important;
    letter-spacing: 0.1em;
  }

  .score-val {
    font-size: 0.75rem !important;
  }

  #hud-scores .settings-btn {
    padding: 0.3rem 0.5rem !important;
    font-size: 0.45rem !important;
    min-height: 26px;
    background: var(--px-cyan) !important;
    color: #000 !important;
    border: 2px solid var(--px-cyan) !important;
    box-shadow:
      inset 1px 1px 0 rgba(255, 255, 255, 0.3),
      2px 2px 0 #000 !important;
    animation: settings-pulse 2s ease-in-out infinite;
  }
}

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

/* ── Tablet HUD (481px-700px) ──────────────────────────── */
@media (min-width: 481px) and (max-width: 700px) {
  #hud-top {
    padding: 0.35rem 0.4rem;
    gap: 0.4rem;
  }

  #hud-scores .score-box {
    padding: 0.25rem 0.4rem !important;
    min-width: 42px;
  }

  .score-val {
    font-size: 0.65rem;
  }

  .score-label {
    font-size: 0.32rem;
  }
}

.btn-icon {
  font-size: 1.6rem;
  margin-bottom: 0.3rem;
  display: block;
}
.btn-label {
  font-family: var(--font-pixel);
  font-size: 0.55rem;
  display: block;
}
.btn-sub {
  font-family: var(--font-vt);
  font-size: 0.85rem;
  color: var(--px-dim);
  display: block;
  margin-top: 0.3rem;
}

/* HS panel */
.hs-panel {
  padding: 0.8rem 2rem;
  text-align: center;
  min-width: 200px;
}
.px-panel-title {
  font-family: var(--font-pixel);
  font-size: 0.45rem;
  color: var(--px-dim);
  letter-spacing: 0.2em;
  margin-bottom: 0.5rem;
}
.hs-value {
  font-family: var(--font-pixel);
  font-size: clamp(1rem, 4vw, 1.5rem);
  color: var(--px-gold);
  text-shadow:
    2px 2px 0 #000,
    0 0 10px rgba(255, 221, 0, 0.5);
  letter-spacing: 0.15em;
}

/* Controls hint */
.controls-hint {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  justify-content: center;
}
.controls-hint span {
  font-family: var(--font-pixel);
  font-size: 0.38rem;
  color: var(--px-dim);
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--border-dim);
  padding: 0.4rem 0.6rem;
  letter-spacing: 0.08em;
}

/* ══════════════════════════════════════════════════════════════
   GAME SCREEN
══════════════════════════════════════════════════════════════ */
#screen-game {
  flex-direction: column;
  background: transparent;
  padding: 0;
  overflow: hidden;
}

/* HUD Top */
#hud-top {
  position: relative;
  z-index: 20;
  width: 100%;
  max-width: 540px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.6rem;
  background: var(--bg-dark);
  border-bottom: 3px solid var(--border-dim);
  flex-shrink: 0;
}

#hud-center {
  text-align: center;
}
#mode-label {
  font-family: var(--font-pixel);
  font-size: 0.45rem;
  color: var(--px-purple);
  letter-spacing: 0.12em;
}
#level-label {
  font-family: var(--font-pixel);
  font-size: 0.6rem;
  color: var(--px-cyan);
  margin-top: 2px;
}

#hud-scores {
  display: flex;
  gap: 0.8rem;
}
.score-box {
  text-align: center;
  min-width: 50px;
}
.score-label {
  font-family: var(--font-pixel);
  font-size: 0.38rem;
  color: var(--px-dim);
  letter-spacing: 0.12em;
}
.score-val {
  font-family: var(--font-pixel);
  font-size: 0.8rem;
  color: var(--px-cyan);
  text-shadow:
    1px 1px 0 #000,
    0 0 8px rgba(0, 248, 255, 0.4);
  transition: color 0.1s;
}

/* Objective bar */
#objective-bar {
  width: 100%;
  max-width: 540px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.6rem;
  background: rgba(136, 68, 255, 0.1);
  border-bottom: 2px solid rgba(136, 68, 255, 0.3);
  font-family: var(--font-pixel);
  font-size: 0.38rem;
  color: var(--px-purple);
  letter-spacing: 0.05em;
  flex-shrink: 0;
}
.px-progress-track {
  flex: 1;
  height: 8px;
  background: rgba(0, 0, 0, 0.6);
  border: 2px solid var(--border-dim);
  image-rendering: pixelated;
  overflow: hidden;
}
.px-progress-fill {
  height: 100%;
  background: repeating-linear-gradient(
    90deg,
    var(--px-purple) 0px,
    var(--px-purple) 6px,
    var(--px-cyan) 6px,
    var(--px-cyan) 8px
  );
  width: 0%;
  transition: width 0.3s steps(10);
  image-rendering: pixelated;
}
#objective-count {
  min-width: 36px;
  text-align: right;
  font-size: 0.45rem;
}

/* Game area */
#game-area {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 540px;
  background: rgba(20, 30, 60, 0.6);
}

/* Canvas wrap */
#canvas-wrap {
  position: relative;
  display: inline-block;
  line-height: 0;
  /* Pixel-perfect border */
  border: 3px solid var(--border-dim);
  box-shadow:
    0 0 0 1px #000,
    4px 4px 0 #000,
    0 0 20px rgba(0, 248, 255, 0.08);
  image-rendering: pixelated;
  transition: box-shadow 0.15s ease-out;
}

/* Combo glow effects */
#canvas-wrap.combo-glow-1 {
  box-shadow:
    0 0 0 1px #000,
    4px 4px 0 #000,
    0 0 15px var(--px-cyan),
    0 0 30px rgba(0, 248, 255, 0.5);
}
#canvas-wrap.combo-glow-2 {
  box-shadow:
    0 0 0 1px #000,
    4px 4px 0 #000,
    0 0 20px var(--px-lime),
    0 0 40px rgba(0, 255, 85, 0.5);
  border-color: var(--px-lime);
}
#canvas-wrap.combo-glow-3 {
  box-shadow:
    0 0 0 1px #000,
    4px 4px 0 #000,
    0 0 25px var(--px-gold),
    0 0 50px rgba(255, 221, 0, 0.6);
  border-color: var(--px-gold);
}
#canvas-wrap.combo-glow-4,
#canvas-wrap.powerup-glow {
  box-shadow:
    0 0 0 1px #000,
    4px 4px 0 #000,
    0 0 30px var(--px-magenta),
    0 0 60px rgba(255, 0, 221, 0.7);
  border-color: var(--px-magenta);
}

#canvas-wrap canvas {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
#gameCanvas {
  position: relative;
  z-index: 1;
}
#fxCanvas {
  z-index: 2;
  pointer-events: none;
}
#ghostCanvas {
  z-index: 3;
  pointer-events: none;
}

/* Combo flash */
#combo-flash {
  position: fixed;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
  font-family: var(--font-pixel);
  font-size: clamp(0.8rem, 4vw, 1.4rem);
  text-align: center;
  pointer-events: none;
  animation: px-combo-pop 0.7s steps(4) forwards;
  text-shadow: 3px 3px 0 #000;
}
.combo-1 {
  color: var(--px-cyan);
}
.combo-2 {
  color: var(--px-lime);
}
.combo-3 {
  color: var(--px-gold);
}
.combo-4 {
  color: var(--px-magenta);
}
.powerup-flash {
  animation: px-powerup-pop 1s ease-out forwards;
}
@keyframes px-powerup-pop {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.3);
  }
  15% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.4);
  }
  30% {
    transform: translate(-50%, -50%) scale(1);
  }
  60% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -60%) scale(0.8);
  }
}
@keyframes px-combo-pop {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
  }
  20% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.2);
  }
  70% {
    opacity: 1;
    transform: translate(-50%, -65%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -80%) scale(0.9);
  }
}

/* Shape tray */
#shape-tray {
  width: 100%;
  max-width: 540px;
  flex-shrink: 0;
  background: var(--bg-dark);
  border-top: 3px solid var(--border-dim);
  padding: 0.4rem 0.4rem 0.6rem;
}
.tray-label {
  font-family: var(--font-pixel);
  font-size: 0.38rem;
  color: var(--px-dim);
  text-align: center;
  letter-spacing: 0.15em;
  margin-bottom: 0.4rem;
}
#shape-slots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}
.shape-slot {
  position: relative;
  background: rgba(0, 0, 0, 0.5);
  border: 2px solid var(--border-dim);
  cursor: grab;
  /* NO transform/size transitions — prevents "pop" on rotate */
  transition: border-color 0.1s;
  touch-action: none;
  image-rendering: pixelated;
  /* Fixed dimensions so canvas redraw never shifts layout */
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}
.shape-slot:active {
  cursor: grabbing;
}
.shape-slot.dragging {
  opacity: 0.35;
  transform: scale(0.93);
  border-color: var(--px-cyan);
  box-shadow: 0 0 10px rgba(0, 248, 255, 0.3);
}
.shape-slot.used {
  opacity: 0.15;
  pointer-events: none;
}
.shape-slot:hover:not(.used):not(.dragging) {
  border-color: var(--px-cyan);
  box-shadow: 0 0 8px rgba(0, 248, 255, 0.2);
}
.slot-canvas {
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  animation: tray-pulse 2s ease-in-out infinite;
}

@keyframes tray-pulse {
  0%, 100% {
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.04);
    filter: brightness(1.15) drop-shadow(0 0 4px rgba(0, 248, 255, 0.4));
  }
}
.slot-hint {
  font-family: var(--font-pixel);
  font-size: 0.35rem;
  color: var(--px-dim);
  text-align: center;
  padding: 2px 0;
  letter-spacing: 0.05em;
}

/* Drag ghost */
#drag-ghost {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.9;
  display: none;
  transform: translate(-50%, -50%);
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* Audio controls container */
/* Audio controls */
.game-audio-controls {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  z-index: 200;
}

#audio-controls-game {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 6px;
}

.volume-container {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-pixel-btn);
  border: 2px solid var(--border-dim);
  box-shadow: 2px 2px 0 #000;
  padding: 0.4rem 0.6rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.game-audio-controls:hover .volume-container,
.volume-container:focus-within {
  opacity: 1;
  pointer-events: auto;
}

.volume-label {
  font-family: var(--font-pixel);
  font-size: 0.35rem;
  color: var(--px-dim);
  letter-spacing: 0.05em;
}

/* Pixel Range Slider */
.volume-slider {
  -webkit-appearance: none;
  width: 80px;
  height: 8px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid var(--border-dim);
  outline: none;
  image-rendering: pixelated;
}

.volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  background: var(--px-cyan);
  border: 2px solid #000;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.4);
  cursor: pointer;
}

.volume-slider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  background: var(--px-cyan);
  border: 2px solid #000;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.4);
  cursor: pointer;
  border-radius: 0;
}

/* Audio toggle button */
.nes-btn.is-small.audio-toggle {
  padding: 0.35rem 0.5rem;
  font-size: 0.4rem;
  min-width: 50px;
  line-height: 1;
  min-height: 28px;
}

.audio-toggle {
  background: var(--bg-pixel-btn);
  border: 2px solid var(--border-dim);
  box-shadow: 2px 2px 0 #000;
  color: var(--px-dim);
  font-family: var(--font-pixel);
  font-size: 0.38rem;
  cursor: pointer;
  padding: 0.4rem 0.6rem;
  letter-spacing: 0.05em;
  transition: border-color 0.1s;
}
.audio-toggle:hover {
  border-color: var(--px-cyan);
  color: var(--px-cyan);
}
.audio-toggle:active {
  transform: translate(2px, 2px);
  box-shadow: none;
}

/* ══════════════════════════════════════════════════════════════
   GAME OVER SCREEN
══════════════════════════════════════════════════════════════ */
#screen-gameover,
#screen-levelup {
  background: rgba(2, 3, 10, 0.9);
}
.go-panel,
.lu-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 2rem 1.8rem;
  max-width: 360px;
  width: 90%;
}
.go-panel {
  border-color: var(--px-red);
}
.lu-panel {
  border-color: var(--px-cyan);
}

.go-skull {
  font-size: 3rem;
  animation: px-float 2s steps(4) infinite;
}
@keyframes px-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}
.go-title {
  font-family: var(--font-pixel);
  font-size: clamp(0.9rem, 4vw, 1.4rem);
  color: var(--px-red);
  text-shadow:
    3px 3px 0 #000,
    0 0 12px rgba(255, 34, 68, 0.6);
  letter-spacing: 0.08em;
}
.go-sub {
  font-family: var(--font-vt);
  font-size: 1.1rem;
  color: var(--px-dim);
  letter-spacing: 0.12em;
}
.go-scores {
  display: flex;
  gap: 1.5rem;
}
.go-score-item {
  text-align: center;
  background: rgba(0, 0, 0, 0.5);
  border: 2px solid var(--border-dim);
  padding: 0.6rem 1rem;
  min-width: 90px;
}
.go-score-label {
  font-family: var(--font-pixel);
  font-size: 0.38rem;
  color: var(--px-dim);
  letter-spacing: 0.12em;
  margin-bottom: 0.4rem;
}
.go-score-val {
  font-family: var(--font-pixel);
  font-size: 1rem;
  color: var(--px-cyan);
  text-shadow: 2px 2px 0 #000;
}
.go-score-val.gold {
  color: var(--px-gold);
}

/* Stars */
#go-stars,
.lu-stars {
  display: flex;
  gap: 1rem;
}
.go-star,
.lu-star {
  font-size: 2rem;
  color: var(--px-dim);
  text-shadow: 1px 1px 0 #000;
  transition:
    color 0.2s steps(3),
    transform 0.2s steps(3);
  display: inline-block;
}
.go-star.earned,
.lu-star.active {
  color: var(--px-gold);
  text-shadow:
    2px 2px 0 #000,
    0 0 10px rgba(255, 221, 0, 0.7);
  transform: scale(1.3);
  animation: star-pop 0.4s steps(4);
}
@keyframes star-pop {
  0% {
    transform: scale(0.4);
  }
  60% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1.3);
  }
}

.go-buttons {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 0.5rem;
}

/* Level up */
.lu-title {
  font-family: var(--font-pixel);
  font-size: clamp(0.8rem, 3.5vw, 1.2rem);
  color: var(--px-cyan);
  text-shadow:
    3px 3px 0 #000,
    0 0 12px rgba(0, 248, 255, 0.6);
  letter-spacing: 0.08em;
}
.lu-score-row {
  display: flex;
  gap: 1rem;
  align-items: baseline;
}
.lu-score-label {
  font-family: var(--font-pixel);
  font-size: 0.45rem;
  color: var(--px-dim);
  letter-spacing: 0.12em;
}
.lu-score-val {
  font-family: var(--font-pixel);
  font-size: 1.2rem;
  color: var(--px-gold);
  text-shadow:
    2px 2px 0 #000,
    0 0 8px rgba(255, 221, 0, 0.5);
}

/* NES.css slider styling */
.nes-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 80px;
  height: 8px;
  background: var(--bg-panel);
  border: 2px solid var(--border-dim);
  outline: none;
}

.nes-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  background: var(--px-cyan);
  border: 2px solid #000;
  cursor: pointer;
}

.nes-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: var(--px-cyan);
  border: 2px solid #000;
  cursor: pointer;
}

/* NES.css container overrides for game theme */
.nes-container.is-rounded {
  background: var(--bg-glass);
  border-color: var(--border-dim);
}

/* HUD styling */
#hud-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem;
}

#hud-center {
  font-family: var(--font-pixel);
  font-size: 0.7rem;
  color: var(--px-cyan);
  text-shadow: 2px 2px 0 #000;
}

#hud-scores {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

#hud-scores .score-box {
  padding: 0.5rem 0.75rem;
}

.score-label {
  font-family: var(--font-vt);
  font-size: 0.8rem;
  color: var(--px-dim);
}

.score-val {
  font-family: var(--font-pixel);
  font-size: 0.65rem;
  color: var(--px-cyan);
}

/* Objective bar */
#objective-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.5rem;
}

#objective-bar span {
  font-family: var(--font-vt);
  font-size: 1rem;
  color: var(--px-white);
}

.nes-progress {
  flex: 1;
}

.nes-progress progress.nes-progress {
  height: 16px;
}

/* Shape tray */
#shape-tray {
  padding: 0.75rem;
}

.tray-label {
  font-family: var(--font-vt);
  font-size: 1rem;
  color: var(--px-dim);
  margin-bottom: 0.5rem;
  text-align: center;
}

#shape-slots {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
}

.shape-slot {
  padding: 0.5rem;
  min-width: 80px;
  min-height: 80px;
}

.slot-hint {
  font-family: var(--font-vt);
  font-size: 0.7rem;
  color: var(--px-dim);
  margin-top: 0.25rem;
}

/* Game over / Level up panels */
.go-panel,
.lu-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 2rem;
  max-width: 400px;
  margin: 0 auto;
}

.go-title,
.lu-title {
  font-family: var(--font-pixel);
  font-size: 1.2rem;
  color: var(--px-red);
  text-shadow: 2px 2px 0 #000;
}

.lu-title {
  color: var(--px-lime);
}

.go-sub {
  font-family: var(--font-vt);
  font-size: 1.1rem;
  color: var(--px-dim);
}

.go-scores {
  display: flex;
  gap: 1rem;
  width: 100%;
  justify-content: center;
}

.go-score-item {
  padding: 0.75rem 1rem;
  text-align: center;
}

.go-score-label {
  font-family: var(--font-vt);
  font-size: 0.9rem;
  color: var(--px-dim);
}

.go-score-val {
  font-family: var(--font-pixel);
  font-size: 0.8rem;
  color: var(--px-white);
}

.go-score-val.gold {
  color: var(--px-gold);
}

.go-buttons {
  display: flex;
  gap: 1rem;
  margin-top: 0.5rem;
}

.go-buttons .nes-btn {
  font-family: var(--font-pixel);
  font-size: 0.6rem;
  padding: 0.75rem 1.5rem;
}

/* Stars */
.lu-stars {
  font-size: 2rem;
  color: var(--px-dim);
}

.lu-star.active {
  color: var(--px-gold);
  text-shadow: 0 0 10px var(--px-gold);
}

.go-star.earned {
  color: var(--px-gold);
}

.go-star,
.lu-star {
  transition: color 0.3s;
}

/* ── Popup Words ─────────────────────────────────────────── */
.popup-word {
  position: fixed;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 200;
  font-family: var(--font-pixel);
  font-size: clamp(1rem, 5vw, 2rem);
  text-align: center;
  pointer-events: none;
  text-shadow: 3px 3px 0 #000;
  animation: px-popup-rise 1.1s steps(6) forwards;
}
.popup-word.color-cyan {
  color: var(--px-cyan);
}
.popup-word.color-lime {
  color: var(--px-lime);
}
.popup-word.color-gold {
  color: var(--px-gold);
}
.popup-word.color-magenta {
  color: var(--px-magenta);
}
.popup-word.color-purple {
  color: var(--px-purple);
}
.popup-word.color-red {
  color: var(--px-red);
}

@keyframes px-popup-rise {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.4);
  }
  12% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.3);
  }
  25% {
    transform: translate(-50%, -50%) scale(1);
  }
  70% {
    opacity: 1;
    transform: translate(-50%, -70%) scale(1.05);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -100%) scale(0.7);
  }
}

/* ── Settings Button ───────────────────────────────────────── */
.settings-btn {
  font-family: var(--font-pixel);
  font-size: 0.38rem;
  padding: 0.35rem 0.5rem;
  min-height: 28px;
}

/* ── Settings Modal ────────────────────────────────────────── */
.settings-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(2px);
}

.settings-dialog {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 9001;
  background: var(--bg-panel) !important;
  border: 3px solid var(--border-cyan) !important;
  box-shadow:
    0 0 0 2px var(--bg-deep),
    6px 6px 0 0 rgba(0, 248, 255, 0.25),
    8px 8px 0 #000 !important;
  padding: 1.5rem 2rem !important;
  min-width: 280px;
  max-width: 340px;
  image-rendering: pixelated;
}

.settings-dialog.hidden,
.settings-overlay.hidden {
  display: none !important;
}

.settings-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.2rem;
  border-bottom: 2px solid var(--border-dim);
  padding-bottom: 0.6rem;
}

.settings-header h3 {
  font-family: var(--font-pixel);
  font-size: 0.7rem;
  color: var(--px-cyan);
  text-shadow: 2px 2px 0 #000;
  margin: 0;
}

.settings-header .nes-btn {
  min-width: auto;
  font-size: 0.6rem;
  padding: 0.2rem 0.4rem;
}

.settings-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.setting-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.setting-label {
  font-family: var(--font-pixel);
  font-size: 0.45rem;
  color: var(--px-white);
  letter-spacing: 0.1em;
}

.setting-row .nes-btn {
  min-width: 80px;
  font-family: var(--font-pixel);
  font-size: 0.4rem;
}

.setting-row .nes-slider {
  width: 120px;
}

/* ── Utility ───────────────────────────────────────────────── */
.hidden {
  display: none !important;
}

/* ── Score bump animation ──────────────────────────────────── */
@keyframes px-score-bump {
  0% {
    transform: scale(1);
    color: var(--px-cyan);
  }
  30% {
    transform: scale(1.4);
    color: var(--px-gold);
  }
  100% {
    transform: scale(1);
    color: var(--px-cyan);
  }
}
.score-bump {
  animation: px-score-bump 0.3s steps(4);
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════════ */
@media (max-height: 600px) {
  .menu-container {
    gap: 0.9rem;
    padding: 0.8rem;
  }
  .game-title {
    font-size: 1.4rem;
  }
  #shape-tray {
    padding: 0.25rem 0.4rem 0.35rem;
  }
}
@media (min-width: 700px) {
  #hud-top,
  #objective-bar,
  #game-area,
  #shape-tray {
    max-width: 540px;
    width: 540px;
  }
}
@media (max-height: 500px) and (orientation: landscape) {
  #screen-game {
    flex-direction: row;
    flex-wrap: wrap;
  }
  #hud-top {
    width: 100%;
    max-width: 100%;
  }
  #game-area {
    flex: 1;
    height: 100vh;
    width: auto;
  }
  #shape-tray {
    width: 130px;
    flex-direction: column;
    height: 100vh;
    border-top: none;
    border-left: 3px solid var(--border-dim);
  }
  #shape-slots {
    flex-direction: column;
  }
}

/* Game Over Flash Sequence */
#game-over-flash {
  position: fixed;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
  font-family: var(--font-pixel);
  font-size: clamp(1.5rem, 6vw, 3rem);
  color: var(--px-red);
  text-shadow:
    4px 4px 0 #000,
    0 0 25px rgba(255, 34, 68, 0.8);
  text-align: center;
  pointer-events: none;
}

@keyframes px-go-pop {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.1);
  }
  15% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.2);
  }
  25% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  80% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.1);
  }
}