/* ── Base ─────────────────────────────────────────────────────────────────
   Reset, document defaults, and the two behaviours every element inherits:
   how it takes focus, and how it moves.                                    */

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

/* This is a game, not a document: nothing here is meant to be selected or
   long-pressed into a text-selection/callout. Kill both, and the blue tap
   flash, everywhere — then hand selection back to real text fields. */
* { -webkit-tap-highlight-color: transparent; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

input, textarea, select, [contenteditable] {
  -webkit-user-select: text;
  user-select: text;
}

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
button:disabled { cursor: not-allowed; }

/* Components lay themselves out with grid and flex, both of which beat the UA
   rule for [hidden]. An element the JavaScript hides must stay hidden. */
[hidden] { display: none !important; }

/* Keyboard users get a ring; mouse users never see it. The board is played
   with the keys as much as the pointer, so this is not decoration. */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ── the mono label ───────────────────────────────────────────────────────
   Used wherever the interface names something the circuit would also name:
   a chapter, a card, a pin, a count. Prose never wears it.                */

.label {
  font-family: var(--font-mono);
  font-weight: 400;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

/* ── motion ───────────────────────────────────────────────────────────────
   Three durations, one curve. `fade` declares only `from`, so anything using
   it must not also set its own opacity — the implicit `to` resolves to the
   element's own value, and it would fade to wherever it started. */

@keyframes fade { from { opacity: 0; } }
@keyframes pop  { from { opacity: 0; transform: translateY(8px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── scrollbars ───────────────────────────────────────────────────────── */

.scrollbar-thin { scrollbar-width: thin; }
.scrollbar-thin::-webkit-scrollbar { width: 6px; height: 6px; }
.scrollbar-thin::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: var(--radius); }
.scrollbar-thin::-webkit-scrollbar-track { background: transparent; }


/* Scrolling everywhere, scrollBARS nowhere — the app's surfaces are small and
   self-evident; a visible bar is just noise (owner's call, 2026-07-30). */
* { scrollbar-width: none; -ms-overflow-style: none; }
*::-webkit-scrollbar { display: none; width: 0; height: 0; }