/* ============================================================
   ركن الأطفال — عالم الحيوانات · ثيم مستقل مبهج
   (منفصل تماماً عن ثيم الحصن الليلي)
   ============================================================ */
:root{
  --r: 30px;                 /* زوايا دائرية ضخمة */
  --r-sm: 18px;
  --ink: #2b2350;            /* حبر بنفسجي داكن دافئ */
  --ink-soft: #6b6392;
  --paper: #fffdf7;
  --sun: #ffd23f;
  --coral: #ff6b6b;
  --mint: #4ecdc4;
  --sky: #45b7d8;
  --grape: #a66cff;
  --leaf: #6bcb77;
  --orange: #ff9f45;
  --shadow: 0 18px 40px -16px rgba(80,60,140,.35);
  --shadow-lg: 0 30px 70px -24px rgba(80,60,140,.5);
  /* لون العالم الحالي — يبدّله JS */
  --accent: var(--leaf);
  --accent-2: var(--sky);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; direction:rtl; color:var(--ink); min-height:100vh;
  font-family:"Baloo Bhaijaan 2","Tajawal",system-ui,sans-serif;
  background:
    radial-gradient(1200px 700px at 85% -10%, #fff6cf, transparent 60%),
    radial-gradient(900px 600px at 5% 5%, #d7f6ff, transparent 55%),
    linear-gradient(180deg,#eafaff 0%,#f6fff0 55%,#fff7ea 100%);
  background-attachment:fixed;
  -webkit-tap-highlight-color:transparent;
}
.wrap{max-width:1100px; margin:0 auto; padding:0 18px 60px}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}

/* ---------- شريط علوي ---------- */
.top{display:flex; align-items:center; gap:12px; padding:20px 6px 6px}
.back{
  width:54px;height:54px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
  background:var(--paper); box-shadow:var(--shadow); font-size:24px; transition:transform .15s;
}
.back:active{transform:scale(.9)}
.top h1{
  margin:0; font-weight:800; font-size:clamp(24px,5vw,38px);
  color:var(--ink); letter-spacing:.5px; display:flex; align-items:center; gap:10px;
}
.top h1 .pill{
  font-size:.5em; background:var(--sun); color:#7a5b00; padding:4px 12px; border-radius:999px;
  font-weight:700; box-shadow:0 6px 14px -6px rgba(255,180,0,.7);
}

/* ---------- بحث ---------- */
.search{position:relative; margin:14px 0 6px}
.search input{
  width:100%; padding:18px 58px 18px 20px; font-size:19px; font-family:inherit; font-weight:600;
  color:var(--ink); background:var(--paper); border:3px solid #fff; border-radius:var(--r);
  outline:none; box-shadow:var(--shadow); transition:border-color .2s, box-shadow .2s;
}
.search input::placeholder{color:#b7b0d0; font-weight:500}
.search input:focus{border-color:var(--accent)}
.search .mag{position:absolute; top:50%; right:20px; transform:translateY(-50%); font-size:24px; pointer-events:none}
/* نتائج البحث */
.results{
  display:none; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:12px;
  margin-top:12px; padding:16px; background:var(--paper); border-radius:var(--r); box-shadow:var(--shadow);
}
.results.show{display:grid}
.results .none{grid-column:1/-1; text-align:center; color:var(--ink-soft); padding:14px; font-weight:600}
.res{
  display:flex; flex-direction:column; align-items:center; gap:6px; padding:10px 6px; border-radius:var(--r-sm);
  background:#f6f3ff; transition:transform .12s, background .2s;
}
.res:active{transform:scale(.92)}
.res img{width:56px;height:56px;object-fit:contain}
.res span{font-weight:700; font-size:15px}

/* ---------- تبويبات العوالم ---------- */
.worlds{display:flex; gap:10px; overflow-x:auto; padding:14px 2px; scrollbar-width:none}
.worlds::-webkit-scrollbar{display:none}
.world-tab{
  flex:0 0 auto; display:flex; align-items:center; gap:9px; padding:12px 20px; border-radius:999px;
  background:var(--paper); box-shadow:var(--shadow); font-weight:700; font-size:18px; color:var(--ink);
  border:3px solid transparent; transition:transform .15s, border-color .2s;
}
.world-tab .em{font-size:24px}
.world-tab:active{transform:scale(.94)}
.world-tab.on{border-color:var(--accent); color:var(--accent)}

/* ---------- المشهد ---------- */
.scene{
  position:relative; width:100%; aspect-ratio:16/10; border-radius:var(--r); overflow:hidden;
  box-shadow:var(--shadow-lg); margin-top:6px; background-size:cover; background-position:center;
  transition:background .4s;
}
/* خلفية احتياطية متدرّجة لكل عالم (تظهر إن لم تتوفّر صورة المشهد) */
.scene.farm { background-image:linear-gradient(180deg,#bdeaff 0%,#dff6ff 42%,#bfe98a 42%,#9fd96b 100%); }
.scene.wild { background-image:linear-gradient(180deg,#a7e8d6 0%,#7fd9c0 40%,#57b98f 40%,#3f9e77 100%); }
.scene.sea  { background-image:linear-gradient(180deg,#8fd9f5 0%,#4fb6e6 45%,#2b8fd6 45%,#1c6fd6 100%); }
.scene.birds{ background-image:linear-gradient(180deg,#cfe6ff 0%,#ffe6b0 60%,#ffd58a 100%); }

.stage{position:absolute; inset:0}
.animal{
  position:absolute; transform:translate(50%,-50%); /* الوضع بالنسبة إلى نقطة pos */
  width:clamp(64px,15%,140px); cursor:pointer; border:none; background:none; padding:0;
  filter:drop-shadow(0 8px 10px rgba(0,0,0,.22));
  animation:bob var(--bob,3.2s) ease-in-out infinite;
  animation-delay:var(--bd,0s);
  transition:transform .12s;
}
.animal img{width:100%; height:100%; object-fit:contain; pointer-events:none; display:block}
.animal:active{transform:translate(50%,-50%) scale(.9)}
.animal.pop{animation:pop .5s ease}
@keyframes bob{0%,100%{translate:0 0} 50%{translate:0 -8px}}
@keyframes pop{0%{scale:1}30%{scale:1.25}55%{scale:.92}100%{scale:1}}
.hint{
  position:absolute; bottom:10px; right:50%; transform:translateX(50%);
  background:rgba(255,255,255,.85); color:var(--ink); font-weight:700; font-size:14px;
  padding:7px 16px; border-radius:999px; box-shadow:var(--shadow); white-space:nowrap;
}

/* ---------- بطاقة ملء الشاشة ---------- */
.card-bg{
  position:fixed; inset:0; z-index:50; display:none; place-items:center; padding:20px;
  background:rgba(43,35,80,.55); backdrop-filter:blur(6px);
}
.card-bg.show{display:grid; animation:fade .25s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.card{
  position:relative; width:min(560px,100%); max-height:92vh; overflow:hidden;
  border-radius:calc(var(--r) + 6px); padding:26px 22px 30px; text-align:center;
  background:linear-gradient(180deg,#fffdf7, #fff);
  box-shadow:var(--shadow-lg); animation:rise .3s cubic-bezier(.2,.9,.3,1.3);
}
@keyframes rise{from{transform:translateY(40px) scale(.94);opacity:0}to{transform:none;opacity:1}}
.card::before{ /* شريط لون العالم أعلى البطاقة */
  content:""; position:absolute; inset:0 0 auto 0; height:12px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
}
.card .close{
  position:absolute; top:14px; left:14px; width:48px;height:48px;border-radius:50%;
  background:#fff; box-shadow:var(--shadow); font-size:24px; display:grid; place-items:center; z-index:3;
  transition:transform .15s;
}
.card .close:active{transform:scale(.9)}
.card-hero{
  width:220px; max-width:60%; aspect-ratio:1; margin:14px auto 4px; display:block; cursor:pointer;
  object-fit:contain; filter:drop-shadow(0 14px 16px rgba(0,0,0,.22));
  animation:bob 3s ease-in-out infinite;
}
.card-hero:active{animation:pop .5s ease}
.name-ar{font-size:clamp(40px,11vw,64px); font-weight:800; color:var(--ink); margin:6px 0 0; line-height:1}
.name-en{font-family:"Fredoka","Baloo Bhaijaan 2",sans-serif; font-size:clamp(20px,6vw,30px);
  font-weight:600; color:var(--accent); margin:6px 0 0; letter-spacing:1px}

/* أزرار الأصوات */
.plays{display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin:20px 0 6px}
.play{
  display:flex; flex-direction:column; align-items:center; gap:6px; padding:14px 10px; min-width:92px;
  border-radius:var(--r-sm); background:#f5f2ff; box-shadow:var(--shadow); font-weight:700; font-size:15px;
  color:var(--ink); transition:transform .12s, background .2s;
}
.play .ico{font-size:28px}
.play:active{transform:scale(.92)}
.play.big{background:linear-gradient(180deg,var(--accent),var(--accent-2)); color:#fff}
.play.playing{animation:pulse .6s ease infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}

/* التالي / السابق */
.nav{display:flex; justify-content:space-between; gap:12px; margin-top:18px}
.nav button{
  flex:1; display:flex; align-items:center; justify-content:center; gap:8px; padding:16px;
  border-radius:var(--r-sm); background:var(--paper); box-shadow:var(--shadow);
  font-weight:800; font-size:18px; color:var(--ink); transition:transform .12s;
}
.nav button:active{transform:scale(.95)}
.nav .em{font-size:22px}

/* ---------- صفحة الأنشطة (index) ---------- */
.acts{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:18px; margin-top:18px}
.act{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:10px; padding:28px 18px;
  border-radius:var(--r); background:var(--paper); box-shadow:var(--shadow); text-align:center;
  transition:transform .15s, box-shadow .2s; overflow:hidden;
}
.act .big-em{font-size:64px; line-height:1; animation:bob 3.4s ease-in-out infinite}
.act h3{margin:0; font-size:22px; font-weight:800}
.act:not(.soon):active{transform:translateY(-3px) scale(1.02); box-shadow:var(--shadow-lg)}
.act.soon{opacity:.62; filter:saturate(.6)}
.act .soon-badge{
  position:absolute; top:10px; left:10px; background:var(--grape); color:#fff; font-size:12px; font-weight:700;
  padding:4px 12px; border-radius:999px;
}
.act .go{background:linear-gradient(90deg,var(--accent),var(--accent-2)); color:#fff; font-weight:700;
  padding:8px 20px; border-radius:999px; font-size:15px}

.foot{text-align:center; color:var(--ink-soft); font-size:14px; margin-top:34px; font-weight:600}
.foot a{color:var(--accent); text-decoration:underline}

@media (prefers-reduced-motion:reduce){
  .animal,.card-hero,.act .big-em{animation:none}
  .play.playing,.animal.pop,.card-hero:active{animation:none}
}