/* Minhocário — reset, element defaults, and screen scaffolding.
   Cascade position 2 of 5: tokens → base → components → screens → motion.
   index.html is the source of truth for that order; never use @import.

   Everything here is either a bare element selector or the generic .screen
   chrome shared by all four screens. Deliberately the lowest-specificity file,
   so components.css and screens.css can override without reaching for !important. */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
}

body {
  background: var(--surface-0);
  color: var(--ink);
  font-family: var(--font-sans);
  line-height: var(--leading-body);
  /* Tints the parts of a radio, checkbox and range the UA draws itself. One
     declaration replaces the appearance:none rebuild those controls would
     otherwise need, and it degrades to the UA blue rather than to nothing. */
  accent-color: var(--accent);
}

button {
  font: inherit;
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
button:hover { border-color: var(--accent); }
/* Keyboard focus ring — distinct from :hover so tab-through is always visible. */
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: 0.45; cursor: not-allowed; }
button.is-active { background: var(--accent); color: var(--accent-ink); }

/* Text inputs and selects. The UA renders these light-on-light, which on a dark
   UI leaves the setup form as a row of white boxes — the one screen a first-time
   player has to complete unaided. Bare element selectors because every such
   control in the game is one of these; there is nothing to opt in. */
input[type="number"],
input[type="text"],
select {
  font: inherit;
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--surface-3);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);
}
input[type="number"] { font-variant-numeric: tabular-nums; }
input:focus-visible,
select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* The type ramp names --text-xl "screen headings" and --text-lg "dialog titles";
   until now nothing used either and headings ran at the UA's 2em/1.5em. Sizing
   them here rather than per screen keeps one answer to "how big is an h1". */
h1 { font-size: var(--text-xl); }
h2 { font-size: var(--text-lg); }
h1, h2 { margin: 0 0 0.4em; }

/* Links. The game had none until the author credit — every navigation in it is
   a <button> — so this is the whole rule rather than a restyle of one. The UA
   default is #0000EE on a near-black page, which is why a bare element selector
   is right: any link that ever appears needs this, and there is nothing to opt
   into. Underlined by default because colour alone must not be the only signal
   (WCAG 1.4.1), with the offset keeping it clear of the descenders. */
a {
  color: var(--ink-dim);
  text-underline-offset: 2px;
  transition: color var(--dur-fast) var(--ease);
}
a:hover { color: var(--accent); }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- Developer navigation (temporary) --- */
.dev-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  gap: var(--space-2);
  align-items: center;
  padding: var(--space-2) var(--space-3);
  background: var(--scrim-dim);
  font-size: var(--text-xs);
}
/* `display: flex` above outranks the UA `[hidden]` rule, so state it here —
   same guard as `.screen[hidden]` below. Keeps the bar down until main.js
   decides, so players never see it flash. */
.dev-nav[hidden] { display: none; }
.dev-nav__label { color: var(--ink-dim); margin-right: var(--space-1); }
.dev-nav button { padding: var(--space-1) var(--space-3); }

/* --- Screens --- */
.screen {
  min-height: 100vh;
  padding: var(--space-6);
}
/* Only dev mode shows the fixed nav, so only dev mode pays the clearance.
   56px is measured off the nav's own height, not chosen from the spacing scale —
   it tracks that bar, so it stays a literal (on-grid, but past --space-8). */
body.dev-mode .screen { padding-top: 56px; }
.screen[hidden] { display: none; }

.screen__header { max-width: 900px; margin: 0 auto var(--space-4); }
.screen__back { margin-top: var(--space-4); }

/* Frame-time readout in the dev bar (V19) — the instrument the shadow perf gate
   is measured with. Dev-only: `main.js` removes the whole nav for players. */
.dev-nav__perf {
  margin-left: auto;
  color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-2xs);
}