/* Realms release page. Dark only: void, stone, antique gold, arcane violet, ivory.
   Gold is for names (bosses, relics); violet is the one light accent. All corners are sharp.
   No backdrop-filter and no animated full-screen gradients: both jank scroll (see changelogs/style.css). */

:root {
    color-scheme: dark;
    --void: #07060b;
    --void-2: #0c0a12;
    --stone: #1b1922;
    --stone-2: #2b2833;
    --stone-edge: rgba(150, 138, 170, 0.18);
    --gold: #c6a15b;
    --gold-hi: #e6c98a;
    --gold-dim: rgba(198, 161, 91, 0.45);
    --violet: #8d72ff;
    --violet-deep: #3a2470;
    --violet-glow: rgba(141, 114, 255, 0.35);
    --ivory: #ece4d0;
    --ivory-2: #c9c0ad;
    --muted: #958c9f;
    --gutter: clamp(16px, 6vw, 96px);
    --display: 'Cinzel', 'Noto Sans Runic', 'Trajan Pro', serif;
    --body: 'Cormorant Garamond', 'Noto Sans Runic', 'Garamond', serif;
    --rune: 'Noto Sans Runic', 'Segoe UI Historic', serif;
}

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

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

body {
    background: var(--void);
    color: var(--ivory);
    font-family: var(--body);
    font-size: 1.2rem;
    line-height: 1.55;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3 { font-family: var(--display); font-weight: 600; letter-spacing: 0.06em; line-height: 1.1; }
h2 { font-size: clamp(2.1rem, 4.8vw, 4.2rem); color: var(--ivory); }
h3 { font-size: clamp(1.3rem, 2vw, 1.7rem); }

.lede { max-width: 58ch; color: var(--ivory-2); font-size: clamp(1.15rem, 1.5vw, 1.4rem); margin-top: 1.1rem; }
.numeral { font-family: var(--display); font-weight: 700; }

/* Fixed backdrop: baked once, never animated except opacity. */
#sky, #embers, #dark { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#sky { z-index: -3; }
#dark { z-index: -2; background: #030206; opacity: 0; will-change: opacity; }
#embers { z-index: -1; will-change: transform; }

/* Threshold */
#threshold {
    position: fixed; inset: 0; z-index: 60;
    display: grid; place-content: center; justify-items: center; gap: 1.4rem;
    background: var(--void);
}
html:not(.js) #threshold { display: none; }
.sigil-draw { width: min(160px, 36vw); fill: none; stroke: var(--gold); stroke-width: 1.2; }
.sigil-draw * { stroke-dasharray: 600; stroke-dashoffset: 600; animation: draw 1.8s cubic-bezier(.6,.1,.3,1) forwards; }
.sigil-draw circle:nth-child(2) { animation-delay: .2s; }
.sigil-draw path:nth-child(3) { animation-delay: .45s; }
.sigil-draw path:nth-child(4) { animation-delay: .7s; stroke: var(--violet); }
#threshold p { font-family: var(--body); font-style: italic; color: var(--muted); letter-spacing: 0.08em; opacity: 0; animation: fadein 1.2s .9s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fadein { to { opacity: 1; } }

/* Top bar */
.topbar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 30;
    height: 64px; padding: 0 var(--gutter);
    display: flex; align-items: center; justify-content: space-between;
    background: linear-gradient(to bottom, rgba(7, 6, 11, 0.85), rgba(7, 6, 11, 0));
}
.brand img { height: 30px; width: auto; opacity: 0.9; }
.toplink {
    font-family: var(--display); font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase;
    text-decoration: none; color: var(--ivory-2); padding: 0.5rem 0;
    border-bottom: 1px solid transparent; transition: border-color .3s, color .3s;
}
.toplink:hover, .toplink:focus-visible { color: var(--ivory); border-color: var(--gold-dim); }

/* Hero */
.hero { position: relative; height: 100vh; height: 100dvh; overflow: hidden; }
.hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 22vh; background: linear-gradient(to bottom, rgba(7, 6, 11, 0), var(--void)); pointer-events: none; }
.horizon { position: absolute; inset: 0; }
.ridge { position: absolute; inset: 0; width: 100%; height: 100%; will-change: transform; }
.media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-media { z-index: 1; }
.gate-wrap { position: absolute; inset: 0; pointer-events: none; }
.gate { width: 100%; height: 100%; display: block; transform-origin: 50% 57%; will-change: transform; }
.gate .seam { opacity: 0.85; }
.gate .band { font-family: var(--rune); letter-spacing: 6px; }
.gate .band-dim { fill: #3b3546; }
.gate .band-lit { fill: none; stroke: var(--gold-hi); stroke-width: 1.1; stroke-dasharray: 70; stroke-dashoffset: 70; }
.gate .keystone { fill: var(--violet); }
.gate .keystone-glow { fill: var(--violet); opacity: 0.22; }
.gate-open .door-l { transform: translateX(-250px); }
.gate-open .door-r { transform: translateX(250px); }
.gate-open .band-lit { stroke-dashoffset: 0; fill: rgba(230, 201, 138, 0.35); }
.gate-open .seam { opacity: 0; }

.hero-copy {
    position: absolute; inset: 0; padding: 16vh 16px 0;
    display: flex; flex-direction: column; justify-content: center;
    text-align: center; pointer-events: none;
}
.hero-title {
    font-weight: 900; font-size: clamp(3.4rem, 12vw, 10rem);
    letter-spacing: 0.28em; padding-left: 0.28em; line-height: 1;
    text-transform: uppercase; color: var(--ivory);
    text-shadow: 0 0 40px rgba(141, 114, 255, 0.35), 0 2px 0 rgba(0, 0, 0, 0.6);
}
.hero-line {
    margin-top: 1.2rem; font-style: italic; color: var(--ivory-2);
    font-size: clamp(1.15rem, 2vw, 1.6rem); text-shadow: 0 1px 12px #000;
}

/* Layered captures replace the drawn art they sit over */
.scene { position: absolute; inset: 0; overflow: hidden; }
.scene canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.scene img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transform-origin: 50% 50%; will-change: transform; }
.scene .veil {
    position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to bottom, rgba(30, 22, 62, 0.06) 0%, rgba(120, 98, 205, 0.14) 44%, rgba(52, 38, 100, 0.06) 64%, rgba(16, 12, 32, 0) 100%);
}
/* portal light on the horizon, then a vignette: ties a raw game frame into the page */
.scene::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(ellipse 50% 30% at 50% 42%, rgba(175, 150, 255, 0.14), rgba(175, 150, 255, 0) 70%),
        linear-gradient(to bottom, rgba(7, 6, 11, 0.62) 0%, rgba(7, 6, 11, 0) 34%, rgba(7, 6, 11, 0) 52%, rgba(7, 6, 11, 0.55) 78%, rgba(7, 6, 11, 0.85) 100%),
        radial-gradient(ellipse 75% 70% at 50% 45%, rgba(7, 6, 11, 0) 50%, rgba(7, 6, 11, 0.7) 100%);
}
.land-art.scene { inset: 0 0 35% 0; height: 65%; }
.has-scene > canvas.ridge, .has-scene > canvas.land-art, .has-scene > canvas.stratum-canvas { display: none; }
.no-gate .gate-wrap { display: none; }

/* Prologue (centred on purpose: it is the manifesto) */
.prologue {
    min-height: 100vh; min-height: 100dvh; padding: 18vh var(--gutter);
    display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2.2rem;
    text-align: center;
}
.prologue-line {
    font-style: italic; font-size: clamp(1.45rem, 2.8vw, 2.3rem); line-height: 1.35;
    max-width: 34ch; color: var(--ivory);
}

/* Discovery */
.discovery { position: relative; }
.disc-head { padding: 14vh var(--gutter) 6vh calc(var(--gutter) + 6vw); }
.points { list-style: none; display: flex; flex-wrap: wrap; gap: 0.6rem 2.4rem; margin-top: 1.8rem; }
.points li { font-family: var(--display); font-size: 0.86rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-hi); padding-top: 0.6rem; border-top: 1px solid var(--gold-dim); }
.chart-pin { height: 100vh; height: 100dvh; display: flex; align-items: center; }
.chart-stage {
    width: 100%; padding: 76px var(--gutter) 28px;
    display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center;
}
/* mirrors the in-game Realms map panel */
.chart-frame {
    position: relative; width: min(100%, calc(100vh - 190px)); width: min(100%, calc(100dvh - 190px)); justify-self: end;
    background: #0b0a10; border: 1px solid rgba(160, 150, 180, 0.32);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}
.map-bar, .map-foot {
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    padding: 0.45rem 0.8rem; font-family: var(--display); font-size: 0.8rem; letter-spacing: 0.12em; font-variant: small-caps;
}
.map-title { color: var(--ivory-2); }
.map-title b { color: rgb(255, 210, 90); font-weight: 700; margin-left: 0.3em; }
.map-explored { color: var(--ivory-2); }
.map-explored b { color: var(--ivory); font-weight: 600; }
.map-foot { color: var(--muted); font-size: 0.74rem; justify-content: flex-start; }
.chart-frame.has-dial { width: min(100%, calc(100vh - 230px)); width: min(100%, calc(100dvh - 230px)); }
.seed-dial {
    display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0.8rem;
    border-bottom: 1px solid rgba(160, 150, 180, 0.18); background: rgba(58, 36, 112, 0.18);
}
.dial-label { flex: 1; min-width: 0; font-family: var(--display); font-size: 0.78rem; letter-spacing: 0.12em; font-variant: small-caps; color: #c0a6ff; }
.seed-dial input {
    width: 8.5rem; padding: 0.3rem 0.5rem; font-family: var(--display); font-size: 0.9rem; letter-spacing: 0.2em; text-align: center;
    color: var(--ivory); background: rgba(7, 6, 11, 0.8); border: 1px solid rgba(141, 114, 255, 0.45); border-radius: 0;
}
.seed-dial input:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 12px rgba(141, 114, 255, 0.35); }
.seed-dial button {
    padding: 0.32rem 0.8rem; font-family: var(--display); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap;
    color: var(--ivory); background: var(--violet-deep); border: 1px solid rgba(141, 114, 255, 0.6); cursor: pointer;
}
.seed-dial button:hover, .seed-dial button:focus-visible { background: var(--violet); outline: none; }
@media (max-width: 760px) { .dial-label { flex-basis: 100%; } .seed-dial { flex-wrap: wrap; } .seed-dial input { flex: 1; } }
#chart { width: 100%; aspect-ratio: 1; display: block; background: #000; image-rendering: pixelated; }
.chart-side { display: flex; flex-direction: column; gap: 2rem; max-width: 30rem; }
.fragments { list-style: none; position: relative; min-height: 6.5em; }
.fragment {
    position: absolute; inset: 0 0 auto 0;
    font-style: italic; font-size: clamp(1.25rem, 1.8vw, 1.6rem); line-height: 1.35; color: var(--ivory);
    opacity: 0; transform: translateY(10px); transition: opacity .6s, transform .6s;
}
.fragment.on { opacity: 1; transform: none; }
.legend { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem 1.4rem; }
.legend li {
    display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 0.6rem;
    font-family: var(--display); font-size: 0.82rem; letter-spacing: 0.06em; color: var(--ivory-2);
    opacity: 0.12; transition: opacity .6s;
}
.legend li.on { opacity: 1; }
.legend .glyph { width: 28px; height: 28px; }
.legend b { font-weight: 600; color: var(--gold); }
.legend-lands { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; font-family: var(--display); font-size: 0.82rem; letter-spacing: 0.06em; color: var(--ivory-2); }
.legend-lands li { display: flex; align-items: center; gap: 0.5rem; }
.swatch { width: 14px; height: 14px; border: 1px solid rgba(0, 0, 0, 0.6); }

/* Lands: horizontal pan */
.lands { position: relative; overflow: hidden; }
.lands-track {
    display: flex; align-items: center; gap: clamp(18px, 2.4vw, 40px);
    height: 100vh; height: 100dvh; padding: 64px var(--gutter) 0; width: max-content;
}
.lands-intro { flex: 0 0 min(34rem, 78vw); padding-right: 4vw; }
.land {
    position: relative; flex: 0 0 clamp(17rem, 24vw, 23rem); height: min(76dvh, 40rem);
    background: var(--stone); border: 1px solid var(--stone-edge); overflow: hidden;
    display: flex; flex-direction: column; justify-content: flex-end;
}
.land-art { position: absolute; inset: 0 0 35% 0; width: 100%; height: 65%; }
.land::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to bottom, transparent 30%, var(--stone) 66%);
}
.land-body { position: relative; z-index: 1; padding: 1.4rem 1.5rem 1.6rem; }
.land h3 { color: var(--gold-hi); font-size: clamp(1.6rem, 2.2vw, 2.1rem); margin: 0.3rem 0 0.6rem; }
.land p { font-size: 1.08rem; color: var(--ivory-2); }
.threat { display: flex; align-items: baseline; gap: 0.6rem; font-family: var(--display); font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.threat .numeral { font-size: 1.5rem; color: var(--ivory); letter-spacing: 0.04em; }
.land[data-biome="snow"] .threat .numeral { color: #e7b16a; }
.land[data-biome="redrock"] .threat .numeral { color: #e2735a; }
.dwellers { margin-top: 0.8rem; font-style: italic; }
.land p.below { margin-top: 0.4rem; font-family: var(--display); font-size: 0.78rem; letter-spacing: 0.1em; color: var(--muted); }
.land-sealed { background: #0b0a10; border-style: dashed; justify-content: center; text-align: center; }
.land-sealed::after { display: none; }
.land-sealed h3 { color: #4b4458; font-size: 3rem; letter-spacing: 0.3em; }
.land-sealed .threat { justify-content: center; }
.land-sealed .threat .numeral { color: #6b3a52; }

/* Skies */
.skies {
    padding: 16vh var(--gutter) 14vh;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 110px); align-items: center;
}
.sky-dome {
    position: relative; aspect-ratio: 1; width: min(100%, 72vh); justify-self: center;
    border-radius: 50%; overflow: hidden; border: 1px solid var(--gold-dim);
    box-shadow: 0 0 0 10px rgba(198, 161, 91, 0.05), 0 40px 120px rgba(0, 0, 0, 0.7);
}
.dome-layer { position: absolute; inset: 0; opacity: 0; }
.dome-layer[data-phase="dawn"]  { background: linear-gradient(to top, #f0a46a 0%, #b9677a 30%, #4b3a6e 62%, #1a1838 100%); opacity: 1; }
.dome-layer[data-phase="day"]   { background: linear-gradient(to top, #d9e3df 0%, #8fb7cf 34%, #4d7fae 70%, #2e5687 100%); }
.dome-layer[data-phase="dusk"]  { background: linear-gradient(to top, #ff8a4c 0%, #c2455a 26%, #5a2a62 58%, #170f2a 100%); }
.dome-layer[data-phase="night"] { background: radial-gradient(circle at 70% 30%, #23305e 0%, #0d1028 45%, #05060f 100%); }
.dome-arm { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: rotate(-80deg); }
.dome-sun, .dome-moon { position: absolute; width: calc(var(--orbit, 140px) * 0.3); height: calc(var(--orbit, 140px) * 0.3); border-radius: 50%; transform: translate(-50%, -50%); }
.dome-sun  { left: 0; top: calc(-1 * var(--orbit, 140px)); background: #fff3d6; box-shadow: 0 0 40px 14px rgba(255, 220, 160, 0.55); }
.dome-moon { left: 0; top: var(--orbit, 140px); background: #dfe3f2; box-shadow: 0 0 30px 8px rgba(190, 200, 255, 0.35); }
.dome-ground {
    position: absolute; left: 0; right: 0; bottom: 0; height: 34%;
    background: #08070c;
    clip-path: polygon(0 34%, 9% 22%, 18% 30%, 27% 8%, 36% 26%, 46% 18%, 55% 30%, 63% 4%, 72% 24%, 82% 16%, 91% 28%, 100% 20%, 100% 100%, 0 100%);
}
.phase-lines { position: relative; min-height: 2.6em; margin-top: 1.4rem; }
.phase-line {
    position: absolute; inset: 0 0 auto 0; opacity: 0;
    font-family: var(--display); font-size: clamp(1.05rem, 1.7vw, 1.45rem); letter-spacing: 0.08em; color: var(--gold-hi);
}
.phase-line:first-child { opacity: 1; }
.omens { grid-column: 1 / -1; margin-top: 10vh; text-align: center; }
.omens-title { font-family: var(--body); font-style: italic; font-weight: 500; font-size: clamp(1.4rem, 2.6vw, 2.2rem); letter-spacing: 0; color: var(--ivory); }
.omens ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(18px, 3vw, 44px); margin-top: 3rem; }
.omen { display: grid; justify-items: center; gap: 0.9rem; width: 7.5rem; }
.omen-disc { width: clamp(64px, 7vw, 96px); aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--stone-edge); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6); }
.omen-name { font-family: var(--display); font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ivory-2); }
.omen[data-omen="o1"]   .omen-disc { background: radial-gradient(circle at 50% 80%, #c25a2a 0%, #4a3530 35%, #1b1615 100%); }
.omen[data-omen="o2"]    .omen-disc { background: radial-gradient(circle at 50% 70%, #9ab54a 0%, #3d4a24 40%, #11140b 100%); }
.omen[data-omen="o3"] .omen-disc { background: radial-gradient(circle at 60% 35%, #ff6a5a 0 12%, #6e0f1a 16%, #2a0a12 55%, #0c0306 100%); }
.omen[data-omen="o4"]   .omen-disc { background: radial-gradient(circle at 50% 50%, #050407 0 22%, #ffe8b0 24%, #8a5a2a 30%, #120c08 60%, #050407 100%); }
.omen[data-omen="o5"]   .omen-disc { background: radial-gradient(circle at 50% 75%, #e8f6ff 0%, #8fc4e0 30%, #2a4a66 70%, #0d1622 100%); }
.omen[data-omen="o6"]  .omen-disc { background: radial-gradient(1.5px 1.5px at 30% 30%, #fff 50%, transparent 52%), radial-gradient(1.5px 1.5px at 66% 48%, #fff 50%, transparent 52%), radial-gradient(1px 1px at 44% 70%, #fff 50%, transparent 52%), linear-gradient(135deg, #1c1640 0%, #0a0820 100%); }
.omen[data-omen="o7"]     .omen-disc { background: radial-gradient(circle at 40% 40%, #7f8ea8 0%, #3a4256 40%, #141822 100%); }

/* Depths */
.depths { padding: 16vh 0 14vh; }
.depths-head { padding: 0 var(--gutter); max-width: 60rem; }
.descent { position: relative; margin-top: 10vh; padding: 0 var(--gutter) 0 calc(var(--gutter) + 5vw); display: grid; gap: 14vh; }
.shaft { position: absolute; left: calc(var(--gutter) + 1vw); top: 0; bottom: 0; width: 2px; background: rgba(150, 138, 170, 0.12); }
.shaft-fill { position: absolute; inset: 0; background: linear-gradient(to bottom, var(--violet), var(--violet-deep)); transform-origin: top; transform: scaleY(0); }
.stratum {
    display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 48px); align-items: center;
    margin-left: calc(var(--depth) * 4vw); max-width: 74rem;
}
.land-shot { object-fit: cover; object-position: 50% 60%; display: block; }
.dungeon-grid { margin: 8vh auto 0; padding: 0 var(--gutter); display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: 2.4rem 1.6rem; }
.dungeon h3 { color: var(--ivory); font-size: clamp(1.15rem, 1.6vw, 1.4rem); margin-top: 0.9rem; }
.dungeon-under { font-style: italic; color: var(--muted); font-size: 1.05rem; margin-top: 0.2rem; }
.dungeon-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s; }
.dungeon:hover .dungeon-shot { transform: scale(1.04); }
.stratum-art { position: relative; aspect-ratio: 16 / 9; background: #050408; border: 1px solid var(--stone-edge); overflow: hidden; }
.stratum-canvas { width: 100%; height: 100%; display: block; }
.stratum-media { z-index: 1; }
.stratum h3 { color: var(--ivory); font-size: clamp(1.6rem, 2.6vw, 2.3rem); }
.under { font-style: italic; color: var(--muted); margin-top: 0.3rem; }
.halls { list-style: none; margin-top: 1.3rem; display: grid; gap: 0.5rem; }
.halls li { font-family: var(--display); font-size: 0.95rem; letter-spacing: 0.08em; color: var(--ivory-2); padding-left: 1.4rem; position: relative; }
.halls li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 0.6rem; height: 1px; background: var(--gold-dim); }
.halls .chamber { color: #c0a6ff; }
.depth-rules { margin: 10vh auto 0; max-width: 46rem; padding: 0 var(--gutter); display: grid; gap: 1rem; text-align: center; color: var(--ivory-2); }

/* Bosses: CSS sticky stack, GSAP only dims the one being covered */
.dwellers-sec { position: relative; }
.dwellers-title { text-align: center; padding: 16vh 16px 10vh; }
.boss {
    position: sticky; top: 0; min-height: 100vh; min-height: 100dvh;
    display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: clamp(20px, 4vw, 70px);
    padding: 72px var(--gutter) 40px;
    background: radial-gradient(60vmax 50vmax at 30% 55%, var(--cg, transparent), transparent 70%), var(--void);
    border-top: 1px solid var(--stone-edge);
}
.boss-art { position: relative; justify-self: center; width: min(100%, 78vh); aspect-ratio: 1; }
/* scaled and faded on scroll as the next boss slides over: keep them on their own GPU layers */
.boss > .boss-art, .boss > .boss-copy { will-change: transform, opacity; }
.sigil { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; color: var(--c); }
.sigil-spin { animation: spin 160s linear infinite; will-change: transform; }
.sigil-spin.rev { animation-duration: 110s; animation-direction: reverse; }
.boss-sealed .sigil-spin { animation: none; }
.boss-media { object-fit: contain; z-index: 1; }
.boss-title { font-style: italic; color: var(--muted); font-size: 1.2rem; }
.boss-name { font-size: clamp(2.4rem, 5.6vw, 5.2rem); font-weight: 700; color: var(--gold-hi); margin: 0.3rem 0 1.2rem; letter-spacing: 0.04em; }
.boss-myth { font-size: clamp(1.3rem, 2vw, 1.75rem); font-style: italic; max-width: 30ch; line-height: 1.35; }
.forms { list-style: none; display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; margin-top: 2rem; }
.forms li { font-family: var(--display); font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ivory-2); display: flex; gap: 0.5rem; align-items: baseline; border-bottom: 2px solid var(--fc); padding-bottom: 0.3rem; }
.forms .numeral { color: var(--fc); }
.boss-sealed .boss-name { color: #4b4458; letter-spacing: 0.3em; }
.boss-name.runes { font-family: var(--rune); font-weight: 400; letter-spacing: 0.18em; font-size: clamp(2.2rem, 4.6vw, 4.4rem); text-shadow: 0 0 24px var(--cg, transparent); }
.stratum-line { font-style: italic; font-size: clamp(1.3rem, 2vw, 1.75rem); line-height: 1.35; max-width: 24ch; color: var(--ivory); }
.tablet .runes { font-family: var(--rune); font-size: 1.5rem; letter-spacing: 0.32em; color: var(--ivory-2); opacity: 0.85; }
.tablet { min-height: 4.4rem; align-content: center; }
/* relics are silhouettes: the shape is the tease */
/* the silhouettes, rim and glow are baked into img/relic_N.webp: no runtime filters */
.boss-sealed .boss-myth { color: var(--ivory-2); max-width: 32ch; }
.odd-rune {
    position: absolute; left: 70%; top: 13%;
    font-family: var(--rune); font-size: clamp(20px, 2.4vw, 30px); line-height: 1;
    color: #7a6f92; background: none; border: 0; cursor: pointer; padding: 10px;
    transform: rotate(180deg); animation: odd 3.7s ease-in-out infinite;
}
.odd-rune:hover, .odd-rune:focus-visible { color: var(--gold-hi); outline: none; text-shadow: 0 0 12px var(--gold); }
.odd-rune.found { color: var(--gold); }
@keyframes odd { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }

/* Curses */
.curses { padding: 18vh var(--gutter) 14vh; }
.curses h2 { font-family: var(--body); font-style: italic; font-weight: 500; letter-spacing: 0; max-width: 20ch; }
.tablets { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); margin-top: 8vh; }
.tablet-group h3 { font-size: 0.9rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-bottom: 1.2rem; }
.tablet-group ul { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.omen-group ul { grid-template-columns: 1fr; }
.tablet {
    background: linear-gradient(160deg, var(--stone-2), var(--stone) 60%, #15131b);
    border: 1px solid var(--stone-edge);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 -12px 24px rgba(0, 0, 0, 0.35);
    padding: 1.1rem 1.2rem 1.2rem; display: grid; gap: 0.35rem;
}
.tablet b { font-family: var(--display); font-weight: 600; letter-spacing: 0.08em; color: var(--ivory); }
.tablet span { font-size: 1.05rem; color: var(--ivory-2); line-height: 1.4; }
.omen-group .tablet { border-left: 2px solid var(--violet-deep); }

/* Relics */
.boss-kicker { font-family: var(--display); font-size: 0.8rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--c); margin-bottom: 0.4rem; }
.boss-note { margin-top: 1.4rem; font-family: var(--display); font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-hi); max-width: 34ch; line-height: 1.6; }

/* Carry it home: a trail of steps down a gold thread */
.haul { padding: 14vh var(--gutter) 16vh; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(28px, 6vw, 100px); align-items: start; }
.haul-head { position: sticky; top: 18vh; }
.haul-steps { list-style: none; position: relative; display: grid; gap: 3.2rem; padding-left: 2.4rem; }
.haul-steps::before { content: ''; position: absolute; left: 0.45rem; top: 0.6rem; bottom: 0.6rem; width: 1px; background: linear-gradient(to bottom, var(--gold-dim), rgba(198, 161, 91, 0)); }
.haul-step { position: relative; }
.haul-step::before { content: ''; position: absolute; left: -2.4rem; top: 0.45rem; width: 0.9rem; height: 0.9rem; transform: rotate(45deg); background: var(--void); border: 1px solid var(--gold); }
.haul-step h3 { color: var(--gold-hi); font-size: clamp(1.2rem, 1.7vw, 1.5rem); margin-bottom: 0.5rem; }
.haul-step p { color: var(--ivory-2); font-size: clamp(1.1rem, 1.4vw, 1.3rem); max-width: 46ch; line-height: 1.45; }

/* Flasks */
.flasks {
    padding: 16vh var(--gutter) 10vh;
    display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(28px, 6vw, 100px); align-items: center;
}
.flask-art { position: relative; justify-self: center; width: min(100%, 26rem); aspect-ratio: 1; }
.flask-img { position: absolute; left: 4%; top: 2%; width: 74%; height: auto; animation: float 7s ease-in-out infinite; will-change: transform; }
.belt-img { position: absolute; right: 0; bottom: 0; width: 56%; height: auto; }
.flask-copy .points { margin-top: 2rem; }
.lite .flask-img, .pf-no-halo .flask-img { animation: none; }

.relics { padding: 18vh var(--gutter) 16vh; text-align: center; }
.relic-stage { position: relative; margin: 8vh auto 0; width: min(100%, 860px); aspect-ratio: 1; }
.relic-featured { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(22rem, 46%); display: grid; justify-items: center; gap: 1rem; }
.relic-featured img { width: 200px; height: 200px; margin: -36px 0; position: relative; z-index: 1; animation: float 6s ease-in-out infinite; will-change: transform; }
.relic-halo {
    position: absolute; top: -36px; left: 50%; width: 200px; height: 200px; margin-left: -100px; border-radius: 50%;
    background: conic-gradient(from 0deg, transparent, rgba(198, 161, 91, 0.55), transparent 30%, rgba(141, 114, 255, 0.4), transparent 60%, rgba(198, 161, 91, 0.5), transparent);
    -webkit-mask: radial-gradient(circle, transparent 58%, #000 60%, #000 64%, transparent 66%);
            mask: radial-gradient(circle, transparent 58%, #000 60%, #000 64%, transparent 66%);
    animation: spin 24s linear infinite;
}
.relic-featured figcaption { display: grid; gap: 0.4rem; }
.kicker { font-family: var(--display); font-size: 0.74rem; letter-spacing: 0.2em; text-transform: uppercase; color: #c0a6ff; }
.relic-name { font-family: var(--display); font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: 700; color: var(--gold-hi); }
.relic-desc { font-size: 1.05rem; color: var(--ivory-2); }
.relic-ring { list-style: none; position: absolute; inset: 0; }
.relic {
    --a: calc(var(--i) * 36deg - 90deg);
    position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px;
    transform: rotate(var(--a)) translate(min(390px, 44vw)) rotate(calc(-1 * var(--a)));
    display: grid; place-items: center; outline: none;
}
.relic img { width: 80px; height: 80px; max-width: none; transition: transform .4s; }
.relic:hover img, .relic:focus-visible img { transform: scale(1.18); }
.plate {
    position: absolute; top: 100%; left: 50%; transform: translate(-50%, 6px); width: max-content; max-width: 13rem;
    display: grid; gap: 0.1rem; padding: 0.45rem 0.8rem;
    background: #0d0b12; border: 1px solid var(--gold-dim);
    opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s; z-index: 2;
}
.plate b { font-family: var(--display); font-size: 0.86rem; color: var(--gold-hi); font-weight: 600; letter-spacing: 0.04em; }
.plate em { font-size: 0.92rem; color: var(--muted); }
.relic:hover .plate, .relic:focus-visible .plate { opacity: 1; transform: translate(-50%, 0); }
.sealed-mark { width: 56px; height: 56px; display: grid; place-items: center; border: 1px dashed #4b4458; border-radius: 50%; font-family: var(--display); color: #5b536a; font-size: 1.5rem; }
.relic-sealed .plate b { color: #6b6378; }
@keyframes float { 0%, 100% { transform: translateY(-6px); } 50% { transform: translateY(6px); } }
@keyframes spin { to { transform: rotate(360deg); } }

/* Invitation */
.invitation { position: relative; height: 100vh; height: 100dvh; min-height: 560px; overflow: hidden; }
.horizon-end::after {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse 22% 50% at 50% 70%, rgba(200, 180, 255, 0.55), rgba(141, 114, 255, 0.18) 45%, transparent 75%);
}
.invite-copy { position: absolute; left: 0; right: 0; bottom: 7vh; text-align: center; padding: 0 16px; z-index: 3; }
.invite-copy h2 { font-size: clamp(1.9rem, 3.8vw, 3.4rem); text-shadow: 0 2px 20px #000, 0 0 40px rgba(7, 6, 11, 0.9); }
.invite-copy .lede { margin: 1rem auto 0; text-shadow: 0 1px 12px #000; }
.cta {
    display: inline-block; margin-top: 2rem; padding: 1rem 2.4rem;
    font-family: var(--display); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.2em; text-transform: uppercase; white-space: nowrap;
    color: var(--ivory); text-decoration: none; background: rgba(7, 6, 11, 0.85);
    border: 1px solid var(--gold); box-shadow: inset 0 0 0 4px rgba(7, 6, 11, 0.85), inset 0 0 0 5px rgba(198, 161, 91, 0.35);
    transition: background .3s, color .3s;
}
.cta:hover, .cta:focus-visible { background: var(--gold); color: #120e08; outline: none; }
.cta:active { transform: translateY(1px); }

/* Footer */
.foot { padding: 8vh var(--gutter) 6vh; text-align: center; display: grid; gap: 1rem; color: var(--muted); font-size: 1.05rem; border-top: 1px solid var(--stone-edge); background: var(--void); }
.week { color: var(--ivory-2); }
#countdown { font-family: var(--display); color: var(--gold-hi); letter-spacing: 0.05em; }
.foot-links { display: flex; justify-content: center; gap: 2rem; font-family: var(--display); font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; }
.foot-links a { text-decoration: none; color: var(--ivory-2); }
.foot-links a:hover { color: var(--gold-hi); }
.hint { font-style: italic; font-size: 0.98rem; display: flex; justify-content: center; align-items: center; gap: 0.6rem; }
.hint-rune { font-family: var(--rune); font-style: normal; display: inline-block; transform: rotate(180deg); color: #7a6f92; }

/* Secret note */
.note { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 16px; background: rgba(4, 3, 7, 0.88); }
.note[hidden] { display: none; }
.note-paper {
    width: min(34rem, 100%); padding: 2.6rem 2.4rem 2.2rem; color: #2a2016;
    background: linear-gradient(170deg, #d8c79f, #c4ae80 60%, #b39a6a);
    clip-path: polygon(0 3%, 6% 0, 18% 2%, 31% 0, 47% 3%, 62% 0, 78% 2%, 92% 0, 100% 3%, 99% 22%, 100% 47%, 98% 71%, 100% 96%, 86% 100%, 70% 97%, 52% 100%, 36% 98%, 20% 100%, 4% 97%, 1% 74%, 0 50%, 2% 26%);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.8);
    display: grid; gap: 0.9rem;
}
.note-paper h3 { font-family: var(--body); font-style: italic; font-weight: 500; font-size: 1.05rem; letter-spacing: 0; color: #5a4630; }
.note-paper p { font-size: 1.3rem; line-height: 1.4; }
.note-close {
    justify-self: end; margin-top: 0.6rem; padding: 0.55rem 1.1rem;
    font-family: var(--display); font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase;
    background: transparent; color: #3a2c1c; border: 1px solid rgba(58, 44, 28, 0.5); cursor: pointer;
}
.note-close:hover, .note-close:focus-visible { background: #3a2c1c; color: #e8dcc0; outline: none; }

/* The ARG: letters, the answer box, the marks on the arch, the last day's tally */
.note-paper { max-height: calc(100vh - 32px); overflow-y: auto; overscroll-behavior: contain; }
.note-paper .arg-carved { font-family: var(--rune); font-size: 1.5rem; letter-spacing: 0.24em; color: #4a3826; }
.arg-key { display: grid; grid-template-columns: repeat(auto-fill, minmax(3.1rem, 1fr)); gap: 0.35rem; }
.arg-key span {
    display: grid; justify-items: center; padding: 0.3rem 0.1rem; border: 1px solid rgba(58, 44, 28, 0.3);
    font-family: var(--display); font-size: 0.82rem; letter-spacing: 0.08em; color: #5a4630;
}
.arg-key b { font-family: var(--rune); font-weight: 400; font-size: 1.35rem; color: #2a2016; line-height: 1.2; }
.note-paper .arg-letter { display: grid; gap: 0.6rem; padding-top: 1rem; border-top: 1px solid rgba(58, 44, 28, 0.35); }
.note-paper .arg-letter h4 { font-family: var(--display); font-size: 0.8rem; letter-spacing: 0.3em; color: #6a5236; }
.note-paper .arg-hint { font-style: italic; font-size: 1.1rem; color: #6a5236; }
.arg-speak { display: grid; gap: 0.5rem; padding-top: 1rem; border-top: 1px solid rgba(58, 44, 28, 0.35); }
.arg-speak label { font-family: var(--display); font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase; color: #3a2c1c; }
.arg-row { display: flex; gap: 0.5rem; }
.arg-row input {
    flex: 1; min-width: 0; padding: 0.55rem 0.7rem; font: inherit; font-size: 1.15rem; color: #2a2016;
    background: rgba(255, 248, 230, 0.35); border: 1px solid rgba(58, 44, 28, 0.5); border-radius: 0;
}
.arg-row input:focus { outline: none; border-color: #3a2c1c; background: rgba(255, 248, 230, 0.55); }
.arg-row button {
    padding: 0.55rem 1rem; font-family: var(--display); font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase;
    background: #3a2c1c; color: #e8dcc0; border: 0; cursor: pointer;
}
.arg-row button:disabled { opacity: 0.5; cursor: default; }
.note-paper .arg-reply { min-height: 1.4em; font-size: 1.1rem; font-style: italic; color: #6a2a1c; }
.note-paper .arg-reply.heard { color: #3a2470; }
.chart-side .arg-letter {
    display: grid; gap: 0.5rem; padding: 1rem 1.1rem; margin-bottom: 1.2rem; font-style: italic; font-size: 1.1rem;
    color: var(--ivory); border-left: 2px solid var(--violet);
}

.gate .wardens text { font-family: var(--rune); font-size: 30px; text-anchor: middle; fill: #2e2938; }
.gate .wardens text.lit { fill: var(--gold-hi); filter: drop-shadow(0 0 6px rgba(230, 201, 138, 0.8)); }
.gate-burn .keystone { fill: var(--gold-hi); }
.gate-burn .keystone-glow { fill: var(--gold); opacity: 0.6; animation: keystone-burn 3.2s ease-in-out infinite; transform-origin: 800px 100px; }
@keyframes keystone-burn { 50% { opacity: 0.25; transform: scale(1.6); } }

.arg-tally { display: grid; gap: 0.7rem; width: min(30rem, 100%); margin: 1.4rem auto 0; text-align: left; }
.arg-side { display: grid; grid-template-columns: 1fr auto; gap: 0.3rem 0.8rem; align-items: center; }
.arg-words { font-family: var(--display); font-size: 0.86rem; letter-spacing: 0.08em; color: var(--ivory); text-shadow: 0 1px 10px #000; }
.arg-words i { font-family: var(--body); color: var(--ivory-2); letter-spacing: 0; }
.arg-bar { grid-column: 1; height: 4px; background: rgba(255, 255, 255, 0.08); }
.arg-bar span { display: block; height: 100%; width: 0; transition: width 1.2s ease; }
.arg-side[data-side="gate"] .arg-bar span { background: var(--violet); }
.arg-side[data-side="unsigned"] .arg-bar span { background: var(--gold); }
.arg-count { grid-column: 2; grid-row: 1 / span 2; font-family: var(--display); font-size: 1.4rem; color: var(--gold-hi); }
.arg-end { color: var(--gold-hi); }

:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }

/* No JS, no GSAP, or reduced motion: nothing pins, everything is laid out */
html:not(.js) .chart-pin, .static .chart-pin { height: auto; padding: 4vh 0; }
html:not(.js) .fragments, .static .fragments { min-height: 0; display: grid; gap: 1rem; }
html:not(.js) .fragment, .static .fragment { position: static; opacity: 1; transform: none; }
html:not(.js) .legend li, .static .legend li { opacity: 1; }
html:not(.js) .lands-track, .static .lands-track { flex-wrap: wrap; width: auto; height: auto; padding: 12vh var(--gutter) 6vh; align-items: stretch; }
html:not(.js) .lands-intro, .static .lands-intro { flex-basis: 100%; }

/* lite: set by realms.js when frames run slow */
.lite .sigil-spin, .lite .relic-halo, .lite .relic-featured img { animation: none; }
.lite .scene .veil, .lite #embers { display: none; }

/* Perf panel (?perf or Shift+P) and its effect switches */
.pf-no-scene .scene, .pf-no-veil .scene .veil, .pf-no-gate .gate-wrap, .pf-no-sky #sky, .pf-no-sky #dark { display: none; }
.pf-no-spin .sigil-spin, .pf-no-halo .relic-halo, .pf-no-halo .relic-featured img { animation: none; }
.pf-no-map #chart { visibility: hidden; }
.perf-panel {
    position: fixed; left: 12px; bottom: 12px; z-index: 90; width: min(380px, calc(100vw - 24px)); max-height: 80vh; overflow: auto;
    padding: 12px 14px; background: #0d0b12; border: 1px solid var(--gold-dim); color: var(--ivory-2);
    font: 12px/1.45 ui-monospace, Consolas, monospace;
}
.perf-panel p { margin: 0 0 6px; }
.perf-panel .bad { color: #ff8f7a; }
.perf-panel table { width: 100%; border-collapse: collapse; margin: 6px 0; }
.perf-panel th, .perf-panel td { text-align: left; padding: 2px 4px; border-bottom: 1px solid #24212c; }
.perf-panel tr.here td { color: var(--gold-hi); }
.pf-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.pf-head button, .pf-copy { background: none; border: 1px solid var(--gold-dim); color: var(--ivory); font: inherit; padding: 2px 10px; cursor: pointer; }
.pf-tip { color: var(--muted); }
.pf-fx { display: grid; gap: 3px; margin: 8px 0 10px; }
.pf-fx label { cursor: pointer; }

/* Phones and narrow tablets: everything stacks, nothing pins except the hero */
@media (max-width: 760px) {
    body { font-size: 1.12rem; }
    .topbar { padding: 0 16px; }
    .disc-head { padding: 12vh 16px 4vh; }
    .chart-pin { height: auto; display: block; }
    .chart-stage { grid-template-columns: 1fr; padding: 0 16px; }
    .chart-frame { width: 100%; justify-self: stretch; }
    .fragments { min-height: 0; display: grid; gap: 1rem; }
    .fragment { position: static; }
    .lands-track { flex-direction: column; align-items: stretch; height: auto; width: auto; padding: 12vh 16px 4vh; gap: 18px; }
    .lands-intro { flex: none; padding: 0 0 2vh; }
    .land { flex: none; height: 30rem; }
    .skies { grid-template-columns: 1fr; padding: 12vh 16px; }
    .sky-dome { width: min(100%, 26rem); }
    .descent { padding: 0 16px 0 40px; gap: 9vh; }
    .shaft { left: 18px; }
    .stratum { grid-template-columns: 1fr; margin-left: 0; }
    .depths-head, .depth-rules { padding: 0 16px; }
    .boss { position: relative; grid-template-columns: 1fr; padding: 72px 16px 56px; }
    .boss-art { width: min(100%, 22rem); }
    .curses { padding: 12vh 16px; }
    .tablets, .tablet-group ul { grid-template-columns: 1fr; }
    .flasks { grid-template-columns: 1fr; padding: 12vh 16px 6vh; }
    .haul { grid-template-columns: 1fr; padding: 10vh 16px 12vh; }
    .haul-head { position: static; }
    .flask-art { width: min(100%, 18rem); }
    .relics { padding: 12vh 16px; }
    .relic-stage { aspect-ratio: auto; }
    .relic-featured { position: relative; left: auto; top: auto; transform: none; width: 100%; margin: 0 auto 3rem; }
    .relic-ring { position: static; display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 12px; }
    .relic { position: relative; left: auto; top: auto; margin: 0; width: auto; height: auto; transform: none; display: grid; gap: 0.5rem; }
    .plate { position: static; transform: none; opacity: 1; background: none; border: 0; padding: 0; max-width: none; }
    .relic:hover .plate, .relic:focus-visible .plate { transform: none; }
    .foot-links { gap: 1.2rem; flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .sigil-draw * { stroke-dashoffset: 0; }
    #threshold p { opacity: 1; }
    .fragment { position: static; opacity: 1; transform: none; }
    .fragments { min-height: 0; display: grid; gap: 1rem; }
    .legend li { opacity: 1; }
    .gate .band-lit { stroke-dashoffset: 0; }
}