/* Logo blue is the campaign base. Spell colors belong to the characters. */
:root{--brand-blue:#1489ef;--brand-red:#ee3949;--brand-navy:#081c35}
html{background:var(--brand-navy)}body{background:#edf4fa}
header{background:#081c35f5;border-bottom:1px solid #59b7ff33}
header .motion-toggle{border-color:#70b7e9;background:#102d4a}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
/* Every performance is driven by a paused HyperFrames timeline and the scroll adapter. */
.motion-art *, .sigil, .mage-stage:after{animation:none!important;translate:none!important}
.mage-stage:after{display:none}.reveal{opacity:1;transform:none;transition:none}
.boss-card img,.origin-frame svg{transition:none!important}.boss-card:hover img{transform:none}
.campaign{background:var(--brand-navy);color:#eff7ff;min-height:0;display:block;padding:0;overflow:hidden}
.campaign .hf-feature{aspect-ratio:16/10}
.campaign-action{max-width:1440px;margin:0 auto;display:flex;align-items:center;gap:40px;padding:36px var(--gutter);background:var(--brand-navy)}
.campaign-action>div{margin-right:auto}.campaign-action .eyebrow{color:#9deaff;font-size:10px;letter-spacing:.12em;margin:0 0 12px}
.campaign-action p:not(.eyebrow):not(.fine){font-size:17px;line-height:1.6;color:#e2f2ff}
.campaign-action .button,.finale .campaign-action .button{min-width:240px;min-height:64px;margin:0;white-space:nowrap;font-size:15px}
.campaign-action .text-link{color:#b4ddff;font-size:12px}
.campaign-action .fine{margin-top:12px;font-size:10px;color:#b9d3e8}
.campaign-logo{width:160px;height:auto;object-fit:contain}
.hf-feature .hf-replay{border-color:#9deaff66;background:#081c35e8}.hf-replay:hover{background:#154a72}
.world-title h2>span,.world-title h2>em{display:block}.world-title h2{overflow:hidden;padding:.06em 0}
.world-spells{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;overflow:hidden;color:#ffd28a}
.world-spells .spell-route{fill:none;stroke:currentColor;stroke-width:2;stroke-dasharray:1;filter:drop-shadow(0 0 5px #ffb84b)}
.world-spells circle{fill:#ffe3aa;filter:drop-shadow(0 0 6px #ffc069)}
.bosses{overflow:hidden}.boss-card{overflow:hidden;isolation:isolate}
.boss-slice{position:absolute;inset:0;pointer-events:none;border-top:3px solid #9deaff;z-index:2;opacity:0;background:linear-gradient(180deg,#54b9ff25,transparent 12%)}
.origin-frame{overflow:hidden;background:#081c35}.origin-scan{position:absolute;inset:0;pointer-events:none;border-top:3px solid #9deaff;z-index:3;background:linear-gradient(180deg,#1489ef35,transparent 14%);opacity:0}
.mages{background:radial-gradient(ellipse at 78% 40%,#174f87 0%,#10345d 38%,#081c35 80%);color:#edf6ff;transition:none}
.mage-top{border-color:#68a8d744}.mage-top .eyebrow,.roster-count,.mage-kicker{color:#a9dcff}
.mage-top h2,.mage-copy h3{color:#f2f8ff}.mage-copy #mage-description{color:#d4e6f5}
.mage-detail{border-color:#79bfff55}.mage-detail span{color:#8dc9f6}.mage-detail p{color:#e1f3ff}
.mage-instruction,.roster-note{color:#a7c4da}.stage-word{-webkit-text-stroke:1px #6cb8f34a}
.mage-stage:before{background:linear-gradient(115deg,#1489ef26,#1489ef00)}
.sigil{border-color:#7ac6ff33}.sigil:before,.sigil:after{border-color:#7ac6ff33}
.roster{border-color:#6bbaff44}.roster button{border-color:#71aff25c;background:#133555;color:#dcedff;box-shadow:0 3px 0 #020f22}
.roster button:hover{background:#21507c}.roster button[aria-pressed=true]{background:#ba263b;border-color:#ff7884;color:#fff;box-shadow:0 4px 0 #6f162c;transform:translateY(-4px)}
.mage-index{color:#9ec7e8}.halloween{background:#081c35}
@media(max-width:1100px){.campaign-action{gap:24px;flex-wrap:wrap}.campaign-action>div{flex:1;min-width:240px}.campaign-action .text-link{width:100%}.campaign-logo{width:120px}.campaign-action .button,.finale .campaign-action .button{min-width:220px}}
@media(max-width:700px){.campaign .hf-feature{aspect-ratio:9/11}.campaign-action{padding:28px 24px;display:flex;flex-direction:column;align-items:stretch;gap:20px}.campaign-action>div{min-width:0;margin:0}.campaign-action p:not(.eyebrow):not(.fine){font-size:14px}.campaign-action .button,.finale .campaign-action .button{min-width:0;width:100%;margin:0;font-size:14px}.campaign-action .eyebrow{font-size:9px}.campaign-logo{width:112px;align-self:center}.mage-top h2{font-size:32px}.roster{border-color:#6bbaff44;scroll-snap-type:x mandatory}.roster button{scroll-snap-align:center}.finale .campaign-action{margin:0}.finale .hf-feature{order:0}.finale .campaign-action{order:1}.finale{display:block}.hf-label{max-width:45%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}}
/* Replay stays clear of the closing headline in both campaign compositions. */
.campaign .hf-replay{top:16px;bottom:auto;right:16px}

.world-layered{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}.world-keyart{visibility:hidden}.spellcraft{pointer-events:none}.paper-fragments{pointer-events:none}

/* Keep combat silhouettes above the environment grade and clear of the title. */
.midnight-combat{position:absolute;right:0;top:0;width:66%;height:100%;z-index:2;overflow:visible;pointer-events:none}.combat-active .world-title{max-width:39%}.combat-active .world-title h2{font-size:clamp(72px,8vw,128px)}.world-replay{display:block;color:#ffdb9a;background:#1e1638;border:1px solid #e2a65288;padding:13px 20px;border-radius:3px;margin-top:18px;font:700 12px Inter,sans-serif;cursor:pointer}.world-replay:hover{background:#44305a}.world-replay:focus-visible{outline:3px solid #a5eaff;outline-offset:3px}.mage-spells canvas{filter:drop-shadow(8px 12px 8px #0004)}
@media(max-width:760px){.midnight-world.combat-active{min-height:930px;padding-top:440px;padding-bottom:55px}.combat-active .world-title{max-width:100%}.combat-active .world-title h2{font-size:86px;margin-bottom:20px}.midnight-combat{width:100%;height:445px;top:10px}.combat-active .world-vignette{background:linear-gradient(0deg,#100a26 0%,#100a26c9 45%,transparent 75%)}.combat-active .world-title .eyebrow{max-width:260px}.combat-active .world-link{margin-top:12px}.world-replay{margin-top:12px}.combat-active .world-label{font-size:7px}}
/* Grounded encounter: environment and actors use the same SVG camera. */
.combat-active .world-layered{display:none}.midnight-combat{inset:0;width:100%;height:100%;z-index:1;overflow:hidden}.combat-active .world-title{max-width:36%}.combat-active .world-vignette{z-index:2;background:linear-gradient(90deg,#100a26ed 0%,#100a2690 32%,transparent 55%),linear-gradient(0deg,#100a2633,transparent 25%)}
@media(max-width:760px){.midnight-world.combat-active{min-height:805px;padding-top:335px;align-items:flex-end}.midnight-combat{height:330px;top:0;background:#160f31}.combat-active .world-title{max-width:100%}.combat-active .world-title h2{font-size:clamp(48px,20vw,80px)}.combat-active .world-vignette{background:linear-gradient(0deg,#100a26 0%,#100a26 51%,transparent 68%)}.combat-active .world-label{font-size:7px}}