/*
 * Moonline RP public site (index.html, rules.html, wiki.html) - Season 02: "Same city, lights down".
 *
 * The same night, palette, type and glass as the player portal (see html/portal/STYLE_GUIDE.md), so the front door and the
 * portal read as one place: indigo night ramp, violet hairlines, cyan / magenta light, Chakra Petch for titles, labels and
 * numerals, the system UI face for reading, chamfered glass panels with a lit top edge, the moon and the city.
 *
 * Self-contained on purpose: fonts and art are in assets/ (copied from the portal's, so this site never depends on the portal
 * being deployed). Motion follows the portal's rules: every loop obeys Pause motion, a hidden tab and prefers-reduced-motion.
 *
 * Sections: 1 fonts  2 tokens  3 world  4 masthead + navigation  5 type  6 panels  7 buttons  8 landing hero
 *           9 landing sections  10 footer  11 rules page  12 wiki page  12b living glass  13 motion + adaptation
 */

/* ------------------------------------------------------------------ 1. fonts (Chakra Petch 500 / 700, Latin subset, SIL OFL) */
@font-face {
    font-family: "Chakra Petch";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("assets/fonts/chakra-petch-500.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Chakra Petch";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("assets/fonts/chakra-petch-700.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ------------------------------------------------------------------ 2. tokens */
:root {
    color-scheme: dark;
    --night-0: #03010d;
    --night-1: #05031a;
    --night-2: #0a0526;
    --night-3: #130b40;
    --night-4: #1c1158;
    --cyan: #00f0ff;
    --pink: #ff38b8;
    --violet: #a97dff;
    --cyan-soft: #8ff7ff;
    --pink-soft: #ff8fdb;
    --violet-soft: #c9b6ff;
    --text: #f5f4ff;
    --text-2: #dcd8f4;
    --muted: #b7b6c9;
    --dim: #a59fd2;
    --line: rgba(156, 130, 255, 0.24);
    --line-soft: rgba(156, 130, 255, 0.13);
    --rim: rgba(176, 150, 255, 0.42);
    --rim-hi: rgba(226, 216, 255, 0.62);
    --fill-top: rgba(19, 11, 62, 0.88);
    --fill-bot: rgba(7, 3, 30, 0.92);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --display: "Chakra Petch", "Trebuchet MS", ui-sans-serif, system-ui, sans-serif;
    --body: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mast-h: 96px;
    --page-w: 1180px;
}

/* ------------------------------------------------------------------ 3. world: night ambience, grain, vignette */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body.site {
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    margin: 0;
    font: 400 1rem/1.6 var(--body);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
    /* The far-shore glow is the body background at the END of the page (not fixed), so tall pages stay seamless. */
    background:
        radial-gradient(90% 100% at 50% 118%, rgba(255, 56, 184, 0.13), transparent 70%) 50% 100% / 100% min(52vh, 480px) no-repeat,
        radial-gradient(70% 80% at 0% 100%, rgba(0, 240, 255, 0.05), transparent 70%) 0 100% / 100% min(52vh, 480px) no-repeat,
        #080326;
}
body.site::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -3;
    pointer-events: none;
    background: linear-gradient(180deg, var(--night-1) 0%, #060320 45%, #080326 100%);
}
/* Film grain + vignette from the title screen, beneath the content only. */
body.site::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(125% 95% at 50% 40%, transparent 58%, rgba(0, 0, 0, 0.5) 100%),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .055 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>") 0 0 / 180px 180px;
}
.site ::selection { background: rgba(255, 56, 184, 0.42); color: #fff; }
.site, .site * { scrollbar-color: rgba(169, 125, 255, 0.55) transparent; }
.site *::-webkit-scrollbar { width: 8px; height: 8px; }
.site *::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(169, 125, 255, 0.8), rgba(255, 56, 184, 0.5)); }
.site img { max-width: 100%; height: auto; }
.site a { color: var(--cyan-soft); text-underline-offset: 3px; }
.site a:hover { color: #fff; }
.site a:focus-visible, .site button:focus-visible, .site input:focus-visible, .site summary:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; z-index: 2000; left: 12px; top: -64px; padding: 12px 18px; background: var(--night-2); border: 1px solid var(--cyan); color: #fff; font: 700 0.8rem/1 var(--display); letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; }
.skip-link:focus { top: 12px; }
.site-main { position: relative; z-index: 1; }
.container { width: 100%; max-width: var(--page-w); margin: 0 auto; padding: 0 32px; }

/* ------------------------------------------------------------------ 4. masthead (the horizon) + navigation */
.site-header {
    position: relative;
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    gap: 20px;
    min-height: var(--mast-h);
    padding: 0 32px;
    overflow-x: clip;
}
.mast-art, .mast-water { position: absolute; left: 0; right: 0; pointer-events: none; }
.mast-art {
    top: 0;
    bottom: 0;
    z-index: -1;
    overflow: hidden;
    background:
        radial-gradient(70% 120% at 50% 100%, rgba(255, 56, 184, 0.36), transparent 64%),
        radial-gradient(40% 90% at 88% 100%, rgba(0, 240, 255, 0.07), transparent 70%),
        linear-gradient(180deg, #02020a 0%, #060316 28%, #110832 58%, #2b0d50 100%);
}
.mast-art > i { position: absolute; display: block; }
.mast-art::before {
    content: "";
    position: absolute;
    inset: 0 0 45% 0;
    background:
        radial-gradient(1px 1px at 12% 22%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1px 1px at 27% 58%, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(1.4px 1.4px at 41% 18%, rgba(200, 220, 255, 0.7), transparent),
        radial-gradient(1px 1px at 58% 46%, rgba(255, 255, 255, 0.45), transparent),
        radial-gradient(1.2px 1.2px at 73% 14%, rgba(255, 230, 250, 0.7), transparent),
        radial-gradient(1px 1px at 86% 52%, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(1.2px 1.2px at 94% 20%, rgba(200, 240, 255, 0.6), transparent);
    opacity: 0.8;
}
.mast-moon {
    --moon: 112px;
    left: 50%;
    bottom: calc(var(--moon) * -0.2);
    width: var(--moon);
    height: var(--moon);
    margin-left: calc(var(--moon) / -2);
    background: url("assets/art/moon-mark.svg?v=1") center / 100% no-repeat;
    filter: drop-shadow(0 0 20px rgba(255, 90, 214, 0.5));
    opacity: 0.94;
}
.mast-moon::after {
    content: "";
    position: absolute;
    inset: -45%;
    z-index: -1;
    background: radial-gradient(closest-side, rgba(255, 72, 210, 0.32), rgba(120, 70, 255, 0.16) 48%, transparent 76%);
}
.mast-city { left: 0; right: 0; bottom: 0; background-repeat: repeat-x; background-size: auto 100%; }
.mast-city-far { height: 104px; background-image: url("assets/art/city-far.svg?v=1"); background-position: 34% 100%; opacity: 0.55; }
.mast-city-near { height: 70px; background-image: url("assets/art/city-near.svg?v=1"); background-position: 71% 100%; }
.mast-shore {
    --shore-h: 84px;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(var(--shore-h) * 0.4111);
    background: url("assets/art/shore.svg?v=1") 50% 0 / auto var(--shore-h) repeat-x;
    opacity: 0.95;
}
.mast-water {
    top: 100%;
    z-index: -1;
    height: 250px;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(42, 10, 72, 0.86) 0%, rgba(23, 5, 65, 0.6) 10%, rgba(13, 3, 50, 0.34) 34%, transparent 100%);
}
.mast-water::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(180deg, rgba(255, 190, 240, 0.055) 0 1px, transparent 1px 5px),
        repeating-linear-gradient(180deg, rgba(140, 150, 255, 0.045) 0 1px, transparent 1px 8px);
    -webkit-mask-image: linear-gradient(180deg, #000 0, transparent 48%);
    mask-image: linear-gradient(180deg, #000 0, transparent 48%);
}
.mast-water::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: 150px;
    height: 190px;
    transform: translateX(-50%);
    background:
        linear-gradient(rgba(12, 3, 48, 0.55), rgba(12, 3, 48, 0.55)) 0 10% / 100% 6px no-repeat,
        linear-gradient(rgba(12, 3, 48, 0.5), rgba(12, 3, 48, 0.5)) 0 19% / 100% 5px no-repeat,
        linear-gradient(rgba(12, 3, 48, 0.45), rgba(12, 3, 48, 0.45)) 0 28% / 100% 4px no-repeat,
        linear-gradient(rgba(12, 3, 48, 0.4), rgba(12, 3, 48, 0.4)) 0 37% / 100% 3px no-repeat,
        linear-gradient(180deg, rgba(255, 96, 216, 0.36), rgba(170, 96, 255, 0.2) 34%, transparent 88%);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 34%, #000 66%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 34%, #000 66%, transparent);
}
.mast-refl-city, .mast-refl-shore { position: absolute; left: 0; right: 0; top: 0; transform-origin: 50% 0; background-repeat: repeat-x; }
.mast-refl-city {
    height: 70px;
    background-image: url("assets/art/city-near.svg?v=1");
    background-size: auto 100%;
    background-position: 71% 100%;
    transform: scaleY(-0.9);
    filter: blur(1.2px);
    opacity: 0.2;
}
.mast-refl-shore {
    --shore-h: 84px;
    height: calc(var(--shore-h) * 0.4111);
    background-image: url("assets/art/shore.svg?v=1");
    background-size: auto var(--shore-h);
    background-position: 50% 0;
    transform: scaleY(-3.4);
    filter: blur(0.6px);
    opacity: 0.5;
    -webkit-mask-image: repeating-linear-gradient(180deg, #000 0 3px, rgba(0, 0, 0, 0.25) 3px 5px);
    mask-image: repeating-linear-gradient(180deg, #000 0 3px, rgba(0, 0, 0, 0.25) 3px 5px);
}

/* The landing page's header floats over the hero's own sky and turns into a solid bar once the page has scrolled. */
.site-header.is-over {
    position: fixed;
    z-index: 50;
    top: 0;
    left: 0;
    right: 0;
    min-height: 76px;
    transition: background-color 240ms ease, box-shadow 240ms ease;
}
.site-header.is-over .mast-art, .site-header.is-over .mast-water { display: none; }
.site-header.is-over.is-solid {
    background: linear-gradient(180deg, rgba(5, 3, 26, 0.96), rgba(8, 3, 38, 0.92));
    box-shadow: 0 1px 0 var(--line), 0 12px 28px -14px rgba(0, 0, 0, 0.8);
}

.site-brand { align-self: center; display: flex; align-items: center; gap: 13px; color: inherit; text-decoration: none; }
.brand-logo { width: 44px; height: 44px; filter: drop-shadow(0 0 10px rgba(255, 90, 214, 0.45)); }
.brand-copy { display: grid; gap: 4px; }
.site-brand-kicker { font: 500 0.68rem/1 var(--display); letter-spacing: 0.3em; text-transform: uppercase; color: var(--cyan-soft); }
.site-brand-title { white-space: nowrap; font: 700 1.3rem/1 var(--display); letter-spacing: 0.2em; text-transform: uppercase; color: #fff; text-shadow: 0 0 18px rgba(255, 56, 184, 0.5); }
.site-brand:hover .site-brand-title { color: #fff; }

.site-nav { align-self: flex-end; margin-left: auto; display: flex; align-items: flex-end; gap: 4px; }
.site-header.is-over .site-nav { align-self: stretch; align-items: stretch; }
.site-nav a {
    position: relative;
    display: inline-flex;
    white-space: nowrap;
    align-items: center;
    min-height: 54px;
    padding: 0 16px;
    font: 700 0.78rem/1 var(--display);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #d6d0f2;
    text-decoration: none;
    clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px);
    transition: color 150ms ease, background-color 150ms ease;
}
.site-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--cyan), var(--violet) 60%, var(--pink));
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform 240ms var(--ease-out);
}
.site-nav a:hover { color: #fff; background: rgba(169, 125, 255, 0.14); }
.site-nav a:hover::after { transform: scaleX(0.4); }
.site-nav a[aria-current] { color: #fff; background: linear-gradient(180deg, rgba(0, 240, 255, 0.02), rgba(0, 240, 255, 0.2)); }
.site-nav a[aria-current]::after { transform: scaleX(1); box-shadow: 0 0 16px rgba(0, 240, 255, 0.7); }
.site-nav a:focus-visible { outline-offset: -4px; }
/* the way in for players: the one pink thing in the bar */
.site-nav a.nav-cta {
    align-self: center;
    min-height: 42px;
    margin-left: 12px;
    padding: 0 18px;
    gap: 9px;
    color: #17000e;
    background: linear-gradient(180deg, #ffb8e7 0, #ff65ca 10%, #ff3cb5 50%, #f82aa5 51%, #ff4bb6 100%);
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    transition: filter 200ms ease;
}
.site-nav a.nav-cta::after { display: none; }
.site-nav a.nav-cta:hover { color: #17000e; background: linear-gradient(180deg, #ffb8e7 0, #ff65ca 10%, #ff3cb5 50%, #f82aa5 51%, #ff4bb6 100%); filter: brightness(1.12) saturate(1.1); }
.site-nav a.nav-cta .icon { width: 18px; height: 18px; }

.nav-toggle {
    display: none;
    align-self: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 3px;
    background: rgba(10, 5, 38, 0.7);
    color: var(--text-2);
    cursor: pointer;
}
.nav-toggle:hover { border-color: var(--cyan); color: #fff; }
.nav-toggle .icon { width: 22px; height: 22px; margin: auto; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

.icon { display: inline-block; flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ------------------------------------------------------------------ 5. type */
.site h1, .site h2, .site h3 { text-wrap: balance; }
.site h1 {
    margin: 0;
    font: 700 clamp(1.9rem, 1.4rem + 2vw, 3rem)/1.08 var(--display);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 0 26px rgba(169, 125, 255, 0.4);
}
.site h2 { margin: 0; font: 700 1.35rem/1.25 var(--display); letter-spacing: 0.02em; color: #fff; }
.site h3 { margin: 0; font: 700 1.1rem/1.3 var(--display); letter-spacing: 0.03em; text-transform: uppercase; color: #fff; }
.site p { margin: 0; color: var(--text-2); }
.site .muted { color: var(--muted); }

.eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    font: 500 0.72rem/1.2 var(--display);
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--pink-soft);
}
.eyebrow::before {
    content: "";
    flex: none;
    width: 26px;
    height: 2px;
    background: linear-gradient(90deg, var(--pink), rgba(255, 56, 184, 0));
    box-shadow: 0 0 10px rgba(255, 56, 184, 0.7);
}
.section-heading { display: grid; gap: 0; margin-bottom: 36px; }
.section-heading h2 {
    font: 700 clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem)/1.15 var(--display);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-shadow: 0 0 24px rgba(169, 125, 255, 0.35);
}
.section-heading::after {
    content: "";
    display: block;
    width: 64px;
    height: 3px;
    margin-top: 18px;
    background: var(--pink);
    box-shadow: 0 0 16px rgba(255, 56, 184, 0.8);
}
/* the page title of the rules and the wiki: eyebrow, h1, a pink bar on a violet hairline */
.page-heading { position: relative; padding: 44px 0 26px; }
.page-heading::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, var(--pink) 0 64px, rgba(169, 125, 255, 0.4) 64px, rgba(169, 125, 255, 0.04));
}
.page-heading::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 64px;
    height: 3px;
    z-index: 1;
    background: var(--pink);
    box-shadow: 0 0 16px rgba(255, 56, 184, 0.8);
}
.page-heading .lead { max-width: 760px; margin-top: 16px; font-size: 1.08rem; color: var(--text-2); }

/* ------------------------------------------------------------------ 6. glass panels (chamfered, a hair of light on top) */
/* Shape lives on two clipped pseudo-elements so the element itself stays unclipped: outlines, focus rings and hover glow are not
   cut off. ::before = fill, ::after = edge hairlines + the two lit chamfer cuts. */
:is(.panel, .rules-card, .rules-sidebar, .wiki-sidebar, .wiki-content) {
    --c: 14px;
    --edge: var(--rim);
    --edge-top: var(--rim-hi);
    --cut-a: rgba(143, 247, 255, 0.85);
    --cut-b: rgba(255, 56, 184, 0.75);
    position: relative;
    isolation: isolate;
    min-width: 0;
}
:is(.panel, .rules-card, .rules-sidebar, .wiki-sidebar, .wiki-content)::before, :is(.panel, .rules-card, .rules-sidebar, .wiki-sidebar, .wiki-content)::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
}
:is(.panel, .rules-card, .rules-sidebar, .wiki-sidebar, .wiki-content)::before {
    z-index: -1;
    background:
        linear-gradient(112deg, transparent 0 46%, rgba(255, 255, 255, 0.02) 46% 54%, transparent 54%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0) 30%),
        linear-gradient(135deg, rgba(124, 84, 255, 0.08), transparent 55%),
        linear-gradient(180deg, var(--fill-top), var(--fill-bot));
}
:is(.panel, .rules-card, .rules-sidebar, .wiki-sidebar, .wiki-content)::after {
    z-index: 1;
    background:
        linear-gradient(90deg, transparent, var(--edge-top) 9%, var(--edge-top) 62%, transparent) 0 0 / 100% 1px no-repeat,
        linear-gradient(90deg, var(--edge), var(--edge)) 0 100% / 100% 1px no-repeat,
        linear-gradient(180deg, var(--edge), transparent) 0 0 / 1px 100% no-repeat,
        linear-gradient(180deg, transparent, var(--edge)) 100% 0 / 1px 100% no-repeat,
        linear-gradient(to bottom right, transparent 50%, var(--cut-a) 50%, var(--cut-a) calc(50% + 1.4px), transparent calc(50% + 1.4px)) 0 0 / var(--c) var(--c) no-repeat,
        linear-gradient(to bottom right, transparent calc(50% - 1.4px), var(--cut-b) calc(50% - 1.4px), var(--cut-b) 50%, transparent 50%) 100% 100% / var(--c) var(--c) no-repeat;
}
:is(.panel, .rules-card):nth-child(even) { --cut-a: rgba(255, 143, 219, 0.85); --cut-b: rgba(143, 247, 255, 0.75); }
.panel.is-lit:hover::before { filter: brightness(1.18); }
.panel { transition: none; }

/* a chamfered tile for an icon, as on the portal's character cards */
.symbol {
    display: grid;
    place-items: center;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(143, 247, 255, 0.45);
    color: var(--cyan);
    background: linear-gradient(145deg, rgba(0, 240, 255, 0.16), rgba(0, 240, 255, 0.02));
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.symbol .icon { width: 24px; height: 24px; }
:is(.panel, .rules-card):nth-child(even) .symbol { color: var(--pink-soft); border-color: rgba(255, 143, 219, 0.5); background: linear-gradient(145deg, rgba(255, 56, 184, 0.18), rgba(255, 56, 184, 0.02)); }

/* a small status chip: square corners, tracked Chakra, meaning is in the words */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    border: 1px solid rgba(143, 247, 255, 0.4);
    border-radius: 2px;
    background: rgba(0, 240, 255, 0.07);
    font: 500 0.68rem/1.2 var(--display);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--cyan-soft);
}

/* ------------------------------------------------------------------ 7. buttons (one chamfered command shape) */
.btn {
    --c: 12px;
    --b-rim: linear-gradient(180deg, #ffd0f0, #ff8edb 45%, #ff4fbd);
    --b-face: linear-gradient(180deg, #ffb8e7 0, #ff65ca 8%, #ff3cb5 48%, #f82aa5 49%, #ff4bb6 100%);
    --b-gloss: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 50%);
    --b-ink: #17000e;
    --b-glow: rgba(255, 56, 184, 0.4);
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 28px;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--b-ink);
    font: 700 0.84rem/1.2 var(--display);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 0 20px -6px var(--b-glow), 0 8px 16px -8px rgba(0, 0, 0, 0.7);
    transition: filter 200ms ease, transform 120ms ease, box-shadow 200ms ease;
}
.btn::before, .btn::after { content: ""; position: absolute; z-index: -1; pointer-events: none; }
.btn::before {
    inset: 0;
    background: var(--b-rim);
    clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
}
.btn::after {
    inset: 2px;
    background: var(--b-gloss), var(--b-face);
    clip-path: polygon(calc(var(--c) - 1.2px) 0, 100% 0, 100% calc(100% - var(--c) + 1.2px), calc(100% - var(--c) + 1.2px) 100%, 0 100%, 0 calc(var(--c) - 1.2px));
}
.site a.btn { color: var(--b-ink); }
.btn:hover { filter: brightness(1.1) saturate(1.1); box-shadow: 0 0 30px -4px var(--b-glow), 0 8px 16px -8px rgba(0, 0, 0, 0.7); }
.btn:active { filter: brightness(0.94); transform: translateY(1px); }
.btn .icon { width: 18px; height: 18px; }
.btn-secondary {
    --b-rim: linear-gradient(90deg, rgba(0, 240, 255, 0.8), rgba(160, 120, 255, 0.75) 55%, rgba(255, 56, 184, 0.8));
    --b-face: linear-gradient(180deg, #0f0838, #070324);
    --b-gloss: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 50%);
    --b-ink: #d8fbff;
    --b-glow: rgba(0, 240, 255, 0.2);
}
.site a.btn-secondary:hover { color: #fff; }
.btn-large { min-height: 58px; padding: 0 36px; font-size: 0.95rem; --c: 14px; }
.button-row { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: center; }

/* ------------------------------------------------------------------ 8. landing hero: the title screen
   The login's own scene (assets/art/* are the portal's), with its entrance (once per session), its ambient motion (twinkling stars, a shooting
   star, the moon's bloom, the wordmark's sweep), the WebGL water (assets/water.js: ripples that mirror the moon, skylines and shore lights, with a
   baked fallback), pointer parallax and a light that follows the pointer. Every loop is listed under "Ambient motion" below and obeys Pause
   motion (.is-still), a hidden tab (.is-paused) and reduced motion. */
.hero {
    --hero-h: max(100svh, 660px);
    --horizon: calc(var(--hero-h) * 0.56);
    --moon: min(calc(var(--hero-h) * 0.5), 84vw, 540px);
    --title-w: min(780px, 80vw);
    --title-h: calc(var(--title-w) / 4.4079);
    --shore-h: clamp(96px, calc(var(--hero-h) * 0.16), 190px);
    --sky-h: clamp(130px, calc(var(--hero-h) * 0.24), 300px);
    position: relative;
    isolation: isolate;
    height: var(--hero-h);
    overflow: hidden;
    text-align: center;
}
.hero .scene { position: absolute; inset: 0; z-index: 0; }
.hero .scene > * { position: absolute; pointer-events: none; }
.hero .sky {
    inset: 0;
    background:
        radial-gradient(130% 62% at 50% var(--horizon), rgba(255, 56, 184, 0.4), transparent 64%),
        linear-gradient(180deg, #02020a 0%, #060316 28%, #110832 50%, #2b0d50 var(--horizon), #050208 var(--horizon));
    animation: fade-in 0.7s ease backwards;
}
.hero .stars {
    inset: 0;
    -webkit-mask-image: linear-gradient(180deg, #000 0, #000 52%, transparent var(--horizon));
    mask-image: linear-gradient(180deg, #000 0, #000 52%, transparent var(--horizon));
    animation: fade-in 1.4s ease 0.1s backwards;
}
.hero .stars i { position: absolute; left: 0; top: 0; width: 1px; height: 1px; background: transparent; }
.hero .stars .stars-b { width: 2px; height: 2px; border-radius: 50%; animation: twinkle 5.2s ease-in-out infinite alternate; }
.hero .stars .stars-c { width: 2px; height: 2px; border-radius: 50%; animation: twinkle 3.4s ease-in-out -1.7s infinite alternate; }
.stars-a{box-shadow:23.8vw 24.9vh #dff6ff,91.6vw 20.1vh #bfeaff,6.6vw 0.1vh #ffe3f7,25.9vw 6.8vh #ffe3f7,54.1vw 25.3vh #ffe3f7,63.9vw 3.4vh #fff,86.8vw 23.4vh #fff,67.1vw 0.9vh #bfeaff,4.3vw 43.6vh #dff6ff,47.3vw 38.4vh #ffe3f7,71.4vw 56.3vh #ffe3f7,72.8vw 27.3vh #fff,87.9vw 1.7vh #fff,49.5vw 7.8vh #ffe3f7,77.9vw 50.2vh #ffe3f7,50.7vw 14.6vh #dff6ff,53.4vw 15.9vh #fff,90.4vw 35.4vh #fff,85.6vw 63.1vh #fff,69.9vw 11.3vh #bfeaff,90.5vw 26.7vh #fff,63.3vw 62.8vh #dff6ff,28.5vw 0.9vh #ffe3f7,8.9vw 45.3vh #ffe3f7,89.7vw 0.2vh #ffe3f7,76.9vw 51.8vh #fff,60.5vw 42.0vh #ffe3f7,71.8vw 11.5vh #dff6ff,50.5vw 63.9vh #dff6ff,0.7vw 2.0vh #bfeaff,3.1vw 5.2vh #ffe3f7,29.2vw 8.1vh #fff,98.0vw 12.0vh #dff6ff,95.9vw 54.0vh #ffe3f7,37.7vw 51.6vh #ffe3f7,64.4vw 28.7vh #bfeaff,10.3vw 61.3vh #bfeaff,27.1vw 31.6vh #fff,93.6vw 17.8vh #dff6ff,52.1vw 25.2vh #fff,78.8vw 62.8vh #dff6ff,2.0vw 30.2vh #fff,6.0vw 31.1vh #ffe3f7,35.3vw 56.0vh #bfeaff,70.7vw 40.0vh #fff,58.9vw 59.6vh #fff,96.3vw 7.5vh #ffe3f7,29.9vw 29.1vh #fff,36.4vw 10.6vh #dff6ff,84.4vw 8.1vh #ffe3f7,10.5vw 46.4vh #bfeaff,68.4vw 2.8vh #bfeaff,22.3vw 45.6vh #fff,32.8vw 35.0vh #fff,10.2vw 11.0vh #dff6ff,67.5vw 6.3vh #fff,8.0vw 40.3vh #fff,88.5vw 18.6vh #fff,78.7vw 0.3vh #fff,31.5vw 48.5vh #bfeaff,18.4vw 8.8vh #fff,80.6vw 12.3vh #fff,42.1vw 23.1vh #dff6ff,46.5vw 31.6vh #dff6ff,42.0vw 16.0vh #ffe3f7,15.6vw 0.0vh #bfeaff,98.7vw 17.6vh #fff,3.2vw 19.0vh #bfeaff,96.3vw 24.9vh #fff,86.2vw 50.5vh #dff6ff,12.0vw 7.2vh #fff,90.4vw 36.3vh #fff,89.7vw 54.3vh #bfeaff,4.9vw 20.6vh #fff,17.2vw 9.9vh #fff,52.5vw 16.3vh #bfeaff,11.4vw 2.6vh #bfeaff,47.7vw 43.7vh #dff6ff,22.1vw 2.5vh #fff,17.1vw 44.6vh #fff,82.3vw 0.0vh #bfeaff,86.3vw 0.6vh #dff6ff,24.8vw 30.4vh #bfeaff,42.3vw 20.0vh #fff,85.7vw 43.1vh #fff,12.5vw 1.0vh #fff,85.4vw 1.4vh #bfeaff,49.0vw 3.6vh #fff,35.1vw 32.6vh #bfeaff,30.4vw 8.2vh #dff6ff,42.9vw 2.6vh #fff,71.6vw 14.3vh #fff,56.7vw 0.5vh #ffe3f7,60.4vw 43.8vh #ffe3f7,63.7vw 0.5vh #ffe3f7,5.3vw 31.1vh #dff6ff,42.1vw 36.3vh #ffe3f7,1.8vw 6.1vh #dff6ff,69.5vw 1.1vh #ffe3f7,22.4vw 2.7vh #fff,93.6vw 13.9vh #bfeaff,79.1vw 8.0vh #ffe3f7,69.1vw 58.1vh #bfeaff,79.2vw 34.2vh #dff6ff,56.4vw 1.9vh #bfeaff,71.7vw 20.1vh #fff,77.4vw 0.5vh #fff,56.4vw 33.5vh #ffe3f7,17.9vw 0.2vh #fff,2.5vw 2.2vh #ffe3f7,83.6vw 59.3vh #bfeaff,29.9vw 1.5vh #bfeaff,51.1vw 38.1vh #fff,55.4vw 1.8vh #bfeaff,6.1vw 11.2vh #bfeaff,18.0vw 1.2vh #fff,64.6vw 18.8vh #ffe3f7,25.3vw 29.0vh #dff6ff,55.7vw 60.7vh #ffe3f7,50.0vw 61.3vh #ffe3f7,84.4vw 60.8vh #ffe3f7,69.1vw 41.5vh #bfeaff,68.6vw 3.6vh #ffe3f7,89.7vw 3.4vh #fff,49.8vw 20.7vh #bfeaff,95.1vw 28.0vh #fff,13.6vw 41.1vh #fff,58.6vw 10.7vh #fff,85.1vw 24.5vh #dff6ff,67.1vw 50.2vh #bfeaff}
.stars-b{box-shadow:46.3vw 13.9vh #fff,18.6vw 34.9vh #aef4ff,50.3vw 54.2vh #fff,33.4vw 57.8vh #ffb4ee,4.1vw 14.2vh #ffb4ee,94.6vw 59.2vh #aef4ff,15.7vw 6.9vh #fff,13.2vw 51.7vh #ffb4ee,6.3vw 35.9vh #ffb4ee,88.7vw 56.1vh #fff,67.4vw 38.9vh #aef4ff,89.0vw 42.9vh #fff,39.7vw 12.1vh #fff,19.9vw 53.1vh #aef4ff,5.5vw 14.2vh #aef4ff,13.9vw 6.9vh #ffb4ee,90.6vw 2.2vh #ffb4ee,0.4vw 42.2vh #fff,89.5vw 5.4vh #fff,89.2vw 2.8vh #fff,50.1vw 27.0vh #ffb4ee,92.1vw 16.7vh #aef4ff,19.2vw 42.2vh #ffb4ee,58.0vw 4.2vh #ffb4ee,72.0vw 0.5vh #aef4ff,55.5vw 29.5vh #fff,74.5vw 39.9vh #ffb4ee,99.8vw 2.4vh #ffb4ee,40.2vw 54.9vh #fff,61.1vw 0.5vh #aef4ff,84.6vw 23.4vh #ffb4ee,77.5vw 1.4vh #aef4ff,11.0vw 52.7vh #aef4ff,45.1vw 15.6vh #ffb4ee,74.6vw 14.2vh #ffb4ee,32.9vw 17.5vh #fff,22.2vw 8.4vh #fff,30.7vw 9.1vh #ffb4ee,78.4vw 0.2vh #ffb4ee,80.8vw 21.7vh #ffb4ee,77.8vw 26.5vh #fff,42.5vw 6.6vh #aef4ff,51.0vw 59.7vh #ffb4ee,36.9vw 34.2vh #fff,69.3vw 52.1vh #fff,5.1vw 61.6vh #fff}
.stars-c{box-shadow:16.5vw 36.0vh #ffb4ee,28.1vw 49.1vh #aef4ff,80.8vw 22.7vh #ffb4ee,52.8vw 44.3vh #fff,37.1vw 27.9vh #fff,14.5vw 41.1vh #fff,69.4vw 17.7vh #ffb4ee,77.1vw 15.9vh #aef4ff,3.4vw 11.4vh #aef4ff,69.4vw 32.7vh #aef4ff,2.3vw 40.2vh #fff,12.5vw 57.0vh #aef4ff,16.1vw 39.2vh #aef4ff,48.5vw 4.8vh #fff,47.0vw 47.1vh #fff,78.0vw 5.6vh #ffb4ee}
.hero .shooting-star {
    top: 11%;
    left: 74%;
    width: 150px;
    height: 2px;
    background: linear-gradient(90deg, #fff, rgba(255, 255, 255, 0));
    box-shadow: 0 0 10px rgba(180, 240, 255, 0.9);
    opacity: 0;
    animation: shoot 19s linear 7s infinite;
}
/* the moon: 82% of it sits above the horizon, the rest is clipped so it can never show through the water */
.hero .moon-wrap {
    left: 50%;
    top: calc(var(--horizon) - var(--moon) * 0.82);
    width: var(--moon);
    height: var(--moon);
    margin-left: calc(var(--moon) / -2);
    clip-path: inset(-60% -60% 18% -60%);
    will-change: transform;
}
.hero .bf { position: absolute; inset: 0; animation: fade-in 1.4s ease backwards; }
.hero .moon { position: absolute; inset: 0; animation: moon-rise 1.5s var(--ease-out) 0.05s backwards; }
.hero .moon-art { display: block; width: 100%; height: 100%; filter: drop-shadow(0 0 26px rgba(255, 90, 214, 0.5)); }
.hero .moon-bloom {
    position: absolute;
    inset: -40%;
    background: radial-gradient(closest-side, rgba(255, 72, 210, 0.4), rgba(120, 70, 255, 0.2) 46%, rgba(0, 240, 255, 0.06) 64%, transparent 74%);
    animation: bloom 7s ease-in-out infinite alternate;
}
/* the skyline layers: .layer is moved by site.js (parallax), .skyline plays the entrance */
.hero .layer { left: -4%; right: -4%; height: var(--sky-h); bottom: calc(100% - var(--horizon)); will-change: transform; }
.hero .layer-mid { bottom: calc(100% - var(--horizon) - 6px); }
.hero .layer-near { bottom: calc(100% - var(--horizon) - 20px); height: calc(var(--sky-h) * 0.8); }
.hero .layer-shore { bottom: auto; top: calc(var(--horizon) - var(--shore-h) * 0.4111); height: var(--shore-h); }
.hero .skyline { position: absolute; inset: 0; background-repeat: repeat-x; background-position: 50% 100%; background-size: auto 100%; animation: skyline-rise 1.1s var(--ease-out) backwards; }
.hero .skyline-far { background-image: url("assets/art/skyline-far.svg?v=1"); animation-delay: 0.12s; }
.hero .skyline-mid { background-image: url("assets/art/skyline-mid.svg?v=1"); animation-delay: 0.22s; }
.hero .skyline-near { background-image: url("assets/art/skyline-near.svg?v=1"); animation-delay: 0.34s; }
.hero .shore { position: absolute; inset: 0; background: url("assets/art/shore.svg?v=1") 50% 0 / auto 100% no-repeat; animation: shore-on 1.3s ease 0.55s backwards; }
.hero .haze { left: 0; right: 0; bottom: calc(100% - var(--horizon)); height: 34%; background: radial-gradient(70% 100% at 50% 100%, rgba(255, 72, 210, 0.5), rgba(130, 70, 255, 0.22) 48%, transparent 76%); animation: fade-in 1.4s ease 0.2s backwards; }
/* water: .floor is the always-there CSS floor; assets/water.js paints a canvas into .water above the near skyline */
.hero .floor {
    left: 0;
    right: 0;
    top: var(--horizon);
    bottom: 0;
    overflow: hidden;
    background: linear-gradient(180deg, #2a0a48 0%, #170541 9%, #0d0332 34%, #070227 100%);
    box-shadow: 0 -8px 24px rgba(255, 72, 210, 0.3);
    animation: fade-in 1s ease 0.3s backwards;
}
.hero .floor::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(180deg, rgba(255, 190, 240, 0.07) 0 1px, transparent 1px 5px),
        repeating-linear-gradient(180deg, rgba(140, 150, 255, 0.06) 0 1px, transparent 1px 8px);
    -webkit-mask-image: linear-gradient(180deg, #000 0, transparent 58%);
    mask-image: linear-gradient(180deg, #000 0, transparent 58%);
}
.hero .floor::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: min(calc(var(--moon) * 0.72), 74vw);
    height: min(88%, calc(var(--moon) * 0.7));
    transform: translateX(-50%);
    background:
        linear-gradient(rgba(12, 3, 48, 0.55), rgba(12, 3, 48, 0.55)) 0 16% / 100% 9px no-repeat,
        linear-gradient(rgba(12, 3, 48, 0.5), rgba(12, 3, 48, 0.5)) 0 27% / 100% 7px no-repeat,
        linear-gradient(rgba(12, 3, 48, 0.45), rgba(12, 3, 48, 0.45)) 0 37% / 100% 5px no-repeat,
        linear-gradient(rgba(12, 3, 48, 0.4), rgba(12, 3, 48, 0.4)) 0 45% / 100% 4px no-repeat,
        linear-gradient(rgba(12, 3, 48, 0.35), rgba(12, 3, 48, 0.35)) 0 52% / 100% 3px no-repeat,
        linear-gradient(180deg, rgba(255, 96, 216, 0.4), rgba(170, 96, 255, 0.24) 30%, rgba(96, 140, 255, 0.11) 58%, transparent 90%);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 32%, #000 68%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 32%, #000 68%, transparent);
}
.hero .floor-fade { position: absolute; inset: 0; background: radial-gradient(30% 62% at 50% 0, rgba(255, 96, 216, 0.4), transparent 72%), linear-gradient(180deg, rgba(20, 6, 46, 0.5) 0%, rgba(20, 6, 46, 0) 30%); }
.hero .water { left: 0; right: 0; top: var(--horizon); bottom: 0; overflow: hidden; }
.hero .water canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 1.2s ease 0.7s; }
.has-water .hero .water canvas { opacity: 1; }
.is-repeat .hero .water canvas { transition-duration: 0.35s; transition-delay: 0s; }
/* the baked reflection of the shore lights: only the fallback loads it (no WebGL, no script) */
.hero .shore-refl { position: absolute; inset: 0; }
.no-water .hero .shore-refl { background: url("assets/art/shore-refl.svg?v=1") 50% 0 / auto 100% no-repeat; }
.has-water .hero .shore-refl { display: none; }
@media (scripting: none) {
    .hero .shore-refl { background: url("assets/art/shore-refl.svg?v=1") 50% 0 / auto 100% no-repeat; }
    .hero .glints { display: block; }
}
/* slow glints drifting across the reflection: only the fallback floor has them (with WebGL the ripples do this job) */
.hero .glints { left: 0; right: 0; top: calc(var(--horizon) + 3px); height: calc(var(--shore-h) * 0.55); overflow: hidden; display: none; -webkit-mask-image: linear-gradient(180deg, #000 0, transparent 100%); mask-image: linear-gradient(180deg, #000 0, transparent 100%); animation: fade-in 1.4s ease 1s backwards; }
.no-water .hero .glints { display: block; }
.hero .glints::before, .hero .glints::after { content: ""; position: absolute; inset: 0 -8%; background-repeat: no-repeat; }
.hero .glints::before {
    background-image:
        linear-gradient(90deg, transparent, rgba(255, 208, 246, 0.6), transparent),
        linear-gradient(90deg, transparent, rgba(190, 210, 255, 0.5), transparent),
        linear-gradient(90deg, transparent, rgba(255, 208, 246, 0.45), transparent),
        linear-gradient(90deg, transparent, rgba(255, 160, 230, 0.5), transparent);
    background-size: 170px 2px, 96px 1px, 250px 1px, 130px 2px;
    background-position: 30% 14%, 45% 40%, 56% 26%, 66% 62%;
    animation: glint-a 28s ease-in-out infinite alternate;
}
.hero .glints::after {
    background-image:
        linear-gradient(90deg, transparent, rgba(255, 190, 240, 0.5), transparent),
        linear-gradient(90deg, transparent, rgba(200, 220, 255, 0.45), transparent),
        linear-gradient(90deg, transparent, rgba(255, 208, 246, 0.5), transparent);
    background-size: 140px 1px, 210px 2px, 90px 1px;
    background-position: 38% 22%, 52% 50%, 61% 74%;
    animation: glint-b 34s ease-in-out infinite alternate;
}
/* light and texture over the scene: a light that follows the pointer, grain, scanlines, vignette and corner marks */
.hero .spot { left: 0; top: 0; width: 620px; height: 620px; margin: -310px 0 0 -310px; background: radial-gradient(closest-side, rgba(0, 240, 255, 0.1), rgba(255, 56, 184, 0.04) 55%, transparent); opacity: 0; transition: opacity 0.6s ease; will-change: transform; }
.hero .spot.is-on { opacity: 1; }
.hero .grain { inset: 0; opacity: 0.06; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"); }
.hero .scanlines { inset: 0; opacity: 0.55; background: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0) 0 2px, rgba(0, 0, 0, 0.18) 2px 3px); }
.hero .vignette { inset: 0; background: radial-gradient(125% 92% at 50% 46%, transparent 52%, rgba(0, 0, 0, 0.66) 100%); }
.hero .hud { inset: 0; }
.hero .hud i { position: absolute; width: 34px; height: 34px; border: 0 solid rgba(0, 240, 255, 0.55); filter: drop-shadow(0 0 6px rgba(0, 240, 255, 0.5)); animation: hud-in 0.9s var(--ease-out) 1.1s backwards; }
.hero .hud i:nth-child(1) { left: 22px; top: 96px; border-left-width: 2px; border-top-width: 2px; }
.hero .hud i:nth-child(2) { right: 22px; top: 96px; border-right-width: 2px; border-top-width: 2px; }
.hero .hud i:nth-child(3) { left: 22px; bottom: 22px; border-left-width: 2px; border-bottom-width: 2px; }
.hero .hud i:nth-child(4) { right: 22px; bottom: 22px; border-right-width: 2px; border-bottom-width: 2px; }
/* the bottom of the water melts into the page below it */
.hero .scene-fade { left: 0; right: 0; bottom: 0; height: 18%; background: linear-gradient(180deg, transparent, #080326 98%); }

.hero-content {
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    top: calc(var(--horizon) - var(--title-h) / 2 + 6px);
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.hero-content h1 { font-size: 0; line-height: 0; text-shadow: none; }
.hero .wordmark { display: block; width: var(--title-w); height: auto; margin: 0 auto; overflow: visible; filter: drop-shadow(0 0 22px rgba(255, 80, 220, 0.5)) drop-shadow(0 10px 32px rgba(5, 2, 18, 0.9)); }
.wm-halo .wm-l { fill: #f7ecff; stroke: #f7ecff; stroke-width: 52; stroke-linejoin: round; }
.wm-edge .wm-l { fill: url(#wm-edge); stroke: url(#wm-edge); stroke-width: 30; stroke-linejoin: round; }
.wm-fill .wm-l { fill: url(#wm-fill); }
.wm-rim .wm-l { fill: #fff; stroke: none; }
.wm-rp-halo .wm-l { fill: #e6f5ff; stroke: #e6f5ff; stroke-width: 74; stroke-linejoin: round; }
.wm-rp-edge .wm-l { fill: #46aaff; stroke: #46aaff; stroke-width: 44; stroke-linejoin: round; }
.wm-rp-fill .wm-l { fill: url(#wm-rp-fill); }
.wm-l { transform-box: fill-box; transform-origin: 50% 100%; animation: wm-in 0.75s var(--ease-out) backwards; animation-delay: calc(0.38s + var(--i, 0) * 0.055s); }
.wm-sub .wm-l { animation-delay: calc(0.92s + var(--i, 0) * 0.08s); }
.wm-rule { filter: drop-shadow(0 0 10px rgba(80, 190, 255, 0.9)); transform-box: fill-box; animation: rule-in 0.7s var(--ease-out) 1s backwards; }
.wm-rule-l { transform-origin: 100% 50%; }
.wm-rule-r { transform-origin: 0 50%; }
.wm-shine { animation: fade-in 0.5s ease 1.5s backwards; }
.wm-gloss { pointer-events: none; }
.wm-sweep { opacity: 0.55; transform: skewX(-18deg); animation: wm-sweep 11s linear 1.9s infinite; }
.hero .tagline {
    --tag-track: 0.34em;
    position: relative;
    isolation: isolate;
    margin: clamp(8px, 1.6svh, 18px) 0 0;
    padding-left: var(--tag-track);
    font: 700 max(clamp(14px, 2.3vw, 22px), min(28px, calc(var(--title-w) * 0.03)))/1.2 var(--display);
    letter-spacing: var(--tag-track);
    text-transform: uppercase;
    color: rgba(120, 150, 255, 0.38);
    -webkit-text-stroke: 1.5px #a3c0ff;
    text-shadow: 0 0 14px rgba(70, 120, 255, 0.85), 0 0 34px rgba(70, 120, 255, 0.35), 0 2px 18px rgba(3, 3, 6, 0.9);
    animation: tagline-in 1.1s var(--ease-out) 1.05s backwards;
}
.hero .tagline::before { content: ""; position: absolute; z-index: -1; inset: -16px -10%; background: radial-gradient(closest-side, rgba(3, 3, 6, 0.66), transparent); pointer-events: none; }
.hero .hero-actions { position: relative; isolation: isolate; margin-top: clamp(16px, 3.6svh, 38px); justify-content: center; animation: rise 0.9s var(--ease-out) 1.2s backwards; }
.hero .hero-actions::before { content: ""; position: absolute; z-index: -1; inset: -34px -60px -26px; background: radial-gradient(closest-side, rgba(3, 3, 6, 0.7), rgba(3, 3, 6, 0.4) 62%, transparent); pointer-events: none; }
/* a glint crosses the primary button now and then (the login's own) */
.btn-glint { position: absolute; inset: 2px; z-index: 0; overflow: hidden; pointer-events: none; clip-path: polygon(calc(var(--c) - 1.2px) 0, 100% 0, 100% calc(100% - var(--c) + 1.2px), calc(100% - var(--c) + 1.2px) 100%, 0 100%, 0 calc(var(--c) - 1.2px)); }
.btn-glint::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 34%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.75), transparent); transform: translateX(-140%) skewX(-18deg); animation: cta-glint 5.6s ease-in-out 2s infinite; }
.hero .scroll-cue {
    position: absolute;
    z-index: 2;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    display: grid;
    justify-items: center;
    gap: 4px;
    font: 500 0.62rem/1 var(--display);
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--dim);
    text-decoration: none;
    animation: fade-in 1s ease 1.6s backwards;
}
.hero .scroll-cue .icon { width: 18px; height: 18px; animation: cue-bob 2.4s ease-in-out infinite; }
.hero .scroll-cue:hover { color: #fff; }

/* entrance keyframes (the login's) */
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes shore-on { from { opacity: 0; } to { opacity: 1; } }
@keyframes glint-a { from { transform: translateX(-3%); } to { transform: translateX(3%); } }
@keyframes glint-b { from { transform: translateX(2.5%); } to { transform: translateX(-2.5%); } }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes hud-in { from { opacity: 0; transform: scale(1.35); } to { opacity: 1; transform: none; } }
@keyframes moon-rise { from { opacity: 0; transform: translateY(18%) scale(0.94); } to { opacity: 1; transform: none; } }
@keyframes bloom { from { opacity: 0.72; transform: scale(0.96); } to { opacity: 1; transform: scale(1.05); } }
@keyframes skyline-rise { from { opacity: 0; transform: translateY(26%); } to { opacity: 1; transform: none; } }
@keyframes twinkle { from { opacity: 0.25; } to { opacity: 1; } }
@keyframes shoot {
    0%, 93% { opacity: 0; transform: translate3d(0, 0, 0) rotate(-25deg); }
    94% { opacity: 0.95; }
    100% { opacity: 0; transform: translate3d(-420px, 196px, 0) rotate(-25deg); }
}
@keyframes wm-in { from { opacity: 0; transform: translateY(-24%) scale(1.16); } to { opacity: 1; transform: none; } }
@keyframes rule-in { from { opacity: 0; transform: scaleX(0); } to { opacity: 1; transform: none; } }
@keyframes wm-sweep { 0% { transform: skewX(-18deg) translateX(0); } 12%, 100% { transform: skewX(-18deg) translateX(7000px); } }
@keyframes tagline-in { from { opacity: 0; letter-spacing: calc(var(--tag-track) * 2); } to { opacity: 1; letter-spacing: var(--tag-track); } }
@keyframes cta-glint { 0%, 62% { transform: translateX(-140%) skewX(-18deg); } 82%, 100% { transform: translateX(420%) skewX(-18deg); } }
@keyframes cue-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* a returning visitor in the same session skips the choreography, not the ambience */
.is-repeat .hero :is(.sky, .stars, .bf, .moon, .skyline, .shore, .glints, .haze, .floor, .hud i, .wm-l, .wm-rule, .wm-shine, .tagline, .hero-actions, .scroll-cue) { animation: none; }
.is-repeat .hero .wm-sweep { animation: wm-sweep 11s linear 1.2s infinite; }

/* ------------------------------------------------------------------ 8c. the hero scrolls
   The hero stays pinned while the About section slides up over it (no dead scroll: About simply follows it in the page). site-motion.js sets --p
   (0 at the top, 1 when About covers it) and the layers answer with the individual transform properties (translate, scale), so they compose with
   the pointer parallax's inline transform: the moon sinks behind the skyline, the layers part at their own speeds (200px x their depth, the same
   numbers site.js feeds the water so the reflections follow), the wordmark shrinks and fades, and the scene dims. */
.hero-stage { position: relative; }
.hero { position: sticky; top: 0; z-index: 0; --p: 0; }
.hero .hero-content { translate: 0 calc(var(--p) * -48px); scale: calc(1 - var(--p) * 0.12); opacity: calc(1 - var(--p) * 1.7); transform-origin: 50% 0; }
.hero .hero-actions { opacity: calc(1 - var(--p) * 3); }
.hero .moon-wrap { translate: 0 calc(var(--p) * 300px); }
.hero .layer-far { translate: 0 calc(var(--p) * 60px); }
.hero .layer-mid { translate: 0 calc(var(--p) * 120px); }
.hero .layer-near { translate: 0 calc(var(--p) * 200px); }
.hero .layer-shore { translate: 0 calc(var(--p) * 160px); }
.hero .scene::after { content: ""; position: absolute; inset: 0; z-index: 9; pointer-events: none; background: linear-gradient(180deg, rgba(3, 1, 13, 0.55), rgba(3, 1, 13, 0.18) 55%, rgba(3, 1, 13, 0.3)); opacity: calc(var(--p) * 1.1); }
.hero .scroll-cue { opacity: calc(1 - var(--p) * 4); }
.about-over { position: relative; z-index: 2; padding-top: 150px; background: linear-gradient(180deg, rgba(8, 3, 38, 0) 0, rgba(8, 3, 38, 0.93) 150px, #080326 260px); }
/* a neon line along the top of the page that fills as you read it */
.scroll-progress { position: fixed; z-index: 120; left: 0; top: 0; height: 3px; width: calc(var(--pp, 0) * 100%); pointer-events: none; background: linear-gradient(90deg, var(--cyan), var(--violet) 60%, var(--pink)); box-shadow: 0 0 14px rgba(0, 240, 255, 0.8), 0 0 24px rgba(255, 56, 184, 0.5); }
.scroll-progress::after { content: ""; position: absolute; right: -4px; top: -3px; width: 10px; height: 9px; border-radius: 50%; background: #fff; box-shadow: 0 0 12px 3px rgba(0, 240, 255, 0.9); opacity: min(1, calc(var(--pp, 0) * 60)); }

/* ------------------------------------------------------------------ 9. landing sections */
.band { position: relative; z-index: 1; padding: 84px 0; }
.band + .band { padding-top: 40px; }
.band-title-row { display: flex; align-items: end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }

.about-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 36px; align-items: start; }
.about-text { display: grid; gap: 18px; font-size: 1.06rem; line-height: 1.75; }
.about-text p { max-width: 62ch; }
.stat-stack { display: grid; gap: 14px; }
.discord-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; max-width: 440px; }
.stat { display: grid; gap: 6px; padding: 22px 26px; }
.stat-number { font: 700 2rem/1 var(--display); letter-spacing: 0.04em; text-transform: uppercase; color: #fff; text-shadow: 0 0 22px rgba(255, 56, 184, 0.45); }
.stat-label { font: 500 0.7rem/1.3 var(--display); letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim); }

.features-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.feature-card { display: grid; align-content: start; gap: 16px; padding: 28px 28px 26px; }
.feature-card p { font-size: 0.98rem; line-height: 1.65; color: var(--text-2); }

.join-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px; align-items: stretch; }
.join-panel { display: grid; align-content: start; gap: 24px; padding: 30px 32px; }
.join-panel h3 { font-size: 1.2rem; }
.info-list { display: grid; margin: 0; padding: 0; list-style: none; }
.info-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.info-list li:first-child { border-top: 1px solid var(--line-soft); }
.info-label { font: 500 0.7rem/1.2 var(--display); letter-spacing: 0.18em; text-transform: uppercase; color: var(--dim); }
.info-value { font: 700 1.02rem/1.2 var(--display); letter-spacing: 0.06em; color: #fff; overflow-wrap: anywhere; text-align: right; }
.info-value.online { color: #86ffd6; }
.info-value.online::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 10px; border-radius: 50%; background: #86ffd6; box-shadow: 0 0 10px #86ffd6; }
.steps { counter-reset: step; display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; align-items: center; color: var(--text-2); }
.steps li::before {
    content: counter(step);
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(143, 247, 255, 0.45);
    background: linear-gradient(145deg, rgba(0, 240, 255, 0.16), rgba(0, 240, 255, 0.02));
    clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
    font: 700 1.05rem/1 var(--display);
    color: var(--cyan);
}
.join-actions { display: grid; align-content: center; justify-items: start; gap: 18px; padding: 30px 32px; }
.join-actions p { max-width: 36ch; }

.discord-grid { display: grid; grid-template-columns: minmax(0, 1fr) 382px; gap: 28px; align-items: center; }
.discord-copy { display: grid; gap: 18px; justify-items: start; }
.discord-copy p { max-width: 56ch; font-size: 1.04rem; line-height: 1.7; }
.discord-widget { padding: 16px; }
.discord-widget iframe { display: block; width: 100%; max-width: 350px; height: 500px; margin: 0 auto; border: 0; background: rgba(5, 3, 26, 0.6); }

/* ------------------------------------------------------------------ 9b. live status: the real city, from the game server (site-live.js) */
.live-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 38px; }
.live-row[hidden], .info-list li[hidden], .live-bar[hidden], .live-chip i[hidden] { display: none; }
.live-chip { display: inline-flex; align-items: center; gap: 12px; padding: 9px 16px; border: 1px solid var(--line); background: rgba(10, 5, 38, 0.7); font: 700 0.74rem/1 var(--display); letter-spacing: 0.2em; text-transform: uppercase; color: #fff; clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.live-chip .dot { width: 9px; height: 9px; border-radius: 50%; background: #dfff63; box-shadow: 0 0 12px rgba(223, 255, 99, 0.9); }
.live-chip i { font-style: normal; color: #dfff63; text-shadow: 0 0 12px rgba(223, 255, 99, 0.6); font-variant-numeric: tabular-nums; }
.live-chip[data-state="offline"] .dot { background: var(--pink); box-shadow: 0 0 12px rgba(255, 56, 184, 0.9); }
.live-bar { width: 200px; height: 4px; background: rgba(169, 125, 255, 0.2); }
.live-bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--cyan), var(--violet) 60%, var(--pink)); box-shadow: 0 0 12px rgba(0, 240, 255, 0.7); transition: width 800ms var(--ease-out); }
.live-note { font: 500 0.66rem/1 var(--display); letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim); }

/* ------------------------------------------------------------------ 9c. A night in the city: six chapters
   Six scenes, each with its own light (dusk, night, midnight, the small hours, dawn, morning). On a wide screen with motion welcome, site-motion.js pins
   the stage (.is-pinned) and scrolling steps through the chapters; everywhere else they are plain stacked blocks, each complete on its own. A chapter's
   frame is an illustrated scene for now; footage drops into it as a <video class="cf-video" data-src poster> (see the commented example in the markup). */
.chapters { position: relative; --n: 6; }
.chapters-head { padding-top: 70px; }
.chapter { position: relative; isolation: isolate; overflow: hidden; padding: 110px 0; min-height: 640px; display: flex; align-items: center; }
.chapter > .chapter-grid { width: 100%; }
.chapter-bg { position: absolute; inset: 0; z-index: -1; }
.chapter-bg > * { position: absolute; }
.cb-sky { inset: 0; background: var(--sky); }
.cb-orb { left: var(--orb-x, 63%); bottom: var(--orb-y, 30%); width: 460px; height: 460px; margin-left: -230px; border-radius: 50%; background: var(--orb); }
.cb-city { left: -4%; right: -4%; bottom: 0; background-repeat: repeat-x; background-position: 40% 100%; background-size: auto 100%; filter: var(--tint); }
.cb-far { height: 46%; background-image: url("assets/art/skyline-far.svg?v=1"); opacity: 0.8; }
.cb-mid { height: 38%; background-image: url("assets/art/skyline-mid.svg?v=1"); background-position: 62% 100%; filter: var(--tint-mid); }
.cb-near { height: 26%; background-image: url("assets/art/skyline-near.svg?v=1"); background-position: 12% 100%; filter: brightness(0.18); }
.cb-light { width: 520px; height: 520px; border-radius: 50%; filter: blur(8px); }
.cb-a { left: 4%; top: 36%; background: radial-gradient(closest-side, var(--glow-a), transparent 72%); }
.cb-b { left: 22%; top: 40%; background: radial-gradient(closest-side, var(--glow-b), transparent 72%); }
.cb-shade { inset: 0; background: radial-gradient(120% 90% at 28% 42%, rgba(5, 3, 26, 0.76), rgba(5, 3, 26, 0.42) 52%, rgba(5, 3, 26, 0.08)), linear-gradient(180deg, rgba(8, 3, 38, 0.5), transparent 20%, transparent 74%, #080326); }
/* the light of each hour */
.t-dusk { --sky: linear-gradient(180deg, #0b0426 0%, #2b0d5a 30%, #8a2a7c 58%, #ff7a5c 82%, #ffb36b 100%); --orb: radial-gradient(closest-side, rgba(255, 214, 150, 0.95), rgba(255, 122, 92, 0.55) 45%, transparent 72%); --tint: hue-rotate(-24deg) saturate(0.9) brightness(0.55); --tint-mid: hue-rotate(-24deg) brightness(0.34); --glow-a: rgba(255, 52, 90, 0.5); --glow-b: rgba(52, 110, 255, 0.45); --orb-x: 66%; --orb-y: 32%; }
.t-night { --sky: linear-gradient(180deg, #05031a 0%, #130b40 38%, #3a1070 66%, #b8379a 100%); --orb: radial-gradient(closest-side, rgba(215, 235, 255, 0.95), rgba(150, 180, 255, 0.4) 45%, transparent 72%); --tint: brightness(0.5); --tint-mid: brightness(0.32); --glow-a: rgba(255, 200, 90, 0.38); --glow-b: rgba(255, 56, 184, 0.4); --orb-x: 72%; --orb-y: 44%; }
.t-midnight { --sky: linear-gradient(180deg, #02020a 0%, #060316 34%, #0a1a4a 70%, #0f4a78 100%); --orb: radial-gradient(closest-side, rgba(130, 240, 255, 0.55), rgba(0, 240, 255, 0.22) 45%, transparent 72%); --tint: hue-rotate(40deg) brightness(0.5); --tint-mid: hue-rotate(40deg) brightness(0.3); --glow-a: rgba(0, 240, 255, 0.35); --glow-b: rgba(255, 56, 184, 0.4); --orb-x: 68%; --orb-y: 42%; }
.t-small { --sky: linear-gradient(180deg, #07030f 0%, #160a2e 40%, #33103f 72%, #4d1035 100%); --orb: radial-gradient(closest-side, rgba(255, 150, 170, 0.4), transparent 70%); --tint: hue-rotate(-50deg) brightness(0.42); --tint-mid: hue-rotate(-50deg) brightness(0.28); --glow-a: rgba(255, 60, 80, 0.45); --glow-b: rgba(60, 255, 160, 0.32); --orb-x: 72%; --orb-y: 30%; }
.t-dawn { --sky: linear-gradient(180deg, #0b1034 0%, #1d3a78 38%, #2f8fa6 66%, #ffbf8a 100%); --orb: radial-gradient(closest-side, rgba(255, 236, 190, 0.95), rgba(255, 176, 120, 0.5) 45%, transparent 72%); --tint: hue-rotate(60deg) saturate(0.8) brightness(0.5); --tint-mid: hue-rotate(60deg) brightness(0.3); --glow-a: rgba(255, 160, 100, 0.4); --glow-b: rgba(80, 220, 230, 0.35); --orb-x: 70%; --orb-y: 36%; }
.t-morning { --sky: linear-gradient(180deg, #14246a 0%, #35649e 40%, #7ec4ee 74%, #ffe2a8 100%); --orb: radial-gradient(closest-side, rgba(255, 250, 215, 0.95), rgba(255, 214, 140, 0.5) 45%, transparent 72%); --tint: hue-rotate(80deg) saturate(0.7) brightness(0.55); --tint-mid: hue-rotate(80deg) brightness(0.36); --glow-a: rgba(255, 220, 140, 0.35); --glow-b: rgba(120, 200, 255, 0.35); --orb-x: 74%; --orb-y: 44%; }
.chapter-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: 56px; align-items: center; }
.chapter-copy { display: grid; gap: 18px; justify-items: start; }
.chapter-num { display: flex; align-items: baseline; gap: 10px; font-family: var(--display); color: transparent; }
.chapter-num b { font: 700 6.2rem/0.9 var(--display); -webkit-text-stroke: 2px rgba(143, 247, 255, 0.85); text-shadow: 0 0 30px rgba(0, 240, 255, 0.35); letter-spacing: 0.02em; }
.chapter-num span { font: 500 0.9rem/1 var(--display); letter-spacing: 0.3em; color: var(--dim); }
.site .chapter-title { font: 700 clamp(2rem, 1.4rem + 1.6vw, 3rem)/1.05 var(--display); letter-spacing: 0.03em; text-transform: uppercase; text-shadow: 0 0 28px rgba(255, 56, 184, 0.35); max-width: 15ch; }
.chapter-lead { font-size: 1.1rem; line-height: 1.65; max-width: 46ch; }
.chapter-points { display: grid; gap: 12px; margin: 6px 0 4px; padding: 0; list-style: none; }
.chapter-points li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 14px; align-items: center; }
.chapter-points strong { display: block; font: 700 0.9rem/1.2 var(--display); letter-spacing: 0.1em; text-transform: uppercase; color: #fff; }
.chapter-points span:not(.symbol) { color: var(--text-2); font-size: 0.93rem; }
.chapter-frame { aspect-ratio: 16 / 10; padding: 0; overflow: hidden; --c: 22px; }
.chapter-frame > * { position: absolute; }
.cf-scene { inset: 0; overflow: hidden; clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px); }
.cf-sky { inset: 0 0 45% 0; background: var(--sky); }
.cf-city { left: 0; right: 0; bottom: 45%; height: 44%; background: url("assets/art/skyline-mid.svg?v=1") 30% 100% / auto 100% repeat-x; filter: var(--tint); }
.cf-ground { left: 0; right: 0; bottom: 0; height: 45%; background: radial-gradient(60% 100% at 28% 0, var(--glow-a), transparent 70%), radial-gradient(60% 100% at 72% 0, var(--glow-b), transparent 70%), linear-gradient(180deg, #160c34, #05031a); }
.cf-glow { top: 0; bottom: 45%; width: 50%; mix-blend-mode: screen; }
.cf-glow.a { left: 0; background: radial-gradient(70% 80% at 40% 78%, var(--glow-a), transparent 72%); }
.cf-glow.b { right: 0; background: radial-gradient(70% 80% at 60% 78%, var(--glow-b), transparent 72%); }
.cf-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px); }
.cf-label { left: 0; right: 0; bottom: 0; padding: 18px 24px 16px; background: linear-gradient(180deg, transparent, rgba(5, 3, 26, 0.9)); display: flex; align-items: baseline; gap: 14px; }
.cf-label b { font: 700 0.8rem/1 var(--display); letter-spacing: 0.22em; text-transform: uppercase; color: var(--pink-soft); }
.cf-label span { font: 500 0.7rem/1 var(--display); letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-2); }
.cf-corner { width: 26px; height: 26px; border: 0 solid rgba(0, 240, 255, 0.8); }
.cf-corner.tl { left: 12px; top: 12px; border-left-width: 2px; border-top-width: 2px; }
.cf-corner.br { right: 12px; bottom: 12px; border-right-width: 2px; border-bottom-width: 2px; }
.chapter-rail { display: none; }
/* pinned: the stage stays on screen while scrolling steps through the chapters */
.chapters.is-pinned .chapters-track { height: calc(var(--n) * 88svh + 12svh); }
.chapters.is-pinned .chapters-stage { position: sticky; top: 0; height: 100svh; min-height: 560px; overflow: hidden; }
.chapters.is-pinned .chapter { position: absolute; inset: 0; padding: 120px 0 80px; min-height: 0; opacity: 0; visibility: hidden; transition: opacity 600ms ease, visibility 0s linear 600ms; }
.chapters.is-pinned .chapter.is-active { opacity: 1; visibility: visible; transition-delay: 0s; z-index: 1; }
.chapters.is-pinned .chapter-copy > * { opacity: 0; translate: 0 22px; transition: opacity 600ms var(--ease-out), translate 700ms var(--ease-out); }
.chapters.is-pinned .chapter.is-active .chapter-copy > * { opacity: 1; translate: none; }
.chapters.is-pinned .chapter.is-active .chapter-copy > :nth-child(1) { transition-delay: 60ms; }
.chapters.is-pinned .chapter.is-active .chapter-copy > :nth-child(2) { transition-delay: 120ms; }
.chapters.is-pinned .chapter.is-active .chapter-copy > :nth-child(3) { transition-delay: 180ms; }
.chapters.is-pinned .chapter.is-active .chapter-copy > :nth-child(4) { transition-delay: 240ms; }
.chapters.is-pinned .chapter.is-active .chapter-copy > :nth-child(5) { transition-delay: 300ms; }
.chapters.is-pinned .chapter.is-active .chapter-copy > :nth-child(6) { transition-delay: 360ms; }
.chapters.is-pinned .chapter-frame { opacity: 0; translate: 44px 0; transition: opacity 700ms ease 120ms, translate 800ms var(--ease-out) 120ms, transform 400ms var(--ease-out); }
.chapters.is-pinned .chapter.is-active .chapter-frame { opacity: 1; translate: none; }
.chapters.is-pinned .chapter-rail { position: absolute; z-index: 3; right: 18px; top: 50%; transform: translateY(-50%); display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.chapter-rail button { position: relative; display: block; width: 18px; height: 18px; padding: 0; border: 0; background: none; color: var(--dim); cursor: pointer; font: 500 0.62rem/1.1 var(--display); letter-spacing: 0.2em; text-transform: uppercase; }
.chapter-rail button small { display: block; margin-top: 3px; font-size: 0.56rem; letter-spacing: 0.14em; color: rgba(183, 182, 201, 0.75); }
.chapter-rail button span { display: none; position: absolute; right: 30px; top: 50%; transform: translateY(-50%); width: 110px; text-align: right; }
.chapter-rail button span b { display: block; font-weight: 500; }
.chapter-rail button[aria-current="true"] span { display: block; }
.chapter-rail button i { position: absolute; left: 4px; top: 4px; width: 10px; height: 10px; border: 1px solid var(--violet); transform: rotate(45deg); transition: background-color 200ms ease, box-shadow 200ms ease; }
.chapter-rail button:hover { color: #fff; }
.chapter-rail button:hover i { border-color: var(--cyan); }
.chapter-rail button[aria-current="true"] { color: #fff; }
.chapter-rail button[aria-current="true"] i { background: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 14px var(--cyan); }

/* ------------------------------------------------------------------ 10. footer */
.site-footer { position: relative; z-index: 1; margin-top: 40px; padding: 46px 0 34px; border-top: 1px solid var(--line); background: linear-gradient(180deg, rgba(5, 3, 26, 0.55), rgba(3, 1, 13, 0.85)); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: 32px; align-items: start; }
.footer-brand { display: grid; gap: 14px; }
.footer-brand .site-brand { align-self: start; }
.footer-brand p { max-width: 32ch; font-size: 0.92rem; color: var(--muted); }
.footer-column h4 { margin: 0 0 14px; font: 500 0.7rem/1.2 var(--display); letter-spacing: 0.24em; text-transform: uppercase; color: var(--pink-soft); }
.footer-column ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.footer-column a { color: var(--text-2); text-decoration: none; font-size: 0.95rem; }
.footer-column a:hover { color: #fff; text-decoration: underline; }
.footer-bottom { margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--line-soft); display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; font: 500 0.7rem/1.4 var(--display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); }

/* ------------------------------------------------------------------ 11. rules page (markup is also read by the portal's application questions: keep .rule-section, ids, h2 and li) */
.rules-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 22px; align-items: start; padding: 36px 0 70px; }
.rules-sidebar { position: sticky; top: 24px; padding: 22px 22px 24px; }
.rules-sidebar h2 { margin-bottom: 14px; font: 700 0.86rem/1.2 var(--display); letter-spacing: 0.22em; text-transform: uppercase; display: flex; align-items: center; gap: 12px; }
.rules-sidebar h2::before { content: ""; width: 9px; height: 9px; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.rules-sidebar ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.rules-sidebar a { display: block; padding: 9px 12px; border-left: 2px solid transparent; color: var(--text-2); text-decoration: none; font-size: 0.94rem; line-height: 1.3; }
.rules-sidebar a:hover { color: #fff; background: rgba(169, 125, 255, 0.12); border-left-color: var(--violet); }
.rules-sidebar a.is-current { color: #fff; border-left-color: var(--cyan); background: linear-gradient(90deg, rgba(0, 240, 255, 0.14), transparent); }
.rules-panel { display: grid; gap: 22px; min-width: 0; }
.rules-intro { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; }
.rules-sections { display: grid; gap: 18px; }
.rules-card { padding: 28px 30px 26px; }
.rules-card h2 { font: 700 1.3rem/1.25 var(--display); letter-spacing: 0.03em; text-transform: uppercase; margin-bottom: 14px; }
.rules-card h3 { margin-bottom: 14px; font-size: 0.86rem; letter-spacing: 0.22em; color: var(--cyan-soft); }
.rules-card p, .rules-card li { color: var(--text-2); line-height: 1.7; }
.rules-card p + p { margin-top: 12px; }
.rules-card ul { margin: 0; padding-left: 1.25rem; display: grid; gap: 10px; }
.rules-card li::marker { color: var(--pink); }
.rule-section { scroll-margin-top: 24px; }
.rule-number { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font: 500 0.72rem/1.2 var(--display); letter-spacing: 0.26em; text-transform: uppercase; color: var(--pink-soft); }
.rule-number::before { content: ""; flex: none; width: 26px; height: 2px; background: linear-gradient(90deg, var(--pink), rgba(255, 56, 184, 0)); box-shadow: 0 0 10px rgba(255, 56, 184, 0.7); }
.rule-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 22px; }
.rule-callout { padding: 18px 20px; border: 1px solid var(--line); border-left: 3px solid var(--cyan); background: linear-gradient(90deg, rgba(0, 240, 255, 0.07), rgba(6, 3, 26, 0.6) 70%); }
.rule-callout strong { display: block; margin-bottom: 10px; font: 700 0.8rem/1.2 var(--display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--cyan-soft); }
.rule-callout ul { gap: 8px; }
.rule-chip { display: inline-flex; margin: 0 8px 10px 0; padding: 7px 12px; border: 1px solid rgba(255, 143, 219, 0.45); border-radius: 2px; background: rgba(255, 56, 184, 0.09); font: 500 0.72rem/1.2 var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--pink-soft); }
.rules-quote { margin-top: 18px; padding: 16px 20px; border-left: 3px solid var(--pink); background: linear-gradient(90deg, rgba(255, 56, 184, 0.1), transparent 80%); color: #fff; font: 600 1.05rem/1.55 var(--body); }
.rules-quote u { text-decoration-color: var(--pink); text-underline-offset: 4px; }
.rules-cta { display: grid; gap: 14px; justify-items: start; }
.rules-cta p { max-width: 62ch; }

/* ------------------------------------------------------------------ 12. wiki page (the page's script builds .wiki-category, .wiki-link and .wiki-badge) */
.wiki-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 22px; align-items: start; padding: 36px 0 70px; }
.wiki-sidebar { position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow: auto; padding: 18px 16px 20px; scrollbar-width: thin; }
.wiki-search {
    width: 100%;
    margin-bottom: 14px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 3px;
    background: rgba(5, 3, 26, 0.8);
    color: var(--text);
    font: 400 0.95rem/1.2 var(--body);
}
.wiki-search::placeholder { color: var(--dim); }
.wiki-search:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(0, 240, 255, 0.16); outline: none; }
#wikiNav { padding-bottom: 8px; }
.wiki-category { margin: 0 0 18px; }
.wiki-category h4 { margin: 0 0 8px; padding: 0 8px; font: 500 0.7rem/1.2 var(--display); letter-spacing: 0.24em; text-transform: uppercase; color: var(--pink-soft); }
.wiki-links { display: grid; gap: 2px; }
.wiki-link {
    display: block;
    width: 100%;
    padding: 9px 10px 9px 12px;
    border: 0;
    border-left: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--text-2);
    font: 400 0.93rem/1.3 var(--body);
    text-align: left;
    cursor: pointer;
}
.wiki-link:hover { color: #fff; background: rgba(169, 125, 255, 0.12); border-left-color: var(--violet); }
.wiki-link.active { color: #fff; font-weight: 600; border-left-color: var(--cyan); background: linear-gradient(90deg, rgba(0, 240, 255, 0.16), transparent); }
.wiki-link:focus-visible { outline-offset: -2px; }
.wiki-empty { padding: 8px; color: var(--muted); font-size: 0.92rem; }
.wiki-content { min-height: 560px; padding: 32px 36px 36px; }
.wiki-content .wiki-badge { margin-bottom: 18px; }
.wiki-badge { display: inline-flex; padding: 5px 10px; border: 1px solid rgba(143, 247, 255, 0.4); border-radius: 2px; background: rgba(0, 240, 255, 0.07); font: 500 0.68rem/1.2 var(--display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--cyan-soft); }
.wiki-content h2 { margin: 0 0 16px; font: 700 clamp(1.4rem, 1.15rem + 0.9vw, 1.9rem)/1.2 var(--display); letter-spacing: 0.03em; text-transform: uppercase; text-shadow: 0 0 24px rgba(169, 125, 255, 0.3); }
.wiki-content p { margin: 0 0 14px; max-width: 70ch; line-height: 1.75; color: var(--text-2); }
.wiki-content ul { margin: 14px 0 0; padding-left: 1.25rem; max-width: 70ch; }
.wiki-content li { margin-bottom: 10px; line-height: 1.65; color: var(--text-2); }
.wiki-content li::marker { color: var(--pink); }
.wiki-content strong { color: #fff; }

/* ------------------------------------------------------------------ 12b. living glass
   Decorative only; the same effects as the portal's (html/portal/assets/glass.css, section 14), with the same rules. site-fx.js gives each glass
   panel that is on screen ONE effect "kind" (chosen by panel type, with a colour/direction variant per neighbour) and gives the current menu tab
   a glowing ribbon, and the current rules / wiki entry fire and wind. Kinds: aurora, ember, runner, pulse, mist (panels); flow, wind (current).
   Two layers per host: .fx (clipped to the panel) and .fx-rise (things that rise; may pass the top edge, never the sides); both sit between
   the panel's fill and its text. Only transform/opacity animate. Nothing exists under prefers-reduced-motion; Pause motion (.is-still, the same
   setting as the login's) removes it; .is-paused stops it while the tab is hidden; forced-colors removes it. */
@media (prefers-reduced-motion: no-preference) {
    .site .fx-lit { position: relative; } /* panels are already positioned (the rules' contents list is sticky: do not override that) */
    .site .fx-host { --fx-rgb: 0, 240, 255; --fx-rgb2: 169, 125, 255; isolation: isolate; }
    .site .fx-host[data-fv="1"] { --fx-rgb: 255, 56, 184; --fx-rgb2: 0, 240, 255; }
    .site .fx-host[data-fv="2"] { --fx-rgb: 169, 125, 255; --fx-rgb2: 255, 56, 184; }

    .site .fx {
        position: absolute;
        inset: 0;
        z-index: -1;
        display: block;
        pointer-events: none;
        overflow: hidden;
        contain: paint;
        clip-path: polygon(var(--c, 14px) 0, 100% 0, 100% calc(100% - var(--c, 14px)), calc(100% - var(--c, 14px)) 100%, 0 100%, 0 var(--c, 14px));
        opacity: 0;
        transition: opacity 700ms ease, filter 250ms ease;
    }
    .site .fx-lit > .fx { clip-path: none; }
    .site .fx-rise {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: -44px;
        z-index: -1;
        display: block;
        pointer-events: none;
        clip-path: inset(-60px 0 0 0); /* rises past the top edge, never past the sides */
        overflow-x: clip; /* clip-path only hides; this also stops an arc near the edge from making the page scroll sideways */
        opacity: 0;
        transition: opacity 700ms ease;
    }
    .site .fx-lit > .fx-rise { top: -22px; }
    .site .fx-live > .fx, .site .fx-live > .fx-rise { opacity: 1; }
    .site .fx-host:hover > .fx { filter: brightness(1.45) saturate(1.2); }
    .site .fx > i, .site .fx-rise > i { position: absolute; display: block; animation-play-state: paused; }
    .site .fx-live > .fx > i, .site .fx-live > .fx-rise > i { animation-play-state: running; will-change: transform, opacity; }
    /* the current tab/section only: an old highlight (the wizard moves aria-current) disappears at once */
    .site .fx-lit:not([aria-current]) > .fx, .site .fx-lit:not([aria-current]) > .fx-rise { display: none; }

    /* a soft spotlight that follows the pointer inside the panel under it (portal-fx.js sets --mx/--my) */
    .site .fx-follow {
        left: 0;
        top: 0;
        width: 280px;
        height: 280px;
        margin: -140px 0 0 -140px;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.17), rgba(var(--fx-rgb), 0.09) 38%, transparent 68%);
        transform: translate(var(--mx, -999px), var(--my, -999px));
        opacity: 0;
        transition: opacity 250ms ease;
        animation: none !important;
    }
    .site .fx-host:hover > .fx > .fx-follow { opacity: 1; }
    /* ---- aurora: one soft band of light drifting across, fading in and out; direction and pace differ per neighbour ---- */
    .site .fx-band {
        top: -35%;
        left: 0;
        width: 58%;
        height: 170%;
        background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(var(--fx-rgb2), 0.3), rgba(var(--fx-rgb2), 0.08) 55%, transparent 75%);
        transform: translateX(-115%) rotate(16deg);
        opacity: 0;
        animation: fx-band 30s linear infinite;
        animation-delay: var(--fx-d, 0s);
    }
    .site .fx-host[data-fv="1"] .fx-band { animation-direction: reverse; animation-duration: 36s; }
    .site .fx-host[data-fv="2"] .fx-band { animation-duration: 42s; width: 44%; }
    .site .fx-band-soft { opacity: 0; animation-duration: 38s; }
    @keyframes fx-band {
        0% { transform: translateX(-115%) rotate(16deg); opacity: 0; }
        12%, 82% { opacity: 1; }
        100% { transform: translateX(235%) rotate(16deg); opacity: 0; }
    }

    /* ---- ember: a spark floats up now and then, and a fuzzy white arc curls up once in a while (the application's motion) ---- */
    .site .fx-arc {
        width: 74px;
        height: 28px;
        border: 3px solid rgba(255, 255, 255, 0.85);
        border-left-color: transparent;
        border-bottom-color: transparent;
        border-radius: 50%;
        filter: blur(3px); /* fuzzy: the arc is light, not an outline */
        box-shadow: 0 0 18px 4px rgba(var(--fx-rgb), 0.5), inset 0 0 10px rgba(255, 255, 255, 0.3);
        left: 14%;
        bottom: 14%;
        opacity: 0;
        animation: fx-arc-cycle 17s ease-out infinite;
        animation-delay: calc(var(--fx-d, 0s) * 0.5 - 2s);
    }
    .site .fx-host[data-fv="1"] .fx-arc { left: auto; right: 12%; }
    .site .fx-host[data-fv="2"] .fx-arc { left: 42%; }
    .site .fx-dot {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 0 8px 2px rgba(var(--fx-rgb), 0.95);
        bottom: 10%;
        opacity: 0;
        animation: fx-dot-cycle 13s ease-in-out infinite;
    }
    .site .fx-dot.d1 { left: 12%; animation-delay: calc(var(--fx-d, 0s) * 0.4); }
    .site .fx-dot.d2 { left: 46%; animation-delay: calc(var(--fx-d, 0s) * 0.4 - 4.3s); }
    .site .fx-dot.d3 { right: 14%; animation-delay: calc(var(--fx-d, 0s) * 0.4 - 8.6s); }
    @keyframes fx-arc-cycle {
        0% { opacity: 0; transform: translate3d(-8px, 14px, 0) rotate(-8deg) scale(0.7); }
        6% { opacity: 0.75; }
        14% { opacity: 0.3; }
        22%, 100% { opacity: 0; transform: translate3d(22px, -92px, 0) rotate(26deg) scale(1.35); }
    }
    @keyframes fx-dot-cycle {
        0% { opacity: 0; transform: translate3d(0, 10px, 0) scale(0.6); }
        4% { opacity: 1; }
        13% { opacity: 0.45; }
        22%, 100% { opacity: 0; transform: translate3d(10px, -78px, 0) scale(1.15); }
    }

    /* ---- ember: a wisp and a haze take turns, a few times a minute. One 48 s cycle per panel (a different phase on each, from --fx-d):
       first the wisp drifts up (0-18%), the panel rests, the haze breathes (50-72%), it rests again. So a panel never shows both, and shows
       neither most of the time. The wisp is a hair-fine fibre: about 1px thick, under 70px long, tapering to nothing at both ends (a mask),
       with a faint glow in the panel's colour. It fades in slowly from nothing to a low peak, sways a little and drifts up as it fades
       away. The haze has no line at all: a pool of light that drifts up and spreads. ---- */
    .site .fx-wisp {
        width: 68px;
        height: 54px;
        left: 10%;
        bottom: 10%;
        opacity: 0;
        animation: fx-wisp-cycle 48s ease-in-out infinite;
        animation-delay: calc(var(--fx-d, 0s) * 2.4 - 1s);
    }
    .site .fx-host[data-fv="1"] .fx-wisp { left: auto; right: 10%; }
    .site .fx-host[data-fv="2"] .fx-wisp { left: 38%; }
    .site .fx-wisp svg {
        display: block;
        width: 100%;
        height: 100%;
        overflow: visible;
        fill: none;
        stroke: rgba(255, 255, 255, 0.85);
        stroke-width: 1px;
        stroke-linecap: round;
        filter: blur(0.45px) drop-shadow(0 0 2.5px rgba(var(--fx-rgb), 0.6)) drop-shadow(0 0 6px rgba(var(--fx-rgb), 0.3));
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 38%, rgba(0, 0, 0, 0.55) 72%, transparent 100%);
        mask-image: linear-gradient(90deg, transparent 0, #000 38%, rgba(0, 0, 0, 0.55) 72%, transparent 100%);
        animation: fx-wisp-sway 6s ease-in-out infinite alternate;
        animation-play-state: inherit; /* follows the panel: stopped off screen, paused with the tab, like everything else here */
    }
    .site .fx-wisp svg path { vector-effect: non-scaling-stroke; } /* the line stays 1px however the strand is scaled */
    .site .fx-host[data-fv="1"] .fx-wisp svg { transform: scaleX(-1); }
    .site .fx-haze {
        width: 190px;
        height: 82px;
        left: 4%;
        bottom: 4%;
        border-radius: 50%;
        background: radial-gradient(closest-side, rgba(255, 255, 255, 0.2), rgba(var(--fx-rgb), 0.09) 48%, transparent 100%);
        opacity: 0;
        animation: fx-haze-cycle 48s ease-out infinite;
        animation-delay: calc(var(--fx-d, 0s) * 2.4 - 1s);
    }
    .site .fx-host[data-fv="1"] .fx-haze { left: auto; right: 2%; }
    .site .fx-host[data-fv="2"] .fx-haze { left: 30%; }
    @keyframes fx-wisp-cycle {
        0% { opacity: 0; transform: translate3d(0, 12px, 0) scale(0.92) rotate(-3deg); }
        8% { opacity: 0.5; }
        13% { opacity: 0.4; }
        18%, 100% { opacity: 0; transform: translate3d(6px, -58px, 0) scale(1.12) rotate(4deg); }
    }
    @keyframes fx-wisp-sway {
        from { translate: -5px 0; }
        to { translate: 6px 0; }
    }
    @keyframes fx-haze-cycle {
        0%, 50% { opacity: 0; transform: translate3d(0, 18px, 0) rotate(-10deg) scale(0.8); }
        56% { opacity: 1; }
        66% { opacity: 0.5; }
        72%, 100% { opacity: 0; transform: translate3d(18px, -110px, 0) rotate(8deg) scale(1.6); }
    }

    /* ---- runner: a point of light runs once along an edge, then a long rest ---- */
    .site .fx-run {
        top: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background: linear-gradient(90deg, transparent calc(100% - 170px), rgba(var(--fx-rgb), 0.55) calc(100% - 8px), #fff calc(100% - 1px), transparent);
        transform: translateX(-100%);
        opacity: 0;
        animation: fx-run 23s cubic-bezier(0.45, 0.05, 0.3, 1) infinite;
        animation-delay: var(--fx-d, 0s);
    }
    .site .fx-run::after {
        content: "";
        position: absolute;
        right: -16px;
        top: -8px;
        width: 48px;
        height: 19px;
        background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(var(--fx-rgb), 1), rgba(var(--fx-rgb), 0.35) 45%, transparent 75%);
    }
    .site .fx-host[data-fv="1"] .fx-run {
        top: auto;
        bottom: 0;
        background: linear-gradient(270deg, transparent calc(100% - 170px), rgba(var(--fx-rgb), 0.55) calc(100% - 8px), #fff calc(100% - 1px), transparent);
        transform: translateX(100%);
        animation-name: fx-run-back;
        animation-duration: 27s;
    }
    .site .fx-host[data-fv="1"] .fx-run::after { right: auto; left: -16px; }
    .site .fx-host[data-fv="2"] .fx-run { animation-duration: 31s; }
    @keyframes fx-run {
        0% { transform: translateX(-100%); opacity: 0; }
        2% { opacity: 1; }
        18% { transform: translateX(2%); opacity: 1; }
        21%, 100% { transform: translateX(8%); opacity: 0; }
    }
    @keyframes fx-run-back {
        0% { transform: translateX(100%); opacity: 0; }
        2% { opacity: 1; }
        18% { transform: translateX(-2%); opacity: 1; }
        21%, 100% { transform: translateX(-8%); opacity: 0; }
    }

    /* ---- twinkle: a few tiny stars blink at their own pace (quiet; for grids of small items) ---- */
    .site .fx-star {
        width: 3px;
        height: 3px;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 0 7px 2px rgba(var(--fx-rgb), 0.9);
        opacity: 0;
        animation: fx-twinkle 8s ease-in-out infinite;
    }
    .site .fx-star.s1 { left: 11%; top: 24%; animation-delay: calc(var(--fx-d, 0s) * 0.3); }
    .site .fx-star.s2 { left: 37%; top: 72%; animation-delay: calc(var(--fx-d, 0s) * 0.3 - 2.1s); }
    .site .fx-star.s3 { left: 64%; top: 30%; animation-delay: calc(var(--fx-d, 0s) * 0.3 - 4.4s); }
    .site .fx-star.s4 { left: 83%; top: 66%; animation-delay: calc(var(--fx-d, 0s) * 0.3 - 6.2s); }
    @keyframes fx-twinkle {
        0%, 100% { opacity: 0; transform: scale(0.4); }
        6% { opacity: 1; transform: scale(1.3); }
        13% { opacity: 0.25; transform: scale(0.8); }
        20% { opacity: 0; transform: scale(0.4); }
    }

    /* ---- mist: two large fuzzy white curls rise slowly and dissolve (plan and finding cards) ---- */
    .site .fx-mist { width: 130px; height: 46px; border-width: 4px; filter: blur(6px); left: 18%; bottom: 8%; animation: fx-mist 19s ease-out infinite; animation-delay: calc(var(--fx-d, 0s) * 0.4 - 1s); }
    .site .fx-mist.m2 { left: auto; right: 12%; width: 100px; bottom: 18%; animation-duration: 23s; animation-delay: calc(var(--fx-d, 0s) * 0.4 - 9s); }
    @keyframes fx-mist {
        0% { opacity: 0; transform: translate3d(-10px, 16px, 0) rotate(-6deg) scale(0.75); }
        10% { opacity: 0.55; }
        30% { opacity: 0.2; }
        42%, 100% { opacity: 0; transform: translate3d(26px, -70px, 0) rotate(20deg) scale(1.3); }
    }

    /* ---- pulse: the glow under the numbers breathes (metric cards) ---- */
    .site .fx-breathe {
        inset: 0;
        background: radial-gradient(ellipse 70% 90% at 14% 100%, rgba(var(--fx-rgb), 0.36), transparent 70%);
        animation: fx-breathe 6s ease-in-out infinite;
        animation-delay: var(--fx-d, 0s);
    }
    @keyframes fx-breathe { 0%, 100% { opacity: 0.3; transform: scale(1); } 50% { opacity: 0.95; transform: scale(1.06); } }


    /* ================= the current tab / entry ================= */
    .site .fx-lit { --fx-rgb: 0, 240, 255; --fx-rgb2: 169, 125, 255; }

    /* ---- wind: fire and wind blowing to the right from the lit bar (sidebar) ---- */
    .site .fx-flame {
        left: 0;
        top: 0;
        bottom: 0;
        width: 74%;
        background: radial-gradient(ellipse 80% 75% at 0% 50%, rgba(255, 255, 255, 0.6), rgba(var(--fx-rgb), 0.5) 26%, rgba(var(--fx-rgb), 0.13) 56%, transparent 78%);
        transform-origin: 0 50%;
        animation: fx-flame 1.9s linear infinite;
    }
    @keyframes fx-flame {
        0%, 100% { opacity: 0.6; transform: scaleX(0.92); }
        13% { opacity: 0.95; transform: scaleX(1.05); }
        27% { opacity: 0.7; transform: scaleX(0.96); }
        44% { opacity: 1; transform: scaleX(1.12); }
        61% { opacity: 0.75; transform: scaleX(0.98); }
        80% { opacity: 0.95; transform: scaleX(1.07); }
    }
    .site .fx-gust {
        left: 0;
        width: 100%;
        height: 3px;
        border-radius: 2px;
        background: linear-gradient(90deg, transparent 30%, rgba(var(--fx-rgb), 0.6) 74%, #fff 96%, transparent);
        filter: blur(1px);
        transform: translateX(-100%);
        opacity: 0;
        animation: fx-gust 2.6s cubic-bezier(0.3, 0.1, 0.3, 1) infinite;
    }
    .site .fx-gust.g1 { top: 14%; height: 2px; animation-duration: 2.2s; }
    .site .fx-gust.g2 { top: 31%; animation-duration: 2.9s; animation-delay: -0.6s; }
    .site .fx-gust.g3 { top: 49%; height: 4px; animation-duration: 2.5s; animation-delay: -1.2s; }
    .site .fx-gust.g4 { top: 67%; animation-duration: 3.1s; animation-delay: -1.9s; }
    .site .fx-gust.g5 { top: 83%; height: 2px; animation-duration: 2.4s; animation-delay: -0.9s; }
    @keyframes fx-gust {
        0% { transform: translateX(-100%); opacity: 0; }
        10% { opacity: 1; }
        68% { opacity: 0.8; }
        100% { transform: translateX(14%); opacity: 0; }
    }
    .site .fx-ember {
        left: 4px;
        width: 3px;
        height: 3px;
        border-radius: 50%;
        background: #ffe3b8;
        box-shadow: 0 0 6px 2px rgba(255, 150, 96, 0.9);
        opacity: 0;
        animation: fx-ember 2.8s ease-out infinite;
    }
    .site .fx-ember.e1 { top: 28%; }
    .site .fx-ember.e2 { top: 52%; animation-delay: -0.9s; animation-duration: 3.2s; }
    .site .fx-ember.e3 { top: 70%; animation-delay: -1.7s; }
    .site .fx-ember.e4 { top: 40%; animation-delay: -2.3s; animation-duration: 3.5s; }
    @keyframes fx-ember {
        0% { opacity: 0; transform: translate3d(0, 0, 0) scale(0.6); }
        12% { opacity: 1; }
        70% { opacity: 0.5; }
        100% { opacity: 0; transform: translate3d(130px, -14px, 0) scale(0.9); }
    }

    /* ---- flow: a glowing ribbon of light flowing along the tab (header tab and page tab strips); loops seamlessly ---- */
    .site .fx-flow {
        left: 0;
        bottom: 0;
        width: 300%;
        height: 78%;
        background: repeat-x 0 0 / 33.3333% 100% linear-gradient(90deg, rgba(0, 240, 255, 0.5), rgba(169, 125, 255, 0.6), rgba(255, 56, 184, 0.5), rgba(169, 125, 255, 0.6), rgba(0, 240, 255, 0.5));
        -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.35) 55%, transparent 100%);
        mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.35) 55%, transparent 100%);
        animation: fx-flow 8s linear infinite;
    }
    .site .fx-flow-b { height: 46%; opacity: 0.7; animation-duration: 13s; animation-direction: reverse; }
    @keyframes fx-flow { from { transform: translateX(0); } to { transform: translateX(-33.3333%); } }
    .site .fx-bloom {
        left: -10%;
        right: -10%;
        bottom: -30%;
        height: 130%;
        background: radial-gradient(ellipse 55% 60% at 50% 100%, rgba(var(--fx-rgb), 0.6), rgba(var(--fx-rgb), 0.16) 50%, transparent 75%);
        animation: fx-bloom 3.6s ease-in-out infinite;
    }
    @keyframes fx-bloom { 0%, 100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.1); } }


    /* an old highlight (the rules' contents and the wiki list move their marks) disappears at once */
    .site .fx-lit:not([aria-current], .is-current, .active) > .fx,
    .site .fx-lit:not([aria-current], .is-current, .active) > .fx-rise { display: none; }
    .site .fx-lit > .fx { clip-path: none; }

    /* a light runs along the current menu tab's underline, and up and down the current entry's bar */
    .site .site-nav a[aria-current]:not(.nav-cta)::before {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        z-index: 1;
        width: 34%;
        height: 4px;
        pointer-events: none;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.95) 50%, transparent);
        transform: translateX(-100%);
        will-change: transform;
        animation: fx-underline 6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    }
    @keyframes fx-underline { 0% { transform: translateX(-100%); } 55%, 100% { transform: translateX(300%); } }
    .site .site-nav a[aria-current]:not(.nav-cta) { text-shadow: 0 0 14px rgba(0, 240, 255, 0.75); }
    .site .site-nav a[aria-current]:not(.nav-cta)::after { height: 4px; box-shadow: 0 0 22px 2px rgba(0, 240, 255, 0.85); }
    .site .rules-sidebar a.is-current::after, .site .wiki-link.active::after {
        content: "";
        position: absolute;
        left: 0;
        top: 8px;
        z-index: 1;
        width: 3px;
        height: 12px;
        pointer-events: none;
        background: linear-gradient(180deg, transparent, #fff 50%, transparent);
        will-change: transform;
        animation: fx-bar 3.4s ease-in-out infinite alternate;
    }
    @keyframes fx-bar { from { transform: translateY(0); } to { transform: translateY(180%); } }
    .site .rules-sidebar h2::before, .site .section-heading .eyebrow::before { animation: fx-diamond 3.2s ease-in-out infinite alternate; }
    @keyframes fx-diamond { from { transform: scale(0.85); opacity: 0.75; } to { transform: scale(1.18); opacity: 1; } }

    /* Pause motion / hidden tab */
    .is-still .site .fx,
    .is-still .site .fx-rise,
    .is-still .site .site-nav a[aria-current]::before,
    .is-still .site .rules-sidebar a.is-current::after,
    .is-still .site .wiki-link.active::after { display: none; }
    .is-still .site .rules-sidebar h2::before, .is-still .site .section-heading .eyebrow::before { animation: none; }
    .is-paused .site .fx > i,
    .is-paused .site .fx-rise > i,
    .is-paused .site .rules-sidebar h2::before,
    .is-paused .site .section-heading .eyebrow::before,
    .is-paused .site .site-nav a[aria-current]::before,
    .is-paused .site .rules-sidebar a.is-current::after,
    .is-paused .site .wiki-link.active::after { animation-play-state: paused !important; }
}
@media (max-width: 600px) {
    /* phones: keep the light and the sparks, drop the big arcs and the wisp */
    .site .fx-arc, .site .fx-mist { display: none; }
    .site .fx-rise > .fx-wisp { display: none; }
}
@media (prefers-reduced-motion: reduce), (forced-colors: active), (prefers-reduced-transparency: reduce) {
    .site .fx, .site .fx-rise { display: none; }
}

/* Pause motion button (header): an icon pair, the pressed state shows "play" */
.icon-button { display: inline-grid; place-items: center; align-self: center; flex: none; width: 42px; height: 42px; padding: 0; border: 1px solid var(--line); border-radius: 3px; background: rgba(10, 5, 38, 0.6); color: var(--text-2); cursor: pointer; transition: border-color 150ms ease, color 150ms ease, background-color 150ms ease; }
.icon-button:hover { border-color: var(--cyan); color: #fff; background: rgba(0, 240, 255, 0.1); }
.motion-toggle .icon + .icon { display: none; }
.motion-toggle[aria-pressed="true"] .icon:first-child { display: none; }
.motion-toggle[aria-pressed="true"] .icon + .icon { display: inline-block; }
.motion-toggle[aria-pressed="true"] { border-color: var(--pink); color: var(--pink-soft); }
.motion-toggle[hidden] { display: none; }
.site-header .motion-toggle { margin-left: 8px; }

/* the masthead settles in on the first public page of a session (the portal's own entrance) */
@keyframes mast-in { from { opacity: 0; transform: scale(1.07); } to { opacity: 1; transform: none; } }
@keyframes water-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes content-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
    .ml-first .mast-art { animation: water-in 1.2s ease backwards; }
    .ml-first .mast-art > i { transform-origin: 50% 100%; animation: mast-in 1.7s var(--ease-out) backwards; }
    .ml-first .mast-water { animation: water-in 1.6s ease 0.25s backwards; }
    .ml-first .site-header .site-brand, .ml-first .site-header .site-nav { animation: content-rise 0.7s var(--ease-out) 0.25s backwards; }
    .ml-first .site-main > .container:first-child { animation: content-rise 0.7s var(--ease-out) 0.4s backwards; }
}

/* Ambient motion: every infinite decorative loop on the landing hero, and nothing else (entrances and the one-time reveal are not in this list).
   .is-paused is set while the tab is hidden, .is-still when the visitor pressed Pause motion or prefers reduced motion; assets/water.js watches
   the same classes (and is-away, when the hero is scrolled out of view) and stops its loop, leaving one still frame. */
.is-paused .hero .stars .stars-b,
.is-paused .hero .stars .stars-c,
.is-paused .hero .shooting-star,
.is-paused .hero .glints::before,
.is-paused .hero .glints::after,
.is-paused .hero .moon-bloom,
.is-paused .hero .wm-sweep,
.is-paused .hero .btn-glint::after,
.is-paused .hero .scroll-cue .icon { animation-play-state: paused; }
.is-still .hero .stars .stars-b,
.is-still .hero .stars .stars-c,
.is-still .hero .shooting-star,
.is-still .hero .glints::before,
.is-still .hero .glints::after,
.is-still .hero .moon-bloom,
.is-still .hero .wm-sweep,
.is-still .hero .btn-glint::after,
.is-still .hero .scroll-cue .icon { animation: none !important; }
.is-still .hero { position: relative; }
.is-still .words .w > span { translate: none; }
/* a hero scrolled out of view rests too */
.is-away .hero .stars .stars-b,
.is-away .hero .stars .stars-c,
.is-away .hero .shooting-star,
.is-away .hero .glints::before,
.is-away .hero .glints::after,
.is-away .hero .moon-bloom,
.is-away .hero .wm-sweep,
.is-away .hero .btn-glint::after { animation-play-state: paused; }
/* ...and so does one the page has scrolled all the way over */
.is-covered .hero .stars .stars-b,
.is-covered .hero .stars .stars-c,
.is-covered .hero .shooting-star,
.is-covered .hero .glints::before,
.is-covered .hero .glints::after,
.is-covered .hero .moon-bloom,
.is-covered .hero .wm-sweep,
.is-covered .hero .btn-glint::after { animation-play-state: paused; }

/* ------------------------------------------------------------------ 12c. interactions (site-motion.js): pointer tilt, magnetic buttons, words that rise
   Only with a mouse, and only when motion is welcome. A card tilts toward the pointer (at most 6 degrees) and catches the light; a large button leans
   toward it; a heading's words rise in one after another as it scrolls into view. */
[data-tilt].is-tilting { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 120ms ease-out, filter 200ms ease; z-index: 3; will-change: transform; filter: drop-shadow(0 22px 28px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 22px rgba(255, 56, 184, 0.22)); }
.btn[data-magnet] { translate: var(--bx, 0px) var(--by, 0px); transition: filter 200ms ease, transform 120ms ease, box-shadow 200ms ease, translate 220ms var(--ease-out); }
.js .words .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.js .words .w > span { display: inline-block; translate: 0 112%; transition: translate 700ms var(--ease-out); transition-delay: calc(var(--wi, 0) * 55ms); }
.js .reveal.is-in .words .w > span, .js .words.is-in .w > span { translate: 0 0; }

/* a heading whose words are clipped to rise cannot carry a text-shadow (the clip would cut it into boxes): its glow is a filter on the whole heading */
.site .words { text-shadow: none; filter: drop-shadow(0 0 14px rgba(169, 125, 255, 0.4)); }
.site .chapter-title.words { filter: drop-shadow(0 0 14px rgba(255, 56, 184, 0.4)); }

/* ------------------------------------------------------------------ 13. motion + adaptation */
/* a one-time rise as a block scrolls into view; only when the script is running and the visitor has not asked for less motion */
@media (prefers-reduced-motion: no-preference) {
    .js .reveal { opacity: 0; translate: 0 18px; transition: opacity 600ms var(--ease-out), translate 600ms var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
    .js .reveal.is-in { opacity: 1; translate: none; }
    .js .reveal[data-tilt] { transition: opacity 600ms var(--ease-out), translate 600ms var(--ease-out), transform 400ms var(--ease-out), filter 200ms ease; transition-delay: calc(var(--i, 0) * 70ms), calc(var(--i, 0) * 70ms), 0s, 0s; }
    .js .section-heading.reveal { opacity: 1; translate: none; }
    .js .section-heading.reveal .eyebrow { opacity: 0; transition: opacity 600ms var(--ease-out); }
    .js .section-heading.reveal.is-in .eyebrow { opacity: 1; }
    .js .section-heading.reveal::after { transform: scaleX(0); transform-origin: 0 50%; transition: transform 800ms var(--ease-out) 300ms; }
    .js .section-heading.reveal.is-in::after { transform: none; }
}

@media (max-width: 1100px) {
    .features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 1140px) {
    .nav-toggle { display: grid; order: 2; margin-left: 8px; }
    .site-header .motion-toggle { order: 1; margin-left: auto; }
    .site-nav {
        position: absolute;
        z-index: 60;
        top: 100%;
        left: 0;
        right: 0;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 8px 16px 18px;
        background: linear-gradient(180deg, rgba(5, 3, 26, 0.98), rgba(8, 3, 38, 0.98));
        border-bottom: 1px solid var(--line);
        box-shadow: 0 24px 40px -16px rgba(0, 0, 0, 0.8);
    }
    .site-nav.is-open { display: flex; }
    .site-header.is-over .site-nav { align-self: auto; align-items: stretch; }
    .site-nav a { min-height: 50px; padding: 0 14px; clip-path: none; border-bottom: 1px solid var(--line-soft); font-size: 0.82rem; }
    .site-nav a::after { display: none; }
    .site-nav a[aria-current] { box-shadow: inset 3px 0 0 var(--cyan); }
    .site-nav a.nav-cta { margin: 14px 0 0; justify-content: center; min-height: 48px; border-bottom: 0; }
}
@media (max-width: 1500px) {
    .chapter-rail button span { display: none !important; }
}
@media (max-width: 960px) {
    :root { --mast-h: 88px; }
    .chapter { padding: 90px 0; min-height: 0; display: block; }
    .chapter-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
    .chapter-num b { font-size: 4rem; }
    .chapter-frame { max-width: 560px; }
    .container { padding: 0 24px; }
    .site-header { padding: 0 24px; }
    .about-grid, .join-grid, .discord-grid { grid-template-columns: minmax(0, 1fr); }
    .stat-stack { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .discord-widget { max-width: 420px; }
    .rules-layout, .wiki-layout { grid-template-columns: minmax(0, 1fr); padding-top: 28px; }
    .rules-sidebar, .wiki-sidebar { position: relative; top: auto; max-height: none; }
    .rules-sidebar ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rules-intro { grid-template-columns: minmax(0, 1fr); }
    .wiki-content { min-height: 0; }
    .wiki-sidebar { max-height: 360px; }
}
@media (max-width: 640px) {
    :root { --mast-h: 80px; }
    .container { padding: 0 16px; }
    .site-header { padding: 0 16px; }
    .site-brand-title { font-size: 1.1rem; letter-spacing: 0.16em; }
    .band { padding: 60px 0; }
    .band + .band { padding-top: 24px; }
    .features-grid, .stat-stack { grid-template-columns: minmax(0, 1fr); }
    .discord-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footer-bottom { justify-content: flex-start; }
    .rules-card, .wiki-content, .join-panel, .join-actions { padding: 24px 22px 22px; }
    .rule-split, .rules-sidebar ul { grid-template-columns: minmax(0, 1fr); }
    .join-panel, .join-actions { padding-left: 22px; padding-right: 22px; }
    .info-list li { flex-direction: column; align-items: flex-start; gap: 4px; }
    .info-value { text-align: left; }
    .hero { --title-w: min(86vw, 520px); }
    .btn-large { min-height: 54px; padding: 0 26px; }
    .hero .scroll-cue { display: none; }
}
@media (max-width: 420px) {
    .discord-stats { grid-template-columns: minmax(0, 1fr); }
    .stat-number { font-size: 1.7rem; }
}
@media (max-width: 380px) {
    .brand-copy .site-brand-kicker { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .hero { position: relative; }
    .js .words .w > span { translate: none !important; }
    .site *, .site *::before, .site *::after { animation: none !important; transition: none !important; }
}
@media print {
    .js .reveal { opacity: 1; translate: none; }
    .scroll-progress { display: none; }
    .site-header, .scroll-cue, .nav-toggle, .motion-toggle, .discord-widget { display: none; }
    body.site { background: #fff; color: #000; }
    body.site::before, body.site::after, .hero .scene { display: none; }
}
@media (prefers-reduced-transparency: reduce) {
    .site-header.is-over.is-solid, .site-nav { background: #06031c; }
}
@media (forced-colors: active) {
    body.site::before, body.site::after, .mast-art, .mast-water, .hero .scene { display: none; }
    :is(.panel, .rules-card, .rules-sidebar, .wiki-sidebar, .wiki-content)::before, :is(.panel, .rules-card, .rules-sidebar, .wiki-sidebar, .wiki-content)::after { display: none; }
    .panel, .rule-callout, .wiki-search { border: 1px solid CanvasText; }
    .btn { color: ButtonText; background: ButtonFace; border: 1px solid ButtonText; box-shadow: none; }
    .btn::before, .btn::after { display: none; }
    .site-nav a { clip-path: none; }
    .site-nav a[aria-current], .wiki-link.active { border: 1px solid Highlight; color: LinkText; }
    .hero-content { position: static; padding: 120px 20px 40px; }
    .hero { height: auto; position: relative; }
    .site h1, .site-brand-title, .stat-number { text-shadow: none; }
}