/* ==========================================================================
   ARCADE THEME — shared by every game on the site.
   Colors, fonts, the responsive game "stage", overlay screens and buttons.
   Game-specific styles belong in that game's own folder, not here.
   ========================================================================== */

:root {
  --bg: #000000;
  --neon-blue: #1f4dff;
  --neon-blue-glow: rgba(46, 94, 255, 0.75);
  --btc-orange: #f7931a;
  --btc-orange-glow: rgba(247, 147, 26, 0.7);
  --text: #f4f4f4;
  --text-dim: #8d93b8;
  --danger: #ff3b3b;
  --font-arcade: "Press Start 2P", "Courier New", monospace;

  /* Set by shared/stage.js: the on-screen width of the game in CSS px.
     Overlay text sizes are derived from it so everything scales together. */
  --stage-w: 800px;
  --u: calc(var(--stage-w) / 100);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-arcade);
  overflow: hidden;               /* the game never scrolls the page */
  overscroll-behavior: none;      /* no pull-to-refresh / rubber-banding */
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Full-viewport app shell. Padding keeps the game clear of phone notches. */
.app {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding:
    max(8px, env(safe-area-inset-top))
    max(8px, env(safe-area-inset-right))
    max(8px, env(safe-area-inset-bottom))
    max(8px, env(safe-area-inset-left));
}

/* The area the stage is fitted into (measured by stage.js). */
.stage-area {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The game itself: canvas + overlays, sized by stage.js to keep the aspect ratio. */
.stage {
  position: relative;
  touch-action: none;             /* swipes control the game, never scroll/zoom */
  overflow: hidden;
  border-radius: calc(var(--u) * 0.6);
  box-shadow: 0 0 calc(var(--u) * 4) rgba(31, 77, 255, 0.18);
}

.stage canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Subtle CRT scanlines + vignette. Pure CSS, costs almost nothing. */
.scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 60%, rgba(0, 0, 0, 0.45) 100%),
    repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.025) 0, rgba(255, 255, 255, 0.025) 1px, transparent 1px, transparent 3px);
}

/* ---------- Overlay screens (start / game over / pause) ---------- */

.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 2.2);
  padding: calc(var(--u) * 3);
  text-align: center;
  background: rgba(0, 0, 0, 0.72);
  transition: opacity 0.2s ease;
}

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

.screen-title {
  margin: 0;
  font-size: calc(var(--u) * 5.2);
  line-height: 1.35;
  color: var(--btc-orange);
  text-shadow: 0 0 calc(var(--u) * 1.2) var(--btc-orange-glow), 0 calc(var(--u) * 0.5) 0 #7a3d00;
  letter-spacing: 0.04em;
}

.screen-title .small {
  display: block;
  font-size: 0.55em;
  color: var(--text);
  text-shadow: 0 0 calc(var(--u) * 0.8) rgba(255, 255, 255, 0.4);
}

.screen-text {
  margin: 0;
  font-size: calc(var(--u) * 2.2);
  line-height: 1.7;
  color: var(--text);
}

.screen-text.dim { color: var(--text-dim); font-size: calc(var(--u) * 1.7); }
.screen-text.orange { color: var(--btc-orange); }

/* ---------- Buttons: big, tappable, no hover dependency ---------- */

.btn {
  font-family: var(--font-arcade);
  font-size: calc(var(--u) * 2.4);
  min-height: 44px;               /* Apple's minimum comfortable tap size */
  padding: calc(var(--u) * 1.8) calc(var(--u) * 3.2);
  color: #000;
  background: var(--btc-orange);
  border: none;
  border-radius: calc(var(--u) * 0.6);
  box-shadow: 0 0 calc(var(--u) * 2) var(--btc-orange-glow), 0 calc(var(--u) * 0.6) 0 #8a4700;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-appearance: none;
  appearance: none;
}

.btn:active { transform: translateY(calc(var(--u) * 0.4)); box-shadow: 0 0 calc(var(--u) * 2) var(--btc-orange-glow), 0 calc(var(--u) * 0.2) 0 #8a4700; }
.btn:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }

.blink { animation: arcade-blink 1.1s steps(2, start) infinite; }
@keyframes arcade-blink { to { visibility: hidden; } }

/* Small round icon button (mute), pinned to the corner of the screen. */
.icon-btn {
  position: fixed;
  top: max(10px, env(safe-area-inset-top));
  right: max(10px, env(safe-area-inset-right));
  z-index: 10;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: rgba(0, 0, 0, 0.6);
  color: var(--text);
  border: 2px solid var(--neon-blue);
  border-radius: 8px;
  box-shadow: 0 0 10px var(--neon-blue-glow);
  cursor: pointer;
  touch-action: manipulation;
}

.icon-btn svg { width: 22px; height: 22px; display: block; }

@media (prefers-reduced-motion: reduce) {
  .blink { animation: none; }
}