/* App shell: layering only. Everything visual lives in ui/* blocks and the renderer. */

html,
body {
  height: 100%;
  overflow: hidden;
  /* The Sprokets mark in a price is the character ⚙: drawn as text, never a colour emoji. */
  font-variant-emoji: text;
}

.app-arena {
  position: fixed;
  inset: 0;
  /* A thumb on the arena drives the ship; it must never scroll or select. */
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  width: 100%;
  height: 100%;
  display: block;
  outline: none;
  cursor: none; /* the renderer draws the crosshair */
  touch-action: none;
}

.app-arena[hidden] {
  display: none;
}

#screen,
#overlay {
  position: relative;
}

#overlay {
  z-index: 30;
}

.app-noscript {
  padding: 48px;
  text-align: center;
  color: var(--sp-text-dim);
}

/* The menu can be taller than a short viewport (the page itself never
   scrolls), so its screen scrolls. The arena HUD never does. */
#screen[data-screen="menu"],
#screen[data-screen="leaderboard"] {
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* The build-mode corner (ui/EvolutionPreview over ui/StatPanel), bottom right
   where the arena HUD leaves room. The layer never takes a pointer event; the
   panel and the chip take their own. Above the HUD, under the picker. */
#build-hud {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
}

.app-build-hud {
  position: absolute;
  right: 24px;
  bottom: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

.app-build-hud > * {
  pointer-events: auto;
}

/* StatPanel places itself bottom-left of its positioned ancestor; in this
   stack it flows instead. */
.app-build-hud .sp-statpanel {
  position: relative;
  left: auto;
  bottom: auto;
}

/* The tutorial's card and ring stay under the picker a beat points at. */
#tutorial {
  position: relative;
  z-index: 25;
}

/* A touch screen has no Tab key to name. */
@media (hover: none) and (pointer: coarse) {
  #tutorial .sp-tut__skip .sp-kbd {
    display: none;
  }
}

/* On a phone the stack hugs the edge like the HUD's own panels do. */
@media (max-width: 860px) {
  .app-build-hud { right: 12px; }
}

/* At the right edge the row's tooltip opens to its left instead. */
.app-build-hud .sp-statpanel:not([data-compact="true"]) .sp-statpanel__tip {
  left: auto;
  right: calc(100% + 26px);
}

/* Daily Ops with the blueprint Review card under it (docs/blueprints.md §8.1). */
.sp-ops-with-vote {
  display: grid;
  gap: 12px;
  align-content: start;
}

/* The retro screen (Jackson, 2026-10-03: "something very slight… so it fits the audio"): faint
   scanlines and a soft vignette over everything, drawn once by the compositor (no blend mode, no
   animation, nothing per frame). Off on a touch screen, where it costs fill rate and small text,
   and with ?retro=off. The numbers below are the whole effect: line darkness, vignette depth. */
html.app-retro::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0) 0 2px, rgba(0, 0, 0, var(--app-retro-line, 0.1)) 2px 3px),
    radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, var(--app-retro-vignette, 0.28)) 100%);
}

@media (pointer: coarse) {
  html.app-retro::after {
    content: none;
  }
}