@font-face { font-family: "Baloo Bhaijaan 2"; font-style: normal; font-display: swap; font-weight: 600; src: url(./fonts/baloo-bhaijaan-2-arabic-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Baloo Bhaijaan 2"; font-style: normal; font-display: swap; font-weight: 800; src: url(./fonts/baloo-bhaijaan-2-arabic-800-normal.woff2) format("woff2"); }

:root {
  --ink: #22264b; --white: #ffffff; --sky: #9ad8ff; --grass: #8fd46a;
  --orange: #ff9f43; --orange-d: #e07f1f; --blue: #3aa0ff; --blue-d: #1f7fd9;
  --green: #2ecc71; --green-d: #1fa558; --yellow: #ffc93c; --yellow-d: #e0a81c;
  --grey: #d5d9e6; --panel: #eef1f8; --blank: #fff6d6; --pic-bg: #e8f5ff;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--sky); color: var(--ink); font-family: "Baloo Bhaijaan 2", system-ui, sans-serif; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
button { font: inherit; color: inherit; border: 0; cursor: pointer; }

#world { position: fixed; inset: 0; }
#world svg { width: 100%; height: 100%; display: block; }
#world .cloud { animation: drift 60s linear infinite; }
#world .cloud.c2 { animation-duration: 85s; animation-delay: -30s; }
@keyframes drift { from { transform: translateX(-30%); } to { transform: translateX(130%); } }

.screen { position: fixed; inset: 0; display: none; pointer-events: none; padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); }
.screen.show { display: flex; flex-direction: column; align-items: center; }
.screen > * { pointer-events: auto; }
.screen.solid { background: var(--sky); overflow-y: auto; pointer-events: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; }

.round-btn { width: 58px; height: 58px; border-radius: 50%; background: var(--white); box-shadow: 0 5px 0 var(--grey); display: grid; place-items: center; }
.round-btn svg { width: 30px; height: 30px; }
.round-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--grey); }
.corner-start { position: fixed; top: max(14px, env(safe-area-inset-top)); right: max(14px, env(safe-area-inset-right)); z-index: 4; }
.corner-end { position: fixed; top: max(14px, env(safe-area-inset-top)); left: max(14px, env(safe-area-inset-left)); z-index: 5; }
#btn-sound[hidden] { display: none; }

.pill { padding: 10px 26px; border-radius: 999px; font-size: 22px; font-weight: 800; color: var(--white); white-space: nowrap; }
.pill:active { transform: translateY(4px); }
.pill.green { background: var(--green); box-shadow: 0 6px 0 var(--green-d); }
.pill.orange { background: var(--orange); box-shadow: 0 6px 0 var(--orange-d); }
.pill.ghost { background: var(--white); color: var(--ink); box-shadow: 0 6px 0 var(--grey); }
.pill.soft { background: var(--panel); color: var(--ink); box-shadow: 0 5px 0 var(--grey); }
.pill b { display: inline-block; min-width: 1.6em; margin-inline-start: 6px; padding: 0 8px; border-radius: 999px; background: var(--blue); color: var(--white); }

.title { margin: 0; padding: 0 66px; text-align: center; font-size: clamp(40px, 11vw, 110px); font-weight: 800; line-height: 1; color: var(--white); text-shadow: 0 6px 0 var(--ink); }
.subtitle { margin: 8px 0 12px; font-size: clamp(30px, 6vmin, 46px); font-weight: 800; color: var(--white); text-shadow: 0 4px 0 var(--ink); }

#s-home { justify-content: space-between; padding-top: max(18px, 3vh); padding-bottom: max(18px, 4vh); }
.home-actions { width: min(100%, 420px); padding: 16px; border-radius: 34px; background: var(--white); box-shadow: 0 9px 0 var(--grey); display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
.big-btn { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 24px; border-radius: 999px; background: var(--orange); box-shadow: 0 8px 0 var(--orange-d); color: var(--white); font-size: clamp(30px, 6vmin, 42px); font-weight: 800; }
.big-btn svg { width: 34px; height: 34px; transform: scaleX(-1); }
.big-btn:active { transform: translateY(6px); box-shadow: 0 2px 0 var(--orange-d); }

.letters-panel { width: min(100%, 640px); flex-shrink: 0; background: var(--white); border-radius: 34px; box-shadow: 0 10px 0 var(--grey); padding: 14px; display: flex; flex-direction: column; gap: 14px; }
.letters-panel > .pill { align-self: center; }
.letter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 10px; direction: rtl; }
.pick { height: 64px; padding: 0; border-radius: 18px; background: var(--panel); box-shadow: 0 5px 0 var(--grey); font-size: 36px; font-weight: 800; line-height: 1; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; }
.pick span { display: block; width: 100%; text-align: center; }
.pick:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--grey); }
.pick.on { background: var(--green); color: var(--white); box-shadow: 0 5px 0 var(--green-d); }
.pick-note { align-self: center; padding: 4px 16px; border-radius: 999px; background: var(--blank); font-size: 20px; font-weight: 800; }
.pick-note[hidden] { display: none; }
.go-btn { position: sticky; bottom: 0; flex-shrink: 0; margin: 18px 0 8px; min-width: 220px; }
.go-btn:disabled { background: var(--grey); box-shadow: 0 8px 0 #b9bfd1; }
.stars { display: flex; gap: 4px; direction: ltr; }
.stars svg { width: 26px; height: 26px; fill: var(--grey); }
.stars svg.on { fill: var(--yellow); }
.stars.big svg { width: clamp(54px, 13vmin, 88px); height: clamp(54px, 13vmin, 88px); }

/* اللعب: الصورة فوق، والبالونات صف واحد تحتها بنفس المستوى والحجم */
.play { flex: 1; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; gap: 10px; padding: 64px 0 96px; }
.card { position: relative; z-index: 2; --s: min(46vmin, 300px); background: var(--white); border-radius: 34px; box-shadow: 0 10px 0 var(--grey); padding: 14px 14px 12px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.card.in { animation: pop .45s ease-out; }
.pic { width: var(--s); height: var(--s); border-radius: 26px; background: var(--pic-bg); display: grid; place-items: center; overflow: hidden; }
.pic > svg { width: 88%; height: 88%; }
.answer { display: flex; align-items: center; gap: 12px; direction: rtl; min-height: 62px; }
.tile { width: 62px; height: 62px; border-radius: 16px; background: var(--white); display: grid; place-items: center; font-size: 42px; font-weight: 800; line-height: 1; }
.tile.blank { background: var(--blank); border: 4px dashed var(--orange); }
.tile.filled { background: var(--green); color: var(--white); border: 0; animation: land .4s ease-out; }
.parts { display: flex; gap: 6px; direction: rtl; }
.tile.part { background: var(--panel); }
.tile[hidden] { display: none; }
.word { font-size: 38px; font-weight: 800; line-height: 1; }
.word:empty { display: none; }
.word.in { animation: pop .4s ease-out; }

.balloons { --n: 3; display: flex; justify-content: center; align-items: flex-end; gap: clamp(10px, 3vw, 28px); direction: rtl; width: 100%; }
.balloon { --w: min(calc((100vw - 48px) / var(--n) - 18px), 22vh, 160px); position: relative; width: var(--w); height: calc(var(--w) * 1.62); padding: 0; background: none; transform-origin: 50% 100%; }
.balloon .bob { position: absolute; inset: 0; animation: bob 2.6s ease-in-out infinite alternate; }
.balloon .bob > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.balloon .ch { position: absolute; left: 0; right: 0; top: 4%; height: 62%; display: grid; place-items: center; font-size: calc(var(--w) * .46); font-weight: 800; line-height: 1; color: var(--ink); pointer-events: none; }
.balloon.appear { animation: grow .42s cubic-bezier(.3, 1.6, .5, 1) backwards; }
.balloon.shake { animation: shake .5s ease-in-out; }
.balloon.hint .bob { animation: hint .7s ease-in-out infinite alternate; }
.balloon.flying { z-index: 3; }
.balloon.away { transition: transform 1.1s ease-in, opacity 1.1s ease-in; transform: translateY(-110vh); opacity: 0; pointer-events: none; }
.balloon[disabled] { cursor: default; }
@keyframes bob { from { transform: translateY(-4px) rotate(-2deg); } to { transform: translateY(6px) rotate(2deg); } }
@keyframes hint { from { scale: 1; } to { scale: 1.12; } }
@keyframes grow { from { transform: scale(0); } }
@keyframes shake { 20% { transform: translateX(-12px) rotate(-6deg); } 40% { transform: translateX(10px) rotate(5deg); } 60% { transform: translateX(-7px) rotate(-3deg); } 80% { transform: translateX(4px); } }
@keyframes land { 0% { transform: scale(1.5); } 60% { transform: scale(.85); } 100% { transform: scale(1); } }

.listen { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); width: 84px; height: 84px; border-radius: 50%; background: var(--yellow); box-shadow: 0 7px 0 var(--yellow-d); display: grid; place-items: center; }
.listen svg { width: 46px; height: 46px; }
.listen:active { transform: translateY(5px); box-shadow: 0 2px 0 var(--yellow-d); }
.listen.pulse { animation: pulse .5s ease-out; }
@keyframes pulse { 40% { transform: scale(1.18); } }
.progress { position: fixed; left: max(16px, env(safe-area-inset-left)); bottom: max(16px, env(safe-area-inset-bottom)); display: flex; gap: 5px; padding: 8px 12px; border-radius: 999px; background: var(--white); direction: rtl; pointer-events: none; }
.progress svg { width: 18px; height: 24px; fill: var(--grey); }
.progress svg.done { fill: var(--orange); }

#s-results { justify-content: flex-start; padding-top: 7vh; z-index: 6; }
.result-card { background: var(--white); border-radius: 36px; box-shadow: 0 10px 0 var(--grey); padding: 22px 28px 28px; display: flex; flex-direction: column; align-items: center; gap: 16px; animation: pop .4s ease-out; }
.unlock { padding: 6px 18px; border-radius: 999px; background: var(--yellow); font-size: 22px; font-weight: 800; }
.unlock[hidden] { display: none; }
.res-actions { display: flex; flex-direction: column; gap: 16px; }
.res-actions .pill { min-width: 220px; }
.res-actions .pill[hidden] { display: none; }
@keyframes pop { 0% { transform: scale(.6); } 70% { transform: scale(1.08); } 100% { transform: scale(1); } }

.sticky-head { position: sticky; top: calc(-1 * max(14px, env(safe-area-inset-top))); z-index: 3; width: calc(100% + 28px); margin: calc(-1 * max(14px, env(safe-area-inset-top))) -14px 4px; padding: max(14px, env(safe-area-inset-top)) 84px 10px; background: var(--sky); display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.sticky-head .subtitle { margin: 0 0 4px; line-height: 58px; }
.album-note { padding: 4px 16px; border-radius: 999px; background: var(--white); font-size: 18px; font-weight: 800; text-align: center; }
.album-note b { display: inline-block; margin-inline-start: 6px; padding: 0 10px; border-radius: 999px; background: var(--blue); color: var(--white); }
.album { flex-shrink: 0; width: min(100%, 900px); display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 14px; padding: 6px 0 16px; }
.album button { border-radius: 26px; background: var(--white); box-shadow: 0 7px 0 var(--grey); padding: 8px 8px 10px; display: flex; flex-direction: column; gap: 8px; }
.album .ph { width: 100%; aspect-ratio: 1; border-radius: 20px; background: var(--pic-bg); display: flex; align-items: center; justify-content: center; }
.album button.locked .ph { background: var(--panel); }
.album button:active { transform: translateY(5px); box-shadow: 0 2px 0 var(--grey); }
.album .ph > svg { width: 86%; height: 86%; }
.album button.locked .ph > svg { filter: brightness(0) invert(.88); }
.album button.locked { cursor: default; }
.album .lbl { display: flex; align-items: center; justify-content: center; gap: 8px; direction: rtl; min-height: 40px; }
.album .lt { width: 40px; height: 40px; border-radius: 12px; background: var(--green); color: var(--white); display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 800; line-height: 1; flex-shrink: 0; }
.album .wd { font-size: 24px; font-weight: 800; line-height: 1; white-space: nowrap; }
.album button.locked .lt { background: var(--panel); color: #8d93aa; }

#confetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 7; }
#confetti i { position: absolute; top: -20px; width: 12px; height: 18px; border-radius: 3px; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(110vh) rotate(720deg); } }

/* بالونات الزينة في الرئيسية */
.home-balloons { --n: 3; pointer-events: none; width: min(100%, 420px); }
.home-balloons .balloon { --w: min(26vw, 20vh, 130px); }

/* الشاشات القصيرة (جوال بالعرض): الصورة يمين والبالونات يسار */
@media (max-height: 520px) {
  .title { font-size: 46px; }
  .home-balloons { display: none; }
  .home-actions { width: min(100%, 640px); flex-direction: row; align-items: center; padding: 10px; gap: 10px; }
  .home-actions .pill { flex: 1; }
  .big-btn { padding: 4px 30px; font-size: 28px; }
  .res-actions { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .res-actions .pill { min-width: 0; font-size: 20px; }
  .result-card { gap: 10px; padding: 14px 20px 20px; }
  .listen { width: 68px; height: 68px; }
  .play { flex-direction: row; padding: 0 84px; }
  .card { position: relative; z-index: 2; --s: min(52vh, 240px); padding: 10px; gap: 6px; }
  .tile { width: 50px; height: 50px; font-size: 34px; }
  .word { font-size: 30px; }
  .answer { min-height: 50px; }
  .balloons { width: auto; flex: 1; }
  .balloon { --w: min(calc((100vw - 300px - 52vh) / var(--n) - 14px), 34vh, 140px); }
}

/* بقية الكلمة حول الفراغ تتسع لطولها */
.tile.part { width: auto; min-width: 62px; padding: 0 10px; }
.tile > svg { width: 70%; height: 70%; }
/* شكل داخل بطن البالون */
.balloon .ch .shape { width: calc(var(--w) * .44); height: calc(var(--w) * .44); display: grid; place-items: center; }
.balloon .ch .shape svg { width: 100%; height: 100%; }

/* تعليمات اللعبة في الرئيسية (للأهل) */
.howto { margin: 12px 0 0; max-width: min(100%, 420px); padding: 10px 18px; border-radius: 22px; background: var(--white); box-shadow: 0 6px 0 var(--grey); font-size: clamp(16px, 4.4vw, 19px); font-weight: 600; line-height: 1.5; text-align: center; color: var(--ink); }
@media (max-height: 520px) { .howto { margin-top: 6px; padding: 6px 14px; font-size: 15px; } }

/* زر الخروج وتنبيهه */
.exit-btn { position: fixed; z-index: 8; top: max(14px, env(safe-area-inset-top)); left: max(14px, env(safe-area-inset-left)); }
.exit-btn.on-home { left: auto; right: max(14px, env(safe-area-inset-right)); }
.exit-btn svg { width: 26px; height: 26px; }
.exit-dlg { position: fixed; inset: 0; z-index: 20; background: rgba(34, 38, 75, .45); display: grid; place-items: center; padding: 16px; }
.exit-dlg[hidden] { display: none; }
.exit-card { background: var(--white); border-radius: 34px; box-shadow: 0 10px 0 var(--grey); padding: 22px 24px 26px; display: flex; flex-direction: column; align-items: center; gap: 18px; animation: pop .3s ease-out; }
.exit-card p { margin: 0; font-size: 24px; font-weight: 800; color: var(--ink); }
.exit-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* يد التلميح فوق الفاكهة */
.hand { position: absolute; width: 16%; aspect-ratio: 1; margin: -30% 0 0 -4%; pointer-events: none; z-index: 4; animation: point .7s ease-in-out infinite alternate; }
.hand svg { width: 100%; height: 100%; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .15)); }
@keyframes point { from { translate: 0 -6px; } to { translate: 0 6px; } }
.fruit.tap-me svg { animation: hint .6s ease-in-out infinite alternate; }
.fruit.in-basket { z-index: 3; }
.fruit.in-basket svg { animation: none; }

/* ---------- مشترك للألعاب الجديدة ---------- */
#stage { position: fixed; inset: 0; z-index: 0; }
#stage canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.screen { z-index: 1; }
.has-stage #world { display: none; }
.scene { flex: 1; width: 100%; pointer-events: none !important; position: relative; }
.hand3d { position: fixed; z-index: 3; width: 60px; height: 60px; margin: -64px 0 0 -24px; pointer-events: none; animation: point .7s ease-in-out infinite alternate; }
.hand3d[hidden] { display: none; }
.hand3d svg { width: 100%; height: 100%; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .2)); }
.home-deco { flex: 1; }
.modes { margin: auto 0; display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; direction: rtl; padding-bottom: 16px; }
.mode-card { width: min(40vw, 200px); padding: 12px 12px 10px; border-radius: 28px; background: var(--white); box-shadow: 0 8px 0 var(--grey); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.mode-card:active { transform: translateY(5px); box-shadow: 0 3px 0 var(--grey); }
.mode-art { width: 100%; aspect-ratio: 1.2; border-radius: 20px; background: var(--pic-bg); display: flex; align-items: center; justify-content: center; gap: 4px; font-size: clamp(30px, 9vw, 54px); font-weight: 800; color: var(--blue); }
.mode-art svg { width: 40%; height: auto; }
.mode-card span { font-size: 24px; font-weight: 800; color: var(--ink); }
@media (max-height: 520px) { .mode-card { width: min(26vw, 180px); } .mode-card span { font-size: 20px; } }

/* ---------- خاص باللعبة ---------- */
/* أزرار التحكم: الأسهم يسار والقفز يمين (تحت). بدون عدسة التكبير والتحديد في الآيفون عند الضغط الطويل */
#hud, #hud * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.pad { position: fixed; z-index: 4; bottom: max(16px, env(safe-area-inset-bottom)); display: flex; gap: 12px; direction: ltr; touch-action: none; }
.pad[hidden] { display: none; }
.pad.left { left: max(16px, env(safe-area-inset-left)); }
.pad.right { right: max(16px, env(safe-area-inset-right)); }
.pad button { touch-action: none; -webkit-user-select: none; user-select: none; display: flex; align-items: center; justify-content: center; }
.pad .arrow { width: 78px; height: 78px; border-radius: 26px; background: rgba(255,255,255,.92); color: var(--ink); box-shadow: 0 6px 0 var(--grey); }
.pad .arrow svg { width: 44px; height: 44px; }
.pad .jump { width: 104px; height: 104px; border-radius: 50%; background: var(--green); color: #fff; box-shadow: 0 8px 0 var(--green-d); }
.pad .jump svg { width: 56px; height: 56px; }
.pad .on { transform: translateY(5px); box-shadow: 0 1px 0 var(--grey); }
.pad .jump.on { box-shadow: 0 3px 0 var(--green-d); }
.pad .hint-pulse { animation: hint .55s ease-in-out infinite alternate; }
@media (max-height: 500px) { .pad .arrow { width: 66px; height: 66px; } .pad .jump { width: 90px; height: 90px; } }

/* البطاقة فوق: زر «اسمع» + صورة الكلمة */
.hj-card { position: fixed; top: max(12px, env(safe-area-inset-top)); left: 50%; translate: -50% 0; z-index: 4; display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 30px; background: var(--white); box-shadow: 0 7px 0 var(--grey); }
.hj-card[hidden] { display: none; }
.hj-card .listen { position: static; width: 72px; height: 72px; }
.hj-card .listen svg { width: 40px; height: 40px; }
.hj-card .pic { width: 72px; height: 72px; }
.hj-card .pic:empty { display: none; }
.hj-card .pic svg { width: 100%; height: 100%; }
/* النجوم والتقدّم تحت البطاقة */
.hj-top { position: fixed; top: calc(max(12px, env(safe-area-inset-top)) + 100px); left: 50%; translate: -50% 0; z-index: 4; display: flex; gap: 8px; align-items: center; pointer-events: none; }
.hj-top[hidden] { display: none; }
.hj-stars { display: flex; align-items: center; gap: 4px; padding: 2px 12px 2px 8px; border-radius: 999px; background: var(--white); font-size: 22px; font-weight: 800; color: var(--ink); }
.hj-stars svg { width: 26px; height: 26px; }
#hud .progress { position: static; padding: 6px 10px; }
#hud .progress svg { width: 14px; height: 18px; }
@media (max-height: 500px) {
  .hj-card .listen, .hj-card .pic { width: 58px; height: 58px; }
  .hj-top { top: max(12px, env(safe-area-inset-top)); left: auto; right: calc(max(16px, env(safe-area-inset-right)) + 74px); translate: none; flex-direction: column; align-items: flex-end; }
}

/* اختيار البطل: المشهد ثلاثي الأبعاد يبان، والأزرار شفافة فوق كل بطل واسمه تحته */
#s-hero.screen.solid { background: transparent; }
#s-hero .sticky-head { background: transparent; }
.hero-pick { position: fixed; z-index: 3; display: flex; align-items: flex-end; justify-content: center; background: transparent; padding: 0; }
.hero-pick span { translate: 0 50%; padding: 2px 18px 4px; border-radius: 999px; background: var(--white); box-shadow: 0 5px 0 var(--grey); font-size: 24px; font-weight: 800; color: var(--ink); white-space: nowrap; }
.hero-pick.on span { background: var(--yellow); box-shadow: 0 5px 0 var(--yellow-d); }
.mode-art span { font-weight: 800; }

/* يد التلميح */
.hj-hand { position: fixed; z-index: 6; width: 64px; height: 64px; pointer-events: none; translate: -50% 0; animation: hjhand .7s ease-in-out infinite alternate; }
.hj-hand[hidden] { display: none; }
@keyframes hjhand { from { transform: translateY(0); } to { transform: translateY(14px); } }