/**
 * styles.css
 * Run in the Race for Life — page chrome only.
 * The game canvas itself is drawn and scaled entirely by Phaser
 * (see js/main.js, Scale.FIT + CENTER_BOTH); everything in this file
 * just styles the page around it — background, centering, and a
 * simple frame so the canvas reads as a distinct "screen" at any
 * window size.
 * --------------------------------------------------------------- */

/* -------------------------------------------------------------- */
/* Palette                                                         */
/* -------------------------------------------------------------- */

:root {
  --sky: #87c6e8;
  --sky-deep: #6eb4dc;
  --grass: #7ec850;
  --earth: #c4a574;
  --ink: #3a2a18;
  --panel: #fff6df;

  /* Warm parchment vignette behind the canvas — matches the in-game
     panels/wood tones instead of the sky/grass colours, so the
     letterboxed edges never look like a mismatched continuation of
     the game's own sky, whatever the browser window's aspect ratio. */
  --frame-light: #fdf6e0;
  --frame-mid: #e6cf9a;
  --frame-deep: #b98f56;
}

/* -------------------------------------------------------------- */
/* Resets                                                          */
/* -------------------------------------------------------------- */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  width: 100%;
  height: 100%;
  /* 100dvh follows the real visible viewport on mobile browsers whose
     address/toolbar can show or hide — 100% alone can leave a gap or
     force a scroll on some phones when that happens. */
  height: 100dvh;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 38%, var(--frame-light) 0%, var(--frame-mid) 55%, var(--frame-deep) 100%);
  font-family: "Press Start 2P", "Courier New", monospace;
  color: var(--ink);
  /* "manipulation" (not "none") so pinch-zoom still works as an
     accessibility fallback on very small screens; there is nothing to
     scroll anyway since overflow is hidden. */
  touch-action: manipulation;
  user-select: none;
}

/* -------------------------------------------------------------- */
/* Layout — centers the game and keeps it clear of device notches   */
/* -------------------------------------------------------------- */

#page {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}

#game-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* -------------------------------------------------------------- */
/* Canvas presentation — Phaser sets the canvas's own width/height  */
/* (Scale.FIT), so only cosmetic, non-layout-affecting properties   */
/* belong here. box-shadow (not border) is used deliberately: it    */
/* draws outside the box model, so it can never nudge Phaser's own  */
/* pixel-perfect sizing.                                            */
/* -------------------------------------------------------------- */

#game-container canvas {
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  box-shadow:
    0 0 0 3px var(--ink),
    0 10px 24px rgba(0, 0, 0, 0.35);
}

@media (min-width: 900px) {
  #game-container canvas {
    box-shadow:
      0 0 0 4px var(--ink),
      0 12px 0 #5a4030,
      0 28px 48px rgba(0, 0, 0, 0.4);
  }
}