@import "https://fonts.googleapis.com/css2?family=Fredoka+One&family=Nunito:wght@400;600;700;800&display=swap";
:root{--sky-blue:#87ceeb;--grass-green:#4caf50;--gold:gold;--warm-orange:#ff8c00;--soft-red:#ff6b6b;--purple:#9b59b6;--teal:#1abc9c;--safe-bottom:env(safe-area-inset-bottom,0px);--safe-top:env(safe-area-inset-top,0px)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}html,body{touch-action:none;overscroll-behavior:none;-webkit-user-select:none;user-select:none;width:100%;height:100%;font-family:Nunito,sans-serif;overflow:hidden}body{background:#1a1a2e;position:fixed;inset:0}.game-container{flex-direction:column;justify-content:center;align-items:center;width:100vw;height:100dvh;display:flex;position:relative;overflow:hidden}.start-screen{width:100%;height:100%;padding:20px 15px;padding-top:max(20px,var(--safe-top));padding-bottom:max(20px,var(--safe-bottom));background:linear-gradient(#5bb5e0 0%,#7ecec5 35%,#6abf69 70%,#3d8b37 100%);flex-direction:column;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden auto}.start-screen:before{content:"";pointer-events:none;background:radial-gradient(circle at 15% 25%,#ffffff26 0%,#0000 40%),radial-gradient(circle at 85% 75%,#ffd7001a 0%,#0000 40%);position:absolute;inset:0}.game-title{color:#fff;text-shadow:0 3px #1b5e20,0 5px #0000001f,0 0 30px #ffd7004d;text-align:center;z-index:1;margin-bottom:4px;font-family:Fredoka One,cursive;font-size:clamp(1.8rem,6vw,4rem);line-height:1.1;animation:.8s ease-out bounceIn}.game-subtitle{color:#e8f5e9;z-index:1;text-shadow:0 1px 3px #0003;margin-bottom:1.2rem;font-family:Nunito,sans-serif;font-size:clamp(.85rem,2.5vw,1.4rem);font-weight:700;animation:1s ease-out .3s both fadeIn}.masjid-preview{z-index:1;filter:drop-shadow(0 8px 20px #0003);width:clamp(160px,35vw,300px);margin-bottom:1rem;animation:3s ease-in-out infinite float}.name-input{text-align:center;z-index:1;color:#333;background:#ffffffe6;border:3px solid #fff9;border-radius:25px;outline:none;width:min(250px,75vw);margin-bottom:.8rem;padding:10px 20px;font-family:Nunito,sans-serif;font-size:clamp(.95rem,2vw,1.2rem);transition:all .3s}.name-input::placeholder{color:#999}.name-input:focus{background:#fff;border-color:gold;box-shadow:0 0 15px #ffd70080}.btn{cursor:pointer;text-transform:uppercase;letter-spacing:2px;z-index:1;-webkit-tap-highlight-color:transparent;border:none;border-radius:50px;padding:12px 40px;font-family:Fredoka One,cursive;font-size:clamp(1.1rem,2.5vw,1.8rem);transition:all .15s;position:relative}.btn:hover{transform:scale(1.06)}.btn:active{transform:scale(.96)}.btn-play{color:#5d4037;background:linear-gradient(gold,#ffa000);margin-bottom:.3rem;animation:2s ease-in-out infinite pulse;box-shadow:0 5px #e65100,0 7px 12px #00000040}.btn-play:active{transform:translateY(3px)scale(.96);box-shadow:0 2px #e65100}.level-select{z-index:1;flex-direction:column;align-items:center;gap:4px;width:100%;max-width:600px;margin-top:1rem;animation:1s ease-out .6s both fadeIn;display:flex}.level-select h3{color:#fff;text-shadow:0 2px 4px #0003;margin-bottom:4px;font-family:Fredoka One,cursive;font-size:clamp(.9rem,2vw,1.3rem)}.level-buttons{flex-direction:column;align-items:center;gap:6px;width:100%;display:flex}.btn-level{color:#fff;text-align:center;background:linear-gradient(#4fc3f7,#0288d1);width:min(100%,380px);padding:10px 20px;font-size:clamp(.8rem,1.8vw,1.1rem);line-height:1.3;box-shadow:0 3px #01579b,0 5px 10px #00000026}.btn-level:disabled{cursor:not-allowed;opacity:.55;background:linear-gradient(#b0b0b0,gray);box-shadow:0 3px #555}.btn-level:disabled:hover{transform:none}.level-info{opacity:.85;font-family:Nunito,sans-serif;font-size:.7em;font-weight:600;display:block}.lock-icon{margin-right:4px}.total-score{color:gold;text-shadow:0 2px 4px #0000004d;z-index:1;margin-top:8px;font-family:Fredoka One,cursive;font-size:clamp(.85rem,2vw,1.15rem)}.hud{padding:6px 10px;padding-top:max(6px,var(--safe-top));z-index:10;pointer-events:none;background:linear-gradient(#00000080 0%,#00000026 70%,#0000 100%);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:4px;display:flex;position:absolute;top:0;left:0;right:0}.hud>*{pointer-events:auto}.hud-left,.hud-right,.hud-center{align-items:center;gap:6px;display:flex}.hud-item{color:#fff;text-shadow:0 1px 3px #0006;white-space:nowrap;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#00000059;border:1px solid #ffffff1a;border-radius:16px;align-items:center;gap:4px;padding:3px 10px;font-family:Fredoka One,cursive;font-size:clamp(.7rem,1.6vw,1.1rem);display:flex}.hud-points{color:gold;transition:transform .15s}.hud-points:active,.hud-points.pop{transform:scale(1.15)}.hud-lives{color:#ff6b6b;transition:transform .15s}.hud-level{color:#b3e5fc}.hud-items-count{color:#a5d6a7;transition:transform .15s}.btn-pause{color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#fff3;border:2px solid #fff6;border-radius:16px;padding:3px 12px;font-family:Fredoka One,cursive;font-size:clamp(.7rem,1.5vw,.95rem);transition:background .2s}.btn-pause:active{background:#fff6}.btn-mute{top:max(12px,var(--safe-top));z-index:20;cursor:pointer;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0000004d;border:2px solid #fff6;border-radius:50%;justify-content:center;align-items:center;width:44px;height:44px;font-size:1.3rem;transition:background .2s;display:flex;position:fixed;right:12px}.btn-mute:active{background:#00000080}.btn-mute-hud{color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#fff3;border:2px solid #fff6;border-radius:16px;padding:3px 8px;font-size:clamp(.8rem,1.5vw,1.1rem);transition:background .2s}.btn-mute-hud:active{background:#fff6}.overlay{z-index:20;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#000000bf;flex-direction:column;justify-content:center;align-items:center;padding:20px;animation:.3s ease-out fadeIn;display:flex;position:absolute;inset:0}.overlay-card{text-align:center;background:linear-gradient(145deg,#fff,#f0f0ff);border-radius:24px;width:100%;max-width:min(420px,90vw);padding:clamp(18px,4vw,35px);animation:.5s ease-out bounceIn;box-shadow:0 15px 50px #00000059,0 0 0 3px #ffffff1a}.overlay-card h2{margin-bottom:8px;font-family:Fredoka One,cursive;font-size:clamp(1.4rem,4vw,2.4rem)}.overlay-card .stars{letter-spacing:4px;margin:8px 0;font-size:clamp(1.8rem,5vw,3rem)}.overlay-card .score-display{color:#555;margin-bottom:12px;font-family:Nunito,sans-serif;font-size:clamp(.95rem,2.5vw,1.4rem);font-weight:800}.overlay-card .score-display span{color:#e6a800;font-size:1.2em}.overlay-buttons{flex-wrap:wrap;justify-content:center;gap:8px;margin-top:12px;display:flex}.btn-next{color:#fff;background:linear-gradient(#66bb6a,#2e7d32);padding:10px 24px;font-size:clamp(.9rem,2vw,1.2rem);box-shadow:0 3px #1b5e20}.btn-retry{color:#fff;background:linear-gradient(#ff8a65,#e64a19);padding:10px 24px;font-size:clamp(.9rem,2vw,1.2rem);box-shadow:0 3px #bf360c}.btn-menu{color:#fff;background:linear-gradient(#90a4ae,#546e7a);padding:10px 24px;font-size:clamp(.9rem,2vw,1.2rem);box-shadow:0 3px #37474f}.level-complete h2{color:#2e7d32}.level-complete .overlay-card{background:linear-gradient(145deg,#e8f5e9,#f0f0ff);border-top:4px solid #4caf50}.game-over h2{color:#e53935}.game-over .overlay-card{background:linear-gradient(145deg,#ffebee,#f0f0ff);border-top:4px solid #e53935}.pause-overlay h2{color:#0288d1}.pause-overlay .overlay-card{border-top:4px solid #0288d1}.overlay-card .stars span{animation:.4s ease-out both starPop;display:inline-block}.overlay-card .stars span:nth-child(2){animation-delay:.15s}.overlay-card .stars span:nth-child(3){animation-delay:.3s}.instructions{color:#ffffffd9;z-index:10;white-space:nowrap;pointer-events:none;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0000008c;border-radius:14px;padding:5px 14px;font-family:Nunito,sans-serif;font-size:clamp(.6rem,1.3vw,.8rem);position:absolute;bottom:8px;left:50%;transform:translate(-50%)}#game-canvas{width:100%;height:100%;position:absolute;inset:0}#game-canvas canvas{touch-action:none;display:block;width:100%!important;height:100%!important}@media (pointer:coarse){.instructions{display:none}}@media (max-width:768px){.instructions{display:none}.hud{gap:3px;padding:4px 6px}.hud-center{display:none}.hud-item{gap:3px;padding:2px 7px;font-size:.7rem}.btn-pause{padding:2px 8px;font-size:.7rem}}@media (max-width:480px){.start-screen{padding:12px 10px}.game-title{font-size:clamp(1.5rem,7vw,2.5rem)}.masjid-preview{width:clamp(130px,45vw,200px);margin-bottom:8px}.game-subtitle{margin-bottom:.7rem;font-size:.85rem}.name-input{margin-bottom:.5rem;padding:8px 14px;font-size:.9rem}.btn-play{padding:10px 30px;font-size:1.1rem}.level-select{gap:3px;margin-top:.6rem}.btn-level{padding:8px 14px;font-size:.75rem}.overlay-card{border-radius:18px;padding:16px}.overlay-buttons .btn{padding:8px 18px;font-size:.85rem}}@media (max-height:500px){.start-screen{flex-flow:wrap;justify-content:center;align-items:center;gap:10px;padding:8px 20px}.masjid-preview{width:100px;margin:0}.game-title{width:100%;margin-bottom:0;font-size:1.5rem}.game-subtitle{display:none}.name-input{width:160px;margin:0;padding:6px 12px;font-size:.85rem}.btn-play{padding:8px 24px;font-size:1rem}.level-select{margin-top:0}.level-buttons{flex-flow:wrap}.btn-level{width:auto;padding:6px 12px;font-size:.7rem}.hud{padding:2px 6px}.hud-item{padding:1px 6px;font-size:.65rem}}@keyframes bounceIn{0%{opacity:0;transform:scale(.3)}50%{transform:scale(1.05)}70%{transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.04)}}@keyframes starPop{0%{opacity:0;transform:scale(0)rotate(-30deg)}60%{opacity:1;transform:scale(1.3)rotate(10deg)}to{opacity:1;transform:scale(1)rotate(0)}}@keyframes shimmer{0%{background-position:-200%}to{background-position:200%}}.confetti-container{pointer-events:none;z-index:21;position:absolute;inset:0;overflow:hidden}.confetti-piece{opacity:.9;animation:2.5s ease-in forwards confettiFall;position:absolute;top:-12px}@keyframes confettiFall{0%{opacity:1;transform:translateY(0)rotate(0)scale(1)}50%{opacity:.9}to{opacity:0;transform:translateY(100vh)rotate(720deg)scale(.3)}}