/* style.css — full-bleed daylight canvas, zero chrome.
   Two stacked canvases: #world is the WebGL stadium + actors, #game is the
   transparent 2D HUD on top. They are the same size and the same pixel grid;
   render3d.js and scene.js are handed identical dimensions every frame. */

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #070b16;                 /* --sky-top; matches the letterbox fill */
  /* perceived speed: never let the browser hold a tap for a double-tap */
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

#world, #game {
  position: fixed;
  inset: 0;
  display: block;
  width: 100vw;
  height: 100vh;
  /* HUD safe-area handled in-canvas; the goal never enters a notch */
}

/* #game is the only one that takes input — #world is purely visual, and a tap
   must never be swallowed by the layer underneath. */
#world { z-index: 0; pointer-events: none; }
#game  { z-index: 1; background: transparent; }