:root{
  --deep:#03162f;
  --navy:#06376b;
  --blue:#0e88f2;
  --cyan:#56edff;
  --ice:#d8fbff;
  --gold:#ffe37a;
  --purple:#8d4cff;
  --green:#55e0aa;
  --panel:#062f60e8;
  --safe-top:max(12px,env(safe-area-inset-top));
  --safe-right:max(16px,env(safe-area-inset-right));
  --safe-bottom:max(12px,env(safe-area-inset-bottom));
  --safe-left:max(16px,env(safe-area-inset-left));
}

*{box-sizing:border-box}
html,body,#app{width:100%;height:100%;margin:0;overflow:hidden}
html{-webkit-text-size-adjust:100%;background:var(--deep)}
body{font-family:"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",system-ui,sans-serif;color:#fff;background:var(--deep);-webkit-tap-highlight-color:transparent;user-select:none}
button{font:inherit;color:inherit;border:0;cursor:pointer;touch-action:manipulation}
button:disabled{cursor:default}
button:focus-visible,[role="button"]:focus-visible{outline:4px solid var(--gold);outline-offset:4px}

.screen{position:absolute;inset:0;min-width:760px;min-height:440px;overflow:hidden;opacity:0;visibility:hidden;pointer-events:none;transform:scale(1.015);transition:opacity .45s ease,transform .55s ease,visibility .45s}
.screen.is-active{z-index:2;opacity:1;visibility:visible;pointer-events:auto;transform:scale(1)}

/* Cover */
.cover-art{position:absolute;inset:-2%;background:url('assets/cover-final-v4.png') center/cover no-repeat;animation:coverBreath 9s ease-in-out infinite alternate}
.cover-vignette{position:absolute;inset:0;background:linear-gradient(90deg,#00122a1a 0%,#00122a00 47%,#00172c66 100%),linear-gradient(0deg,#00111e99 0%,transparent 34%)}
.cover-sparkles{position:absolute;inset:0;pointer-events:none}
.cover-sparkles i,.ambient-stars i,.forest-fireflies i,.battle-particles i{position:absolute;width:7px;height:7px;border-radius:50%;background:#b7f9ff;box-shadow:0 0 14px 6px #25cfff;animation:sparkle 2.8s ease-in-out infinite}
.cover-sparkles i:nth-child(1){left:9%;top:18%}.cover-sparkles i:nth-child(2){left:25%;top:64%;animation-delay:-1.1s}.cover-sparkles i:nth-child(3){left:47%;top:29%;animation-delay:-.4s}.cover-sparkles i:nth-child(4){right:12%;top:19%;animation-delay:-2s}.cover-sparkles i:nth-child(5){right:28%;bottom:17%;animation-delay:-1.6s}.cover-sparkles i:nth-child(6){left:56%;bottom:10%;animation-delay:-.8s}
.start-panel{position:absolute;right:max(4vw,var(--safe-right));top:50%;width:min(520px,42vw);padding:25px 30px 28px;text-align:center;border:2px solid #b9f8ff;border-radius:32px;background:linear-gradient(145deg,#083f79ee,#042750e8);box-shadow:0 25px 80px #00152eee,inset 0 0 28px #56edff20;transform:translateY(-47%);backdrop-filter:blur(8px)}
.start-panel::before{content:"";position:absolute;inset:8px;border:1px solid #aaf5ff55;border-radius:24px;pointer-events:none}
.eyebrow{margin:0 0 6px;color:#a9f5ff;font-size:clamp(14px,1.4vw,19px);font-weight:900;letter-spacing:.08em}
.start-panel h1{margin:0;font-size:clamp(38px,4.1vw,63px);line-height:1.1;text-shadow:0 4px 0 #02315f,0 0 20px #44dfff}
.start-panel h2{margin:4px 0 12px;color:#80efff;font-size:clamp(24px,2.4vw,35px);letter-spacing:.06em}
.summon{margin:10px auto 20px;font-size:clamp(16px,1.45vw,21px);font-weight:700}
.action-button{position:relative;min-width:260px;min-height:62px;padding:12px 28px;overflow:hidden;border:2px solid #d7fcff;border-radius:20px;background:linear-gradient(180deg,#4dd9ff,#0873df);box-shadow:0 7px 0 #064997,0 12px 25px #001d44aa;font-size:clamp(18px,1.8vw,24px);font-weight:1000;text-shadow:0 2px 2px #03437c;transition:transform .18s ease,filter .18s ease}
.action-button:active{transform:translateY(5px);box-shadow:0 2px 0 #064997,0 8px 20px #001d44aa}
.button-flare{position:absolute;top:-60%;left:-25%;width:20%;height:220%;background:#fff8;transform:rotate(24deg);animation:buttonFlare 3.2s ease-in-out infinite}
.sound-button{min-height:40px;margin:17px auto 0;padding:7px 15px;border:1px solid #b7f6ff55;border-radius:22px;background:#ffffff16;font-size:14px;font-weight:800}

/* Shared cinematic controls */
.top-controls,.game-hud{position:absolute;z-index:20;left:var(--safe-left);right:var(--safe-right);top:var(--safe-top);display:flex;align-items:center;justify-content:space-between;gap:14px}
.chapter-chip,.mission-chip{padding:9px 16px;border:1px solid #b8f8ff77;border-radius:22px;background:#032b59d9;box-shadow:0 8px 25px #00152d88;backdrop-filter:blur(8px);font-weight:900}
.chapter-chip span{display:inline-grid;width:30px;height:30px;margin-right:7px;place-items:center;border-radius:50%;background:#26a9ee;color:#fff3a8}
.control-group{display:flex;gap:9px}
.hud-button{min-width:50px;min-height:50px;padding:8px 13px;border:1px solid #baf7ff88;border-radius:25px;background:#042e5bdc;box-shadow:0 7px 20px #00152e77;font-weight:800;backdrop-filter:blur(8px)}
.text-button{min-width:104px}

/* Dynamic comic */
.comic-stage{position:absolute;inset:0;overflow:hidden;background:radial-gradient(circle at 50% 42%,#0b477a 0,#031a32 68%,#010b18 100%)}
.comic-stage::before{content:"";position:absolute;z-index:0;left:2.3%;right:2.3%;top:5.2%;bottom:20.2%;border-radius:24px;background:#f7f9f4;box-shadow:0 20px 65px #000b,inset 0 0 0 2px #d7f9ff88}
.comic-art{position:absolute;z-index:1;left:2.8%;right:2.8%;top:5.8%;bottom:20.8%;border-radius:19px;background-repeat:no-repeat;background-position:center;background-size:contain;filter:saturate(1.04) contrast(1.015);transform-origin:center;will-change:transform,filter,opacity}
.comic-tone{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 48%,transparent 25%,#00152b2e 68%,#00101fd6 115%);transition:background .8s ease}
.ambient-stars{position:absolute;inset:0;opacity:.72}
.ambient-stars i:nth-child(1){left:7%;top:22%}.ambient-stars i:nth-child(2){left:21%;top:58%;animation-delay:-.8s}.ambient-stars i:nth-child(3){left:45%;top:17%;animation-delay:-1.7s}.ambient-stars i:nth-child(4){right:13%;top:33%;animation-delay:-.4s}.ambient-stars i:nth-child(5){right:31%;bottom:15%;animation-delay:-2.1s}.ambient-stars i:nth-child(6){left:62%;bottom:32%;animation-delay:-1.2s}.ambient-stars i:nth-child(7){left:34%;bottom:10%;animation-delay:-2.5s}
.mist-layer{position:absolute;inset:0;opacity:0;transition:opacity .7s ease;pointer-events:none}
.mist-layer i{position:absolute;width:75vmax;height:22vmax;border-radius:50%;background:radial-gradient(ellipse,#7e35d67c 0%,#7e35d630 42%,transparent 72%);filter:blur(24px);animation:mistDrift 9s ease-in-out infinite}
.mist-layer i:nth-child(1){left:-24%;bottom:-5%}.mist-layer i:nth-child(2){right:-28%;top:7%;animation-delay:-3s}.mist-layer i:nth-child(3){left:28%;top:30%;animation-delay:-6s}
.energy-scan{position:absolute;left:-15%;top:0;width:22%;height:100%;opacity:0;background:linear-gradient(90deg,transparent,#a5f8ffbb,transparent);filter:blur(9px);transform:skewX(-14deg);pointer-events:none}
.comic-speed-lines{position:absolute;inset:0;opacity:0;background:repeating-radial-gradient(circle at 52% 50%,transparent 0 12px,#c7fbff38 14px 16px,transparent 18px 28px);transform:scale(1.8);pointer-events:none}
.story-screen[data-effect="mist"] .mist-layer,.story-screen[data-effect="danger"] .mist-layer{opacity:1}
.story-screen[data-effect="danger"] .comic-tone{background:linear-gradient(90deg,#20003677,transparent 55%),radial-gradient(circle at 50% 48%,transparent 10%,#1a002a88 100%)}
.story-screen[data-effect="signal"] .energy-scan{opacity:.62;animation:scanAcross 3.1s ease-in-out infinite}
.story-screen[data-effect="power"] .comic-speed-lines{opacity:.6;animation:powerPulse 2.1s ease-out infinite}
.story-screen[data-effect="power"] .comic-tone{background:radial-gradient(circle at 40% 55%,#a8f7ff05 0,#189dff26 32%,#00142b88 100%)}
.motion-page-calm,.motion-page-danger,.motion-page-mystery,.motion-page-signal,.motion-page-hero,.motion-page-flight,.motion-page-arrival{animation:none}
.comic-actors{position:absolute;z-index:4;inset:5.8% 2.8% 20.8%;overflow:hidden;border-radius:19px;pointer-events:none}
.comic-actor{position:absolute;display:none;background-position:center;background-repeat:no-repeat;background-size:contain;filter:drop-shadow(0 7px 8px #00152a88) drop-shadow(0 0 12px #54eaff66);transform-origin:50% 58%;will-change:transform}
/* 动态立绘只进入漫画的安全区：上方中部或分格留白，不覆盖原图人物。 */
.actor-scene4{left:30%;bottom:-8%;width:40%;height:64%}
.actor-scene5{left:31%;bottom:-9%;width:38%;height:66%}
.actor-scene6{left:27.5%;top:23%;width:45%;height:52%}
.actor-scene7{left:29%;bottom:-10%;width:42%;height:68%}
.comic-actor::before{content:"";position:absolute;inset:12%;z-index:-1;border-radius:50%;background:radial-gradient(ellipse,#57eaff42,transparent 68%);filter:blur(6px);animation:wingPulse 1.25s ease-in-out infinite}
.story-screen[data-scene="3"] .actor-scene4{display:block;animation:alertHover 2.15s ease-in-out infinite}
.story-screen[data-scene="4"] .actor-scene5{display:block;animation:heroCall 2.55s ease-in-out infinite}
.story-screen[data-scene="5"] .actor-scene6{display:block;animation:duoPortalFly 1.85s ease-in-out infinite}
.story-screen[data-scene="6"] .actor-scene7{display:block;animation:duoSlash 2.45s ease-in-out infinite}
.story-screen[data-scene="3"] .energy-scan{opacity:.48;animation:scanAcross 3.1s ease-in-out infinite}
.story-screen[data-scene="4"] .comic-speed-lines{opacity:.34;animation:powerPulse 2.4s ease-out infinite}
.story-screen[data-scene="5"] .comic-speed-lines{opacity:.42;animation:powerPulse 2s ease-out infinite}
.story-screen[data-scene="6"] .mist-layer{opacity:.55}
.sword-glint{position:absolute;left:9%;top:3%;width:29%;height:66%;opacity:.42;background:linear-gradient(90deg,transparent,#c7ffff88,transparent);filter:blur(7px);transform:rotate(-17deg);transform-origin:70% 90%;animation:swordLight 1.8s ease-in-out infinite}
.wing-glow{position:absolute;inset:8% 0 23%;opacity:.22;border-radius:50%;background:radial-gradient(ellipse,#9affff99,transparent 68%);animation:wingPulse 1.1s ease-in-out infinite}
.signal-pulse,.armor-pulse,.speed-aura{position:absolute;inset:12%;border-radius:50%;opacity:.18;background:radial-gradient(ellipse,#8ef7ff99,transparent 68%);animation:wingPulse 1.15s ease-in-out infinite}
.armor-pulse{inset:18% 8% 30%;opacity:.14}.speed-aura{inset:20% 2%;opacity:.2;transform:skewX(-16deg)}
.comic-art.is-turning{animation:comicPageTurnOut .28s ease-in both!important;transform-origin:left center}
.comic-art.is-entering{animation:comicPageTurnIn .4s cubic-bezier(.2,.75,.2,1) both!important;transform-origin:right center}
.chapter-splash{position:absolute;z-index:12;left:50%;top:22%;display:flex;flex-direction:column;align-items:center;opacity:0;transform:translate(-50%,-20px) scale(.9);text-align:center;text-shadow:0 4px 16px #00152a;pointer-events:none}
.chapter-splash.is-visible{animation:chapterReveal 2.2s ease both}
.chapter-splash small{padding:5px 15px;border:1px solid #8fefff;border-radius:20px;background:#063a70cc;color:#b8faff;font-size:16px;font-weight:900;letter-spacing:.3em}
.chapter-splash strong{margin-top:8px;font-size:clamp(38px,5vw,72px);text-shadow:0 4px 0 #06345f,0 0 24px #45e6ff}
.story-dialogue{position:absolute;z-index:20;left:4.5%;right:4.5%;bottom:7.5%;min-height:118px;padding:18px 252px 18px 115px;display:flex;align-items:center;border:2px solid #bcf8ff;border-radius:29px;background:linear-gradient(105deg,#052f60f2,#092448e7);box-shadow:0 18px 55px #001020aa,inset 0 0 24px #55dfff18;backdrop-filter:blur(9px)}
.story-dialogue::before{content:"";position:absolute;inset:7px;border:1px solid #a8f5ff44;border-radius:21px;pointer-events:none}
.story-avatar{position:absolute;left:18px;bottom:15px;width:84px;height:84px;overflow:hidden;border:3px solid #baf9ff;border-radius:50%;background:#0b75c8;box-shadow:0 0 0 5px #0b4b87,0 0 22px #4de8ff88}
.story-avatar.narrator::before{content:"✦";position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(circle,#bfffff,#159be6 58%,#07376e);color:#fff;font-size:45px;text-shadow:0 0 15px #fff}
.story-avatar.guagua{background:url('assets/guagua.webp') 0% 1%/300% 200% no-repeat #eafcff}
.story-avatar.hero{background:url('assets/hero-final-v4.png') 1% 4%/400% 100% no-repeat #eafcff}
.story-avatar.mystery::before{content:"?";position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(circle,#8f51d8,#23063f 70%);color:#f1ddff;font-size:48px;font-weight:1000;text-shadow:0 0 16px #d57aff}
.dialogue-copy{width:100%}
.dialogue-copy b{display:block;margin-bottom:5px;color:#85efff;font-size:17px}
.dialogue-copy p{margin:0;min-height:56px;font-size:clamp(19px,2vw,29px);font-weight:900;line-height:1.6;text-shadow:0 2px 2px #001a35}
.dialogue-copy p span{display:inline-block;opacity:0;transform:translateY(8px);animation:characterIn .28s ease forwards;animation-delay:calc(var(--character-index) * 34ms)}
.story-nav{position:absolute;right:18px;bottom:25px;display:flex;gap:9px}
.story-page-button{min-width:105px;min-height:58px;border:1px solid #bff8ff;border-radius:19px;background:linear-gradient(#23ace9,#0870cf);box-shadow:0 5px 0 #04509b;font-size:16px;font-weight:1000;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.story-page-button span{font-size:27px;vertical-align:-2px}
.prev-story-button{background:linear-gradient(#17699e,#0b4778);box-shadow:0 5px 0 #052f55}
.story-page-button:disabled{opacity:.35;box-shadow:0 2px 0 #052f55;transform:translateY(3px)}
.story-timeline{position:absolute;z-index:21;left:9%;right:9%;bottom:2.8%;display:flex;align-items:center;gap:15px}
.story-progress{height:5px;flex:1;overflow:hidden;border-radius:4px;background:#a7eefe40}
.story-progress i{display:block;width:100%;height:100%;transform-origin:left;background:linear-gradient(90deg,#fff3a0,#57edff);box-shadow:0 0 8px #55e9ff}
.story-dots{display:flex;gap:7px}
.story-dots i{width:8px;height:8px;border-radius:50%;background:#d8f9ff55;transition:.3s}
.story-dots i.is-complete{background:#67eaff}.story-dots i.is-current{width:22px;border-radius:6px;background:#fff3a0;box-shadow:0 0 12px #fff09a}

/* Gate puzzle lives directly inside the world */
.scene-art{position:absolute;inset:-3%;background-image:url('assets/chapter1-storyboard-final-v4.png');background-size:300% 200%;background-repeat:no-repeat;will-change:transform,filter}
.gate-art{background-position:50% 100%;animation:gateCamera 12s ease-in-out infinite alternate}
.scene-depth-back{position:absolute;inset:0;background:radial-gradient(circle at 50% 38%,#52e5ff19,transparent 24%),linear-gradient(0deg,#001a3599 0%,transparent 38%)}
.forest-fireflies{position:absolute;inset:0}
.forest-fireflies i{width:5px;height:5px;animation-duration:3.6s}
.forest-fireflies i:nth-child(1){left:10%;top:24%}.forest-fireflies i:nth-child(2){left:19%;top:55%;animation-delay:-1s}.forest-fireflies i:nth-child(3){left:33%;top:18%;animation-delay:-2.2s}.forest-fireflies i:nth-child(4){right:12%;top:29%;animation-delay:-.5s}.forest-fireflies i:nth-child(5){right:28%;bottom:22%;animation-delay:-1.7s}.forest-fireflies i:nth-child(6){left:52%;bottom:14%;animation-delay:-2.7s}.forest-fireflies i:nth-child(7){right:4%;bottom:37%;animation-delay:-1.3s}.forest-fireflies i:nth-child(8){left:5%;bottom:12%;animation-delay:-3.1s}
.low-mist{position:absolute;left:-10%;right:-10%;bottom:-9%;height:36%;background:radial-gradient(ellipse at center,#713dcc5e,transparent 68%);filter:blur(26px);animation:lowMist 7s ease-in-out infinite alternate}
.game-hud{align-items:flex-start}
.hero-status{min-width:240px;height:62px;padding:6px 18px 6px 62px;position:relative;display:flex;align-items:center;gap:4px;border:2px solid #a5f4ff;border-radius:31px;background:#052e5be8;box-shadow:0 8px 30px #00172f99;backdrop-filter:blur(7px)}
.hero-portrait{position:absolute;left:5px;width:49px;height:49px;border-radius:50%;background:url('assets/hero-final-v4.png') 34% 4%/400% 100% no-repeat #eaffff;box-shadow:0 0 14px #4be7ff}
.hero-portrait.battle{background-position:67% 4%}
.hero-status>span:nth-child(2){display:flex;min-width:114px;flex-direction:column;line-height:1.15}
.hero-status b{font-size:15px}.hero-status small{margin-top:4px;color:#7ff3ff;font-size:12px}
.hero-status>i{width:13px;height:13px;margin-left:2px;border:2px solid #d4fcff;border-radius:50%;background:#3bdcff;box-shadow:0 0 9px #43eaff}
.mission-chip{display:flex;flex-direction:column;align-items:center;padding:7px 22px}
.mission-chip small{color:#8defff;font-size:11px}.mission-chip b{font-size:17px}
.gate-world{position:absolute;left:50%;top:39%;width:min(31vw,390px);aspect-ratio:1;transform:translate(-50%,-50%)}
.portal-halo{position:absolute;inset:10%;opacity:.45;border-radius:50%;background:radial-gradient(circle,#62f1ffbb 0,#107ed3aa 28%,transparent 68%);filter:blur(14px);animation:portalBreathe 2.5s ease-in-out infinite}
.gate-ring{position:absolute;border-radius:50%;border:6px solid #6deaff;border-top-color:#efffff;box-shadow:0 0 12px #54eaff,inset 0 0 16px #35d7ff}
.outer-ring{inset:12%;animation:ringSpin 15s linear infinite}.inner-ring{inset:24%;border-width:4px;border-style:dashed;animation:ringSpin 10s linear infinite reverse}
.gate-door{position:absolute;top:24%;bottom:24%;width:26%;border:2px solid #70eaff;background:linear-gradient(90deg,#0d63a9df,#13395ee8);box-shadow:inset 0 0 18px #35dfff88;transition:transform 1.1s cubic-bezier(.3,.7,.2,1.1),opacity .8s}
.left-door{left:24%;border-radius:70% 0 0 70%}.right-door{right:24%;border-radius:0 70% 70% 0}
.gate-core{position:absolute;inset:31%;display:grid;place-items:center;border:3px solid #b6f8ff;border-radius:50%;background:#052c5de8;box-shadow:0 0 22px #3be9ff,inset 0 0 18px #48dcff66;transition:transform .6s,opacity .6s}
.core-question{color:#c9fbff;font-size:clamp(44px,5vw,76px);font-weight:1000;text-shadow:0 0 18px #61eaff}
.gate-slots{position:absolute;inset:-35%}
.gate-slots i{position:absolute;width:18px;height:18px;border:2px solid #8deeff;border-radius:50%;background:#062d59;box-shadow:0 0 8px #38dfff;transition:background .3s,box-shadow .3s,transform .3s}
.gate-slots i:nth-child(1){left:50%;top:0}.gate-slots i:nth-child(2){right:4%;top:32%}.gate-slots i:nth-child(3){right:20%;bottom:4%}.gate-slots i:nth-child(4){left:20%;bottom:4%}.gate-slots i:nth-child(5){left:4%;top:32%}
.seed-cluster{position:absolute;z-index:8;width:180px;height:105px;filter:drop-shadow(0 9px 10px #001c35);transition:opacity .5s}
.seed-cluster-left{left:24%;top:53%}.seed-cluster-right{right:23%;top:53%}
.energy-seed,.ghost-seed{position:absolute;width:42px;height:42px;border:3px solid #d5ffff;border-radius:52% 48% 55% 45%;background:radial-gradient(circle at 38% 34%,#e8ffff 0 8%,#58ebff 12% 30%,#0b8eea 62%,#053d91 100%);box-shadow:0 0 10px 3px #41e9ff,0 0 25px #25b8ff;transform:rotate(45deg);animation:seedFloat 2.2s ease-in-out infinite;transition:transform 1.1s cubic-bezier(.2,.8,.2,1),opacity .5s}
.energy-seed::before,.ghost-seed::before{content:"";position:absolute;right:-9px;top:-14px;width:20px;height:11px;border-radius:100% 0 100% 0;background:#75f2b0;box-shadow:0 0 8px #66ffb1;transform:rotate(15deg)}
.seed-1{left:7px;top:38px}.seed-2{left:66px;top:7px;animation-delay:-.7s}.seed-3{right:7px;top:45px;animation-delay:-1.4s}.seed-4{left:25px;top:26px;animation-delay:-.4s}.seed-5{right:30px;top:21px;animation-delay:-1.1s}
.seed-cluster>b{position:absolute;left:50%;bottom:-22px;min-width:64px;padding:4px 11px;border:1px solid #a9f6ff;border-radius:18px;background:#073a70dc;text-align:center;transform:translateX(-50%);font-size:18px}
.math-plus{position:absolute;z-index:9;left:50%;top:57%;width:50px;height:50px;display:grid;place-items:center;border:2px solid #b9f7ff;border-radius:50%;background:#07549cdd;box-shadow:0 0 18px #55eaff;font-size:35px;font-weight:1000;transform:translate(-50%,-50%)}
.ghost-seed{z-index:14;left:68%;top:58%;display:none;opacity:.75}
.guagua-guide,.battle-guide{position:absolute;z-index:20;left:var(--safe-left);bottom:var(--safe-bottom);width:min(360px,31vw);min-height:93px;padding:13px 14px 13px 87px;border:2px solid #aff6ff;border-radius:24px;background:#063263ec;box-shadow:0 15px 35px #00152dbb;backdrop-filter:blur(8px)}
.guagua-portrait{position:absolute;left:9px;bottom:8px;width:69px;height:69px;border:3px solid #c1fbff;border-radius:50%;background:url('assets/guagua.webp') 1% 1%/300% 200% no-repeat #e9feff;box-shadow:0 0 14px #45e9ff}
.guagua-guide b,.battle-guide b{color:#84f1ff;font-size:15px}.guagua-guide p,.battle-guide p{margin:3px 0 0;font-size:clamp(13px,1.22vw,17px);font-weight:800;line-height:1.45}
.answer-runes{position:absolute;z-index:21;left:50%;bottom:3%;display:flex;gap:clamp(12px,2vw,28px);transform:translateX(-50%)}
.answer-runes button{position:relative;width:clamp(70px,7.1vw,96px);height:clamp(70px,7.1vw,96px);display:flex;align-items:center;justify-content:center;border:3px solid #aaf8ff;border-radius:50%;background:radial-gradient(circle,#0d80d8,#05427d 67%,#031c3f);box-shadow:0 7px 0 #032b5e,0 0 21px #42e9ff88,inset 0 0 19px #8df5ff44;transition:transform .2s,filter .2s,background .3s}
.answer-runes button::before{content:"";position:absolute;inset:-9px;border:2px dashed #5ae8ff;border-radius:50%;animation:ringSpin 8s linear infinite}
.answer-runes button span{font-size:clamp(31px,3.5vw,48px);font-weight:1000;text-shadow:0 3px 0 #063065}.answer-runes button small{margin:15px 0 0 3px;color:#bffaff;font-weight:900}
.answer-runes button:active,.answer-runes button.is-tested{transform:translateY(5px) scale(.96);filter:brightness(1.2)}
.answer-runes button.is-correct{background:radial-gradient(circle,#56e5ad,#087c78 67%,#063a5a);box-shadow:0 7px 0 #07565c,0 0 30px #65ffc9}
.gate-success{position:absolute;z-index:30;left:50%;top:22%;padding:13px 27px;display:flex;flex-direction:column;align-items:center;opacity:0;border:2px solid #e9ffff;border-radius:22px;background:#075d8fe8;box-shadow:0 0 35px #4fe9ff;transform:translate(-50%,-20px) scale(.8);pointer-events:none}
.gate-success b{color:#fff5a3;font-size:24px}.gate-success span{margin-top:3px;font-size:14px;font-weight:800}
.gate-success.is-visible{animation:successPop .6s cubic-bezier(.2,.9,.2,1.3) forwards}
.gate-screen.is-one-short .gate-slots i:nth-child(5){animation:emptySlot 1s ease 2}.gate-screen.is-one-short .gate-core{animation:gentleWiggle .55s ease 2}
.gate-screen.is-one-extra .ghost-seed{display:block;animation:extraSeed 1.5s cubic-bezier(.25,.7,.25,1) both}
.gate-screen.is-solving .energy-seed{animation:none}
.gate-screen.is-solving .seed-1{transform:translate(20vw,-18vh) rotate(405deg) scale(.68)}
.gate-screen.is-solving .seed-2{transform:translate(17vw,-18vh) rotate(405deg) scale(.68)}
.gate-screen.is-solving .seed-3{transform:translate(14vw,-14vh) rotate(405deg) scale(.68)}
.gate-screen.is-solving .seed-4{transform:translate(-14vw,-17vh) rotate(405deg) scale(.68)}
.gate-screen.is-solving .seed-5{transform:translate(-17vw,-14vh) rotate(405deg) scale(.68)}
.gate-screen.is-solving .gate-slots i{background:#d9ffff;box-shadow:0 0 14px 6px #45e9ff;transform:scale(1.25)}
.gate-screen.is-solving .core-question{opacity:0}.gate-screen.is-solving .gate-core::after{content:"5";position:absolute;inset:0;display:grid;place-items:center;color:#fff6a8;font-size:66px;font-weight:1000;text-shadow:0 0 18px #fff}
.gate-screen.is-open .gate-door.left-door{opacity:0;transform:translateX(-130%) rotate(-8deg)}.gate-screen.is-open .gate-door.right-door{opacity:0;transform:translateX(130%) rotate(8deg)}
.gate-screen.is-open .gate-core{opacity:0;transform:scale(2)}.gate-screen.is-open .portal-halo{animation:portalOpen 1.5s ease-out forwards}

/* Battle */
.boss-art{background-position:100% 100%;animation:battleCamera 8s ease-in-out infinite alternate;filter:saturate(.92) contrast(1.08)}
.battle-vignette{position:absolute;inset:0;background:radial-gradient(circle at 61% 38%,#8d45ff1f 0,transparent 29%),linear-gradient(0deg,#001324b8 0,transparent 42%),radial-gradient(ellipse at center,transparent 32%,#13022888 110%)}
.battle-particles{position:absolute;inset:0}.battle-particles i{background:#ce9cff;box-shadow:0 0 15px 6px #913cff}
.battle-particles i:nth-child(1){left:11%;top:28%}.battle-particles i:nth-child(2){left:29%;top:56%;animation-delay:-1s}.battle-particles i:nth-child(3){left:49%;top:14%;animation-delay:-2s}.battle-particles i:nth-child(4){right:11%;top:24%;animation-delay:-.4s}.battle-particles i:nth-child(5){right:27%;bottom:16%;animation-delay:-1.5s}.battle-particles i:nth-child(6){left:58%;bottom:30%;animation-delay:-2.5s}
.screen-flash{position:absolute;z-index:40;inset:0;opacity:0;background:#e5ffff;pointer-events:none}
.boss-shield{position:absolute;z-index:8;left:61%;top:39%;width:min(34vw,430px);aspect-ratio:1;border:5px solid #d1a6ff;border-radius:50%;background:radial-gradient(circle,#9b62e615 0 45%,#8e38db4a 62%,#b966ff80 70%,transparent 72%);box-shadow:inset 0 0 45px #b260ff,0 0 25px #9b45ee,0 0 70px #7d27cf;transform:translate(-50%,-50%);animation:bossShieldPulse 2.4s ease-in-out infinite}
.boss-shield::before,.boss-shield::after{content:"";position:absolute;inset:12%;border:2px solid #c89aff99;border-radius:50%;clip-path:polygon(50% 0,100% 28%,86% 100%,16% 90%,0 32%)}
.boss-shield::after{inset:26%;transform:rotate(50deg)}
.crack{position:absolute;z-index:2;left:50%;top:48%;width:4px;height:44%;opacity:0;background:#e9ffff;box-shadow:0 0 9px #fff;transform-origin:top;clip-path:polygon(0 0,100% 0,60% 42%,100% 45%,30% 100%,50% 48%)}
.crack-a{transform:rotate(32deg)}.crack-b{transform:rotate(-47deg)}.crack-c{transform:rotate(144deg)}
.boss-core{position:absolute;z-index:7;left:61%;top:39%;width:55px;height:55px;border:3px solid #d6bcff;border-radius:50%;background:radial-gradient(circle,#fff,#b24eff 22%,#4b1277 65%);box-shadow:0 0 20px 12px #b347ff;transform:translate(-50%,-50%);animation:corePulse 1.5s ease-in-out infinite}
.energy-shot{position:absolute;z-index:14;left:61%;top:40%;width:54px;height:54px;opacity:0;border-radius:50%;background:radial-gradient(circle,#fff 0 10%,#be75ff 25%,#7225d8 58%,transparent 70%);box-shadow:0 0 18px 8px #a342ff;transform:translate(-50%,-50%)}
.hero-guard{position:absolute;z-index:15;left:22%;top:62%;width:190px;height:190px;display:grid;place-items:center;opacity:0;border:8px solid #8ff5ff;border-radius:50%;background:repeating-radial-gradient(circle,#49b06155 0 13px,#1e772f55 14px 29px),radial-gradient(circle,#44eaff99,#0365aacc);box-shadow:0 0 28px 9px #4eeaff,inset 0 0 22px #c7ffff;transform:translate(-50%,-50%) scale(.25)}
.hero-guard span{width:38%;height:38%;border:4px solid #d8ffff;border-radius:50%;background:#0b74bd;box-shadow:0 0 18px #5fefff}
.slash-trail{position:absolute;z-index:28;left:19%;top:67%;width:62%;height:18px;opacity:0;border-radius:50%;background:linear-gradient(90deg,transparent,#8cf8ff,#fff,#42d8ff,transparent);box-shadow:0 0 13px 4px #58eaff;transform-origin:left;transform:rotate(-24deg) scaleX(0)}
.slash-two{top:25%;left:34%;width:42%;transform:rotate(26deg) scaleX(0)}
.slash-three{top:48%;left:22%;width:58%;transform:rotate(-6deg) scaleX(0)}
.impact-ring{position:absolute;z-index:29;left:61%;top:39%;width:70px;aspect-ratio:1;opacity:0;border:9px solid #fff7a1;border-radius:50%;box-shadow:0 0 35px #54efff;transform:translate(-50%,-50%) scale(.1)}
.shield-shards{position:absolute;z-index:27;left:61%;top:39%;width:40px;height:40px;pointer-events:none}
.shield-shards i{position:absolute;width:25px;height:34px;opacity:0;background:linear-gradient(135deg,#eed9ff,#7d39d6);clip-path:polygon(50% 0,100% 100%,0 72%);box-shadow:0 0 12px #bd74ff}
.battle-hud{z-index:31}.boss-status{width:min(340px,29vw);padding:8px 16px 10px;border:2px solid #d5a9ff;border-radius:24px;background:#280d52dd;box-shadow:0 7px 24px #18002a99}.boss-status small{display:block;margin-bottom:4px;text-align:center;color:#ecd9ff;font-weight:900}.boss-status>div{height:13px;overflow:hidden;border:2px solid #e5c8ff;border-radius:8px;background:#17072e}.boss-status i{display:block;width:100%;height:100%;background:linear-gradient(90deg,#8a3dd7,#d369ff);box-shadow:0 0 10px #efafff;transition:width .7s ease}
.battle-callout{position:absolute;z-index:35;left:50%;top:22%;padding:13px 28px;display:flex;flex-direction:column;align-items:center;opacity:0;border:2px solid #e6cdff;border-radius:23px;background:#35105be8;box-shadow:0 0 35px #9b47ed;transform:translate(-50%,-25px) scale(.8);pointer-events:none}.battle-callout.is-visible{animation:calloutIn .6s cubic-bezier(.2,.9,.2,1.3) forwards}.battle-callout small{color:#ffdf84;font-weight:1000;letter-spacing:.25em}.battle-callout strong{font-size:clamp(23px,2.5vw,36px);text-shadow:0 0 14px #d58cff}.battle-callout.is-clue{background:#065477e8;border-color:#b7f9ff;box-shadow:0 0 35px #43eaff}.battle-callout.is-clue small{color:#a9f7ff}
.battle-guide{left:var(--safe-left);bottom:var(--safe-bottom);transition:opacity .35s,transform .35s}
.battle-controls{position:absolute;z-index:32;left:50%;bottom:var(--safe-bottom);transform:translateX(-50%)}
.battle-action{min-width:320px;min-height:82px;padding:10px 24px 10px 82px;position:relative;display:none;align-items:center;border:3px solid #c5fbff;border-radius:25px;background:linear-gradient(#20b9ed,#075cad);box-shadow:0 7px 0 #033d7b,0 0 26px #42eaff77;text-align:left}.battle-action>i{position:absolute;left:18px;width:50px;height:50px;display:grid;place-items:center;border:4px solid #d9ffff;border-radius:50%;background:repeating-radial-gradient(circle,#54af6e 0 8px,#237337 9px 18px);font-size:26px}.battle-action span{display:flex;flex-direction:column}.battle-action b{font-size:20px}.battle-action small{margin-top:3px;color:#d4faff;font-weight:800}
.attack-pad{width:330px;height:105px;padding:18px 20px 10px;display:none;flex-direction:column;align-items:center;justify-content:flex-end;border:3px solid #d8ffff;border-radius:28px;background:linear-gradient(#158edccf,#043f86e8);box-shadow:0 7px 0 #032f68,0 0 30px #4ceaffaa;text-align:center;touch-action:none}.attack-pad b{font-size:20px}.attack-pad small{color:#c4f9ff;font-weight:800}.attack-pad.is-touching{transform:translateY(4px);filter:brightness(1.25)}
.charge-button{--charge:0;width:350px;min-height:116px;padding:12px 22px;display:none;flex-direction:column;align-items:center;gap:6px;border:3px solid #bffcff;border-radius:28px;background:linear-gradient(#0c74cdeb,#063a7aee);box-shadow:0 7px 0 #032c61,0 0 calc(18px + 28px * var(--charge)) #48edff;text-align:center;touch-action:none}.charge-button b{font-size:21px}.charge-button small{color:#c9faff;font-weight:800}.charge-button.is-holding{transform:translateY(3px);filter:brightness(1.25)}
.charge-orbs{display:flex;gap:12px}.charge-orbs i{width:23px;height:23px;border:2px solid #bffaff;border-radius:50%;background:#082c64;box-shadow:inset 0 0 8px #00152f;transition:.15s}.charge-orbs i.is-lit{background:radial-gradient(circle at 35% 30%,#fff,#63efff 38%,#1599ff);box-shadow:0 0 14px 4px #66efff;transform:scale(1.13)}.charge-meter{width:100%;height:13px;overflow:hidden;border:2px solid #c9fbff;border-radius:10px;background:#041e48}.charge-meter i{display:block;width:0;height:100%;background:linear-gradient(90deg,#3ed9ff,#fff98b);box-shadow:0 0 14px #86f7ff}
.swipe-arrow{position:absolute;top:8px;height:42px}.swipe-arrow i{position:absolute;left:50%;width:20px;height:20px;border-top:4px solid #fff8a7;border-left:4px solid #fff8a7;transform:translateX(-50%) rotate(45deg);animation:swipeArrow 1.25s ease-in-out infinite}.swipe-arrow i:nth-child(2){top:10px;animation-delay:-.18s}.swipe-arrow i:nth-child(3){top:20px;animation-delay:-.36s}
.boss-screen.needs-guard .guard-button{display:flex;animation:controlPop .45s cubic-bezier(.2,.9,.2,1.25) both}
.boss-screen.charge-ready .charge-button{display:flex;animation:controlPop .45s cubic-bezier(.2,.9,.2,1.25) both}
.boss-screen.attack-ready .attack-pad{display:flex;animation:controlPop .45s cubic-bezier(.2,.9,.2,1.25) both}
.boss-screen.is-arriving .boss-art{animation:bossArrival 2.6s cubic-bezier(.2,.8,.2,1) both}.boss-screen.is-arriving .boss-shield{animation:shieldArrival 2.2s .3s ease-out both}
.boss-screen.is-blocking .energy-shot{animation:energyShot 1.15s cubic-bezier(.3,.6,.5,1) both}.boss-screen.is-blocking .hero-guard{animation:guardRaise 1.35s cubic-bezier(.2,.8,.2,1) both}.boss-screen.is-blocking .screen-flash{animation:blockFlash .8s .65s ease-out both}
.boss-screen.is-charging .battle-particles i{background:#aefbff;box-shadow:0 0 18px 7px #35eaff;animation-duration:.7s}.boss-screen.is-charging .boss-shield{animation-duration:.75s}
.boss-screen.is-slashing{animation:battleShake .52s .6s ease both}.boss-screen.is-slashing .slash-one{animation:slashOne .62s ease-out both}.boss-screen.is-slashing .slash-two{animation:slashTwo .5s .43s ease-out both}.boss-screen.second-hit .slash-three{animation:slashThree .62s ease-out both}.boss-screen.shield-broken .impact-ring{animation:impactRing .65s ease-out both}.boss-screen.is-slashing .screen-flash{animation:slashFlash .8s .35s ease-out both}
.boss-screen.shield-cracked .crack{opacity:1;transition:opacity .12s}.boss-screen.shield-cracked .boss-shield{filter:brightness(1.5)}
.boss-screen.shield-broken .boss-shield{animation:shieldCollapse .65s ease-out forwards}.boss-screen.shield-broken .crack{opacity:1}.boss-screen.shield-broken .shield-shards i{animation:shardFly .8s ease-out forwards}.boss-screen.shield-broken .shield-shards i:nth-child(2){--sx:100px;--sy:-90px;animation-delay:.03s}.boss-screen.shield-broken .shield-shards i:nth-child(3){--sx:130px;--sy:25px;animation-delay:.06s}.boss-screen.shield-broken .shield-shards i:nth-child(4){--sx:70px;--sy:110px;animation-delay:.09s}.boss-screen.shield-broken .shield-shards i:nth-child(5){--sx:-95px;--sy:100px;animation-delay:.12s}.boss-screen.shield-broken .shield-shards i:nth-child(6){--sx:-135px;--sy:5px;animation-delay:.15s}.boss-screen.shield-broken .shield-shards i:nth-child(7){--sx:-70px;--sy:-110px;animation-delay:.18s}.boss-screen.shield-broken .shield-shards i:nth-child(8){--sx:15px;--sy:-135px;animation-delay:.21s}

/* Result and mystery hook */
.result-forest{position:absolute;inset:-3%;background:url('assets/forest.webp') 50% 55%/200% 200% no-repeat;filter:saturate(1.18) brightness(.78);animation:resultCamera 12s ease-in-out infinite alternate}
.result-forest::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 32% 44%,#5df2ff33,transparent 25%),linear-gradient(90deg,transparent,#00162ab8 58%)}
.result-rays{position:absolute;left:7%;top:-25%;width:52%;height:145%;opacity:.65;background:conic-gradient(from 165deg at 50% 50%,transparent 0 7deg,#a6fbff88 8deg 12deg,transparent 13deg 31deg,#7beeff55 32deg 37deg,transparent 38deg);animation:raysTurn 16s linear infinite}
.feather-crystal{position:absolute;z-index:5;left:28%;top:48%;width:min(22vw,270px);height:min(35vw,420px);transform:translate(-50%,-50%) rotate(-8deg);filter:drop-shadow(0 0 25px #55ecff);animation:featherFloat 3s ease-in-out infinite}
.feather-crystal i,.feather-crystal::before,.feather-crystal::after{position:absolute;content:"";left:50%;top:8%;width:36%;height:84%;border:4px solid #d9ffff;border-radius:100% 0 100% 0;background:linear-gradient(120deg,#e8ffffdd,#42dcffbb 42%,#0c7de6aa);box-shadow:inset 0 0 20px #fff,0 0 23px #4de9ff;transform:translateX(-50%) rotate(37deg);clip-path:polygon(48% 0,100% 18%,72% 53%,100% 62%,42% 100%,0 94%,30% 55%,4% 42%)}
.feather-crystal::before{left:31%;top:19%;width:25%;height:58%;opacity:.75;transform:rotate(13deg)}.feather-crystal::after{left:67%;top:23%;width:22%;height:55%;opacity:.66;transform:rotate(61deg)}
.result-panel{position:absolute;z-index:6;right:max(5vw,var(--safe-right));top:50%;width:min(600px,50vw);padding:26px 34px 28px;border:2px solid #baf8ff;border-radius:32px;background:linear-gradient(135deg,#073d72f2,#05264eef);box-shadow:0 25px 70px #00152ed9,inset 0 0 28px #53e8ff1f;transform:translateY(-50%);text-align:center;backdrop-filter:blur(9px)}
.result-panel h1{margin:4px 0 10px;color:#fff3a0;font-size:clamp(30px,3.6vw,50px);text-shadow:0 3px 0 #725a00,0 0 18px #ffe56788}.result-panel>p{margin:7px 0;font-weight:800}.result-panel blockquote{margin:12px auto;padding:11px 18px;border-left:4px solid #b16aff;border-radius:8px;background:#3a155aaa;color:#eedfff;font-size:clamp(16px,1.5vw,21px);font-weight:900}.mystery-clue{margin:12px auto;display:flex;align-items:center;justify-content:center;gap:12px}.mystery-clue>span{width:48px;height:48px;display:grid;place-items:center;border:2px solid #d1adff;border-radius:50%;background:#4b1b77;font-size:29px;font-weight:1000;box-shadow:0 0 17px #b45cff}.mystery-clue p{margin:0;display:flex;flex-direction:column;text-align:left}.mystery-clue small{margin-top:2px;color:#aaf5ff}.sample-note{margin:12px auto 17px;padding:7px 12px;border:1px solid #9ceeff66;border-radius:18px;color:#9ff3ff;background:#ffffff0e;font-size:13px;font-weight:800}

#rotate{display:none}
#rotate span{display:block;margin-bottom:12px;font-size:46px}
noscript{position:fixed;z-index:100;inset:0;display:grid;place-items:center;background:#06376b;color:white;font-size:24px}

/* Motion */
@keyframes coverBreath{from{transform:scale(1.01) translate3d(-.2%,0,0)}to{transform:scale(1.045) translate3d(.4%,-.3%,0)}}
@keyframes buttonFlare{0%,55%{left:-25%;opacity:0}62%{opacity:.8}78%{left:125%;opacity:0}100%{left:125%;opacity:0}}
@keyframes sparkle{0%,100%{opacity:.2;transform:scale(.55)}45%{opacity:1;transform:scale(1.25)}}
@keyframes mistDrift{0%,100%{transform:translate3d(-7%,0,0) scale(1)}50%{transform:translate3d(11%,-8%,0) scale(1.15)}}
@keyframes scanAcross{0%{left:-20%}55%,100%{left:115%}}
@keyframes powerPulse{0%{transform:scale(.8);opacity:.15}65%{opacity:.65}100%{transform:scale(2.2);opacity:0}}
@keyframes slowPush{from{transform:scale(1.03) translate3d(0,0,0)}to{transform:scale(1.13) translate3d(-1%,-1.5%,0)}}
@keyframes featherClose{from{transform:scale(1.08) translate3d(1%,0,0)}to{transform:scale(1.28) translate3d(3%,5%,0)}}
@keyframes mistSweep{from{transform:scale(1.08) translate3d(2%,0,0);filter:saturate(1)}to{transform:scale(1.17) translate3d(-2%,-1%,0);filter:saturate(.82) contrast(1.1)}}
@keyframes shadowClose{0%{transform:scale(1.12) translate3d(0,0,0);filter:brightness(.9)}100%{transform:scale(1.38) translate3d(-7%,6%,0);filter:brightness(.66) contrast(1.2)}}
@keyframes roomPush{from{transform:scale(1.05) translate3d(0,1%,0)}to{transform:scale(1.2) translate3d(-4%,-3%,0)}}
@keyframes transformPush{0%{transform:scale(1.05);filter:brightness(.8)}22%{filter:brightness(1.3)}100%{transform:scale(1.22) translate3d(2%,-1%,0);filter:brightness(1.05) saturate(1.2)}}
@keyframes comicPageCalm{from{transform:scale(.995)}to{transform:scale(1.012)}}
@keyframes comicPageDanger{0%{transform:scale(1);filter:saturate(1.02)}100%{transform:scale(1.014);filter:saturate(.94) contrast(1.04)}}
@keyframes comicPageMystery{from{transform:scale(1);filter:brightness(.96)}to{transform:scale(1.016);filter:brightness(.88) contrast(1.05)}}
@keyframes comicPageSignal{from{transform:scale(.998)}to{transform:scale(1.014) translateY(-.15%)}}
@keyframes comicPageHero{0%{transform:scale(1);filter:brightness(.94)}22%{filter:brightness(1.08)}100%{transform:scale(1.014);filter:brightness(1.02) saturate(1.06)}}
@keyframes comicPageFlight{from{transform:scale(1)}to{transform:scale(1.018)}}
@keyframes comicPageArrival{from{transform:scale(.998)}to{transform:scale(1.014)}}
@keyframes comicPageTurnOut{from{opacity:1;transform:perspective(1400px) rotateY(0) scale(1)}to{opacity:.05;transform:perspective(1400px) rotateY(-12deg) scale(.985)}}
@keyframes comicPageTurnIn{from{opacity:.08;transform:perspective(1400px) rotateY(12deg) scale(.985)}to{opacity:1;transform:perspective(1400px) rotateY(0) scale(1)}}
@keyframes chapterReveal{0%{opacity:0;transform:translate(-50%,-18px) scale(.86)}18%,74%{opacity:1;transform:translate(-50%,0) scale(1)}100%{opacity:0;transform:translate(-50%,12px) scale(1.05)}}
@keyframes characterIn{to{opacity:1;transform:translateY(0)}}
@keyframes storyCountdown{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes gateCamera{from{transform:scale(1.03) translate3d(-.4%,0,0)}to{transform:scale(1.08) translate3d(.5%,-.7%,0)}}
@keyframes lowMist{from{transform:translateX(-4%) scale(1)}to{transform:translateX(5%) scale(1.1)}}
@keyframes portalBreathe{0%,100%{opacity:.35;transform:scale(.92)}50%{opacity:.75;transform:scale(1.08)}}
@keyframes ringSpin{to{transform:rotate(360deg)}}
@keyframes seedFloat{0%,100%{margin-top:0;filter:brightness(1)}50%{margin-top:-9px;filter:brightness(1.25)}}
@keyframes emptySlot{0%,100%{transform:scale(1);background:#062d59}50%{transform:scale(1.7);background:#fff1a0;box-shadow:0 0 18px 7px #ffe66f}}
@keyframes gentleWiggle{0%,100%{transform:rotate(0)}30%{transform:rotate(-5deg)}70%{transform:rotate(5deg)}}
@keyframes extraSeed{0%{display:block;opacity:0;transform:translate(0,20px) rotate(45deg) scale(.6)}25%{opacity:1;transform:translate(-18vw,-18vh) rotate(220deg) scale(1)}55%{transform:translate(-20vw,-20vh) rotate(260deg) scale(1.1)}75%{transform:translate(-13vw,-13vh) rotate(320deg) scale(.95)}100%{opacity:0;transform:translate(9vw,-4vh) rotate(520deg) scale(.7)}}
@keyframes successPop{to{opacity:1;transform:translate(-50%,0) scale(1)}}
@keyframes portalOpen{0%{opacity:.5;transform:scale(1)}65%{opacity:1;transform:scale(2.2)}100%{opacity:0;transform:scale(3.8)}}
@keyframes battleCamera{from{transform:scale(1.03) translate3d(0,0,0)}to{transform:scale(1.07) translate3d(-.7%,-.5%,0)}}
@keyframes bossShieldPulse{0%,100%{transform:translate(-50%,-50%) scale(.97);filter:brightness(.85)}50%{transform:translate(-50%,-50%) scale(1.035);filter:brightness(1.2)}}
@keyframes corePulse{0%,100%{transform:translate(-50%,-50%) scale(.85)}50%{transform:translate(-50%,-50%) scale(1.2)}}
@keyframes calloutIn{to{opacity:1;transform:translate(-50%,0) scale(1)}}
@keyframes controlPop{from{opacity:0;transform:translateY(20px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes swipeArrow{0%{opacity:0;transform:translate(-50%,10px) rotate(45deg)}45%{opacity:1}100%{opacity:0;transform:translate(-50%,-10px) rotate(45deg)}}
@keyframes bossArrival{0%{transform:scale(1.25) translate3d(4%,-6%,0);filter:brightness(.45) blur(3px)}100%{transform:scale(1.03);filter:brightness(1)}}
@keyframes shieldArrival{0%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(-45deg)}75%{opacity:1;transform:translate(-50%,-50%) scale(1.12) rotate(4deg)}100%{transform:translate(-50%,-50%) scale(1)}}
@keyframes energyShot{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}18%{opacity:1;transform:translate(-50%,-50%) scale(1.3)}75%{opacity:1;left:24%;top:61%;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;left:22%;top:62%;transform:translate(-50%,-50%) scale(2.4)}}
@keyframes guardRaise{0%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(-30deg)}38%{opacity:1;transform:translate(-50%,-50%) scale(1.16) rotate(3deg)}100%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)}}
@keyframes blockFlash{0%,100%{opacity:0}25%{opacity:.72}50%{opacity:.08}}
@keyframes slashOne{0%{opacity:0;transform:rotate(-24deg) scaleX(0)}30%{opacity:1;transform:rotate(-24deg) scaleX(1.05)}100%{opacity:0;transform:rotate(-24deg) scaleX(1.15)}}
@keyframes slashTwo{0%{opacity:0;transform:rotate(26deg) scaleX(0)}35%{opacity:1;transform:rotate(26deg) scaleX(1)}100%{opacity:0;transform:rotate(26deg) scaleX(1.15)}}
@keyframes slashThree{0%{opacity:0;transform:rotate(-6deg) scaleX(0)}30%{opacity:1;transform:rotate(-6deg) scaleX(1.1)}100%{opacity:0;transform:rotate(-6deg) scaleX(1.22)}}
@keyframes impactRing{0%{opacity:1;transform:translate(-50%,-50%) scale(.1)}55%{opacity:.9}100%{opacity:0;transform:translate(-50%,-50%) scale(5)}}
@keyframes heroIdle{0%,100%{transform:translateY(0) rotate(-.5deg)}50%{transform:translateY(-7px) rotate(.7deg)}}
@keyframes heroSwordReady{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-8px) rotate(1.4deg)}}
@keyframes heroSwordSwing{0%,20%,100%{transform:translateY(0) rotate(-2deg)}45%{transform:translateY(-5px) rotate(3deg)}60%{transform:translateY(1px) rotate(-1deg)}}
@keyframes npcHover{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-12px) rotate(1.2deg)}}
@keyframes npcFly{0%,100%{transform:translate(0,2px) rotate(-2deg)}50%{transform:translate(10px,-12px) rotate(2deg)}}
@keyframes alertHover{0%,100%{transform:translateY(2px) rotate(-1.4deg)}45%{transform:translateY(-10px) rotate(1deg)}58%{transform:translateY(-8px) rotate(-.3deg)}}
@keyframes heroCall{0%,100%{transform:translateY(0) rotate(-.4deg)}42%{transform:translateY(-5px) rotate(.7deg)}55%{transform:translateY(-4px) scale(1.012)}}
@keyframes duoPortalFly{0%,100%{transform:translate(-4px,5px) rotate(-1.2deg)}50%{transform:translate(13px,-10px) rotate(1.3deg)}}
@keyframes duoSlash{0%,22%,100%{transform:translateY(1px) rotate(-1.2deg)}43%{transform:translate(-5px,-4px) rotate(1.8deg)}58%{transform:translate(4px,1px) rotate(-.6deg)}}
@keyframes swordLight{0%,100%{opacity:.18;transform:rotate(-17deg) scaleY(.96)}50%{opacity:.58;transform:rotate(-14deg) scaleY(1.04)}}
@keyframes wingPulse{0%,100%{opacity:.14;transform:scale(.95)}50%{opacity:.36;transform:scale(1.05)}}
@keyframes slashFlash{0%,100%{opacity:0}40%{opacity:.82}50%{opacity:.12}}
@keyframes battleShake{0%,100%{transform:translate(0)}20%{transform:translate(-8px,3px)}40%{transform:translate(7px,-2px)}60%{transform:translate(-5px,-1px)}80%{transform:translate(4px,2px)}}
@keyframes shieldCollapse{0%{opacity:1;transform:translate(-50%,-50%) scale(1);filter:brightness(1.8)}32%{transform:translate(-50%,-50%) scale(1.17);filter:brightness(2.5)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.6);filter:brightness(3)}}
@keyframes shardFly{0%{opacity:1;transform:translate(-50%,-50%) rotate(0) scale(1)}100%{opacity:0;transform:translate(var(--sx,90px),var(--sy,-60px)) rotate(250deg) scale(.2)}}
@keyframes resultCamera{from{transform:scale(1.03) translate3d(0,0,0)}to{transform:scale(1.1) translate3d(1%,-1%,0)}}
@keyframes raysTurn{to{transform:rotate(360deg)}}
@keyframes featherFloat{0%,100%{transform:translate(-50%,-50%) rotate(-8deg)}50%{transform:translate(-50%,-55%) rotate(-3deg)}}

@media (max-height:650px){
  .start-panel{padding:17px 24px 20px}.start-panel h1{font-size:42px}.start-panel h2{font-size:25px}.summon{margin:6px auto 13px}.action-button{min-height:52px}.sound-button{margin-top:12px}
  .story-dialogue{bottom:7%;min-height:92px;padding:10px 220px 10px 92px}.story-avatar{left:12px;bottom:10px;width:70px;height:70px}.dialogue-copy p{min-height:45px;font-size:18px}.story-nav{right:11px;bottom:16px;gap:7px}.story-page-button{min-width:94px;min-height:50px;font-size:14px}
  .hero-status{height:52px;min-width:220px;padding-left:54px}.hero-portrait{width:41px;height:41px}.mission-chip{padding:5px 16px}.hud-button{min-width:44px;min-height:44px}
  .gate-world{top:37%;width:290px}.seed-cluster{transform:scale(.82)}.seed-cluster-left{left:22%;top:48%}.seed-cluster-right{right:21%;top:48%}.math-plus{top:52%}.answer-runes button{width:68px;height:68px}.answer-runes button span{font-size:32px}.guagua-guide,.battle-guide{min-height:76px;padding:9px 10px 9px 72px}.guagua-portrait{width:57px;height:57px}.guagua-guide p,.battle-guide p{font-size:12px}
  .battle-action{min-height:69px}.attack-pad{height:86px}.result-panel{padding:17px 26px}.result-panel h1{font-size:32px}.result-panel blockquote{margin:7px auto}.sample-note{margin:7px auto 11px}
}

@media (orientation:portrait){
  #rotate{position:fixed;z-index:99;inset:0;display:grid;place-items:center;padding:40px;background:radial-gradient(circle at 50% 35%,#0f6bab,#042750 65%);color:#fff;text-align:center;font-size:27px;font-weight:1000;line-height:1.7}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .comic-art{transform:none!important}.mist-layer,.comic-speed-lines{display:none!important}
}