#finale-fog,#finale-world,#finale-focus { position:absolute; inset:0; pointer-events:none; }
#finale-fog[hidden],#finale-world[hidden],#finale-focus[hidden],#realm-complete[hidden] { display:none; }
#finale-fog { opacity:0; background:radial-gradient(ellipse at 51% 53%,transparent 25%,#1c343c2e 58%,#122b3eb0); }
.finale-active #game { filter:saturate(var(--ink-desaturation,1)); }
.finale-active.story-active #game { filter:saturate(var(--ink-desaturation,1)) brightness(.65) blur(2px); }
#finale-world { z-index:2; container-type:inline-size; }
#finale-world .contact-ring { position:absolute; left:50%; top:100%; width:5.5cqw; height:3.1cqw; min-width:20px; min-height:11px; margin:0; transform:translate(-50%,-50%); border:1px solid #e5c787b0; border-radius:50%; background:#e8c77524; box-shadow:0 0 10px #dfbd6644; animation:clue-breathe 1.8s ease-in-out infinite; }
#finale-world .concept-core > .contact-ring { left:50%; top:100%; bottom:auto; width:12.5cqw; height:6.8cqw; transform:translate(-50%,-50%); }
#finale-world .core-broken > .contact-ring { opacity:.2; animation:none; }
#finale-focus { z-index:12; display:grid; place-items:center; background:#112e2c55; }
.finale-active #decode-help,.finale-active #decode-help.event-help-top { z-index:7; top:auto; bottom:8px; width:54%; }
.finale-active #decode-help.finale-help-side { left:2%; top:13%; bottom:auto; width:24%; transform:none; padding:7px 9px; }
.concept-reading { position:absolute; left:2%; top:38%; width:24%; padding:10px 12px; border-left:2px solid #c9b180; background:#173c3be8; color:#f2e5c6; }
.concept-reading small { font:clamp(10px,1.25vw,15px) serif; color:#d9bf82; }
.concept-reading p { font:clamp(11px,1.5vw,18px)/1.6 'Microsoft JhengHei',sans-serif; letter-spacing:1px; color:#f2e5c6; margin:7px 0 0; }
.finale-active .quest-hud { z-index:6; }
.finale-active #joystick,.finale-active .touch-action { z-index:8; }
.finale-active #momo-bubble { z-index:9; }
.passer-voice { position:absolute; right:8%; top:18%; color:#e1c690; font:clamp(10px,1vw,13px) serif; text-align:right; padding:8px 12px; border-right:2px solid #d4b47b; background:#183d39c9; animation:ink-reveal .7s; }
.passer-voice b { display:block; color:#f8eac9; font:clamp(18px,2.6vw,32px) serif; margin-top:6px; }
.heart-zone { position:absolute; transform:translate(-50%,-100%); text-align:center; color:#f6e7be; }
.heart-zone b { display:block; min-width:65px; max-width:145px; padding:8px 10px; background:linear-gradient(135deg,#214f48ec,#183938f2); border:1px solid #d8ba7b; font:clamp(10px,1.5vw,18px)/1.35 'PMingLiU',serif; box-shadow:0 0 15px #dfb95d3d; }
.heart-zone > .contact-ring { display:block; margin:0 auto 5px; }
.heart-zone.discarded { display:none; }
.foot-zone b { min-width:42px; font-size:clamp(23px,3vw,36px); }
.final-heart b { color:#f0d89a; font-size:clamp(18px,2.1vw,27px); }
.foot-meaning { padding:3% 5%; border-block:1px solid #d3b47a; background:#163b37ed; text-align:center; color:#f3e7c8; max-width:92%; }
.foot-meaning small { font:clamp(16px,2vw,24px) serif; color:#eacb86; }
.foot-meaning h2 { font:clamp(21px,3vw,35px) serif; margin:16px 0; letter-spacing:3px; }
.foot-meaning p { font-size:clamp(12px,1.7vw,20px); color:#f3e7c8; letter-spacing:1px; opacity:0; animation:ink-reveal .7s 1s forwards; }
.foot-meaning em { display:block; margin-top:12px; font:14px serif; color:#e9c67e; opacity:0; animation:ink-reveal .5s 2s forwards; }
.ink-emphasis { color:#b9c8c5; text-shadow:0 1px 5px #041d1d; border-bottom:1px solid #607d77; }
#story-title.story-reward { font-size:clamp(22px,3.6vw,45px); letter-spacing:4px; text-align:center; }
#story-title.story-reward small { display:block; margin-top:20px; font-size:1.3em; color:#efcd89; text-shadow:0 0 18px #ddbd7566; }
.ink-announcement { position:absolute; left:50%; top:40%; transform:translate(-50%,-50%); text-align:center; color:#f5e8c7; text-shadow:0 3px 10px #142e36; }
.ink-announcement h2 { font:clamp(32px,5vw,65px) serif; letter-spacing:.4em; margin:0 0 12px; }
.ink-announcement p { padding:8px; background:#153a3bba; color:#e5deca; font-size:clamp(12px,1.7vw,20px); letter-spacing:1px; white-space:nowrap; }
.concept-core { position:absolute; transform:translate(-50%,-100%); text-align:center; color:#e9e2ce; }
.concept-core > b { display:grid; place-items:center; margin:auto; width:clamp(36px,4.2vw,55px); height:clamp(40px,4.8vw,62px); border:1px solid #b3b2a1; border-radius:40% 55% 35% 50%; background:radial-gradient(#3b5660e6,#17383dee); box-shadow:0 0 20px #24485b7d; font:clamp(23px,3vw,37px) serif; animation:core-float 3.6s var(--bob) ease-in-out infinite; }
.concept-core small { display:block; max-width:clamp(120px,17vw,210px); width:max-content; padding:5px 7px; margin:7px auto 0; background:#183a3ce8; border-bottom:1px solid #c4b690; font:clamp(10px,1.25vw,16px)/1.4 'Microsoft JhengHei',sans-serif; }
.concept-core > .contact-ring { position:absolute; bottom:0; left:50%; transform:translateX(-50%); }
.core-active > b { border-color:#ecd49c; box-shadow:0 0 23px #dcbd6277; }
.core-broken > b { background:#3f716c8a; border-color:#e0c681; color:#f6e6b9; animation:core-crack 1.1s ease-out forwards; }
.core-broken small { opacity:.65; }
.core-broken em { position:absolute; top:0; left:45%; color:#f5ce78; font:40px serif; animation:core-shards 1.1s ease-out forwards; }
.concept-progress { position:absolute; right:2%; top:8%; padding:6px 10px; color:#e5d4aa; background:#183e3ed9; font:clamp(10px,1.2vw,15px) serif; }
.ink-words { position:absolute; width:0; height:0; opacity:.5; color:#294850; font:clamp(16px,2vw,25px) serif; }
.ink-words span { position:absolute; animation:ink-orbit 12s linear infinite; }
.ink-words span:nth-child(2) { animation-delay:-4s; }
.ink-words span:nth-child(3) { animation-delay:-8s; }
@keyframes ink-orbit { from { transform:rotate(0deg) translateX(58px) rotate(0deg); } to { transform:rotate(360deg) translateX(58px) rotate(-360deg); } }
.stable-notice { position:absolute; top:28%; width:100%; text-align:center; color:#f5e6bd; text-shadow:0 2px 10px #1b3b33; font:clamp(22px,3vw,38px) serif; animation:ink-reveal .7s; }
.jade-label { position:absolute; transform:translate(-50%,-100%); text-align:center; color:#17463e; font:clamp(15px,2vw,22px) serif; }
.jade-label b { display:block; transform:translateY(-26px); text-shadow:0 0 8px #fff6cd; }
.jade-label .contact-ring { display:block; }
.realm-reveal { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; background:linear-gradient(#133b3ac9,#102d2ee8),url('/assets/cutscenes/bg_market_closed.png') center/cover; color:#f7e9c5; text-align:center; animation:ink-reveal 1s; }
.realm-reveal h2 { font:clamp(24px,3.6vw,46px) serif; letter-spacing:4px; margin:0 0 3%; }
.realm-reveal p { font:clamp(13px,1.8vw,23px)/1.6 serif; margin:10px 0; letter-spacing:2px; color:#eee4cc; opacity:0; animation:ink-reveal .8s var(--delay) forwards; }
.realm-reveal strong { margin-top:3%; font:clamp(17px,2.5vw,31px) serif; letter-spacing:6px; color:#efcb87; opacity:0; animation:ink-reveal .7s 7s forwards; }
#realm-complete { position:absolute; inset:0; z-index:40; display:grid; place-items:center; background:linear-gradient(#153a3bd9,#0b2529ed),url('/assets/cutscenes/bg_market_closed.png') center/cover; }
.realm-summary { color:#f4e6c5; width:80%; text-align:center; padding:2% 5%; border-block:1px solid #bca16d; animation:ink-reveal .7s; }
.realm-summary > small { font:clamp(14px,1.8vw,21px) serif; color:#ddbe81; letter-spacing:6px; }
.realm-summary h2 { font:clamp(24px,3.2vw,40px) serif; margin:12px 0; letter-spacing:4px; }
.realm-summary p { color:#e9debf; font-size:clamp(11px,1.3vw,16px); letter-spacing:2px; }
.summary-jade { margin:12px auto; display:grid; place-items:center; width:65px; height:65px; background:linear-gradient(130deg,#c3deca,#60968b); color:#17473e; border:2px solid #d7bd78; clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); font:19px serif; }
.realm-summary ul { display:flex; justify-content:center; gap:4%; list-style:none; padding:0; color:#e4c98c; font:clamp(11px,1.5vw,18px) serif; }
#realm-return { margin-top:9px; border:1px solid #c6ab74; color:#efdfb9; background:#23534bc9; padding:10px 30px; font:clamp(13px,1.5vw,18px) serif; letter-spacing:3px; cursor:pointer; }
#realm-return:hover,#realm-return:focus-visible { background:#356d5e; outline:2px solid #edd399; outline-offset:3px; }
@keyframes core-float { 50% { transform:translateY(-7px) rotate(3deg); } }
@keyframes core-crack { 35% { transform:scale(1.12) rotate(-8deg); box-shadow:0 0 27px #ecc66b; } to { transform:scale(.7); opacity:.45; } }
@keyframes core-shards { to { transform:translateY(-45px) scale(1.8); opacity:0; } }
@media(max-width:600px) { .heart-zone b { min-width:52px; padding:5px 6px; max-width:100px; } .concept-core small { max-width:135px; } .passer-voice { right:3%; top:20%; padding:5px 8px; } .realm-reveal p { margin:5px 0; } .realm-summary { padding:1% 3%; } .realm-summary h2 { margin:7px 0; } .summary-jade { width:45px; height:45px; margin:6px auto; font-size:14px; } .realm-summary ul { margin:8px 0; } #realm-return { margin-top:3px; padding:6px 23px; } }
@media(prefers-reduced-motion:reduce) { .concept-core > b { animation:none; } }

/* Chapter-one book restoration; chapter-two presentation is unchanged. */
.chapter-repair { position:absolute; inset:12% 24%; display:grid; align-content:center; justify-items:center; color:#294c48; background:linear-gradient(100deg,#d6c29a,#f1e5c7 49%,#bb9c69 50%,#e8d8b4 52%,#f3e8cd); border:2px solid #b89b62; box-shadow:0 12px 50px #071c23aa; text-align:center; }
.chapter-repair h2 { font:clamp(28px,4vw,54px) serif; }
.chapter-repair p { animation:page-restore 2.2s both; }
.chapter-page h2 { animation:page-restore 1.2s both; }
.chapter-page > small { margin-bottom:1em; color:#d8c08a; }
.chapter-page { inset:8% 18%; padding:3%; border:2px solid #b89b62; box-shadow:0 12px 50px #071c23aa; background:linear-gradient(100deg,#d6c29a,#f1e5c7 49%,#bb9c69 50%,#e8d8b4 52%,#f3e8cd); color:#294c48; }
.chapter-page h2 { font-size:clamp(22px,3vw,40px); }
.chapter-page p { margin:5px 0; color:#34564f; }
.chapter-page > small,.chapter-page strong { color:#5b5137; }
.chapter-page .chapter-mark { color:#85443c; font-style:normal; border:1px solid #a2694d; padding:8px 14px; }
.chapter-page strong { animation-delay:3.2s; }
.chapter-mark,.chapter-mark-award > strong { display:block; font:clamp(22px,3vw,38px) serif; color:#e4c287; letter-spacing:.15em; }
.chapter-mark { margin-top:1em; animation:mark-set .6s 4s both; }
.chapter-mark-award { border-block:1px solid #ba9a61; padding:12px; margin:12px auto; max-width:460px; }
.chapter-mark-award small { display:block; margin-bottom:8px; }
@keyframes page-restore { from { opacity:.15; filter:blur(6px); } to { opacity:1; filter:blur(0); } }
@keyframes mark-set { from { opacity:0; transform:scale(1.08); } to { opacity:1; transform:scale(1); } }
@media(prefers-reduced-motion:reduce) { .chapter-repair p,.chapter-page h2,.chapter-mark { animation:none; } }
@media(max-width:600px) { .chapter-repair,.chapter-page { inset:6% 8%; } .chapter-page h2 { margin:0 0 8px; } .chapter-page p { font-size:clamp(12px,2.5vw,17px); } .chapter-page strong { margin-top:8px; font-size:18px; } .chapter-page .chapter-mark { margin-top:8px; font-size:18px; padding:5px 10px; } }
