:root{--ink:#140a2c;--ink2:#22134a;--card:#2b1a5e;--card2:#3a2380;--yellow:#ffd23f;--gold:#ffb627;--pink:#ff8fb1;--rose:#e0558a;--mint:#7ee8c7;--lav:#b79cff;--cream:#fff6e0;--blk:#0d0620;--paper:#fdf1d6;--paper2:#f3deb0;--plum:#3b2447}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{margin:0;font-family:Pixelify Sans,monospace;font-size:19px;color:var(--cream);min-height:100vh;background:radial-gradient(ellipse 70% 45% at 50% -5%,#6a3cc4aa,transparent 70%),radial-gradient(ellipse 60% 40% at 85% 105%,#ff8fb133,transparent 70%),radial-gradient(ellipse 60% 40% at 10% 100%,#7ee8c71f,transparent 70%),linear-gradient(#ffffff06 1px,transparent 1px) 0 0/32px 32px,linear-gradient(90deg,#ffffff06 1px,transparent 1px) 0 0/32px 32px,linear-gradient(180deg,var(--ink2),var(--ink) 70%) fixed;background-attachment:fixed}.app{min-height:100vh;position:relative;overflow:hidden}.app:before,.app:after{content:"";position:fixed;z-index:0;pointer-events:none;border-radius:50%;filter:blur(70px);opacity:.35;animation:drift 14s ease-in-out infinite alternate}.app:before{width:46vmax;height:46vmax;left:-14vmax;top:-10vmax;background:#8a4dff}.app:after{width:40vmax;height:40vmax;right:-12vmax;bottom:-12vmax;background:#ff5fa2;animation-delay:-6s}@keyframes drift{to{transform:translate(6vmax,4vmax) scale(1.12)}}main{position:relative;z-index:1;max-width:860px;margin:0 auto;padding:40px 18px 56px;text-align:center}.center{padding-top:9vh}h1,h2{font-family:"Press Start 2P",monospace;line-height:1.55;color:var(--yellow);text-shadow:3px 3px 0 var(--blk),0 0 26px #ffd23f55;letter-spacing:.5px;margin:.4em 0}h1{font-size:clamp(1.15rem,5vw,2.2rem)}h2{font-size:1.3rem}.sub{color:var(--pink);font-size:1.2rem;margin:.2em 0 1em;text-shadow:2px 2px 0 var(--blk)}.intro{max-width:540px;margin:20px auto 32px;line-height:1.55;font-size:1.1rem;background:linear-gradient(#1a0c3acc,#0d0620cc);border:3px dashed var(--lav);padding:18px 20px;box-shadow:0 0 0 4px var(--blk),0 0 40px #b79cff30}.bookicon{font-size:5rem;display:inline-block;animation:hop 1.1s steps(4) infinite;filter:drop-shadow(5px 5px 0 var(--blk)) drop-shadow(0 0 22px #b79cffaa)}@keyframes hop{50%{transform:translateY(-14px)}}.sp{position:absolute;z-index:0;background:var(--yellow);opacity:.3;animation:tw 2.4s steps(3) infinite;box-shadow:0 0 8px currentColor}.sp:nth-child(3n){background:var(--pink)}.sp:nth-child(3n+1){background:var(--mint)}.sp:nth-child(5n){background:var(--lav)}@keyframes tw{50%{opacity:1;transform:scale(1.9)}}.btn{font-family:"Press Start 2P",monospace;font-size:.8rem;line-height:1.4;background:linear-gradient(var(--yellow),var(--gold));color:var(--blk);border:4px solid var(--blk);padding:16px 24px;cursor:pointer;margin:12px 0;box-shadow:5px 5px 0 var(--blk),inset 0 3px #fff7,inset 0 -4px #0000002e;transition:transform .08s,box-shadow .08s,filter .08s}.btn:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--blk),inset 0 3px #fff7,inset 0 -4px #0000002e;filter:brightness(1.08)}.btn:active{transform:translate(5px,5px);box-shadow:0 0 0 var(--blk),inset 0 3px #0000002e}.glow{background:linear-gradient(160deg,#ffc2dc,#ff8fb8 55%,#f0679d);color:#3a0f26;box-shadow:5px 5px 0 var(--blk),inset 0 3px #fff8,inset 0 -4px #0000002e,0 0 26px #ff8fb899;animation:pulsePink 1.2s steps(2) infinite}.glow:hover{box-shadow:7px 7px 0 var(--blk),inset 0 3px #fff8,inset 0 -4px #0000002e,0 0 36px #ff8fb8cc}@keyframes pulsePink{50%{filter:brightness(1.15);box-shadow:5px 5px 0 var(--blk),inset 0 3px #fff8,inset 0 -4px #0000002e,0 0 40px #ff8fb8}}.ghost{font:inherit;background:none;border:0;color:var(--lav);cursor:pointer;margin-top:16px;text-decoration:underline;text-underline-offset:4px}.ghost:hover{color:var(--yellow)}.parchment .ghost{color:var(--rose)}.progress{height:24px;max-width:360px;margin:12px auto 0;border:4px solid var(--blk);background:var(--blk);box-shadow:4px 4px #0008,0 0 24px #ff8fb844}.progress div{height:100%;position:relative;background:repeating-linear-gradient(90deg,transparent 0 12px,#0d062055 12px 16px),linear-gradient(160deg,#ffc2dc,#ff8fb8 55%,#f0679d);transition:width .5s steps(8)}.progress div:after{content:"";position:absolute;left:0;right:0;top:0;height:35%;background:#fff5}.shelf{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:20px;margin:30px 0}.page{font:inherit;color:var(--cream);position:relative;background:linear-gradient(160deg,var(--card2),var(--card) 60%);border:4px solid var(--blk);border-left:14px solid var(--lav);padding:18px 12px 16px;cursor:pointer;min-height:150px;display:flex;flex-direction:column;gap:9px;align-items:center;justify-content:flex-start;text-align:center;box-shadow:6px 6px 0 var(--blk),inset 0 0 0 3px #ffffff12;transition:.1s}.page:before{content:"";position:absolute;top:6px;right:6px;bottom:6px;left:6px;border:2px dashed #ffffff22;pointer-events:none}.page:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--blk),inset 0 0 0 3px #ffffff1c,0 0 28px #b79cff44}.page:active{transform:translate(4px,4px);box-shadow:2px 2px 0 var(--blk)}.page em{font-style:normal;font-size:.78rem;color:var(--lav)}.page b{font-family:"Press Start 2P",monospace;font-size:.75rem;color:var(--yellow);text-shadow:2px 2px 0 var(--blk);line-height:1.5}.page span{font-size:.98rem;line-height:1.3;margin-top:auto;min-height:2.6em;display:flex;align-items:center;justify-content:center}.page.found{background:linear-gradient(160deg,#ffc2dc,#ff8fb8 55%,#f0679d);color:#3a0f26;border-color:var(--blk);border-left-color:var(--rose);box-shadow:6px 6px 0 var(--blk),inset 0 3px #fff8,0 0 26px #ff8fb899}.page.found b{color:#3a0f26;text-shadow:1px 1px 0 #ffffff66}.page.found em{color:#8a1f55}.page.found:before{border-color:#fff6}.page.found:hover{box-shadow:9px 9px 0 var(--blk),inset 0 3px #fff8,0 0 36px #ff8fb8cc}.page.locked{opacity:.5;filter:grayscale(.75);cursor:not-allowed}.page.locked:hover,.page.locked:active{transform:none;box-shadow:6px 6px 0 var(--blk),inset 0 0 0 3px #ffffff12}.modal{position:fixed;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at 50% 30%,#2a1560dd,#0d0620f2 75%);display:flex;z-index:5;padding:14px;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.card{background:linear-gradient(170deg,var(--card2),var(--card) 55%,#22134d);border:4px solid var(--blk);padding:40px 36px;max-width:760px;min-height:min(560px,90vh);margin:auto;display:flex;flex-direction:column;justify-content:safe center;font-size:1.3rem;width:100%;text-align:center;overflow-wrap:anywhere;word-break:normal;box-shadow:8px 8px 0 var(--blk),inset 0 0 0 4px #ffffff10,0 0 70px #b79cff33;animation:pop .25s steps(4)}@keyframes pop{0%{transform:scale(.85)}}.card.wide{max-width:900px;justify-content:flex-start}.card h2{overflow-wrap:anywhere}.card p{margin:.6em 0}.parchment{background:radial-gradient(ellipse at 50% 0,#fffaf0,transparent 60%),repeating-linear-gradient(0deg,#00000008 0 2px,transparent 2px 6px),linear-gradient(var(--paper),var(--paper2));color:var(--plum);box-shadow:8px 8px 0 var(--blk),inset 0 0 0 4px var(--paper),inset 0 0 0 7px #c2447a66,inset 0 0 60px #b9803a33,0 0 70px #ffd23f33}.parchment h2{color:var(--rose);text-shadow:2px 2px 0 #f3c9d8}.story{font-size:1.45rem;line-height:1.6;text-align:left;margin:.7em 0}.story b{font-family:"Press Start 2P",monospace;font-size:.8em;color:var(--rose)}.fin{color:var(--rose);text-align:center;font-size:1.55rem;margin-top:1.2em;padding-top:1em;border-top:3px dotted #c2447a66}.big{font-size:1.7rem;color:var(--yellow);text-shadow:2px 2px 0 var(--blk)}.q{font-size:1.55rem;line-height:1.45}.hint{color:var(--mint);font-size:1.1rem;margin:6px 0}.opt{display:block;width:100%;font:inherit;font-size:1.3rem;margin:12px 0;padding:18px;border:4px solid var(--blk);background:linear-gradient(#ffa9c4,var(--pink));color:var(--blk);cursor:pointer;box-shadow:4px 4px 0 var(--blk),inset 0 3px #fff6,inset 0 -4px #00000026;transition:.08s}.opt:hover{background:linear-gradient(#ffc2d5,#ffa3bf);transform:translate(-2px,-2px)}.opt:active{transform:translate(4px,4px);box-shadow:0 0}.opt.no{opacity:.35;text-decoration:line-through;cursor:not-allowed}.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-width:560px;width:100%;margin:0 auto}.tile{aspect-ratio:1;font-size:2.6rem;border:4px solid var(--blk);cursor:pointer;color:var(--blk);background:repeating-linear-gradient(45deg,var(--lav) 0 8px,#a387f0 8px 16px);box-shadow:3px 3px 0 var(--blk),inset 0 3px #fff5;transition:.1s}.tile:hover{transform:translate(-2px,-2px)}.tile.up{background:var(--cream);box-shadow:3px 3px 0 var(--blk),0 0 18px #ffd23f88}.sky{position:relative;height:320px;border:4px solid var(--blk);overflow:hidden;background:radial-gradient(2px 2px at 20% 30%,#fff,transparent),radial-gradient(2px 2px at 70% 20%,#fff,transparent),radial-gradient(1.5px 1.5px at 40% 70%,#fff9,transparent),radial-gradient(2px 2px at 85% 60%,#fff,transparent),radial-gradient(1.5px 1.5px at 10% 85%,#fff9,transparent),linear-gradient(#0d0620,#2a1560);box-shadow:inset 0 0 40px #b79cff33}.star{position:absolute;transform:translate(-50%,-50%);background:none;border:0;font-size:2.6rem;cursor:pointer;filter:drop-shadow(0 0 10px var(--yellow));padding:6px}.letters{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:12px 0}.letters span{width:52px;height:60px;font-size:1.6rem;display:grid;place-items:center;background:linear-gradient(var(--yellow),var(--gold));color:var(--blk);border:3px solid var(--blk);font-weight:600;box-shadow:3px 3px 0 var(--blk),inset 0 2px #fff7}input{font:inherit;font-size:1.4rem;width:100%;padding:14px;border:4px solid var(--blk);background:var(--cream);color:var(--blk);text-align:center;letter-spacing:3px;outline:0}input:focus{box-shadow:0 0 0 4px var(--lav),0 0 24px #b79cff88}.candles{display:flex;justify-content:center;gap:22px;margin:20px 0}.candle{font-size:4.2rem;background:none;border:0;cursor:pointer;filter:grayscale(1) brightness(.5);transition:.2s}.candle.lit{filter:drop-shadow(0 0 14px var(--yellow)) drop-shadow(0 0 28px var(--pink));transform:scale(1.3) translateY(-6px)}.bar{position:relative;height:70px;background:var(--blk);border:4px solid var(--blk);margin:18px 0}.zone{position:absolute;left:28%;width:44%;top:0;bottom:0;background:var(--yellow)}.lantern{position:absolute;top:50%;font-size:3rem;transform:translate(-50%,-50%)}.heartsky{position:relative;width:100%;height:420px;border:4px solid var(--blk);margin:10px 0;overflow:hidden;background:radial-gradient(2px 2px at 15% 20%,#fff9,transparent),radial-gradient(2px 2px at 80% 15%,#fff9,transparent),radial-gradient(1.5px 1.5px at 55% 90%,#fff7,transparent),radial-gradient(circle at 50% 45%,#34187a,var(--blk) 78%)}.lan{position:absolute;transform:translate(-50%,-50%);background:none;border:0;cursor:pointer;font-size:2.8rem;padding:4px;animation:rise 1.6s ease-out both}.lan span{display:block;animation:bob 2s ease-in-out infinite;filter:grayscale(1) brightness(.55);transition:filter .3s,transform .3s}.lan span.on{filter:drop-shadow(0 0 10px var(--yellow)) drop-shadow(0 0 18px var(--pink));transform:scale(1.25)}@keyframes rise{0%{opacity:0;margin-top:420px}to{opacity:1;margin-top:0}}@keyframes bob{50%{transform:translateY(-6px)}}.heartsky.done{box-shadow:0 0 40px var(--pink) inset;animation:blink2 .8s steps(2) infinite}@keyframes blink2{50%{box-shadow:0 0 40px var(--yellow) inset}}.mute{position:fixed;top:14px;right:14px;z-index:10;font-size:1.5rem;line-height:1;padding:10px 12px;cursor:pointer;background:linear-gradient(160deg,#ffc2dc,#ff8fb8 55%,#f0679d);border:4px solid var(--blk);box-shadow:4px 4px 0 var(--blk),inset 0 3px #fff8;transition:.08s}.mute:hover{transform:translate(-2px,-2px)}.mute:active{transform:translate(3px,3px);box-shadow:0 0}@media (max-width:600px){body{font-size:17px}main{padding:28px 14px 44px}.card{padding:26px 16px;font-size:1.1rem;min-height:0;box-shadow:5px 5px 0 var(--blk),inset 0 0 0 3px #ffffff10}h2,.card h2{font-size:1rem}.intro{font-size:1rem;padding:14px}.story{font-size:1.15rem;line-height:1.5}.fin{font-size:1.2rem}.big{font-size:1.3rem}.q{font-size:1.25rem}.opt{font-size:1.05rem;padding:14px}.btn{font-size:.7rem;padding:14px 16px}.shelf{gap:16px}.grid4{gap:8px}.tile{font-size:2rem}.letters span{width:40px;height:48px;font-size:1.3rem}.candles{gap:12px}.candle{font-size:3.2rem}input{font-size:1.1rem;padding:12px;letter-spacing:1px}.lan{font-size:2.1rem}.heartsky{height:340px}.sky{height:280px}.star{font-size:2.2rem}}@media (prefers-reduced-motion:reduce){.app:before,.app:after,.sp,.bookicon,.glow{animation:none}}