/* ═══ DCC Chess — Homepage (separate from the game's style.css) ═══ */

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --ink: #07050b;
    --purple-soft: 160, 110, 240;      /* rgb channels */
    --gold: #d4af5a;
    --gold-bright: #f5dc92;
    --gold-deep: #9c7a2e;
    --ember: 255, 168, 72;             /* rgb channels */
    --text: #efe7d6;
    --text-soft: #bdb3a2;
    --text-dim: #7d7468;
    --font-display: 'Cinzel', 'Trajan Pro', Georgia, serif;
    --font-body: system-ui, -apple-system, 'Segoe UI', 'Inter', Roboto, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --gutter: clamp(16px, 4vw, 48px);
    --depth: 0;                         /* 0 at the top → 1 at the bottom (set by JS) */
}

html {
    background: var(--ink);
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    background: var(--ink);
    color: var(--text);
    font-family: var(--font-body);
    line-height: 1.5;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

.sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* ═══ FIXED LAYERS ═══ */

/* Base dungeon colour; the purple glow fades out as you descend */
.backdrop {
    position: fixed;
    inset: 0;
    z-index: 0;
    background: var(--ink);
    pointer-events: none;
}

.backdrop-glow {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 55% at 50% 0%, rgba(118, 54, 196, 0.32), transparent 70%),
        radial-gradient(ellipse 50% 45% at 92% 55%, rgba(170, 46, 140, 0.16), transparent 70%),
        radial-gradient(ellipse 50% 45% at 6% 75%, rgba(90, 50, 190, 0.16), transparent 70%);
    opacity: calc(1 - var(--depth) * 0.85);
}

/* Faint ASCII runes on the walls — they appear once you leave the hero */
#runes {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 0;
    display: block;
    pointer-events: none;
    opacity: calc(clamp(0, var(--depth) * 2.4, 1) * 0.5);
    -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, transparent 25%, #000 85%);
    mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, transparent 25%, #000 85%);
}

/* Static film grain over everything */
.grain {
    position: fixed;
    inset: 0;
    z-index: 30;
    pointer-events: none;
    opacity: 0.05;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

main {
    position: relative;
    z-index: 2;
    overflow-x: clip;               /* staircase offsets and slide-ins never cause sideways scroll */
}

/* ═══ TOP BAR ═══ */
.topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
    padding: env(safe-area-inset-top) max(var(--gutter), env(safe-area-inset-right)) 0 max(var(--gutter), env(safe-area-inset-left));
    box-sizing: content-box;
    border-bottom: 1px solid transparent;
    transition: background 400ms ease, border-color 400ms ease;
}

.is-scrolled .topbar {
    background: rgba(9, 6, 14, 0.74);
    border-bottom-color: rgba(212, 175, 90, 0.12);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
}

.brand {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 15px;
    letter-spacing: 0.2em;
    color: var(--gold-bright);
    text-decoration: none;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
}

.brand-mark {
    font-size: 9px;
    color: var(--gold);
    margin-right: 10px;
}

.brand-sub {
    font-weight: 600;
    color: var(--text);
    margin-left: 8px;
}

.topbar-cta {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 18px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--gold-bright);
    border: 1px solid rgba(212, 175, 90, 0.55);
    border-radius: 999px;
    background: rgba(20, 12, 28, 0.5);
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity 400ms ease, transform 400ms var(--ease-out), background 250ms ease, box-shadow 250ms ease;
}

.past-hero .topbar-cta {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.topbar-cta:hover,
.topbar-cta:focus-visible {
    background: rgba(212, 175, 90, 0.16);
    box-shadow: 0 0 18px rgba(var(--ember), 0.35);
}

/* ═══ HERO ═══ */
.hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    height: 100vh;
    height: 100svh;
    min-height: 340px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}

.hero-media {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--ink);
}

/* Moved by JS (scroll parallax + pointer drift). The small side overscan
   only needs to cover the ±14px pointer drift. */
.hero-parallax {
    position: absolute;
    inset: -8% -1.5%;
    will-change: transform;
}

/* Slow cinematic push-in */
.hero-art {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: 50% 48%;
    background-repeat: no-repeat;
    transform-origin: 50% 30%;
    filter: saturate(1.1) contrast(1.06);
    animation: push-in 40s ease-in-out infinite alternate;
    will-change: transform;
}

.hero-shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg,
            rgba(7, 5, 11, 0.6) 0%,
            rgba(7, 5, 11, 0) 14%,
            rgba(7, 5, 11, 0) 30%,
            rgba(7, 5, 11, 0.55) 46%,
            rgba(7, 5, 11, 0.9) 64%,
            rgba(7, 5, 11, 0.97) 82%,
            var(--ink) 100%),
        radial-gradient(ellipse 110% 85% at 50% 35%, transparent 45%, rgba(7, 5, 11, 0.75) 100%),
        linear-gradient(rgba(64, 22, 110, 0.22), rgba(64, 22, 110, 0.22));
}

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

.hero-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 1100px;
    padding: 0 var(--gutter) clamp(92px, 15vh, 150px);
    text-align: center;
    will-change: transform, opacity;
}

/* A pool of shadow behind the title, so the art's own lettering stays out of the way */
.hero-content::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 46%;
    z-index: -1;
    width: min(1100px, 130%);
    height: 120%;
    translate: -50% -50%;
    background: radial-gradient(closest-side, rgba(7, 5, 11, 0.82), rgba(7, 5, 11, 0.55) 55%, rgba(7, 5, 11, 0) 100%);
    pointer-events: none;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 16px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--gold-bright);
    border: 1px solid rgba(212, 175, 90, 0.35);
    border-radius: 999px;
    background: rgba(12, 8, 18, 0.55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    animation: rise 1s 200ms var(--ease-out) both;
}

.eyebrow-dot {
    position: relative;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gold-bright);
    box-shadow: 0 0 10px rgba(var(--ember), 0.9);
}

.eyebrow-dot::after {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 1px solid rgba(var(--ember), 0.8);
    animation: ping 2.2s ease-out infinite;
}

.title {
    margin-top: clamp(14px, 2.4vh, 26px);
    font-family: var(--font-display);
    font-weight: 900;
    line-height: 0.9;
    font-size: clamp(3.2rem, min(14vw, 17vh), 10.5rem);
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.title span {
    display: block;
}

.title-top {
    font-size: 0.33em;
    font-weight: 800;
    letter-spacing: 0.22em;
    margin-right: -0.22em;
    color: var(--text);
    text-shadow: 0 4px 24px rgba(0, 0, 0, 0.9);
    animation: rise 1s 320ms var(--ease-out) both;
}

.title-main {
    margin-top: 0.06em;
    background: linear-gradient(180deg, #fff2c4 0%, #f0cf7c 32%, #c99a3e 62%, #7d5a1c 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 6px 28px rgba(0, 0, 0, 0.85)) drop-shadow(0 0 36px rgba(var(--ember), 0.28));
    animation: rise 1.1s 420ms var(--ease-out) both;
}

.tagline {
    margin-top: clamp(12px, 2vh, 20px);
    max-width: 48ch;
    font-size: clamp(15px, 1.7vw, 20px);
    font-weight: 500;
    letter-spacing: 0.03em;
    color: var(--text-soft);
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.9);
    text-wrap: balance;
    animation: rise 1s 560ms var(--ease-out) both;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px 28px;
    margin-top: clamp(22px, 4vh, 40px);
    animation: rise 1s 700ms var(--ease-out) both;
}

/* ── Main call to action ── */
.cta {
    position: relative;
    display: inline-flex;
    text-decoration: none;
    border-radius: 6px;
    transition: transform 300ms var(--ease-out);
}

.cta-glow {
    position: absolute;
    inset: -14px -18px;
    z-index: -1;
    border-radius: 30px;
    background: radial-gradient(closest-side, rgba(var(--ember), 0.65), rgba(var(--ember), 0) 100%);
    filter: blur(10px);
    animation: pulse 2.6s ease-in-out infinite;
}

.cta-face {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 19px 34px 19px 38px;
    border-radius: inherit;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 17px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #1d1205;
    background: linear-gradient(180deg, #fbe6a4 0%, #e3bd62 45%, #b88a2f 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 250, 225, 0.9),
        inset 0 -2px 0 rgba(90, 58, 10, 0.45),
        0 0 0 1px rgba(255, 220, 140, 0.5),
        0 14px 34px -8px rgba(0, 0, 0, 0.8);
}

/* Light sweep across the button */
.cta-face::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -60%;
    width: 50%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    transform: skewX(-20deg) translateX(0);
    animation: sweep 5s 1.6s ease-in-out infinite;
}

.cta-arrow {
    width: 20px;
    height: 20px;
    transition: transform 300ms var(--ease-out);
}

.cta:hover,
.cta:focus-visible {
    transform: translateY(-2px) scale(1.02);
}

.cta:hover .cta-glow,
.cta:focus-visible .cta-glow {
    animation-duration: 1.3s;
}

.cta:hover .cta-arrow,
.cta:focus-visible .cta-arrow {
    transform: translateX(4px);
}

.cta:focus-visible {
    outline: 2px solid var(--gold-bright);
    outline-offset: 6px;
}

.cta:active {
    transform: translateY(1px) scale(0.99);
}

.ghost-link {
    position: relative;
    padding: 10px 2px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--text-soft);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
    transition: color 250ms ease;
}

.ghost-link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 4px;
    height: 1px;
    background: currentColor;
    transform: scaleX(0.35);
    transform-origin: left;
    opacity: 0.6;
    transition: transform 350ms var(--ease-out);
}

.ghost-link:hover,
.ghost-link:focus-visible {
    color: var(--gold-bright);
}

.ghost-link:hover::after,
.ghost-link:focus-visible::after {
    transform: scaleX(1);
}

/* ── Scroll cue ── */
.scroll-cue {
    position: absolute;
    left: 50%;
    bottom: calc(18px + env(safe-area-inset-bottom));
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    translate: -50% 0;
    text-decoration: none;
    color: var(--text-dim);
    transition: opacity 400ms ease;
    animation: fade-in 1s 1.2s both;
}

.is-scrolled .scroll-cue {
    opacity: 0;
    pointer-events: none;
}

.scroll-cue-track {
    position: relative;
    width: 1px;
    height: 42px;
    background: linear-gradient(rgba(212, 175, 90, 0), rgba(212, 175, 90, 0.5));
    overflow: hidden;
}

.scroll-cue-dot {
    position: absolute;
    left: -1px;
    top: 0;
    width: 3px;
    height: 12px;
    border-radius: 2px;
    background: var(--gold-bright);
    box-shadow: 0 0 8px rgba(var(--ember), 0.9);
    animation: drop 2s cubic-bezier(.6, 0, .4, 1) infinite;
}

.scroll-cue-text {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.34em;
    margin-right: -0.34em;
    text-transform: uppercase;
}

/* ═══ THE DESCENT ═══ */
.descent {
    position: relative;
    max-width: 1080px;
    margin: 0 auto;
    padding: clamp(72px, 14vh, 150px) max(var(--gutter), env(safe-area-inset-right)) clamp(40px, 8vh, 90px) max(var(--gutter), env(safe-area-inset-left));
    scroll-margin-top: 40px;
}

.descent-head {
    text-align: center;
}

.section-kicker {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--gold);
}

.section-kicker::before,
.section-kicker::after {
    content: '';
    width: 36px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold-deep));
}

.section-kicker::after {
    transform: scaleX(-1);
}

.descent-title {
    margin-top: 16px;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(2rem, 5.4vw, 4.25rem);
    line-height: 1.02;
    letter-spacing: 0.01em;
    background: linear-gradient(180deg, #fff6e2 10%, #cbbd9f 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-wrap: balance;
}

.descent-sub {
    margin-top: 14px;
    font-size: clamp(15px, 1.6vw, 18px);
    color: var(--text-soft);
    text-wrap: balance;
}

/* ── Floor list: a staircase going down ── */
.floor-list {
    --step: 24px;
    list-style: none;
    display: grid;
    gap: clamp(14px, 2vw, 22px);
    margin-top: clamp(40px, 7vh, 72px);
}

.floor {
    width: calc(100% - 5 * var(--step));
    margin-inline: auto;
    translate: calc((var(--i) - 2.5) * var(--step)) 0;
    scroll-margin-top: 120px;
}

/* Scroll reveal (only when JS runs, so nothing stays hidden without it) */
.js .reveal {
    opacity: 0;
    transform: translate3d(0, 36px, 0);
    transition: opacity 900ms var(--ease-out), transform 1000ms var(--ease-out);
}

.js .floor.reveal:nth-child(odd) {
    transform: translate3d(-48px, 24px, 0);
}

.js .floor.reveal:nth-child(even) {
    transform: translate3d(48px, 24px, 0);
}

.js .reveal.is-visible,
.js .floor.reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* ── Floor card ── */
@property --trace {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

.floor-card {
    --mx: 14%;
    --my: 50%;
    --edge: 212, 175, 90;              /* border/glow colour, rgb channels */
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: clamp(16px, 3vw, 36px);
    padding: clamp(20px, 2.8vw, 32px) clamp(20px, 3vw, 38px);
    border-radius: 16px;
    text-decoration: none;
    color: var(--text);
    background:
        linear-gradient(135deg, rgba(44, 26, 66, 0.78) 0%, rgba(18, 12, 27, 0.92) 55%, rgba(10, 8, 15, 0.95) 100%);
    border: 1px solid rgba(var(--edge), 0.16);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 2px 0 rgba(0, 0, 0, 0.5),
        0 26px 50px -26px rgba(0, 0, 0, 0.95);
    transition:
        transform 500ms var(--ease-out),
        box-shadow 500ms var(--ease-out),
        border-color 400ms ease;
    -webkit-tap-highlight-color: transparent;
}

/* Gold glow that traces around the border on hover */
.floor-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    padding: 1.5px;
    border-radius: inherit;
    background: conic-gradient(from var(--trace),
        transparent 0deg 200deg,
        rgba(212, 175, 90, 0.25) 250deg,
        rgba(212, 175, 90, 1) 310deg,
        #fff4cc 335deg,
        rgba(212, 175, 90, 1) 348deg,
        transparent 360deg);
    -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 exclude, linear-gradient(#000 0 0);
    opacity: 0;
    transition: opacity 400ms ease;
    pointer-events: none;
}

/* Torchlight: always a faint glow, much stronger on hover */
.card-torch {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(460px circle at var(--mx) var(--my),
        rgba(var(--ember), 0.2),
        rgba(var(--edge), 0.06) 40%,
        transparent 70%);
    opacity: 0.35;
    transition: opacity 450ms ease;
    pointer-events: none;
}

.card-num {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(3.4rem, 7.5vw, 6.25rem);
    line-height: 0.8;
    letter-spacing: -0.02em;
    color: transparent;
    -webkit-text-stroke: 1.2px rgba(var(--edge), 0.55);
    transition: color 450ms ease, text-shadow 450ms ease, -webkit-text-stroke-color 450ms ease;
}

.card-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.card-kicker {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--gold-deep);
}

.card-name {
    margin-top: 4px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(1.3rem, 2.6vw, 1.95rem);
    line-height: 1.12;
    letter-spacing: 0.01em;
    color: var(--text);
    transition: color 350ms ease;
}

.card-teaser {
    margin-top: 6px;
    font-size: clamp(14px, 1.4vw, 16px);
    color: var(--text-soft);
}

.card-status {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* ── Open floor ── */
.floor-card.is-open {
    border-color: rgba(var(--edge), 0.42);
    background:
        radial-gradient(ellipse 60% 120% at 0% 50%, rgba(var(--ember), 0.12), transparent 70%),
        linear-gradient(135deg, rgba(58, 34, 70, 0.85) 0%, rgba(22, 14, 28, 0.94) 55%, rgba(12, 9, 16, 0.96) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 240, 200, 0.08),
        0 2px 0 rgba(0, 0, 0, 0.5),
        0 26px 50px -26px rgba(0, 0, 0, 0.95),
        0 0 40px -10px rgba(var(--ember), 0.25);
}

.floor-card.is-open .card-torch {
    opacity: 0.6;
}

.floor-card.is-open .card-num {
    color: var(--gold);
    -webkit-text-stroke-color: transparent;
    text-shadow: 0 0 30px rgba(var(--ember), 0.35);
}

.floor-card.is-open .card-kicker {
    color: var(--gold);
}

.chip-open {
    color: var(--gold-bright);
    background: rgba(212, 175, 90, 0.12);
    border: 1px solid rgba(212, 175, 90, 0.45);
}

.chip-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold-bright);
    box-shadow: 0 0 8px rgba(var(--ember), 1);
    animation: blink 1.8s ease-in-out infinite;
}

.card-enter {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    color: var(--gold-bright);
    border: 1px solid rgba(212, 175, 90, 0.55);
    transition: background 350ms ease, color 350ms ease, transform 450ms var(--ease-out), box-shadow 350ms ease;
}

.card-enter svg {
    width: 20px;
    height: 20px;
}

/* ── Sealed floors: a magically sealed stairwell door ── */
.floor-card.is-sealed {
    --edge: 186, 150, 236;
    background:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 38px),
        linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 30%),
        linear-gradient(135deg, rgba(36, 24, 56, 0.82) 0%, rgba(15, 11, 23, 0.94) 55%, rgba(9, 7, 13, 0.96) 100%);
}

.floor-card.is-sealed .card-name {
    color: #d6cdbd;
}

.floor-card.is-sealed .card-kicker {
    color: rgba(var(--purple-soft), 0.75);
}

.floor-card.is-sealed .card-teaser {
    color: #978e82;
}

/* A shimmer passes over the seal now and then */
.floor-card.is-sealed::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(105deg,
        transparent 30%,
        rgba(var(--purple-soft), 0.07) 42%,
        rgba(255, 240, 210, 0.09) 50%,
        rgba(var(--purple-soft), 0.07) 58%,
        transparent 70%);
    transform: translateX(-110%);
    animation: shimmer 7.5s ease-in-out infinite;
    animation-delay: calc(var(--i) * 1.1s);
    pointer-events: none;
}

.chip-sealed {
    color: #cdb8f2;
    background: rgba(var(--purple-soft), 0.08);
    border: 1px solid rgba(var(--purple-soft), 0.32);
}

.chip-lock {
    width: 11px;
    height: 11px;
}

.seal-sigil {
    width: 48px;
    height: 48px;
    color: rgba(var(--purple-soft), 0.55);
    filter: drop-shadow(0 0 8px rgba(var(--purple-soft), 0.4));
    animation: seal-glow 4s ease-in-out infinite;
    transition: color 400ms ease;
}

.seal-sigil .seal-ring {
    transform-origin: 24px 24px;
    animation: spin 26s linear infinite;
}

/* ── Hover / focus ── */
.floor-card:focus-visible {
    outline: 2px solid var(--gold-bright);
    outline-offset: 4px;
}

.floor-card:hover,
.floor-card:focus-visible {
    transform: translateY(-6px);
    border-color: rgba(var(--edge), 0.35);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        0 2px 0 rgba(0, 0, 0, 0.5),
        0 40px 70px -28px rgba(0, 0, 0, 1),
        0 0 46px -6px rgba(var(--edge), 0.28);
}

.floor-card:hover::before,
.floor-card:focus-visible::before {
    opacity: 1;
    animation: trace 2.6s linear infinite;
}

.floor-card:hover .card-torch,
.floor-card:focus-visible .card-torch {
    opacity: 1;
    animation: flicker 2.4s steps(1, end) infinite;
}

.floor-card:hover .card-num,
.floor-card:focus-visible .card-num {
    color: rgba(var(--edge), 0.95);
    -webkit-text-stroke-color: transparent;
    text-shadow: 0 0 34px rgba(var(--ember), 0.55);
}

.floor-card.is-sealed:hover .card-num,
.floor-card.is-sealed:focus-visible .card-num {
    color: rgba(var(--edge), 0.6);
    text-shadow: 0 0 30px rgba(var(--purple-soft), 0.55);
}

.floor-card:hover .card-name,
.floor-card:focus-visible .card-name {
    color: #fff8e8;
}

.floor-card:hover .card-enter,
.floor-card:focus-visible .card-enter {
    background: var(--gold);
    color: #1d1205;
    transform: translateX(4px);
    box-shadow: 0 0 22px rgba(var(--ember), 0.55);
}

.floor-card:hover .seal-sigil,
.floor-card:focus-visible .seal-sigil {
    color: rgba(var(--purple-soft), 0.9);
}

.floor-card:active {
    transform: translateY(-2px);
}

.floor-card.is-rattling {
    animation: rattle 420ms ease;
}

.floor-card.is-rattling .chip-sealed {
    color: #ffb59a;
    border-color: rgba(255, 140, 100, 0.5);
}

/* ═══ DEPTH GAUGE (wide screens only) ═══ */
.depth-gauge {
    position: fixed;
    right: clamp(14px, 2vw, 30px);
    top: 50%;
    z-index: 15;
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    translate: 0 -50%;
    opacity: 0;
    transition: opacity 500ms ease;
    pointer-events: none;
}

.depth-gauge::before {
    content: '';
    position: absolute;
    top: 26px;
    bottom: 12px;
    left: 50%;
    width: 1px;
    background: linear-gradient(rgba(212, 175, 90, 0.4), rgba(212, 175, 90, 0.05));
    z-index: -1;
}

.past-hero .depth-gauge {
    opacity: 1;
    pointer-events: auto;
}

.gauge-label {
    margin-bottom: 6px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.3em;
    margin-right: -0.3em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.gauge-tick {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 12px;
    text-decoration: none;
    color: var(--text-dim);
    background: var(--ink);
    border: 1px solid rgba(212, 175, 90, 0.16);
    transition: color 300ms ease, border-color 300ms ease, box-shadow 300ms ease, transform 300ms var(--ease-out);
}

.gauge-tick:hover,
.gauge-tick:focus-visible {
    color: var(--text);
    border-color: rgba(212, 175, 90, 0.45);
}

.gauge-tick.is-active {
    color: var(--gold-bright);
    border-color: var(--gold);
    box-shadow: 0 0 14px rgba(var(--ember), 0.45);
    transform: scale(1.15);
}

@media (min-width: 1180px) {
    .depth-gauge { display: flex; }
}

/* ═══ FOOTER ═══ */
.site-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: clamp(40px, 8vh, 80px) var(--gutter) calc(28px + env(safe-area-inset-bottom));
    text-align: center;
    font-size: 12px;
    color: var(--text-dim);
}

.footer-rule {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
    font-size: 8px;
    color: var(--gold-deep);
}

.footer-rule::before,
.footer-rule::after {
    content: '';
    width: 64px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 90, 0.45));
}

.footer-rule::after {
    transform: scaleX(-1);
}

.site-version {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--gold-deep);
}

/* ═══ SUBPAGES (Contact, Where We Are Now, Roadmap, Crowdfunding Plan) ═══ */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Subpages have no hero to scroll past, so the top bar's Play button shows right away */
.subpage .topbar-cta {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

/* ── Page header: the hero art, darkened, behind the page title ── */
.page-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-height: clamp(320px, 48svh, 480px);
    padding: calc(64px + 32px) var(--gutter) clamp(32px, 6vh, 60px);
    text-align: center;
}

.page-hero-art {
    position: absolute;
    inset: -3%;
    z-index: -2;
    background-size: cover;
    background-position: 50% 32%;
    transform-origin: 50% 35%;
    filter: saturate(1.1);
    -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 97%);
    mask-image: linear-gradient(180deg, #000 70%, transparent 97%);
    animation: push-in 40s ease-in-out infinite alternate;
}

.page-hero-shade {
    position: absolute;
    inset: 0 0 -2px;
    z-index: -1;
    background:
        linear-gradient(180deg, rgba(7, 5, 11, 0.78) 0%, rgba(7, 5, 11, 0.5) 35%, rgba(7, 5, 11, 0.82) 72%, var(--ink) 100%),
        linear-gradient(rgba(64, 22, 110, 0.25), rgba(64, 22, 110, 0.25));
}

.page-hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.back-link {
    margin-bottom: clamp(18px, 4vh, 36px);
    padding: 8px 4px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--text-soft);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
    transition: color 250ms ease;
}

.back-link:hover,
.back-link:focus-visible {
    color: var(--gold-bright);
}

.page-title {
    margin-top: 10px;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(3rem, 9vw, 6rem);
    line-height: 0.95;
    text-transform: uppercase;
    background: linear-gradient(180deg, #fff2c4 0%, #f0cf7c 32%, #c99a3e 62%, #7d5a1c 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 6px 28px rgba(0, 0, 0, 0.85)) drop-shadow(0 0 36px rgba(var(--ember), 0.28));
}

.page-lede {
    margin-top: 12px;
    font-size: clamp(15px, 1.7vw, 19px);
    color: var(--text-soft);
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.9);
}

/* ── Contact panels ── */
.contact {
    max-width: 1080px;
    margin: 0 auto;
    padding: clamp(8px, 2vh, 24px) max(var(--gutter), env(safe-area-inset-right)) 0 max(var(--gutter), env(safe-area-inset-left));
}

.contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: clamp(16px, 2.4vw, 28px);
    align-items: start;
}

.contact-panel {
    position: relative;
    padding: clamp(22px, 3vw, 36px);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(44, 26, 66, 0.8) 0%, rgba(18, 12, 27, 0.92) 55%, rgba(10, 8, 15, 0.95) 100%);
    border: 1px solid rgba(212, 175, 90, 0.18);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 2px 0 rgba(0, 0, 0, 0.5),
        0 26px 50px -26px rgba(0, 0, 0, 0.95);
}

.contact-panel[hidden] {
    display: none;
}

.contact-lead {
    font-size: clamp(17px, 1.75vw, 20px);
    line-height: 1.55;
    color: var(--text);
}

.contact-block {
    margin-top: clamp(22px, 3vh, 30px);
    padding-top: clamp(20px, 3vh, 26px);
    border-top: 1px solid rgba(212, 175, 90, 0.12);
}

.contact-label,
.field-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--gold);
}

.contact-text {
    margin-top: 8px;
    font-size: 15px;
    line-height: 1.55;
    color: var(--text-soft);
}

.contact-email {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    max-width: 100%;
    margin-top: 10px;
    font-size: clamp(17px, 1.8vw, 20px);
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--gold-bright);
    text-decoration: none;
    overflow-wrap: break-word;
    transition: color 250ms ease, text-shadow 250ms ease;
}

.contact-email span {
    background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
    transition: background-size 350ms var(--ease-out);
}

.contact-email:hover,
.contact-email:focus-visible {
    color: #fff1c2;
    text-shadow: 0 0 18px rgba(var(--ember), 0.45);
}

.contact-email:hover span,
.contact-email:focus-visible span {
    background-size: 100% 1px;
}

.contact-email-icon {
    flex: none;
    width: 22px;
    height: 22px;
    color: var(--gold);
}

.cta-sm {
    margin-top: 16px;
}

.cta-sm .cta-face {
    padding: 15px 24px 15px 26px;
    font-size: 14px;
}

/* ── Form ── */
.form-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(1.3rem, 2.4vw, 1.75rem);
    line-height: 1.15;
    color: var(--text);
}

.field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 18px;
}

.field input,
.field textarea {
    width: 100%;
    padding: 13px 14px;
    font: inherit;
    font-size: 16px;                    /* 16px stops iOS zooming into the field */
    color: var(--text);
    background: rgba(5, 4, 8, 0.6);
    border: 1px solid rgba(212, 175, 90, 0.22);
    border-radius: 10px;
    transition: border-color 200ms ease, box-shadow 200ms ease, background 200ms ease;
}

.field textarea {
    min-height: 150px;
    resize: vertical;
}

.field input:hover,
.field textarea:hover {
    border-color: rgba(212, 175, 90, 0.38);
}

.field input:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--gold);
    background: rgba(5, 4, 8, 0.8);
    box-shadow: 0 0 0 3px rgba(212, 175, 90, 0.18), 0 0 18px rgba(var(--ember), 0.12);
}

.field-trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

button.cta {
    border: 0;
    padding: 0;
    background: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.form-submit {
    margin-top: 24px;
}

.form-submit:disabled {
    cursor: progress;
    opacity: 0.7;
    transform: none;
}

.form-status {
    min-height: 1.5em;
    margin-top: 14px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-soft);
}

.form-status.is-error {
    color: #ffb59a;
}

.form-success {
    text-align: center;
}

.form-success:focus {
    outline: none;
}

.success-mark {
    display: block;
    margin-bottom: 12px;
    font-size: 22px;
    color: var(--gold-bright);
    text-shadow: 0 0 18px rgba(var(--ember), 0.8);
}

button.ghost-link {
    border: 0;
    background: none;
    font-family: inherit;
    cursor: pointer;
}

.send-another {
    margin-top: 14px;
}

@media (max-width: 760px) {
    .contact-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 600px) {
    .page-hero {
        min-height: clamp(260px, 38svh, 340px);
        padding-top: calc(56px + 24px);
    }

    .cta-sm,
    .form-submit {
        width: 100%;
    }

    .cta-sm .cta-face,
    .form-submit .cta-face {
        width: 100%;
        justify-content: center;
    }
}

@media (orientation: landscape) and (max-height: 520px) {
    .page-hero {
        min-height: 0;
        padding-top: calc(50px + 20px);
        padding-bottom: 24px;
    }

    .back-link {
        margin-bottom: 10px;
    }

    .page-title {
        font-size: clamp(2.4rem, 14vh, 3.6rem);
    }
}

/* ── "Where We Are Now" page ── */
.page-title--long {
    font-size: clamp(2.3rem, 6.6vw, 4.75rem);
    line-height: 1.02;
    text-wrap: balance;
}

.page-lede--wide {
    max-width: 44ch;
    line-height: 1.5;
    text-wrap: balance;
}

.status {
    max-width: 1080px;
    margin: 0 auto;
    padding: clamp(8px, 2vh, 24px) max(var(--gutter), env(safe-area-inset-right)) 0 max(var(--gutter), env(safe-area-inset-left));
}

/* Stat sheet: a crawler stat screen from the System */
.stat-sheet {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid rgba(212, 175, 90, 0.32);
    background:
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 4px),
        linear-gradient(160deg, rgba(48, 28, 72, 0.88) 0%, rgba(16, 11, 25, 0.95) 60%, rgba(10, 8, 15, 0.97) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 240, 200, 0.07),
        0 0 0 4px rgba(212, 175, 90, 0.05),
        0 30px 60px -28px rgba(0, 0, 0, 1),
        0 0 50px -14px rgba(var(--ember), 0.22);
}

.sheet-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 16px;
    padding: 12px clamp(18px, 3vw, 30px);
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    background: linear-gradient(90deg, rgba(212, 175, 90, 0.16), rgba(212, 175, 90, 0.04));
    border-bottom: 1px solid rgba(212, 175, 90, 0.25);
}

.sheet-title {
    font: inherit;
    font-weight: 700;
    color: var(--gold-bright);
}

.sheet-meta {
    color: var(--text-dim);
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.stat {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: clamp(20px, 3vw, 32px) clamp(18px, 3vw, 30px);
    border-right: 1px dashed rgba(212, 175, 90, 0.14);
    border-bottom: 1px dashed rgba(212, 175, 90, 0.14);
}

.stat:nth-child(3n) {
    border-right: 0;
}

.stat:nth-last-child(-n + 3) {
    border-bottom: 0;
}

.stat-code {
    align-self: flex-start;
    padding: 3px 8px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: var(--gold);
    border: 1px solid rgba(212, 175, 90, 0.35);
    border-radius: 4px;
    background: rgba(212, 175, 90, 0.07);
}

.stat-value {
    margin-top: 4px;
}

.stat-num {
    display: block;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(2.6rem, 5.4vw, 4rem);
    line-height: 1;
    font-variant-numeric: tabular-nums lining-nums;
    background: linear-gradient(180deg, #fff2c4 0%, #f0cf7c 40%, #c99a3e 75%, #8d6a26 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 22px rgba(var(--ember), 0.22));
    transition: filter 600ms ease;
}

.stat.is-done .stat-num {
    animation: stat-flash 900ms ease-out;
}

.stat-label {
    font-size: 14px;
    line-height: 1.4;
    color: var(--text-soft);
}

/* Section headings */
.status-section {
    margin-top: clamp(56px, 9vh, 96px);
}

.status-head {
    text-align: center;
}

.status-title {
    margin-top: 12px;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(1.8rem, 4vw, 3rem);
    line-height: 1.05;
    background: linear-gradient(180deg, #fff6e2 10%, #cbbd9f 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* What's playable now */
.playable-grid {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: clamp(26px, 4vh, 40px);
}

.playable {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    font-size: 15.5px;
    line-height: 1.45;
    color: var(--text);
    border-radius: 12px;
    border: 1px solid rgba(212, 175, 90, 0.14);
    background: linear-gradient(135deg, rgba(40, 24, 60, 0.7), rgba(14, 10, 21, 0.9));
    transition: border-color 300ms ease, box-shadow 300ms ease;
}

.js .playable.reveal {
    transition-delay: calc(var(--i) * 45ms);
}

.playable:hover {
    border-color: rgba(212, 175, 90, 0.34);
    box-shadow: 0 0 26px -8px rgba(var(--ember), 0.3);
}

.playable-check {
    flex: none;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: #1d1205;
    background: linear-gradient(180deg, #f6dd94, #c99a3e);
    box-shadow: 0 0 14px rgba(var(--ember), 0.35);
}

.playable-check svg {
    width: 16px;
    height: 16px;
}

/* Behind the scenes */
.behind-list {
    list-style: none;
    position: relative;
    max-width: 760px;
    margin: clamp(26px, 4vh, 40px) auto 0;
}

.behind-list::before {
    content: '';
    position: absolute;
    left: 11px;
    top: 18px;
    bottom: 18px;
    width: 1px;
    background: linear-gradient(rgba(212, 175, 90, 0.45), rgba(var(--purple-soft), 0.3));
}

.behind {
    position: relative;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    padding: 14px 0;
}

.js .behind.reveal {
    transition-delay: calc(var(--i) * 70ms);
}

.behind-marker {
    justify-self: center;
    width: 12px;
    height: 12px;
    rotate: 45deg;
    background: var(--gold);
    box-shadow: 0 0 12px rgba(var(--ember), 0.6);
}

.behind-text {
    font-size: 16px;
    line-height: 1.45;
    color: var(--text);
}

.behind-state {
    padding: 4px 10px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    white-space: nowrap;
    border-radius: 999px;
    color: var(--gold-bright);
    border: 1px solid rgba(212, 175, 90, 0.4);
    background: rgba(212, 175, 90, 0.1);
}

.behind.is-progress .behind-marker,
.behind.is-ongoing .behind-marker {
    width: 14px;
    height: 14px;
    rotate: 0deg;
    border-radius: 50%;
    background: transparent;
    border: 2px solid #b48cf0;
    box-shadow: 0 0 12px rgba(var(--purple-soft), 0.6);
    animation: blink 2.2s ease-in-out infinite;
}

.behind.is-progress .behind-state,
.behind.is-ongoing .behind-state {
    color: #cdb8f2;
    border-color: rgba(var(--purple-soft), 0.38);
    background: rgba(var(--purple-soft), 0.08);
}

/* Version + calls to action */
.version-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px 32px;
    margin-top: clamp(56px, 9vh, 96px);
    padding: clamp(22px, 3vw, 34px) clamp(22px, 3.4vw, 40px);
    border-radius: 16px;
    border: 1px solid rgba(212, 175, 90, 0.22);
    background:
        radial-gradient(ellipse 60% 140% at 0% 50%, rgba(var(--ember), 0.1), transparent 70%),
        linear-gradient(135deg, rgba(48, 28, 66, 0.82), rgba(14, 10, 20, 0.94));
    box-shadow: inset 0 1px 0 rgba(255, 240, 200, 0.06), 0 26px 50px -26px rgba(0, 0, 0, 0.95);
}

.version-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.version-number {
    font-family: var(--font-mono);
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 700;
    line-height: 1;
    color: var(--gold-bright);
    text-shadow: 0 0 24px rgba(var(--ember), 0.4);
}

.version-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 18px;
}

.version-actions .cta-sm {
    margin-top: 0;
}

/* Secondary call to action: outlined instead of solid gold */
.cta-outline .cta-face {
    color: var(--gold-bright);
    background: rgba(20, 12, 28, 0.6);
    box-shadow:
        inset 0 0 0 1px rgba(212, 175, 90, 0.6),
        0 14px 34px -12px rgba(0, 0, 0, 0.8);
}

.cta-outline .cta-face::after {
    display: none;
}

.cta-outline:hover .cta-face,
.cta-outline:focus-visible .cta-face {
    background: rgba(212, 175, 90, 0.14);
    box-shadow:
        inset 0 0 0 1px var(--gold),
        0 0 24px rgba(var(--ember), 0.3);
}

@keyframes stat-flash {
    0%   { filter: drop-shadow(0 0 22px rgba(var(--ember), 0.22)); }
    35%  { filter: drop-shadow(0 0 30px rgba(var(--ember), 0.85)); }
    100% { filter: drop-shadow(0 0 22px rgba(var(--ember), 0.22)); }
}

@media (max-width: 760px) {
    .playable-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .version-panel {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .version-info {
        align-items: center;
    }

    .version-actions {
        flex-direction: column;
    }

    .version-actions .cta-sm,
    .version-actions .cta-face {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 600px) {
    .stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .stat:nth-child(3n) {
        border-right: 1px dashed rgba(212, 175, 90, 0.14);
    }

    .stat:nth-child(2n) {
        border-right: 0;
    }

    .stat:nth-last-child(-n + 3) {
        border-bottom: 1px dashed rgba(212, 175, 90, 0.14);
    }

    .stat:nth-last-child(-n + 2) {
        border-bottom: 0;
    }

    .stat-num {
        font-size: 2.5rem;
    }

    .stat-label {
        font-size: 13px;
    }

    .behind {
        grid-template-columns: 24px minmax(0, 1fr);
        row-gap: 6px;
    }

    .behind-state {
        grid-column: 2;
        justify-self: start;
    }
}

@media (orientation: landscape) and (max-height: 520px) {
    .page-title--long {
        font-size: clamp(2rem, 11vh, 2.8rem);
    }

    .page-lede--wide {
        max-width: 60ch;
    }
}

/* ── Roadmap page ── */
.roadmap {
    max-width: 1080px;
    margin: 0 auto;
    padding: clamp(8px, 2vh, 24px) max(var(--gutter), env(safe-area-inset-right)) 0 max(var(--gutter), env(safe-area-inset-left));
}

.road-section + .road-section {
    margin-top: clamp(64px, 10vh, 110px);
}

/* Shared expand/collapse (stops and cards). Collapsed only when JS runs,
   so without it every detail simply shows. */
.expandable {
    position: relative;
}

.expand-toggle {
    position: relative;
    display: grid;
    width: 100%;
    margin: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    background: none;
    border: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.expand-toggle:focus-visible {
    outline: 2px solid var(--gold-bright);
    outline-offset: -3px;
    border-radius: inherit;
}

.expand-chevron {
    position: absolute;
    right: 16px;
    width: 20px;
    height: 20px;
    color: rgba(var(--edge), 0.75);
    transition: rotate 350ms var(--ease-out), color 300ms ease;
}

.expand {
    display: grid;
    grid-template-rows: 1fr;
}

.js .expand {
    grid-template-rows: 0fr;
    transition: grid-template-rows 420ms var(--ease-out);
}

.js .expandable.is-open .expand {
    grid-template-rows: 1fr;
}

.expandable.is-open .expand-chevron {
    rotate: 180deg;
}

.expand-inner {
    min-height: 0;
    overflow: hidden;
}

.expand-text {
    margin: 0 20px;
    padding: 12px 0 18px;
    font-size: 15px;
    line-height: 1.55;
    color: var(--text-soft);
    border-top: 1px solid rgba(var(--edge), 0.16);
}

.expand-text a {
    color: var(--gold-bright);
    text-underline-offset: 3px;
}

/* ── The descent: a stair-tread path with stops alternating either side ── */
.descent-path {
    --spine-x: 50%;
    --node: 42px;
    --node-top: 22px;
    position: relative;
    max-width: 980px;
    margin: clamp(28px, 4vh, 44px) auto 0;
    padding-top: 56px;
}

.path-spine,
.path-lit {
    position: absolute;
    top: 22px;
    left: var(--spine-x);
    width: 16px;
    translate: -50% 0;
}

.path-spine {
    bottom: 0;
    background: repeating-linear-gradient(180deg, rgba(var(--purple-soft), 0.3) 0 2px, transparent 2px 13px);
    border-inline: 1px solid rgba(var(--purple-soft), 0.16);
    -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent);
    mask-image: linear-gradient(180deg, #000 82%, transparent);
}

.path-lit {
    height: max(0px, calc(var(--lit-h, 90px) - 22px));
    background: repeating-linear-gradient(180deg, rgba(245, 220, 146, 0.95) 0 2px, transparent 2px 13px);
    border-inline: 1px solid rgba(212, 175, 90, 0.6);
    filter: drop-shadow(0 0 8px rgba(var(--ember), 0.7));
}

.path-entrance {
    position: absolute;
    top: 0;
    left: var(--spine-x);
    translate: -50% 0;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--gold);
}

.stops {
    list-style: none;
    display: grid;
    gap: clamp(20px, 3.4vh, 36px);
}

.stop {
    --edge: 186, 150, 236;
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 84px minmax(0, 1fr);
    align-items: start;
}

.stop.is-current,
.stop.is-done {
    --edge: 212, 175, 90;
}

/* A landing connecting each card to the path */
.stop::before {
    content: '';
    position: absolute;
    top: calc(var(--node-top) + var(--node) / 2);
    width: 42px;
    height: 1px;
    background: linear-gradient(90deg, rgba(var(--edge), 0.08), rgba(var(--edge), 0.5));
}

.stop:nth-child(odd)::before {
    right: 50%;
}

.stop:nth-child(even)::before {
    left: 50%;
    transform: scaleX(-1);
}

.stop:nth-child(odd) .stop-card {
    grid-column: 1;
    grid-row: 1;
}

.stop:nth-child(even) .stop-card {
    grid-column: 3;
    grid-row: 1;
}

/* Node: a diamond landing on the path */
.stop-node {
    position: relative;
    z-index: 1;
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    display: grid;
    place-items: center;
    width: var(--node);
    height: var(--node);
    margin-top: var(--node-top);
    rotate: 45deg;
    border-radius: 8px;
    color: rgba(var(--purple-soft), 0.5);
    background: #0d0a13;
    border: 1.5px solid rgba(var(--purple-soft), 0.28);
    box-shadow: 0 0 0 7px var(--ink);
    transition: color 700ms ease, border-color 700ms ease, box-shadow 700ms ease, filter 700ms ease;
}

.stop-node svg {
    width: 18px;
    height: 18px;
    rotate: -45deg;
}

.stop.is-sealed.is-lit .stop-node {
    color: #cdb4f6;
    border-color: rgba(var(--purple-soft), 0.7);
    box-shadow: 0 0 0 7px var(--ink), 0 0 20px rgba(var(--purple-soft), 0.45);
}

.stop.is-current .stop-node,
.stop.is-done .stop-node {
    color: #1d1205;
    background: linear-gradient(135deg, #f8e3a0, #c99a3e);
    border-color: var(--gold-bright);
}

.js .stop.is-current:not(.is-lit) .stop-node,
.js .stop.is-done:not(.is-lit) .stop-node {
    filter: grayscale(0.7) brightness(0.55);
}

.stop.is-current.is-lit .stop-node,
.stop.is-done.is-lit .stop-node {
    box-shadow: 0 0 0 7px var(--ink), 0 0 28px rgba(var(--ember), 0.75);
}

.stop.is-current .stop-node::after {
    content: '';
    position: absolute;
    inset: -9px;
    border-radius: 12px;
    border: 1px solid rgba(var(--ember), 0.75);
    animation: ping 2.4s ease-out infinite;
}

/* Stop card: sealed stairwell door by default, lit gold when current or done */
.stop-card {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    border: 1px solid rgba(var(--edge), 0.18);
    background:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.02) 0 1px, transparent 1px 38px),
        linear-gradient(135deg, rgba(36, 24, 56, 0.82) 0%, rgba(15, 11, 23, 0.94) 55%, rgba(9, 7, 13, 0.96) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 22px 44px -24px rgba(0, 0, 0, 0.95);
    transition:
        opacity 800ms ease,
        transform 900ms var(--ease-out),
        border-color 350ms ease,
        box-shadow 350ms ease;
}

.js .stop:not(.is-lit) .stop-card {
    opacity: 0.3;
    transform: translate3d(0, 18px, 0);
}

.stop.is-sealed .stop-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg,
        transparent 30%,
        rgba(var(--purple-soft), 0.07) 42%,
        rgba(255, 240, 210, 0.08) 50%,
        rgba(var(--purple-soft), 0.07) 58%,
        transparent 70%);
    transform: translateX(-110%);
    animation: shimmer 7.5s ease-in-out infinite;
    animation-delay: calc(var(--i) * 1.1s);
    pointer-events: none;
}

.stop.is-current .stop-card,
.stop.is-done .stop-card {
    border-color: rgba(212, 175, 90, 0.45);
    background:
        radial-gradient(ellipse 70% 120% at 0% 0%, rgba(var(--ember), 0.14), transparent 70%),
        linear-gradient(135deg, rgba(58, 34, 70, 0.88) 0%, rgba(22, 14, 28, 0.95) 55%, rgba(12, 9, 16, 0.97) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 240, 200, 0.08),
        0 22px 44px -24px rgba(0, 0, 0, 0.95),
        0 0 40px -12px rgba(var(--ember), 0.3);
}

.stop-card:hover {
    border-color: rgba(var(--edge), 0.42);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 26px 50px -24px rgba(0, 0, 0, 1), 0 0 34px -10px rgba(var(--edge), 0.35);
}

.stop-card .expand-toggle {
    padding: 18px 52px 18px 20px;
}

.stop-card .expand-chevron {
    top: 20px;
}

.stop-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
}

.stop-step {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(var(--purple-soft), 0.8);
}

.stop.is-current .stop-step,
.stop.is-done .stop-step {
    color: var(--gold);
}

.stop-title {
    margin-top: 8px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(1.15rem, 2vw, 1.45rem);
    line-height: 1.15;
    color: #d6cdbd;
}

.stop.is-current .stop-title,
.stop.is-done .stop-title {
    color: var(--text);
}

.stop-line {
    margin-top: 4px;
    font-size: 14.5px;
    color: #978e82;
}

.stop.is-current .stop-line,
.stop.is-done .stop-line {
    color: var(--gold-bright);
}

/* ── What's coming: grouped expandable cards ── */
.coming-group {
    margin-top: clamp(32px, 5vh, 50px);
}

.coming-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(1.15rem, 2vw, 1.4rem);
    color: var(--text);
}

.coming-icon,
.road-card-icon {
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--gold-bright);
    border: 1px solid rgba(212, 175, 90, 0.38);
    background: rgba(212, 175, 90, 0.08);
}

.coming-icon {
    width: 38px;
    height: 38px;
}

.coming-icon svg {
    width: 19px;
    height: 19px;
}

.coming-grid {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
    gap: 12px;
    align-items: start;
}

.road-card {
    --edge: 212, 175, 90;
    border-radius: 12px;
    border: 1px solid rgba(var(--edge), 0.15);
    background: linear-gradient(135deg, rgba(40, 24, 60, 0.74), rgba(14, 10, 21, 0.92));
}

/* Keep the reveal fade, and add the hover lift and glow */
.js .road-card.reveal {
    transition:
        opacity 900ms var(--ease-out),
        transform 1000ms var(--ease-out),
        translate 350ms var(--ease-out),
        border-color 300ms ease,
        box-shadow 300ms ease;
}

.road-card .expand-toggle {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    padding: 14px 46px 14px 14px;
}

.road-card .expand-chevron {
    top: 50%;
    translate: 0 -50%;
}

.road-card-icon {
    width: 38px;
    height: 38px;
}

.road-card-icon svg {
    width: 18px;
    height: 18px;
}

.road-card-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.road-card-name {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 16px;
    line-height: 1.25;
    color: var(--text);
}

.road-card-line {
    margin-top: 2px;
    font-size: 13.5px;
    line-height: 1.4;
    color: var(--text-soft);
}

.road-card .expand-text {
    margin: 0 14px;
    padding: 12px 0 14px;
    font-size: 14.5px;
}

.road-card.is-open {
    border-color: rgba(var(--edge), 0.38);
}

/* "And more" cards: open-ended, dashed, a little purple */
.road-card.is-more {
    --edge: 186, 150, 236;
    border-style: dashed;
    background: rgba(18, 12, 27, 0.6);
}

.road-card.is-more .road-card-icon {
    color: #cdb4f6;
    border-color: rgba(var(--purple-soft), 0.4);
    background: rgba(var(--purple-soft), 0.08);
}

/* Mouse users: cards open on hover too. The detail drops down over the
   content below, so the grid never shifts under the cursor. */
@media (hover: hover) and (pointer: fine) {
    .road-card:hover {
        translate: 0 -3px;
        border-color: rgba(var(--edge), 0.4);
        box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 1), 0 0 30px -10px rgba(var(--ember), 0.35);
    }

    .road-card:hover,
    .road-card.is-open {
        z-index: 6;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        background: linear-gradient(135deg, rgb(36, 22, 54), rgb(16, 11, 24));
    }

    .js .road-card .expand {
        position: absolute;
        top: calc(100% - 1px);
        left: -1px;
        right: -1px;
        border: 1px solid transparent;
        border-top: 0;
        border-radius: 0 0 12px 12px;
        background: rgb(16, 11, 24);
        box-shadow: 0 24px 40px -18px rgba(0, 0, 0, 1);
        transition: grid-template-rows 420ms var(--ease-out), border-color 300ms ease;
    }

    .js .road-card:hover .expand,
    .js .road-card.is-open .expand {
        border-color: rgba(var(--edge), 0.4);
    }

    .js .road-card:hover .expand {
        grid-template-rows: 1fr;
    }

    .road-card:hover .expand-chevron {
        rotate: 180deg;
        color: var(--gold-bright);
    }
}

/* ── Bottom call to action ── */
.road-cta {
    margin-top: clamp(64px, 10vh, 110px);
    padding: clamp(26px, 4vw, 44px) clamp(20px, 4vw, 44px);
    text-align: center;
    border-radius: 16px;
    border: 1px solid rgba(212, 175, 90, 0.22);
    background:
        radial-gradient(ellipse 60% 120% at 50% 0%, rgba(var(--ember), 0.12), transparent 70%),
        linear-gradient(135deg, rgba(48, 28, 66, 0.82), rgba(14, 10, 20, 0.94));
    box-shadow: inset 0 1px 0 rgba(255, 240, 200, 0.06), 0 26px 50px -26px rgba(0, 0, 0, 0.95);
}

.road-cta-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px 18px;
    margin-top: 22px;
}

.road-cta-actions .cta-sm {
    margin-top: 0;
}

/* Phones: the path runs down the left edge, every card to its right */
@media (max-width: 760px) {
    .descent-path {
        --spine-x: 20px;
        --node: 34px;
        --node-top: 20px;
        padding-top: 46px;
    }

    .path-entrance {
        left: 0;
        translate: 0 0;
    }

    .stop {
        grid-template-columns: 40px minmax(0, 1fr);
        column-gap: 14px;
    }

    .stop-node {
        grid-column: 1;
    }

    .stop:nth-child(odd) .stop-card,
    .stop:nth-child(even) .stop-card {
        grid-column: 2;
    }

    .stop:nth-child(odd)::before,
    .stop:nth-child(even)::before {
        left: 20px;
        right: auto;
        width: 34px;
        transform: none;
    }

    .stop-node svg {
        width: 15px;
        height: 15px;
    }

    .stop-card .expand-toggle {
        padding: 16px 46px 16px 16px;
    }

    .stop-card .expand-text {
        margin: 0 16px;
    }

    .road-cta-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .road-cta-actions .cta-sm,
    .road-cta-actions .cta-face {
        width: 100%;
        justify-content: center;
    }
}

/* ── Crowdfunding Plan page ── */
.crowdfund {
    max-width: 1120px;
    margin: 0 auto;
    padding: clamp(8px, 2vh, 24px) max(var(--gutter), env(safe-area-inset-right)) 0 max(var(--gutter), env(safe-area-inset-left));
}

/* "Plan only" notice: a System message, impossible to miss */
.plan-notice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 0;
    max-width: 880px;
    margin: 0 auto;
    padding: 14px 20px;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-soft);
    border: 1px solid rgba(212, 175, 90, 0.45);
    border-radius: 12px;
    background:
        repeating-linear-gradient(-45deg, rgba(212, 175, 90, 0.06) 0 10px, transparent 10px 20px),
        rgba(18, 12, 26, 0.88);
    box-shadow: 0 0 30px -10px rgba(var(--ember), 0.35);
}

.plan-notice-item {
    display: inline-flex;
    align-items: center;
}

.plan-notice-item + .plan-notice-item::before {
    content: '◆';
    margin: 0 14px;
    font-size: 8px;
    color: var(--gold-deep);
}

.plan-notice-key {
    padding: 3px 10px;
    color: #1d1205;
    background: linear-gradient(180deg, #f6dd94, #c99a3e);
    border-radius: 999px;
}

.cf-section {
    margin-top: clamp(56px, 9vh, 96px);
}

.cf-lead {
    max-width: 760px;
    margin: 22px auto 0;
    text-align: center;
    font-size: clamp(17px, 1.8vw, 20px);
    line-height: 1.6;
    color: var(--text);
    text-wrap: pretty;
}

.cf-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: fit-content;
    max-width: 100%;
    margin: 22px auto 0;
    padding: 10px 16px;
    font-size: 14.5px;
    line-height: 1.45;
    color: #d9cbf3;
    border: 1px solid rgba(var(--purple-soft), 0.35);
    border-radius: 999px;
    background: rgba(var(--purple-soft), 0.08);
}

.cf-note svg {
    flex: none;
    width: 18px;
    height: 18px;
    color: #c5a8f5;
}

.cf-note strong {
    color: var(--gold-bright);
    font-weight: 700;
}

/* ── Backer tiers: loot boxes that get richer as they go up ── */
.tier-grid {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-top: 30px;
}

.tier {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 6px 20px 22px;
    border-radius: 16px;
    border: 1px solid rgba(var(--tier), calc(0.16 + var(--lvl) * 0.05));
    background:
        radial-gradient(ellipse 90% 55% at 50% 0%, rgba(var(--tier), calc(0.04 + var(--lvl) * 0.028)), transparent 72%),
        linear-gradient(165deg, rgba(var(--tier-lo), calc(0.1 + var(--lvl) * 0.035)) 0%, rgba(14, 10, 20, 0.95) 62%);
    box-shadow:
        inset 0 1px 0 rgba(var(--tier-hi), calc(0.04 + var(--lvl) * 0.015)),
        0 0 calc(var(--lvl) * 7px) calc(var(--lvl) * -1px) rgba(var(--tier), calc(0.06 + var(--lvl) * 0.035)),
        0 24px 48px -26px rgba(0, 0, 0, 1);
    transition: border-color 350ms ease, box-shadow 350ms ease, translate 400ms var(--ease-out);
}

/* Keep the reveal fade, and add the hover lift */
.js .tier.reveal {
    transition:
        opacity 900ms var(--ease-out),
        transform 1000ms var(--ease-out),
        translate 400ms var(--ease-out),
        border-color 350ms ease,
        box-shadow 350ms ease;
    transition-delay: calc((var(--lvl) - 1) * 60ms), calc((var(--lvl) - 1) * 60ms), 0s, 0s, 0s;
}

.tier > * {
    position: relative;
    z-index: 1;
}

/* Sparkles: more of them on every tier */
.tier-sparks {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.spark {
    position: absolute;
    width: var(--s);
    height: var(--s);
    background: rgb(var(--tier-hi));
    clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
    filter: drop-shadow(0 0 3px rgba(var(--tier), 1));
    opacity: 0;
    animation: twinkle 2.6s ease-in-out infinite;
    animation-delay: var(--d);
}

/* The loot box itself */
.tier-box {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    height: 136px;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 12px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.tier-box:focus-visible {
    outline: 2px solid rgb(var(--tier-hi));
    outline-offset: -2px;
}

.box-glow,
.box-rays {
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 50%;
    pointer-events: none;
}

.box-glow {
    width: calc(70px + var(--lvl) * 12px);
    height: calc(70px + var(--lvl) * 12px);
    translate: -50% -46%;
    background: radial-gradient(circle, rgba(var(--tier), calc(0.14 + var(--lvl) * 0.05)), transparent 68%);
    transition: transform 450ms var(--ease-out), opacity 450ms ease;
}

/* Light rays: none on the first tiers, stronger on every tier after */
.box-rays {
    width: 210px;
    height: 210px;
    translate: -50% -46%;
    background: repeating-conic-gradient(from 0deg, rgba(var(--tier-hi), 0) 0deg 7deg, rgba(var(--tier-hi), 0.55) 10deg, rgba(var(--tier-hi), 0) 13deg 22deg);
    -webkit-mask-image: radial-gradient(circle, #000 18%, transparent 66%);
    mask-image: radial-gradient(circle, #000 18%, transparent 66%);
    opacity: clamp(0, (var(--lvl) - 3) * 0.09, 0.55);
    transition: opacity 450ms ease;
}

.tier:nth-child(n + 5) .box-rays {
    animation: spin 40s linear infinite;
}

.bx {
    position: relative;
    width: 96px;
    height: 96px;
    overflow: visible;
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 calc(var(--lvl) * 2px) rgba(var(--tier), 0.55));
    transition: transform 450ms var(--ease-out);
}

.bx-shadow { fill: rgba(0, 0, 0, 0.45); }
.bx-left { fill: rgb(var(--tier-lo)); }
.bx-right { fill: rgb(var(--tier)); }
.bx-band { fill: rgba(var(--tier-hi), 0.55); }
.bx-lid-left { fill: rgb(var(--tier-lo)); }
.bx-lid-right { fill: rgb(var(--tier)); }
.bx-top { fill: rgb(var(--tier-hi)); }
.bx-emblem { fill: rgba(var(--tier-lo), 0.85); }

.bx-light {
    fill: #fffbe9;
    opacity: 0;
    filter: drop-shadow(0 0 6px rgba(var(--tier-hi), 1));
    transition: opacity 450ms ease;
}

.bx-lid {
    transform-box: fill-box;
    transform-origin: 0% 100%;
    transition: transform 520ms cubic-bezier(.34, 1.56, .64, 1);
}

/* Opened: by tap/click, or by hovering with a mouse */
.tier.is-open .bx-lid {
    transform: translate(-4px, -16px) rotate(-14deg);
}

.tier.is-open .bx-light {
    opacity: 0.95;
}

.tier.is-open .box-rays {
    opacity: 0.85;
}

.tier.is-open .box-glow {
    transform: scale(1.25);
}

.tier.is-open .bx {
    transform: translateY(2px);
}

@media (hover: hover) and (pointer: fine) {
    .tier:hover {
        translate: 0 -4px;
        border-color: rgba(var(--tier), 0.6);
        box-shadow:
            inset 0 1px 0 rgba(var(--tier-hi), 0.15),
            0 0 calc(18px + var(--lvl) * 6px) 0 rgba(var(--tier), 0.3),
            0 30px 56px -26px rgba(0, 0, 0, 1);
    }

    .tier:hover .bx-lid { transform: translate(-4px, -16px) rotate(-14deg); }
    .tier:hover .bx-light { opacity: 0.95; }
    .tier:hover .box-rays { opacity: 0.85; }
    .tier:hover .box-glow { transform: scale(1.25); }
}

/* The tier text */
.tier-level {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(var(--tier-hi), 0.8);
}

.tier-name {
    margin-top: 4px;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(1.2rem, 1.9vw, 1.4rem);
    line-height: 1.12;
    background: linear-gradient(180deg, rgb(var(--tier-hi)) 15%, rgb(var(--tier)) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.tier-line {
    margin-top: 6px;
    font-size: 13.5px;
    font-weight: 600;
    color: rgb(var(--tier-hi));
}

.tier-plus {
    margin-top: 12px;
    font-size: 12.5px;
    font-style: italic;
    color: var(--text-dim);
}

.tier-rewards {
    list-style: none;
    display: grid;
    gap: 7px;
    margin-top: 10px;
}

.tier-name + .tier-rewards,
.tier-line + .tier-rewards {
    margin-top: 14px;
}

.tier-rewards li {
    position: relative;
    padding-left: 16px;
    font-size: 14.5px;
    line-height: 1.45;
    color: var(--text-soft);
}

.tier-rewards li::before {
    content: '';
    position: absolute;
    left: 1px;
    top: 0.5em;
    width: 6px;
    height: 6px;
    rotate: 45deg;
    background: rgb(var(--tier));
    box-shadow: 0 0 6px rgba(var(--tier), 0.8);
}

.tier-tbd {
    margin-top: 14px;
    font-size: 14.5px;
    font-style: italic;
    color: rgba(var(--tier-hi), 0.75);
}

/* Celestial: a starfield */
.tier-6 {
    background:
        radial-gradient(1px 1px at 18% 30%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1px 1px at 72% 18%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(1.5px 1.5px at 84% 64%, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(1px 1px at 34% 78%, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(1px 1px at 58% 46%, rgba(255, 255, 255, 0.45), transparent),
        radial-gradient(ellipse 90% 55% at 50% 0%, rgba(var(--tier), 0.22), transparent 72%),
        linear-gradient(165deg, rgba(var(--tier-lo), 0.35) 0%, rgba(14, 10, 20, 0.95) 62%);
}

/* Show runners: stage spotlights */
.tier-7 {
    background:
        conic-gradient(from 160deg at 20% -10%, transparent 0deg, rgba(var(--tier-hi), 0.14) 12deg, transparent 24deg),
        conic-gradient(from 176deg at 80% -10%, transparent 0deg, rgba(var(--tier-hi), 0.14) 12deg, transparent 24deg),
        radial-gradient(ellipse 90% 55% at 50% 0%, rgba(var(--tier), 0.25), transparent 72%),
        linear-gradient(165deg, rgba(var(--tier-lo), 0.4) 0%, rgba(14, 10, 20, 0.95) 62%);
}

/* Deity Sponsorship: a radiant border that turns slowly */
.tier-8 {
    border-color: transparent;
    background:
        radial-gradient(ellipse 90% 60% at 50% 0%, rgba(var(--tier), 0.3), transparent 72%),
        linear-gradient(165deg, rgba(var(--tier-lo), 0.42) 0%, rgba(14, 10, 20, 0.95) 64%);
}

.tier-8::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    padding: 1.5px;
    border-radius: inherit;
    background: conic-gradient(from var(--trace), #fff6d6, #f0c75e, #c9a6ff, #8fd8ff, #fff6d6, #f0c75e, #ffb3d9, #fff6d6);
    -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 exclude, linear-gradient(#000 0 0);
    animation: trace 8s linear infinite;
    pointer-events: none;
}

.tier-hint {
    margin-top: 16px;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.hint-mouse {
    display: none;
}

@media (hover: hover) and (pointer: fine) {
    .hint-touch { display: none; }
    .hint-mouse { display: inline; }
}

/* ── Community-built content: suggest → vote → approve ── */
.community-flow {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 34px;
    max-width: 920px;
    margin: 30px auto 0;
}

.flow-step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 24px 20px;
    text-align: center;
    border-radius: 14px;
    border: 1px solid rgba(212, 175, 90, 0.18);
    background: linear-gradient(160deg, rgba(44, 26, 64, 0.75), rgba(14, 10, 20, 0.92));
}

.js .flow-step.reveal {
    transition-delay: calc(var(--i) * 90ms);
}

/* Arrow pointing to the next step */
.flow-step + .flow-step::before {
    content: '';
    position: absolute;
    left: -26px;
    top: 50%;
    width: 18px;
    height: 18px;
    translate: 0 -50%;
    background: var(--gold);
    clip-path: polygon(0 35%, 55% 35%, 55% 10%, 100% 50%, 55% 90%, 55% 65%, 0 65%);
    opacity: 0.7;
}

.flow-icon,
.fund-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    color: var(--gold-bright);
    border: 1px solid rgba(212, 175, 90, 0.4);
    background: rgba(212, 175, 90, 0.08);
    box-shadow: 0 0 20px -6px rgba(var(--ember), 0.5);
}

.flow-icon svg,
.fund-icon svg {
    width: 22px;
    height: 22px;
}

.flow-step:last-child .flow-icon {
    color: #1d1205;
    background: linear-gradient(180deg, #f6dd94, #c99a3e);
}

.flow-title,
.fund-title {
    margin-top: 4px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.15rem;
    color: var(--text);
}

.flow-line,
.fund-line {
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--text-soft);
}

/* ── Where the funds would go ── */
.funds-grid {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-top: 30px;
}

.fund {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 22px 20px;
    border-radius: 14px;
    border: 1px solid rgba(212, 175, 90, 0.16);
    background: linear-gradient(160deg, rgba(40, 24, 60, 0.74), rgba(14, 10, 21, 0.92));
}

.js .fund.reveal {
    transition-delay: calc(var(--i) * 70ms);
}

@keyframes twinkle {
    0%, 100% { opacity: 0; transform: scale(0.4) rotate(0deg); }
    50%      { opacity: 1; transform: scale(1) rotate(45deg); }
}

@media (max-width: 1000px) {
    .tier-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .funds-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .community-flow {
        grid-template-columns: minmax(0, 1fr);
        gap: 30px;
    }

    .flow-step + .flow-step::before {
        left: 50%;
        top: -24px;
        translate: -50% 0;
        rotate: 90deg;
    }

    .cf-note {
        border-radius: 14px;
        text-align: left;
    }
}

@media (max-width: 600px) {
    .plan-notice {
        flex-direction: column;
        gap: 6px;
        font-size: 11px;
    }

    .plan-notice-item + .plan-notice-item::before {
        display: none;
    }

    .tier-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .funds-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .fund {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        column-gap: 14px;
        align-items: center;
    }

    .fund-icon {
        grid-row: span 2;
    }

    .fund-title {
        margin-top: 0;
    }
}

/* Reduced motion: sparkles hold still (the global rule stops every animation) */
@media (prefers-reduced-motion: reduce) {
    .spark {
        opacity: 0.7;
    }
}

/* ═══ KEYFRAMES ═══ */
@keyframes push-in {
    from { transform: scale(1) translate3d(0, 0, 0); }
    to   { transform: scale(1.04) translate3d(-0.6%, -0.5%, 0); }
}

@keyframes rise {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
}

@keyframes fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes pulse {
    0%, 100% { opacity: 0.55; transform: scale(0.96); }
    50%      { opacity: 1;    transform: scale(1.06); }
}

@keyframes sweep {
    0%, 70% { transform: skewX(-20deg) translateX(0); }
    100%    { transform: skewX(-20deg) translateX(420%); }
}

@keyframes ping {
    0%   { opacity: 0.9; transform: scale(0.6); }
    100% { opacity: 0;   transform: scale(1.6); }
}

@keyframes drop {
    0%   { transform: translateY(-14px); opacity: 0; }
    30%  { opacity: 1; }
    100% { transform: translateY(44px); opacity: 0; }
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
}

@keyframes trace {
    to { --trace: 360deg; }
}

@keyframes flicker {
    0%   { opacity: 1; }
    17%  { opacity: 0.85; }
    21%  { opacity: 1; }
    46%  { opacity: 0.9; }
    52%  { opacity: 0.78; }
    57%  { opacity: 1; }
    80%  { opacity: 0.9; }
}

@keyframes shimmer {
    0%        { transform: translateX(-110%); }
    40%, 100% { transform: translateX(110%); }
}

@keyframes seal-glow {
    0%, 100% { opacity: 0.75; }
    50%      { opacity: 1; }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

@keyframes rattle {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(3px); }
}

/* ═══ RESPONSIVE ═══ */

/* Portrait screens: filling the full height would crop away most of the art's
   width, so the art covers only the upper part (behind the characters) and its
   bottom fades into the dark title band. */
@media (orientation: portrait) {
    .hero-parallax {
        bottom: auto;
        height: 132vw;
    }

    .hero-art {
        -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
        mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
    }
}

@media (max-width: 1000px) {
    .floor-list { --step: 12px; }
}

/* Tablets and phones */
@media (max-width: 760px) {
    .floor-list { --step: 0px; }

    .js .floor.reveal:nth-child(odd),
    .js .floor.reveal:nth-child(even) {
        transform: translate3d(0, 28px, 0);
    }

    .js .floor.reveal.is-visible {
        transform: none;
    }

    .floor-card {
        grid-template-columns: auto 1fr;
        align-items: start;
        gap: 18px;
        border-radius: 14px;
    }

    /* The status chip moves to the top-right corner; the big icons step aside */
    .card-status {
        position: absolute;
        top: 18px;
        right: 18px;
    }

    .card-enter,
    .seal-sigil {
        display: none;
    }

    .card-num {
        font-size: 3.1rem;
        margin-top: 2px;
    }

    .card-kicker {
        min-height: 24px;
        display: flex;
        align-items: center;
    }
}

/* Phones (portrait) */
@media (max-width: 600px) {
    .topbar { height: 56px; }
    .brand { font-size: 14px; }
    .topbar-cta { min-height: 34px; padding: 0 14px; font-size: 11px; }

    .hero-art { background-position: 50% 12%; }

    .hero-content { padding-bottom: clamp(84px, 13vh, 120px); }

    .eyebrow { font-size: 10px; letter-spacing: 0.22em; padding: 6px 13px; }

    .title { font-size: clamp(3rem, 19vw, 5.4rem); }
    .title-top { font-size: 0.36em; letter-spacing: 0.16em; margin-right: -0.16em; }

    .hero-actions { flex-direction: column; gap: 8px; width: 100%; }
    .cta { width: min(100%, 340px); }
    .cta-face { width: 100%; justify-content: center; padding: 18px 24px; font-size: 16px; }

    .floor-card { padding: 18px 16px 20px; gap: 14px; }
    .card-num { font-size: 2.6rem; }
    .card-status { top: 16px; right: 14px; }
}

/* Phones (portrait only): the logo painted into the artwork is the title, so the
   text title is hidden visually but kept for screen readers and search engines */
@media (max-width: 600px) and (orientation: portrait) {
    .title {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

/* Phones (landscape) and other short screens */
@media (orientation: landscape) and (max-height: 520px) {
    .topbar { height: 50px; }

    .hero-art { background-position: 50% 26%; }

    .hero-content { padding-bottom: clamp(20px, 7vh, 40px); }

    .eyebrow { display: none; }

    .title { margin-top: 0; font-size: clamp(2.4rem, 17vh, 4.6rem); }

    .tagline { margin-top: 8px; font-size: 14px; max-width: none; }

    .hero-actions { margin-top: 16px; flex-direction: row; width: auto; }
    .cta { width: auto; }
    .cta-face { padding: 13px 26px; font-size: 14px; }

    .scroll-cue { display: none; }

    .descent { padding-top: 64px; }
}

/* ═══ REDUCED MOTION ═══ */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *,
    *::before,
    *::after {
        animation: none !important;
        transition-duration: 0.01ms !important;
    }

    .hero-art { transform: scale(1.02); }

    .js .reveal,
    .js .floor.reveal:nth-child(odd),
    .js .floor.reveal:nth-child(even) {
        opacity: 1;
        transform: none;
    }

    .floor-card:hover,
    .floor-card:focus-visible { transform: none; }

    /* Show the gold border without spinning it */
    .floor-card:hover::before,
    .floor-card:focus-visible::before {
        background: rgba(212, 175, 90, 0.8);
    }
}