/* Bella's Journey - page style.
   The game is one canvas (logical 960x540) scaled by js/ui/canvas.js to fit the window, letterboxed in the middle.
   Single dark look by design: the game never follows the OS light theme. */

/* Bundled font: Fredoka (SIL Open Font License 1.1, see assets/fonts/OFL.txt) - Latin subset, variable weight 300-700 */
@font-face {
  font-family: 'Fredoka';
  src: url('assets/fonts/Fredoka-var-latin.woff') format('woff');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #070b10;
  --fg: #e8f2ee;
  --accent: #8fd8c0;
  --edge: #17222a;
  color-scheme: dark;
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: 'Fredoka', 'Trebuchet MS', 'Segoe UI', system-ui, sans-serif;
  box-sizing: border-box;
  overflow: hidden;
  /* keep a gutter on every side and clear notches / system bars on phones */
  padding-block: 8px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

/* the stage fills the window; the canvas inside is sized by JS to the largest 16:9 box that fits */
#stage {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
}

#game {
  display: block;
  border-radius: 12px;
  background: #000;
  box-shadow: 0 0 0 1px var(--edge), 0 18px 60px rgba(0, 0, 0, 0.6);
  touch-action: none;           /* the game handles touch gestures itself */
  outline: none;
  -webkit-user-select: none;
  user-select: none;
  cursor: default;
}

noscript {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 16px;
}

/* small phones / landscape phones: tighter gutter so the canvas gets more room */
@media (max-height: 480px), (max-width: 520px) {
  body {
    padding-block: 4px;
    padding-left: max(8px, env(safe-area-inset-left, 0px));
    padding-right: max(8px, env(safe-area-inset-right, 0px));
  }
  #game { border-radius: 8px; }
}

/* dvh keeps the stage inside the visible area when mobile browser bars show / hide */
@supports (height: 100dvh) {
  html, body { height: 100dvh; }
}