/* Page frame of the web game: canvas, overlay layers, loading line, error box.
   The menu screens are styled by menu.css (game UI port, scoped to .gm); the HUD by hud.css; the loading line and
   the error card keep the avionics web kit (kit/avionics.css). */
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--av-page); color: var(--av-text); }
body { font: 15px/1.45 B612, sans-serif; -webkit-font-smoothing: antialiased; }
#game { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; display: block; outline: none; }

.layer { position: fixed; inset: 0; z-index: 10; }
/* Menu layers start at the game scale 1 until ui/kit.js writes --u. */
:root { --u: 1px; }
.hidden { display: none !important; }

/* .loading (the loader layer) is styled by loader.css. */

/* Errors: a red status card (kit .av-card) pinned to the bottom. */
.errors { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 40; max-height: 40vh; overflow: auto;
  --tone: var(--av-red); font: 13px/1.4 B612, monospace; color: var(--av-text); white-space: pre-wrap; }

/* Buttons built on kit key caps: strip the browser button chrome, keep the kit look. */
button.av-key { border: 0; padding: 2px 0 0; margin: 0; cursor: pointer; color: inherit; font-family: var(--av-font); }
button.av-key:focus-visible { outline: 2px solid var(--av-accent); outline-offset: 2px; }
button.av-key:hover:not(.is-lit) { filter: brightness(1.18); }
button.av-key:active { transform: translateY(1px); }