/* ============================================================================
   ROOT//HATCH — base.css
   A field guide crossed with a game HUD. Everything is CSS: no webfont, no
   image file, no external asset. Two surfaces live here:
     - the child surface: spatial, dark, bioluminescent, almost no chrome
     - the guardian surface: administrative, light, ordinary, conventional
   The contrast between them is intentional and load-bearing.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens -- */
:root {
  /* palette */
  --c-void:      #05070a;
  --c-deep:      #0a1410;
  --c-deeper:    #070d0b;
  --c-sap:       #6ef2b0;   /* bioluminescent sap green-cyan */
  --c-amber:     #ffc46b;   /* warm energy */
  --c-violet:    #8b6ef2;   /* mineral / edge */
  --c-ink:       #e9f6ef;
  --c-mute:      #7d9a8c;
  --c-faint:     #4c6459;
  --c-alert:     #ff9a7a;

  --c-line:      rgba(110, 242, 176, 0.16);
  --c-line-2:    rgba(110, 242, 176, 0.34);
  --c-glass:     rgba(6, 14, 12, 0.58);
  --c-glass-2:   rgba(6, 14, 12, 0.82);

  /* guardian (administrative) surface */
  --a-bg:        #f2f4f3;
  --a-card:      #ffffff;
  --a-ink:       #10191c;
  --a-mute:      #5b6a6d;
  --a-line:      #d3dad8;
  --a-accent:    #1d6b4c;
  --a-warn-bg:   #fff6e2;
  --a-warn-line: #e5c07a;
  --a-warn-ink:  #6b4c0d;

  /* spacing scale */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;

  /* radii */
  --r-1: 6px; --r-2: 12px; --r-3: 20px; --r-4: 28px; --r-pill: 999px;

  /* durations + easing */
  --d-1: 120ms; --d-2: 220ms; --d-3: 420ms; --d-4: 900ms;
  --ease:     cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  /* type */
  --f-ui: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --f-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
            "Liberation Mono", monospace;

  --t-eyebrow: 0.6875rem;
  --t-display: clamp(1.85rem, 7.2vw, 3.1rem);
  --t-display-xl: clamp(2.4rem, 10vw, 4.25rem);
  --t-lead: clamp(0.98rem, 3.6vw, 1.1rem);
  --t-small: 0.8125rem;
  --t-micro: 0.6875rem;

  /* safe-area aware gutters */
  --pad-x: max(var(--s-5), env(safe-area-inset-left), env(safe-area-inset-right));
  --pad-t: max(var(--s-6), calc(env(safe-area-inset-top) + var(--s-5)));
  --pad-b: max(var(--s-6), calc(env(safe-area-inset-bottom) + var(--s-5)));

  color-scheme: dark;
}

/* ----------------------------------------------------------------- reset -- */
*, *::before, *::after { box-sizing: border-box; }

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

html {
  background: var(--c-void);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--f-ui);
  font-size: 16px;
  line-height: 1.5;
  color: var(--c-ink);
  background: var(--c-void);
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, p, dl, dd, ol, ul, figure, pre { margin: 0; }
ol, ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
canvas, video { display: block; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

:focus-visible {
  outline: 2px solid var(--c-sap);
  outline-offset: 3px;
  border-radius: var(--r-1);
}

/* ============================================================================
   THE WORLD LAYERS
   ========================================================================== */
#layers {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 12%, #0a1410 0%, #05070a 62%, #04060a 100%);
}

#feed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  filter: saturate(0.86) contrast(1.04) brightness(0.78);
  transition: opacity var(--d-3) var(--ease), filter var(--d-3) var(--ease);
  will-change: opacity;
}

#veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(115% 78% at 50% 30%, rgba(5, 7, 10, 0) 26%, rgba(5, 7, 10, 0.72) 78%, rgba(5, 7, 10, 0.94) 100%),
    linear-gradient(to top, rgba(5, 7, 10, 0.92) 0%, rgba(5, 7, 10, 0.12) 42%, rgba(5, 7, 10, 0.5) 100%);
}

/* one single animated element for ambience — cheap, GPU-composited */
#drift {
  position: absolute;
  left: -25%;
  top: -25%;
  width: 150%;
  height: 150%;
  pointer-events: none;
  opacity: 0.5;
  background:
    radial-gradient(30% 24% at 24% 30%, rgba(110, 242, 176, 0.10), transparent 70%),
    radial-gradient(26% 20% at 74% 62%, rgba(139, 110, 242, 0.09), transparent 70%),
    radial-gradient(22% 18% at 52% 86%, rgba(255, 196, 107, 0.06), transparent 70%);
  animation: drift 38s var(--ease) infinite alternate;
  will-change: transform;
}

@keyframes drift {
  from { transform: translate3d(-2%, -1%, 0) scale(1); }
  to   { transform: translate3d(2%, 2%, 0) scale(1.08); }
}

#stage, #fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

#stage {
  opacity: 0;
  transition: opacity var(--d-3) var(--ease);
}

#fx { z-index: 1; }

/* --- per-screen layer choreography (screens.js sets html[data-screen]) ----- */
html[data-screen="ritual"]   #feed { opacity: 1;    filter: saturate(1) contrast(1.06) brightness(0.9); }
html[data-screen="reveal"]   #feed { opacity: 0.72; }
html[data-screen="mutate"]   #feed { opacity: 0.66; }
html[data-screen="treecore"] #feed { opacity: 0.5; }
html[data-screen="name"]     #feed,
html[data-screen="mission"]  #feed,
html[data-screen="care"]     #feed { opacity: 0.34; }

html[data-screen="ritual"]   #stage { opacity: 0.35; }
html[data-screen="reveal"]   #stage,
html[data-screen="mutate"]   #stage,
html[data-screen="split"]    #stage,
html[data-screen="handback"] #stage,
html[data-screen="name"]     #stage,
html[data-screen="mission"]  #stage,
html[data-screen="care"]     #stage,
html[data-screen="install"]  #stage { opacity: 1; }

html[data-screen="guardian"] #layers { opacity: 0; transition: opacity var(--d-2) var(--ease); }
html[data-screen="guardian"] #fx     { opacity: 1; }

/* ============================================================================
   BRAND MARK  (triple-tap target for the director overlay)
   ========================================================================== */
#brandbar {
  position: fixed;
  top: max(var(--s-4), env(safe-area-inset-top));
  left: var(--pad-x);
  z-index: 40;
  pointer-events: none;
}

html[data-screen="guardian"] #brandbar { display: none; }

.mark {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) 0;
  background: none;
  border: 0;
  cursor: pointer;
  pointer-events: auto;
  opacity: 0.72;
  transition: opacity var(--d-2) var(--ease);
}
.mark:active { opacity: 1; }

.mark__glyph {
  position: relative;
  width: 14px;
  height: 14px;
  border: 1px solid var(--c-sap);
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  transform: rotate(45deg);
}
.mark__glyph::after {
  content: "";
  position: absolute;
  inset: 3.5px;
  border-radius: 50%;
  background: var(--c-amber);
  opacity: 0.85;
}
.mark__glyph--dark { border-color: var(--a-accent); }
.mark__glyph--dark::after { background: var(--a-accent); }

.mark__word {
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-mute);
}

/* ============================================================================
   SCREEN SYSTEM
   ========================================================================== */
#screens {
  position: relative;
  z-index: 10;
}

.screen {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: var(--pad-t) var(--pad-x) var(--pad-b);
  opacity: 0;
  transform: scale(0.985) translate3d(0, 10px, 0);
  transition: opacity var(--d-2) var(--ease), transform var(--d-3) var(--ease-out);
  pointer-events: none;
  will-change: opacity, transform;
}

.screen[hidden] { display: none; }

.screen.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.screen.is-leaving {
  opacity: 0;
  transform: scale(1.012) translate3d(0, -6px, 0);
  pointer-events: none;
}

.wrap {
  width: 100%;
  max-width: 34rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding-top: var(--s-7);
}

.wrap--center {
  margin: auto;
  align-items: center;
  text-align: center;
  padding-top: 0;
  gap: var(--s-5);
}

.wrap--bottom { margin-top: auto; padding-top: var(--s-7); }

.wrap--live {
  margin: 0 auto;
  flex: 1;
  justify-content: space-between;
  padding-top: var(--s-6);
}

/* ============================================================================
   TYPE — the display treatment: thin rule, wide tracking, uppercase eyebrow
   ========================================================================== */
.eyebrow {
  position: relative;
  font-family: var(--f-mono);
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--c-sap);
  opacity: 0.78;
  padding-top: var(--s-3);
}
.eyebrow::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 44px;
  height: 1px;
  background: linear-gradient(to right, var(--c-sap), transparent);
}
.wrap--center .eyebrow { padding-top: var(--s-4); }
.wrap--center .eyebrow::before { left: 50%; transform: translateX(-50%); width: 64px;
  background: linear-gradient(to right, transparent, var(--c-sap), transparent); }

.display {
  font-size: var(--t-display);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -0.022em;
  text-wrap: balance;
  color: var(--c-ink);
}
.display--xl { font-size: var(--t-display-xl); font-weight: 200; }

.title-taxo {
  font-family: var(--f-mono);
  font-size: clamp(1.05rem, 4.4vw, 1.5rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--c-sap);
  text-shadow: 0 0 24px rgba(110, 242, 176, 0.35);
}

.lead {
  font-size: var(--t-lead);
  line-height: 1.55;
  color: #c8dcd1;
  max-width: 34ch;
  text-wrap: pretty;
}
.wrap--center .lead { max-width: 30ch; margin-inline: auto; }

.label {
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-faint);
}

.hint { font-size: var(--t-small); color: var(--c-mute); line-height: 1.5; }

.honest {
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--c-mute);
  padding-left: var(--s-3);
  border-left: 1px solid var(--c-line);
  max-width: 40ch;
}
.wrap--center .honest {
  border-left: 0;
  padding-left: 0;
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-line);
  margin-inline: auto;
}

.proof {
  font-size: var(--t-small);
  color: var(--c-amber);
  opacity: 0.9;
  line-height: 1.45;
  max-width: 36ch;
}

.status { font-size: var(--t-small); color: var(--c-sap); min-height: 1.2em; }

.alert {
  font-size: var(--t-small);
  color: var(--c-alert);
  border: 1px solid rgba(255, 154, 122, 0.3);
  background: rgba(255, 154, 122, 0.07);
  border-radius: var(--r-2);
  padding: var(--s-3) var(--s-4);
}

.stat { font-size: var(--t-small); color: var(--c-mute); }
.stat b {
  font-family: var(--f-mono);
  font-weight: 500;
  color: var(--c-ink);
  letter-spacing: 0.04em;
}

.rule {
  height: 1px;
  background: linear-gradient(to right, var(--c-line-2), transparent);
  margin: var(--s-3) 0;
}

.code {
  display: block;
  font-family: var(--f-mono);
  font-size: var(--t-small);
  letter-spacing: 0.02em;
  color: var(--c-sap);
  background: var(--c-glass);
  border: 1px solid var(--c-line);
  border-radius: var(--r-1);
  padding: var(--s-3);
  overflow-wrap: anywhere;
}

/* ============================================================================
   BUTTONS — luminous edge, satisfying press
   ========================================================================== */
.actions {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-top: var(--s-2);
}
.actions--row { flex-direction: row; flex-wrap: wrap; }
.actions--row > .btn { flex: 1 1 8rem; }

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 54px;
  padding: 0 var(--s-5);
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, rgba(110, 242, 176, 0.08), rgba(110, 242, 176, 0.02));
  color: var(--c-ink);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--d-1) var(--ease), border-color var(--d-2) var(--ease),
              color var(--d-2) var(--ease), opacity var(--d-2) var(--ease);
  box-shadow: 0 0 0 1px rgba(110, 242, 176, 0.06) inset;
}

/* the glow lives on a pseudo-element so we animate opacity, never box-shadow */
.btn::after {
  content: "";
  position: absolute;
  inset: -40%;
  z-index: -1;
  background: radial-gradient(50% 50% at 50% 50%, rgba(110, 242, 176, 0.5), transparent 70%);
  opacity: 0;
  transition: opacity var(--d-2) var(--ease);
  pointer-events: none;
}

.btn--primary {
  border-color: rgba(110, 242, 176, 0.6);
  background: linear-gradient(180deg, rgba(110, 242, 176, 0.2), rgba(110, 242, 176, 0.06));
  color: #eafff4;
}
.btn--primary::after { opacity: 0.28; }

.btn--ghost {
  min-height: 46px;
  font-size: 0.875rem;
  border-color: var(--c-line);
  background: rgba(255, 255, 255, 0.02);
  color: #cfe3d8;
}

.btn:active {
  transform: translateY(1px) scale(0.985);
  border-color: var(--c-sap);
}
.btn:active::after { opacity: 0.55; }

.btn[disabled], .btn[aria-disabled="true"] {
  opacity: 0.38;
  pointer-events: none;
}

@media (hover: hover) {
  .btn:hover { border-color: rgba(110, 242, 176, 0.75); }
  .btn:hover::after { opacity: 0.4; }
}

.btn--voice { padding-left: var(--s-7); }
.btn__pulse {
  position: absolute;
  left: 22px;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  border-radius: 50%;
  background: var(--c-amber);
  animation: pulse 1.6s var(--ease) infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(0.8); opacity: 0.55; }
  50%      { transform: scale(1.25); opacity: 1; }
}

.link {
  align-self: flex-start;
  padding: var(--s-2) 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--c-line-2);
  color: var(--c-mute);
  font-size: var(--t-small);
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: color var(--d-2) var(--ease), border-color var(--d-2) var(--ease);
}
.link:active { color: var(--c-sap); border-color: var(--c-sap); }
.wrap--center .link { align-self: center; }

/* ============================================================================
   1. SIGIL — the seed looks back
   ========================================================================== */
.screen--hero .wrap { justify-content: center; }

.seal {
  position: relative;
  width: min(58vw, 240px);
  aspect-ratio: 1;
  margin: var(--s-3) auto var(--s-2);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  touch-action: none;
}

.seal__ring,
.seal__ring--2,
.seal__core,
.seal__seam {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.seal__ring {
  width: 100%;
  height: 100%;
  border: 1px solid var(--c-line-2);
  border-radius: 50% 50% 50% 50% / 58% 58% 42% 42%;
  background: radial-gradient(60% 55% at 50% 42%, rgba(110, 242, 176, 0.10), transparent 72%);
}
.seal__ring--2 {
  width: 74%;
  height: 74%;
  border-color: var(--c-line);
  border-style: dashed;
  animation: sealspin 44s linear infinite;
}
@keyframes sealspin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

.seal__core {
  width: 26%;
  height: 26%;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 36%, #fff2d6, var(--c-amber) 42%, rgba(255, 196, 107, 0) 74%);
  animation: sealbeat 3.4s var(--ease) infinite;
}
@keyframes sealbeat {
  0%, 100% { opacity: 0.75; transform: translate(-50%, -50%) scale(0.94); }
  50%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.06); }
}

.seal__seam {
  width: 1px;
  height: 76%;
  background: linear-gradient(to bottom, transparent, var(--c-line-2) 22%, var(--c-line-2) 78%, transparent);
}

.seal:active .seal__ring { border-color: var(--c-sap); }

.campaign {
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-faint);
  min-height: 1em;
}

/* ============================================================================
   2. WAKE — simulated-habitat block and presets
   ========================================================================== */
.simblock {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-4);
  border: 1px solid var(--c-line);
  border-radius: var(--r-2);
  background: rgba(139, 110, 242, 0.06);
}
.simblock[hidden] { display: none; }
.simblock__head { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }

.badge-sim--dark {
  color: #1b1206;
  background: var(--c-amber);
  border-color: #b98330;
}

.presets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-2);
  margin-top: var(--s-2);
}
.presets[hidden] { display: none; }

.presets button {
  min-height: 62px;
  padding: var(--s-3);
  text-align: left;
  border: 1px solid var(--c-line);
  border-radius: var(--r-2);
  background: var(--c-glass);
  color: #cfe3d8;
  font-size: var(--t-small);
  line-height: 1.3;
  cursor: pointer;
  transition: border-color var(--d-2) var(--ease), background var(--d-2) var(--ease);
}
.presets button:active {
  border-color: var(--c-sap);
  background: rgba(110, 242, 176, 0.1);
}

/* ============================================================================
   3. RITUAL — beats, progress ring
   ========================================================================== */
.ritual__top, .ritual__mid, .ritual__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);
  width: 100%;
}
.ritual__mid { justify-content: center; flex: 1; }

.beats {
  display: flex;
  gap: var(--s-2);
  width: 100%;
  max-width: 24rem;
}

.beat {
  flex: 1;
  position: relative;
  padding-top: var(--s-3);
  font-family: var(--f-mono);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  color: var(--c-faint);
  transition: color var(--d-2) var(--ease);
}
.beat::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--c-line);
  transition: background var(--d-2) var(--ease), box-shadow var(--d-2) var(--ease);
}
.beat.is-done { color: var(--c-mute); }
.beat.is-done::before { background: var(--c-line-2); }
.beat.is-active { color: var(--c-sap); }
.beat.is-active::before { background: var(--c-sap); }

.ring {
  --p: 0;
  --circ: 339.292px;
  position: relative;
  width: min(52vw, 210px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
.ring--sm { width: 104px; }

.ring__svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.ring__track {
  fill: none;
  stroke: rgba(110, 242, 176, 0.12);
  stroke-width: 2;
}
.ring__arc {
  fill: none;
  stroke: var(--c-sap);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: var(--circ);
  stroke-dashoffset: calc(var(--circ) * (1 - var(--p)));
  transition: stroke-dashoffset 200ms linear;
  filter: drop-shadow(0 0 6px rgba(110, 242, 176, 0.55));
}
.ring__arc--match { stroke: var(--c-amber); filter: drop-shadow(0 0 6px rgba(255, 196, 107, 0.5)); }

.ring__count {
  position: absolute;
  font-family: var(--f-mono);
  font-size: clamp(1.5rem, 6vw, 2.1rem);
  font-weight: 300;
  letter-spacing: 0.02em;
  color: var(--c-ink);
}
.ring--sm .ring__count { font-size: 1.05rem; }

.beat-line {
  font-size: clamp(1.15rem, 5.4vw, 1.6rem);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-align: center;
  text-wrap: balance;
  min-height: 2.4em;
  max-width: 20ch;
  color: var(--c-ink);
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.8);
}
.ritual__mid .hint { text-align: center; min-height: 1.4em; }

/* what the current beat just extracted — the harvest, named out loud */
.harvest {
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-align: center;
  color: var(--c-amber);
  min-height: 1.2em;
  opacity: 0.9;
}

.ritual__bottom .link { align-self: center; }

/* ============================================================================
   4. REVEAL — chips + meters
   ========================================================================== */
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--c-line);
  border-radius: var(--r-1);
  background: var(--c-glass);
}
.chip dt {
  font-family: var(--f-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-faint);
}
.chip dd {
  margin: 0;
  font-family: var(--f-mono);
  font-size: var(--t-small);
  letter-spacing: 0.06em;
  color: var(--c-ink);
}

.meters { display: flex; flex-direction: column; gap: var(--s-2); }
.meter { display: flex; align-items: center; gap: var(--s-3); }
.meter__label {
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-faint);
  white-space: nowrap;
}
.meter__bar {
  position: relative;
  flex: 1;
  height: 3px;
  border-radius: var(--r-pill);
  background: rgba(110, 242, 176, 0.12);
  overflow: hidden;
}
.meter__bar i {
  display: block;
  height: 100%;
  width: calc(var(--p, 0) * 100%);
  background: linear-gradient(to right, var(--c-sap), var(--c-amber));
  transition: width var(--d-3) var(--ease);
}
.meter__value {
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.08em;
  color: var(--c-sap);
  white-space: nowrap;
}

/* ============================================================================
   5. WORLDPRINT — the card frame
   ========================================================================== */
.card {
  position: relative;
  width: min(100%, 22rem);
  /* aspect-ratio + max-height keeps the whole card, and the CTA under it,
     above the fold on a 390x844 phone */
  max-height: 46dvh;
  margin: 0 auto;
  aspect-ratio: 4 / 5;
  padding: var(--s-2);
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-3);
  background:
    linear-gradient(160deg, rgba(110, 242, 176, 0.07), rgba(139, 110, 242, 0.05) 60%, transparent),
    var(--c-glass-2);
  overflow: hidden;
}
.card::before, .card::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border: 1px solid var(--c-sap);
  opacity: 0.55;
}
.card::before { top: 8px;    left: 8px;  border-right: 0; border-bottom: 0; }
.card::after  { bottom: 8px; right: 8px; border-left: 0;  border-top: 0; }

.card canvas {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: var(--r-2);
}

/* ============================================================================
   6. MUTATE — gesture cards
   ========================================================================== */
.gestures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-2);
}

.gesture {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  width: 100%;
  min-height: 104px;
  padding: var(--s-3);
  text-align: left;
  border: 1px solid var(--c-line);
  border-radius: var(--r-2);
  background: var(--c-glass);
  cursor: pointer;
  transition: border-color var(--d-2) var(--ease), background var(--d-2) var(--ease),
              transform var(--d-1) var(--ease);
}
.gesture:active { transform: scale(0.98); border-color: var(--c-sap); }
.gesture.is-done { border-color: var(--c-sap); background: rgba(110, 242, 176, 0.1); }

.gesture__glyph {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  margin-bottom: var(--s-1);
}
.gesture__glyph--nocturn { background: radial-gradient(circle at 62% 38%, transparent 46%, var(--c-violet) 48%); }
.gesture__glyph--solar   { background: radial-gradient(circle, var(--c-amber) 34%, rgba(255, 196, 107, 0.18) 62%, transparent 72%); }
.gesture__glyph--furtuna { background: linear-gradient(115deg, transparent 42%, var(--c-sap) 44%, var(--c-sap) 52%, transparent 54%),
                                       linear-gradient(115deg, transparent 62%, var(--c-violet) 64%, var(--c-violet) 70%, transparent 72%); }
.gesture__glyph--scoarta { background: repeating-linear-gradient(90deg, rgba(255,196,107,.75) 0 2px, transparent 2px 5px); border-radius: var(--r-1); }

.gesture__name {
  font-family: var(--f-mono);
  font-size: var(--t-small);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-ink);
}
.gesture__hint { font-size: 0.75rem; line-height: 1.35; color: var(--c-mute); }

/* ============================================================================
   7. SPLIT — the two roles and the Portal Ticket
   ========================================================================== */
.roles { display: grid; gap: var(--s-2); }
.role {
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--c-line);
  border-left: 2px solid var(--c-sap);
  border-radius: 0 var(--r-2) var(--r-2) 0;
  background: var(--c-glass);
}
.role__name {
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-sap);
}
.role__who { font-size: 1.0625rem; font-weight: 300; color: var(--c-ink); margin-top: 2px; }
.role__body { font-size: var(--t-small); line-height: 1.45; color: var(--c-mute); margin-top: var(--s-1); }

/* the creature's own voice — set apart from interface copy */
.creature-line {
  font-size: var(--t-lead);
  font-weight: 300;
  font-style: italic;
  line-height: 1.45;
  color: #b9dccb;
  padding-left: var(--s-3);
  border-left: 1px solid var(--c-amber);
  max-width: 34ch;
}
.wrap--center .creature-line {
  border-left: 0;
  padding-left: 0;
  text-align: center;
  margin-inline: auto;
}

.ticket {
  position: relative;
  padding: var(--s-4) var(--s-5);
  border: 1px dashed var(--c-line-2);
  border-radius: var(--r-2);
  background: linear-gradient(135deg, rgba(255, 196, 107, 0.08), transparent 70%), var(--c-glass);
}
.ticket::before, .ticket::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  border-radius: 50%;
  background: var(--c-void);
}
.ticket::before { left: -8px; }
.ticket::after  { right: -8px; }

.ticket__label {
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-amber);
}
.ticket__id {
  font-family: var(--f-mono);
  font-size: 1.375rem;
  letter-spacing: 0.14em;
  color: var(--c-ink);
  margin: var(--s-2) 0;
}
.ticket__note { font-size: var(--t-small); color: var(--c-mute); line-height: 1.45; }
.ticket__note:empty { display: none; }
.ticket__free {
  margin-top: var(--s-2);
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.12em;
  color: var(--c-amber);
  line-height: 1.4;
}

.handoff { display: flex; flex-direction: column; gap: var(--s-2); }
.handoff[hidden] { display: none; }

/* ============================================================================
   8. GUARDIAN — the administrative surface
   Deliberately ordinary: light, boxy, left-aligned, conventional navigation.
   ========================================================================== */
.screen--admin {
  padding: 0;
  background: var(--a-bg);
  color: var(--a-ink);
  font-size: 15px;
  line-height: 1.55;
}

.admin__bar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: max(var(--s-3), env(safe-area-inset-top)) var(--s-4) var(--s-3);
  background: var(--a-card);
  border-bottom: 1px solid var(--a-line);
}

.admin__mark {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--a-ink);
}

.admin__role {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--a-accent);
  border: 1px solid var(--a-accent);
  border-radius: var(--r-1);
  padding: 2px 8px;
}

.admin__body {
  width: 100%;
  max-width: 46rem;
  margin: 0 auto;
  padding: var(--s-5) var(--s-4) var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.admin__h1 {
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--a-ink);
}
.admin__h2 {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--a-ink);
  margin-bottom: var(--s-2);
}
.admin__lead { color: var(--a-mute); max-width: 60ch; }
.admin__note { color: var(--a-mute); font-size: 0.8125rem; max-width: 62ch; }
.admin__note + .admin__note { margin-top: var(--s-2); }
.admin__note--strong {
  color: var(--a-ink);
  padding: var(--s-2) var(--s-3);
  border-left: 3px solid var(--a-accent);
  background: #eef3f1;
}
.admin__forAdult {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--a-accent);
}

/* plain administrative lists — no ornament, this surface is a form */
.note-list { display: flex; flex-direction: column; gap: var(--s-2); }
.note-list li {
  position: relative;
  padding-left: var(--s-4);
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--a-mute);
}
.note-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 1px;
  background: var(--a-accent);
}

.terms { margin-top: var(--s-3); display: flex; flex-direction: column; gap: var(--s-1); }
.terms dt {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--a-ink);
  margin-top: var(--s-2);
}
.terms dd {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--a-mute);
  max-width: 62ch;
}

#family-panel[hidden], #sponsor-panel[hidden], #checkout-panel[hidden] { display: none; }

.notice {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--a-warn-line);
  border-radius: var(--r-1);
  background: var(--a-warn-bg);
  color: var(--a-warn-ink);
  font-size: 0.8125rem;
  line-height: 1.45;
}

.badge-sim {
  flex: none;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #7a4a00;
  background: #ffd98a;
  border: 1px solid #d8a33a;
  border-radius: 3px;
  padding: 2px 7px;
  margin-top: 1px;
}

.options { display: grid; gap: var(--s-2); }
.options > li { display: flex; }

.option {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "title price" "desc desc";
  gap: var(--s-1) var(--s-3);
  width: 100%;
  padding: var(--s-4);
  text-align: left;
  background: var(--a-card);
  border: 1px solid var(--a-line);
  border-radius: var(--r-1);
  cursor: pointer;
  transition: border-color var(--d-1) linear, background var(--d-1) linear;
}
.option:active { background: #eef2f0; }
.option.is-selected {
  border-color: var(--a-accent);
  box-shadow: inset 0 0 0 1px var(--a-accent);
}
.option__title { grid-area: title; font-weight: 600; }
.option__price { grid-area: price; font-variant-numeric: tabular-nums; color: var(--a-accent); font-weight: 600; }
.option__desc  { grid-area: desc;  color: var(--a-mute); font-size: 0.8125rem; }

.panel {
  padding: var(--s-4);
  background: var(--a-card);
  border: 1px solid var(--a-line);
  border-radius: var(--r-1);
}

.field { display: flex; flex-direction: column; gap: var(--s-2); }
.field__label { font-size: 0.8125rem; font-weight: 600; color: var(--a-ink); }
.field__row { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.field__status { font-size: 0.8125rem; color: var(--a-accent); min-height: 1.2em; }

.input {
  flex: 1 1 10rem;
  min-height: 42px;
  padding: 0 var(--s-3);
  font: inherit;
  font-size: 16px; /* prevents iOS zoom on focus */
  color: var(--a-ink);
  background: #fff;
  border: 1px solid var(--a-line);
  border-radius: var(--r-1);
}
.input:focus { outline: 2px solid var(--a-accent); outline-offset: 1px; border-color: var(--a-accent); }

.btn-admin {
  min-height: 42px;
  padding: 0 var(--s-4);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--a-ink);
  background: #fff;
  border: 1px solid var(--a-line);
  border-radius: var(--r-1);
  cursor: pointer;
  transition: background var(--d-1) linear;
}
.btn-admin:active { background: #e9eeec; }
.btn-admin--primary {
  color: #fff;
  background: var(--a-accent);
  border-color: var(--a-accent);
}
.btn-admin--primary:active { background: #17563c; }
.btn-admin[disabled] { opacity: 0.45; pointer-events: none; }

.admin__actions { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-3); }

.summary { display: grid; grid-template-columns: 1fr auto; gap: var(--s-2) var(--s-4); font-size: 0.875rem; }
.summary dt { color: var(--a-mute); }
.summary dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }

.admin__foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
  padding: var(--s-4) var(--s-4) max(var(--s-4), env(safe-area-inset-bottom));
  border-top: 1px solid var(--a-line);
  background: var(--a-card);
}
.admin__link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--a-accent);
  font-size: 0.875rem;
  text-decoration: underline;
  cursor: pointer;
}
.admin__legal { font-size: 0.75rem; color: var(--a-mute); }

/* ============================================================================
   9-10. HANDBACK / NAME
   ========================================================================== */
.outcome {
  font-family: var(--f-mono);
  font-size: var(--t-small);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-amber);
  border: 1px solid rgba(255, 196, 107, 0.35);
  border-radius: var(--r-pill);
  padding: var(--s-2) var(--s-4);
}

.names { display: grid; gap: var(--s-2); grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); }
.names button {
  min-height: 54px;
  padding: var(--s-3);
  border: 1px solid var(--c-line);
  border-radius: var(--r-2);
  background: var(--c-glass);
  color: var(--c-ink);
  font-size: 1.0625rem;
  font-weight: 300;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: border-color var(--d-2) var(--ease), background var(--d-2) var(--ease);
}
.names button:active, .names button.is-selected {
  border-color: var(--c-sap);
  background: rgba(110, 242, 176, 0.12);
}

/* ============================================================================
   11. MISSION — compass + steps
   ========================================================================== */
.compass-block { display: flex; align-items: center; gap: var(--s-4); }
.compass-block[hidden] { display: none; }
.compass-block__side { flex: 1; display: flex; flex-direction: column; gap: var(--s-2); align-items: flex-start; }

.compass {
  position: relative;
  flex: none;
  width: 132px;
  height: 132px;
  margin: var(--s-2) 0;
  border: 1px solid var(--c-line);
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.compass__rose {
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg, rgba(110, 242, 176, 0.18) 0 1deg, transparent 1deg 90deg,
                   rgba(110, 242, 176, 0.18) 90deg 91deg, transparent 91deg 180deg,
                   rgba(110, 242, 176, 0.18) 180deg 181deg, transparent 181deg 270deg,
                   rgba(110, 242, 176, 0.18) 270deg 271deg, transparent 271deg 360deg);
}
.compass__needle {
  position: absolute;
  left: 50%;
  bottom: 50%;
  width: 2px;
  height: 46px;
  margin-left: -1px;
  transform-origin: 50% 100%;
  transform: rotate(var(--deg, 0deg));
  background: linear-gradient(to top, rgba(255, 196, 107, 0), var(--c-amber));
  border-radius: var(--r-pill);
  transition: transform var(--d-4) var(--ease-out);
}
.compass__needle::after {
  content: "";
  position: absolute;
  top: -4px;
  left: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-amber);
}
/* north tick — a mark, not a letter, so it needs no translation */
.compass__n {
  position: absolute;
  top: 4px;
  left: 50%;
  width: 0;
  height: 0;
  margin-left: -4px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 7px solid var(--c-sap);
  opacity: 0.7;
}

.steps { display: flex; flex-direction: column; gap: var(--s-2); counter-reset: step; }
.steps li {
  position: relative;
  padding-left: var(--s-6);
  font-size: 0.9375rem;
  line-height: 1.45;
  color: #cadfd4;
}
.steps li::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 1px;
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  color: var(--c-sap);
  opacity: 0.7;
}
.steps li.is-done { color: var(--c-faint); text-decoration: line-through; }

/* ============================================================================
   12. TREECORE — scan frame + match
   ========================================================================== */
.scanbox {
  position: relative;
  width: 100%;
  max-width: 18rem;
  margin: 0 auto;
  aspect-ratio: 1;
  border-radius: var(--r-3);
  background: rgba(5, 7, 10, 0.28);
  overflow: hidden;
}
.scanbox__corner {
  position: absolute;
  width: 26px;
  height: 26px;
  border: 2px solid var(--c-sap);
  opacity: 0.8;
}
.scanbox__corner--tl { top: 10px;    left: 10px;  border-right: 0; border-bottom: 0; border-radius: var(--r-1) 0 0 0; }
.scanbox__corner--tr { top: 10px;    right: 10px; border-left: 0;  border-bottom: 0; border-radius: 0 var(--r-1) 0 0; }
.scanbox__corner--bl { bottom: 10px; left: 10px;  border-right: 0; border-top: 0;    border-radius: 0 0 0 var(--r-1); }
.scanbox__corner--br { bottom: 10px; right: 10px; border-left: 0;  border-top: 0;    border-radius: 0 0 var(--r-1) 0; }
.scanbox__sweep {
  position: absolute;
  left: 8%;
  right: 8%;
  height: 2px;
  top: 0;
  background: linear-gradient(to right, transparent, var(--c-sap), transparent);
  animation: sweep 2.6s var(--ease) infinite;
}
@keyframes sweep {
  0%, 100% { transform: translateY(24px); opacity: 0.2; }
  50%      { transform: translateY(clamp(120px, 60vw, 240px)); opacity: 0.9; }
}
.scanbox video, .scanbox canvas { width: 100%; height: 100%; object-fit: cover; }

/* the field primitives are defined on the guardian (light) surface — this is
   their dark-surface twin, the one place a child screen carries an input */
.field--dark { gap: var(--s-2); }
.field--dark .field__label {
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-faint);
}
.field--dark .field__status { color: var(--c-sap); }

.input--dark {
  min-height: 46px;
  font-family: var(--f-mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-ink);
  background: var(--c-glass);
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-pill);
  text-align: center;
}
.input--dark::placeholder { color: var(--c-faint); letter-spacing: 0.22em; }
.input--dark:focus {
  outline: none;
  border-color: var(--c-sap);
  background: rgba(110, 242, 176, 0.08);
}

.match { display: flex; align-items: center; gap: var(--s-4); }
.match[hidden] { display: none; }
.match__side { flex: 1; display: flex; flex-direction: column; gap: var(--s-2); }
.verdict {
  font-family: var(--f-mono);
  font-size: 0.9375rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-sap);
}
.deltas { display: flex; flex-direction: column; gap: 2px; }
.deltas li {
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: var(--c-mute);
}

/* ============================================================================
   13. CARE — species shortlist
   ========================================================================== */
.species { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.species li {
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  background: var(--c-glass);
  font-size: var(--t-small);
  color: #cadfd4;
}

/* ============================================================================
   14. INSTALL — the platform-specific how-to, shown only where it applies
   ========================================================================== */
.howto {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--c-line);
  border-radius: var(--r-2);
  background: var(--c-glass);
}
.howto[hidden] { display: none; }

/* ============================================================================
   DIRECTOR OVERLAY — the causal chain, monospace and dim
   ========================================================================== */
.hud {
  position: fixed;
  z-index: 60;
  right: var(--s-3);
  bottom: max(var(--s-3), env(safe-area-inset-bottom));
  width: min(23rem, calc(100vw - 24px));
  max-height: min(72dvh, 40rem);
  overflow-y: auto;
  padding: var(--s-3);
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  line-height: 1.5;
  letter-spacing: 0.03em;
  color: rgba(110, 242, 176, 0.82);
  background: rgba(3, 8, 6, 0.9);
  border: 1px solid rgba(110, 242, 176, 0.28);
  border-radius: var(--r-1);
}
.hud[hidden] { display: none; }

.hud__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  padding-bottom: var(--s-2);
  margin-bottom: var(--s-2);
  border-bottom: 1px solid rgba(110, 242, 176, 0.2);
}
.hud__title { letter-spacing: 0.24em; text-transform: uppercase; color: var(--c-sap); }
.hud__close {
  padding: 0 var(--s-2);
  border: 0;
  background: none;
  color: rgba(110, 242, 176, 0.7);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.hud__grid {
  display: grid;
  grid-template-columns: minmax(0, 9.5rem) 1fr;
  gap: 1px var(--s-2);
  align-items: start;
}
.hud__grid dt {
  color: rgba(110, 242, 176, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  overflow-wrap: anywhere;
}
.hud__grid dd { margin: 0; color: rgba(200, 255, 226, 0.92); overflow-wrap: anywhere; }

.hud__swatches { display: flex; gap: 4px; margin: var(--s-2) 0; }
.hud__swatches i {
  width: 22px;
  height: 12px;
  border-radius: 2px;
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.hud__label {
  margin-top: var(--s-2);
  color: rgba(110, 242, 176, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.16em;
}
.hud__pre {
  margin-top: 2px;
  padding: var(--s-2);
  background: rgba(110, 242, 176, 0.05);
  border-radius: 3px;
  font-size: 0.625rem;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: rgba(200, 255, 226, 0.86);
}
.hud__list { margin-top: 2px; display: flex; flex-direction: column; gap: 1px; }
.hud__list li { color: rgba(200, 255, 226, 0.7); }
.hud__list li b { color: var(--c-amber); font-weight: 500; }

/* ============================================================================
   FX HOOKS — used by js/ui/fx.js
   ========================================================================== */
.fx-overlay {
  position: absolute;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  contain: strict;
}
.fx-overlay canvas { width: 100%; height: 100%; }

.fx-overlay--fixed { position: fixed; }

.fx-chroma {
  animation: fx-chroma 420ms var(--ease-out) both;
}
@keyframes fx-chroma {
  0%   { filter: saturate(2.4) contrast(1.15) brightness(1.35); }
  40%  { filter: saturate(1.5) contrast(1.05) brightness(1.1); }
  100% { filter: none; }
}

/* ============================================================================
   LAPTOP — the team will open this on a 1440px screen
   ========================================================================== */
@media (min-width: 900px) {
  :root {
    --pad-x: var(--s-8);
    --pad-t: var(--s-8);
    --pad-b: var(--s-7);
  }
  .wrap { max-width: 36rem; }
  .wrap--live { max-width: 40rem; }
  .lead { font-size: 1.125rem; }
  .beats { max-width: 30rem; }
  .ring { width: 240px; }
  .card { max-width: 26rem; }
  .presets { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gestures { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* three narrow columns cannot hold title and price side by side — stack them */
  .option {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "title" "price" "desc";
    align-content: start;
  }
  .option__price { text-align: left; }
  .admin__body { padding: var(--s-6) var(--s-5) var(--s-7); gap: var(--s-5); }
  .admin__bar, .admin__foot { padding-inline: var(--s-6); }
  .hud { right: var(--s-5); bottom: var(--s-5); font-size: 0.75rem; }
}

@media (min-width: 1280px) {
  .screen--hero .wrap--center { max-width: 44rem; }
  .display { font-size: clamp(2.4rem, 3.4vw, 3.5rem); }
  .display--xl { font-size: clamp(3rem, 5vw, 5rem); }
}

/* short landscape phones: never let the hero clip */
@media (max-height: 560px) {
  .seal { width: min(34vh, 150px); }
  .ring { width: min(34vh, 150px); }
  .wrap { padding-top: var(--s-4); gap: var(--s-3); }
}

/* ============================================================================
   REDUCED MOTION — the heavy animation goes, the product stays usable
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
  #drift { animation: none; opacity: 0.35; }
  .seal__ring--2, .seal__core, .btn__pulse, .scanbox__sweep { animation: none; }
  .screen { transform: none; }
  .screen.is-leaving { transform: none; }
  .compass__needle { transition: none; }
}