/* ── Design tokens (subset of tokens.css, inlined to avoid an extra request) ─ */
:root {
  --pp-purple:       #7C3AED;
  --pp-purple-hover: #6D28D9;
  --pp-purple-press: #5B21B6;
  --game-bg:         #0F1E3A;
  --ai-blue:         #2C82FF;
  --player-orange:   #FF7A1A;
  --font-display: 'Fredoka', 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ── Reset ───────────────────────────────────────────────────────────────── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* Prevent double-tap zoom on iOS / Android Chrome without disabling scroll */
  touch-action: manipulation;
}

/* ── Root ────────────────────────────────────────────────────────────────── */
html, body {
  /* Use % not vw — 100vw includes the scrollbar width on some desktop browsers,
     causing a horizontal overflow on mobile. */
  width: 100%;
  height: 100%;
  /* Prevent pull-to-refresh and overscroll bounce */
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
  /* Navy game backdrop, lit by the AI-blue / Player-orange duality glow */
  background:
    radial-gradient(700px 360px at 80% -10%, rgba(44,130,255,0.20), transparent 60%),
    radial-gradient(700px 360px at 10% 110%, rgba(255,122,26,0.18), transparent 60%),
    var(--game-bg);
  /* Block text selection so tap gestures don't highlight text */
  user-select: none;
  -webkit-user-select: none;
}

/* ── Game container ──────────────────────────────────────────────────────── */
#game-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Respect iOS notch / home-bar safe areas */
  padding-top:    env(safe-area-inset-top);
  padding-right:  env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left:   env(safe-area-inset-left);
}

/* ── Canvas ──────────────────────────────────────────────────────────────── */
#game-container canvas {
  display: block;
  /* Crisp edges — matches Phaser's roundPixels: true */
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  /* On touch devices, prevent the browser handling touch events on the canvas
     so Phaser's pointer system gets all events. */
  touch-action: none;
}

/* ── Mobile viewport fix ─────────────────────────────────────────────────── */
/* On iOS, 100vh includes the browser chrome height which causes overflow.
   Use dvh (dynamic viewport height) where supported, fall back to 100%. */
@supports (height: 100dvh) {
  html, body, #game-container {
    height: 100dvh;
  }
}

/* ── PlayPuzzle sticky bottom banner ─────────────────────────────────────── */
#omt-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  background: var(--pp-purple);
  color: #ffffff;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.2px;
  text-decoration: none;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
  transition: background 120ms ease;
}
#omt-banner:hover  { background: var(--pp-purple-hover); }
#omt-banner:active { background: var(--pp-purple-press); }