/* عالم الصغار — a bright game world for grades 1–4. */
:root{--ink:#22314A;--blue:#4FB3E8;--deep:#2A6FB0;--sun:#FFC83D;--pink:#FF6B9A;--green:#3DC47E;--purple:#8B6CF0;--orange:#FF8A3D;--card:#FFFFFF;--shadow:0 8px 0 rgba(34,49,74,.15)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%}
body{font-family:"Baloo Bhaijaan 2","Alexandria",Tahoma,sans-serif;color:var(--ink);background:linear-gradient(#7FD0F5 0%,#BDE9FF 55%,#E9F8FF 100%);overflow-x:hidden;min-height:100vh}
.sky{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.sun{position:absolute;top:28px;left:34px;width:86px;height:86px;border-radius:50%;background:radial-gradient(circle,#FFE680,#FFC83D);box-shadow:0 0 60px 20px rgba(255,214,90,.55);animation:spin 30s linear infinite}
.cloud{position:absolute;width:150px;height:46px;background:#fff;border-radius:40px;opacity:.9;animation:drift linear infinite}
.cloud::before,.cloud::after{content:"";position:absolute;background:#fff;border-radius:50%}
.cloud::before{width:64px;height:64px;top:-30px;left:24px}.cloud::after{width:48px;height:48px;top:-20px;right:26px}
.c1{top:110px;animation-duration:60s}.c2{top:220px;animation-duration:85s;animation-delay:-30s;transform:scale(.7)}.c3{top:60px;animation-duration:110s;animation-delay:-60s;transform:scale(1.2)}
@keyframes drift{from{right:-200px}to{right:110%}}
@keyframes spin{to{transform:rotate(360deg)}}
.k-top{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:10px;padding:10px 14px;background:rgba(255,255,255,.75);backdrop-filter:blur(6px)}
.k-home img{display:block;border-radius:10px}
.k-hud{flex:1;display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;gap:6px;background:#fff;border-radius:999px;padding:5px 14px;font-weight:800;font-size:16px;box-shadow:0 3px 0 rgba(34,49,74,.12)}
.k-sound{border:0;background:#fff;border-radius:50%;width:42px;height:42px;font-size:20px;cursor:pointer;box-shadow:0 3px 0 rgba(34,49,74,.12)}
.k-game{position:relative;z-index:1;max-width:980px;margin:0 auto;padding:18px 14px 60px}
.title{font-family:Alexandria,sans-serif;font-weight:900;text-align:center;font-size:clamp(30px,7vw,54px);margin:16px 0 4px;color:#fff;-webkit-text-stroke:2px var(--deep);paint-order:stroke fill;text-shadow:0 4px 0 var(--deep),0 8px 18px rgba(42,111,176,.35)}
.sub{text-align:center;font-size:19px;margin:0 0 18px;font-weight:600}
.big-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-weight:800;font-size:22px;border:0;border-radius:22px;padding:14px 30px;cursor:pointer;color:#fff;background:var(--green);box-shadow:0 7px 0 #2A9A60;transition:transform .1s}
.big-btn:active{transform:translateY(5px);box-shadow:0 2px 0 #2A9A60}
.big-btn.blue{background:var(--blue);box-shadow:0 7px 0 var(--deep)}.big-btn.pink{background:var(--pink);box-shadow:0 7px 0 #D04477}.big-btn.sm{font-size:17px;padding:10px 20px}
.center{text-align:center}
.panel{background:var(--card);border-radius:28px;padding:22px;box-shadow:var(--shadow);margin:0 auto 18px;max-width:640px}
.avatars{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin:12px 0}
.avatars button{font-size:40px;border:4px solid transparent;background:#F2F8FF;border-radius:20px;padding:8px 0;cursor:pointer;transition:transform .15s}
.avatars button:hover{transform:scale(1.08)}.avatars button[aria-pressed="true"]{border-color:var(--sun);background:#FFF6D6;transform:scale(1.1)}
.name-in{font:inherit;font-size:22px;font-weight:700;text-align:center;width:100%;border:3px solid #D7E8F7;border-radius:18px;padding:10px;margin:6px 0 14px;color:var(--ink)}
.grades{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.grades button{font:inherit;font-weight:800;font-size:20px;border:0;border-radius:20px;padding:16px 4px;cursor:pointer;color:#fff;box-shadow:0 6px 0 rgba(0,0,0,.18)}
.islands{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px;margin-top:10px}
.island{position:relative;border:0;cursor:pointer;font:inherit;background:none;padding:0;text-align:center;animation:bob 3s ease-in-out infinite}
.island:nth-child(2){animation-delay:-.6s}.island:nth-child(3){animation-delay:-1.2s}.island:nth-child(4){animation-delay:-1.8s}.island:nth-child(5){animation-delay:-2.4s}
.island .land{width:100%;aspect-ratio:1.25;border-radius:50% 50% 46% 46%/55% 55% 45% 45%;display:grid;place-items:center;font-size:64px;box-shadow:inset 0 -14px 0 rgba(0,0,0,.12),0 12px 0 #3E9DD6;position:relative}
.island b{display:inline-block;margin-top:14px;background:#fff;border-radius:999px;padding:6px 16px;font-size:19px;box-shadow:0 4px 0 rgba(34,49,74,.12)}
.island small{display:block;margin-top:6px;font-weight:700;color:var(--deep)}
@keyframes bob{50%{transform:translateY(-8px)}}
.path{position:relative;margin:10px auto;max-width:520px;padding:10px 0 40px}
.station{position:relative;display:flex;align-items:center;gap:12px;margin:0 0 26px;width:72%;cursor:pointer;border:0;background:none;font:inherit;text-align:start;color:var(--ink)}
.station:nth-child(odd){margin-inline-start:28%}
.station .node{flex:none;width:76px;height:76px;border-radius:50%;display:grid;place-items:center;font-size:30px;font-weight:900;color:#fff;background:var(--blue);box-shadow:0 7px 0 var(--deep);transition:transform .15s}
.station:hover .node{transform:scale(1.08)}
.station.done .node{background:var(--green);box-shadow:0 7px 0 #2A9A60}.station.next .node{background:var(--orange);box-shadow:0 7px 0 #C9601F;animation:pulse 1.4s infinite}
@keyframes pulse{50%{transform:scale(1.1)}}
.station .lbl{background:#fff;border-radius:18px;padding:8px 14px;box-shadow:0 4px 0 rgba(34,49,74,.1);font-weight:700;font-size:16px;line-height:1.5}
.station .stars{display:block;font-size:15px;letter-spacing:2px}
.station .me{position:absolute;top:-30px;inset-inline-start:18px;font-size:40px;animation:bob 1.6s ease-in-out infinite}
/* play */
.prog{position:relative;height:22px;background:#fff;border-radius:999px;margin:4px 0 18px;box-shadow:inset 0 3px 0 rgba(0,0,0,.06)}
.prog i{position:absolute;inset-block:0;inset-inline-start:0;border-radius:999px;background:linear-gradient(90deg,var(--green),#7BE0A7);transition:width .5s}
.prog .runner{position:absolute;top:-22px;font-size:34px;transition:inset-inline-start .5s;transform:translateX(50%)}
.q-card{background:#fff;border-radius:30px;padding:20px;box-shadow:var(--shadow);text-align:center;animation:pop .35s ease}
@keyframes pop{from{transform:scale(.85);opacity:0}}
.q-text{font-family:Alexandria,sans-serif;font-weight:800;font-size:clamp(20px,4.6vw,28px);line-height:1.6;margin:4px 0 14px}
.speak{border:0;background:#EAF6FF;border-radius:999px;padding:6px 14px;font:inherit;font-weight:700;cursor:pointer;margin-bottom:10px}
.v{margin:0 auto 14px;max-width:420px;border-radius:20px;background:#EAF6FF;padding:10px}.v svg{width:100%;height:auto;display:block;max-height:240px}.v .cap{font-size:13px;margin-top:4px}
.v-ctrl{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-top:6px}.v-ctrl button,.v-ctrl label{font:inherit;border:0;border-radius:999px;padding:4px 12px;background:#fff}
.v-table{margin:0 auto;border-collapse:collapse;background:#fff}.v-table th,.v-table td{border:2px solid #D7E8F7;padding:6px 10px}
/* balloons */
.balloons{position:relative;height:360px;overflow:hidden;border-radius:24px;background:linear-gradient(#DFF4FF,#fff)}
.balloon{position:absolute;bottom:-150px;width:140px;border:0;background:none;cursor:pointer;font:inherit;animation:rise linear forwards}
.balloon .b{position:relative;margin:0 auto;width:120px;height:146px;border-radius:50% 50% 46% 46%/45% 45% 55% 55%;display:grid;place-items:center;padding:12px;color:#fff;font-weight:800;font-size:17px;line-height:1.35;box-shadow:inset -10px -14px 0 rgba(0,0,0,.12)}
.balloon .b::after{content:"";position:absolute;bottom:-10px;left:50%;margin-left:-8px;border:8px solid transparent;border-top-color:inherit}
.balloon .s{display:block;margin:0 auto;width:2px;height:60px;background:#9AA9BF}
.balloon.popped{animation:none!important;visibility:hidden}
@keyframes rise{to{transform:translateY(-560px)}}
/* tf race */
.tf{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.tf button{font:inherit;font-size:30px;font-weight:900;border:0;border-radius:26px;padding:22px 0;cursor:pointer;color:#fff;box-shadow:0 8px 0 rgba(0,0,0,.18)}
/* memory */
.mem{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;perspective:800px;max-width:520px;margin:0 auto}
.card{position:relative;aspect-ratio:3/4;border:0;background:none;padding:0;cursor:pointer;transform-style:preserve-3d;transition:transform .4s;font:inherit}
.card.up,.card.got{transform:rotateY(180deg)}
.card .f,.card .bk{position:absolute;inset:0;border-radius:18px;display:grid;place-items:center;backface-visibility:hidden;padding:6px;font-weight:800;font-size:15px;line-height:1.35}
.card .bk{background:repeating-linear-gradient(45deg,var(--purple),var(--purple) 10px,#9E86F5 10px,#9E86F5 20px);color:#fff;font-size:30px;box-shadow:0 5px 0 #6249C4}
.card .f{background:#fff;border:4px solid #D7E8F7;transform:rotateY(180deg)}
.card.got .f{border-color:var(--green);background:#E6FAEF}
/* order */
.slots{display:grid;gap:8px;margin-bottom:12px}
.slot{min-height:54px;border:3px dashed #BFD8EE;border-radius:16px;display:flex;align-items:center;gap:10px;padding:6px 12px;font-weight:800;font-size:17px;background:#F8FCFF}
.slot b{flex:none;width:34px;height:34px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center}
.slot.filled{border-style:solid;border-color:var(--blue);background:#fff}
.tiles{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.tile{font:inherit;font-weight:800;font-size:16px;border:0;border-radius:16px;padding:10px 16px;cursor:pointer;background:var(--sun);color:var(--ink);box-shadow:0 5px 0 #D9A21E}
.feedback{position:fixed;inset:auto 0 0;z-index:20;padding:18px 18px 26px;text-align:center;font-weight:800;font-size:22px;color:#fff;transform:translateY(110%);transition:transform .3s}
.feedback.show{transform:none}.feedback.ok{background:var(--green)}.feedback.no{background:var(--orange)}
.feedback p{margin:6px auto 12px;max-width:640px;font-size:16px;font-weight:600}
.burst{position:fixed;inset:0;pointer-events:none;z-index:30}
.end{text-align:center}
.end .stars-big{font-size:64px;letter-spacing:6px;margin:8px 0}
.end .stars-big span{display:inline-block;animation:starIn .5s both}.end .stars-big span:nth-child(2){animation-delay:.3s}.end .stars-big span:nth-child(3){animation-delay:.6s}
@keyframes starIn{from{transform:scale(0) rotate(-90deg)}}
.badge{display:inline-block;background:#FFF6D6;border:3px solid var(--sun);border-radius:20px;padding:8px 16px;font-weight:800;margin:6px}
.back{border:0;background:#fff;border-radius:999px;padding:8px 16px;font:inherit;font-weight:800;cursor:pointer;box-shadow:0 4px 0 rgba(34,49,74,.12)}
@media (max-width:560px){.avatars{grid-template-columns:repeat(3,1fr)}.grades{grid-template-columns:1fr 1fr}.mem{grid-template-columns:repeat(3,1fr)}.station{width:86%}.station:nth-child(odd){margin-inline-start:14%}}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}.balloon{bottom:10px}}