@font-face{font-family:Naskh;src:url(/engine/fonts/naskh-400.woff2) format("woff2");font-weight:400;font-display:block}
@font-face{font-family:Naskh;src:url(/engine/fonts/naskh-700.woff2) format("woff2");font-weight:700;font-display:block}
@font-face{font-family:UthmanicHafs;src:url(https://verses.quran.foundation/fonts/quran/hafs/uthmanic_hafs/UthmanicHafs1Ver18.woff2) format("woff2");font-display:swap}
:root{--ink:#2a2118;--cream:#fff7e6;--sun:#ffc94d;--leaf:#2f9e6e;--sea:#1d7fa6;--coral:#ef6a4c;--shadow:0 6px 0 rgba(60,40,10,.22),0 12px 26px rgba(30,20,0,.22)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#2a8fb0;color:var(--ink);font:600 20px/1.35 ui-rounded,"SF Pro Rounded","Baloo 2",-apple-system,system-ui,"Segoe UI",Roboto,sans-serif;touch-action:manipulation;-webkit-user-select:none;user-select:none}
#world{position:fixed;inset:0;z-index:0}#world canvas{display:block}
#app{position:fixed;inset:0;z-index:2;display:flex;flex-direction:column}
#rotate{display:none;position:fixed;inset:0;z-index:50;background:#17506a;color:#fff;align-items:center;justify-content:center;font-size:28px;text-align:center;padding:30px}
@media (orientation:portrait) and (max-width:900px){#rotate{display:flex}}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;touch-action:manipulation}
.ar{font-family:Naskh,"Noto Naskh Arabic",serif;direction:rtl;font-weight:400}
.btn{background:var(--sun);border-radius:22px;padding:14px 30px;box-shadow:var(--shadow);font-size:24px;transition:transform .12s}.btn:active{transform:translateY(4px) scale(.98)}
.btn.alt{background:var(--cream)}
.center{flex:1;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:20px;text-align:center;padding:20px}
.title{font-size:clamp(34px,5.4vw,60px);font-weight:800;color:#fff;text-shadow:0 4px 0 rgba(0,40,70,.35)}
.sub{color:#fff;font-size:24px;text-shadow:0 2px 0 rgba(0,40,70,.35)}
.pin{display:grid;grid-template-columns:repeat(6,minmax(66px,92px));gap:12px}.pin button{aspect-ratio:1;background:var(--cream);border-radius:20px;font-size:clamp(34px,5vw,48px);box-shadow:var(--shadow)}.pin button:active{transform:scale(.94)}
.dots{display:flex;gap:14px}.dots i{width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.4)}.dots i.on{background:var(--sun)}
.hud{display:flex;gap:10px;align-items:center;padding:12px 18px;position:relative;z-index:6}.chip{display:flex;gap:7px;align-items:center;background:var(--cream);border-radius:30px;padding:6px 16px;box-shadow:0 3px 0 rgba(60,40,10,.2);font-size:21px}.chip svg{width:26px;height:26px}.hud .sp{flex:1}.hud .week{color:#fff;font-weight:800;text-shadow:0 2px 0 rgba(0,40,70,.4)}
.iconbtn{background:var(--cream);border-radius:18px;padding:8px 16px;box-shadow:0 3px 0 rgba(60,40,10,.2)}
.map{position:relative;flex:1;min-height:0}
.stone{position:absolute;transform:translate(-50%,-50%);width:clamp(104px,14vw,158px);aspect-ratio:1;border-radius:50%;background:#d8d2c0;box-shadow:inset 0 -10px 0 rgba(0,0,0,.14),0 8px 0 rgba(50,40,20,.3);display:flex;align-items:center;justify-content:center;flex-direction:column;font-size:clamp(15px,1.8vw,19px);padding:10px;line-height:1.15;color:#6a6252}
.stone.done{background:#9fdcb8;color:#14503a}.stone.current{background:var(--sun);color:var(--ink);animation:glow 1.5s ease-in-out infinite}.stone .n{font-size:30px;font-weight:800}
@keyframes glow{0%,100%{box-shadow:inset 0 -10px 0 rgba(0,0,0,.14),0 8px 0 rgba(50,40,20,.3),0 0 0 0 rgba(255,235,150,.9)}50%{box-shadow:inset 0 -10px 0 rgba(0,0,0,.14),0 8px 0 rgba(50,40,20,.3),0 0 0 26px rgba(255,235,150,0)}}
.pathline{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.guide{position:fixed;left:14px;bottom:8px;z-index:8;display:flex;align-items:flex-end;gap:6px;pointer-events:none;max-width:calc(100vw - 28px)}
.bird{width:clamp(120px,16vw,190px);flex:none}
.caption{background:var(--cream);border-radius:22px 22px 22px 4px;padding:12px 20px;margin-bottom:64px;font-size:clamp(19px,2.2vw,25px);box-shadow:var(--shadow);max-width:56vw;opacity:0;transform:translateY(8px) scale(.97);transition:.2s}.caption.on{opacity:1;transform:none}
.bird .wing{transform-origin:45% 58%}.bird .crest{transform-origin:62% 34%;transition:transform .25s}.bird .beak{transform-origin:75% 41%}.bird .body{animation:bob 2.6s ease-in-out infinite;transform-origin:50% 90%}
@keyframes bob{50%{transform:translateY(-5px)}}
.bird.talk .beak{animation:talk .26s ease-in-out infinite alternate}@keyframes talk{to{transform:rotate(11deg)}}
.bird.happy .body{animation:hop .45s ease-in-out 3}.bird.happy .crest{transform:rotate(-14deg) scale(1.16)}.bird.happy .wing{animation:flap .18s ease-in-out infinite alternate}@keyframes hop{50%{transform:translateY(-34px)}}@keyframes flap{to{transform:rotate(-30deg)}}
.bird.think .crest{transform:rotate(9deg) scale(.86)}
.bird .lid{animation:blink 4.7s infinite;transform-origin:50% 28%;transform:scaleY(0)}@keyframes blink{0%,95%,100%{transform:scaleY(0)}97%{transform:scaleY(1)}}
#stage{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:6px 18px 110px}
.topbar{display:flex;align-items:center;gap:12px;padding:12px 18px;position:relative;z-index:7}.prog{flex:1;height:18px;background:rgba(255,255,255,.4);border-radius:12px;overflow:hidden}.prog i{display:block;height:100%;width:0;background:var(--sun);transition:width .4s}
.card-ar{background:var(--cream);border-radius:30px;box-shadow:var(--shadow);padding:6px 40px;font-size:clamp(90px,17vh,170px);line-height:1.5;min-width:220px;text-align:center}
.choices{display:flex;flex-wrap:wrap;gap:20px;justify-content:center;direction:rtl}
.choice{background:var(--cream);border-radius:26px;min-width:130px;min-height:120px;padding:4px 26px;box-shadow:var(--shadow);font-size:clamp(58px,10vh,88px);line-height:1.5;transition:transform .15s,opacity .2s}.choice:active{transform:translateY(4px)}
.choice.gone{opacity:.25;pointer-events:none}.choice.right{background:#9fe0b9;animation:pop .4s}.choice.wrong{animation:shake .4s}
@keyframes pop{40%{transform:scale(1.18)}}@keyframes shake{20%,60%{transform:translateX(-11px)}40%,80%{transform:translateX(11px)}}
.replay{width:84px;height:84px;border-radius:50%;background:var(--sun);box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center}.replay svg{width:44px;height:44px}
.done-star{width:clamp(110px,18vh,170px);animation:pop .6s}
.garden{position:fixed;inset:0;z-index:20;background:linear-gradient(#eaf4e6,#f7f2e1);display:flex;flex-direction:column;color:#26382f;font-weight:500;overflow:hidden}
.garden header{display:flex;align-items:center;gap:12px;padding:14px 22px}.garden h1{margin:0;font-size:26px;flex:1}.garden .body{flex:1;overflow-y:auto;padding:6px 26px 16px;-webkit-overflow-scrolling:touch;touch-action:pan-y}
.quran{font-family:UthmanicHafs,"Traditional Arabic",serif;direction:rtl;font-size:clamp(34px,5vw,50px);line-height:2.25;text-align:center;max-width:980px;margin:0 auto;font-weight:400}.quran span{display:inline-block;padding:0 6px;border-radius:9px;cursor:pointer;transition:background .15s}.quran span.on{background:#ffe9a8}.quran span.find{background:#d6ecd2}
.gbtn{background:#fff;border:2px solid #b8cdb4;border-radius:16px;padding:10px 22px;font-size:20px}.gbtn.p{background:#4f8a6a;border-color:#4f8a6a;color:#fff}.garden footer{display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:center;padding:10px 20px 14px}.credit{font-size:14px;color:#61756a;text-align:center;padding-bottom:8px}.meaning{min-height:34px;text-align:center;font-size:22px;color:#3d6049}
.book{flex:1;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:14px;padding:6px 20px 120px;touch-action:pan-y}.book button{background:var(--cream);border-radius:20px;padding:6px;box-shadow:var(--shadow);font-size:46px;line-height:1.7}.book button.mist{opacity:.55;background:#d9e0e6}.book button.gold{background:#ffe7a3}.book small{display:block;font:600 15px/1.2 system-ui,sans-serif}
.err{background:var(--cream);padding:16px 24px;border-radius:20px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.shelf{flex:1;display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:center;padding:10px 20px 120px}.prize{background:var(--cream);border-radius:26px;box-shadow:var(--shadow);padding:18px 26px;text-align:center;min-width:150px}.prize .i{font-size:54px;line-height:1.1}.prize .v{font-size:36px;font-weight:800}