/* =========================================================================
   FromTheAshes (FTA) — PS1 / Jak-1 themed HUD + Precursor stone panels
   Palette carried over unchanged from the previous build.
   ========================================================================= */

:root {
  /* ---- brand palette (unchanged) ---- */
  --bg:       #0c0805;
  --surface:  #150e26;
  /* the 3D world keeps its amber sunset; every piece of UI chrome is
     amethyst, so the interface reads as cool tech laid over a warm world */
  --amber:    #f0a500;   /* world only — do not use for chrome */
  --orange:   #ff6b35;   /* world only */

  --vio-lt:   #dcc4ff;   /* edge highlights, hairline lights */
  --vio:      #a970ff;   /* primary accent */
  --vio-mid:  #7c3aed;
  --vio-deep: #4c1d95;
  --vio-ink:  #1b0f33;   /* tinted surface */
  --mag:      #ff4fa3;   /* secondary pop: 18+, warnings */
  --discord:  #5865f2;

  --ink:      #f4edff;
  --ink-dim:  #cbb8e8;
  --ink-mute: #9a86bd;

  /* ---- type ---- */
  --font-display: 'Archivo', 'Trebuchet MS', sans-serif;
  --font-body:    'Geist', 'Segoe UI', sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, monospace;

  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: clamp(16px, 0.55vw + 14px, 18px);
  --text-lg:   clamp(18px, 0.9vw + 15px, 23px);
  --text-xl:   clamp(24px, 1.5vw + 18px, 34px);
  --text-2xl:  clamp(33px, 2.6vw + 21px, 56px);
  --text-hero: clamp(43px, 10.6vw, 92px);

  /* ---- liquid geometry ----------------------------------------------------
     No notches, no right angles. Small chrome is a full pill; larger washes
     use unequal corner radii so no two corners match and nothing reads as a
     rectangle. All static — pure border-radius, zero per-frame cost. */
  --pill: 999px;

  /* ---- low-poly gem cuts: chamfered silhouettes, PS1 flat-shaded ---------- */
  /* a cut gem bar — mitred ends, clipped corners, no curve anywhere */
  --cut-bar: polygon(14px 0, calc(100% - 14px) 0, 100% 50%,
                     calc(100% - 14px) 100%, 14px 100%, 0 50%);
  /* a chamfered slab — eight vertices, all corners knocked off at 45deg */
  --cut-slab: polygon(20px 0, calc(100% - 20px) 0, 100% 20px,
                      100% calc(100% - 20px), calc(100% - 20px) 100%,
                      20px 100%, 0 calc(100% - 20px), 0 20px);
  --cut-chip: polygon(9px 0, calc(100% - 9px) 0, 100% 50%,
                      calc(100% - 9px) 100%, 9px 100%, 0 50%);

  --liquid-sm: 18px 24px 20px 22px / 22px 18px 24px 20px;
  --liquid:    34px 46px 38px 42px / 42px 34px 46px 38px;
  --liquid-lg: 52px 72px 58px 64px / 64px 50px 72px 56px;

  /* gem facet palettes — one solid colour per plane, PS1 flat shading */
  --f-edge: #1e0a3a;

  --gutter: clamp(16px, 4vw, 76px);
  --band: 1780px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

.gem-amber {
  --f-cl: #c79bff; --f-cf: #f0e2ff; --f-cr: #8a4de0;
  --f-pl: #6122cc; --f-pf: #a970ff; --f-pr: #3c1178;
  --f-sp: #f7f1ff; --f-edge: #1e0a3a;
}

* { box-sizing: border-box; }

/* the page is locked to vertical movement only: a sideways swipe or a wide
   child element must never drag the document, because horizontal drag is
   reserved for panning the 3D world */
html {
  /* anchor jumps must not land a heading underneath the fixed HUD */
  scroll-padding-top: clamp(110px, 13vh, 170px);
  scroll-behavior: smooth;
  overflow-x: clip;
  touch-action: pan-y pinch-zoom;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  width: 100%;
  max-width: 100%;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }

/* =========================================================================
   3D CANVAS + FULL-SCREEN OVERLAYS
   ========================================================================= */

#world {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: block;
  /* keep the low-res render chunky, never smoothed */
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.no-3d #world { display: none; }

/* CSS sunset stand-in: visible during boot and as the no-WebGL fallback */
#skyfall {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 70% at 32% 96%, #f0a50055 0%, transparent 58%),
    linear-gradient(180deg, #150d1b 0%, #2c1220 26%, #5d2018 48%,
                    #9c3b16 66%, #db7020 80%, #f0a500 90%, #3a1a0c 100%);
}

/* fine scanline + vignette pass so HTML and canvas share one surface */
#grain {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.20) 0 1px, transparent 1px 3px),
    radial-gradient(130% 100% at 50% 50%, transparent 52%, rgba(0,0,0,0.5) 100%);
}
@media (max-width: 760px) { #grain { opacity: 0.34; } }

/* =========================================================================
   BOOT SCREEN
   ========================================================================= */

#boot {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  background: radial-gradient(90% 70% at 50% 100%, #3a1a0c 0%, #0c0805 62%);
  transition: opacity 0.55s var(--ease);
}
#boot.gone { opacity: 0; pointer-events: none; }

.boot-inner { text-align: center; padding: 24px; }
.boot-mark {
  width: 62px; height: 62px;
  margin: 0 auto 22px;
  color: var(--vio);
  animation: bootSpin 3.4s linear infinite;
}
@keyframes bootSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .boot-mark { animation: none; } }

.boot-label {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.26em;
  color: var(--vio);
}
.boot-bar {
  width: min(240px, 62vw);
  height: 8px;
  margin: 0 auto 16px;
  background: #190f2e;
  border: 1px solid #5b32a8;
  border-radius: 3px;
}
.boot-bar span {
  display: block; width: 4%; height: 100%;
  background: linear-gradient(90deg, var(--vio-deep), var(--vio-mid), var(--vio-lt));
  transition: width 0.35s var(--ease);
}
.boot-hint {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--ink-mute);
}

.booting main, .booting #hud { opacity: 0; }
main, #hud { transition: opacity 0.7s var(--ease) 0.1s; }

/* =========================================================================
   HUD
   ========================================================================= */

.hud {
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  padding-block: clamp(12px, 1.6vw, 22px);
  padding-inline: max(var(--gutter), calc((100% - var(--band)) / 2));
  display: grid;
  /* equal outer columns so the centre nav sits on the true viewport centre
     regardless of how wide the brand plate is */
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: auto 1fr auto;
  align-items: start;
  gap: 12px;
  font-family: var(--font-mono);
}
.hud a, .hud [data-interactive], .hud .smoke-toggle { pointer-events: auto; }

/* A static scrim behind the top row. Section headings scroll up underneath the
   fixed HUD, and without this the nav labels and big display type overlapped
   into an unreadable mess. One gradient on a fixed element, so it costs
   nothing per frame. */
.hud::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: clamp(96px, 11vh, 150px);
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(8, 4, 2, 0.82) 0%, rgba(9, 5, 3, 0.66) 42%,
    rgba(10, 6, 4, 0.30) 74%, rgba(12, 8, 5, 0) 100%);
}

/* soft scrims so HUD text stays legible when a plate scrolls beneath it */
.hud::before, .hud::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 116px;
  pointer-events: none;
  z-index: -1;
}
.hud::before { top: 0;    background: linear-gradient(180deg, rgba(13,8,24,0.78) 0%, rgba(13,8,24,0) 100%); }
.hud::after  { bottom: 0; background: linear-gradient(0deg,   rgba(13,8,24,0.72) 0%, rgba(13,8,24,0) 100%); }

.hud-tl { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.hud-nav { grid-area: 1 / 2; justify-self: center; display: flex; gap: 4px; align-items: center; padding-top: 4px; }
.hud-br { grid-area: 3 / 3; align-self: end; justify-self: end; }
.hud-tr { grid-area: 1 / 3; justify-self: end; align-self: start; display: flex; align-items: center; }

/* ---- brand ---- */
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none;
  padding: 7px 13px 7px 9px;
  border-radius: 3px;
  border: 1px solid rgba(169, 112, 255, 0.34);
  background: linear-gradient(180deg, rgba(48, 26, 84, 0.80), rgba(13, 8, 24, 0.86));
  box-shadow: inset 0 1px 0 rgba(220, 196, 255, 0.20);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.brand:hover {
  border-color: rgba(169, 112, 255, 0.62);
  box-shadow: inset 0 1px 0 rgba(220, 196, 255, 0.28), 0 0 18px -4px rgba(169, 112, 255, 0.5);
}
.brand-mark { width: 27px; height: 27px; flex: 0 0 auto; }
.cue-gem { width: 14px; height: 14px; flex: 0 0 auto; }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-text b {
  font-family: var(--font-display);
  font-stretch: semi-expanded;
  font-size: 19px; font-weight: 700; letter-spacing: 0.04em;
  color: var(--ink);
}
.brand-text i {
  font-style: normal;
  font-size: 9px; font-weight: 500; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vio);
  margin-top: 3px;
}

/* ---- eco meter ---- */
.eco { display: flex; align-items: center; gap: 8px; padding-left: 3px; }
.eco-label {
  font-size: 9px; font-weight: 700; letter-spacing: 0.2em;
  color: var(--ink-mute);
}
.eco-track {
  width: clamp(72px, 9vw, 132px);
  height: 7px;
  background: rgba(12, 8, 22, 0.8);
  border: 1px solid rgba(169, 112, 255, 0.38);
  border-radius: 3px;
}
#ecoFill {
  display: block; width: 2%; height: 100%;
  background: linear-gradient(90deg, var(--vio-deep) 0%, var(--vio-mid) 52%, var(--vio-lt) 100%);
  box-shadow: 0 0 9px rgba(169, 112, 255, 0.7);
  transition: width 0.14s linear;
}

/* ---- nav ---- */
.hud-nav a {
  font-size: 11px; font-weight: 500; letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-dim);
  padding: 9px 16px;
  border-radius: 3px;
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.hud-nav a:hover { color: var(--ink); background: rgba(169, 112, 255, 0.18); }
.hud-nav a.nav-cta {
  color: #f7f1ff;
  border: 1px solid rgba(220, 196, 255, 0.52);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0 1px, transparent 1px),
    linear-gradient(168deg, #b57cff 0%, #8b45f0 46%, #6122cc 100%);
  box-shadow: 0 8px 22px -10px rgba(124, 58, 237, 0.85);
  font-weight: 700;
  transition: filter 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.hud-nav a.nav-cta:hover { color: #fff; filter: brightness(1.14); }

.age {
  display: inline-block;
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
  color: var(--mag);
  padding: 6px 11px;
  border-radius: 3px;
  border: 1px solid rgba(255, 79, 163, 0.36);
  background: linear-gradient(180deg, rgba(74, 18, 46, 0.80), rgba(16, 6, 14, 0.86));
  box-shadow: inset 0 1px 0 rgba(255, 190, 224, 0.18);
}

/* ---- smoke cursor toggle (hidden on touch-only devices) ---- */
.smoke-toggle {
  display: none;
  width: 30px; height: 30px;
  justify-content: center; align-items: center;
  padding: 0;
  border-radius: 4px;
  border: 1px solid rgba(220, 196, 255, 0.22);
  background: linear-gradient(180deg, rgba(28, 18, 46, 0.82), rgba(14, 8, 24, 0.88));
  cursor: pointer;
  transition: color 0.2s var(--ease), background 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.smoke-toggle:hover { border-color: rgba(220, 196, 255, 0.45); }
.smoke-dot {
  width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto;
  background: #6b6478;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.4);
  transition: background 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.smoke-toggle[data-on="true"] {
  border-color: rgba(220, 196, 255, 0.52);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0 1px, transparent 1px),
    linear-gradient(168deg, #b57cff 0%, #8b45f0 46%, #6122cc 100%);
  box-shadow: 0 8px 22px -10px rgba(124, 58, 237, 0.85);
}
.smoke-toggle[data-on="true"] .smoke-dot {
  background: #ffb347;
  box-shadow: 0 0 10px 1px rgba(255, 140, 30, 0.85);
}
@media (any-pointer: fine) { .smoke-toggle { display: inline-flex; } }

/* =========================================================================
   BEATS + PRECURSOR STONE PANELS
   ========================================================================= */

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

.beat {
  /* clipped so the soft shade pools can spill past the text without ever
     adding a pixel of horizontal scroll to the document */
  overflow: clip;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: clamp(96px, 14vh, 190px);
  /* the layout lives inside a centred band, so on ultrawide monitors the
     plates sit inside the composition instead of glued to the screen edge */
  padding-inline: max(var(--gutter), calc((100% - var(--band)) / 2));
}
/* asymmetric composition — the 3D world fills the space beside each plate,
   so wide screens read as a scene rather than a centred island */
.beat            { justify-content: center; }
.beat#vents      { justify-content: center; }
.beat#ruins      { justify-content: center; }
.beat#join       { justify-content: center; }
.beat-end        { justify-content: center; align-items: flex-end; padding-bottom: clamp(40px, 8vh, 90px); }

/* =========================================================================
   HOLO PROJECTIONS  (static — zero per-frame cost)
   No cards. Content sits in a soft, edgeless pool of shade with no rectangle
   anywhere. Everything here is painted once: no backdrop-filter, no mask
   animation, no blend modes, no scroll-driven writes. The only movement on
   the page is the 3D world itself, which gets the whole frame budget.
   ========================================================================= */

.holo {
  position: relative;
  width: 100%;
  max-width: 640px;
}
.holo--hero { max-width: 700px; }
.holo--grid { max-width: 1000px; }
.holo--gate { max-width: 720px; }
.holo--foot { max-width: 860px; }

/* ---- the shade pool: soft-edged darkening, no border, no shape ----------
   The gradient radius is exactly 50%, so the pool fades to nothing precisely
   at the element edge — no rectangle ever becomes visible. The box is blown
   out well past the text so the falloff happens in empty world, not on type.
   A plain gradient, deliberately: backdrop-filter forces the compositor to
   re-read the WebGL output every frame, which is what was costing frames. */
.holo-shade {
  /* three offset lobes, each fading to zero inside the box, so the darkening
     reads as a poured, uneven pool rather than a perfect circle. Still one
     painted layer — no filters, no animation. */
  --pool:
    radial-gradient(34% 40% at 31% 34%, rgba(9,5,18,0.34) 0%, rgba(9,5,18,0) 100%),
    radial-gradient(36% 38% at 71% 64%, rgba(9,5,18,0.32) 0%, rgba(9,5,18,0) 100%),
    radial-gradient(50% 50% at 50% 47%,
      rgba(9,5,18,0.78) 0%, rgba(10,6,20,0.72) 50%,
      rgba(12,7,22,0.38) 70%, rgba(13,8,24,0.11) 86%, rgba(13,8,24,0) 100%);
  position: absolute;
  inset: -34% -30%;
  z-index: 0;
  pointer-events: none;
  display: none;
  background: var(--pool);
  /* raster once, then let the compositor move it */
  transform: translateZ(0);
}
/* the vibe and join beats land on the brightest part of the sunset */
.holo--gate .holo-shade, .holo--grid .holo-shade {
  --pool:
    radial-gradient(34% 40% at 29% 33%, rgba(9,5,18,0.38) 0%, rgba(9,5,18,0) 100%),
    radial-gradient(36% 38% at 72% 65%, rgba(9,5,18,0.36) 0%, rgba(9,5,18,0) 100%),
    radial-gradient(50% 50% at 50% 47%,
      rgba(9,5,18,0.86) 0%, rgba(10,6,20,0.80) 50%,
      rgba(12,7,22,0.44) 70%, rgba(13,8,24,0.13) 86%, rgba(13,8,24,0) 100%);
}
.holo--grid .holo-shade { inset: -22% -24%; }

.holo-rig, .holo-sweep { display: none; }

/* ---- the content ------------------------------------------------------- */
.panel {
  position: relative;
  z-index: 2;
  text-align: center;
  width: 100%;
  max-width: none;
  padding: clamp(24px, 3vw, 46px);
}

/* One cheap composited fade for the whole projection as it enters — a single
   opacity/transform tween per section, nothing per element, nothing repeating. */
.holo {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}
.holo.in { opacity: 1; transform: none; }

.panel-join  { text-align: center; }
.panel-foot  { text-align: center; }

/* with no plate behind the words, every glyph is etched into the world */
.panel .eyebrow, .panel .kicker, .panel .lede, .panel .body, .panel .micro,
.panel .readouts b, .panel .readouts span, .panel .tablet h3, .panel .tablet p,
.panel .tablet-glyph, .panel .rules li, .panel .foot-fine, .panel .foot-nav a,
.panel .foot-top p, .panel .btn-ghost {
  text-shadow: 0 0 1px rgba(0,0,0,0.95), 0 1px 2px rgba(0,0,0,0.8), 0 0 10px rgba(0,0,0,0.6);
}
.panel .body, .panel .lede { color: #efe8ff; }
.panel .micro, .panel .foot-fine { color: #d4c2ec; }

/* sub-blocks lose their boxes too — just a rail of light and a wash of shade */
/* cards removed — text and glyphs float free over the world, held legible
   only by their own text-shadow. No plate, no border, no brackets. */
.holo .tablet, .holo .rules li {
  position: relative;
  border: 0;
  background: none;
  box-shadow: none;
}
.holo .tablet::before, .holo .rules li::before,
.holo .tablet::after,  .holo .rules li::after {
  content: none;
}
.holo .tablet { padding-top: clamp(34px, 3vw, 44px); }

/* =========================================================================
   TYPE INSIDE PANELS
   ========================================================================= */

.eyebrow, .kicker {
  margin: 0 0 clamp(12px, 1.4vw, 20px);
  text-indent: 0.24em;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--vio-lt);
}
@media (max-width: 460px) {
  /* wide tracking is what pushed this to two lines; ease it rather than shrink */
  .eyebrow, .kicker { letter-spacing: 0.14em; text-indent: 0.14em; font-size: 10.5px; }
}

.title-hero {
  margin: 0 0 clamp(16px, 2vw, 26px);
  font-family: var(--font-display);
  font-stretch: expanded;
  font-size: var(--text-hero);
  font-weight: 700;
  line-height: 0.86;
  letter-spacing: -0.025em;
  color: var(--ink);
  overflow-wrap: break-word;
  word-break: break-word;
  /* hard offset shadow — PS1-era logo treatment, no blur */
  /* PS1 logo offset + a hair of RGB split, like a projected signal */
  text-shadow: -2px 0 0 rgba(126,214,255,0.30), 3px 3px 0 #8f2a0c, 6px 6px 0 rgba(0,0,0,0.62);
}
.title-hero span { color: var(--vio-lt); }

/* let the browser even out the line breaks — stops orphans like a lone "2026"
   or a split "Be / cool". Degrades to normal wrapping where unsupported. */
.title-hero, .title, .tablet h3, .eyebrow, .kicker, .micro, .foot-fine {
  text-wrap: balance;
}
.lede-short { display: none; }
.lede, .body, .tablet p, .rules .rule-t { text-wrap: pretty; }

.title {
  margin: 0 0 clamp(12px, 1.4vw, 18px);
  font-family: var(--font-display);
  font-stretch: expanded;
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.014em;
  color: var(--ink);
  text-shadow: -1.5px 0 0 rgba(126,214,255,0.28), 2px 2px 0 rgba(143,42,12,0.9), 0 2px 8px rgba(0,0,0,0.55);
}

.lede {
  margin: 0 0 clamp(20px, 2.4vw, 32px);
  font-size: var(--text-lg);
  line-height: 1.52;
  color: var(--ink-dim);
  max-width: 46ch;
  margin-inline: auto;
}
.panel-join .lede, .panel-foot .lede { margin-left: auto; margin-right: auto; }

.body {
  margin: 0 0 clamp(18px, 2vw, 28px);
  color: var(--ink-dim);
  max-width: 62ch;
  margin-inline: auto;
}

.micro {
  text-indent: 0.2em;
  margin: clamp(14px, 1.6vw, 20px) 0 0;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.05em;
  color: var(--ink-mute);
}

/* =========================================================================
   BUTTONS
   ========================================================================= */

.actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.panel-join .actions { justify-content: center; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 30px;
  font-family: var(--font-mono);
  font-size: clamp(14.5px, 0.3vw + 13.5px, 16px);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-decoration: none;
  position: relative;
  /* mitred gem-bar silhouette — no radius, no curve, just cut planes */
  border-radius: 3px;
  transition: transform 0.18s var(--ease), filter 0.18s var(--ease);
}
.btn-ico { width: 19px; height: 19px; flex: 0 0 auto; }

/* ---- hyper-realistic amethyst crystals --------------------------------
   Polished gem buttons: smooth rounded silhouette, layered specular lighting
   (top glow, pinpoint highlight, refractive sheen), a lit rim with inner
   depth, and a believable soft drop shadow + aura. No filters, no backdrop. */
.btn-primary, .btn-ghost {
  border: 0;
  border-radius: 13px;
  isolation: isolate;
}
.btn-primary::before {
  content: '';
  position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(7px 5px at 27% 23%, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0) 72%),
    linear-gradient(106deg, transparent 40%, rgba(255,255,255,0.58) 47%, transparent 55%);
  mix-blend-mode: screen;
}
.btn-primary::after {
  content: '';
  position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 0 2px 2px rgba(255,255,255,0.55),
    inset 0 -3px 6px rgba(255,255,255,0.2),
    inset 2px 0 3px rgba(255,255,255,0.22),
    inset -2px 0 3px rgba(0,0,0,0.2);
}
.btn-primary {
  color: #ffffff;
  background:
    radial-gradient(130% 70% at 22% 0%, rgba(255,255,255,0.42) 0%, rgba(255,255,255,0) 46%),
    radial-gradient(100% 90% at 50% 118%, rgba(18,6,36,0.6) 0%, rgba(18,6,36,0) 60%),
    linear-gradient(158deg, rgba(205,164,255,0.42) 0%, rgba(124,58,237,0.18) 50%, rgba(36,11,78,0.5) 100%),
    url("assets/crystal-amethyst.webp?v=88") center/cover no-repeat,
    linear-gradient(160deg, #9d63ff, #4c1d95);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.45),
    0 10px 20px -6px rgba(124,58,237,0.7),
    0 24px 44px -18px rgba(18,7,38,0.85),
    inset 0 3px 4px rgba(255,255,255,0.4),
    inset 0 -5px 12px rgba(26,9,54,0.8);
  text-shadow: 0 1px 2px rgba(26,9,54,0.9);
}
.btn-primary:hover {
  transform: translateY(-2px);
  filter: brightness(1.07);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.5),
    0 14px 26px -6px rgba(146,78,255,0.85),
    0 30px 50px -18px rgba(18,7,38,0.9),
    inset 0 3px 4px rgba(255,255,255,0.5),
    inset 0 -5px 12px rgba(26,9,54,0.7);
}
.btn-primary:active { transform: translateY(1px); filter: brightness(0.93); }

/* ---- ghost: a soft glassy amethyst (kept distinct from the crystal) --- */
.btn-ghost {
  color: #f6efff;
  background:
    radial-gradient(130% 70% at 22% 0%, rgba(255,255,255,0.32) 0%, rgba(255,255,255,0) 46%),
    linear-gradient(158deg, rgba(196,156,255,0.55) 0%, rgba(124,58,237,0.42) 50%, rgba(60,25,110,0.55) 100%);
  box-shadow:
    0 8px 18px -10px rgba(124,58,237,0.5),
    0 16px 30px -18px rgba(18,7,38,0.5),
    inset 0 1px 0 rgba(255,255,255,0.4),
    inset 0 -3px 8px rgba(38,16,72,0.45);
  text-shadow: 0 1px 2px rgba(28,10,56,0.7);
}
.panel .btn-ghost { text-shadow: 0 1px 2px rgba(28,10,56,0.8); }
.btn-ghost:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
  background:
    radial-gradient(130% 70% at 22% 0%, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 46%),
    linear-gradient(158deg, rgba(210,172,255,0.62) 0%, rgba(134,68,237,0.5) 50%, rgba(66,28,116,0.6) 100%);
}
.btn-ghost:active { transform: translateY(1px); filter: brightness(0.93); }

.btn-big {
  padding: 19px 32px;
  font-size: clamp(14px, 1vw + 11px, 17px);
  word-break: break-word;
}

.btn:focus-visible, .brand:focus-visible, .hud-nav a:focus-visible, .foot-nav a:focus-visible {
  outline: 3px solid var(--vio-lt);
  outline-offset: 3px;
}

/* =========================================================================
   READOUTS · TABLETS · RULES
   ========================================================================= */

.readouts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 1.6vw, 22px);
  margin: 0; padding: 0;
  list-style: none;
  padding-top: clamp(22px, 2.2vw, 30px);
  background: linear-gradient(90deg,
      rgba(169,112,255,0) 0%, rgba(169,112,255,0.42) 26%,
      rgba(169,112,255,0.42) 74%, rgba(169,112,255,0) 100%) no-repeat top center;
  background-size: 62% 1px;
}
.readouts li { display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 0; }
.readouts b {
  font-family: var(--font-display);
  font-stretch: semi-expanded;
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: 1;
  color: var(--vio);
  font-variant-numeric: tabular-nums lining-nums;
}
.readouts span {
  text-indent: 0.14em;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  line-height: 1.4;
}

.tablets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.5vw, 20px);
}
.tablet {
  position: relative;
  /* generous horizontal padding keeps copy clear of the corner brackets */
  padding: clamp(26px, 2.2vw, 32px) clamp(28px, 2.8vw, 38px) clamp(28px, 2.4vw, 34px);
  background: none;
  border: 0;
  min-width: 0;
}
.tablet-glyph {
  display: block;
  text-indent: 0.2em;
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 700; letter-spacing: 0.2em;
  color: var(--vio-lt);
  margin-bottom: 6px;
}
.tablet h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-stretch: semi-expanded;
  /* the expanded cut is wide, so the phone step is smaller than it looks —
     this is what keeps two-word titles on a single line at 390px */
  font-size: clamp(18.5px, 1.4vw + 13px, 24px);
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.18;
  color: var(--ink);
}
.tablet p {
  margin: 0 auto;
  /* a measure this short keeps every line clear of the chamfered corners */
  max-width: 31ch;
  font-size: clamp(16px, 0.4vw + 15px, 18px);
  line-height: 1.5;
  color: #efe8ff;
}

.rules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(10px, 1.4vw, 16px);
  margin: 0; padding: 0;
  list-style: none;
  counter-reset: r;
}
.rules li {
  position: relative;
  display: block;
  padding: clamp(50px, 4.2vw, 60px) clamp(28px, 2.8vw, 38px) clamp(30px, 2.6vw, 36px);
  background: none;
  font-size: clamp(16px, 0.4vw + 15px, 18px);
  line-height: 1.52;
  color: #efe8ff;
  min-width: 0;
}
.rules .rule-t { display: block; max-width: 34ch; margin-inline: auto; }
.rules li b { color: var(--ink); font-weight: 700; }
.rune {
  position: absolute;
  left: 50%; top: 18px;
  transform: translateX(-50%);
  width: 22px; height: 22px;
}

/* =========================================================================
   SCROLL CUE + FOOTER
   ========================================================================= */

.scroll-cue {
  position: absolute;
  left: 50%; bottom: clamp(22px, 4vh, 46px);
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 9px;
  font-family: var(--font-mono);
  font-size: 9px; font-weight: 700; letter-spacing: 0.28em;
  color: var(--ink-mute);
  text-shadow: 0 1px 4px rgba(0,0,0,0.9);
}
.beat-hero {
  position: relative;
  /* scene-first on every platform: anchor the hero panel to the bottom so
     the 3D village fills the upper viewport. Desktop/tablet keep side-by-side
     buttons; mobile compacts further (40px title, stacked) in the 760 block. */
  align-items: flex-end;
  padding-top: clamp(120px, 20vh, 200px);
  padding-bottom: clamp(40px, 8vh, 84px);
}

/* compact hero panel — keeps the village scene dominant on all viewports.
   Title is smaller than the old centered hero, short lede everywhere. */
.panel-hero .title-hero { font-size: clamp(44px, 5vw, 64px); margin-bottom: 12px; }
.panel-hero .lede { font-size: clamp(14px, 1.1vw, 16px); line-height: 1.45; margin-bottom: 18px; max-width: 42ch; }
.panel-hero .eyebrow { margin-bottom: 8px; }
.lede-full { display: none; }
.lede-short { display: block; }
.scroll-cue span {
  width: 2px; height: 30px;
  border-radius: var(--pill);
  background: linear-gradient(180deg, var(--vio-lt), transparent);
  animation: cue 2.2s ease-in-out infinite;
}
@keyframes cue { 50% { opacity: 0.2; transform: scaleY(0.55); } }
@media (prefers-reduced-motion: reduce) { .scroll-cue span { animation: none; } }
@media (max-height: 620px) { .scroll-cue { display: none; } }

.foot-top {
  display: flex; align-items: center; justify-content: center;
  gap: 14px;
  margin-bottom: 20px;
}
.foot-mark { width: 38px; height: 38px; }
.foot-top p { margin: 0; text-align: center; line-height: 1.4; }
.foot-top b { font-family: var(--font-display);
  font-stretch: semi-expanded; font-size: var(--text-lg); font-weight: 700; color: var(--ink); }
.foot-top span { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); }

.foot-nav {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;
  margin-bottom: 20px;
  padding-top: 22px;
  background: linear-gradient(90deg,
      rgba(169,112,255,0) 0%, rgba(169,112,255,0.36) 26%,
      rgba(169,112,255,0.36) 74%, rgba(169,112,255,0) 100%) no-repeat top center;
  background-size: 54% 1px;
}
.foot-nav a {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none; color: var(--ink-dim);
  padding: 9px 15px;
  border-radius: 3px;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.foot-nav a:hover { background: rgba(169, 112, 255, 0.18); color: var(--ink); }

.foot-fine {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.75;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  max-width: 56ch;
  margin-inline: auto;
  margin-inline: auto;
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */

/* very wide screens: let the plates grow a little, keep the world visible */
@media (min-width: 1700px) {
  .holo--hero { max-width: 780px; }
  .holo       { max-width: 720px; }
  .holo--grid { max-width: 1140px; }
  .holo--gate { max-width: 820px; }
}
@media (min-width: 2400px) {
  .holo--hero { max-width: 860px; }
  .holo       { max-width: 800px; }
  .holo--grid { max-width: 1280px; }
}

@media (max-width: 1080px) {
  .beat#ruins { justify-content: flex-start; }
}

@media (max-width: 900px) {
  .hud-nav a:not(.nav-cta) { display: none; }
  .hud-nav { justify-self: end; grid-area: 1 / 3; }
}

@media (max-width: 760px) {
  .hud { padding: 12px 14px; gap: 8px; }
  .beat {
    justify-content: center !important;
    padding: 108px 14px 96px;
    min-height: 100svh;
  }
  .holo, .holo--hero, .holo--grid, .holo--gate, .holo--foot { max-width: 100%; }
  /* narrow screens: widen the pool so the falloff clears the type instead of
     landing on it, and deepen it — mobile text sits right over the bright sun */
  .holo-shade {
    inset: -14% -13%;
    --pool:
      radial-gradient(38% 34% at 30% 32%, rgba(9,5,18,0.36) 0%, rgba(9,5,18,0) 100%),
      radial-gradient(38% 34% at 71% 67%, rgba(9,5,18,0.34) 0%, rgba(9,5,18,0) 100%),
      radial-gradient(50% 50% at 50% 47%,
        rgba(9,5,18,0.82) 0%, rgba(10,6,20,0.77) 52%,
        rgba(12,7,22,0.48) 72%, rgba(13,8,24,0.13) 87%, rgba(13,8,24,0) 100%);
  }
  .holo--gate .holo-shade, .holo--grid .holo-shade {
    --pool:
      radial-gradient(38% 34% at 29% 31%, rgba(9,5,18,0.40) 0%, rgba(9,5,18,0) 100%),
      radial-gradient(38% 34% at 72% 68%, rgba(9,5,18,0.38) 0%, rgba(9,5,18,0) 100%),
      radial-gradient(50% 50% at 50% 47%,
        rgba(9,5,18,0.91) 0%, rgba(10,6,20,0.86) 52%,
        rgba(12,7,22,0.57) 72%, rgba(13,8,24,0.16) 87%, rgba(13,8,24,0) 100%);
  }
  .brand-text i { display: none; }
  .eco-track { width: 64px; }
  .tablets { grid-template-columns: 1fr; }
  /* the labels are short enough to hold three columns at phone width, which
     reads better than a 2 + 1 orphan row */
  .readouts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .btn { width: 100%; justify-content: center; }
  .btn-big { padding: 18px 26px; font-size: 14.5px; }
  .actions { flex-direction: column; }
  .foot-top { flex-direction: column; text-align: center; gap: 10px; }
  .foot-top p { text-align: center; }
  .title-hero { text-shadow: 2px 2px 0 #8f2a0c, 4px 4px 0 rgba(0,0,0,0.55); }
}

/* Mobile hero starts directly below the fixed HUD so the primary content is
   visible immediately instead of requiring an initial scroll. */
@media (max-width: 760px) {
  .beat-hero {
    align-items: flex-start;
    justify-content: center !important;
    padding-top: clamp(190px, 24svh, 230px);
    padding-bottom: 48px;
  }
  .panel-hero { padding: 0; }
  .holo--hero .holo-shade {
    inset: -6% -13% -20% -13%;
    --pool:
      radial-gradient(48% 62% at 50% 80%,
        rgba(9,5,18,0.56) 0%, rgba(9,5,18,0.42) 58%, rgba(9,5,18,0) 100%);
  }
  .panel-hero .title-hero { font-size: 40px; margin-bottom: 10px; }
  .panel-hero .lede { font-size: 14px; line-height: 1.42; margin-bottom: 16px; max-width: 30ch; }
  .panel-hero .eyebrow { margin-bottom: 8px; }
  .panel-hero .actions { flex-direction: column; gap: 9px; }
  .panel-hero .actions .btn { width: 100%; }
  .panel-hero .btn-big { padding: 14px 18px; font-size: 14px; }
  .panel-hero .micro { margin-top: 12px; padding-right: 56px; }
  .scroll-cue { display: none; }
  .lede-full { display: none; }
  .lede-short { display: block; }
}

@media (max-width: 420px) {
  .brand-text b { font-size: 16px; }
  .brand-mark { width: 22px; height: 22px; }
}

/* =========================================================================
   NO-WEBGL FALLBACK — plates go opaque so the CSS sunset stays readable
   ========================================================================= */

.no-3d #grain { opacity: 0.28; }
/* no WebGL: nothing to see through, so the shade pool becomes a solid slab */
.no-3d .holo-shade {
  opacity: 1;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  -webkit-mask-image: none; mask-image: none;
  inset: 0;
  background: linear-gradient(168deg, #150e26 0%, #0a0714 100%);
  border: 1px solid rgba(169,112,255,0.26);
  border-radius: 4px;
}
.no-js .panel, .no-3d .panel {
  opacity: 1 !important;
  animation: none !important;
  -webkit-mask-image: none !important; mask-image: none !important;
}
.no-js .holo, .no-3d .holo { opacity: 1 !important; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  .holo { transition: opacity .01s linear; transform: none; }
  .holo.in { transform: none; }
}

/* Supplied doorway logo: isolated sizing; existing UI and world stay intact. */
img.site-logo { display: block; object-fit: contain; border-radius: 50%; }
.brand-mark.site-logo { width: 40px; height: 40px; }
.boot-mark.site-logo { width: 80px; height: 80px; animation: none; }
@media (max-width: 420px) {
  .brand .site-logo { width: 32px; height: 32px; }
}

/* Optional sound, separate from the world and its render loop. */
.hud-bl {
  grid-area: 3 / 1;
  align-self: end;
  justify-self: start;
  margin-bottom: env(safe-area-inset-bottom, 0px);
}
.sound-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid #76628d;
  border-radius: 4px;
  color: #e8dcfa;
  background: rgba(17, 10, 29, .94);
  font: 500 12px/1.2 var(--font-mono, monospace);
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color .2s, background .2s;
}
.sound-toggle:hover { border-color: #c29bff; background: #241437; }
.sound-toggle:focus-visible { outline: 2px solid #e0c8ff; outline-offset: 4px; }
.sound-toggle[aria-pressed="true"] { border-color: #bb8aff; color: #fff; }
.sound-bars { display: flex; align-items: center; gap: 3px; width: 17px; height: 17px; }
.sound-bars i { display: block; width: 2px; height: 3px; background: currentColor; transition: height .25s; }
.sound-toggle[aria-pressed="true"] .sound-bars i:nth-child(1) { height: 7px; }
.sound-toggle[aria-pressed="true"] .sound-bars i:nth-child(2) { height: 15px; }
.sound-toggle[aria-pressed="true"] .sound-bars i:nth-child(3) { height: 10px; }
.sound-toggle[aria-pressed="true"] .sound-bars i:nth-child(4) { height: 6px; }
.audio-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.music-credit { margin: 16px 0 0; color: #c2b4d2; font-size: 12px; line-height: 1.6; }
.music-credit a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }