/* A continuous, native-scroll introduction. Scene composition comes before interface. */
:root{--intro-nav:70px;--intro-cream:#f4e5bd;--intro-ink:#252b20}
html{scroll-behavior:auto}body{overflow-x:clip}header.nav{background:#1c2019f5;border-bottom:1px solid #656a47;box-shadow:none}header.nav::before{display:none}.nav .wrap{height:var(--intro-nav);gap:24px}.nav nav{gap:22px}.nav nav a{color:#ddd4b8;font-size:17px}.nav .brand .mk{font-size:26px}.nav .pill{font-size:12px;letter-spacing:.08em;padding:7px 9px}
#how,#roster,#battle,#community,#faq,#install,#dev{scroll-margin-top:calc(var(--intro-nav) + 24px)}
.scroll-intro{position:relative;background:#7d9768;color:var(--intro-cream)}
.intro-sticky{position:relative;min-height:100svh;isolation:isolate;overflow:clip;background:#93a291}
.world-stage{position:absolute;inset:0;z-index:-3;opacity:0;pointer-events:none}.world-stage.ready{opacity:1}.world-stage canvas{display:block;width:100%;height:100%}
.intro-poster{position:absolute;inset:0;z-index:-2;pointer-events:none}.intro-poster img{display:block;width:100%;height:100%;object-fit:cover}.rear-poster{display:none}.intro-live .world-stage.ready~.intro-poster{visibility:hidden}
.intro-shade{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,#0b1b2590,transparent 62%),linear-gradient(0deg,#172a22a6,transparent 23%,transparent 80%,#132a2933)}
.intro-topline{position:absolute;top:calc(var(--intro-nav) + 27px);left:4%;right:4%;display:flex;justify-content:space-between;align-items:center;gap:16px;text-shadow:1px 1px #172722;z-index:4}.intro-location{font-family:var(--f-ui);font-size:21px;display:flex;align-items:center;gap:9px}.intro-location>span{color:#e8cc80;font-family:serif;font-size:25px}.intro-location small{font-family:var(--f-sm);font-size:13px;color:#e3e4d4;margin-left:8px}#intro-skip{font-family:var(--f-ui);font-size:15px;text-decoration:none;color:#fff0ca;background:#233827bd;border:1px solid #a6af7859;padding:8px 13px;min-height:42px;display:flex;gap:15px;align-items:center}#intro-skip:hover{background:#213022}
.intro-arrival{position:relative;padding:clamp(190px,28svh,300px) 5% 150px;max-width:660px;min-height:100svh;box-sizing:border-box}.intro-eyebrow{font-family:var(--f-sm);letter-spacing:.16em;font-size:13px;line-height:1.6;color:#e9dda8;margin:0 0 24px;text-shadow:1px 1px #203624}.intro-wordmark{display:flex;font-family:var(--f-quill);font-size:clamp(68px,7.7vw,120px);font-weight:400;line-height:1;white-space:nowrap;letter-spacing:-.04em;color:#fff0b6;text-shadow:2px 3px #1b2b21;margin:0 0 25px}.intro-wordmark em{font-style:normal;color:#eac266}.intro-line{font-family:var(--f-ui);font-size:clamp(26px,3.1vw,42px);line-height:1.2;letter-spacing:-.012em;color:#fcf0d7;text-shadow:1px 2px #203426;margin:0 0 30px}.intro-scroll{font-family:var(--f-ui);font-size:17px;color:#f6e9c2;text-decoration:none;display:inline-flex;align-items:center;gap:14px;min-height:52px;padding:6px 0}.scroll-mark{display:flex;align-items:center;justify-content:center;border:1px solid #b0b28b;width:35px;height:47px;font-size:26px;background:#1631294d}
.intro-journey{position:relative;padding:40px 5%;background:#203424;color:#f4e9ca}.chapter-number{font-family:var(--f-sm);font-size:13px;letter-spacing:.11em;color:#cace9d;text-transform:uppercase}.intro-journey p{font-family:var(--f-ui);font-size:32px;line-height:1.2;margin:9px 0 0;text-shadow:1px 2px #1a2a1b}
.intro-encounter{position:relative;padding:35px 28px;background:#1e2c22f2;border:1px solid #a8a57a82;color:#f0e5c8;box-shadow:0 8px 35px #10211529;max-width:390px;margin:24px 5% 100px auto}.encounter-eyebrow{display:flex;align-items:center;gap:9px;font-family:var(--f-sm);font-size:13px;line-height:1.4;text-transform:uppercase;letter-spacing:.07em;color:#e6bcf3;margin:0 0 17px}.rare-gem{font-size:15px;color:#c996e0}.intro-encounter h2{font-family:var(--f-ui);font-size:33px;font-weight:400;line-height:1.04;letter-spacing:-.02em;color:#ffecbd;text-shadow:1px 2px #152518;margin:0 0 15px}.intro-encounter>p:not(.encounter-eyebrow):not(.intro-demo):not(.intro-status){font-size:18px;line-height:1.4;margin:0 0 22px;color:#d8ddc9}.intro-catch-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px}.intro-encounter .btn{font-family:var(--f-ui);font-size:20px;min-height:53px;padding:10px 20px;gap:13px;justify-content:center;width:100%;border:1px solid;border-color:#e3b467 #44331f #44331f #e3b467;background:linear-gradient(#af6137,#874325);color:#fff3d0;box-shadow:0 3px 0 #142217}.intro-encounter .btn:hover{background:linear-gradient(#c17643,#994d2c);transform:none}.intro-encounter .btn:disabled{cursor:default;background:#485540;border-color:#7b8b64;color:#dbe6c5}.intro-encounter .btn .orb{height:18px;width:18px}.intro-text-button{font-family:var(--f-body);font-size:16px;min-height:44px;padding:6px 0;border:0;color:#e0c997;background:none;text-decoration:underline;text-underline-offset:5px;cursor:pointer}.intro-text-button span{margin-left:5px}.intro-status{font-family:var(--f-ui);font-size:17px;line-height:1.3;margin:12px 0 0;color:#e9d998}.intro-status:empty{display:none}.intro-continue{display:flex;justify-content:space-between;align-items:center;gap:15px;min-height:44px;margin-top:16px;border-top:1px solid #a4a67a3d;padding-top:11px;font-size:16px;color:#e8ddbd;text-decoration:none}.intro-continue:hover{color:#fff4d3}.intro-demo{font-family:var(--f-sm);font-size:12px;line-height:1.4;color:#aebaa1;margin:10px 0 0}.intro-static-note{font-size:16px!important}
.intro-bottom{position:absolute;left:4%;right:4%;bottom:24px;display:flex;align-items:center;gap:25px;font-family:var(--f-sm);font-size:13px;text-shadow:1px 1px #203425;pointer-events:none}.intro-bottom>span:first-child{min-width:112px;letter-spacing:.06em}.intro-progress{height:2px;max-width:180px;flex:1;background:#edf1c72e}.intro-progress span{display:block;width:var(--intro-progress,0%);height:100%;background:#efd590}.intro-showcase{margin-left:auto;margin-right:145px;color:#d3ddc6}.intro-graphics-status{position:absolute;left:4%;bottom:55px;max-width:300px;font-family:var(--f-sm);font-size:13px;background:#253726e6;padding:8px 12px;color:#efe2bd}.intro-anchor{display:block;height:1px;scroll-margin-top:0;pointer-events:none}
#motion-toggle{position:fixed;right:4%;bottom:17px;z-index:41;background:#233323eb;border:1px solid #b7b78480;color:#f1e6c7;font-family:var(--f-sm);font-size:13px;min-height:40px;padding:8px 13px;cursor:pointer;box-shadow:none}#motion-toggle:hover{border-color:#e9d38f;color:#fff2c1}body.motion-paused *,body.motion-paused *::before,body.motion-paused *::after{animation-play-state:paused!important;transition:none!important}[hidden]{display:none!important}
/* Enhancement only: without scripts, chapters remain ordinary readable content. */
.intro-live .scroll-intro{height:400svh}.intro-live .intro-sticky{position:sticky;top:0;height:100svh;min-height:0}.intro-live .intro-arrival{position:absolute;inset:0;max-width:660px;min-height:0}.intro-live .intro-journey{position:absolute;left:5%;bottom:17%;padding:15px 20px;border-left:2px solid #d0c28b;background:#1d3023bf;pointer-events:none}.intro-live .intro-encounter{position:absolute;right:5%;top:50%;transform:translateY(-40%);margin:0;width:350px;padding:28px;box-sizing:border-box}.intro-live .intro-anchor{position:absolute;top:calc((400svh - 100svh)*.65);left:0}.intro-live [data-chapter="journey"] .intro-shade{background:linear-gradient(0deg,#15291f99,transparent 45%)}.intro-live [data-chapter="encounter"] .intro-shade{background:linear-gradient(270deg,#0c211e66,transparent 55%),linear-gradient(0deg,#172d2299,transparent 27%)}.intro-live [data-chapter="encounter"] .arrival-poster{display:none}.intro-live [data-chapter="encounter"] .rear-poster{display:block}
@media(max-width:1100px){.nav nav{gap:16px}.nav .wrap{gap:16px}.intro-location small{display:none}.intro-wordmark{font-size:80px}.intro-arrival{max-width:540px}.intro-live .intro-encounter{right:4%;width:320px;padding:23px}.intro-encounter h2{font-size:30px}.intro-eyebrow{letter-spacing:.08em;font-size:12px}}
@media(max-width:860px){:root{--intro-nav:100px}.nav .wrap{height:100px;padding-top:10px;padding-bottom:8px;gap:0 10px;align-content:space-between}.nav nav{gap:13px;justify-content:space-between;padding-top:5px;overflow:visible}.nav nav a{padding:3px 0;font-size:16px}.nav nav a[href="#battle"],.nav nav a[href="#dev"]{display:none}.nav .brand .mk{font-size:24px}.nav .pill{font-size:11px;padding:5px 7px}}
@media(max-width:759px){
 .intro-live .scroll-intro{height:360svh}.intro-live .intro-anchor{top:calc((360svh - 100svh)*.65)}.intro-topline{top:calc(var(--intro-nav) + 15px);left:5%;right:5%;gap:8px}.intro-location{font-size:18px}.intro-location>span{font-size:22px}#intro-skip{font-size:13px;padding:6px 9px;gap:10px;min-height:40px}.intro-arrival,.intro-live .intro-arrival{padding:calc(var(--intro-nav) + 100px) 6% 115px;max-width:none}.intro-eyebrow{font-size:11px;letter-spacing:.07em;max-width:280px;margin-bottom:16px}.intro-wordmark{font-size:clamp(54px,15vw,100px);margin-bottom:18px}.intro-line{font-size:27px;line-height:1.15}.intro-scroll{font-size:15px;position:absolute;left:6%;bottom:80px;gap:12px}.scroll-mark{width:30px;height:40px;font-size:23px}.intro-shade{background:linear-gradient(0deg,#112a22b3,transparent 31%,transparent 50%,#0b243c55 79%,#11272e55)}
 .intro-live .intro-journey{left:6%;right:6%;bottom:13%;padding:12px 15px;max-width:350px}.intro-journey p{font-size:27px}.chapter-number{font-size:11px}
 .intro-live .intro-encounter{top:auto;bottom:72px;left:5%;right:5%;width:auto;max-width:none;transform:none;padding:18px 20px;background:#1d3024f2}.encounter-eyebrow{font-size:11px;margin-bottom:9px;letter-spacing:.05em}.intro-encounter h2{font-size:28px;margin-bottom:9px}.intro-encounter>p:not(.encounter-eyebrow):not(.intro-demo):not(.intro-status){font-size:16px;line-height:1.25;margin-bottom:15px}.intro-encounter .btn{min-height:48px;font-size:19px;padding:9px 16px}.intro-continue{margin-top:10px;padding-top:8px;font-size:15px;min-height:40px}.intro-demo{font-size:11px;margin-top:7px}.intro-status{font-size:15px;margin-top:10px}.intro-text-button{font-size:14px;min-height:34px;padding:4px 0}.intro-bottom{left:5%;right:5%;bottom:25px;gap:13px;font-size:11px}.intro-bottom>span:first-child{min-width:97px}.intro-progress{max-width:64px}.intro-showcase{display:none}#motion-toggle{right:5%;bottom:17px;font-size:11px;min-height:39px;padding:6px 10px}.intro-graphics-status{left:5%;max-width:200px;bottom:52px;font-size:11px;padding:5px 8px}
 .intro-live [data-chapter="encounter"] .intro-shade{background:linear-gradient(0deg,#10271f8c,transparent 55%)}
}
@media(max-height:730px) and (max-width:759px){.intro-live .intro-encounter{bottom:62px;padding:13px 17px}.intro-encounter h2{font-size:25px}.encounter-eyebrow{margin-bottom:6px}.intro-encounter>p:not(.encounter-eyebrow):not(.intro-demo):not(.intro-status){margin-bottom:10px;font-size:15px}.intro-demo{font-size:10px}.intro-live .intro-arrival{padding-top:calc(var(--intro-nav) + 79px)}.intro-line{font-size:24px}.intro-eyebrow{margin-bottom:11px}.intro-wordmark{margin-bottom:14px}}
@media(prefers-reduced-motion:reduce){.intro-sticky,.intro-arrival,.intro-journey,.intro-encounter{transition:none;animation:none}}
@media(forced-colors:active){.intro-poster,.world-stage,.intro-shade{display:none!important}.intro-sticky,.intro-encounter,.intro-journey{background:Canvas!important;color:CanvasText!important}.intro-sticky *{color:CanvasText!important;text-shadow:none!important}.intro-sticky a,.intro-sticky button,#motion-toggle{border:1px solid ButtonText;background:ButtonFace!important}.intro-progress{background:GrayText}.intro-progress span{background:Highlight}}

body:not(.intro-live) .intro-sticky{display:flex;flex-direction:column;padding-bottom:35px}
body:not(.intro-live) .arrival-poster{height:100svh;bottom:auto}
body:not(.intro-live) .intro-arrival{order:1}
body:not(.intro-live) .intro-journey{order:2}
body:not(.intro-live) .rear-poster{display:block;position:relative;inset:auto;z-index:0;order:3;height:65svh;min-height:320px}
body:not(.intro-live) .intro-encounter{order:4;max-width:650px;width:90%;box-sizing:border-box;margin:25px auto}
body:not(.intro-live) .intro-bottom{display:none}
body:not(.intro-live) .intro-shade{height:100svh;bottom:auto}
body:not(.intro-live) .intro-anchor{position:absolute;top:100svh}