:root{--ink:#1f3b32;--muted:#5d7068;--cream:#fffaf0;--cream2:#f4ecd9;--edge:#1d5c43;--gold:#a66d00;--sun:#ffd84d;--green:#2fbf71;--rukun:#ef5a5f;--wajib:#f5a524;--sunat:#2bb3a3;--fun:"Baloo 2", Poppins, "Segoe UI", sans-serif}*{box-sizing:border-box}html,body{height:100%;color:var(--ink);-webkit-user-select:none;user-select:none;background:#0a1330;margin:0;font-family:Poppins,Segoe UI,sans-serif;overflow:hidden}#app canvas{touch-action:none;display:block}.hidden{display:none!important}kbd{background:var(--ink);color:#fff;text-align:center;border-radius:7px;min-width:22px;padding:1px 7px;font:700 12px Poppins,sans-serif;display:inline-block;box-shadow:0 2px #0b1f18}button{font:700 15px var(--fun);color:var(--ink);background:linear-gradient(180deg, #fff, var(--cream2));border:3px solid var(--edge);cursor:pointer;box-shadow:0 4px 0 var(--edge);border-radius:16px;padding:7px 14px;transition:transform 80ms,box-shadow 80ms,filter .15s}button:hover{filter:brightness(1.05);box-shadow:0 5px 0 var(--edge);transform:translateY(-1px)}button:active{box-shadow:0 1px 0 var(--edge);transform:translateY(3px)}button.primary{color:#fff;text-shadow:0 1px #00000040;background:linear-gradient(#5ee09a,#22a35f);border-color:#146b3f;box-shadow:0 4px #146b3f}button.primary:hover{box-shadow:0 5px #146b3f}button.primary:active{box-shadow:0 1px #146b3f}.panel{background:var(--cream);border:3px solid var(--edge);border-radius:22px;position:absolute;box-shadow:0 6px #1d5c4380,0 14px 28px #00000040}.badge{font:800 12px var(--fun);letter-spacing:.04em;text-transform:uppercase;color:#3a2600;border:2px solid #0000002e;border-radius:20px;padding:2px 10px 1px;display:inline-block}.badge.rukun{background:var(--rukun);color:#fff}.badge.wajib{background:var(--wajib)}.badge.sunat{background:var(--sunat);color:#fff}#quest{width:350px;padding:12px 16px 14px;top:16px;left:16px}.q-top{font:700 13px var(--fun);color:#fff;background:var(--edge);border-radius:20px;padding:2px 12px 1px;display:inline-block}.q-title{font:800 20px/1.15 var(--fun);align-items:center;gap:8px;margin:8px 0 4px;display:flex}#q-desc{color:var(--muted);font-size:13px;line-height:1.45}#q-prog{font:700 14px var(--fun);margin-top:10px}#q-prog .bar{background:var(--cream2);border:2px solid var(--edge);border-radius:10px;height:16px;margin-bottom:4px;overflow:hidden}#q-prog .bar i{background:repeating-linear-gradient(-45deg,#43d083 0 10px,#2fbf71 10px 20px) 0 0/28px 28px;width:0;height:100%;transition:width .3s;animation:1s linear infinite stripes;display:block}@keyframes stripes{to{background-position:28px 0}}.q-row{justify-content:space-between;align-items:center;gap:8px;margin-top:10px;display:flex}.q-row button{margin-left:auto;padding:3px 10px;font-size:13px}#q-pebbles{font:700 14px var(--fun);background:var(--cream2);border:2px solid #d9c58e;border-radius:20px;padding:2px 10px}#mapbox{text-align:center;padding:10px;top:16px;right:16px}#minimap{border:4px solid var(--edge);cursor:pointer;border-radius:50%;width:180px;height:180px;display:block;box-shadow:inset 0 0 0 3px #fff}#mapbox .north{font:800 12px var(--fun);color:#fff;background:var(--rukun);border:2px solid var(--edge);border-radius:50%;width:22px;height:22px;line-height:21px;position:absolute;top:4px;left:50%;transform:translate(-50%)}#loc{font:700 13px var(--fun);background:var(--edge);color:#fff;border-radius:20px;max-width:180px;margin:8px auto 0;padding:2px 10px 1px}.map-btns{gap:6px;margin-top:8px;display:flex}.map-btns button{border-radius:12px;flex:1;padding:3px 6px;font-size:13px}#checklist{z-index:5;width:340px;max-height:calc(100vh - 32px);padding:14px 16px;top:16px;left:384px;overflow:auto}#checklist h3{font:800 19px var(--fun);color:var(--edge);margin:0 0 8px}#checklist ol{margin:0;padding-left:24px}#checklist li{border-radius:10px;margin:5px 0;padding:4px 6px;font-size:13px;line-height:1.3}#checklist li::marker{font:800 14px var(--fun);color:var(--edge)}#checklist li small{color:var(--muted);font-size:11px;display:block}#checklist li.done{opacity:.5;text-decoration:line-through}#checklist li.done::marker{content:"✔  ";color:var(--green)}#checklist li.now{box-shadow:inset 0 0 0 2px var(--sun);background:#fff1b8;font-weight:700}#checklist .legend{color:var(--muted);border-top:2px dashed #d9c58e;padding-top:8px;font-size:11px;line-height:1.5}#bacaan{width:430px;max-width:calc(100vw - 32px);padding:12px 16px;bottom:16px;left:16px}.b-title{font:800 12px var(--fun);color:#fff;background:var(--sunat);letter-spacing:.05em;text-transform:uppercase;border-radius:20px;padding:1px 10px 0;display:inline-block}.ar{text-align:right;color:#14563c;margin:4px 0;font-family:Amiri,Traditional Arabic,serif;font-size:26px;line-height:1.8}.rumi{color:#7a5a14;font-size:13px;font-style:italic}.maksud{color:var(--muted);margin-top:4px;font-size:12px;line-height:1.45}#prompt{background:var(--sun);border:3px solid var(--edge);box-shadow:0 5px 0 var(--edge);font:800 17px var(--fun);cursor:pointer;white-space:nowrap;border-radius:30px;padding:8px 20px 7px;animation:1.4s infinite hop;position:absolute;bottom:120px;left:50%;transform:translate(-50%)}@keyframes hop{0%,30%,to{transform:translate(-50%)}15%{transform:translate(-50%,-7px)}}#actions{flex-direction:column;align-items:flex-end;gap:10px;display:flex;position:absolute;bottom:16px;right:16px}#btn-bus{color:#fff;background:linear-gradient(#7cc8ff,#3a8ee6);border-color:#1d4f8a;box-shadow:0 4px #1d4f8a}#btn-throw{color:#fff;text-shadow:0 1px #0000004d;background:linear-gradient(#ffc061,#ff7b25);border-color:#9a3d00;padding:12px 22px;font-size:19px;box-shadow:0 5px #9a3d00}#toasts{pointer-events:none;flex-direction:column;align-items:center;gap:8px;width:min(520px,60vw);display:flex;position:absolute;top:16px;left:50%;transform:translate(-50%)}.toast{background:var(--cream);border:3px solid var(--edge);font:700 15px var(--fun);text-align:center;border-radius:18px;padding:6px 16px;transition:opacity .4s;animation:.45s cubic-bezier(.3,1.6,.5,1) pop;box-shadow:0 4px #1d5c4380}.toast.ok{background:#dcf8e7;border-color:#1f8a52}.toast.warn{background:#ffe3e3;border-color:#b8343a;box-shadow:0 4px #b8343a80}.toast.out{opacity:0}@keyframes pop{0%{opacity:0;transform:scale(.6)translateY(-8px)}}.overlay{z-index:20;background:#0a1e1973;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}.card{background:var(--cream);border:4px solid var(--edge);width:min(560px,100%);max-height:calc(100vh - 32px);box-shadow:0 8px 0 var(--edge), 0 24px 60px #00000073;border-radius:26px;padding:0 24px 22px;animation:.4s cubic-bezier(.3,1.5,.5,1) pop;overflow:auto}.card h2{background:linear-gradient(180deg, #2a8a60, var(--edge));color:#fff;font:800 23px/1.2 var(--fun);text-shadow:0 2px #00000040;border-bottom:4px solid var(--sun);margin:0 -24px 14px;padding:14px 24px 12px}.card .body{color:var(--ink);font-size:14px;line-height:1.6}.card .body ul,.card .body ol{margin:6px 0;padding-left:20px}.card .body h4{color:var(--edge);font:800 16px var(--fun);margin:12px 0 4px}.card .body .note{color:var(--muted);border-left:4px solid var(--sunat);padding-left:10px;font-size:13px}.card .body .niat{color:#14563c;font-style:italic;font-weight:600}.card .body table{border-collapse:collapse;width:100%;font-size:13px}.card .body td{border-bottom:2px dashed #e6dbc0;padding:5px 4px}.card .body td:last-child{text-align:right;font-weight:700}.bacaan-box{background:var(--cream2);border:2px dashed #d9c58e;border-radius:16px;margin-top:12px;padding:12px 14px}.bacaan-box:empty{display:none}.card .buttons{flex-wrap:wrap;justify-content:flex-end;gap:10px;margin-top:18px;display:flex}.card .buttons button{padding:8px 18px;font-size:16px}#modal .buttons button:first-child{color:#fff;background:linear-gradient(#5ee09a,#22a35f);border-color:#146b3f;box-shadow:0 4px #146b3f}#start{background:radial-gradient(at top,#28785a59,#030a08b3)}.start-card{text-align:center;width:min(620px,100%);padding-top:22px}.eyebrow{letter-spacing:.3em;font:800 13px var(--fun);color:#fff;background:var(--edge);border-radius:20px;padding:3px 14px 2px 18px;display:inline-block}.start-card h1{font:800 46px/1.05 var(--fun);color:var(--edge);text-shadow:0 3px 0 var(--sun), 0 6px 0 #1d5c4340;margin:8px 0}.lead{color:var(--ink);font-size:14px;line-height:1.6}.controls{color:var(--muted);text-align:left;background:var(--cream2);border:2px dashed #d9c58e;border-radius:16px;gap:6px;margin:16px 0;padding:12px 16px;font-size:13px;display:grid}.pick{font:800 17px var(--fun);margin:10px 0 0}.start-card .buttons{justify-content:center}.start-card .buttons button{padding:12px 24px;font-size:19px}.start-card .buttons button[data-gender=f]{background:linear-gradient(#ff9ccb,#e0569b);border-color:#8a2358;box-shadow:0 4px #8a2358}.disclaimer{color:var(--muted);margin-top:16px;font-size:11px}#fade{opacity:0;pointer-events:none;z-index:30;text-align:center;background:#050b09;justify-content:center;align-items:center;padding:24px;transition:opacity .6s;display:flex;position:fixed;inset:0}#fade.show{opacity:1;pointer-events:all}#fade p{font:600 21px/1.6 var(--fun);color:#efe6cf;max-width:560px}#joy{pointer-events:none;background:#1d5c4340;border:4px solid #fffaf0cc;border-radius:50%;width:110px;height:110px;display:none;position:absolute;transform:translate(-50%,-50%)}#joy i{background:var(--cream);border:3px solid var(--edge);border-radius:50%;width:46px;height:46px;margin:-23px;position:absolute;top:50%;left:50%}@media (width<=760px){#quest{width:calc(100vw - 160px);padding:10px 12px}.q-title{font-size:16px}#q-desc{display:none}#minimap{width:108px;height:108px}#mapbox{padding:6px}#loc{max-width:108px;font-size:11px}#checklist{width:calc(100vw - 32px);max-height:50vh;top:170px;left:16px}#bacaan{width:calc(100vw - 32px);padding:8px 12px;bottom:76px}.ar{font-size:19px}.maksud{display:none}#prompt{top:45%;bottom:auto}#toasts{width:80vw;top:auto;bottom:200px}}#hud{transition:opacity .5s}body.cine #hud{opacity:0;pointer-events:none}#cinema{z-index:25;pointer-events:none;position:fixed;inset:0}body.cine #cinema{pointer-events:all;cursor:pointer}#cinema .bar{background:#050b09;height:0;transition:height .7s cubic-bezier(.6,0,.3,1);position:absolute;left:0;right:0}#cinema .top{top:0}#cinema .bot{justify-content:flex-end;align-items:center;padding-right:22px;display:flex;bottom:0}body.cine #cinema .bar{height:11vh}#cinema .skip{color:#efe6cf8c;opacity:0;font-size:12px;transition:opacity .5s 1s}body.cine #cinema .skip{opacity:1}.title-card{text-align:center;color:#fff;opacity:0;text-shadow:0 3px 18px #0000008c,0 1px 3px #0009;transition:opacity .8s;position:absolute;top:15vh;left:0;right:0}body.cine .title-card{opacity:1}body.cine.cine-out .title-card{opacity:0;transition-duration:.6s}.title-card small{letter-spacing:.42em;color:#ffd45c;text-transform:uppercase;font-size:15px;font-weight:700;display:block}.title-card h1{letter-spacing:.02em;margin:6px 0 4px;font-size:clamp(38px,7vw,78px);font-weight:700;line-height:1.05}.title-card .rule{background:linear-gradient(90deg,#0000,#ffd45c,#0000);width:0;height:3px;margin:10px auto 12px;transition:width 1.1s cubic-bezier(.3,0,.2,1) .4s;display:block}body.cine .title-card .rule{width:min(420px,70vw)}.title-card p{color:#f6f1e4;margin:0;font-size:clamp(14px,2vw,19px);font-weight:600}body.cine .title-card h1,body.cine .title-card small,body.cine .title-card p{animation:1s cubic-bezier(.2,.7,.2,1) both cine-rise}body.cine .title-card small{animation-delay:.15s}body.cine .title-card h1{animation-delay:.3s}body.cine .title-card p{animation-delay:.7s}@keyframes cine-rise{0%{opacity:0;letter-spacing:.2em;transform:translateY(18px)}to{opacity:1;transform:none}}.title-card .ar-big{color:#ffe7a3;direction:rtl;margin-top:8px;font-family:Amiri,serif;font-size:clamp(26px,4vw,42px)}#modal{z-index:22}.quiz-num{font:800 12px var(--fun);color:#fff;background:var(--wajib);border-radius:20px;padding:1px 12px 0;display:inline-block}.quiz-q{font:800 20px/1.3 var(--fun);margin:8px 0 12px}.quiz-opts{gap:10px;display:grid}.quiz-opts button{text-align:left;font:700 16px/1.3 var(--fun);align-items:center;gap:12px;padding:10px 14px;display:flex}.quiz-opts button b{text-align:center;background:var(--edge);color:#fff;border-radius:50%;flex:none;width:30px;height:30px;font-size:15px;line-height:29px}.quiz-opts button:disabled{cursor:default;opacity:.6;transform:none}.quiz-opts button.right{opacity:1;background:linear-gradient(#8ff0b8,#43c97f);border-color:#146b3f;box-shadow:0 4px #146b3f}.quiz-opts button.wrong{opacity:1;background:linear-gradient(#ffb0b0,#ef5a5f);border-color:#8a2328;animation:.4s shake;box-shadow:0 4px #8a2328}@keyframes shake{25%{transform:translate(-6px)}50%{transform:translate(6px)}75%{transform:translate(-3px)}}.quiz-fb{font:800 17px var(--fun);margin-bottom:4px}.quiz-fb.ok{color:#1f8a52}.quiz-fb.no{color:#b8343a}.quiz-ex{font-size:14px;line-height:1.55}.start-card h1.small{font-size:34px}.step-grid{text-align:left;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px;margin:10px 0 14px;display:grid}.step-grid button{box-shadow:0 3px 0 var(--edge);padding:6px 10px;font-size:13px;line-height:1.25}.step-grid button b{text-align:center;background:var(--edge);color:#fff;border-radius:50%;width:20px;height:20px;margin-right:2px;font-size:12px;line-height:19px;display:inline-block}.step-grid button small{color:var(--muted);margin-top:2px;font:600 11px Poppins,sans-serif;display:block}.step-grid button.on{background:linear-gradient(180deg, #fff6c8, var(--sun))}.t-opts{text-align:left;background:var(--cream2);border:2px dashed #d9c58e;border-radius:16px;gap:8px;padding:12px 16px;font-size:14px;font-weight:600;display:grid}.t-opts input{vertical-align:-3px;width:18px;height:18px;accent-color:var(--edge);margin-right:6px}.t-row{flex-wrap:wrap;justify-content:center;gap:10px;margin-top:14px;display:flex}.t-row button{font-size:14px}#btn-teacher{color:#fff;background:linear-gradient(#e3c8ff,#a46be0);border-color:#5a2a8a;box-shadow:0 4px #5a2a8a}.teach-tip{background:#efe2ff;border-radius:10px;margin:0 0 8px;padding:6px 10px;font-size:12px}#checklist li.jump{cursor:pointer}#checklist li.jump:hover{background:#efe2ff}#quest,#mapbox,#bacaan{transition:width .35s,padding .35s,opacity .35s,transform .35s}#minimap{transition:width .35s,height .35s}body.hud-compact #q-desc,body.hud-compact .q-row,body.hud-compact .q-top{display:none}body.hud-compact #quest{opacity:.9;width:270px;padding:8px 14px}body.hud-compact .q-title{margin:0;font-size:16px}body.hud-compact #q-prog{margin-top:6px;font-size:12px}body.hud-compact #q-prog .bar{height:11px}body.hud-compact #mapbox{opacity:.9;padding:6px}body.hud-compact #minimap{border-width:3px;width:112px;height:112px}body.hud-compact #mapbox .map-btns,body.hud-compact #loc{display:none}body.hud-off #quest,body.hud-off #mapbox,body.hud-off #bacaan,body.hud-off #checklist{opacity:0;pointer-events:none;transform:translateY(-10px)}#hud-hint{opacity:.85;padding:4px 12px;font-size:13px;display:none;position:absolute;top:12px;right:12px}body.hud-off #hud-hint{display:block}.mod-pick{flex-wrap:wrap;justify-content:center;gap:10px;margin:8px 0 4px;display:flex}.mod-pick button{min-width:180px;padding:8px 18px;font-size:20px;line-height:1.15}.mod-pick button small{color:var(--muted);font:600 12px Poppins,sans-serif;display:block}.mod-pick button.on{background:linear-gradient(180deg, #fff6c8, var(--sun))}.menu{z-index:20;background:linear-gradient(#030a0866 0%,#030a0800 32% 50%,#030a0899 100%);position:fixed;inset:0;overflow:auto}.m-corner{z-index:2;gap:10px;display:flex;position:absolute;top:20px}.m-corner.left{left:20px}.m-corner.right{right:20px}.icon-btn{border-radius:18px;width:54px;height:54px;padding:0;font-size:24px}.icon-btn.install{background:linear-gradient(#7cc8ff,#3a8ee6);border-color:#1d4f8a;box-shadow:0 4px #1d4f8a}.m-logo{text-align:center;width:max-content;max-width:calc(100vw - 160px);position:absolute;top:22px;left:50%;transform:translate(-50%)}.m-logo h1{font:800 clamp(34px, 5.2vw, 66px)/1.05 var(--fun);letter-spacing:.01em;color:#fffaf0;-webkit-text-stroke:10px var(--edge);paint-order:stroke fill;text-shadow:0 6px #0f3a2a,0 10px 22px #00000080;margin:6px 0 0}.m-verse{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='rgba(255,215,120,0.16)'%3E%3Crect x='12' y='12' width='16' height='16'/%3E%3Crect x='12' y='12' width='16' height='16' transform='rotate(45 20 20)'/%3E%3C/g%3E%3C/svg%3E") 50%/30px,linear-gradient(#17634a,#0d3b2a);border:3px solid #e2b84f;border-radius:18px;align-items:center;gap:14px;margin-top:10px;padding:0 22px 4px;display:inline-flex;box-shadow:inset 0 0 0 2px #0d3b2a,inset 0 0 0 3px #ffde8c8c,0 5px #0a2c20,0 10px 24px #00000059}.m-verse .ar{background:linear-gradient(110deg,#d99a2b 0%,#ffe08a 35%,#fffbe6 50%,#ffe08a 65%,#d99a2b 100%) 0 0/250% 100%;color:#0000;filter:drop-shadow(0 2px #0006);-webkit-background-clip:text;background-clip:text;font:700 clamp(26px,2.8vw,36px)/1.55 Amiri,serif;animation:5s linear infinite verse-shine}@keyframes verse-shine{0%{background-position:100% 0}to{background-position:-150% 0}}.m-verse .orn{color:#e2b84f;text-shadow:0 0 10px #ffd26e99;font:400 24px Amiri,serif}.m-verse-tr{color:#fffaf0;text-shadow:0 1px 4px #000000e6,0 0 12px #00000080;margin-top:8px;font:italic 600 13px Poppins,sans-serif}.m-verse-tr b{color:#ffe08a;font-style:normal}.m-page{flex-direction:column;align-items:center;gap:14px;animation:.4s cubic-bezier(.3,1.5,.5,1) pop;display:flex;position:absolute;bottom:64px;left:0;right:0}.m-tiles{gap:26px;display:flex}.tile{width:min(300px,40vw);font:800 34px var(--fun);box-shadow:0 7px 0 var(--edge);border-width:4px;border-radius:26px;padding:16px 18px 12px;transition:transform .15s}.tile .ic{font-size:52px;line-height:1.05;display:block}.tile small{color:var(--muted);margin-top:2px;font:600 13px Poppins,sans-serif;display:block}.tile.on{background:linear-gradient(180deg, #fff6c8, var(--sun));outline-offset:4px;outline:5px solid #ffd84d99;transform:translateY(-6px)scale(1.04)}.m-lead{text-align:center;color:#fff;background:#0a1e198c;border-radius:14px;max-width:640px;margin:4px 16px 0;padding:6px 16px;font-size:14px;line-height:1.5}.play{background:linear-gradient(#fff3a6,#ffc928);border-width:4px;border-color:#8a5a00;border-radius:22px;padding:8px 52px 6px;font-size:34px;animation:2.2s ease-in-out infinite breathe;box-shadow:0 6px #8a5a00}.play:hover{box-shadow:0 7px #8a5a00}.play:active{box-shadow:0 1px #8a5a00}@keyframes breathe{50%{transform:scale(1.05)}}.m-foot{text-align:center;color:#ffffffbf;margin:0;padding:0 16px;font-size:11px;position:absolute;bottom:10px;left:0;right:0}#menu-2{top:196px;bottom:auto}.menu.p2 .m-verse-tr,.menu.p2 .m-foot{display:none}.menu.p2 .m-verse{transform-origin:50% 0;margin-top:6px;transform:scale(.82)}.m-steps{background:var(--cream);border:3px solid var(--edge);box-shadow:0 4px 0 var(--edge);font:700 15px var(--fun);border-radius:30px;align-items:center;gap:10px;padding:6px 14px;display:inline-flex}.m-steps i{text-align:center;background:var(--cream2);border:2px solid var(--edge);border-radius:50%;width:26px;height:26px;margin-right:4px;font-style:normal;line-height:24px;display:inline-block}.m-steps .done i{background:var(--green);color:#fff}.m-steps .now i{background:var(--sun)}.m-steps .line{background:var(--edge);opacity:.4;border-radius:3px;width:30px;height:3px}.m-box{text-align:center;background:var(--cream);border:4px solid var(--edge);width:min(820px,100vw - 32px);box-shadow:0 8px 0 var(--edge), 0 24px 60px #0006;border-radius:26px;padding:18px 28px 22px}.m-box h2{font:800 28px var(--fun);margin:0}.m-box>p{color:var(--muted);margin:2px 0 0;font-size:14px}.m-chars{justify-content:center;gap:26px;margin:14px 0 18px;display:flex}.ch{width:min(300px,40vw);box-shadow:0 6px 0 var(--edge);border-width:4px;border-radius:24px;padding:0 0 10px;overflow:hidden}.ch .img{--kaabah:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 220'%3E%3Cg fill='rgba(29,60,50,0.16)'%3E%3Crect x='18' y='40' width='12' height='160' rx='3'/%3E%3Cpath d='M14 44 L24 14 L34 44 Z'/%3E%3Crect x='270' y='40' width='12' height='160' rx='3'/%3E%3Cpath d='M266 44 L276 14 L286 44 Z'/%3E%3C/g%3E%3Cpath d='M70 82 L140 64 L240 78 L172 98 Z' fill='rgba(20,24,28,0.22)'/%3E%3Cpath d='M70 82 L172 98 L172 206 L70 190 Z' fill='rgba(20,24,28,0.3)'/%3E%3Cpath d='M172 98 L240 78 L240 186 L172 206 Z' fill='rgba(20,24,28,0.4)'/%3E%3Cpath d='M70 102 L172 118 L172 127 L70 111 Z' fill='rgba(214,170,60,0.7)'/%3E%3Cpath d='M172 118 L240 98 L240 107 L172 127 Z' fill='rgba(180,140,45,0.7)'/%3E%3Cpath d='M126 150 L146 153 L146 196 L126 193 Z' fill='rgba(214,170,60,0.55)'/%3E%3C/svg%3E");--glow:radial-gradient(circle at 50% 78%, #fffbe8 0%, #c9efdb 55%, #8fd3b6 100%);border-bottom:4px solid var(--edge);background:var(--kaabah) 50% 100% / auto 94% no-repeat, var(--glow);height:220px;display:block;position:relative;overflow:hidden}.ch[data-pick=f] .img{--glow:radial-gradient(circle at 50% 78%, #fffbe8 0%, #f7d9e8 55%, #e7a9c8 100%)}.ch .img img{height:100%;transition:transform .25s;position:absolute;bottom:-2px;left:50%;transform:translate(-50%)}.ch:hover .img img,.ch.on .img img{transform-origin:50% 100%;transform:translate(-50%)scale(1.06)}.ch b{font:800 23px var(--fun);margin-top:6px;display:block}.ch small{color:var(--muted);font:600 12px Poppins,sans-serif}.ch.on{background:linear-gradient(180deg, #fff6c8, var(--sun));outline-offset:3px;outline:6px solid #ffd84dd9;transform:translateY(-4px)}.ch.on b:before{content:"✔ ";color:#1f8a52}.m-nav{justify-content:space-between;align-items:center;display:flex}#btn-go{padding:8px 32px;font-size:22px}@media (width<=760px),(height<=560px){.m-logo{top:12px}.m-logo .eyebrow{display:none}.m-page{gap:10px;bottom:40px}.tile{padding:10px;font-size:24px}.tile .ic{font-size:36px}.m-lead{display:none}.play{padding:6px 36px 4px;font-size:26px}#menu-2{top:96px}.m-box{padding:12px 16px 14px}.m-box>p{display:none}.ch .img{height:140px}.m-chars{gap:14px;margin:8px 0 12px}.icon-btn{width:44px;height:44px;font-size:20px}}@media (height<=560px){.m-verse,.m-verse-tr,.m-foot{display:none}#menu-2{gap:8px;top:64px}.m-steps{padding:3px 10px;font-size:13px}.m-box h2{font-size:20px}.ch .img{height:118px}.ch b{margin-top:2px;font-size:18px}.ch small{display:none}.m-chars{margin:6px 0 8px}#btn-go{padding:4px 22px;font-size:18px}}.mistake{background:#fff1f1;border:2px dashed #e08a8e;border-radius:14px;padding:4px 14px}.say{flex-wrap:wrap;gap:8px;margin-top:8px;display:flex}.say button{box-shadow:0 3px 0 var(--edge);border-radius:12px;padding:3px 12px;font-size:13px}.say button.on{background:linear-gradient(180deg, #fff6c8, var(--sun));animation:1.2s ease-in-out infinite breathe}.bc .w{border-radius:6px;transition:background .15s,color .15s}.bc .w.on{background:var(--sun);color:#0d3b2a;box-shadow:0 0 0 3px var(--sun)}.maksud .w.on{box-shadow:0 0 0 2px var(--sun)}.m-student{flex-wrap:wrap;justify-content:center;gap:12px;margin:10px 0 0;display:flex}.m-student label{font:700 15px var(--fun);align-items:center;gap:8px;display:flex}.m-student input{border:3px solid var(--edge);width:170px;color:var(--ink);background:#fff;border-radius:12px;padding:5px 10px;font:500 15px Poppins,sans-serif}.m-student input:focus{outline:3px solid var(--sun)}.pantau-pill{max-width:180px;font:700 12px var(--fun);color:#8a2328;background:#f1d4d4;border-radius:20px;margin:6px auto 0;padding:1px 10px 0}.pantau-pill.ok{color:#146b3f;background:#c9f3dc}body.hud-compact .pantau-pill{display:none}@media (height<=560px){.m-student{gap:8px;margin-top:4px}.m-student input{width:130px;padding:2px 8px;font-size:13px}}.m-box:has(.m-student:not(.hidden)) .ch .img{height:175px}.m-box:has(.m-student:not(.hidden)) .m-chars{margin:10px 0 14px}@media (height<=560px){.m-box:has(.m-student:not(.hidden)) .ch .img{height:92px}.m-box:has(.m-student:not(.hidden)) .m-chars{margin:4px 0 6px}}.guru-btn{border-radius:18px;align-items:center;gap:6px;height:54px;padding:0 16px;font-size:22px;display:flex}.guru-btn span{font:800 16px var(--fun)}.pantau-card{text-align:left;color:var(--ink);background:linear-gradient(#e3f2ff,#b9dcff);border:3px solid #1d4f8a;border-radius:20px;align-items:center;gap:14px;margin:8px 0 4px;padding:12px 16px;text-decoration:none;transition:transform .1s;display:flex;box-shadow:0 5px #1d4f8a}.pantau-card:hover{transform:translateY(-2px)}.pantau-card .ic{font-size:38px}.pantau-card b{font:800 20px var(--fun);color:#1d4f8a;display:block}.pantau-card small{color:#33506e;font:500 13px Poppins,sans-serif}.pantau-card .go{font:800 16px var(--fun);color:#fff;white-space:nowrap;background:#3a8ee6;border-radius:12px;margin-left:auto;padding:4px 12px}.t-sec{font:800 18px var(--fun);color:var(--edge);border-top:2px dashed #d9c58e;margin:18px 0 2px;padding-top:14px}@media (width<=760px),(height<=560px){.guru-btn{height:44px;padding:0 10px;font-size:18px}.guru-btn span{display:none}}.kuiz-card{background:linear-gradient(#fff8dc,#ffe39a);border-color:#8a5a00;box-shadow:0 5px #8a5a00}.kuiz-card b{color:#7a4b00}.kuiz-card small{color:#6b5520}.kuiz-card .go{background:#e09b00}.m-student select{border:3px solid var(--edge);width:190px;color:var(--ink);background:#fff;border-radius:12px;padding:5px 8px;font:600 15px Poppins,sans-serif}.m-student select:focus{outline:3px solid var(--sun)}@media (height<=560px){.m-student select{width:150px;padding:2px 6px;font-size:13px}}.murid-card{background:linear-gradient(#f3e8ff,#dcc4fb);border-color:#5a2a8a;box-shadow:0 5px #5a2a8a}.murid-card b{color:#4a1f75}.murid-card small{color:#563a73}.murid-card .go{background:#8a4fd0}