:root{--bg-color:#050811;--gold:#f4c466;--gold-glow:#f4c46673;--paper-red:#d93829;--moon-silver:#d7e8ff;--text-primary:#f0f4fc}*{box-sizing:border-box;-webkit-user-select:none;user-select:none;margin:0;padding:0}html,body{background-color:var(--bg-color);width:100%;height:100%;color:var(--text-primary);font-family:Segoe UI,system-ui,Arial,sans-serif;overflow:hidden}#canvas-container{z-index:1;width:100%;height:100%;position:absolute;top:0;left:0}.letterbox{z-index:10;pointer-events:none;background:linear-gradient(#03050af2,#03050a00);width:100%;height:48px;transition:opacity 2.5s;position:absolute;left:0}.letterbox.bottom{background:linear-gradient(#03050a00,#03050af2);bottom:0}@media (height>=800px){.letterbox{height:70px}}.film-grain-overlay{z-index:12;pointer-events:none;opacity:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.12'/%3E%3C/svg%3E");width:100%;height:100%;transition:opacity 1.8s;position:absolute;top:0;left:0}.film-grain-overlay.active{opacity:.32}.sepia-vignette{z-index:11;pointer-events:none;opacity:0;background:radial-gradient(circle,#a06e3c1f 0%,#23160a80 75%,#0a0805f2 100%);width:100%;height:100%;transition:opacity 2s;position:absolute;top:0;left:0}.sepia-vignette.active{opacity:.7}.opening-frame{z-index:13;pointer-events:none;opacity:0;width:100%;height:100%;transition:opacity 1s;position:absolute;inset:0}.story-overlay-container.time-travel-active .opening-frame{opacity:1}.opening-present,.opening-past{transform-origin:50% 80%;transition:opacity 4.5s,transform 7s}.opening-present{opacity:1}.opening-past{opacity:0;transform:translateY(60px)scale(1.04)}.story-overlay-container.rewinding .opening-present{opacity:0;transform:translateY(72px)scale(1.08)}.story-overlay-container.rewinding .opening-past{opacity:1;transform:translateY(0)scale(1)}.audio-toggle-btn{width:44px;height:44px;color:var(--gold);cursor:pointer;z-index:20;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#12192aa6;border:1px solid #f4c46659;border-radius:50%;justify-content:center;align-items:center;transition:all .3s;display:flex;position:absolute;top:24px;right:24px}.audio-toggle-btn:hover{border-color:var(--gold);background:#f4c46633;transform:scale(1.06)}.audio-toggle-btn.muted svg path{opacity:0}.audio-toggle-btn.muted:after{content:"";border-top:2px solid;width:27px;position:absolute;transform:rotate(-47deg)}.cinematic-title-box{text-align:center;z-index:15;opacity:0;pointer-events:none;width:90%;max-width:680px;transition:opacity 1.5s ease-in-out;position:absolute;top:16%;left:50%;transform:translate(-50%)}.cinematic-title-box.visible{opacity:1;pointer-events:auto}.cinematic-main-title{letter-spacing:.055em;color:var(--moon-silver);text-shadow:0 0 25px #d7e8ffb3;margin-bottom:8px;font-family:Segoe UI,system-ui,Arial,sans-serif;font-size:2.2rem}.cinematic-sub-title{color:#a4b5cf;letter-spacing:.06em;font-size:1.05rem;font-style:italic}.cinematic-subtitle-box{text-align:center;z-index:15;pointer-events:none;width:90%;max-width:720px;position:absolute;bottom:160px;left:50%;transform:translate(-50%)}.cinematic-subtitle-box--top{top:88px;bottom:auto}.cinematic-subtitle-text{color:#fffaf0;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);text-shadow:0 2px 8px #000000e6;opacity:0;background:#080c16a6;border:1px solid #f4c46633;border-radius:20px;padding:8px 24px;font-size:1.15rem;font-weight:400;line-height:1.6;transition:opacity .6s ease-in-out;display:inline-block}.cinematic-action-box{z-index:30;position:absolute;bottom:42px;left:50%;transform:translate(-50%)}.cinematic-btn{cursor:pointer;border:1px solid var(--gold);color:#fff;box-shadow:0 0 20px var(--gold-glow);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);letter-spacing:.05em;background:linear-gradient(135deg,#f4c46640,#d9382940);border-radius:40px;padding:14px 34px;font-family:Segoe UI,system-ui,Arial,sans-serif;font-size:1.05rem;font-weight:600;transition:all .3s}.cinematic-btn:hover{background:linear-gradient(135deg,#f4c46673,#d9382973);transform:translateY(-2px);box-shadow:0 0 30px #f4c466b3}.crafting-ui-container{z-index:25;flex-direction:column;align-items:center;gap:12px;width:95%;max-width:820px;transition:opacity .6s;display:flex;position:absolute;bottom:30px;left:50%;transform:translate(-50%)}.crafting-prompt-text{letter-spacing:.05em;color:#f7d288;text-shadow:0 2px 6px #000000e6;font-family:Segoe UI,system-ui,Arial,sans-serif;font-size:.95rem}.crafting-tray{flex-wrap:wrap;justify-content:center;gap:7px;width:100%;display:flex}.craft-card{cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#0e1422bf;border:1px solid #f4c46640;border-radius:12px;flex:0 175px;align-items:center;gap:10px;max-width:175px;padding:8px 10px;transition:all .3s;display:flex;position:relative}.craft-card.locked{opacity:.4;cursor:not-allowed;filter:grayscale(.8)}.craft-card.active{border-color:var(--gold);box-shadow:0 0 18px var(--gold-glow);background:#232d4bd9;animation:2s ease-in-out infinite pulseCard;transform:translateY(-4px)}@keyframes pulseCard{0%,to{box-shadow:0 0 12px var(--gold-glow)}50%{box-shadow:0 0 24px #f4c466cc}}.craft-card.completed{opacity:.85;background:#0f2319bf;border-color:#4ade80}.craft-icon{font-size:1.6rem}.craft-info{flex-direction:column;display:flex}.craft-title{color:#fff;font-family:Segoe UI,system-ui,Arial,sans-serif;font-size:.85rem;font-weight:600}.craft-desc{color:#9cb1d4;margin-top:2px;font-size:.72rem;display:none}.craft-check{color:#4ade80;font-weight:700;display:none;position:absolute;top:8px;right:10px}.craft-card.completed .craft-check{display:block}@media (width<=600px){.crafting-ui-container{gap:7px;bottom:18px}.crafting-prompt-text{text-align:center;font-size:.84rem}.craft-card:not(.active){display:none}.craft-card.active{flex:0 240px;justify-content:center;max-width:240px}.cinematic-subtitle-box{width:calc(100% - 24px);bottom:155px}.cinematic-subtitle-box--top{top:88px;bottom:auto}.cinematic-subtitle-text{padding:8px 14px;font-size:.96rem;line-height:1.45}}.dedication-page{z-index:190001;color:#f7e9cd;opacity:0;background:radial-gradient(at 50% 42%,#19314b 0%,#081727 52%,#030812 100%);place-items:center;font-family:Georgia,Times New Roman,serif;transition:opacity .65s;display:grid;position:fixed;inset:0;overflow:hidden}.dedication-page.visible{opacity:1}.dedication-page.turning{opacity:0}.dedication-page-paper{opacity:0;background:linear-gradient(110deg,#1a2b3c,#263950 50%,#182c40);border:1px solid #e9c07e61;width:min(520px,100vw - 30px);height:min(580px,100vh - 26px);min-height:380px;transition:transform .85s cubic-bezier(.2,.7,.2,1),opacity .85s;position:relative;transform:translateY(14px)rotate(-1deg);box-shadow:0 36px 100px #02070dbb,0 0 70px #edb96620,inset 0 0 80px #07142388}.dedication-page.visible .dedication-page-paper{opacity:1;transform:translateY(0)rotate(0)}.dedication-page.turning .dedication-page-paper{transform:translate(60px)rotate(5deg)scale(.95)}.dedication-page-art{width:100%;height:100%;position:absolute;inset:0}.dedication-page-copy{text-align:center;text-shadow:0 2px 14px #06111e;width:84%;position:absolute;top:53%;left:8%}.dedication-page-kicker{color:#dfbe88;letter-spacing:.26em;font:600 .67rem Segoe UI,system-ui,sans-serif}.dedication-page-line{margin-top:20px;font-size:clamp(1.2rem,3vw,1.5rem);font-style:italic}.dedication-page h1{color:#ffe3a9;letter-spacing:.025em;text-shadow:0 0 28px #e8a75d77;margin:3px 0 14px;font-size:clamp(2.5rem,8vw,4.15rem);font-weight:400}.dedication-page-whisper{color:#d9d9d2;font-size:clamp(.92rem,2.3vw,1.08rem);font-style:italic}.dedication-page-open{white-space:nowrap;color:#ffe6b6;letter-spacing:.04em;cursor:pointer;background:#101e30d8;border:1px solid #e3bd80a8;border-radius:999px;min-height:42px;padding:8px 22px;font:600 .9rem Segoe UI,system-ui,sans-serif;position:absolute;bottom:5%;left:50%;transform:translate(-50%)}.dedication-page-open:hover,.dedication-page-open:focus-visible{outline-offset:3px;background:#344459;outline:2px solid #ffe4a9}@media (width<=600px){.dedication-page-copy{top:51%}.dedication-divider{display:none}}@media (height<=530px){.dedication-page-copy{top:48%}.dedication-page-open{bottom:3%}}@media (prefers-reduced-motion:reduce){.dedication-page,.dedication-page-paper{transition-duration:1ms}}.memory-prelude{z-index:190000;color:#fff0d1;background:#071224;font-family:Segoe UI,system-ui,Arial,sans-serif;display:none;position:fixed;inset:0;overflow:hidden}.memory-prelude.visible{display:block}.memory-prelude-art{width:100%;height:100%;display:block}.memory-prelude-art .memory-village,.memory-prelude-art .memory-room{transition:opacity .7s,transform .9s}.memory-mobile-house{display:none}.memory-prelude[data-page="0"] .memory-room{opacity:0;transform:translateY(24px)}.memory-prelude[data-page="1"] .memory-village{opacity:0;transform:translateY(-20px)}.memory-prelude-copy{text-align:center;flex-direction:column;align-items:center;gap:13px;width:min(760px,100vw - 36px);display:flex;position:absolute;bottom:clamp(28px,7vh,68px);left:50%;transform:translate(-50%)}.memory-prelude-kicker{color:#f2c67b;letter-spacing:.19em;text-shadow:0 2px 12px #071224;font-size:.75rem;font-weight:700}.memory-prelude-line{color:#fff5df;background:#07111fd6;border:1px solid #eac07f47;border-radius:18px;max-width:720px;padding:12px 24px;font-size:clamp(1rem,2.1vw,1.28rem);line-height:1.55;box-shadow:0 15px 35px #00000040}.memory-prelude-next{color:#fff7e8;cursor:pointer;background:linear-gradient(120deg,#8b3e2e,#b87b3d);border:1px solid #e2b86f;border-radius:999px;min-height:46px;padding:10px 26px;font:600 1rem Segoe UI,system-ui,Arial,sans-serif;box-shadow:0 4px 24px #e2a75366}.memory-prelude-next:hover,.memory-prelude-next:focus-visible{outline-offset:3px;background:#bc7444;outline:2px solid #fff0c1}@media (prefers-reduced-motion:reduce){.memory-prelude-art .memory-village,.memory-prelude-art .memory-room{transition-duration:1ms}}.village-movement-hint{z-index:150;color:#f9e9bd;pointer-events:none;background:#0c1b2dcc;border:1px solid #eeb85e7a;border-radius:22px;max-width:min(275px,100vw - 220px);padding:10px 15px;font:500 13px/1.4 Segoe UI,system-ui,sans-serif;position:fixed;bottom:85px;left:28px;box-shadow:0 4px 16px #00000057}@media (width<=600px){.village-movement-hint{max-width:42vw;font-size:11px;bottom:72px;left:12px}.memory-mobile-house{display:block;transform:translateY(-65px)}}.final-letter-control,.final-letter-replay{z-index:1100;color:#fff1d2;cursor:pointer;background:#0e192ae0;border:1px solid #e3bd7c;border-radius:999px;min-height:44px;padding:10px 18px;font:600 14px Segoe UI,system-ui,Arial,sans-serif;position:fixed;bottom:24px;right:24px}.final-end-card{z-index:1050;opacity:0;pointer-events:none;background:#030916;position:fixed;inset:0}.final-end-card svg{width:100%;height:100%;display:block}.final-letter-replay{bottom:5.5%;right:50%;transform:translate(50%)}.final-letter-control:hover,.final-letter-replay:hover{background:#704837}.final-letter-sheet{z-index:1200;color:#ffefd2;background:radial-gradient(circle at 50% 22%,#263e59,#071220 72%);justify-content:center;align-items:center;padding:24px;font-family:Segoe UI,system-ui,Arial,sans-serif;position:fixed;inset:0}.final-letter-sheet article{background:#16202fed;border:1px solid #f2c27980;border-radius:18px;width:min(720px,100%);max-height:84vh;padding:clamp(26px,5vw,48px);overflow-y:auto;box-shadow:0 20px 70px #0008}.final-letter-sheet h2{margin-bottom:24px;font-size:clamp(1.25rem,3vw,1.8rem)}.final-letter-scroll-hint{color:#e9c68f;letter-spacing:.025em;margin:-8px 0 22px;font-size:.92rem}.final-letter-scroll-hint[hidden]{display:none}.final-letter-sheet p{white-space:pre-wrap;-webkit-user-select:text;user-select:text;font-size:clamp(1rem,2vw,1.15rem);line-height:1.9}.final-letter-sheet button{color:#fff1d2;font:inherit;cursor:pointer;background:#513c37;border:1px solid #dfb779;border-radius:999px;margin-top:26px;padding:10px 22px}.fade-in{opacity:1}.fade-out{opacity:0;pointer-events:none}.scene-transition-curtain{z-index:200000;visibility:hidden;opacity:0;pointer-events:none;will-change:opacity;background:radial-gradient(circle at 50% 43%,#fffefa 0%,#f4f6fa 46%,#dce5f1 100%);transition:opacity .5s ease-in;position:fixed;inset:0;overflow:hidden}.scene-transition-curtain[data-mood=memory]{background:radial-gradient(circle at 50% 43%,#fff8e6 0%,#f4ece2 45%,#c8b7a9 100%)}.scene-transition-curtain[data-mood=gate]{background:radial-gradient(circle at 50% 43%,#fff5d5 0%,#f4e8ca 46%,#d7c6af 100%)}.scene-transition-curtain.is-covered{opacity:1;transition:opacity .5s ease-in}.scene-transition-curtain:not(.is-covered){transition:opacity .8s ease-out}.scene-transition-moon{aspect-ratio:1;will-change:transform;background:radial-gradient(circle at 43% 38%,#fffefa 0%,#fffdf6 52%,#e6e9f2 100%);border:1px solid #d6b16894;border-radius:50%;width:min(28vw,28vh);transition:transform 1.2s cubic-bezier(.2,.7,.2,1);position:absolute;top:43%;left:50%;transform:translate(-50%,-50%)scale(.75);box-shadow:0 0 0 12px #ffffff24,0 0 0 28px #ffffff17,0 0 75px #f9d99880,inset -15px -12px 28px #c1cbde47}.scene-transition-curtain.is-covered .scene-transition-moon{transform:translate(-50%,-50%)scale(1.15)}.scene-transition-moon:after{content:"";border:1px solid #d8b26973;border-radius:50%;animation:2.4s ease-out infinite transition-moon-ripple;position:absolute;inset:-22%}@keyframes transition-moon-ripple{0%{opacity:.6;transform:scale(.8)}to{opacity:0;transform:scale(1.35)}}.scene-transition-caption{color:#6b6576;letter-spacing:.09em;text-align:center;opacity:0;width:100%;font:600 clamp(16px,1.6vw,21px) Segoe UI,system-ui,Arial,sans-serif;transition:opacity .55s,transform .55s;position:absolute;top:calc(43% + min(21vw,21vh));left:0;transform:translateY(7px)}.scene-transition-curtain.is-covered .scene-transition-caption{opacity:.82;transform:translateY(0)}@media (prefers-reduced-motion:reduce){.scene-transition-curtain,.scene-transition-curtain.is-covered,.scene-transition-curtain:not(.is-covered),.scene-transition-moon,.scene-transition-caption{transition-duration:1ms}.scene-transition-moon:after{animation:none}}