/* game.css — LAYERED ON TOP of app.css (loaded after it) for game builds.
   It does NOT replace the design system; it only:
     1) defaults games to a dark chrome (overrides app.css's light :root, since
        games drop the theme.js switcher), and
     2) adds OPT-IN full-bleed canvas scaffolding (.game-stage / .game-hud /
        .game-controls) for real-time arcade games.
   A themed game's injected {{THEME_BLOCK}} (a fixed dark scheme) overrides the
   palette below; a "mono" game falls back to it. DOM/manager games just use the
   normal .screen layout + design system and SCROLL like an app. */

/* 1) Dark chrome default (only the color vars; app.css owns radius/shadow/etc.) */
:root {
  --bg: #0B0B0F;
  --surface: #15151C;
  --surface-2: #1E1E28;
  --border: #2A2A38;
  --border-strong: #3A3A4A;
  --fg: #F4F4F8;
  --fg-muted: #A6A6B8;
  --fg-soft: #6E6E80;
  --accent: #5B8CFF;
  --accent-fg: #0B0B0F;
  --accent-muted: #3E6BD6;
  --accent-glow: #7FB0FF;
}

/* Games never rubber-band / pull-to-refresh; the body still scrolls normally. */
html, body { overscroll-behavior: none; }

/* 2) OPT-IN full-bleed playfield for canvas/arcade games. A real-time game puts
      its <canvas> inside <div class="game-stage"> to escape the .screen padding
      and fill the viewport; DOM/manager games omit this entirely. */
.game-stage {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
  z-index: 1;
}
.game-stage canvas { display: block; width: 100%; height: 100%; touch-action: none; }

/* Safe-area-aware HUD overlay (score/lives/buttons). Non-interactive by default
   so it never eats playfield gestures; real buttons re-enable pointer events. */
.game-hud {
  position: absolute;
  top: 0; left: 0; right: 0;
  padding: calc(env(safe-area-inset-top) + 12px) calc(env(safe-area-inset-right) + 14px) 0 calc(env(safe-area-inset-left) + 14px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
  z-index: 10;
}
.game-hud button,
.game-hud .hud-btn,
.game-hud [data-interactive] { pointer-events: auto; }

.hud-stat {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.5px;
  color: var(--fg);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* On-screen controls (d-pad / action buttons), safe-area padded at the bottom. */
.game-controls {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 0 calc(env(safe-area-inset-right) + 16px) calc(env(safe-area-inset-bottom) + 16px) calc(env(safe-area-inset-left) + 16px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 10;
}
.game-controls button,
.game-btn {
  pointer-events: auto;
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--fg);
  border-radius: 16px;
  min-width: 56px;
  min-height: 56px;
  font-size: 22px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.game-btn:active { background: var(--accent); color: var(--accent-fg); }

/* Centered overlay panel for start / game-over / pause screens (inside .game-stage). */
.game-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-align: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 20;
}
.game-overlay h1 { font-family: var(--font-display); font-size: 28px; margin: 0; }
.game-overlay p { color: var(--fg-muted); margin: 0; max-width: 320px; line-height: 1.5; }

.game-primary-btn {
  pointer-events: auto;
  border: none;
  background: var(--accent);
  color: var(--accent-fg);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  padding: 14px 28px;
  border-radius: 14px;
  min-height: 52px;
}