/* COSMIC CUT — base styling. Deep space dark + neon accents (§10). */

:root {
  --bg: #05030f;
  --neon-cyan: #19e6ff;
  --neon-magenta: #ff3df0;
}

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

html, body {
  height: 100%;
  overflow: hidden;       /* the game is the page — nothing to scroll, ever */
}

body {
  background: var(--bg);
  color: #fff;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  /* iOS Safari: position:fixed is the reliable way to kill rubber-band/pan —
     a swipe must move the SHIP, never the page. */
  position: fixed;
  inset: 0;
  width: 100%;
  overscroll-behavior: none;
  touch-action: none;
  /* Full screen while avoiding notches: keep the canvas out of the unsafe areas
     (viewport-fit=cover is set in the meta, so these envs are live on iPhone). */
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* Phones (coarse pointer, narrow screen — matches config.js's MOBILE check):
   top-align instead of vertically centering. The portrait canvas rarely fills
   the exact screen aspect, so there's usually leftover slack; centering it
   across the FULL viewport (ignoring the safe-area padding) split that slack
   evenly above/below, pushing the game's own HUD text up under the iPhone
   status bar / Dynamic Island while leaving the equivalent gap wasted at the
   bottom. Top-aligning keeps the canvas flush under the safe-area padding
   (i.e. right below the notch) and sends any slack to the bottom instead. */
@media (pointer: coarse) and (max-width: 500px) {
  body {
    align-items: flex-start;
  }
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 0;
}

canvas {
  /* Keep the arena crisp; scale down responsively without distorting. */
  max-width: 100%;
  max-height: 100vh;
  height: auto;
  background: #000;
  border-radius: 6px;
  box-shadow: 0 0 30px rgba(25, 230, 255, 0.25);
  /* Mobile: the canvas owns all touch gestures (no page pan/zoom), no tap flash. */
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

/* Display sizing note: the contain-fit rule lives in main.js as an INLINE style
   (it must beat Pixi autoDensity's own inline style, and the aspect ratio is now
   device-branched — portrait canvas on mobile — so CSS can't hardcode it). */