@import"https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600&family=Crimson+Text:ital,wght@0,400;0,600;1,400&family=IM+Fell+English:ital@0;1&display=swap";*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--ink: #0d0a14;--parchment: #f0e8d5;--parchment-dim: #c8b898;--gold: #c9a84c;--gold-light: #e8c97a;--gold-dim: rgba(201,168,76,.4);--forest: #7fff7a;--ocean: #7adcff;--sky: #c89cff;--fn-display: "Cinzel", serif;--fn-body: "Crimson Text", serif;--fn-felt: "IM Fell English", serif}html,body{width:100%;height:100%;overflow:hidden;background:#000;color:var(--parchment);font-family:var(--fn-body);-webkit-font-smoothing:antialiased;touch-action:none;user-select:none;-webkit-user-select:none}#root{width:100%;height:100%;position:relative}.canvas-wrapper{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0}.prologue-root{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;transition:opacity 1.4s ease}.prologue-root.prologue-fadeout{opacity:0;pointer-events:none}.prologue-grain{position:absolute;top:0;right:0;bottom:0;left:0;z-index:5;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");opacity:.45;mix-blend-mode:overlay}.prologue-vignette{position:absolute;top:0;right:0;bottom:0;left:0;z-index:4;pointer-events:none;background:radial-gradient(ellipse at 50% 50%,transparent 40%,rgba(6,4,14,.7) 100%)}.prologue-scroll-container{position:absolute;top:0;right:0;bottom:0;left:0;z-index:10;overflow-y:scroll;overflow-x:hidden;scroll-behavior:smooth;scrollbar-width:none}.prologue-scroll-container::-webkit-scrollbar{display:none}.prologue-section{position:relative;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem 2rem}.prologue-s1{background:linear-gradient(180deg,#060410,#0e0820,#060410);animation:fadeInSection 2s ease forwards}@keyframes fadeInSection{0%{opacity:0}to{opacity:1}}.prologue-drift-bg{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;pointer-events:none}.orb{position:absolute;border-radius:50%;filter:blur(60px);animation:driftOrb 18s ease-in-out infinite alternate}.orb-1{width:340px;height:340px;background:#3c147840;top:-60px;left:-80px;animation-duration:22s}.orb-2{width:280px;height:280px;background:#1a3a5c38;bottom:40px;right:-60px;animation-duration:17s;animation-delay:3s}.orb-3{width:200px;height:200px;background:#c9a84c14;top:40%;left:55%;animation-duration:25s;animation-delay:5s}@keyframes driftOrb{0%{transform:translate(0) scale(1)}to{transform:translate(30px,20px) scale(1.08)}}.s1-content{position:relative;z-index:2;text-align:center;animation:riseIn 2.2s ease .4s both}@keyframes riseIn{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}.s1-glyph{font-size:.9rem;letter-spacing:.45em;color:var(--gold);opacity:.55;margin-bottom:1.4rem;animation:glimmer 4s ease-in-out infinite}@keyframes glimmer{0%,to{opacity:.45}50%{opacity:.8}}.s1-title{font-family:var(--fn-display);font-size:clamp(2rem,5vw,3.8rem);font-weight:400;letter-spacing:.12em;line-height:1.25;color:var(--parchment);text-shadow:0 0 40px rgba(201,168,76,.3),0 0 80px rgba(100,60,200,.2);margin-bottom:1.6rem}.s1-rule{width:80px;height:1px;margin:0 auto 1.4rem;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.5}.s1-sub{font-family:var(--fn-felt);font-style:italic;font-size:1rem;color:var(--parchment-dim);letter-spacing:.18em;opacity:.65}.scroll-invitation{position:absolute;bottom:2.5rem;left:50%;transform:translate(-50%);text-align:center;animation:fadeInSection 3s ease 1.5s both}.scroll-invitation span{display:block;font-family:var(--fn-body);font-style:italic;font-size:.78rem;letter-spacing:.2em;color:var(--gold);opacity:.5;margin-bottom:.5rem}.scroll-arrow{font-size:1.2rem;color:var(--gold);opacity:.5;animation:bounceDown 2s ease-in-out infinite}@keyframes bounceDown{0%,to{transform:translateY(0);opacity:.5}50%{transform:translateY(6px);opacity:.9}}.prologue-s2{background:linear-gradient(180deg,#060410,#080c18 60%,#060e14);gap:2rem}.prologue-s3{background:linear-gradient(180deg,#060e14,#0a0618 60%,#0e0a1e);gap:2rem}.prologue-whale-wrap{opacity:0;transform:translateY(20px) scale(.96);transition:opacity 1.2s ease,transform 1.2s ease;animation:whaleFloat 8s ease-in-out infinite}.prologue-whale-wrap.whale-visible{opacity:1;transform:translateY(0) scale(1)}@keyframes whaleFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.prologue-whale-svg{width:min(420px,80vw);filter:drop-shadow(0 0 24px rgba(100,60,220,.35)) drop-shadow(0 0 8px rgba(201,168,76,.2))}.s2-text{text-align:center;max-width:540px}.s2-label{font-family:var(--fn-display);font-size:.68rem;letter-spacing:.35em;text-transform:uppercase;color:var(--gold);opacity:.6;margin-bottom:1.2rem}.s2-body{font-family:var(--fn-felt);font-size:1.1rem;line-height:2;color:var(--parchment);opacity:.82}.s2-body em{color:var(--gold-light);font-style:italic}.prologue-s4{background:linear-gradient(180deg,#0e0a1e,#080614);overflow:hidden}.s4-text{position:relative;z-index:2;text-align:center;pointer-events:none}.s4-body{font-family:var(--fn-display);font-size:clamp(1rem,2.5vw,1.5rem);font-weight:400;letter-spacing:.15em;line-height:2.2;color:var(--gold-light);text-shadow:0 0 30px rgba(201,168,76,.5)}.prologue-s5{background:linear-gradient(180deg,#080614,#0a0818);gap:2rem;transition:opacity .6s ease,transform .6s ease}.s3-symbol{font-size:3rem;color:var(--sky);opacity:.5;text-shadow:0 0 20px rgba(200,156,255,.5);animation:symbolPulse 4s ease-in-out infinite}@keyframes symbolPulse{0%,to{opacity:.4;transform:scale(1)}50%{opacity:.75;transform:scale(1.08)}}.s3-text{text-align:center;max-width:520px}.s3-label{font-family:var(--fn-display);font-size:.68rem;letter-spacing:.35em;text-transform:uppercase;color:#c0a0ff;opacity:.6;margin-bottom:1.2rem}.s3-body{font-family:var(--fn-felt);font-size:1.08rem;line-height:1.85;color:var(--parchment);opacity:.8;margin-bottom:1rem}.s3-body-2{opacity:.88}.s3-body strong{color:#fff;font-style:normal}.prologue-s6{background:linear-gradient(180deg,#0a0818,#080614);gap:2rem;overflow:hidden}.prologue-s7{background:linear-gradient(180deg,#080614,#060410);gap:1.6rem}.s7-lines{display:flex;flex-direction:column;align-items:center;gap:.6rem;text-align:center}.s7-line{font-family:var(--fn-felt);font-style:italic;font-size:clamp(1rem,2.2vw,1.3rem);color:var(--parchment);letter-spacing:.1em;line-height:1.7;transition:opacity 1.8s ease}.s7-line.accent{font-family:var(--fn-display);font-size:clamp(.9rem,2vw,1.15rem);color:var(--gold-light);letter-spacing:.2em}.s7-line.revelation{font-family:var(--fn-display);font-size:clamp(1.1rem,2.8vw,1.8rem);color:#fff;letter-spacing:.18em;text-shadow:0 0 40px rgba(255,255,255,.5),0 0 80px rgba(180,140,255,.4)}.s5-rule-top,.s5-rule-bottom{width:120px;height:1px;background:linear-gradient(90deg,transparent,var(--gold-dim),transparent)}.s5-cta{font-family:var(--fn-display);font-size:.78rem;letter-spacing:.35em;text-transform:uppercase;color:var(--gold);background:none;border:1px solid var(--gold-dim);padding:.85rem 2.2rem;cursor:pointer;transition:all .4s ease;animation:prologuePulse 3s ease-in-out infinite}.s5-cta:hover{background:#c9a84c14;border-color:var(--gold);box-shadow:0 0 20px #c9a84c33}@keyframes prologuePulse{0%,to{opacity:.65}50%{opacity:1}}.s5-hint{font-family:var(--fn-body);font-style:italic;font-size:.78rem;color:var(--parchment-dim);opacity:.4;letter-spacing:.15em}.hud{position:fixed;top:0;left:0;right:0;z-index:50;pointer-events:none;padding:1.4rem 2rem;display:flex;justify-content:space-between;align-items:flex-start}.hud-biome{font-family:var(--fn-display);font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-light);opacity:.8;text-shadow:0 0 14px rgba(201,168,76,.4)}.hud-stars{font-family:var(--fn-body);font-style:italic;font-size:.82rem;color:var(--parchment);opacity:.65}.controls-hint{position:fixed;bottom:2.2rem;left:50%;transform:translate(-50%);z-index:50;pointer-events:none;animation:hintFadeIn .8s ease both,hintFadeOut 1s ease 9s both}@keyframes hintFadeIn{0%{opacity:0;transform:translate(-50%) translateY(8px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@keyframes hintFadeOut{0%{opacity:1}to{opacity:0}}.controls-hint-inner{display:flex;gap:1.8rem;align-items:center;padding:.6rem 1.6rem;background:#0a0614a6;border:1px solid rgba(201,168,76,.18);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.controls-hint-inner span{font-family:var(--fn-body);font-style:italic;font-size:.75rem;color:var(--parchment-dim);opacity:.75;letter-spacing:.08em;white-space:nowrap}.biome-flash{position:fixed;top:0;right:0;bottom:0;left:0;z-index:60;pointer-events:none;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .5s ease}.biome-flash.visible{opacity:1}.biome-flash-text{font-family:var(--fn-display);font-size:clamp(1rem,2.5vw,1.5rem);letter-spacing:.28em;text-transform:uppercase;color:var(--gold-light);text-shadow:0 0 40px rgba(201,168,76,.8),0 0 80px rgba(201,168,76,.4)}@media(max-width:600px){.prologue-s1 .s1-title{font-size:2.2rem}.controls-hint-inner{display:none}div[style*="width: 260px"],div[style*="width: 220px"]{width:200px!important}button[style*="translateX(-260px)"]{transform:translateY(-50%) translate(-200px)!important}button[style*="translateX(220px)"]{transform:translateY(-50%) translate(200px)!important}}.mobile-controls{position:fixed;bottom:2rem;left:0;right:0;z-index:52;display:flex;justify-content:space-between;padding:0 1.5rem;pointer-events:none}.mobile-controls .vertical-controls{position:absolute;bottom:2rem;right:1.5rem;display:flex;flex-direction:column;gap:1.2rem;pointer-events:auto;touch-action:none;z-index:41}.joystick-base{position:absolute;width:32vmin;height:32vmin;max-width:180px;max-height:180px;min-width:120px;min-height:120px;background:radial-gradient(circle,rgba(255,255,255,.5) 0%,rgba(201,168,76,.3) 45%,transparent 85%);border:2px solid rgba(255,255,255,.35);border-radius:50%;transform:translate(-50%,-50%);display:none;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);box-shadow:0 0 80px #c9a84c66,inset 0 0 25px #ffffff26;z-index:1000;animation:touchBloom .4s ease-out}@keyframes touchBloom{0%{transform:translate(-50%,-50%) scale(.6);opacity:0}to{transform:translate(-50%,-50%) scale(1);opacity:1}}.joystick-base:after{content:"";position:absolute;top:12px;right:12px;bottom:12px;left:12px;border:1px solid rgba(255,255,255,.1);border-radius:50%;pointer-events:none}.joystick-thumb{position:absolute;width:12.5vmin;height:12.5vmin;max-width:72px;max-height:72px;min-width:48px;min-height:48px;background:radial-gradient(circle at 35% 35%,#fff 0%,var(--gold-light) 40%,var(--gold) 100%);border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 20px #c9a84cb3,0 0 40px #0009;z-index:1001;border:1.5px solid rgba(255,255,255,.4)}.ctrl-btn{width:64px;height:64px;background:#ffffff0d;border:1px solid rgba(255,255,255,.15);color:var(--gold);border-radius:50%;display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;transition:transform .2s ease,background .2s ease}.ctrl-btn:active{background:#c9a84c33;transform:scale(.9)}.ctrl-btn svg{width:32px;height:32px;fill:none;stroke:var(--gold-light);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 5px rgba(201,168,76,.5))}.vertical-controls span{font-size:.5rem;letter-spacing:.1em;font-family:var(--fn-display);margin-top:2px}.tutorial-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:45;background:radial-gradient(circle at 50% 45%,transparent 0%,rgba(0,0,0,.3) 35%,rgba(0,0,0,.75) 100%);pointer-events:none;animation:fadeInSection 1.5s ease forwards}.tutorial-hint{position:fixed;top:20%;left:50%;transform:translate(-50%);z-index:100;text-align:center;pointer-events:none;width:100%}.tutorial-instruction{font-family:var(--fn-display);font-size:clamp(1rem,3vw,1.4rem);letter-spacing:.18em;color:var(--gold-light);text-shadow:0 0 25px rgba(201,168,76,.9);margin-bottom:.8rem;animation:instructionPulse 2s ease-in-out infinite alternate}@keyframes instructionPulse{0%{transform:scale(1);opacity:.85}to{transform:scale(1.04);opacity:1}}.tutorial-task{font-family:var(--fn-body);font-style:italic;font-size:.8rem;letter-spacing:.2em;color:#ffffff80}