/* Design tokens. Every screen pulls its colours and type from here. */
:root {
  /* lake */
  --deep: #081c24;        /* darkest water, page background */
  --ink: #0e2a33;         /* panels on dark, body text on paper */
  --water: #1c6470;       /* mid lake teal */
  --shallow: #5fb3a8;     /* pale weedy shallows, highlights on dark */
  --mist: #cfe6e1;        /* soft text on dark */

  /* paper */
  --paper: #f4ead5;       /* cards */
  --paper-2: #e8dabb;     /* card insets, dividers */
  --paper-edge: #c9b88f;  /* card borders */
  --ink-soft: #5b6b68;    /* secondary text on paper */

  /* accents */
  --bobber: #e4572e;      /* primary action */
  --bobber-dark: #a93a1b; /* button edge / pressed */
  --sun: #f2b134;         /* coins, trophies */
  --reed: #6a8f3c;        /* success, "in the zone" */
  --danger: #c8322b;      /* line about to snap */

  --font-display: 'Alfa Slab One', 'Rockwell', 'Roboto Slab', Georgia, serif;
  --font-ui: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 10px 30px rgba(3, 14, 18, 0.45);
  --shadow-sm: 0 3px 10px rgba(3, 14, 18, 0.3);

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--deep);
  color: var(--mist);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; touch-action: manipulation; }
h1, h2, h3, p { margin: 0; }

/* the 3D lake fills the window; the UI floats over it */
#view { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; outline: none; }
#ui { position: fixed; inset: 0; pointer-events: none; }
#ui > * { pointer-events: auto; }

/* first paint, before the game boots */
#boot {
  position: fixed; inset: 0; display: grid; place-items: center; gap: 0;
  background: radial-gradient(120% 90% at 50% 20%, var(--water), var(--deep) 70%);
  transition: opacity 0.5s ease; z-index: 50;
}
#boot.done { opacity: 0; pointer-events: none; }
#boot .boot-inner { text-align: center; }
#boot h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(44px, 12vw, 96px); color: var(--paper); letter-spacing: 0.01em; text-shadow: 0 4px 0 var(--bobber-dark); }
#boot p { margin-top: 10px; color: var(--mist); letter-spacing: 0.14em; text-transform: uppercase; font-size: 12px; font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}