/*
 * Static splash + base layout shell (CLIENT_SPEC §2, §3 step 1, §4.4, §8.1).
 *
 * This file is served from public/ and linked from index.html so the splash renders
 * before any JS executes. It also carries the #game-root/#ui-root base rules because
 * index.html must not contain inline <style> blocks (CSP, §15).
 */

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  /* Dark warm backdrop so the first paint is never a white flash. */
  background: #1a140c;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/*
 * Phaser canvas parent (§4.4): fixed fullscreen, browser gestures disabled so the
 * scene owns pan/pinch, no text selection or iOS long-press callout on the canvas.
 */
#game-root {
  position: fixed;
  inset: 0;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/*
 * Crisp pixel art when the browser composites the canvas. Never set canvas
 * width/height/margin from CSS — the Phaser ScaleManager owns them (§4.4).
 */
#game-root canvas {
  image-rendering: pixelated;
}

/*
 * DOM UI overlay above the canvas (§8.1): the layer itself ignores the pointer so
 * taps reach the farm; interactive children opt back in with pointer-events: auto.
 */
#ui-root {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10;
}

/* --- Splash (removed by main.ts right after the Preact app mounts) --- */

#splash {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  background: #1a140c;
  color: #f3e3bf;
}

.splash-title {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.splash-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid rgba(243, 227, 191, 0.25);
  border-top-color: #e8a33d;
  border-radius: 50%;
  animation: splash-spin 0.9s linear infinite;
}

@keyframes splash-spin {
  to {
    transform: rotate(360deg);
  }
}

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