/* ──────────────────────────────────────────────────────────────────────
   Bubble Shooter — STAR-WARS / sci-fi visual layer.
   Scoped to this page only (loaded after the global site.css), so any
   header/score/button overrides here don't affect other games.
   ────────────────────────────────────────────────────────────────────── */

@import url('../../vendor/fonts/orbitron-500-700-900.css');

:root {
  --bbl-cyan:   #2ad9ff;
  --bbl-blue:   #5e3afa;
  --bbl-magenta:#ff48d3;
  --bbl-amber:  #ffd84a;
  --bbl-panel:  #0e1424;
  --bbl-panel2: #1a2240;
}

/* ─── In-page scoreboard ─── */
.app .score-box {
  background: linear-gradient(180deg, #1a2440 0%, #0a1024 100%);
  border: 1px solid rgba(42, 217, 255, 0.45);
  box-shadow:
    inset 0 0 10px rgba(42, 217, 255, 0.18),
    0 0 8px rgba(42, 217, 255, 0.25);
}
.app .score-label {
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #9cdcff;
  text-shadow: 0 0 4px rgba(42, 217, 255, 0.55);
}
.app .score-value {
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  color: #ffffff;
  text-shadow: 0 0 6px var(--bbl-cyan), 0 0 12px var(--bbl-blue);
}

/* ─── Toolbar buttons + select ─── */
.app .btn {
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #d8f4ff;
  background: linear-gradient(180deg, #1a2240 0%, #0a1024 100%);
  border: 1px solid rgba(42, 217, 255, 0.55);
  text-shadow: 0 0 6px rgba(42, 217, 255, 0.55);
  box-shadow:
    inset 0 0 10px rgba(42, 217, 255, 0.18),
    0 0 10px rgba(42, 217, 255, 0.30);
  transition: transform 0.08s, box-shadow 0.15s, border-color 0.15s;
}
.app .btn:hover {
  border-color: var(--bbl-cyan);
  box-shadow:
    inset 0 0 14px rgba(42, 217, 255, 0.28),
    0 0 16px rgba(42, 217, 255, 0.55);
}
.app .btn:active { transform: translateY(1px); }

.app .select {
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  letter-spacing: 0.10em;
  background: linear-gradient(180deg, #1a2240 0%, #0a1024 100%);
  color: #d8f4ff;
  border: 1px solid rgba(94, 58, 250, 0.55);
  box-shadow: inset 0 0 8px rgba(94, 58, 250, 0.20);
}

/* ─── Canvas — the holographic playfield ───
   IMPORTANT: scope this rule to the GAME canvas only (#canvas).
   `Confetti.burst()` injects a new <canvas> with position:fixed;inset:0
   for fullscreen particles. If we styled the bare `canvas` selector,
   the injected confetti canvas inherits the cyan border + grid-gradient
   background + 320×480 forced size, and pops at the top-left of the
   viewport as a "ghost game frame" at every win/lose. */
#canvas {
  display: block;
  /* 172px = site-header(44) + in-page header(70) + toolbar(42) + gaps(16) */
  width: min(320px, 94vw, calc((100dvh - 172px) * 2 / 3));
  aspect-ratio: 2 / 3;
  border-radius: var(--radius-lg);
  /* Sci-fi neon frame: thin cyan border + OUTER cyan/magenta glow only.
     The INSET glow was removed — at game-over the dim overlay made the
     32px inset ring POP by contrast, reading as an "extra frame" inside
     the canvas. Outer glow stays because it sits outside the canvas
     edge and doesn't compete with the playfield. */
  border: 1px solid rgba(42, 217, 255, 0.55);
  box-shadow:
    0 0 0 1px rgba(42, 217, 255, 0.15),
    0 0 18px rgba(42, 217, 255, 0.35),
    0 0 38px rgba(94, 58, 250, 0.28),
    var(--shadow-lg);
  /* Background: hex/grid lattice overlaid on a deep-space radial. Game-side
     starfield twinkles on top of this. */
  background:
    /* horizontal grid lines */
    repeating-linear-gradient(0deg,    transparent 0 39px, rgba(42, 217, 255, 0.05) 39px 40px),
    /* vertical grid lines */
    repeating-linear-gradient(90deg,   transparent 0 39px, rgba(42, 217, 255, 0.05) 39px 40px),
    /* deep space radial */
    radial-gradient(ellipse at 50% 18%, #1a2244 0%, #0a0e22 45%, #04030c 100%);
  cursor: crosshair;
  touch-action: none;
}