/* ==========================================================================
   layout.css — Page Layout, Background Layers, Screen System, Board Grid
   Mushroom Grove — Enchanted Forest Whack-a-Mole
   ========================================================================== */

/* -------------------------------------------------------------------------
   Body — Full viewport, no scroll, immersive
   ------------------------------------------------------------------------- */
body {
  font-family: var(--font-body);
  font-weight: var(--weight-normal);
  color: var(--text-primary);
  background-color: var(--bg-body);
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
  position: relative;
  user-select: none;
  -webkit-user-select: none;
}

/* -------------------------------------------------------------------------
   Custom Cursor — Desktop only (staff pointer)
   ------------------------------------------------------------------------- */
body.cursor--staff {
  cursor: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><circle cx="16" cy="16" r="10" fill="none" stroke="%23f4a825" stroke-width="2" opacity="0.8"/><circle cx="16" cy="16" r="3" fill="%23f4a825"/></svg>') 16 16, pointer;
}

body.cursor--hit {
  cursor: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><circle cx="16" cy="16" r="12" fill="none" stroke="%23ff6b6b" stroke-width="3" opacity="0.9"/><line x1="10" y1="10" x2="22" y2="22" stroke="%23ff6b6b" stroke-width="2"/><line x1="22" y1="10" x2="10" y2="22" stroke="%23ff6b6b" stroke-width="2"/></svg>') 16 16, pointer;
}

/* -------------------------------------------------------------------------
   Background Layers — Fixed parallax-ready layers
   ------------------------------------------------------------------------- */
.bg-layer {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: var(--z-background);
}

/* Forest — Main background image with gradient fallback */
.bg-layer--forest {
  background:
    url('../assets/images/bg-forest.png') center center / cover no-repeat,
    linear-gradient(
      180deg,
      #050d0a 0%,
      #0a1f1a 20%,
      #0d2b24 45%,
      #1a3d35 70%,
      #0d2b24 90%,
      #070f0c 100%
    );
  z-index: 0;
}

/* Midground — Closer trees / foliage layer */
.bg-layer--midground {
  background:
    url('../assets/images/bg-midground.png') center bottom / cover no-repeat;
  z-index: 1;
  opacity: 0.6;
}

/* Fireflies — Container for JS-spawned firefly particles */
.bg-layer--fireflies {
  z-index: 3;
  overflow: hidden;
}

/* Individual firefly particle (created by JS) */
.firefly {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: var(--radius-circle);
  background: var(--color-green-300);
  box-shadow:
    0 0 6px var(--glow-green),
    0 0 12px var(--glow-green-soft);
  opacity: 0;
  will-change: transform, opacity;
  animation:
    fireflyDrift var(--timing-firefly) ease-in-out infinite,
    fireflyGlow 3000ms ease-in-out infinite;
}

/* Foreground — Vines / leaves overlay */
.bg-layer--foreground {
  background:
    url('../assets/images/bg-foreground.png') center top / cover no-repeat;
  z-index: 4;
  opacity: 0.4;
}

/* Vignette — Radial gradient overlay for focus effect */
.bg-layer--vignette {
  background: radial-gradient(
    ellipse 70% 60% at 50% 50%,
    transparent 0%,
    rgba(7, 15, 12, 0.3) 50%,
    rgba(7, 15, 12, 0.75) 80%,
    rgba(7, 15, 12, 0.95) 100%
  );
  z-index: 5;
}

/* -------------------------------------------------------------------------
   Screen System — Full viewport overlays
   ------------------------------------------------------------------------- */
.screen {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: var(--z-screens);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--timing-screen-transition) var(--ease-smooth);
  padding:
    calc(var(--safe-top) + var(--space-base))
    calc(var(--safe-right) + var(--space-base))
    calc(var(--safe-bottom) + var(--space-base))
    calc(var(--safe-left) + var(--space-base));
}

.screen.active {
  opacity: 1;
  pointer-events: auto;
}

/* Game screen needs special layout — not centered vertically */
.screen--game {
  justify-content: flex-start;
  padding-top: calc(var(--safe-top) + var(--hud-height) + var(--space-lg));
}

/* Countdown screen sits above everything */
.screen--countdown {
  z-index: var(--z-countdown);
  background: rgba(7, 15, 12, 0.6);
}

/* -------------------------------------------------------------------------
   Game Board — 3x3 CSS Grid
   ------------------------------------------------------------------------- */
.board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: var(--board-gap);
  width: 100%;
  max-width: var(--board-max-width);
  margin: auto;
  z-index: var(--z-board);
  position: relative;
  padding: var(--space-sm);
}

/* Popup container — Overlays the board for score popups */
.popups {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-popups);
}

/* Particle container — For burst effects on hit */
.particles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-particles);
  overflow: hidden;
}

/* -------------------------------------------------------------------------
   Shake class — Applied to body/board on bomb hit
   ------------------------------------------------------------------------- */
.shake {
  animation: screenShake 400ms ease-out;
}

/* -------------------------------------------------------------------------
   Responsive Breakpoints
   ------------------------------------------------------------------------- */

/* Small phones (< 360px) */
@media (max-width: 359px) {
  :root {
    --board-max-width: 280px;
    --board-gap: 6px;
    --hole-size: clamp(75px, 24vw, 90px);
    --hud-height: 48px;
  }

  .screen {
    padding:
      calc(var(--safe-top) + var(--space-sm))
      calc(var(--safe-right) + var(--space-sm))
      calc(var(--safe-bottom) + var(--space-sm))
      calc(var(--safe-left) + var(--space-sm));
  }

  .screen--game {
    padding-top: calc(var(--safe-top) + var(--hud-height) + var(--space-md));
  }
}

/* Standard phones (360-480px) */
@media (min-width: 360px) and (max-width: 480px) {
  :root {
    --board-max-width: 360px;
    --board-gap: 8px;
  }
}

/* Tablets and larger (> 480px) */
@media (min-width: 481px) {
  :root {
    --board-max-width: 420px;
    --board-gap: 12px;
    --hole-size: 120px;
  }

  .board {
    padding: var(--space-base);
  }
}

/* Landscape small screens */
@media (max-height: 500px) and (orientation: landscape) {
  :root {
    --hud-height: 44px;
    --board-max-width: 320px;
    --board-gap: 6px;
    --hole-size: clamp(65px, 18vh, 90px);
  }

  .screen--game {
    padding-top: calc(var(--safe-top) + var(--hud-height) + var(--space-sm));
  }

  .board {
    margin-top: 0;
  }
}