:root {
  color-scheme: dark;
  --ink: #0b1023;
  --midnight: #131834;
  --plum: #292248;
  --gold: #f3c875;
  --gold-bright: #ffdfa0;
  --cream: #fff6e9;
  --mist: #dce4f3;
  --cyan: #83e8e0;
  --outline: rgba(238, 222, 255, 0.28);
  --font-body: "Manrope", "Segoe UI", sans-serif;
  --font-display: "Shippori Mincho", "Yu Mincho", Georgia, serif;
  --hero-gutter: clamp(20px, 4vw, 72px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ink); color: var(--cream); font-family: var(--font-body); }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
button { font: inherit; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 4px; }
::selection { color: #171a2d; background: var(--gold); }
.page-width { width: min(calc(100% - 8vw), 1420px); margin-inline: auto; }

.skip-link { position: fixed; z-index: 1000; top: 12px; left: 12px; transform: translateY(-160%); border-radius: 999px; padding: 12px 18px; background: var(--gold); color: var(--ink); font-weight: 800; }
.skip-link:focus { transform: translateY(0); }

.site-header { position: sticky; z-index: 50; top: 0; left: 0; width: 100%; border-bottom: 1px solid rgba(255, 237, 216, 0.16); background: linear-gradient(180deg, rgba(10, 9, 27, 0.88), rgba(16, 12, 33, 0.45)); backdrop-filter: blur(18px); transition: background 180ms ease, box-shadow 180ms ease; }
.site-header.is-scrolled { background: rgba(11, 12, 31, 0.94); box-shadow: 0 10px 35px rgba(2, 4, 15, 0.28); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; width: calc(100% - 2 * var(--hero-gutter)); min-height: 80px; margin: auto; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.brand-seal { display: grid; place-items: center; flex: none; width: 50px; height: 50px; border: 1px solid rgba(255, 231, 176, 0.68); border-radius: 18px; background: radial-gradient(circle at 25% 20%, rgba(255, 209, 132, 0.3), transparent 55%), rgba(41, 29, 63, 0.8); box-shadow: 0 8px 20px rgba(8, 6, 26, 0.38); color: var(--gold-bright); font-family: var(--font-display); font-size: 18px; font-weight: 800; }
.brand-wordmark { display: grid; gap: 0; line-height: 1.2; }
.brand-wordmark strong { font-family: var(--font-display); font-size: 19px; font-weight: 800; letter-spacing: -0.025em; }
.brand-wordmark small { color: #d9bd9b; font-family: var(--font-display); font-size: 11px; letter-spacing: 0.23em; }
.primary-nav { display: flex; align-items: center; gap: clamp(16px, 2.5vw, 34px); }
.primary-nav a { border-radius: 999px; padding: 10px 4px; color: #f4edf5; font-size: 14px; font-weight: 800; text-decoration: none; transition: color 160ms ease, background 160ms ease, transform 160ms ease; }
.primary-nav a:hover { color: var(--gold-bright); }
.primary-nav .nav-game { border: 1px solid rgba(255, 232, 183, 0.55); padding: 13px 19px; background: rgba(32, 24, 54, 0.5); box-shadow: inset 0 1px rgba(255,255,255,.13); }
.primary-nav .nav-game:hover { transform: translateY(-2px); background: rgba(65, 44, 77, 0.75); }
.nav-game span { margin-left: 7px; }
.menu-toggle { display: none; }

/* Keep the extra Guide destination on one line before the mobile menu takes over. */
@media (min-width: 1051px) and (max-width: 1200px) {
  .brand { flex-shrink: 0; }
  .primary-nav { gap: 14px; }
  .primary-nav a { white-space: nowrap; }
}

.hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; isolation: isolate; background: #070815; }
/* Art keeps its full native composition; copy can grow without zooming it. */
.hero-art { grid-area: 1 / 1; z-index: -3; width: 100%; height: auto; align-self: start; object-fit: contain; mask-image: linear-gradient(180deg, #000 82%, transparent); }
.hero-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-shade { z-index: -2; background: linear-gradient(90deg, rgba(7, 8, 21, 0.92) 0%, rgba(12, 10, 28, 0.82) 24%, rgba(13, 10, 30, 0.4) 51%, rgba(9, 12, 26, 0.03) 80%), linear-gradient(0deg, rgba(7, 8, 21, 0.92), transparent 32%); }
.hero-content { position: relative; grid-area: 1 / 1; min-width: 0; width: calc(100% - 2 * var(--hero-gutter)); padding-block: clamp(28px, 3vw, 52px); }
.chapter-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 11px; width: fit-content; margin-bottom: 18px; color: #ffdfaa; font-size: 12px; font-weight: 800; letter-spacing: 0.19em; text-transform: uppercase; }
.kicker-emblem { display: grid; place-items: center; width: 33px; height: 33px; border: 1px solid rgba(245, 204, 137, 0.7); border-radius: 50%; color: var(--gold); font-size: 18px; }
.kicker-line { width: 34px; height: 1px; border-radius: 9px; background: currentColor; opacity: 0.7; }
.hero h1 { max-width: 820px; margin: 0; color: var(--cream); font-family: var(--font-display); font-size: clamp(48px, 4.2vw, 80px); font-weight: 800; letter-spacing: -0.075em; line-height: 1.06; text-shadow: 0 5px 30px rgba(0, 0, 0, 0.53); }
.hero h1 em { color: var(--gold-bright); font-style: normal; }
.hero-intro { max-width: min(560px, 46%); margin: 22px 0 0; color: #f6ebdf; font-size: clamp(16px, 1.2vw, 18px); font-weight: 600; line-height: 1.65; text-shadow: 0 3px 15px rgba(0,0,0,.58); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 24px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 22px; min-height: 58px; border: 1px solid transparent; border-radius: 999px; padding: 14px 25px; font-size: 14px; font-weight: 800; text-decoration: none; transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease; }
.button:hover { transform: translateY(-3px); }
.button-gold { background: linear-gradient(130deg, #ffdfa0, #eeb75c); box-shadow: 0 15px 34px rgba(21, 11, 29, 0.43), inset 0 1px rgba(255,255,255,.7); color: #211a27; }
.button-gold:hover { box-shadow: 0 17px 38px rgba(234, 168, 86, 0.28); }
.button-glass { border-color: rgba(245, 231, 217, 0.44); background: rgba(21, 15, 34, 0.48); color: #fff9ef; backdrop-filter: blur(12px); }
.button-glass:hover { background: rgba(52, 36, 65, 0.75); }
.hero-caption { display: flex; flex-wrap: wrap; align-items: center; gap: 11px; margin-top: 24px; color: rgba(255, 235, 220, 0.82); font-size: 12px; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; }
.caption-flourish { color: var(--gold); font-size: 18px; }
.caption-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--gold); }
.scroll-cue { position: absolute; right: 4vw; bottom: 34px; display: flex; align-items: center; gap: 16px; color: #fceada; font-size: 12px; font-weight: 800; letter-spacing: 0.13em; text-decoration: none; text-transform: uppercase; }
.scroll-arrow { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid rgba(255, 234, 216, 0.52); border-radius: 50%; font-size: 18px; }

.world-section { position: relative; overflow: hidden; padding: clamp(90px, 11vw, 168px) 0; background: radial-gradient(circle at 5% 10%, rgba(121, 70, 145, 0.21), transparent 34%), radial-gradient(circle at 92% 85%, rgba(55, 127, 164, 0.23), transparent 37%), #10142a; }
.world-section::before { position: absolute; top: 0; left: 50%; width: 60vw; height: 1px; border-radius: 20px; background: linear-gradient(90deg, transparent, rgba(246, 208, 149, 0.55), transparent); content: ""; transform: translateX(-50%); }
.world-inner { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); align-items: center; gap: clamp(38px, 7vw, 116px); }
.section-index { margin: 0 0 22px; color: var(--gold); font-size: 13px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; }
.section-index span { display: inline-grid; place-items: center; width: 40px; height: 40px; margin-right: 8px; border: 1px solid rgba(242, 196, 112, 0.65); border-radius: 50%; letter-spacing: 0; }
.world-copy h2 { max-width: 12ch; margin: 0; font-family: var(--font-display); font-size: clamp(38px, 4vw, 63px); font-weight: 700; letter-spacing: -0.065em; line-height: 1.2; }
.world-copy > p:not(.section-index) { max-width: 47ch; margin: 26px 0 0; color: #cfcee2; font-size: 17px; line-height: 1.85; }
.world-notes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.world-notes span { display: flex; align-items: center; gap: 9px; border: 1px solid rgba(206, 191, 233, 0.27); border-radius: 999px; padding: 10px 15px; background: rgba(65, 57, 93, 0.3); color: #e7e0ee; font-size: 12px; font-weight: 700; }
.world-notes strong { color: var(--gold); font-size: 15px; }
.world-art-frame { position: relative; margin: 0; overflow: hidden; border: 1px solid rgba(255, 229, 176, 0.42); border-radius: 34px; background: #29324d; box-shadow: 0 35px 90px rgba(4, 5, 18, 0.52), inset 0 1px rgba(255,255,255,.2); }
.world-art-frame img { width: 100%; aspect-ratio: 1.33; object-fit: cover; object-position: 52% center; }
.world-art-frame::after { position: absolute; inset: 40% 0 0; background: linear-gradient(0deg, rgba(10, 11, 31, 0.73), transparent); content: ""; pointer-events: none; }
.world-art-frame figcaption { position: absolute; z-index: 1; right: 26px; bottom: 22px; left: 26px; display: flex; align-items: center; gap: 12px; color: #f8f2ed; font-size: 12px; line-height: 1.5; }
.world-art-frame figcaption strong { font-family: var(--font-display); font-size: 19px; font-weight: 700; }
.location-mark { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border: 1px solid rgba(251, 217, 153, 0.8); border-radius: 50%; background: rgba(29, 25, 45, 0.55); color: var(--gold); font-size: 20px; }
.site-footer { display: flex; justify-content: space-between; gap: 15px; padding-block: 26px; color: #aeb0ca; font-size: 12px; }

section[id] { scroll-margin-top: 100px; }
.gameplay-section { position: relative; overflow: hidden; padding: clamp(88px, 10vw, 150px) 0; background: radial-gradient(circle at 80% 15%, rgba(97, 71, 151, 0.24), transparent 30%), linear-gradient(180deg, #11142d, #0b1023 70%); }
.gameplay-section::before { position: absolute; top: 0; left: 50%; width: 60vw; height: 1px; border-radius: 20px; background: linear-gradient(90deg, transparent, rgba(246, 208, 149, 0.45), transparent); content: ""; transform: translateX(-50%); }
.section-heading { max-width: 760px; margin: 0 auto 42px; text-align: center; }
.section-heading .section-index { display: flex; align-items: center; justify-content: center; }
.section-heading h2 { margin: 0; font-family: var(--font-display); font-size: clamp(42px, 4.6vw, 69px); font-weight: 700; letter-spacing: -0.065em; line-height: 1.2; }
.section-heading > p:last-child { max-width: 62ch; margin: 21px auto 0; color: #cecee0; font-size: 17px; line-height: 1.8; }
.feature-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.feature-tab { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 61px; border: 1px solid rgba(228, 211, 255, 0.22); border-radius: 20px; background: rgba(60, 51, 90, 0.26); color: #e5e2ef; font-size: 15px; font-weight: 800; cursor: pointer; transition: transform 170ms ease, color 170ms ease, background 170ms ease, border-color 170ms ease; }
.feature-tab span { color: #ccaada; font-size: 11px; letter-spacing: 0.05em; }
.feature-tab:hover { transform: translateY(-2px); border-color: rgba(245, 202, 130, 0.52); }
.feature-tab.is-active { border-color: rgba(245, 204, 137, 0.72); background: linear-gradient(130deg, rgba(241, 181, 99, 0.24), rgba(106, 68, 116, 0.32)); box-shadow: inset 0 1px rgba(255,255,255,.12), 0 8px 26px rgba(0,0,0,.15); color: #fff4df; }
.feature-tab.is-active span { color: var(--gold-bright); }
.feature-stage { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); min-height: 520px; overflow: hidden; border: 1px solid rgba(222, 193, 236, 0.32); border-radius: 34px; background: linear-gradient(135deg, rgba(50, 44, 88, 0.9), rgba(19, 23, 51, 0.94)); box-shadow: 0 32px 80px rgba(2, 3, 16, 0.46), inset 0 1px rgba(255,255,255,.15); }
.feature-stage-copy { display: flex; align-items: flex-start; flex-direction: column; justify-content: center; padding: clamp(28px, 4.8vw, 76px); }
.feature-rank { display: flex; align-items: center; gap: 10px; margin: 0 0 23px; color: var(--cyan); font-size: 12px; font-weight: 800; letter-spacing: .2em; }
.feature-rank::before { width: 26px; height: 1px; border-radius: 8px; background: currentColor; content: ""; }
.feature-stage h3 { max-width: 11ch; margin: 0; font-family: var(--font-display); font-size: clamp(38px, 3.7vw, 58px); font-weight: 700; letter-spacing: -0.07em; line-height: 1.19; }
.feature-stage-copy > p:not(.feature-rank) { max-width: 45ch; margin: 24px 0 0; color: #d6d8e8; font-size: 16px; line-height: 1.82; }
.feature-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.feature-tags span { border: 1px solid rgba(203, 204, 237, 0.28); border-radius: 999px; padding: 8px 11px; background: rgba(9, 16, 39, 0.33); color: #eae8f2; font-size: 12px; font-weight: 700; }
.feature-continue { display: inline-flex; align-items: center; gap: 12px; margin-top: 31px; border-bottom: 1px solid rgba(244, 203, 127, 0.55); padding: 0 0 8px; color: var(--gold-bright); font-size: 13px; font-weight: 800; text-decoration: none; }
.feature-continue:hover { color: #fff4d6; }
.feature-stage-art { position: relative; min-height: 100%; overflow: hidden; border-radius: 0 33px 33px 0; }
.feature-stage-art img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.feature-stage-art::after { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(29, 25, 64, 0.4), transparent 35%), linear-gradient(0deg, rgba(10, 13, 33, 0.58), transparent 35%); content: ""; pointer-events: none; }
.art-corner-label { position: absolute; z-index: 1; right: 22px; bottom: 22px; border: 1px solid rgba(255, 230, 191, 0.5); border-radius: 999px; padding: 8px 12px; background: rgba(20, 17, 44, 0.57); color: #fff3e9; font-size: 11px; font-weight: 800; letter-spacing: .06em; backdrop-filter: blur(10px); }

.campaign-section { overflow: hidden; padding: clamp(90px, 10vw, 148px) 0; background: radial-gradient(circle at 78% 40%, rgba(244, 183, 112, 0.14), transparent 32%), linear-gradient(135deg, #20203e, #10162d 62%, #132538); }
.campaign-inner { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; gap: clamp(46px, 7vw, 110px); }
.campaign-intro h2 { margin: 0; font-family: var(--font-display); font-size: clamp(44px, 4.6vw, 70px); font-weight: 700; letter-spacing: -.065em; line-height: 1.16; }
.campaign-intro h2 em { color: var(--gold-bright); font-style: normal; }
.campaign-intro > p:last-child { max-width: 48ch; margin: 26px 0 0; color: #d8d8e8; font-size: 17px; line-height: 1.83; }
.campaign-path { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; gap: 8px; }
.campaign-rank { position: relative; display: flex; align-items: center; flex-direction: column; min-height: 265px; border: 1px solid rgba(246, 216, 173, 0.28); border-radius: 28px; padding: 30px 18px 25px; background: linear-gradient(155deg, rgba(82, 66, 112, 0.68), rgba(19, 25, 49, 0.72)); box-shadow: 0 15px 40px rgba(5, 7, 23, 0.25), inset 0 1px rgba(255,255,255,.1); text-align: center; }
.campaign-rank span { display: grid; place-items: center; width: 83px; height: 83px; margin-bottom: 24px; border: 1px solid rgba(255, 225, 174, 0.72); border-radius: 50%; background: rgba(32, 25, 54, 0.66); box-shadow: 0 0 0 9px rgba(240, 198, 133, 0.07), inset 0 0 18px rgba(248, 210, 152, 0.16); color: var(--gold-bright); font-family: var(--font-display); font-size: 38px; font-weight: 800; }
.campaign-rank strong { color: #f9f3eb; font-family: var(--font-display); font-size: 16px; }
.campaign-rank small { max-width: 19ch; margin-top: 8px; color: #c9c8d9; font-size: 12px; line-height: 1.6; }
.campaign-rank-mid { transform: translateY(24px); }
.campaign-rank-last { border-color: rgba(136, 230, 232, 0.42); background: linear-gradient(145deg, rgba(67, 103, 127, 0.62), rgba(21, 37, 59, 0.82)); }
.campaign-rank-last span { border-color: rgba(155, 241, 236, 0.75); box-shadow: 0 0 0 9px rgba(121, 227, 225, 0.09), inset 0 0 18px rgba(154, 236, 234, 0.16); color: var(--cyan); }
.campaign-connector { display: none; }

.closing-section { position: relative; overflow: hidden; isolation: isolate; border-top: 1px solid rgba(243, 200, 117, 0.28); background: radial-gradient(circle at 50% 105%, rgba(228, 119, 116, 0.3), transparent 40%), radial-gradient(circle at 50% 5%, rgba(75, 154, 179, 0.26), transparent 43%), #151633; }
.closing-inner { position: relative; z-index: 1; display: flex; align-items: center; flex-direction: column; padding-block: clamp(105px, 12vw, 190px); text-align: center; }
.closing-orbit { position: absolute; z-index: -1; top: 50%; left: 50%; border: 1px solid rgba(247, 211, 158, 0.15); border-radius: 50%; transform: translate(-50%, -50%); }
.orbit-one { width: 750px; height: 750px; }
.orbit-two { width: 1120px; height: 1120px; }
.closing-star { display: grid; place-items: center; width: 62px; height: 62px; border: 1px solid rgba(246, 206, 148, 0.55); border-radius: 50%; background: rgba(31, 33, 66, 0.55); box-shadow: 0 0 0 11px rgba(242, 205, 147, 0.06); color: var(--gold-bright); font-size: 33px; }
.closing-kicker { margin: 28px 0 16px; color: var(--gold); font-size: 12px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.closing-section h2 { margin: 0; font-family: var(--font-display); font-size: clamp(45px, 5vw, 82px); font-weight: 700; letter-spacing: -.07em; line-height: 1.19; }
.closing-inner > p:not(.closing-kicker) { max-width: 57ch; margin: 25px 0 0; color: #d8d9e8; font-size: 16px; line-height: 1.8; }
.closing-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }

.platform-strip { position: relative; border-block: 1px solid rgba(246, 212, 170, 0.18); background: linear-gradient(100deg, rgba(36, 31, 62, 0.93), rgba(16, 30, 49, 0.95)); }
.platform-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 30px; padding-block: 30px; }
.platform-intro { display: grid; gap: 4px; }
.platform-intro .section-index { margin: 0 0 4px; color: #aee7e2; font-size: 12px; }
.platform-intro strong { font-family: var(--font-display); font-size: clamp(25px, 2.2vw, 34px); line-height: 1.3; }
.platform-intro > span { color: #c7cadc; font-size: 14px; line-height: 1.6; }
.platform-list { display: flex; flex-wrap: wrap; gap: 9px; }
.platform-badge { display: flex; align-items: center; gap: 11px; min-width: 142px; min-height: 62px; border: 1px solid rgba(193, 199, 231, 0.29); border-radius: 18px; padding: 10px 13px; background: rgba(13, 18, 42, 0.52); color: #eeeafb; text-decoration: none; }
.platform-badge svg { flex: none; width: 30px; height: 30px; color: #a9e5df; }
.platform-badge span { display: grid; gap: 1px; font-size: 15px; font-weight: 800; line-height: 1.2; }
.platform-badge small { color: #b5b9d0; font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.platform-available { border-color: rgba(248, 213, 155, 0.65); background: rgba(118, 72, 72, 0.35); transition: transform 180ms ease, border-color 180ms ease, background 180ms ease; }
.platform-available:hover { transform: translateY(-2px); border-color: #ffe8bb; background: rgba(149, 90, 90, 0.48); }
.platform-available:focus-visible { outline: 3px solid #ffdc9e; outline-offset: 4px; }
.platform-available svg, .platform-available small { color: #ffdc9e; }
.platform-download-note { grid-column: 1 / -1; margin: 0; color: #c7cadc; font-size: 13px; line-height: 1.7; }

.registration-panel { scroll-margin-top: 110px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 66px); width: min(100%, 1170px); margin-top: clamp(72px, 8vw, 110px); border: 1px solid rgba(225, 194, 245, 0.38); border-radius: 34px; padding: clamp(26px, 4vw, 56px); background: linear-gradient(130deg, rgba(42, 30, 70, 0.78), rgba(17, 32, 55, 0.72)); box-shadow: 0 25px 75px rgba(5, 7, 22, 0.32), inset 0 1px rgba(255,255,255,.12); text-align: left; backdrop-filter: blur(20px); }
.registration-story .section-index { justify-content: flex-start; margin: 0 0 22px; color: #aee8e2; }
.registration-story h3 { max-width: 12ch; margin: 0; font-family: var(--font-display); font-size: clamp(33px, 3.1vw, 47px); font-weight: 700; letter-spacing: -.055em; line-height: 1.24; }
.registration-story > p:not(.section-index) { max-width: 44ch; margin: 18px 0 0; color: #d9d8e9; font-size: 16px; line-height: 1.75; }
.registration-highlights { display: grid; gap: 20px; margin: 28px 0 0; padding: 0; list-style: none; }
.registration-highlights li { display: grid; grid-template-columns: 46px minmax(0, 1fr); align-items: start; gap: 14px; }
.benefit-icon { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid rgba(248, 207, 146, 0.4); border-radius: 15px; background: rgba(249, 191, 117, 0.12); color: #ffda9d; font-size: 24px; line-height: 1; }
.registration-highlights li > span:last-child { display: grid; gap: 4px; }
.registration-highlights strong { color: #fff9f1; font-size: 15px; }
.registration-highlights small { color: #c9cbde; font-size: 13px; line-height: 1.55; }
.registration-form { display: grid; align-content: start; gap: 15px; border: 1px solid rgba(191, 199, 232, 0.24); border-radius: 25px; padding: clamp(19px, 3vw, 33px); background: rgba(8, 14, 34, 0.53); box-shadow: inset 0 1px rgba(255,255,255,.06); }
.registration-form > label:first-child { color: #f6e8d4; font-size: 14px; font-weight: 800; }
.registration-form input[type="email"] { width: 100%; min-height: 58px; border: 1px solid rgba(197, 202, 226, 0.34); border-radius: 15px; padding: 12px 16px; background: rgba(6, 12, 29, 0.56); color: #fff; font: inherit; font-size: 16px; outline: none; }
.registration-form input[type="email"]:focus-visible { border-color: #ffdc9e; box-shadow: 0 0 0 3px rgba(255, 220, 158, 0.18); }
.registration-form input[type="email"]::placeholder { color: #a9abc2; }
.registration-consent { display: flex; align-items: flex-start; gap: 11px; color: #d3d5e5; font-size: 13px; line-height: 1.55; }
.registration-consent input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: #ffd381; }
.registration-form .button { width: 100%; margin-top: 3px; cursor: pointer; }
.registration-form .button:disabled { cursor: wait; opacity: .72; }
.registration-fineprint { margin: 0; color: #afb4cc; font-size: 12px; line-height: 1.6; }
.registration-fineprint a { color: #ffdfa3; text-underline-offset: .15em; }
.registration-status { min-height: 1.5em; margin: 0; color: #a8ece5; font-size: 13px; font-weight: 700; line-height: 1.5; }
.registration-status[data-state="error"] { color: #ffd0bd; }
.registration-native-status:not(:target) { display: none; }
.registration-native-status { scroll-margin-top: 140px; }
#registration-error, #registration-unavailable { color: #ffd0bd; }

.site-footer { display: block; border-top: 1px solid rgba(223, 191, 229, 0.18); padding: 62px 0 22px; background: #0c1024; color: #d0d1de; }
.footer-main { display: grid; grid-template-columns: minmax(210px, 1.7fr) repeat(3, minmax(145px, 1fr)); gap: clamp(24px, 4vw, 65px); }
.footer-brand { display: grid; justify-items: start; align-content: start; gap: 10px; }
.footer-brand .brand-seal { width: 44px; height: 44px; margin-bottom: 2px; }
.footer-brand strong { color: #fff9ef; font-family: var(--font-display); font-size: 23px; }
.footer-brand small { max-width: 26ch; color: #aeb4cb; font-size: 13px; line-height: 1.65; }
.footer-column { display: flex; align-items: flex-start; flex-direction: column; gap: 13px; }
.footer-column h2 { margin: 6px 0 7px; color: #f6d9a1; font-size: 13px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.footer-column a { color: #d2d5e4; font-size: 14px; line-height: 1.5; text-decoration: none; transition: color 160ms ease; }
.footer-column a:hover { color: #ffdc9e; text-decoration: underline; text-underline-offset: 4px; }
.footer-bottom { display: flex; justify-content: space-between; gap: 15px; margin-top: 52px; border-top: 1px solid rgba(222, 205, 234, 0.14); padding-top: 22px; color: #a9aec2; font-size: 12px; line-height: 1.5; }

@media (max-width: 1050px) {
  .page-width, .header-inner { width: min(calc(100% - 40px), 1420px); }
  .header-inner { min-height: 78px; }
  .menu-toggle { position: relative; z-index: 2; display: grid; align-content: center; gap: 5px; width: 44px; height: 44px; border: 1px solid rgba(255, 227, 169, 0.45); border-radius: 15px; padding: 11px; background: rgba(35, 27, 56, 0.7); }
  .menu-toggle span { width: 100%; height: 2px; border-radius: 10px; background: var(--cream); }
  .primary-nav { position: absolute; top: 67px; right: 20px; left: 20px; display: none; align-items: stretch; flex-direction: column; gap: 2px; border: 1px solid rgba(245, 215, 167, 0.33); border-radius: 22px; padding: 14px; background: rgba(16, 16, 39, 0.96); box-shadow: 0 20px 50px rgba(0,0,0,.5); }
  .primary-nav.is-open { display: flex; }
  .primary-nav a, .primary-nav .nav-game { padding: 13px 16px; }
  .hero-art { grid-area: 1 / 1; }
  .hero-content { grid-area: 2 / 1; padding-block: 28px 68px; }
  .hero-shade { display: none; }
  .hero-intro { max-width: 620px; }
  .hero h1 { font-size: clamp(46px, 6vw, 62px); }
  .world-inner { grid-template-columns: 1fr; }
  .world-copy h2 { max-width: 17ch; }
  .world-art-frame img { aspect-ratio: 1.7; }
  .feature-stage { grid-template-columns: 1fr; }
  .feature-stage-copy { min-height: 420px; }
  .feature-stage-art { min-height: 390px; border-radius: 0 0 33px 33px; }
  .campaign-inner { grid-template-columns: 1fr; }
  .campaign-intro h2 { max-width: 16ch; }
  .platform-inner { grid-template-columns: 1fr; }
  .platform-list { justify-content: flex-start; }
  .registration-panel { grid-template-columns: 1fr; }
  .footer-main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .page-width, .header-inner { width: calc(100% - 32px); }
  .brand-wordmark strong { font-size: 17px; }
  .brand-seal { width: 45px; height: 45px; }
  .hero-content { padding-block: 24px 60px; }
  .chapter-kicker { max-width: 100%; font-size: 10px; letter-spacing: 0.12em; }
  .kicker-line { width: 14px; }
  .hero h1 { font-size: clamp(46px, 12vw, 62px); letter-spacing: -0.08em; }
  .hero-intro { margin-top: 21px; font-size: 15px; line-height: 1.7; }
  .hero-actions { gap: 9px; margin-top: 24px; }
  .button { width: 100%; min-height: 52px; }
  .hero-caption { flex-wrap: wrap; gap: 8px; margin-top: 22px; font-size: 10px; line-height: 1.6; }
  .scroll-cue { right: 16px; bottom: 16px; font-size: 10px; }
  .scroll-cue > span:first-child { display: none; }
  .world-section { padding: 76px 0; }
  .world-copy h2 { font-size: clamp(34px, 9vw, 46px); }
  .world-copy > p:not(.section-index) { font-size: 15px; }
  .world-art-frame { border-radius: 22px; }
  .world-art-frame img { aspect-ratio: 1.12; object-position: 42% center; }
  .world-art-frame figcaption { right: 16px; bottom: 15px; left: 16px; }
  .platform-inner { padding-block: 26px; }
  .platform-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .platform-available { grid-column: 1 / -1; }
  .platform-badge { min-width: 0; }
  .section-heading { margin-bottom: 31px; text-align: left; }
  .section-heading .section-index { justify-content: flex-start; }
  .section-heading h2 { font-size: clamp(36px, 9vw, 48px); }
  .section-heading > p:last-child { font-size: 15px; }
  .feature-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-tab { min-height: 50px; gap: 7px; border-radius: 16px; font-size: 13px; }
  .feature-stage { border-radius: 24px; }
  .feature-stage-copy { min-height: 0; padding: 28px 23px 32px; }
  .feature-stage h3 { font-size: 38px; }
  .feature-stage-copy > p:not(.feature-rank) { margin-top: 18px; font-size: 15px; }
  .feature-stage-art { min-height: 260px; border-radius: 0 0 23px 23px; }
  .art-corner-label { right: 12px; bottom: 12px; font-size: 10px; }
  .campaign-intro h2 { font-size: 42px; }
  .campaign-intro > p:last-child { font-size: 15px; }
  .campaign-path { grid-template-columns: 1fr; gap: 12px; }
  .campaign-rank { min-height: 0; align-items: center; flex-direction: row; gap: 18px; border-radius: 22px; padding: 16px; text-align: left; }
  .campaign-rank span { flex: none; width: 54px; height: 54px; margin: 0; box-shadow: none; font-size: 25px; }
  .campaign-rank strong { width: 28%; font-size: 14px; }
  .campaign-rank small { max-width: none; margin: 0; font-size: 11px; }
  .campaign-rank-mid { transform: none; }
  .closing-section h2 { font-size: clamp(38px, 10vw, 55px); }
  .closing-inner > p:not(.closing-kicker) { font-size: 15px; }
  .closing-actions { width: 100%; }
  .registration-panel { gap: 30px; margin-top: 65px; border-radius: 25px; padding: 21px; }
  .registration-story h3 { font-size: 35px; }
  .registration-form { border-radius: 21px; }
  .footer-main { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 23px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; margin-top: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}