:root{--so-green:#123f34;--so-green-2:#1b5546;--so-green-3:#0c2c25;--so-gold:#fcd34d;--so-gold-2:#fde68a;--so-cream:#f6f7f3;--so-surface:#fff;--so-border:#e2e5dd;--so-muted:#475569;--so-ink:#0f172a;--r-sm:8px;--r-md:12px;--r-lg:20px;--sans:"Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;--display:"Fraunces", Georgia, serif;--ease:cubic-bezier(.22,1,.36,1)}*,:before,:after{box-sizing:border-box}html,body{height:100%;margin:0}body{font-family:var(--sans);background:var(--so-green-3);color:var(--so-cream);-webkit-font-smoothing:antialiased;touch-action:none;-webkit-user-select:none;user-select:none;overflow:hidden}.app{position:fixed;inset:0}canvas{display:block}.hud{z-index:30;pointer-events:none;background:linear-gradient(#0c2c25d9,#0000);justify-content:space-between;align-items:center;padding:12px clamp(12px,3vw,26px);display:flex;position:fixed;top:0;left:0;right:0}.hud__brand{letter-spacing:.2px;color:var(--so-cream);text-shadow:0 1px 8px #00000080;font-size:15px;font-weight:800}.hud__pills{gap:8px;display:flex}.pill{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-variant-numeric:tabular-nums;background:#0c2c25c7;border:1px solid #f6f7f338;border-radius:999px;align-items:center;gap:6px;padding:7px 13px;font-size:13px;font-weight:800;display:flex}.pill__ico{font-size:13px}.pill__dim{opacity:.55;font-size:11.5px;font-weight:600}.legend{z-index:29;pointer-events:none;flex-wrap:wrap;justify-content:center;gap:6px;padding:0 12px;display:flex;position:fixed;top:56px;left:50%;transform:translate(-50%)}.legend__it{letter-spacing:.6px;text-transform:uppercase;opacity:.45;transition:all .4s var(--ease);background:#0c2c2599;border:1px solid #f6f7f324;border-radius:999px;padding:4px 10px;font-size:10.5px;font-weight:700}.legend__it--on{opacity:1;background:var(--c);color:var(--so-green-3);border-color:#0000}.prompt{z-index:31;border-radius:var(--r-md);background:var(--so-gold);color:var(--so-green-3);cursor:pointer;border:none;align-items:center;gap:9px;padding:12px 20px;font-family:inherit;font-size:14px;font-weight:800;display:flex;position:fixed;bottom:110px;left:50%;transform:translate(-50%);box-shadow:0 8px 28px #0006}.prompt__key{background:var(--so-green-3);width:24px;height:24px;color:var(--so-gold);border-radius:6px;place-items:center;font-size:12px;font-weight:800;display:grid}.prompt--ibadah{background:var(--so-green);color:var(--so-cream)}.prompt--ibadah .prompt__key{background:var(--so-gold);color:var(--so-green-3)}.plabel--spot{padding:4px 11px;font-size:11px}.ctrlhint{z-index:28;letter-spacing:.4px;color:#f6f7f38c;text-shadow:0 1px 6px #0009;pointer-events:none;white-space:nowrap;font-size:11px;position:fixed;bottom:12px;left:50%;transform:translate(-50%)}.joy{z-index:32;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);touch-action:none;background:#0c2c2573;border:2px solid #f6f7f340;border-radius:50%;width:128px;height:128px;position:fixed;bottom:26px;left:22px}.joy__knob{background:linear-gradient(145deg,var(--so-gold),#e0af23);will-change:transform;border-radius:50%;width:54px;height:54px;margin:-27px 0 0 -27px;position:absolute;top:50%;left:50%;box-shadow:0 4px 14px #00000073,inset 0 2px 4px #fff6}.actbtn{z-index:32;width:74px;height:74px;color:var(--so-gold);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);touch-action:none;background:#123f34d9;border:2px solid #f6f7f34d;border-radius:50%;font-size:26px;position:fixed;bottom:44px;right:26px;box-shadow:0 6px 20px #0006}.actbtn:active{background:var(--so-green-2);transform:scale(.92)}.dlg__wrap{z-index:50;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#0c2c25b8;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.dlg{border-radius:var(--r-lg);background:var(--so-cream);width:min(480px,100%);color:var(--so-ink);text-align:center;border-top:6px solid var(--c);padding:clamp(24px,5vw,38px);box-shadow:0 30px 80px #00000080}.dlg__icon{background:color-mix(in srgb, var(--c) 18%, white);border:2px solid var(--c);border-radius:50%;place-items:center;width:66px;height:66px;margin:0 auto 14px;font-size:30px;display:grid}.dlg h2{font-family:var(--display);letter-spacing:-.02em;color:var(--so-green);margin:0 0 10px;font-size:clamp(1.4rem,4.5vw,1.85rem);font-weight:700}.dlg p{color:var(--so-muted);margin:0 0 22px;font-size:.95rem;line-height:1.7}.dlg__actions{flex-direction:column;align-items:center;gap:10px;display:flex}.dlg__go{border-radius:var(--r-md);background:var(--c);width:100%;color:var(--so-green-3);box-shadow:0 6px 20px color-mix(in srgb, var(--c) 40%, transparent);transition:transform .2s var(--ease), filter .2s;padding:14px 26px;font-size:14.5px;font-weight:800;text-decoration:none;display:inline-block}.dlg__go:hover{filter:brightness(1.06);transform:translateY(-2px)}.dlg__btn{border-radius:var(--r-md);color:var(--so-muted);cursor:pointer;background:0 0;border:none;padding:10px 22px;font-family:inherit;font-size:13px;font-weight:700;text-decoration:underline;transition:color .25s}.dlg__btn:hover{color:var(--so-green)}.plabel{background:var(--c);color:var(--so-green-3);font-family:var(--sans);letter-spacing:.3px;white-space:nowrap;pointer-events:none;border-radius:999px;padding:6px 14px;font-size:13px;font-weight:800;box-shadow:0 4px 16px #00000059}.menu{z-index:60;text-align:center;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:radial-gradient(80% 60% at 50% 30%,#1b55468c,#0000 70%),linear-gradient(#0c2c25e0,#0c2c25f5);place-items:center;padding:24px;display:grid;position:fixed;inset:0}.menu__eyebrow{letter-spacing:3px;color:var(--so-gold);margin:0 0 14px;font-size:11px;font-weight:700}.menu__title{font-family:var(--display);letter-spacing:-.02em;color:var(--so-cream);margin:0 0 18px;font-size:clamp(2.6rem,9vw,4.6rem);font-weight:700;line-height:1.05}.menu__title span{background:linear-gradient(95deg,var(--so-gold),var(--so-gold-2));color:#0000;-webkit-background-clip:text;background-clip:text}.menu__sub{color:#f6f7f3c7;max-width:440px;margin:0 auto 30px;font-size:clamp(.95rem,2.2vw,1.05rem);line-height:1.7}.menu__play{background:linear-gradient(95deg,var(--so-gold),#e8bb2e);color:var(--so-green-3);cursor:pointer;border:none;border-radius:999px;padding:16px 36px;font-family:inherit;font-size:16px;font-weight:800;box-shadow:0 12px 40px #fcd34d4d}.menu__hint{color:#f6f7f380;margin-top:20px;font-size:12px}.bubble{background:var(--so-cream);max-width:230px;color:var(--so-ink);font-family:var(--sans);text-align:center;white-space:normal;border:2px solid var(--so-green);width:max-content;animation:bubblePop .3s var(--ease);pointer-events:none;border-radius:14px;padding:10px 15px;font-size:13.5px;font-weight:700;line-height:1.45;position:relative;box-shadow:0 6px 22px #00000059}.bubble__tail{background:var(--so-cream);border-right:2px solid var(--so-green);border-bottom:2px solid var(--so-green);width:16px;height:16px;margin-left:-8px;position:absolute;bottom:-9px;left:50%;transform:rotate(45deg)}@keyframes bubblePop{0%{opacity:0;transform:translateY(8px)scale(.85)}to{opacity:1;transform:none}}.done{z-index:55;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#0c2c25cc;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.done__card{border-radius:var(--r-lg);background:var(--so-cream);width:min(500px,100%);color:var(--so-ink);text-align:center;border-top:6px solid var(--so-gold);padding:clamp(28px,6vw,44px);box-shadow:0 30px 90px #0000008c}.done__card h2{font-family:var(--display);color:var(--so-green);letter-spacing:-.02em;margin:8px 0 12px;font-size:clamp(1.6rem,5vw,2.2rem)}.done__card p{color:var(--so-muted);margin:0 0 24px;line-height:1.7}.done__stats{justify-content:center;gap:26px;margin-bottom:26px;display:flex}.done__stat{text-align:center}.done__stat b{color:var(--so-green);font-variant-numeric:tabular-nums;font-size:2rem;font-weight:800;display:block}.done__stat span{letter-spacing:1.4px;text-transform:uppercase;color:var(--so-muted);font-size:11px}.done__cta{border-radius:var(--r-md);background:var(--so-green);color:#fff;padding:15px 32px;font-size:15px;font-weight:800;text-decoration:none;transition:background .25s;display:inline-block}.done__cta:hover{background:var(--so-green-2)}.done__again{color:var(--so-muted);cursor:pointer;background:0 0;border:none;margin:14px auto 0;font-family:inherit;font-size:13px;text-decoration:underline;display:block}@media (prefers-reduced-motion:reduce){*{transition-duration:.001ms!important;animation-duration:.001ms!important}}