:root{--navy:#123f84;--blue:#1597f6;--yellow:#ffc928;--panel:#fffffff2;--shadow:0 24px 70px #235f8f2b}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{font-family:Tahoma,Arial,sans-serif;color:var(--navy);background:#d7f2ff;user-select:none}button{font:inherit}button:focus{outline:none}
#app,.home-screen,.quiz-screen{position:fixed;inset:0}.home-screen{overflow:hidden;background:radial-gradient(circle at 50% 45%,#f6fbff 0,#d7f2ff 62%,#cfeafb 100%)}
.home-stage{position:absolute;left:50%;top:50%;width:min(100vw,177.6833vh);aspect-ratio:1672/941;transform:translate(-50%,-50%);transition:opacity .36s ease,transform .42s cubic-bezier(.2,.8,.2,1),filter .36s ease;overflow:hidden}
.home-art{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:contain;pointer-events:none;-webkit-user-drag:none}
.child-hitboxes{position:absolute;inset:0;direction:ltr}.child-hitbox{position:absolute;border:4px solid transparent;border-radius:30%;background:transparent;padding:0;cursor:pointer;transition:border-color .18s,box-shadow .18s,background .18s,transform .18s}
.child-hitbox[data-slot="bishr"]{left:6.3%;top:13.8%;width:17.4%;height:69.8%}.child-hitbox[data-slot="taleen"]{left:24.6%;top:21.2%;width:15.7%;height:62.7%}.child-hitbox[data-slot="tala"]{left:41.9%;top:23.8%;width:16.4%;height:60.4%}.child-hitbox[data-slot="wid"]{left:59.3%;top:21.1%;width:15.8%;height:63.1%}.child-hitbox[data-slot="sanad"]{left:76.7%;top:40.3%;width:17.5%;height:44.2%}
.child-hitbox.focused{border-color:#ffffffdd;background:#fff1;box-shadow:0 0 0 6px #ffd83ca6,0 0 34px 14px #ffe979a3,inset 0 0 28px #fff7;transform:scale(1.018)}
body.quiz-mode .home-stage{opacity:.08;filter:blur(2px);transform:translate(-50%,-50%) scale(1.025)}body.quiz-mode .child-hitboxes{pointer-events:none}
.quiz-screen{display:grid;place-items:center;opacity:0;pointer-events:none;background:linear-gradient(145deg,#e1f7fff2,#fff7e9f5);transition:opacity .34s ease;z-index:10}.quiz-mode .quiz-screen{opacity:1;pointer-events:auto}
.quiz-card{width:min(900px,82vw);min-height:min(680px,76vh);padding:3.2vh 4vw;border-radius:42px;background:linear-gradient(145deg,#fffffff5,#eff9fff5);border:5px solid #fff;box-shadow:var(--shadow);transform:translateY(22px) scale(.975);transition:transform .42s cubic-bezier(.2,.8,.2,1)}
.quiz-mode .quiz-card{transform:none}.quiz-head{display:flex;justify-content:space-between;gap:20px;align-items:center;font-size:clamp(18px,1.65vw,28px);font-weight:900;color:var(--navy)}#quizWho{padding:.55em 1.1em;border-radius:999px;background:#fff0a8;box-shadow:inset 0 0 0 2px #fff}
.progress-dots{direction:ltr;display:flex;justify-content:center;gap:.7vw;margin:1.5vh 0 2vh}.progress-dots i{display:block;width:clamp(12px,1.1vw,19px);height:clamp(12px,1.1vw,19px);border-radius:50%;background:#d7e1eb}.progress-dots i.done{background:#33c178}.progress-dots i.current{background:#12a5f8;box-shadow:0 0 0 5px #59cfff45}
.question-icon{text-align:center;font-size:clamp(42px,4vw,70px);margin-bottom:.7vh}.quiz-card h2{margin:0 auto 3vh;max-width:92%;min-height:12vh;display:flex;align-items:center;justify-content:center;text-align:center;font-size:clamp(30px,3.35vw,58px);line-height:1.3;color:#0d3479}
.answers{display:flex;direction:rtl;gap:2vw;justify-content:center}.answer{width:42%;padding:1.6vh 1vw;border-radius:30px;border:4px solid transparent;background:#f9d8eb;color:#173b78;font-size:clamp(30px,2.8vw,48px);font-weight:900;box-shadow:0 9px 20px #4c6e9120;transition:.18s}.answer:first-child{background:#cfeeff}.answer.active{border-color:#fff;background:linear-gradient(#1eb4ff,#008cf0);color:#fff;box-shadow:0 0 0 6px #5bd3ff88,0 12px 30px #008dda4c;transform:translateY(-4px)}
.score-pill{display:table;margin:2.2vh auto 0;padding:.8vh 2vw;border-radius:999px;background:#fff0aa;font-size:clamp(17px,1.6vw,27px);font-weight:900}.question-help{text-align:center;margin-top:1.3vh;color:#5d6d84;font-size:clamp(13px,1.15vw,19px);font-weight:700}
.back-btn{position:absolute;left:2.5vw;bottom:3vh;padding:1vh 1.8vw;border:0;border-radius:999px;background:#ffffffee;color:var(--navy);font-size:clamp(17px,1.5vw,24px);font-weight:900;box-shadow:0 7px 20px #406b9224;cursor:pointer}
.reward-overlay{position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;background:#15304b70;backdrop-filter:blur(12px);opacity:0;pointer-events:none;transition:.3s}.reward-overlay.show{opacity:1;pointer-events:auto}
.reward-card{width:min(700px,86vw);padding:5vh 4vw;text-align:center;background:#fff;border:7px solid #fff8cc;border-radius:48px;box-shadow:0 30px 100px #13263d66;transform:scale(.72);transition:.4s cubic-bezier(.1,1.35,.3,1)}.reward-overlay.show .reward-card{transform:scale(1)}
.reward-icons{font-size:clamp(55px,7vw,105px)}.reward-card h2{font-size:clamp(40px,5vw,75px);color:#087fe0;margin:1vh 0}.reward-card p{font-size:clamp(23px,2.4vw,37px);line-height:1.5;margin:1vh 0;color:#334d6f;font-weight:800}.reward-score{font-size:clamp(22px,2.2vw,34px);font-weight:900;color:#e39a00;margin:2vh}.reward-card button{border:0;border-radius:999px;background:linear-gradient(#20afff,#0086e8);color:#fff;font-size:26px;font-weight:900;padding:1.2vh 4vw;box-shadow:0 10px 25px #008bd84c;cursor:pointer}
.confetti:before,.confetti:after{content:"★  ●  ★  ◆  ●  ★  ●  ◆  ★";position:absolute;left:5vw;right:5vw;top:8vh;font-size:34px;color:#ffd029;word-spacing:5vw;animation:float 1.8s ease-in-out infinite alternate}.confetti:after{top:auto;bottom:8vh;color:#ff77b9;animation-delay:-.8s}@keyframes float{to{transform:translateY(15px) rotate(2deg)}}
.toast{position:fixed;left:50%;bottom:4vh;transform:translate(-50%,30px);padding:1.1vh 2vw;background:#15395bea;color:#fff;border-radius:999px;font-weight:800;opacity:0;transition:.25s;z-index:50}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-height:720px){.quiz-card{min-height:78vh;padding-top:2.4vh;padding-bottom:2.4vh}.question-icon{font-size:42px}.quiz-card h2{min-height:9vh;margin-bottom:2vh}.score-pill{margin-top:1.5vh}}
@media(max-width:800px){.quiz-card{width:90vw;min-height:74vh;padding:2.5vh 4vw}.question-help{display:none}.back-btn{left:3vw}.child-hitbox.focused{box-shadow:0 0 0 4px #ffd83ca6,0 0 22px 8px #ffe979a3,inset 0 0 18px #fff7}}
@media(prefers-reduced-motion:reduce){.home-stage,.quiz-screen,.quiz-card,.child-hitbox,.reward-card{transition:none}.confetti:before,.confetti:after{animation:none}}