:root{--midnight: #080618;--deep-indigo: #12082e;--purple-dark: #1e1045;--purple-mid: #2d1b69;--blue-dark: #0d1b3e;--gold: #ffd700;--gold-dark: #b8860b;--gold-light: #ffe566;--gold-glow: rgba(255, 215, 0, .3);--parchment-light: #f8ecd4;--parchment: #f0dfbe;--parchment-dark: #d4bf96;--parchment-shadow: rgba(139, 90, 43, .15);--text-light: #e8e0f0;--text-dim: #8a82a0;--text-warm: #5a4632;--magic-blue: #6b8cff;--magic-purple: #9b59b6}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html,body,#root{width:100%;height:100%;overflow:hidden}body{font-family:Cormorant Garamond,Georgia,serif;background:var(--midnight);color:var(--text-light);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.screen{width:100vw;height:100vh;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}canvas{display:block;margin:0 auto;border-radius:12px;box-shadow:0 0 40px #6432c84d,0 0 80px #3c289626}.loading-screen{background:radial-gradient(ellipse at center,rgba(30,15,60,1) 0%,var(--midnight) 70%);z-index:9999}.loading-content{display:flex;flex-direction:column;align-items:center;gap:1.2rem;padding:2rem;max-width:550px;text-align:center;z-index:2}.loading-wand{font-size:3rem;color:var(--gold);animation:wandFloat 2s ease-in-out infinite,loadingFadeIn 1s ease-out forwards;filter:drop-shadow(0 0 20px var(--gold-glow))}@keyframes wandFloat{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(-12px) rotate(15deg)}}.loading-quote{font-family:Cormorant Garamond,serif;font-size:clamp(1.3rem,3.5vw,1.9rem);font-style:italic;color:var(--gold-light);line-height:1.7;opacity:0;animation:loadingFadeIn 1.5s ease-out .5s forwards}.loading-quote strong{color:#fff;text-shadow:0 0 15px var(--gold-glow)}.loading-attribution{font-family:Cinzel,serif;font-size:.9rem;color:var(--text-dim);letter-spacing:2px;opacity:0;animation:loadingFadeIn 1s ease-out 1.5s forwards}.loading-bar-track{width:200px;height:4px;background:#ffd70026;border-radius:4px;overflow:hidden;opacity:0;animation:loadingFadeIn .8s ease-out 2s forwards}.loading-bar-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--gold-dark),var(--gold),var(--gold-light));border-radius:4px;animation:loadingProgress 5.5s ease-in-out forwards;box-shadow:0 0 12px var(--gold-glow)}@keyframes loadingProgress{0%{width:0%}to{width:100%}}.loading-subtitle{font-family:MedievalSharp,cursive;font-size:.85rem;color:var(--text-dim);letter-spacing:3px;text-transform:uppercase;opacity:0;animation:loadingFadeIn .8s ease-out 2.2s forwards}@keyframes loadingFadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.loading-particles{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:1}.loading-particle{position:absolute;bottom:-10px;width:4px;height:4px;background:var(--gold);border-radius:50%;filter:blur(1px);opacity:0;animation:particleRise linear infinite}@keyframes particleRise{0%{opacity:0;transform:translateY(0)}10%{opacity:.8}90%{opacity:.3}to{opacity:0;transform:translateY(-100vh)}}.starfield{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0}.star{position:absolute;background:#fff;border-radius:50%;animation:twinkle ease-in-out infinite alternate}@keyframes twinkle{0%{opacity:.15;transform:scale(.6)}to{opacity:1;transform:scale(1.3)}}.menu-screen{background:radial-gradient(ellipse at 20% 80%,rgba(100,50,200,.15) 0%,transparent 50%),radial-gradient(ellipse at 80% 20%,rgba(50,80,200,.1) 0%,transparent 50%),radial-gradient(ellipse at bottom center,var(--deep-indigo) 0%,var(--midnight) 70%);flex-direction:column}.menu-content{position:relative;z-index:1;text-align:center;display:flex;flex-direction:column;align-items:center;gap:1rem;animation:fadeInUp 1.2s ease-out}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.sparkle-container{display:flex;gap:1.5rem;margin-bottom:.5rem}.sparkle{font-size:1.5rem;color:var(--gold);animation:sparkleFloat 3s ease-in-out infinite;text-shadow:0 0 10px var(--gold-glow)}.sparkle:nth-child(2){animation-delay:.5s;font-size:1.2rem}.sparkle:nth-child(3){animation-delay:1s}@keyframes sparkleFloat{0%,to{transform:translateY(0) rotate(0);opacity:.6}50%{transform:translateY(-10px) rotate(15deg);opacity:1}}.sparkle-text{display:inline-block;animation:textSparkle 2.5s ease-in-out infinite}@keyframes textSparkle{0%,to{color:var(--gold-dark);text-shadow:0 1px 2px rgba(0,0,0,.1);transform:translateY(0) scale(1)}50%{color:#fff;text-shadow:0 0 20px var(--gold-glow),0 0 40px #fff;transform:translateY(-4px) scale(1.05)}}.game-title{font-family:Cinzel,serif;font-weight:900;font-size:clamp(2rem,5vw,3rem);background:linear-gradient(135deg,var(--gold-dark) 0%,var(--gold) 30%,var(--gold-light) 50%,var(--gold) 70%,var(--gold-dark) 100%);background-size:200% auto;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:shimmer 4s linear infinite;filter:drop-shadow(0 0 20px rgba(255,215,0,.3));letter-spacing:4px;line-height:1.2}@keyframes shimmer{to{background-position:200% center}}.game-subtitle{font-family:MedievalSharp,cursive;font-size:clamp(.9rem,2vw,1.3rem);color:var(--text-dim);letter-spacing:2px;text-transform:uppercase;margin-top:-.5rem}.game-dedication{font-family:Cormorant Garamond,serif;font-size:clamp(1rem,1.8vw,1.2rem);font-style:italic;color:var(--gold);opacity:.8;margin-top:.5rem}.magic-button{font-family:Cinzel,serif;font-weight:700;font-size:clamp(.9rem,1.5vw,1.15rem);padding:16px 48px;background:linear-gradient(135deg,var(--gold-dark),var(--gold),var(--gold-dark));background-size:200% auto;color:var(--midnight);border:2px solid var(--gold-light);border-radius:8px;cursor:pointer;letter-spacing:3px;text-transform:uppercase;transition:all .4s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;margin-top:1.5rem}.magic-button:before{content:"";position:absolute;top:-2px;right:-2px;bottom:-2px;left:-2px;border-radius:10px;background:linear-gradient(135deg,var(--gold),transparent,var(--gold));opacity:0;transition:opacity .4s;z-index:-1}.magic-button:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 0 25px var(--gold-glow),0 0 60px #ffd70026,0 8px 30px #0000004d;background-position:right center}.magic-button:active{transform:scale(.95);box-shadow:0 0 40px var(--gold-glow)}.magic-button:hover:before{opacity:.4}.magic-button:active{transform:translateY(-1px) scale(.98)}.controls-info{font-family:Cormorant Garamond,serif;font-size:.9rem;color:var(--text-dim);opacity:.5;margin-top:.5rem;letter-spacing:1px}.game-screen{background:var(--midnight);flex-direction:column}.victory-screen{background:radial-gradient(ellipse at 50% 30%,rgba(255,215,0,.08) 0%,transparent 50%),radial-gradient(ellipse at 20% 80%,rgba(100,50,200,.12) 0%,transparent 50%),radial-gradient(ellipse at bottom center,var(--deep-indigo) 0%,var(--midnight) 70%);flex-direction:column}.victory-content{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:2rem;animation:fadeInScale 1s ease-out;max-width:90vw}@keyframes fadeInScale{0%{opacity:0;transform:scale(.85) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}.parchment{position:relative;background:linear-gradient(to bottom,rgba(139,90,43,.08) 0%,transparent 4%),linear-gradient(to top,rgba(139,90,43,.08) 0%,transparent 4%),linear-gradient(135deg,var(--parchment-light) 0%,var(--parchment) 25%,var(--parchment-light) 45%,var(--parchment) 65%,var(--parchment-light) 100%);border:3px solid var(--gold-dark);border-radius:6px;padding:clamp(2rem,4vw,3.5rem) clamp(2rem,5vw,4rem);max-width:600px;width:100%;text-align:center;box-shadow:0 0 40px #ffd7001f,0 15px 50px #0006,inset 0 0 100px var(--parchment-shadow);color:var(--text-warm)}.parchment-ornament{font-size:1.5rem;color:var(--gold-dark);opacity:.6;line-height:1}.top-ornament{margin-bottom:.5rem}.bottom-ornament{margin-top:.5rem}.victory-title{font-family:Cinzel,serif;font-weight:900;font-size:clamp(1.3rem,3.5vw,2rem);color:var(--gold-dark);line-height:1.4;text-shadow:0 1px 2px rgba(0,0,0,.1)}.victory-divider{font-size:1rem;color:var(--gold);opacity:.5;letter-spacing:6px;margin:.5rem 0}.victory-message{font-family:Cormorant Garamond,serif;font-size:clamp(1rem,2vw,1.25rem);line-height:1.8;color:var(--text-warm);white-space:pre-line;font-style:italic;max-width:480px;margin:0 auto}.victory-tagline{font-family:MedievalSharp,cursive;font-size:clamp(.9rem,1.8vw,1.1rem);color:var(--gold-dark);opacity:.8;margin-top:.3rem}.play-again-button{margin-top:.5rem;font-size:clamp(.85rem,1.2vw,1rem);padding:12px 36px}@media(max-width:640px){.parchment{margin:0 1rem}.game-title{letter-spacing:2px}}@media(max-height:640px){.menu-content{gap:.5rem}.parchment{padding:1.5rem 2rem}.victory-content{gap:1rem}}.back-button{position:absolute;top:20px;left:20px;z-index:1000;padding:8px 16px;background:#12082ecc;border:1px solid var(--gold);color:var(--gold);border-radius:6px;font-family:Cinzel,serif;font-size:1rem;cursor:pointer;transition:all .2s;box-shadow:0 0 10px #ffd7001a}.back-button:hover{background:#ffd70026;box-shadow:0 0 15px #ffd7004d;transform:translateY(-2px)}.back-button:active{transform:scale(.95);box-shadow:0 0 20px var(--gold-glow)}.quiz-container{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,var(--purple-dark) 0%,var(--midnight) 100%)}.quiz-card{background:linear-gradient(135deg,var(--parchment-light) 0%,var(--parchment) 100%);border:3px solid var(--gold-dark);border-radius:8px;padding:3rem 2.5rem;max-width:650px;width:90%;box-shadow:0 0 30px #0009,inset 0 0 40px var(--parchment-shadow);color:var(--text-warm);text-align:center;animation:fadeInScale .5s ease-out}.quiz-header{font-family:Cinzel,serif;color:var(--gold-dark);font-size:2rem;margin-bottom:1.5rem;border-bottom:2px solid rgba(184,134,11,.3);padding-bottom:1rem}.quiz-progress{font-size:1.2rem;color:var(--text-warm);opacity:.7}.quiz-question-box{margin-bottom:2.5rem;min-height:80px;display:flex;align-items:center;justify-content:center}.quiz-question{font-family:Cormorant Garamond,serif;font-size:1.6rem;font-weight:600;line-height:1.4}.quiz-options{display:flex;flex-direction:column;gap:1rem}.quiz-option-btn{font-family:Cormorant Garamond,serif;font-size:1.3rem;padding:1rem;background:#ffffff80;border:2px solid rgba(139,90,43,.3);border-radius:6px;color:var(--text-warm);cursor:pointer;transition:all .3s;text-align:left}.quiz-option-btn:hover:not(:disabled){background:#ffd70033;border-color:var(--gold-dark);transform:translate(10px)}.quiz-option-btn:disabled{cursor:default}.quiz-option-btn.correct{background:#64ff644d!important;border-color:#2e8b57!important;color:#006400;font-weight:700}.quiz-option-btn.wrong{background:#ff64644d!important;border-color:#8b0000!important;color:#8b0000}.result-card{display:flex;flex-direction:column;align-items:center;gap:1.5rem}.quiz-title{font-family:Cinzel,serif;font-size:2.5rem;color:var(--gold-dark)}.quiz-score-text{font-family:Cormorant Garamond,serif;font-size:1.8rem;color:var(--text-light)}.quiz-grade{font-family:Cinzel,serif;font-size:2.2rem;color:var(--gold);margin:1rem 0}.quiz-flair{font-family:MedievalSharp,cursive;font-size:1.2rem;color:var(--gold-dark);opacity:.9}.hero-sprite-container{width:80px;height:80px;margin-bottom:.2rem;overflow:hidden;position:relative;border-radius:50%;box-shadow:0 0 20px #ffd70066,inset 0 0 10px #6432c880;background:radial-gradient(circle,var(--purple-mid) 0%,var(--midnight) 100%);border:3px solid var(--gold);z-index:10}.hero-sprite{width:300%;height:300%;background-image:url(/hijabi_sprite.png);background-size:100% 100%;background-position:0 0}@keyframes runCycle{0%{transform:translate(0)}20%{transform:translate(-33.33%)}40%{transform:translate(-66.66%)}60%{transform:translateY(-33.33%)}80%{transform:translate(-33.33%,-33.33%)}to{transform:translate(0)}}.birthday-card-screen{position:fixed;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse at 50% 30%,#1a0a3e,#0d0520,#050210);overflow-y:auto;overflow-x:hidden;z-index:1000;padding:2rem 0}.card-sparkles{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0}.card-sparkle{position:absolute;color:gold;animation:cardSparkle 3s ease-in-out infinite;opacity:0}@keyframes cardSparkle{0%,to{opacity:0;transform:scale(.5) rotate(0)}50%{opacity:.8;transform:scale(1.2) rotate(180deg)}}.envelope-scene{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;gap:1.5rem;cursor:pointer;z-index:10;animation:fadeInScale .8s ease-out both}.envelope-hint{font-family:Cinzel,serif;font-size:1.3rem;color:gold;text-shadow:0 0 20px rgba(255,215,0,.5);animation:fadeInUp 1s ease-out both}.envelope-tap-hint{font-family:Cormorant Garamond,serif;font-size:1rem;color:#a098b8;animation:fadeInUp 1.5s ease-out both;opacity:.7}.envelope{position:relative;width:280px;height:200px;perspective:800px;transition:transform .3s ease}.envelope:hover{transform:scale(1.05)}.envelope-body{position:relative;width:100%;height:100%;background:linear-gradient(145deg,#c9a648,#b8942e 30%,#a07e24 70%,#8a6b1a);border-radius:8px;box-shadow:0 8px 32px #00000080,0 0 60px #ffd70026,inset 0 2px 4px #ffffff26;overflow:visible}.envelope-flap{position:absolute;top:0;left:0;width:100%;height:50%;background:linear-gradient(180deg,#d4ad4e,#c49a38);clip-path:polygon(0 0,50% 100%,100% 0);transform-origin:top center;transition:transform .6s ease;z-index:2}.envelope-flap-open{animation:envelopeFlapOpen .8s ease-in-out forwards}@keyframes envelopeFlapOpen{0%{transform:rotateX(0)}to{transform:rotateX(-180deg)}}.wax-seal{position:absolute;bottom:40%;left:50%;transform:translate(-50%);width:55px;height:55px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#e74c3c,#c0392b,#922b21);display:flex;align-items:center;justify-content:center;font-size:1.5rem;box-shadow:0 4px 12px #00000080,inset 0 2px 4px #fff3;z-index:5;animation:sealGlow 2s ease-in-out infinite alternate}@keyframes sealGlow{0%{box-shadow:0 4px 12px #00000080,0 0 15px #e74c3c4d}to{box-shadow:0 4px 12px #00000080,0 0 30px #e74c3c99}}.letter-emerging{position:absolute;top:10%;left:10%;width:80%;height:90%;z-index:1;animation:letterSlideUp 1.2s ease-out .6s both}.letter-paper{width:100%;height:100%;background:linear-gradient(180deg,#f5e6c8,#ede0c0,#e8d5a8);border-radius:6px;box-shadow:0 4px 20px #0000004d}@keyframes letterSlideUp{0%{transform:translateY(0);opacity:.5}to{transform:translateY(-120%);opacity:1}}.envelope-opening{pointer-events:none}.letter-scene{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;min-height:100vh;z-index:10;animation:fadeInScale .8s ease-out both;padding:2rem 1rem 4rem;width:100%}.letter-scroll{background:linear-gradient(180deg,#f5e6c8,#ede0c0 40%,#e8d5a8);border:3px solid #b8942e;border-radius:12px;padding:2rem 1.8rem;max-width:520px;width:90%;box-shadow:0 8px 40px #0006,0 0 60px #ffd7001a,inset 0 0 40px #8b692814;text-align:center;animation:fadeInUp .6s ease-out both}.letter-ornament{font-size:1.5rem;color:#b8942e;margin:.3rem 0}.letter-greeting{font-family:Cinzel,serif;font-size:1.8rem;color:#5a3a1a;margin:.5rem 0;text-shadow:0 1px 2px rgba(0,0,0,.1)}.letter-date{font-family:Cinzel,serif;font-size:1rem;color:#8a6b3a;margin:.3rem 0;letter-spacing:.1em}.letter-divider{color:#b8942e;margin:.8rem 0;font-size:1rem;letter-spacing:.3em}.letter-body{font-family:Cormorant Garamond,serif;font-size:1.1rem;line-height:1.7;color:#3a2a10;text-align:left;animation:fadeInUp .8s ease-out .3s both}.letter-body p{margin:.8rem 0}.letter-body p:first-child{font-family:Cinzel,serif;font-size:1.2rem;color:#5a3a1a}.letter-closing{font-family:Cinzel,serif;font-size:1.2rem;color:#8a5a2a;margin-top:1.2rem!important;text-align:center}.letter-signature{font-family:Cinzel,serif;font-size:1.1rem;color:#c0392b;text-align:center;margin-top:.5rem!important}.letter-enter-btn{margin-top:1.2rem;font-size:1rem}.confetti-container{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:50;overflow:hidden}.confetti-piece{position:absolute;top:-10px;border-radius:2px;animation:confettiFall linear forwards}@keyframes confettiFall{0%{transform:translateY(-10px) rotate(0);opacity:1}80%{opacity:1}to{transform:translateY(100vh) rotate(720deg);opacity:0}}@media(max-width:600px){.letter-greeting{font-size:1.4rem}.letter-body{font-size:1rem}.letter-scroll{padding:1.5rem 1.2rem}.envelope{width:220px;height:160px}.envelope-hint{font-size:1.1rem}}