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

html, body {
  height: 100%;
  overflow: hidden;
  background: #16260A;
  font-family: var(--font-ui);
  color: var(--brine);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  touch-action: manipulation;
}

body {
  display: grid;
  place-items: center;
  /* Ambient brine glow behind the stage so letterboxing on wide screens reads as
     deliberate rather than as an unstyled gap. */
  background:
    radial-gradient(120% 90% at 50% 0%, #2E5A16 0%, #16260A 70%);
}

img { max-width: 100%; display: block; -webkit-user-drag: none; user-select: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* The stage is the game's whole world, and every size in the UI is a proportion
   of it — `container-type: inline-size` is what makes the `cqw` type scale in
   tokens.css resolve against this box instead of the viewport.

   On a phone it simply fills the screen. The old rule pinned it to a 9:19.5
   aspect on every device, which letterboxed 67px away on an iPhone SE (a 308px
   stage inside a 375px screen) and squeezed the UI for no reason. Only once the
   screen is wider than a phone do we centre it as a device-shaped panel. */
.stage {
  position: relative;
  container-type: inline-size;
  container-name: stage;
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
  background: #1C3410;
  isolation: isolate;
}

/* Wider than any phone held upright — a tablet, or a desktop window. */
@media (min-aspect-ratio: 0.62) {
  .stage {
    width: min(100vw, calc(100dvh * 9 / 19.5));
    height: min(100dvh, 940px);
    border-radius: 28px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .06);
  }
}

.screens { position: absolute; inset: 0; }

/* Every screen is absolutely stacked; the router animates between them. */
.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}

.screen[data-anim='in'] { animation: screen-in var(--t-mid) var(--ease-out) both; }
.screen[data-anim='out'] { animation: screen-out var(--t-mid) var(--ease-in) both; }

@keyframes screen-in {
  from { opacity: 0; transform: scale(1.04); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes screen-out {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(.97); }
}

:where(button, [tabindex]):focus-visible {
  outline: 3px solid var(--sky);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.toasts {
  position: absolute;
  left: 0; right: 0;
  top: calc(var(--safe-t) + 84px);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  pointer-events: none;
}