/* Design tokens + reset.
   The two hand colours are the ONLY colours the rest of the sheet spells out. Everything that
   used to be a hand-tuned literal (--left-black, --left-white-lit, the four .key.active
   gradients) is now derived from them with relative colour syntax, because the settings panel
   lets a player repaint a hand and every one of those literals would otherwise go stale.
   ponytail: the derived black-key tile no longer carries the hand-measured 2.65:1 against its
   white-key pair — the ramp below reproduces the old values at the default colours, but a
   player who picks a pale hand colour will squeeze it. Re-tune calc(l * .68) if that matters. */
:root {
  --pink: #ff4f9a;
  --pink-light: #ff91bf;
  --pink-soft: #ffd7e8;
  --ink: #26141e;
  --stage: #2a1723;
  --white-key: #fff9fc;
  --black-key: #2a1b24;

  /* Set by the settings panel. Left is blue, right is green; brand stays pink. */
  --left-hand: #62a9ff;
  --right-hand: #71d99a;

  /* Type scale — three sizes and three weights, so the header can hold a hierarchy. */
  --text-lg: 15px; --text-md: 12.5px; --text-sm: 10.5px;
  --control-h: 38px; --control-r: 11px;
  /* The floating header's height. The settings drawer hangs off the same number, so it lives
     here rather than in both sheets. 59px is what the lab's un-floated bar measures
     (10 + --control-h + 10 + its 1px rule), so the two pages' bars are the same height and
     the link between them doesn't jump. Leaves 43px for the control row above the 9px
     scrubber — enough for a 38px control. */
  --header-h: 59px;

  /* Seconds to cross the waterfall at speed 1. Used by the CSS that sizes bars and by the JS
     clock; both read it from here now, so the old "change 4.4 in two places" hazard is gone.
     The Scale setting rewrites it: a bigger scale is less time on screen, i.e. taller tiles. */
  --fall-time: 4.4;
  --bg-alpha: 0;
}
* { box-sizing: border-box; }
/* `hidden` must win. The UA sheet gives [hidden] a bare `display: none`, which any class rule
   that sets display beats on specificity — a settings page toggled with .hidden stayed on
   screen underneath the menu because .settings-menu set `display: flex`. This is the standard
   fix; keep it above everything that styles display. */
[hidden] { display: none !important; }
/* Off-screen but still focusable and still read aloud — for a control whose visible form is
   drawn by something else. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; border: 0; overflow: hidden; white-space: nowrap;
  clip-path: inset(50%);
}
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body {
  /* No webfont on purpose: this file has to work opened straight off disk. The rounded
     system face is what actually rendered before, so it is what is specified now. */
  font-family: ui-rounded, "SF Pro Rounded", "Segoe UI Variable Display", system-ui, sans-serif;
  color: white;
  background: var(--stage);
  user-select: none;
  -webkit-user-select: none;
}
button, input, select { font: inherit; }

/* One mapping, used by tiles, keys, plumes and auras alike: the hand class picks the colour,
   every other shade is derived from --hand where it is used. */
.left-hand  { --hand: var(--left-hand); }
.right-hand { --hand: var(--right-hand); }