/* ============================================================
   لَمْسَة وَفَرْحَة — الأنماط (حدائق سكرية هادئة، RTL، mobile-first)
   ============================================================ */
@font-face{font-family:Tajawal;font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/tajawal-400-arabic.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:Tajawal;font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/tajawal-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Tajawal;font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/tajawal-700-arabic.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:Tajawal;font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/tajawal-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Tajawal;font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/tajawal-800-arabic.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:Tajawal;font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/tajawal-800-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --bg:#FFF9ED; --card:#FFFFFF; --pink:#FF759E; --teal:#47C3B2; --sky:#87C5FF; --yellow:#FFD66D; --purple:#B48CF2; --green:#3CC46B;
  --ink:#283253; --muted:#73809A; --line:#EFE6D6; --soft:#FFF1D9;
  --r:24px; --gap:14px; --shadow:0 8px 24px rgba(40,50,83,.10); --shadow-lg:0 18px 50px rgba(40,50,83,.18);
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px); --sal:env(safe-area-inset-left,0px); --sar:env(safe-area-inset-right,0px);
  --card-size:clamp(84px, min(26vw, 20vh), 190px);
  --mc:var(--pink);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  font-family:Tajawal,"Segoe UI",Tahoma,system-ui,sans-serif;color:var(--ink);background:var(--bg);
  background-image:radial-gradient(circle at 10% 10%, rgba(255,117,158,.10) 0 120px, transparent 121px),
                   radial-gradient(circle at 90% 20%, rgba(135,197,255,.14) 0 140px, transparent 141px),
                   radial-gradient(circle at 20% 90%, rgba(255,214,109,.16) 0 160px, transparent 161px),
                   radial-gradient(circle at 85% 85%, rgba(71,195,178,.12) 0 130px, transparent 131px);
  overscroll-behavior:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none;
  line-height:1.5;
}
input,select{user-select:text;-webkit-user-select:text}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;touch-action:manipulation}
button:focus-visible,[tabindex]:focus-visible{outline:4px solid rgba(135,197,255,.9);outline-offset:3px}
svg{display:block;width:100%;height:100%}
#app{min-height:100dvh;display:flex;flex-direction:column}
#screen-home{height:100dvh;overflow:auto}
.screen{flex:1;display:flex;flex-direction:column;min-height:100dvh;padding:calc(12px + var(--sat)) calc(16px + var(--sar)) calc(12px + var(--sab)) calc(16px + var(--sal));animation:fadein .35s ease}
.hidden{display:none !important}
@keyframes fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- أزرار عامة ---------- */
.round{width:52px;height:52px;border-radius:50%;background:var(--card);box-shadow:var(--shadow);display:inline-flex;align-items:center;justify-content:center;font-size:24px;transition:transform .15s}
.round:active{transform:scale(.92)}
.round.muted{opacity:.6}
.round.holding{animation:hold .9s linear forwards}
@keyframes hold{to{box-shadow:0 0 0 8px rgba(255,117,158,.35), var(--shadow)}}
#btnInstall{width:auto;padding:0 16px;border-radius:26px;gap:6px;font-size:18px;font-weight:700}
.big{min-height:60px;padding:0 26px;border-radius:30px;font-size:21px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:transform .15s}
.big:active{transform:scale(.96)}
.primary{background:linear-gradient(135deg,var(--pink),#FF9DB9);color:#fff;box-shadow:0 10px 24px rgba(255,117,158,.35)}
.ghost-btn{background:var(--soft);color:var(--ink)}
.link{color:var(--muted);font-size:16px;font-weight:700;padding:10px 14px;text-decoration:underline;text-underline-offset:4px}
.link.danger{color:#D64B6A}

/* ---------- الرئيسية ---------- */
.home-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px}
.brand-bear{width:72px;height:72px;flex:0 0 auto}
.brand h1{font-size:clamp(26px,6vw,40px);font-weight:800;line-height:1.15;color:var(--ink)}
.brand h1 span{color:var(--pink)}
.brand p{color:var(--muted);font-weight:700;font-size:15px}
.child-chip{display:flex;align-items:center;gap:10px;background:var(--card);border-radius:30px;padding:8px 14px 8px 10px;box-shadow:var(--shadow);min-height:56px;text-align:right}
.child-chip .avatar{width:40px;height:40px;border-radius:50%;background:var(--soft);display:grid;place-items:center;font-size:22px}
.child-chip .who{display:flex;flex-direction:column;line-height:1.2}
.child-chip .who small{color:var(--muted);font-size:12px;font-weight:700}
.child-chip .who b{font-size:18px;font-weight:800}
.child-chip .edit{color:var(--pink);font-size:18px;font-weight:800}
.stars-line{margin:10px auto 0;background:var(--card);border-radius:30px;padding:6px 16px;display:inline-flex;align-items:center;gap:6px;box-shadow:var(--shadow);font-weight:800;font-size:18px}
.stars-line small{color:var(--muted);font-size:13px;font-weight:700}

.modules{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,minmax(0,1fr));gap:var(--gap);margin:12px 0 12px;flex:1;min-height:0}
.module{position:relative;overflow:hidden;background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:10px 12px;display:flex;flex-direction:column;align-items:center;gap:8px;min-height:0;border:4px solid transparent;transition:transform .15s, border-color .15s;justify-content:center}
.module:active{transform:scale(.97)}
.module::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--mc);opacity:.10}
.module .mi{width:min(28vw,9.5vh,120px);height:min(28vw,9.5vh,120px);position:relative;flex:0 1 auto}
.module .mt{font-size:clamp(17px,5vw,22px);font-weight:800;position:relative;line-height:1.2}
.module .mp{width:80%;height:7px;border-radius:4px;background:var(--line);overflow:hidden;position:relative}
.module .mp i{display:block;height:100%;background:var(--mc);border-radius:4px;transition:width .4s}
.module .mn{color:var(--muted);font-size:14px;font-weight:700;position:relative;white-space:nowrap}
.module:last-child:nth-child(odd) .mt{white-space:nowrap}
.module:last-child:nth-child(odd){grid-column:1 / -1;flex-direction:row;justify-content:space-between;min-height:96px;padding:10px 22px}
.module:last-child:nth-child(odd) .mi{width:min(20vw,80px);height:min(20vw,80px)}
.module:last-child:nth-child(odd) .mp{width:30%}
.home-foot{display:flex;justify-content:center;gap:16px;padding-top:8px}

/* ---------- شاشة اللعب ---------- */
#screen-play{padding-bottom:calc(10px + var(--sab))}
.topbar{display:flex;align-items:center;gap:10px}
.progress{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0}
.ptitle{font-weight:800;font-size:16px;color:var(--muted);text-align:center}
.pbar{height:12px;background:#fff;border-radius:6px;box-shadow:inset 0 0 0 2px var(--line);overflow:hidden}
.pfill{height:100%;width:0;background:linear-gradient(90deg,var(--mc),color-mix(in srgb,var(--mc),#fff 35%));border-radius:6px;transition:width .5s cubic-bezier(.2,.8,.3,1)}
.plabel{text-align:center;font-weight:800;font-size:14px;color:var(--muted);letter-spacing:1px}
.instruction{text-align:center;font-weight:800;font-size:clamp(18px,4.5vw,26px);color:var(--ink);margin:10px 0 4px;min-height:1.5em}
.stage{flex:1;display:flex;flex-direction:column;min-height:0}

/* لوح المطابقة */
.board{flex:1;display:grid;grid-template-rows:auto auto;gap:var(--gap);align-content:space-evenly;padding:8px 0}
.row{display:flex;justify-content:center;align-items:center;gap:clamp(10px,3vw,24px);flex-wrap:nowrap}
.card,.slot{width:var(--card-size);height:var(--card-size);border-radius:26px;display:block;position:relative;flex:0 0 auto}
.card>svg,.slot>svg{position:absolute;inset:12%;width:76%;height:76%}
.card{background:var(--card);box-shadow:var(--shadow);touch-action:none;transition:transform .18s cubic-bezier(.2,.8,.3,1.2), box-shadow .18s, opacity .25s;border:4px solid transparent}
.card.pressed{transform:scale(1.06)}
.card.selected{border-color:var(--sky);transform:scale(1.1);box-shadow:0 0 0 6px rgba(135,197,255,.35), var(--shadow-lg);animation:float 1.2s ease-in-out infinite}
@keyframes float{0%,100%{transform:scale(1.1) translateY(0)}50%{transform:scale(1.1) translateY(-6px)}}
.card.lifting{opacity:.35;transform:scale(.96)}
.card.matched{opacity:.22;filter:grayscale(.6);pointer-events:none;transform:scale(.9)}
.card.wiggle{animation:wiggle .5s ease}
@keyframes wiggle{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px) rotate(-2deg)}75%{transform:translateX(6px) rotate(2deg)}}
.card.ghost{position:fixed;z-index:50;margin:0;pointer-events:none;box-shadow:var(--shadow-lg);background:var(--card);transition:none;opacity:1;transform-origin:center}
.slot{background:rgba(255,255,255,.55);border:4px dashed #D8D1C4;transition:transform .18s, border-color .18s, background .18s}
.slot.hover{border-color:var(--sky);background:#fff;transform:scale(1.06)}
.slot.nudge{animation:nudge .45s ease}
@keyframes nudge{0%,100%{transform:translateX(0)}30%{transform:translateX(5px)}60%{transform:translateX(-5px)}}
.slot.pulse{animation:pulse 1.1s ease-in-out 2;border-color:var(--yellow)}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,214,109,0)}50%{box-shadow:0 0 0 12px rgba(255,214,109,.55);transform:scale(1.06)}}
.slot.filled{border-style:solid;border-color:var(--green);background:#fff;animation:land .4s cubic-bezier(.2,.8,.3,1.3)}
@keyframes land{0%{transform:scale(.85)}60%{transform:scale(1.08)}100%{transform:scale(1)}}
.slot .check{position:absolute;top:-10px;left:-10px;width:32px;height:32px;border-radius:50%;background:var(--green);color:#fff;font-weight:800;font-size:20px;display:grid;place-items:center;box-shadow:var(--shadow);animation:land .4s ease}
.silhouette{filter:brightness(0) opacity(.16)}
.board[data-mode="numbers"] .card svg text,.board[data-mode="numbers"] .slot svg text{font-family:Tajawal,system-ui,sans-serif}

/* لوح الرسم */
.trace-wrap{flex:1;position:relative;min-height:260px;background:var(--card);border-radius:28px;box-shadow:var(--shadow);overflow:hidden;margin:6px 0 4px}
.trace-wrap canvas{position:absolute;inset:0;touch-action:none;display:block}

/* ---------- أفقي (جهاز لوحي/هاتف مقلوب) ---------- */
@media (orientation:landscape) and (max-height:620px){
  :root{--card-size:clamp(72px, min(16vw, 27vh), 170px)}
  .board{padding:2px 0;gap:8px}
  .instruction{margin:0;font-size:clamp(16px,3vh,22px);min-height:0}
  .screen{padding-top:calc(6px + var(--sat));padding-bottom:calc(6px + var(--sab))}
  .topbar .round{width:44px;height:44px;font-size:20px}
  .ptitle{display:none}
  .trace-wrap{min-height:0;margin:4px 0 0}
}
@media (min-width:900px) and (orientation:landscape){
  :root{--card-size:clamp(120px, min(18vw, 26vh), 200px)}
}
@media (min-width:720px){
  .modules{grid-template-columns:repeat(3,1fr);max-width:1000px;margin-inline:auto;width:100%}
  .module .mi{width:min(22vw,18vh,170px);height:min(22vw,18vh,170px)}
  .module .mt{font-size:26px}
  .brand-bear{width:96px;height:96px}
  .brand h1{font-size:44px}
  .module:last-child:nth-child(odd){grid-column:span 2;flex-direction:row;justify-content:space-evenly;padding:12px 28px}
  .module:last-child:nth-child(odd) .mi{width:min(22vw,18vh,170px);height:min(22vw,18vh,170px)}
  .module:last-child:nth-child(odd) .mp{width:30%}
  .home-head{max-width:1000px;margin-inline:auto;width:100%}
}

/* ---------- الطبقات العلوية ---------- */
.overlay{position:fixed;inset:0;z-index:60;background:rgba(40,50,83,.45);backdrop-filter:blur(4px);display:grid;place-items:center;padding:16px;animation:fadein .25s ease}
.celeb-card,.modal{background:var(--card);border-radius:32px;box-shadow:var(--shadow-lg);padding:24px 22px;width:min(92vw,440px);text-align:center;max-height:calc(100dvh - 32px);overflow:auto}
.celeb-card{animation:popin .45s cubic-bezier(.2,.8,.3,1.3)}
@keyframes popin{from{transform:scale(.7);opacity:0}to{transform:none;opacity:1}}
.celeb-bear,.modal-bear{width:120px;height:120px;margin:0 auto 4px}
.stars{display:flex;justify-content:center;gap:6px;font-size:44px;min-height:60px}
.star{opacity:0;transform:scale(.2) rotate(-30deg);display:inline-block;filter:drop-shadow(0 6px 10px rgba(255,214,109,.6))}
.star.on{animation:starin .5s cubic-bezier(.2,.8,.3,1.4) forwards}
@keyframes starin{to{opacity:1;transform:scale(1) rotate(0)}}
.celeb-card h2{font-size:38px;font-weight:800;color:var(--pink);margin:4px 0}
.celeb-card p{font-size:20px;font-weight:700;color:var(--muted);margin-bottom:16px}
.celeb-card .big{width:100%;margin-top:10px}
.modal h2{font-size:26px;font-weight:800;margin-bottom:6px}
.modal .hint{color:var(--muted);font-size:14px;font-weight:700;margin:6px 0 12px;line-height:1.7}
.input{width:100%;min-height:56px;border-radius:18px;border:3px solid var(--line);background:#fff;font-size:22px;font-weight:800;text-align:center;padding:8px 14px;color:var(--ink);font-family:inherit}
.input:focus{outline:none;border-color:var(--sky)}
.chips{display:flex;gap:10px;justify-content:center;margin:14px 0}
.chip{flex:1;min-height:54px;border-radius:18px;background:var(--soft);font-size:20px;font-weight:800;border:3px solid transparent}
.chip.on{border-color:var(--pink);background:#fff;box-shadow:0 0 0 4px rgba(255,117,158,.2)}
.modal-actions{display:flex;gap:10px;justify-content:center;margin-top:8px;flex-wrap:wrap}
.modal-actions .big{flex:1;min-width:140px}
.settings{text-align:right}
.settings h2{text-align:center}
.field{display:flex;flex-direction:column;gap:4px;margin:10px 0;font-weight:800;font-size:15px;color:var(--muted)}
.field .input{font-size:18px;min-height:50px;text-align:right}
.switch{display:flex;align-items:center;gap:10px;margin:12px 0;font-weight:700;font-size:16px}
.switch input{width:24px;height:24px;accent-color:var(--pink)}

#confetti{position:fixed;inset:0;z-index:70;pointer-events:none;display:none}
#confetti.on{display:block}
.toast{position:fixed;bottom:calc(24px + var(--sab));left:50%;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;padding:12px 20px;border-radius:30px;font-weight:700;font-size:16px;z-index:80;opacity:0;transition:opacity .25s, transform .25s;max-width:90vw;text-align:center}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- الدبّ ---------- */
.bear .paw{transform-origin:108px 92px}
.bear.wave .paw{animation:wave 1.6s ease-in-out infinite}
@keyframes wave{0%,100%{transform:rotate(0)}50%{transform:rotate(-22deg) translateY(-4px)}}
.bear.bounce{animation:bounce 1.1s ease-in-out infinite}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* ---------- تقليل الحركة ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .star{opacity:1;transform:none}
}

/* ---------- تسجيل اسم الطفل ---------- */
.rec-box{margin:6px 0 10px;display:flex;flex-direction:column;align-items:center;gap:6px}
.rec-box .btn-rec{width:100%;position:relative;overflow:hidden}
.btn-rec.recording{background:#FFE3EA;color:#D64B6A;animation:recpulse 1s ease-in-out infinite}
.btn-rec.recording::after{content:"";position:absolute;left:0;bottom:0;height:5px;background:#FF759E;animation:recbar 2.5s linear forwards}
@keyframes recpulse{0%,100%{box-shadow:0 0 0 0 rgba(255,117,158,.4)}50%{box-shadow:0 0 0 8px rgba(255,117,158,0)}}
@keyframes recbar{from{width:0}to{width:100%}}
.rec-status{font-size:13px;color:var(--muted);font-weight:700;display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:center}
.rec-status.has{color:#1e8e4e}

.version-line{text-align:center;margin:-4px 0 10px !important;font-size:13px}
.version-line b{color:var(--pink);letter-spacing:1px}