:root{--paper:#efe5c8;--mist:#b4b8a5;--amber:#ffc65a;--ink:#101a19;--glass:#101a19d9;--line:#f5e8c42a}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#111b1c;color:var(--paper);font-family:ui-serif,Georgia,Cambria,"Times New Roman",serif}#world{position:fixed;inset:0;touch-action:none}canvas{display:block;width:100%;height:100%}.vignette{position:fixed;inset:0;z-index:2;pointer-events:none;background:radial-gradient(circle at center,transparent 25%,#06101169 100%);mix-blend-mode:multiply}.grain{position:fixed;inset:0;z-index:3;pointer-events:none;opacity:.09;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E")}.hud{position:fixed;z-index:4;inset:0;padding:clamp(18px,3vw,38px);display:flex;justify-content:space-between;pointer-events:none}.eyebrow{font:700 9px/1 ui-sans-serif,system-ui,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#b9baa9}.status{align-self:flex-start;max-width:220px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--glass);box-shadow:0 10px 30px #0005;backdrop-filter:blur(10px);color:#d6d3bf;font-size:11px;line-height:1.35}.status b{display:block;margin-bottom:3px;color:#ffcb63;font:700 9px ui-sans-serif,system-ui,sans-serif;letter-spacing:.15em;text-transform:uppercase}.quote{position:absolute;bottom:clamp(20px,4vw,38px);left:50%;width:min(400px,72vw);transform:translateX(-50%);color:#d4d2c2;text-align:center;text-shadow:0 2px 12px #000;font-size:12px;font-style:italic;line-height:1.4}.seal{position:absolute;right:clamp(18px,3vw,38px);bottom:clamp(18px,3vw,35px);display:grid;place-items:center;width:44px;height:44px;border:1px solid #f4e5bd5c;border-radius:50%;color:#e9d9aa;font:700 9px ui-monospace,monospace;letter-spacing:.08em;background:var(--glass)}.brand-logo{display:block;width:clamp(215px,26vw,306px);height:auto;filter:drop-shadow(0 3px 14px #000)}.exposure{position:fixed;z-index:7;left:50%;top:50%;width:min(280px,72vw);transform:translate(-50%,-50%) scale(.94);padding:14px 16px;border:1px solid #ffd16b77;border-radius:10px;background:#120d09d9;box-shadow:0 12px 42px #000b,0 0 32px #ffab3d22;backdrop-filter:blur(8px);text-align:center;opacity:0;pointer-events:none;transition:opacity .16s,transform .16s}.exposure.active{opacity:1;transform:translate(-50%,-50%) scale(1)}.exposure b{display:block;color:#ffd36e;font:800 9px ui-sans-serif,system-ui,sans-serif;letter-spacing:.18em;text-transform:uppercase}.exposure span{display:block;margin-top:4px;color:#f4e6ca;font-size:13px}.exposure strong{display:block;margin-top:5px;color:#fff0c5;font:700 31px/1 ui-monospace,SFMono-Regular,monospace;letter-spacing:.06em;text-shadow:0 0 14px #ffc45a99}.exposure i{display:block;margin-top:6px;color:#d2b88d;font:italic 10px ui-serif,Georgia,serif}.requiem{position:fixed;z-index:12;inset:0;display:grid;place-items:center;overflow:hidden;opacity:0;pointer-events:none;background:radial-gradient(circle at 50% 43%,#4c596b35 0,transparent 22%),#030708e8;transition:opacity .55s ease}.requiem.visible{opacity:1;pointer-events:auto}.requiem::before,.requiem::after{content:'';position:absolute;left:50%;top:43%;width:min(72vw,620px);aspect-ratio:1;border:1px solid #b6c8ce2c;border-radius:50%;transform:translate(-50%,-50%) scale(.18);opacity:0}.requiem.visible::before{animation:soul-ring 3.5s cubic-bezier(.12,.7,.2,1) infinite}.requiem.visible::after{animation:soul-ring 3.5s 1.12s cubic-bezier(.12,.7,.2,1) infinite}.requiem-inner{position:relative;z-index:1;width:min(430px,calc(100% - 40px));padding:30px;text-align:center;color:#e7dfc9;transform:translateY(18px);opacity:0}.requiem.visible .requiem-inner{animation:requiem-rise .8s .18s cubic-bezier(.16,1,.3,1) forwards}.requiem-mark{width:82px;height:108px;margin:0 auto 18px;background:radial-gradient(ellipse at 50% 21%,#e8ead7 0 5%,transparent 6%),linear-gradient(145deg,transparent 45%,#19242a 46% 58%,transparent 59%),linear-gradient(215deg,transparent 45%,#19242a 46% 58%,transparent 59%);filter:drop-shadow(0 0 24px #aec7d555);animation:soul-fall 2.8s ease-in-out infinite}.requiem .eyebrow{color:#b9cbd1}.requiem h2{margin:10px 0;font-size:clamp(34px,6vw,54px);font-weight:500;letter-spacing:-.06em}.requiem p{margin:0 auto 22px;max-width:320px;color:#c3c5bd;font-size:13px;line-height:1.55}.requiem button,.story-action{width:100%;padding:14px;border:1px solid #ffd46f99;border-radius:8px;background:#efbc55;color:#14201e;font:800 10px ui-sans-serif,system-ui,sans-serif;letter-spacing:.16em;cursor:pointer}.requiem button:hover,.story-action:hover{background:#ffcf67;box-shadow:0 0 24px #efbc5555}@keyframes soul-ring{0%{transform:translate(-50%,-50%) scale(.18);opacity:.65}100%{transform:translate(-50%,-50%) scale(1);opacity:0}}@keyframes soul-fall{0%,100%{transform:translateY(-5px) scale(.92);opacity:.9}50%{transform:translateY(13px) scale(1.08);opacity:.2}}@keyframes requiem-rise{to{transform:translateY(0);opacity:1}}
/* Narrative slides: reusable level data appears as a living illuminated folio. */
.narrative-slides{position:fixed;z-index:11;inset:0;display:grid;place-items:center;overflow:hidden;isolation:isolate;color:var(--paper);touch-action:pan-y}.narrative-slides[hidden]{display:none}.story-veil{position:absolute;inset:-8%;background:radial-gradient(ellipse at 50% 45%,#263b3b77 0,transparent 31%),linear-gradient(115deg,#020708e8,#081415ab 48%,#020506ed);backdrop-filter:blur(5px);animation:story-breathe 8s ease-in-out infinite}.story-veil::before{content:'';position:absolute;inset:0;opacity:.36;background:repeating-linear-gradient(104deg,transparent 0 84px,#c6d3b30a 85px 87px,transparent 88px 178px)}.story-embers{position:absolute;inset:-20%;background:radial-gradient(circle at 18% 72%,#ffc65a99 0 1px,transparent 2px),radial-gradient(circle at 79% 26%,#d8e4cf88 0 1px,transparent 2px),radial-gradient(circle at 66% 75%,#ffc65a77 0 1.5px,transparent 2.8px),radial-gradient(circle at 35% 19%,#9bcdd077 0 1px,transparent 2px);background-size:210px 220px,270px 250px,190px 260px,300px 190px;opacity:.75;animation:embers 13s linear infinite}.story-frame{position:relative;z-index:1;width:min(590px,calc(100% - 38px));text-align:center}.story-arch{position:absolute;left:50%;top:50%;width:min(72vw,540px);aspect-ratio:1;transform:translate(-50%,-50%);border:1px solid #d9d0af2b;border-radius:50% 50% 9% 9%;box-shadow:inset 0 0 70px #aec9c218,0 0 80px #0008}.story-arch::before,.story-arch::after{content:'';position:absolute;top:15%;bottom:0;width:1px;background:linear-gradient(transparent,#e5c47638,transparent)}.story-arch::before{left:23%}.story-arch::after{right:23%}.story-card{position:relative;margin:auto;padding:clamp(27px,5vw,45px) clamp(24px,6vw,62px);border:1px solid #e9ddbd42;border-radius:14px;background:linear-gradient(145deg,#172522df,#071011ec);box-shadow:0 30px 100px #000b,0 0 50px #ffca5920;overflow:hidden}.story-card::before{content:'';position:absolute;inset:7px;border:1px solid #ecd99b1f;border-radius:9px;pointer-events:none}.story-meta{display:flex;justify-content:space-between;gap:16px;color:#d5be80;font:700 9px ui-sans-serif,system-ui,sans-serif;letter-spacing:.19em;text-transform:uppercase}.story-meta span:last-child{color:#aab5a7;font-family:ui-monospace,SFMono-Regular,monospace}.story-glyph{position:relative;width:74px;height:74px;margin:25px auto 20px;border:1px solid #eac87381;border-radius:50%;box-shadow:0 0 26px #ffc65a2d;animation:glyph-float 4.6s ease-in-out infinite}.story-glyph::before{content:'';position:absolute;left:50%;top:16px;width:13px;height:31px;transform:translateX(-50%);border:2px solid #ffd67b;border-radius:4px 4px 7px 7px;box-shadow:inset 0 0 12px #fff2ae,0 0 18px #ffc65a}.story-glyph::after{content:'';position:absolute;left:50%;top:8px;width:18px;height:12px;transform:translateX(-50%);border:2px solid #e7c373;border-bottom:0;border-radius:20px 20px 0 0}.story-glyph i{position:absolute;inset:7px;border:1px solid #78b6bb44;border-radius:45% 55% 52% 48%;animation:spin 12s linear infinite}.story-glyph i:nth-child(2){inset:13px;border-color:#e6c06d4d;animation-duration:8s;animation-direction:reverse}.story-glyph i:nth-child(3){display:none}.narrative-slides[data-motif="shade"] .story-glyph::before{top:16px;width:25px;height:37px;border-radius:50% 50% 38% 38%;border-color:#9bcdd0;background:linear-gradient(#17252a,#0c151a);box-shadow:0 0 18px #8ccbd655}.narrative-slides[data-motif="river"] .story-glyph::before{top:28px;width:38px;height:16px;border-width:0 0 2px;border-radius:50%;background:repeating-radial-gradient(ellipse at center,#8fc6c955 0 1px,transparent 2px 7px);box-shadow:none}.narrative-slides[data-motif="dawn"] .story-glyph::before{top:20px;width:26px;height:26px;border-radius:50%;border-color:#ffd681;background:#ffbd68;box-shadow:0 0 25px #ffb75e}.narrative-slides[data-motif="city"] .story-glyph::before{top:24px;width:31px;height:25px;border-radius:2px;border-color:#9bcdd0;box-shadow:inset 7px 0 #9bcdd033,inset -7px 0 #9bcdd033}.story-card h1{max-width:430px;margin:0 auto 15px;font-size:clamp(38px,7vw,64px);font-weight:500;line-height:.91;letter-spacing:-.065em;text-shadow:0 3px 20px #000}.story-card p{max-width:410px;margin:0 auto;color:#d3d2c1;font-size:clamp(14px,2.1vw,16px);line-height:1.62}.story-card blockquote{margin:18px auto 0;color:#e5bd68;font-size:13px;font-style:italic;line-height:1.45}.story-controls{display:flex;align-items:center;gap:9px;min-height:47px;margin-top:27px}.story-step{border:1px solid #e6d8ad57;border-radius:7px;background:#0c1718c4;color:#eee4c9;padding:13px 15px;font:800 9px ui-sans-serif,system-ui,sans-serif;letter-spacing:.15em;cursor:pointer}.story-step:hover{border-color:#ffc65a;color:#ffcf70}.story-step:focus-visible,.story-action:focus-visible{outline:2px solid #fff1ad;outline-offset:3px}.story-previous{width:45px;font-size:16px}.story-next{flex:1}.story-next span{padding-left:6px;color:#ffc65a;font-size:15px}.story-action{display:block;flex:1;min-height:47px;white-space:nowrap}.story-action[hidden],.story-step[hidden]{display:none!important}.story-hint{margin:13px 0 0;color:#c7c7b3a8;font:italic 10px ui-serif,Georgia,serif}.narrative-slides.is-changing .story-card{animation:story-in .62s cubic-bezier(.16,1,.3,1)}.narrative-slides.is-backward .story-card{animation-name:story-back}.narrative-slides.is-leaving{animation:story-out .65s ease forwards}@keyframes story-in{from{opacity:0;transform:translateX(26px) scale(.97);filter:blur(5px)}to{opacity:1;transform:none;filter:none}}@keyframes story-back{from{opacity:0;transform:translateX(-26px) scale(.97);filter:blur(5px)}to{opacity:1;transform:none;filter:none}}@keyframes story-out{to{opacity:0;filter:blur(8px)}}@keyframes glyph-float{50%{transform:translateY(-6px) rotate(3deg)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes embers{to{transform:translate(6%,-8%)}}@keyframes story-breathe{50%{transform:scale(1.04);filter:hue-rotate(8deg)}}
/* A slide is framed like a moving storybook shot: title-safe copy floats over
   the actual city, with letterbox and foreground layers supplying depth. */
.narrative-slides::before,.narrative-slides::after{content:'';position:absolute;z-index:3;left:0;width:100%;height:clamp(28px,8vh,84px);background:#010405;box-shadow:0 0 28px #000}.narrative-slides::before{top:0}.narrative-slides::after{bottom:0}.narrative-slides .story-veil{transform:translate(calc(var(--story-parallax-x,0) * -10px),calc(var(--story-parallax-y,0) * -7px)) scale(1.06);transition:background 1s ease,transform .9s cubic-bezier(.2,.8,.2,1)}.narrative-slides .story-embers{transform:translate(calc(var(--story-parallax-x,0) * 16px),calc(var(--story-parallax-y,0) * 11px));transition:transform .7s ease}.narrative-slides[data-motif="shade"] .story-veil{background:radial-gradient(ellipse at 50% 48%,#5d889055 0,transparent 28%),linear-gradient(115deg,#010608ed,#0a1920a8 49%,#010507ed)}.narrative-slides[data-motif="lantern"] .story-veil{background:radial-gradient(circle at 50% 48%,#d8943940 0,transparent 24%),linear-gradient(115deg,#020708ed,#16201b9e 49%,#020506ed)}.narrative-slides[data-motif="river"] .story-veil{background:radial-gradient(ellipse at 50% 62%,#599ca955 0,transparent 34%),linear-gradient(115deg,#010607ed,#061a20aa 49%,#010507ed)}.narrative-slides[data-motif="dawn"] .story-veil{background:radial-gradient(ellipse at 50% 54%,#f0a9695c 0,transparent 36%),linear-gradient(115deg,#25130fe8,#5a3e31a0 49%,#101416e9)}.narrative-slides[data-motif="dawn"] .story-card{box-shadow:0 30px 100px #000b,0 0 80px #f6a8674a}.narrative-slides[data-motif="dawn"] .story-glyph{border-color:#ffd08a;box-shadow:0 0 36px #f6ad6566}.story-card{transform:translateZ(0);transition:background .8s ease,box-shadow .8s ease}.story-card::after{content:'';position:absolute;inset:-70% -45%;background:linear-gradient(112deg,transparent 42%,#fff5c31c 49%,transparent 56%);transform:translateX(-72%) rotate(8deg);animation:folio-glint 8s 1.2s ease-in-out infinite;pointer-events:none}.story-card h1{animation:title-settle .7s .1s both cubic-bezier(.16,1,.3,1)}.story-card p,.story-card blockquote,.story-controls{animation:copy-settle .7s .2s both cubic-bezier(.16,1,.3,1)}.narrative-slides.is-changing .story-glyph{animation:glyph-reveal .85s cubic-bezier(.16,1,.3,1),glyph-float 4.6s .85s ease-in-out infinite}.story-hint{letter-spacing:.08em}.narrative-slides[data-phase="outro"] .story-hint{color:#f1c381bb}@keyframes folio-glint{0%,58%,100%{transform:translateX(-72%) rotate(8deg)}74%{transform:translateX(72%) rotate(8deg)}}@keyframes title-settle{from{opacity:0;transform:translateY(17px);letter-spacing:-.02em}to{opacity:1;transform:none}}@keyframes copy-settle{from{opacity:0;transform:translateY(13px)}to{opacity:1;transform:none}}@keyframes glyph-reveal{from{opacity:0;transform:scale(.25) rotate(-28deg);filter:blur(7px)}to{opacity:1;transform:none;filter:none}}
@media(max-width:600px){.hud{padding:20px 17px}.status{width:142px;font-size:10px}.quote{bottom:22px;width:62vw;font-size:11px}.seal{right:17px;bottom:17px}.brand-logo{width:205px}.story-frame{width:calc(100% - 28px)}.story-card{padding:25px 22px 23px}.story-meta{font-size:8px}.story-glyph{margin:19px auto 15px;transform:scale(.87)}.story-card h1{font-size:42px}.story-card p{font-size:13px}.story-hint{display:none}.narrative-slides::before,.narrative-slides::after{height:5.5vh}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}