/* =====================================================================
   Rustwing: base styles. Reset, full-screen layout and the layer order.
   Colour, type and component styling live in src/ui/ (tokens.css first).

   Layers:
     #game      canvas, z 0, fills the viewport, gameplay only.
     #ui        z 30, every DOM screen. pointer-events: none by default;
                each screen re-enables it on its own controls. Inside it,
                src/ui/router.js makes the screen, overlay (40), toast (50)
                and debug (60) layers (architecture.md 8.3).
     #boot-error z 90.

   Load order (index.html): src/ui/tokens.css, this file, src/ui/base.css.
   #app is sized from the visual viewport: src/main.js writes --rw-vh from
   visualViewport.height (PineBurst lesson 1: buttons laid out under Safari's
   toolbar were dead on the iPhone).
   ===================================================================== */

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

:root {
  --rw-bg: var(--rw-void, #05060D);
  --rw-fg: var(--rw-ink, #EAF0FF);
  /* Safe-area insets, so screens never hide under the notch or home bar. */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  color-scheme: dark;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--rw-bg);
  color: var(--rw-fg);
  font-family: var(--rw-font-body, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  overscroll-behavior: none;
  /* pinch-zoom, not none (PineBurst "Phone zoom lock"; pineburst-lessons.md: none only on the
     canvas, manipulation on buttons): a browser that lets the page zoom (Safari ignores
     user-scalable=no) can always be pinched back. #game and the play screen keep none. */
  touch-action: pinch-zoom;
}

#app {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  height: var(--rw-vh, 100dvh);
  overflow: hidden;
  background: var(--rw-bg);
}

#game {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  background: var(--rw-bg);
  touch-action: none;
}

#ui {
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none;
}

#boot-error {
  position: absolute;
  inset: 0;
  z-index: 90;
  padding: calc(24px + var(--safe-top)) 24px 24px;
  background: var(--rw-bg);
  color: #ff8a8a;
  font: 14px/1.4 ui-monospace, Menlo, monospace;
  white-space: pre-wrap;
  -webkit-user-select: text;
  user-select: text;
}
#boot-error[hidden] { display: none; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
  margin: 0;
}
button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  touch-action: manipulation;
}
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }

.noscript {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--rw-bg);
  color: var(--rw-fg);
}