/* AEONFOLD — "THE FOLD" site skin (designs/design_website.md).
   Palette law: Designer Gold appears ONLY at (1) hero core (canvas),
   (2) Play CTAs, (3) donate buttons, (4) World-Tree strip.
   Sumi strip vermilion #B33A2B is Sumi's material, sanctioned. */
:root {
  --void: #070b12;
  --void-deep: #04070d;
  --raise: #0d1322;
  --raise-2: #101a2e;
  --line: rgba(0, 229, 255, 0.14);
  --ink: #dfe9f5;
  --ink-dim: #8fa3bd;
  --cyan: #00e5ff;
  --violet: #b388ff;
  --ice: #dffbff;
  --gold: #ffc66e;
  --danger: #ff6b81;
  --radius: 14px;
  --font: ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;
  /* legacy aliases (kept for generated markup) */
  --bg: var(--void);
  --bg-raise: var(--raise);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  background: var(--void);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Stratum 1 — the deep field canvas */
#stars {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* ============ chrome (stratum 3) ============ */
header.top {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem clamp(1rem, 4vw, 2.5rem);
  background: rgba(7, 11, 18, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
header.top::after {
  /* bottom edge as gradient fade, not a hard border */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 229, 255, 0.35) 30%, rgba(179, 136, 255, 0.3) 70%, transparent);
  pointer-events: none;
}
.brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; }
.brand-word { height: 14px; }
header.top nav { display: flex; gap: clamp(0.7rem, 2.5vw, 1.5rem); align-items: center; }
header.top nav a {
  color: var(--ink-dim);
  text-decoration: none;
  font-size: 0.92rem;
  letter-spacing: 0.05em;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0;
}
header.top nav a:hover { color: var(--cyan); }
header.top nav a.active { color: var(--ice); }
/* reserved-gold law: nav Donate speaks in the cool chrome voice */
header.top nav a.donate { color: var(--ink-dim); }
header.top nav a.donate:hover { color: var(--cyan); text-shadow: 0 0 10px rgba(0, 229, 255, 0.4); }

/* stroke-drawn inline icons */
.icn { flex: 0 0 auto; display: inline-block; vertical-align: -0.14em; }

main { position: relative; z-index: 1; }

/* ============ hero ============ */
.hero {
  text-align: center;
  /* first paint is only the Fold, the wordmark, the question and the CTAs —
     the hero breathes toward 92vh on tall viewports (amendment 2026-07-27) */
  min-height: min(92vh, 940px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(3rem, 10vh, 6rem) 1.2rem 2.4rem;
}
/* auto margins split the hero's breathing room above the wordmark and above
   the facts rail, so the facts anchor to the hero's bottom edge and the
   hero→pitch seam stays composed (no orphaned void after the gallery removal) */
.hero h1 { margin: auto 0 0.6rem; }
.hero-word {
  width: min(560px, 82vw);
  height: auto;
  filter: drop-shadow(0 2px 30px rgba(0, 20, 40, 0.9)) drop-shadow(0 0 18px rgba(0, 229, 255, 0.12));
}
.hero-rule {
  display: block;
  width: min(360px, 60vw);
  height: 6px;
  margin: 0.9rem auto 0;
}
.tagline {
  color: var(--ink-dim);
  font-size: clamp(1rem, 2.4vw, 1.2rem);
  margin: 1.1rem 0 1.9rem;
  text-shadow: 0 1px 12px rgba(4, 7, 13, 0.9);
}
/* first sentence leads in full ink; the question line stays quieter */
.tagline .t1 { color: var(--ink); }
.tagline em { color: var(--violet); font-style: italic; }
.hero-cta { display: flex; gap: 0.9rem; justify-content: center; flex-wrap: wrap; }
.hero-facts {
  margin-top: auto;
  padding-top: 2.4rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--ink-dim);
}
.hero-facts .fact { white-space: nowrap; }
@media (max-width: 480px) {
  /* readout stacks as instrument rows — no mid-fact wraps, no orphans */
  .hero-facts .fact-sep { display: none; }
  .hero-facts .fact { display: block; line-height: 1.9; }
}

/* ============ buttons ============ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.68rem 1.6rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-decoration: none;
  cursor: pointer;
  transition: box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}
/* the core sun — Play CTA (Designer Gold, sanctioned) */
.btn.primary {
  background: radial-gradient(circle at 38% 32%, #fff8ec 0%, var(--gold) 42%, #d99a3e 100%);
  color: #241503;
  box-shadow: 0 0 26px rgba(255, 198, 110, 0.32), 0 0 70px rgba(255, 198, 110, 0.12);
  animation: sun-breathe 4s ease-in-out infinite;
}
.btn.primary:hover { box-shadow: 0 0 40px rgba(255, 198, 110, 0.55), 0 0 90px rgba(255, 198, 110, 0.2); }
@keyframes sun-breathe {
  0%, 100% { box-shadow: 0 0 22px rgba(255, 198, 110, 0.26), 0 0 60px rgba(255, 198, 110, 0.1); }
  50% { box-shadow: 0 0 34px rgba(255, 198, 110, 0.42), 0 0 90px rgba(255, 198, 110, 0.18); }
}
.btn.ghost {
  color: var(--cyan);
  background: transparent;
  border: 0;
  position: relative;
}
.btn.ghost::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(120deg, rgba(0, 229, 255, 0.65), rgba(0, 229, 255, 0.12) 55%, rgba(179, 136, 255, 0.4));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.btn.ghost:hover { background: rgba(0, 229, 255, 0.07); }
.btn.small { padding: 0.38rem 1.05rem; font-size: 0.85rem; }
/* Donate — sanctioned gold */
.btn.gold {
  background: radial-gradient(circle at 38% 32%, #fff4e0 0%, var(--gold) 45%, #d99a3e 100%);
  color: #241503;
  box-shadow: 0 0 22px rgba(255, 198, 110, 0.25);
}
.btn.gold:hover { box-shadow: 0 0 36px rgba(255, 198, 110, 0.45); }
.btn.ghost-gold {
  color: var(--gold);
  border-color: rgba(255, 198, 110, 0.45);
  background: transparent;
}
.btn.ghost-gold:hover { background: rgba(255, 198, 110, 0.08); }
/* the feedback Send button is not a Play CTA — cool voice */
#feedback-form .btn.primary {
  background: linear-gradient(135deg, var(--cyan), #37b6ff);
  color: #04141a;
  box-shadow: 0 0 22px rgba(0, 229, 255, 0.26);
  animation: none;
}
#feedback-form .btn.primary:hover { box-shadow: 0 0 34px rgba(0, 229, 255, 0.45); }

:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 4px; }
.btn:focus-visible { outline-offset: 3px; border-radius: 999px; }

/* ============ sections (stratum 2) ============ */
.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 3.6rem clamp(1rem, 4vw, 2rem);
  position: relative;
}
/* descending bands: alternating deepened void */
.band-deep {
  position: relative;
}
.band-deep::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, transparent, rgba(4, 7, 13, 0.85) 18%, rgba(4, 7, 13, 0.85) 82%, transparent);
  pointer-events: none;
}
.wrap.band-deep::before {
  left: 50%;
  right: auto;
  width: 100vw;
  transform: translateX(-50%);
}

.kicker {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 0.55rem;
}
/* descent glyph — three dots stepping down-right */
.kicker::before {
  content: "";
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  background:
    radial-gradient(circle 1.6px at 3px 3px, var(--violet) 98%, transparent),
    radial-gradient(circle 1.6px at 7px 7px, var(--cyan) 98%, transparent),
    radial-gradient(circle 1.6px at 11px 11px, var(--ice) 98%, transparent);
}

h2 {
  font-size: clamp(1.55rem, 4vw, 2.3rem);
  font-weight: 300;
  letter-spacing: 0.14em;
  color: var(--ice);
  margin: 0 0 1rem;
}
/* tapered underglow rule beneath every h2 */
h2::after {
  content: "";
  display: block;
  height: 1px;
  max-width: 340px;
  margin-top: 0.7rem;
  background: linear-gradient(90deg, rgba(0, 229, 255, 0.55), rgba(0, 229, 255, 0.12) 60%, transparent);
}
.lede { color: var(--ink-dim); font-size: 1.05rem; max-width: 46rem; }
.math { font-family: var(--mono); color: var(--cyan); }
h3.sub { margin-top: 2.6rem; font-size: 1.05rem; letter-spacing: 0.1em; color: var(--ice); font-weight: 500; }
p a, .lede a, .tips a, .faq a { color: var(--cyan); }

/* scroll reveal (JS adds .will-reveal; visible by default without JS) */
.will-reveal { opacity: 0; transform: translateY(12px); transition: opacity 0.5s ease, transform 0.5s ease; }
.will-reveal.revealed { opacity: 1; transform: none; }

/* ============ cards — pockets of calmed space ============ */
.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 1.6rem;
}
/* balanced 2x2 at desktop — never an orphaned 3+1 row */
@media (min-width: 700px) { .cards { grid-template-columns: 1fr 1fr; } }
.card {
  position: relative;
  background:
    radial-gradient(120% 90% at 20% 0%, rgba(16, 26, 46, 0.9), rgba(13, 19, 34, 0.92) 60%),
    var(--raise);
  border-radius: var(--radius);
  padding: 1.15rem 1.25rem;
  box-shadow: inset 0 0 40px rgba(4, 7, 13, 0.55);
}
/* dissolving edge: 1px line fading out at two corners */
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(0, 229, 255, 0.4), rgba(0, 229, 255, 0.04) 40%, transparent 55%, rgba(179, 136, 255, 0.22));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.card:hover::before { opacity: 1.6; }
.card h3 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.5rem;
  font-size: 1.02rem;
  color: var(--ice);
  font-weight: 500;
  letter-spacing: 0.03em;
}
.card p { margin: 0; font-size: 0.92rem; color: var(--ink-dim); }
.card strong { color: var(--ink); }
.glyph {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 0.9rem;
  color: var(--violet);
  background: rgba(179, 136, 255, 0.08);
  border: 1px solid rgba(179, 136, 255, 0.28);
  border-radius: 8px;
  min-width: 2.4rem;
  height: 1.9rem;
  padding: 0 0.4rem;
}
.glyph svg { display: block; }

/* ============ THE FIVE WORLDS BAND ============ */
.worlds-band { display: grid; gap: 0.9rem; margin-top: 1.8rem; }
.phase-strip {
  position: relative;
  min-height: 132px;
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  align-items: center;
  isolation: isolate;
  contain: paint;
}
.strip-art { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.strip-art svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.strip-text {
  position: relative;
  z-index: 2;
  padding: 1rem 1.4rem;
  max-width: 620px;
  /* scrim keeps contrast over any art */
  background: linear-gradient(90deg, rgba(4, 7, 13, 0.82) 55%, transparent);
  border-radius: var(--radius) 0 0 var(--radius);
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.phase-num {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  color: var(--ink-dim);
}
.strip-text strong {
  font-size: clamp(1.02rem, 2.4vw, 1.25rem);
  font-weight: 500;
  letter-spacing: 0.09em;
  color: var(--ice);
  margin: 0.15rem 0 0.2rem;
}
.strip-desc { color: var(--ink-dim); font-size: 0.88rem; line-height: 1.45; }
.phase-strip { transition: filter 0.3s ease; }
.phase-strip:hover { filter: brightness(1.08); }

/* 1 — Abyssal Dream: hadal depth, rising motes */
.phase-strip.p1 { background: linear-gradient(105deg, #030910 0%, #04141c 55%, #062126 100%); }
.p1 .mote {
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: #3ef2d0;
  box-shadow: 0 0 10px 2px rgba(62, 242, 208, 0.55);
  opacity: 0;
  animation: mote-rise 9s ease-in-out infinite;
}
.p1 .mote.m2 { animation-delay: 3s; animation-duration: 11s; width: 3px; height: 3px; }
.p1 .mote.m3 { animation-delay: 6s; animation-duration: 13s; width: 2px; height: 2px; }
@keyframes mote-rise {
  0% { transform: translateY(46px); opacity: 0; }
  20% { opacity: 0.8; }
  80% { opacity: 0.5; }
  100% { transform: translateY(-96px); opacity: 0; }
}
.phase-strip:hover .mote { animation-duration: 6s; }

/* 2 — Sumi: paper-dark, ink stroke revealed on scroll */
.phase-strip.p2 { background: linear-gradient(100deg, #0b0d10 0%, #131417 60%, #17181a 100%); }
.p2 .ink-stroke { stroke-dasharray: 900; stroke-dashoffset: 900; }
.phase-strip.p2.revealed .ink-stroke,
html.no-js .p2 .ink-stroke { animation: ink-bleed 2.2s ease-out 0.2s forwards; }
@keyframes ink-bleed { to { stroke-dashoffset: 0; } }

/* 3 — The Universe: dense photoreal deep field + visible spiral galaxy */
.phase-strip.p3 {
  background:
    /* bright foreground stars w/ glow */
    radial-gradient(circle 2px at 12% 30%, rgba(255, 255, 255, 1) 40%, rgba(223, 251, 255, 0.35) 70%, transparent),
    radial-gradient(circle 1.6px at 44% 22%, rgba(200, 170, 255, 0.95) 45%, rgba(179, 136, 255, 0.3) 75%, transparent),
    radial-gradient(circle 2.2px at 70% 32%, rgba(190, 235, 255, 1) 40%, rgba(154, 223, 255, 0.35) 72%, transparent),
    radial-gradient(circle 1.6px at 27% 74%, rgba(255, 244, 224, 0.95) 45%, rgba(255, 220, 170, 0.3) 75%, transparent),
    radial-gradient(circle 1.8px at 90% 66%, rgba(223, 251, 255, 0.95) 45%, transparent 78%),
    /* mid field */
    radial-gradient(circle 1.1px at 58% 64%, rgba(223, 251, 255, 0.85) 98%, transparent),
    radial-gradient(circle 1.1px at 84% 56%, rgba(223, 251, 255, 0.8) 98%, transparent),
    radial-gradient(circle 1px at 92% 20%, rgba(223, 251, 255, 0.75) 98%, transparent),
    radial-gradient(circle 1px at 36% 46%, rgba(223, 251, 255, 0.75) 98%, transparent),
    radial-gradient(circle 1.2px at 6% 62%, rgba(154, 223, 255, 0.8) 98%, transparent),
    radial-gradient(circle 1px at 18% 14%, rgba(223, 251, 255, 0.7) 98%, transparent),
    radial-gradient(circle 1.1px at 50% 84%, rgba(200, 170, 255, 0.75) 98%, transparent),
    radial-gradient(circle 1px at 63% 12%, rgba(223, 251, 255, 0.7) 98%, transparent),
    radial-gradient(circle 1px at 77% 82%, rgba(223, 251, 255, 0.7) 98%, transparent),
    /* faint background dust of stars */
    radial-gradient(circle 0.7px at 9% 44%, rgba(223, 251, 255, 0.55) 98%, transparent),
    radial-gradient(circle 0.7px at 22% 56%, rgba(223, 251, 255, 0.5) 98%, transparent),
    radial-gradient(circle 0.7px at 33% 10%, rgba(223, 251, 255, 0.5) 98%, transparent),
    radial-gradient(circle 0.7px at 41% 68%, rgba(223, 251, 255, 0.5) 98%, transparent),
    radial-gradient(circle 0.7px at 54% 38%, rgba(223, 251, 255, 0.55) 98%, transparent),
    radial-gradient(circle 0.7px at 66% 76%, rgba(223, 251, 255, 0.5) 98%, transparent),
    radial-gradient(circle 0.7px at 74% 8%, rgba(223, 251, 255, 0.5) 98%, transparent),
    radial-gradient(circle 0.7px at 87% 40%, rgba(223, 251, 255, 0.55) 98%, transparent),
    radial-gradient(circle 0.7px at 96% 78%, rgba(223, 251, 255, 0.5) 98%, transparent),
    radial-gradient(circle 0.7px at 3% 16%, rgba(223, 251, 255, 0.5) 98%, transparent),
    /* nebula wash + brighter cosmos gradient */
    radial-gradient(60% 120% at 30% 110%, rgba(179, 136, 255, 0.14), transparent 70%),
    radial-gradient(50% 100% at 70% -20%, rgba(0, 229, 255, 0.1), transparent 70%),
    linear-gradient(100deg, #081026 0%, #101744 55%, #1c1b5e 100%);
}
.p3 .spiral {
  position: absolute;
  right: -50px;
  top: 50%;
  width: 460px;
  height: 460px;
  margin-top: -230px;
  border-radius: 50%;
  background:
    /* luminous galactic core */
    radial-gradient(circle, rgba(255, 250, 235, 0.85) 0%, rgba(215, 228, 255, 0.4) 8%, rgba(179, 136, 255, 0.15) 16%, transparent 26%),
    conic-gradient(from 0deg,
      transparent 0deg,
      rgba(179, 136, 255, 0.32) 50deg,
      rgba(200, 235, 255, 0.5) 95deg,
      rgba(154, 223, 255, 0.2) 140deg,
      transparent 185deg,
      rgba(179, 136, 255, 0.3) 230deg,
      rgba(200, 235, 255, 0.48) 275deg,
      rgba(154, 223, 255, 0.18) 320deg,
      transparent 360deg);
  -webkit-mask: radial-gradient(circle, #000 0 44%, transparent 66%);
  mask: radial-gradient(circle, #000 0 44%, transparent 66%);
  filter: blur(4px);
  animation: spiral-turn 70s linear infinite;
}
/* second pair of arms, tighter and counter-rotated for structure */
.p3 .spiral::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: inherit;
  transform: rotate(112deg) scale(0.62);
  opacity: 0.85;
}
@keyframes spiral-turn { to { transform: rotate(360deg); } }
.phase-strip:hover .spiral { animation-duration: 45s; }

/* 4 — Quantum Realm: nervous interference fringes */
.phase-strip.p4 { background: linear-gradient(100deg, #02141c 0%, #04202c 60%, #032630 100%); }
.p4 .fringes {
  position: absolute;
  inset: -20px;
  background:
    repeating-linear-gradient(78deg, transparent 0 9px, rgba(0, 229, 255, 0.12) 9px 11px),
    repeating-linear-gradient(102deg, transparent 0 11px, rgba(0, 229, 255, 0.1) 11px 13px);
  animation: fringe-shift 5s ease-in-out infinite alternate;
  mix-blend-mode: screen;
}
@keyframes fringe-shift { from { transform: translateX(0); } to { transform: translateX(14px); } }
.phase-strip:hover .fringes { animation-duration: 2.6s; }

/* 5 — Cosmic Mysticism: indigo, silver tree, gold gleam (sanctioned) */
.phase-strip.p5 {
  background:
    radial-gradient(80% 140% at 82% 100%, rgba(255, 198, 110, 0.12), transparent 55%),
    linear-gradient(100deg, #0c0a26 0%, #171242 60%, #221a55 100%);
}

/* Working Paper margin note — visibly not of the cosmos */
.aside {
  margin-top: 2rem;
  background: #f2eee4;
  color: #3d3a33;
  border: 0;
  border-left: 3px solid #b9b29e;
  border-radius: 2px;
  padding: 0.8rem 1.1rem;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.5);
}
.aside strong { color: #191713; }

/* legacy list styling (wiki keeps the ol) */
.worlds { padding-left: 1.4rem; color: var(--ink-dim); }
.worlds li { margin: 0.45rem 0; }
.worlds strong { color: var(--ink); }
.tips { color: var(--ink-dim); padding-left: 1.4rem; }
.tips li { margin: 0.35rem 0; }

/* ============ changelog — the star-chart trace ============ */
.timeline { margin-top: 2rem; position: relative; }
.timeline::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 10px;
  bottom: 10px;
  width: 1px;
  background: linear-gradient(180deg, var(--violet), var(--cyan) 55%, rgba(0, 229, 255, 0.15));
  opacity: 0.5;
}
.release { position: relative; padding: 0 0 2.2rem 2.4rem; }
/* 4-ray star node: crossed hairlines + glow dot */
.release::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 6px;
  width: 15px;
  height: 15px;
  background:
    radial-gradient(circle 2.2px at 50% 50%, var(--ice) 96%, transparent),
    linear-gradient(0deg, transparent 46%, rgba(0, 229, 255, 0.9) 46% 54%, transparent 54%),
    linear-gradient(90deg, transparent 46%, rgba(0, 229, 255, 0.9) 46% 54%, transparent 54%);
  filter: drop-shadow(0 0 6px rgba(0, 229, 255, 0.7));
}
/* the current star — newest release, brighter & larger */
.release:first-child::before {
  width: 27px;
  height: 27px;
  left: -5px;
  top: 0;
  background:
    radial-gradient(circle 3.4px at 50% 50%, #ffffff 96%, transparent),
    radial-gradient(circle 9px at 50% 50%, rgba(0, 229, 255, 0.35) 40%, transparent 100%),
    linear-gradient(0deg, transparent 46%, rgba(120, 245, 255, 1) 46% 54%, transparent 54%),
    linear-gradient(90deg, transparent 46%, rgba(120, 245, 255, 1) 46% 54%, transparent 54%);
  filter: drop-shadow(0 0 14px rgba(0, 229, 255, 1)) drop-shadow(0 0 30px rgba(0, 229, 255, 0.5));
}
.release:first-child h3 { color: var(--ice); font-size: 1.2rem; text-shadow: 0 0 14px rgba(0, 229, 255, 0.25); }
.release.revealed::before { animation: node-pulse 0.9s ease-out 1; }
@keyframes node-pulse {
  0% { filter: drop-shadow(0 0 2px rgba(0, 229, 255, 0.4)); }
  45% { filter: drop-shadow(0 0 14px rgba(0, 229, 255, 1)); }
  100% { filter: drop-shadow(0 0 6px rgba(0, 229, 255, 0.7)); }
}
.release h3 { margin: 0 0 0.25rem; font-size: 1.08rem; font-weight: 500; letter-spacing: 0.05em; color: var(--ink); }
.release .meta {
  display: flex;
  gap: 0.7rem;
  align-items: center;
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  color: var(--ink-dim);
  margin-bottom: 0.55rem;
}
.release .tag {
  font-family: var(--mono);
  background: var(--raise);
  border: 1px solid rgba(179, 136, 255, 0.35);
  color: var(--violet);
  border-radius: 4px;
  padding: 0.05rem 0.5rem;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.release ul { margin: 0; padding-left: 1.2rem; color: var(--ink-dim); font-size: 0.93rem; }
.release li { margin: 0.3rem 0; }
/* quiet in-voice error line */
#changelog-list:not(:has(.release)) {
  font-family: var(--mono);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: var(--ink-dim);
}
#changelog-list:not(:has(.release))::before { display: none; }

/* ============ wiki — the Pilgrim's Codex ============ */
.page-head { padding-bottom: 0.5rem; }
.toc {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 1.5rem;
  position: relative;
  padding: 0.4rem 0;
}
.toc::before {
  /* constellation rail hairline behind the chips */
  content: "";
  position: absolute;
  left: 0; right: 8%;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, rgba(179, 136, 255, 0.35), rgba(0, 229, 255, 0.3) 60%, transparent);
  pointer-events: none;
}
.toc a {
  position: relative;
  color: var(--ink-dim);
  text-decoration: none;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  padding: 0.42rem 0.95rem;
  background: rgba(7, 11, 18, 0.85);
  border: 1px solid rgba(0, 229, 255, 0.16);
  border-radius: 999px;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.toc a:hover { color: var(--cyan); border-color: rgba(0, 229, 255, 0.5); }
/* descent ladder */
.roadmap { margin-top: 2rem; display: grid; gap: 1.1rem; position: relative; padding-left: 1.6rem; }
.roadmap::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 4px;
  bottom: 4px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--violet), var(--cyan) 45%, var(--ice) 85%, #ffffff);
  opacity: 0.65;
}
.stage {
  position: relative;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(16, 26, 46, 0.9), rgba(13, 19, 34, 0.92) 60%),
    var(--raise);
  border-radius: var(--radius);
  padding: 0.95rem 1.25rem;
  box-shadow: inset 0 0 34px rgba(4, 7, 13, 0.5);
}
.stage::before {
  content: "";
  position: absolute;
  left: -1.6rem;
  top: 1.25rem;
  width: 9px;
  height: 9px;
  margin-left: -3.5px;
  border-radius: 50%;
  background: var(--void);
  border: 2px solid var(--cyan);
  box-shadow: 0 0 8px rgba(0, 229, 255, 0.6);
}
.stage:first-child::before { border-color: var(--violet); box-shadow: 0 0 8px rgba(179, 136, 255, 0.6); }
.stage:last-child::before { border-color: var(--ice); box-shadow: 0 0 10px rgba(223, 251, 255, 0.8); }
.stage h3 { margin: 0 0 0.3rem; font-size: 0.98rem; color: var(--ice); font-weight: 500; letter-spacing: 0.05em; }
.stage p { margin: 0; font-size: 0.92rem; color: var(--ink-dim); }
.faq { margin-top: 1.4rem; }
.faq dt { font-weight: 600; margin-top: 1.2rem; color: var(--ice); letter-spacing: 0.02em; }
.faq dd { margin: 0.3rem 0 0; color: var(--ink-dim); font-size: 0.95rem; }

/* ============ community / soon ============ */
.card.soon { opacity: 0.8; }
.soon-tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan);
  border: 1px solid rgba(0, 229, 255, 0.3);
  border-radius: 4px;
  padding: 0.1rem 0.5rem;
  margin-right: 0.4rem;
  opacity: 0.85;
}

/* ============ feedback — transmission console ============ */
#feedback-form {
  position: relative;
  margin-top: 1.8rem;
  background:
    radial-gradient(140% 110% at 15% 0%, rgba(16, 26, 46, 0.92), rgba(13, 19, 34, 0.94) 65%),
    var(--raise);
  border-radius: var(--radius);
  padding: 1.5rem 1.4rem 1.4rem;
  max-width: 640px;
  box-shadow: inset 0 0 46px rgba(4, 7, 13, 0.55);
}
#feedback-form::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(160deg, rgba(0, 229, 255, 0.45), rgba(0, 229, 255, 0.05) 40%, transparent 60%, rgba(179, 136, 255, 0.25));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.console-head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin: -0.2rem 0 1.2rem;
}
.console-head .icn { color: var(--cyan); }
.kind-row { display: flex; gap: 0.6rem; flex-wrap: wrap; border: 0; padding: 0; margin: 0 0 1.1rem; }
.kind-row label { cursor: pointer; }
.kind-row input { position: absolute; opacity: 0; }
.kind-row span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--ink-dim);
  font-size: 0.9rem;
  transition: all 0.15s ease;
}
.kind-row input:checked + span {
  border-color: var(--cyan);
  color: var(--cyan);
  background: rgba(0, 229, 255, 0.08);
  box-shadow: 0 0 14px rgba(0, 229, 255, 0.2);
}
.kind-row input:focus-visible + span { outline: 2px solid var(--cyan); outline-offset: 2px; }

.rating-row { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 1.1rem; }
.rating-row[hidden] { display: none; }
.rating-row > span { color: var(--ink-dim); font-size: 0.9rem; }
.stars { display: flex; }
.stars button {
  background: none;
  border: 0;
  color: #33415a;
  cursor: pointer;
  padding: 0.35rem 0.2rem;
  min-width: 34px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.12s ease, filter 0.12s ease;
}
.stars button svg { display: block; }
.stars button.lit { color: var(--ice); filter: drop-shadow(0 0 6px rgba(0, 229, 255, 0.7)); }
.stars button.lit svg .star-fill { fill: currentColor; }
.stars button:hover { color: var(--cyan); }

.field { display: block; margin-bottom: 1rem; }
.field span { display: block; font-size: 0.85rem; margin-bottom: 0.35rem; color: var(--ink); }
.field small { color: var(--ink-dim); font-weight: 400; }
.field input, .field textarea {
  width: 100%;
  background: var(--void);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.6rem 0.8rem;
  font: inherit;
  font-size: 0.95rem;
  resize: vertical;
}
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.12);
}
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 560px) { .two-col { grid-template-columns: 1fr; } }

#form-status { min-height: 1.4rem; margin: 0.8rem 0 0; font-family: var(--mono); font-size: 0.84rem; letter-spacing: 0.04em; }
#form-status.ok { color: var(--cyan); }
#form-status.err { color: var(--danger); }

/* ============ footer ============ */
footer {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 2.4rem 1rem 3rem;
  color: var(--ink-dim);
  font-size: 0.85rem;
  margin-top: 2rem;
}
footer::before {
  content: "";
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 229, 255, 0.25) 30%, rgba(179, 136, 255, 0.22) 70%, transparent);
}
.foot-inner { display: flex; flex-direction: column; align-items: center; gap: 0.9rem; }
.foot-brand { display: flex; align-items: center; gap: 0.6rem; letter-spacing: 0.05em; }
.foot-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.2rem; }
.foot-nav a { color: var(--ink-dim); text-decoration: none; font-size: 0.85rem; padding: 0.3rem 0; }
.foot-nav a:hover { color: var(--cyan); }

.center-cta { justify-content: center; margin-top: 2.2rem; }
.left-cta { justify-content: flex-start; margin-top: 1.6rem; }

/* centered showcase sections (Get the game / Support) */
.centered { text-align: center; }
.centered .kicker { justify-content: center; }
.centered h2::after { margin-left: auto; margin-right: auto; }
.centered .lede { margin-left: auto; margin-right: auto; }
.centered .store-badges { justify-content: center; }
.support-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  margin-top: 1.8rem;
}
/* the two config-driven containers dissolve into one shared row */
.support-row .donate-options,
.support-row .hero-cta { display: contents; }

/* ============ donate / stores ============ */
.donate-options { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.6rem; }
.store-badges { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.6rem; }
/* no-JS / config-failure fallback line — the store renderer clears it on load */
.store-badges .store-fallback { margin: 0; display: inline-flex; align-items: center; gap: 0.65rem; }
.store-badges .store-fallback .soon-tag { margin-right: 0; white-space: nowrap; }
.store-card {
  position: relative;
  background:
    radial-gradient(120% 100% at 30% 0%, rgba(16, 26, 46, 0.9), rgba(13, 19, 34, 0.92) 65%),
    var(--raise);
  border-radius: var(--radius);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  width: 180px;
  box-shadow: inset 0 0 30px rgba(4, 7, 13, 0.5);
}
.store-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(150deg, rgba(0, 229, 255, 0.35), transparent 45%, rgba(179, 136, 255, 0.2));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.store-card.soon { opacity: 0.78; }
.store-qr {
  width: 132px;
  height: 132px;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.store-qr svg { width: 100%; height: 100%; display: block; }
/* signal-awaiting card: same footprint as a live QR so the row never jumps */
.store-qr.placeholder {
  background: radial-gradient(circle at 50% 46%, rgba(0, 229, 255, 0.06), rgba(7, 11, 18, 0) 70%);
  border: 0;
}
.store-qr.placeholder .await-sig { width: 100%; height: 100%; }
.sig-ring { opacity: 0.18; transform-origin: 48px 48px; }
.sig-ring.r1 { animation: sig-pulse 3s ease-in-out infinite; }
.sig-ring.r2 { opacity: 0.1; animation: sig-pulse 3s ease-in-out infinite 0.6s; }
.sig-arc { opacity: 0.75; }
.sig-arc.a1 { animation: sig-wave 3s ease-in-out infinite; }
.sig-arc.a2 { animation: sig-wave 3s ease-in-out infinite 0.35s; }
.sig-dot { animation: sig-wave 3s ease-in-out infinite 0.7s; }
@keyframes sig-pulse {
  0%, 100% { opacity: 0.1; transform: scale(0.97); }
  50% { opacity: 0.34; transform: scale(1.03); }
}
@keyframes sig-wave {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 0.95; }
}
@media (prefers-reduced-motion: reduce) {
  .sig-ring, .sig-arc, .sig-dot { animation: none; }
  .sig-ring { opacity: 0.24; }
  .sig-arc, .sig-dot { opacity: 0.7; }
}
.store-cap { display: flex; align-items: center; gap: 0.5rem; min-height: 2rem; }
.store-name { color: var(--ink); font-size: 0.9rem; font-weight: 600; }
/* soon cards stack name over the readout chip so neither ever wraps */
.store-card.soon .store-cap { flex-direction: column-reverse; gap: 0.4rem; justify-content: center; }
.store-card.soon .soon-tag { margin-right: 0; white-space: nowrap; }

/* ============ donate QR plate (VietQR etc.) ============ */
button.btn { font-family: inherit; }
.qr-plate-layer {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.2rem;
}
.qr-plate-layer[hidden] { display: none; }
.qr-plate-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 7, 13, 0.82);
  backdrop-filter: blur(4px);
}
.qr-plate {
  position: relative;
  max-width: min(400px, 94vw);
  max-height: calc(100dvh - 2.4rem);
  overflow: auto;
  text-align: center;
  padding: 1.4rem 1.4rem 1.2rem;
  border-radius: var(--radius);
  background:
    radial-gradient(130% 110% at 25% 0%, rgba(16, 26, 46, 0.96), rgba(13, 19, 34, 0.97) 65%),
    var(--raise);
  box-shadow: inset 0 0 40px rgba(4, 7, 13, 0.55), 0 24px 80px rgba(0, 0, 0, 0.65), 0 0 60px rgba(0, 229, 255, 0.08);
}
/* dissolving-edge hairline (§2.3) — cyan/ice chrome, never gold */
.qr-plate::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(155deg, rgba(0, 229, 255, 0.5), transparent 45%, rgba(179, 136, 255, 0.28));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.qr-plate-title {
  margin: 0 1.6rem 0.9rem;
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--ice);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.qr-plate-img {
  display: block;
  width: min(320px, 100%);
  min-width: 240px;
  height: auto;
  margin: 0 auto;
  border-radius: 12px;
  background: #fff;
}
.qr-plate-note {
  margin: 0.9rem 0 0;
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  color: var(--ink-dim);
}
.qr-plate-close {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-dim);
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease;
}
.qr-plate-close:hover { color: var(--cyan); background: rgba(0, 229, 255, 0.08); }

/* ============ play shell — the premium frame ============ */
body.play-page {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.playbar {
  flex: 0 0 auto;
  min-height: 48px;
  padding: 0.4rem clamp(0.7rem, 2.5vw, 1.6rem);
  background: rgba(7, 11, 18, 0.92);
}
.play-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}
#cloud-status {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.05em;
  color: var(--ink-dim);
}
#cloud-status:not(:empty)::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--ink-dim);
  animation: dot-breathe 2s ease-in-out infinite;
}
#cloud-status.ok { color: var(--cyan); }
#cloud-status.ok::before { background: var(--cyan); box-shadow: 0 0 6px rgba(0, 229, 255, 0.8); }
#cloud-status.warn { color: var(--gold); }
#cloud-status.warn::before { background: var(--gold); box-shadow: 0 0 6px rgba(255, 198, 110, 0.8); }
#cloud-status.err { color: var(--danger); }
#cloud-status.err::before { background: var(--danger); box-shadow: 0 0 6px rgba(255, 107, 129, 0.8); }
@keyframes dot-breathe { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
.account { display: flex; align-items: center; gap: 0.5rem; }
.account img { border-radius: 50%; border: 1px solid var(--line); }
.account span { font-size: 0.85rem; color: var(--ink); }
.game-frame-wrap { flex: 1 1 auto; position: relative; }
#game {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--void);
}
@media (min-width: 701px) {
  .game-frame-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow: inset 0 0 0 1px rgba(0, 229, 255, 0.12);
  }
}

/* [hidden] must win over the display rules above (play bar toggles). */
[hidden] { display: none !important; }

/* ============ legal pages — privacy / terms / security ============ */
/* Long-form clause text: a narrower measure than the marketing sections and a
   calmer ink, so a page of policy stays readable instead of shouting. */
.legal p { color: var(--ink-dim); max-width: 52rem; }
.legal .tips { max-width: 52rem; }
.legal strong { color: var(--ink); }
.legal h3.sub { margin-top: 2.2rem; }
/* the light aside keeps its own dark ink — .legal p must not repaint it */
.legal .aside { color: #3d3a33; }
.legal .aside strong { color: #191713; }
/* dateline / cross-reference line under a page head */
.legal-meta {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  line-height: 1.9;
  color: var(--ink-dim);
}
.legal code {
  font-family: var(--mono);
  font-size: 0.86em;
  color: var(--ice);
  background: rgba(0, 229, 255, 0.07);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0.05em 0.35em;
  word-break: break-word;
}

/* collection table (privacy §3) — scrolls on phones rather than crushing */
.tbl-wrap {
  margin-top: 1.6rem;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(13, 19, 34, 0.5);
}
.tbl { border-collapse: collapse; width: 100%; min-width: 620px; font-size: 0.9rem; }
.tbl th, .tbl td {
  text-align: left;
  vertical-align: top;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--line);
}
.tbl thead th {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cyan);
  white-space: nowrap;
  background: rgba(16, 26, 46, 0.65);
}
.tbl tbody th { width: 30%; font-weight: 500; color: var(--ink); }
.tbl tbody td { color: var(--ink-dim); }
.tbl tbody tr:last-child th, .tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover th, .tbl tbody tr:hover td { background: rgba(0, 229, 255, 0.03); }
/* phones: a four-column policy table is unreadable sideways, so each row
   becomes its own card and the column headers ride along as td labels. */
@media (max-width: 720px) {
  .tbl-wrap { border: 0; border-radius: 0; background: none; overflow-x: visible; }
  .tbl { display: block; min-width: 0; }
  .tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tbl tbody, .tbl tr, .tbl th, .tbl td { display: block; width: auto; }
  .tbl tbody tr {
    margin-bottom: 0.9rem;
    padding: 0.3rem 0 0.9rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(13, 19, 34, 0.5);
  }
  /* beats the desktop `.tbl tbody th { width: 30% }` — same specificity, later */
  .tbl tbody th, .tbl tbody td { width: auto; border-bottom: 0; padding: 0.15rem 1rem; }
  .tbl tbody th { padding-top: 0.8rem; font-size: 0.96rem; }
  .tbl tbody td::before {
    content: attr(data-label);
    display: block;
    margin: 0.7rem 0 0.15rem;
    font-family: var(--mono);
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--cyan);
  }
}

/* footer legal row — a quieter tier below the main footer nav */
.foot-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.3rem 1.4rem; }
.foot-legal a {
  color: var(--ink-dim);
  opacity: 0.72;
  text-decoration: none;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  padding: 0.25rem 0;
}
.foot-legal a:hover { color: var(--cyan); opacity: 1; }

/* ============ responsive ============ */
@media (max-width: 640px) {
  /* thumb-sized controls: full-size buttons must clear 44px on phones */
  .btn:not(.small) { min-height: 44px; }
  .phase-strip { min-height: 96px; }
  .strip-text { max-width: 100%; padding: 0.8rem 1rem; }
  .strip-desc { font-size: 0.8rem; }
  header.top nav a { font-size: 0.85rem; }
  header.top nav a.donate .donate-word { display: none; }
}
@media (max-width: 520px) {
  header.top { padding: 0.6rem 0.8rem; }
  header.top nav { gap: 0.7rem; }
  .brand-word { display: none; }
  .btn.small { padding: 0.34rem 0.85rem; }
}
@media (max-width: 420px) {
  /* stronger local scrim so the subtitle reads over the Fold on phones */
  .tagline {
    color: var(--ink);
    background: radial-gradient(closest-side, rgba(4, 7, 13, 0.88), rgba(4, 7, 13, 0.55) 70%, transparent);
    padding: 0.55rem 1rem;
    border-radius: 12px;
    text-shadow: 0 1px 6px rgba(4, 7, 13, 1), 0 0 18px rgba(4, 7, 13, 0.95);
  }
}
/* mobile playbar: keep the status one line; drop the trailing clause */
@media (max-width: 700px) {
  #cloud-status { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60vw; }
  #cloud-status .status-detail { display: none; }
}

/* ============ reduced motion ============ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .will-reveal { opacity: 1; transform: none; }
  .p2 .ink-stroke { stroke-dashoffset: 0; animation: none; }
  .p1 .mote { opacity: 0.6; transform: none; }
}