/* Angry Typing Tutor — production styles. Design: DESIGN_SPEC.md (approved R2).
   One neutral ground, one ink, one signal red (errors only), one flow accent. */

/* ---- Fonts: self-hosted Red Hat, SIL OFL 1.1 (see fonts/README.md) ------- */
@font-face { font-family: "Red Hat Mono"; font-style: normal; font-display: swap; font-weight: 300 700;
  src: url("../fonts/red-hat-mono-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Red Hat Mono"; font-style: normal; font-display: swap; font-weight: 300 700;
  src: url("../fonts/red-hat-mono-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Red Hat Text"; font-style: normal; font-display: swap; font-weight: 300 700;
  src: url("../fonts/red-hat-text-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Red Hat Text"; font-style: normal; font-display: swap; font-weight: 300 700;
  src: url("../fonts/red-hat-text-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Red Hat Display"; font-style: normal; font-display: swap; font-weight: 300 900;
  src: url("../fonts/red-hat-display-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Red Hat Display"; font-style: normal; font-display: swap; font-weight: 300 900;
  src: url("../fonts/red-hat-display-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

/* ---- Tokens: dark (Graphite) is the default ------------------------------- */
:root {
  --bg:          #121211;
  --ink:         #ECE9E2;
  --todo:        #85827A;  /* untyped text: 4.9:1, 4.7:1 at full flow */
  --rule:        #2A2A27;
  --signal:      #D42118;  /* errors only. Bone on it: 4.75:1 (AA at any size) */
  --signal-ink:  #FF5A4E;  /* red used as small text on the ground: 6.1:1 */
  --on-signal:   #F7F4EE;
  --flow-bg:     #0B1A18;
  --flow-accent: #7CC4AE;
  --aura-a:      rgba(56, 196, 160, .58);   /* sea-green (003F: brighter) */
  --aura-b:      rgba(44, 150, 190, .48);   /* teal */
  color-scheme: dark;

  --f-sans:    "Red Hat Text", "Helvetica Neue", Arial, sans-serif;
  --f-display: "Red Hat Display", "Helvetica Neue", Arial, sans-serif;
  --f-mono:    "Red Hat Mono", ui-monospace, "DejaVu Sans Mono", monospace;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  --passage-size: clamp(22px, 2.05vw, 32px);
}
:root[data-theme="light"] {
  --bg:          #F1EFEA;
  --ink:         #151514;
  --todo:        #6A665F;
  --rule:        #D9D5CC;
  --signal-ink:  #B81D14;
  --flow-bg:     #D0EFE6;  /* 003C: ΔE 0.043 (was 0.015, invisible); untyped text stays 4.67:1 */
  --flow-accent: #2C7A64;
  --aura-a:      rgba(127, 209, 188, .62);
  --aura-b:      rgba(140, 207, 216, .52);
  color-scheme: light;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--bg); color: var(--ink);
  font-family: var(--f-sans);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "tnum" 1;
  overflow-x: hidden;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; letter-spacing: inherit; }
button:focus-visible, input:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* The typing field: present and focusable, never visible. */
#field { position: fixed; left: -200px; top: 0; width: 1px; height: 1px; opacity: 0; resize: none; }

/* ---- Frame. --flow (0..1) is written each frame by the flow model ---------- */
.app {
  --flow: 0;
  --flow-pct: calc(var(--flow) * 100%);
  --accent: color-mix(in oklab, var(--ink), var(--flow-accent) var(--flow-pct));
  height: 100vh; min-height: 560px;
  display: grid; grid-template-rows: auto 1fr auto;
  position: relative;
  --ground: color-mix(in oklab, var(--bg), var(--flow-bg) var(--flow-pct));
  /* 003F: untyped text lifts up to 26 % toward ink as the glow rises. This buys the
     contrast budget that lets the aurora show behind the text (see the veil). */
  --todo-flow: color-mix(in oklab, var(--todo), var(--ink) calc(var(--aura, 0) * 26%));   /* follows √flow, like the glow */
  background: var(--ground);
}

/* top bar */
.bar {
  position: relative; z-index: 2;   /* above the stage's flow veil on short screens */
  display: flex; align-items: center; justify-content: space-between; gap: var(--s5);
  height: 56px; padding: 0 var(--s7);
  border-bottom: 1px solid var(--rule);
  font: 500 11px/1 var(--f-mono); letter-spacing: .14em;
}
.mark { display: flex; align-items: center; gap: var(--s3); text-transform: uppercase; white-space: nowrap; }
.mark i { width: 8px; height: 8px; background: var(--ink); display: block; }
.meta { display: flex; align-items: center; gap: var(--s6); color: var(--todo); text-transform: uppercase; white-space: nowrap; }
.meta em { font-style: normal; color: var(--ink); }
.meta button { text-transform: uppercase; color: var(--todo); padding: 6px 0; }
.meta button:hover em, .meta button:hover { color: var(--ink); }
.flowtag { display: inline-flex; align-items: center; gap: var(--s2); color: var(--flow-accent); opacity: var(--flow); }
.flowtag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* segmented text controls (language, theme, ...) */
.seg { display: inline-flex; align-items: center; gap: var(--s2); }
.seg button { padding: 4px 0 3px; text-transform: uppercase; color: var(--todo); border-bottom: 1px solid transparent; }
.seg button[aria-checked="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.seg .sep { color: var(--rule); }
.bar .seg { padding-left: var(--s6); border-left: 1px solid var(--rule); height: 20px; }

.band { position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--signal); display: none; z-index: 2; }

/* stage: extra room below is permanent so errors never move the passage */
.stage { position: relative; display: grid; place-items: center; padding: var(--s7) var(--s7) 176px; }
.col { position: relative; z-index: 1; width: min(58ch, 100%); font: 400 var(--passage-size)/1 var(--f-mono); }

/* ---- Flow aura (003D; resized 003F) -------------------------------------------
   Drifting sea-green/teal light behind the typing area, driven by --flow/--aura.
   003E found the 003D veil was sized in fixed pixels and hid the aurora on
   Nathan's 1256x583 viewport. 003F: the veil is sized from the viewport, only
   partly opaque (some glow shows behind the text), and the untyped text lifts
   with flow to keep >= 4.5:1. Verified per glyph next to the strokes. */
.aura-clip { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.aura {
  position: absolute; inset: -12% -8%;
  opacity: var(--aura, 0);                               /* √flow, set per frame: emerges early */
  transform: scale(calc(0.72 + 0.38 * var(--flow)));   /* expands as flow rises */
  will-change: transform, opacity;   /* no filter: blur here; it cost ~4x frame time (003D) */
}
/* Glow layers are 1.8x the aura box, so every gradient fades out fully inside its own
   box: no box edge can cut the glow when the layers rotate and scale (seen at flow 0.5). */
.aura::before, .aura::after { content: ""; position: absolute; inset: -40%; will-change: transform; }
.aura::before {
  background:
    radial-gradient(ellipse 21.1% 25.6% at 30.0% 41.1%, var(--aura-a), color-mix(in srgb, var(--aura-a) 35%, transparent) 40%, transparent 100%),
    radial-gradient(ellipse 20.0% 24.4% at 70.0% 58.9%, var(--aura-b), color-mix(in srgb, var(--aura-b) 35%, transparent) 40%, transparent 100%);
  animation: aura-drift-a 17s ease-in-out infinite alternate;
}
.aura::after {
  background:
    radial-gradient(ellipse 28.9% 12.2% at 47.8% 27.8%, var(--aura-b), color-mix(in srgb, var(--aura-b) 35%, transparent) 40%, transparent 100%),
    radial-gradient(ellipse 27.8% 13.3% at 53.3% 73.3%, var(--aura-a), color-mix(in srgb, var(--aura-a) 35%, transparent) 40%, transparent 100%);
  animation: aura-drift-b 23s ease-in-out infinite alternate;
}
@keyframes aura-drift-a { from { transform: translate3d(-6%, -4%, 0) rotate(-5deg); } to { transform: translate3d(6%, 4%, 0) rotate(6deg); } }
@keyframes aura-drift-b { from { transform: translate3d(5%, 3%, 0) scaleX(1.1); } to { transform: translate3d(-5%, -3%, 0) scaleX(0.92); } }
/* Veil: a soft, partly transparent pocket of ground behind the column. Its margin
   scales with the viewport and the feather spans the whole margin, so there is no
   edge to read as a card; 28 % of the aurora still shows through behind the text. */
.col::before {
  --vy: clamp(32px, 9vh, 96px);
  --vx: clamp(48px, 8vw, 150px);
  content: ""; position: absolute; z-index: -1; inset: calc(-1 * var(--vy)) calc(-1 * var(--vx));
  background: var(--ground);
  --fade-x: linear-gradient(to right, transparent, #000 var(--vx), #000 calc(100% - var(--vx)), transparent);
  --fade-y: linear-gradient(to bottom, transparent, #000 var(--vy), #000 calc(100% - var(--vy)), transparent);
  mask-image: var(--fade-x), var(--fade-y);
  mask-composite: intersect;
  -webkit-mask-image: var(--fade-x), var(--fade-y);
  -webkit-mask-composite: source-in;
  opacity: min(0.72, calc(var(--aura, 0) * 3)); pointer-events: none;   /* full protection early (by glow 0.24) */
}
/* Untyped text lift (003F). Only in the normal phase: errors keep the approved colours. */
body[data-phase="normal"] .passage, body[data-phase="normal"] .lesson .lt { color: var(--todo-flow); }
/* A wrong key (and pause, results, lessons) removes the effect in the same task as the red state. */
body:not([data-phase="normal"]) .aura, body:not([data-view="typing"]) .aura,
body:not([data-phase="normal"]) .col::before, body:not([data-view="typing"]) .col::before { display: none; }
.lesson { margin-bottom: var(--s6); }
/* lesson titles are content: never text-transformed (ß would become SS) */
.lesson .lt { font: 500 12px/1 var(--f-mono); letter-spacing: .08em; color: var(--todo); }

.stamp {
  position: absolute; left: -0.04em; bottom: calc(100% + var(--s5));
  font: 900 var(--stamp-size, 120px)/.82 var(--f-display);
  letter-spacing: -.025em; text-transform: uppercase; white-space: nowrap;
  color: var(--on-signal); display: none;
}

.passage { width: 100%; font: 400 var(--passage-size)/1.8 var(--f-mono); white-space: pre-wrap; color: var(--todo); }
.passage .w { white-space: nowrap; }
.passage .c { position: relative; }
.passage .done { color: var(--ink); }
.passage .fixed { color: var(--ink); text-decoration: underline 2px var(--signal); text-underline-offset: 6px; }
.passage .cur::before { content: ""; position: absolute; left: -1px; top: .12em; bottom: .02em; width: 2px; background: var(--accent); }
.passage .bad { background: var(--signal); color: var(--on-signal); box-shadow: 0 0 0 2px var(--signal); }
.passage .bad::before { display: none; }

.status { position: absolute; left: 0; right: 0; top: 100%; margin-top: var(--s6); }
.status p { font: 500 13px/1.5 var(--f-mono); letter-spacing: .02em; color: var(--todo); min-height: 20px; }
.status b { font-weight: 500; }
.status .g {
  display: inline-block; min-width: 1.6em; padding: 4px 6px 2px; margin: 0 6px;
  text-align: center; vertical-align: middle;
  font: 500 var(--passage-size)/1 var(--f-mono); border: 1px solid currentColor;
}
.status .g.word { font-size: 13px; padding: 8px 8px 6px; }
.status .g.want { background: var(--signal); border-color: var(--signal); color: var(--on-signal); }
.kbd { font: 500 11px/1 var(--f-mono); letter-spacing: .06em; border: 1px solid var(--rule); padding: 3px 6px 2px; color: var(--ink); }

.eulogy {
  display: none; margin-top: var(--s5); max-width: 46ch;
  padding-left: var(--s4); border-left: 2px solid var(--signal);
  font: 400 17px/1.55 var(--f-sans); color: var(--ink);
}
.eulogy .k { display: block; margin-bottom: var(--s2); font: 500 10px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--signal-ink); }
body:not([data-tier="0"])[data-phase="flash"] .eulogy,
body:not([data-tier="0"])[data-phase="held"] .eulogy { display: block; }

/* readout */
.readout { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--rule); }
.progress { position: absolute; top: -1px; left: 0; height: 1px; background: var(--accent); }
.cell { padding: var(--s4) var(--s5) var(--s5); border-right: 1px solid var(--rule); }
.cell:nth-child(2) { padding-left: var(--s7); }
.cell:last-child { border-right: 0; padding-right: var(--s7); }
.cell .k { font: 500 10px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--todo); margin-bottom: var(--s3); }
.cell .v { font: 400 22px/1 var(--f-mono); }
.cell .v small { font-size: 12px; color: var(--todo); margin-left: 2px; }

/* ---- Error: flash (≈110 ms hard cut) --------------------------------------- */
body[data-phase="flash"] .app { background: var(--signal); color: var(--on-signal); }
body[data-phase="flash"] .bar, body[data-phase="flash"] .bar .seg,
body[data-phase="flash"] .readout, body[data-phase="flash"] .cell { border-color: rgba(255,255,255,.28); }
body[data-phase="flash"] .meta, body[data-phase="flash"] .meta button, body[data-phase="flash"] .seg button,
body[data-phase="flash"] .cell .k, body[data-phase="flash"] .cell .v small,
body[data-phase="flash"] .lesson .lt { color: rgba(247,244,238,.72); }
body[data-phase="flash"] .seg button[aria-checked="true"] { color: var(--on-signal); border-bottom-color: var(--on-signal); }
body[data-phase="flash"] .mark i { background: var(--on-signal); }
body[data-phase="flash"] .meta em { color: var(--on-signal); }
body[data-phase="flash"] .flowtag { display: none; }
body[data-phase="flash"] .passage { color: rgba(247,244,238,.62); }
body[data-phase="flash"] .passage .done,
body[data-phase="flash"] .passage .fixed { color: var(--on-signal); text-decoration-color: var(--on-signal); }
body[data-phase="flash"] .passage .bad { background: var(--on-signal); color: var(--signal); box-shadow: 0 0 0 2px var(--on-signal); }
body[data-phase="flash"] .progress { background: var(--on-signal); }
body[data-phase="flash"] .stamp { display: block; }
body[data-phase="flash"] .lesson { visibility: hidden; }
body[data-phase="flash"] .status p,
body[data-phase="flash"] .eulogy, body[data-phase="flash"] .eulogy .k { color: var(--on-signal); border-color: var(--on-signal); }
body[data-phase="flash"] .status .g.want { background: var(--on-signal); border-color: var(--on-signal); color: var(--signal); }

/* ---- Error: held (until the right key). All small text here is ≥ 4.5:1 ---- */
body[data-phase="held"] .band { display: block; }
body[data-phase="held"] .stamp { display: block; color: var(--signal); }
body[data-phase="held"] .lesson { visibility: hidden; }
body[data-phase="held"] .status p { color: var(--signal-ink); }
body[data-phase="held"] .cell.err .v, body[data-phase="held"] .cell.err .k { color: var(--signal-ink); }
.jolt { animation: jolt 160ms steps(4, end) 1; }
@keyframes jolt { 0% { transform: translateX(0); } 25% { transform: translateX(-6px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } 100% { transform: translateX(0); } }

/* ---- Paused: the pause screen is also the settings panel ------------------- */
.pwrap { position: relative; }
.pause { position: absolute; inset: auto 0; top: 50%; transform: translateY(-50%); display: none; }
.pause h2 { font: 300 64px/1 var(--f-display); letter-spacing: -.02em; }
.pause > p { font: 500 13px/1.5 var(--f-mono); color: var(--todo); margin-top: var(--s4); }
.pause-actions { display: flex; gap: var(--s6); margin-top: var(--s5); font: 500 13px/1 var(--f-mono); }
.pause-actions button { padding: 6px 0; border-bottom: 1px solid var(--rule); color: var(--todo); }
.pause-actions button.primary { color: var(--ink); border-bottom-color: var(--ink); }
.settings {
  display: grid; grid-template-columns: repeat(3, auto); justify-content: start;
  gap: var(--s5) var(--s7); margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--rule);
  font: 500 11px/1 var(--f-mono); letter-spacing: .14em;
}
.settings .k { color: var(--todo); text-transform: uppercase; margin-bottom: var(--s3); font-size: 10px; letter-spacing: .16em; }
.settings input[type="range"] { width: 140px; accent-color: var(--ink); vertical-align: middle; }
.settings output { margin-left: var(--s3); color: var(--todo); }
body[data-phase="paused"] .pause { display: block; }
body[data-phase="paused"] .lesson { visibility: hidden; }
body[data-phase="paused"] .passage { visibility: hidden; }   /* no reading ahead while the clock is stopped */
body[data-phase="paused"] .status { display: none; }
body[data-phase="paused"] .readout .cell.time .v { color: var(--todo); }

/* ---- Views: typing | result | lessons -------------------------------------- */
.result, .picker { display: none; width: 100%; }
body[data-view="result"] .result { display: block; }
body[data-view="lessons"] .picker { display: block; }
body:not([data-view="typing"]) .pwrap,
body:not([data-view="typing"]) .status,
body:not([data-view="typing"]) .readout { display: none; }
body:not([data-view="typing"]) .app { grid-template-rows: auto 1fr; }
body[data-view="lessons"] .lesson { display: none; }

.result .top { display: grid; grid-template-columns: auto 1fr; gap: var(--s8); align-items: end; padding-bottom: var(--s6); border-bottom: 1px solid var(--rule); }
.kk { font: 500 10px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--todo); }
.hero .v { font: 300 clamp(96px, 11vw, 168px)/.8 var(--f-display); letter-spacing: -.04em; margin-top: var(--s4); }
.figs { display: grid; grid-template-columns: repeat(2, auto); gap: var(--s5) var(--s7); justify-content: start; }
.figs .v { font: 400 28px/1 var(--f-mono); margin-top: var(--s2); }
.figs .v.red { color: var(--signal-ink); }
.verdict { font: 400 clamp(20px, 1.7vw, 26px)/1.4 var(--f-sans); letter-spacing: -.005em; margin: var(--s6) 0; max-width: 34ch; }
.tl { margin-bottom: var(--s6); }
.tl .line { position: relative; height: 40px; margin-top: var(--s3); border-bottom: 1px solid var(--ink); }
.tl .line i { position: absolute; bottom: 0; width: 2px; background: var(--signal); }
.tl .ends { display: flex; justify-content: space-between; font: 400 11px/1 var(--f-mono); color: var(--todo); margin-top: var(--s2); }
.missed { display: flex; gap: var(--s6); align-items: baseline; margin-bottom: var(--s7); flex-wrap: wrap; }
.missed ul { list-style: none; display: flex; gap: var(--s6); flex-wrap: wrap; }
.missed li { font: 400 15px/1 var(--f-mono); }
.missed li b { font-weight: 500; font-size: 22px; margin-right: var(--s2); }
.missed li span { color: var(--todo); }
.actions { display: flex; gap: var(--s6); align-items: center; font: 500 13px/1 var(--f-mono); color: var(--todo); flex-wrap: wrap; }
.actions button { display: inline-flex; align-items: center; gap: var(--s3); color: var(--todo); padding: 4px 0; }
.actions button.primary { color: var(--ink); }
.actions .note { color: var(--todo); }

.picker h2 { font: 300 56px/1 var(--f-display); letter-spacing: -.02em; }
.picker > p { font: 500 13px/1.5 var(--f-mono); color: var(--todo); margin: var(--s4) 0 var(--s6); }
.picker .langs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s7); border-top: 1px solid var(--rule); padding-top: var(--s5); }
.picker ol { list-style: none; margin-top: var(--s4); }
.picker li button {
  display: grid; grid-template-columns: 3ch 1fr; gap: var(--s3); width: 100%; text-align: left;
  padding: 10px 0; border-bottom: 1px solid var(--rule);
  font: 400 17px/1.3 var(--f-sans); color: var(--ink);
}
.picker li button span { font: 500 12px/1.9 var(--f-mono); color: var(--todo); }
.picker li button[aria-current="true"] { color: var(--flow-accent); }
.picker li button:hover { background: color-mix(in oklab, var(--bg), var(--ink) 5%); }
.picker .back { margin-top: var(--s6); font: 500 13px/1 var(--f-mono); color: var(--todo); padding: 6px 0; border-bottom: 1px solid var(--rule); }

/* Desktop is the target; narrow windows degrade without horizontal scroll. */
@media (max-width: 900px) {
  .bar { padding: 0 var(--s4); }
  .meta .opt { display: none; }
  .stage { padding: var(--s7) var(--s4) 176px; }
  .readout { grid-template-columns: repeat(2, 1fr); }
  .cell, .cell:nth-child(2), .cell:last-child { padding: var(--s3) var(--s4); }
  .result .top, .picker .langs { grid-template-columns: 1fr; gap: var(--s5); }
  .settings { grid-template-columns: repeat(2, auto); }
}
@media (max-height: 700px) { .stage { padding-top: var(--s5); } }
@media (prefers-reduced-motion: reduce) {
  .jolt { animation: none; }
  .aura { transform: none; }                                   /* glow still fades in; nothing moves */
  .aura::before, .aura::after { animation: none; }
}