/* ==== سنا الصغيرة · tokens ==== */
:root{
  --primary:#4F46E5; --primary-soft:#818CF8; --accent:#EA580C;
  --bg:#EEF2FF; --bg-2:#FFF7ED; --ink:#1E1B4B; --ink-soft:#4B4A7A;
  --muted:#EBEEF8; --border:#C7D2FE;
  --green:#16A34A; --green-soft:#86EFAC; --red:#DC2626;
  --sun:#FBBF24; --sky:#38BDF8; --rose:#F472B6; --grape:#A855F7; --mint:#34D399;
  --r-lg:34px; --r-md:26px; --r-sm:18px;
  --clay: 0 10px 0 rgba(30,27,75,.10), 0 18px 28px rgba(79,70,229,.16);
  --clay-in: inset 0 6px 12px rgba(255,255,255,.75), inset 0 -8px 14px rgba(30,27,75,.10);
  --shadow-soft: 0 16px 34px rgba(79,70,229,.15);
  --font-display:'Baloo Bhaijaan 2','Tajawal',system-ui,sans-serif;
  --font-body:'Tajawal','Baloo Bhaijaan 2',system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;}
body{
  font-family:var(--font-body); color:var(--ink); background:var(--bg);
  min-height:100dvh; overflow-x:hidden; -webkit-tap-highlight-color:transparent;
  background-image:
    radial-gradient(1000px 520px at 12% -8%, #FFFFFF 0%, rgba(255,255,255,0) 60%),
    radial-gradient(760px 420px at 90% 0%, #FFE9D6 0%, rgba(255,233,214,0) 62%),
    linear-gradient(180deg,#EEF2FF 0%, #F5F3FF 45%, #FFF7ED 100%);
}
h1,h2,h3,strong,button,.prompt-title{font-family:var(--font-display);}
button{font:inherit;color:inherit;}
:focus-visible{outline:4px solid var(--accent); outline-offset:3px; border-radius:14px;}

/* ==== decorative blobs ==== */
.decor{position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:0;}
.blob{position:absolute; border-radius:50%; filter:blur(2px); opacity:.5;}
.b1{width:190px;height:190px;background:#DDD6FE;top:-40px;left:-50px;animation:drift 18s ease-in-out infinite;}
.b2{width:120px;height:120px;background:#FDE68A;bottom:8%;right:-30px;animation:drift 14s ease-in-out infinite reverse;}
.b3{width:90px;height:90px;background:#BAE6FD;top:38%;left:6%;animation:drift 20s ease-in-out infinite;}
.b4{width:140px;height:140px;background:#FBCFE8;bottom:-40px;left:22%;animation:drift 16s ease-in-out infinite reverse;}
.b5{width:70px;height:70px;background:#BBF7D0;top:12%;right:18%;animation:drift 12s ease-in-out infinite;}

/* ==== topbar ==== */
.topbar{
  position:sticky; top:0; z-index:6; display:flex; align-items:center; gap:12px;
  padding:10px clamp(10px,3vw,26px);
  background:rgba(255,255,255,.72); backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(199,210,254,.8);
}
.brand{display:flex; align-items:center; gap:10px; margin-inline-end:auto;}
.brand-mark{display:grid; place-items:center; width:56px; height:56px; border-radius:20px;
  background:linear-gradient(160deg,#FFFDF5,#FDE68A); box-shadow:var(--clay), var(--clay-in);}
.brand-text{display:flex; flex-direction:column; line-height:1.15;}
.brand-text strong{font-size:clamp(17px,2.4vw,22px); font-weight:800;}
.brand-text span{font-size:clamp(11px,1.6vw,13px); color:var(--ink-soft);}
.topbar-actions{display:flex; align-items:center; gap:10px; margin-inline-start:auto;}
.stars-pill{display:flex; align-items:center; gap:6px; padding:8px 14px; border-radius:999px;
  background:linear-gradient(160deg,#FFFBEB,#FDE68A); box-shadow:var(--clay), var(--clay-in);
  font-family:var(--font-display); font-weight:800; font-size:19px; color:#92400E;}
.stars-pill.bump{animation:bump .5s ease-out;}

/* ==== clay buttons ==== */
.clay-btn{
  border:none; cursor:pointer; border-radius:22px; padding:14px 22px;
  font-family:var(--font-display); font-weight:800; font-size:clamp(16px,2.2vw,20px);
  background:linear-gradient(165deg,#FFFFFF,#E9E7FF); color:var(--ink);
  box-shadow:var(--clay), var(--clay-in);
  transition:transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s ease;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
}
.clay-btn:hover{transform:translateY(-3px) scale(1.02);}
.clay-btn:active{transform:translateY(5px) scale(.98);
  box-shadow:0 3px 0 rgba(30,27,75,.12), 0 6px 12px rgba(79,70,229,.14), var(--clay-in);}
.icon-btn{width:60px; height:60px; padding:0; border-radius:20px;}
.icon-btn.muted{color:#9CA3AF;}
.icon-btn.muted .wave{opacity:.25;}
.btn-primary{background:linear-gradient(165deg,#818CF8,#4F46E5); color:#fff;
  box-shadow:0 10px 0 rgba(49,46,129,.35), 0 18px 28px rgba(79,70,229,.35), inset 0 6px 12px rgba(255,255,255,.32);}
.btn-sun{background:linear-gradient(165deg,#FDE68A,#F59E0B); color:#7C2D12;
  box-shadow:0 10px 0 rgba(180,83,9,.30), 0 18px 28px rgba(245,158,11,.34), inset 0 6px 12px rgba(255,255,255,.45);}
.btn-mint{background:linear-gradient(165deg,#A7F3D0,#16A34A); color:#053B1F;
  box-shadow:0 10px 0 rgba(6,78,59,.30), 0 18px 28px rgba(22,163,74,.30), inset 0 6px 12px rgba(255,255,255,.42);}
.btn-lg{font-size:clamp(19px,2.6vw,24px); padding:18px 34px; border-radius:28px; min-height:68px;}

/* ==== screens ==== */
.screen{position:relative; z-index:1; max-width:1180px; margin:0 auto;
  padding:clamp(14px,2.6vw,30px) clamp(12px,3vw,30px) 40px; outline:none;}
.screen-enter{animation:fadeUp .45s cubic-bezier(.22,1,.36,1) both;}

/* ==== home hero ==== */
.home-hero{display:flex; align-items:center; gap:clamp(14px,3vw,34px); flex-wrap:wrap;
  padding:clamp(16px,3vw,30px); border-radius:var(--r-lg); margin-bottom:22px;
  background:linear-gradient(150deg,#FFFFFF 0%,#F5F3FF 55%,#FFF1E6 100%);
  box-shadow:var(--shadow-soft), var(--clay-in); border:3px solid rgba(255,255,255,.9);}
.hero-mascot{width:clamp(110px,17vw,168px); flex:0 0 auto; filter:drop-shadow(0 12px 16px rgba(79,70,229,.22));
  animation:bob 3.4s ease-in-out infinite;}
.hero-copy{flex:1 1 260px; min-width:240px;}
.hero-copy h1{margin:0 0 6px; font-size:clamp(26px,4.6vw,46px); font-weight:800; line-height:1.15;}
.hero-copy p{margin:0 0 14px; font-size:clamp(15px,2.1vw,19px); color:var(--ink-soft); line-height:1.6;}
.hero-chips{display:flex; gap:10px; flex-wrap:wrap;}
.chip{display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border-radius:999px;
  background:#fff; box-shadow:0 6px 0 rgba(30,27,75,.07), 0 10px 18px rgba(79,70,229,.12);
  font-weight:700; font-size:14px; color:var(--ink-soft);}

/* ==== games grid ==== */
.section-title{display:flex; align-items:center; gap:10px; margin:6px 4px 14px;
  font-size:clamp(19px,2.6vw,24px); font-weight:800;}
.games-grid{display:grid; gap:clamp(12px,2vw,20px);
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));}
.game-card{position:relative; overflow:hidden; border:none; cursor:pointer; text-align:right;
  padding:20px; border-radius:var(--r-md); background:#fff; box-shadow:var(--clay), var(--clay-in);
  transition:transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease; min-height:210px;}
.game-card:hover{transform:translateY(-6px) rotate(-.6deg); box-shadow:0 14px 0 rgba(30,27,75,.10), 0 26px 36px rgba(79,70,229,.22), var(--clay-in);}
.game-card:active{transform:translateY(4px) scale(.98);}
.game-card .card-icon{width:82px; height:82px; border-radius:26px; display:grid; place-items:center;
  margin-bottom:12px; background:var(--tint,#E0E7FF); box-shadow:var(--clay-in), 0 8px 0 rgba(30,27,75,.07);}
.game-card h3{margin:0 0 4px; font-size:clamp(19px,2.4vw,23px);}
.game-card p{margin:0; font-size:14px; color:var(--ink-soft); line-height:1.5;}
.game-card .card-go{position:absolute; inset-block-start:18px; inset-inline-start:18px;
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  background:#fff; box-shadow:0 6px 0 rgba(30,27,75,.08); color:var(--primary);}

/* ==== in-game header ==== */
.game-bar{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px;}
.prompt{display:flex; align-items:center; gap:14px; flex:1 1 300px; padding:14px 20px;
  border-radius:var(--r-md); background:linear-gradient(150deg,#FFFFFF,#EFF6FF);
  box-shadow:var(--shadow-soft), var(--clay-in); border:3px solid #fff;}
.prompt-btn{border:none; background:none; cursor:pointer; padding:6px; border-radius:18px; color:var(--primary);}
.prompt-title{margin:0; font-size:clamp(20px,3.4vw,32px); font-weight:800; line-height:1.25;}
.prompt-sub{margin:3px 0 0; font-size:clamp(13px,1.9vw,16px); color:var(--ink-soft); font-weight:600;}
.progress-dots{display:flex; gap:8px; align-items:center; padding:10px 14px; border-radius:999px;
  background:#fff; box-shadow:0 8px 0 rgba(30,27,75,.07), var(--clay-in);}
.dot{width:16px; height:16px; border-radius:50%; background:#E0E7FF; box-shadow:inset 0 2px 4px rgba(30,27,75,.14);}
.dot.done{background:linear-gradient(160deg,#86EFAC,#16A34A);}
.dot.now{background:linear-gradient(160deg,#FDE68A,#F59E0B); transform:scale(1.25);}

/* ==== options grid ==== */
.options{display:grid; gap:clamp(12px,2.2vw,24px); grid-template-columns:repeat(var(--cols,3),1fr);}
.option{position:relative; border:none; cursor:pointer; padding:clamp(10px,2vw,20px);
  border-radius:var(--r-lg); background:linear-gradient(160deg,#FFFFFF,#F3F4FF);
  box-shadow:var(--clay), var(--clay-in); border:4px solid #fff;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  transition:transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease, background .2s ease;
  min-height:clamp(150px,26vw,230px); justify-content:center;}
.option svg{width:clamp(84px,17vw,148px); height:auto; filter:drop-shadow(0 8px 10px rgba(30,27,75,.14));}
.option-label{font-family:var(--font-display); font-weight:800; font-size:clamp(15px,2.2vw,20px);}
.option:hover{transform:translateY(-5px);}
.option:active{transform:translateY(4px) scale(.97);}
.option.correct{background:linear-gradient(160deg,#ECFDF5,#86EFAC); border-color:var(--green);
  animation:pop .55s cubic-bezier(.34,1.56,.64,1);}
.option.correct::after{content:''; position:absolute; inset:-6px; border-radius:var(--r-lg);
  border:5px solid rgba(22,163,74,.35); animation:halo .8s ease-out;}
.option.wrong{animation:shake .5s ease-in-out; background:linear-gradient(160deg,#FFF1F2,#FECDD3);}
.option.dim{opacity:.45; filter:saturate(.6);}
.option.explore{cursor:pointer;}

/* ==== counting stage ==== */
.count-stage{display:flex; flex-wrap:wrap; gap:clamp(8px,1.6vw,18px); justify-content:center;
  padding:clamp(14px,2.6vw,26px); margin-bottom:18px; border-radius:var(--r-lg);
  background:linear-gradient(160deg,#FFFFFF,#FFF7ED); box-shadow:var(--shadow-soft), var(--clay-in); border:3px solid #fff;}
.count-stage svg{width:clamp(54px,11vw,104px); height:auto; animation:dropIn .45s cubic-bezier(.34,1.56,.64,1) both;}
.numbers{display:grid; grid-template-columns:repeat(var(--cols,5),1fr); gap:clamp(10px,2vw,20px);}
.num-tile{border:none; cursor:pointer; border-radius:var(--r-md); min-height:clamp(96px,17vw,150px);
  font-family:var(--font-display); font-weight:800; font-size:clamp(38px,8vw,74px); color:var(--ink);
  background:linear-gradient(165deg,#FFFFFF,#E9E7FF); box-shadow:var(--clay), var(--clay-in);
  transition:transform .2s cubic-bezier(.34,1.56,.64,1);}
.num-tile:hover{transform:translateY(-5px) scale(1.03);}
.num-tile:active{transform:translateY(4px) scale(.97);}
.num-tile.correct{background:linear-gradient(165deg,#ECFDF5,#86EFAC); animation:pop .5s cubic-bezier(.34,1.56,.64,1);}
.num-tile.wrong{animation:shake .5s ease-in-out; background:linear-gradient(165deg,#FFF1F2,#FECDD3);}

/* ==== colors ==== */
.option.color-opt{padding:clamp(8px,1.6vw,16px);}
.balloon-body{width:clamp(80px,16vw,138px); height:auto; filter:drop-shadow(0 8px 12px rgba(30,27,75,.2));}
.color-name{font-family:var(--font-display); font-weight:800; font-size:clamp(15px,2.2vw,20px);}

/* ==== bubbles ==== */
.bubble-stage{position:relative; height:min(62vh,560px); border-radius:var(--r-lg); overflow:hidden;
  background:linear-gradient(180deg,#E0F2FE 0%,#EDE9FE 60%,#FCE7F3 100%);
  box-shadow:var(--shadow-soft), var(--clay-in); border:3px solid #fff; touch-action:manipulation;}
.bubble{position:absolute; border-radius:50%; cursor:pointer; border:none;
  background:radial-gradient(circle at 32% 28%, rgba(255,255,255,.95), rgba(255,255,255,.28) 42%, var(--bubble,#7DD3FC) 100%);
  box-shadow:inset 0 -6px 12px rgba(255,255,255,.5), 0 8px 18px rgba(56,189,248,.28);
  display:grid; place-items:center; animation:floatUp linear forwards;}
.bubble span{font-family:var(--font-display); font-weight:800; color:rgba(30,27,75,.55); font-size:inherit;}
.bubble.popped{animation:burst .32s ease-out forwards; pointer-events:none;}
.stage-badge{position:absolute; inset-block-start:12px; inset-inline-start:12px; z-index:3;
  padding:8px 16px; border-radius:999px; background:rgba(255,255,255,.86); backdrop-filter:blur(6px);
  font-family:var(--font-display); font-weight:800; color:var(--ink);}

/* ==== drawing ==== */
.draw-wrap{border-radius:var(--r-lg); padding:clamp(10px,2vw,16px); background:#fff;
  box-shadow:var(--shadow-soft), var(--clay-in); border:3px solid #fff;}
.draw-canvas{width:100%; height:min(58vh,520px); border-radius:26px; background:#FFFDF7;
  display:block; touch-action:none; cursor:crosshair;
  box-shadow:inset 0 4px 14px rgba(30,27,75,.10);}
.palette{display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:center; margin-top:14px;}
.swatch{width:clamp(46px,8vw,62px); height:clamp(46px,8vw,62px); border-radius:50%; border:4px solid #fff;
  cursor:pointer; box-shadow:0 6px 0 rgba(30,27,75,.10), 0 10px 16px rgba(30,27,75,.14);
  transition:transform .18s cubic-bezier(.34,1.56,.64,1);}
.swatch:hover{transform:translateY(-4px) scale(1.06);}
.swatch.active{transform:scale(1.16); border-color:var(--ink);
  box-shadow:0 0 0 5px rgba(79,70,229,.28), 0 8px 16px rgba(30,27,75,.18);}

/* ==== reward overlay ==== */
.reward{position:fixed; inset:0; z-index:20; display:grid; place-items:center; padding:20px;
  background:rgba(30,27,75,.42); backdrop-filter:blur(6px);}
.reward-card{position:relative; width:min(620px,94vw); padding:clamp(20px,4vw,38px); text-align:center;
  border-radius:40px; background:linear-gradient(160deg,#FFFFFF,#F5F3FF 60%,#FFF1E6);
  box-shadow:0 24px 0 rgba(30,27,75,.12), 0 40px 70px rgba(30,27,75,.35), var(--clay-in);
  animation:popIn .5s cubic-bezier(.34,1.56,.64,1) both;}
.reward-card h2{margin:6px 0 4px; font-size:clamp(26px,5vw,40px);}
.reward-card p{margin:6px 0 16px; color:var(--ink-soft); font-size:clamp(15px,2.2vw,19px); font-weight:600;}
.reward-stars{display:flex; justify-content:center; gap:10px; margin:8px 0 18px; flex-wrap:wrap;}
.reward-stars svg{width:clamp(38px,8vw,58px); height:auto; animation:pop .5s cubic-bezier(.34,1.56,.64,1) both;}
.reward-actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap;}
.confetti{position:fixed; inset:0; z-index:19; pointer-events:none; overflow:hidden;}
.confetti i{position:absolute; top:-14vh; width:12px; height:18px; border-radius:4px; animation:fall linear forwards;}

/* ==== floating feedback ==== */
.float-msg{position:fixed; z-index:18; pointer-events:none; font-family:var(--font-display);
  font-weight:800; font-size:clamp(24px,5vw,44px); color:var(--green); text-shadow:0 4px 0 #fff;
  animation:floatMsg 1.15s ease-out forwards;}
.foot{position:relative; z-index:1; text-align:center; padding:18px 16px 30px; color:var(--ink-soft);
  font-size:13px; font-weight:600;}
.foot p{margin:0;}

/* ==== animations ==== */
@keyframes fadeUp{from{opacity:0; transform:translateY(18px);}to{opacity:1; transform:none;}}
@keyframes popIn{from{opacity:0; transform:scale(.82);}to{opacity:1; transform:scale(1);}}
@keyframes pop{0%{transform:scale(1);}45%{transform:scale(1.14);}100%{transform:scale(1);}}
@keyframes bump{0%{transform:scale(1);}40%{transform:scale(1.28) rotate(-6deg);}100%{transform:scale(1);}}
@keyframes shake{0%,100%{transform:translateX(0);}20%{transform:translateX(-11px) rotate(-2deg);}
  45%{transform:translateX(9px) rotate(2deg);}70%{transform:translateX(-6px);}}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-2deg);}50%{transform:translateY(-14px) rotate(2deg);}}
@keyframes drift{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(26px,-24px) scale(1.08);}}
@keyframes floatUp{from{transform:translateY(0);}to{transform:translateY(var(--rise,-70vh));}}
@keyframes burst{to{transform:scale(1.9); opacity:0;}}
@keyframes halo{from{opacity:1; transform:scale(.9);}to{opacity:0; transform:scale(1.14);}}
@keyframes dropIn{from{opacity:0; transform:translateY(-22px) scale(.6);}to{opacity:1; transform:none;}}
@keyframes fall{to{transform:translateY(122vh) rotate(720deg);}}
@keyframes floatMsg{0%{opacity:0; transform:translateY(10px) scale(.7);}
  25%{opacity:1; transform:translateY(-6px) scale(1.1);}
  100%{opacity:0; transform:translateY(-70px) scale(1);}}
.sparkle{position:fixed; z-index:17; pointer-events:none; width:16px; height:16px; border-radius:50%;
  animation:burst .7s ease-out forwards;}

/* ==== responsive ==== */
@media (max-width:640px){
  .topbar{gap:8px;}
  .brand-text span{display:none;}
  .icon-btn{width:52px; height:52px;}
  .options{grid-template-columns:repeat(2,1fr);}
  .numbers{grid-template-columns:repeat(3,1fr);}
  .games-grid{grid-template-columns:repeat(2,1fr);}
  .game-card{min-height:180px; padding:14px;}
  .game-card .card-icon{width:64px; height:64px;}
  .prompt{padding:12px 14px;}
}
@media (max-width:380px){ .games-grid{grid-template-columns:1fr;} }
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.05ms !important;}
  .blob{animation:none;}
}

/* ==== استكمالات ==== */
[hidden]{display:none !important;}
.reward[hidden]{display:none !important;}
.hero-mascot svg{width:100%; height:auto; display:block;}
.card-icon svg{width:56px; height:56px;}
.reward-mascot{width:130px; margin:0 auto 6px; animation:bob 3.4s ease-in-out infinite;}
.reward-mascot svg{width:100%; height:auto;}
.reward-stars span{display:inline-block;}
.reward-stars .off{opacity:.28; filter:grayscale(1) contrast(.7);}

/* العدّ */
.count-item{position:relative; display:inline-block;}
.count-item svg{display:block;}
.count-item.counting{animation:pop .5s cubic-bezier(.34,1.56,.64,1);}
.count-badge{position:absolute; inset-block-start:-10px; inset-inline-end:-6px;
  width:clamp(28px,5vw,42px); height:clamp(28px,5vw,42px); border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(160deg,#FFFFFF,#FDE68A); color:#92400E; font-size:clamp(15px,3vw,22px);
  font-family:var(--font-display); box-shadow:0 4px 0 rgba(30,27,75,.12), 0 8px 14px rgba(30,27,75,.16);}
.num-tile{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;}
.num-ar{line-height:1; font-size:clamp(36px,8vw,68px);}
.num-en{font-size:clamp(12px,1.8vw,17px); color:var(--ink-soft); opacity:.6; font-family:var(--font-body);}
.num-tile.dim{opacity:.42;}

/* حجم الفرشاة */
.size-dot{width:clamp(50px,9vw,64px); height:clamp(50px,9vw,64px); border-radius:50%; cursor:pointer;
  border:4px solid #fff; background:#fff; display:grid; place-items:center;
  box-shadow:0 6px 0 rgba(30,27,75,.10), 0 10px 16px rgba(30,27,75,.12); transition:transform .18s ease;}
.size-dot span{display:block; border-radius:50%; background:var(--ink);}
.size-dot:hover{transform:translateY(-3px);}
.size-dot.active{box-shadow:0 0 0 5px rgba(79,70,229,.28), 0 8px 14px rgba(30,27,75,.16);}
.palette .clay-btn{min-height:56px;}

/* ==== زر تغيير الصوت ==== */
.voice-btn{color:#4F46E5;}
.voice-btn.live{background:linear-gradient(165deg,#EEF2FF,#C7D2FE); animation:voicePulse 1.1s ease-in-out infinite;}
.voice-btn.off{opacity:.55;}
@keyframes voicePulse{0%,100%{transform:translateY(0) scale(1);} 50%{transform:translateY(-2px) scale(1.05);}}
@media (max-width:520px){ .voice-btn svg{width:22px; height:22px;} }
/* ==== الجيل الثاني: رسومات أكبر وحركات أنعم ==== */
.option{animation:cardIn .44s cubic-bezier(.22,1,.36,1) both;}
@keyframes cardIn{from{opacity:0; transform:translateY(18px) scale(.94);}to{opacity:1; transform:none;}}
.option svg{width:clamp(98px,19vw,172px);}
.option.hint{animation:hintPulse 1.05s ease-in-out infinite;
  box-shadow:0 0 0 6px rgba(79,70,229,.30), 0 12px 0 rgba(30,27,75,.10), 0 20px 32px rgba(79,70,229,.24);}
@keyframes hintPulse{0%,100%{transform:translateY(0) scale(1);}50%{transform:translateY(-7px) scale(1.05);}}
.num-tile{animation:cardIn .42s cubic-bezier(.22,1,.36,1) both;}
.num-tile .num-en{opacity:.85;}
.count-item{border:none; background:none; padding:0; cursor:pointer; position:relative;
  display:inline-block; touch-action:manipulation; transition:transform .18s ease;}
.count-item svg{width:clamp(58px,12vw,110px); display:block;}
.count-item:active{transform:scale(.94);}
.count-item.tapped .count-badge{display:grid;}
.count-item.counting{animation:pop .5s cubic-bezier(.34,1.56,.64,1);}

/* ==== لعبة الذاكرة ==== */
.memory-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(10px,2vw,20px); margin-top:6px;}
.mem-card{aspect-ratio:3/4; border:none; background:none; padding:0; cursor:pointer; perspective:900px;}
.mem-inner{position:relative; display:block; width:100%; height:100%; transform-style:preserve-3d;
  transition:transform .5s cubic-bezier(.22,1,.36,1);}
.mem-card.open .mem-inner{transform:rotateY(180deg);}
.mem-back,.mem-front{position:absolute; inset:0; border-radius:26px; display:grid; place-items:center;
  backface-visibility:hidden; box-shadow:var(--clay), var(--clay-in); overflow:hidden;}
.mem-back{background:linear-gradient(160deg,#A5B4FC,#4F46E5); color:#fff;
  font-family:var(--font-display); font-weight:800; font-size:clamp(26px,5vw,46px);}
.mem-front{background:linear-gradient(160deg,#FFFFFF,#F3F4FF); transform:rotateY(180deg); border:4px solid #fff;}
.mem-front svg{width:72%; height:auto;}
.mem-card.matched .mem-front{background:linear-gradient(160deg,#ECFDF5,#86EFAC); border-color:var(--green);}
.mem-card.matched{animation:pop .5s cubic-bezier(.34,1.56,.64,1);}
.mem-score{padding:10px 18px; border-radius:999px; background:#fff;
  box-shadow:0 8px 0 rgba(30,27,75,.07), var(--clay-in); font-family:var(--font-display); font-weight:800;}
@media (max-width:640px){ .memory-grid{grid-template-columns:repeat(3,1fr);} }
/* ==== فقاعات الجيل الثاني ==== */
.bubble{background:radial-gradient(circle at 34% 26%, #FFFFFF 0%, var(--bubble-soft,#E0F2FE) 44%, var(--bubble,#7DD3FC) 100%);}
.bubble-shine{position:absolute; inset-block-start:14%; inset-inline-start:18%; width:36%; height:24%;
  border-radius:50%; background:#fff; opacity:.75; filter:blur(2px);}
.bubble.gold{box-shadow:inset 0 -6px 12px rgba(255,255,255,.6), 0 0 0 5px rgba(251,191,36,.45), 0 10px 24px rgba(245,158,11,.42);}
.bubble-score{display:flex; align-items:center; gap:8px; padding:10px 20px; border-radius:999px;
  background:linear-gradient(160deg,#FFFFFF,#E0E7FF); box-shadow:var(--clay), var(--clay-in);
  font-family:var(--font-display); font-weight:800; font-size:clamp(20px,4vw,30px); color:var(--primary);}
.bubble-score.bump{animation:bump .5s ease-out;}
.stage-hint{position:absolute; inset-block-end:16px; inset-inline:0; text-align:center;
  font-weight:700; color:#3B5B8C; opacity:.8; animation:bob 2.6s ease-in-out infinite;}

/* ==== أدوات الرسم والملصقات ==== */
.tool-btn{width:clamp(50px,9vw,62px); height:clamp(50px,9vw,62px); border-radius:22px; border:none;
  cursor:pointer; display:grid; place-items:center; color:var(--ink); background:#fff;
  box-shadow:0 6px 0 rgba(30,27,75,.10), 0 10px 16px rgba(30,27,75,.12); transition:transform .18s ease;}
.tool-btn:hover{transform:translateY(-3px);}
.tool-btn.active{color:#fff; background:linear-gradient(160deg,#818CF8,#4F46E5);
  box-shadow:0 0 0 5px rgba(79,70,229,.25), 0 8px 16px rgba(30,27,75,.18);}
.tool-btn.rainbow.active{background:linear-gradient(120deg,#F87171,#FBBF24,#34D399,#3B82F6,#A855F7);}
.sticker-bar{display:flex; gap:10px; overflow-x:auto; padding:12px 4px 6px; margin-top:8px;
  -webkit-overflow-scrolling:touch;}
.sticker{flex:0 0 auto; width:clamp(58px,11vw,78px); height:clamp(58px,11vw,78px); border-radius:22px;
  border:4px solid #fff; background:linear-gradient(160deg,#FFFFFF,#F1F2FF); cursor:pointer; padding:6px;
  box-shadow:0 6px 0 rgba(30,27,75,.08), 0 10px 16px rgba(30,27,75,.12);
  display:grid; place-items:center; transition:transform .18s cubic-bezier(.34,1.56,.64,1);}
.sticker:hover{transform:translateY(-4px) scale(1.04);}
.sticker svg{width:100%; height:100%;}
.sticker.active{border-color:var(--primary); box-shadow:0 0 0 5px rgba(79,70,229,.25);}
@media (max-width:640px){ .option svg{width:clamp(84px,26vw,120px);} }
/* ==== تسمية الجولة ==== */
.round-box{display:flex; flex-direction:column; align-items:center; gap:6px;}
.round-label{font-size:clamp(11px,1.6vw,13px); font-weight:700; color:var(--ink-soft);
  background:#fff; padding:4px 12px; border-radius:999px; box-shadow:0 4px 0 rgba(30,27,75,.06);}
.brand-mark svg{width:44px; height:44px;}
.reward-card .reward-stars svg{filter:drop-shadow(0 6px 8px rgba(245,158,11,.35));}
@media (max-width:640px){ .round-label{display:none;} }
/* ==== مشهد الحديقة في الترويسة ==== */
.hero-scene{flex:1 1 100%; margin-top:6px; border-radius:30px; overflow:hidden;
  box-shadow:0 10px 0 rgba(30,27,75,.08), 0 18px 26px rgba(79,70,229,.16);}
.hero-scene svg{width:100%; height:auto; display:block;}
.card-icon svg{width:62px; height:62px;}

/* ==== لعبة التلوين ==== */
.color-wrap{border-radius:var(--r-lg); padding:clamp(10px,2vw,18px); background:linear-gradient(160deg,#FFFFFF,#FFF1F6);
  box-shadow:var(--shadow-soft), var(--clay-in); border:3px solid #fff; display:flex; justify-content:center;}
.color-page{width:100%; max-width:min(560px,86vw); height:auto; display:block; touch-action:manipulation;}
.color-page .region{cursor:pointer; transition:fill .25s ease, opacity .2s ease;}
.color-page .region:hover{opacity:.88;}
.color-page .region.filled{animation:pop .45s cubic-bezier(.34,1.56,.64,1);}
.color-page .page-detail{pointer-events:none;}
@media (max-width:640px){ .hero-scene{margin-top:2px;} }