/* ============================================================
   Bloom Kids — لعبة "فين اللي راح؟"
   بتكمّل على css/style.css (الهوية) + css/game-ui.css (قطع الألعاب
   المشتركة: شريط المعلومات، الطبقات، التوست، الكونفيتي…)
   ============================================================ */

.wm-shell {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100dvh - var(--header-h));
  display: flex;
  flex-direction: column;
  padding: 0.55rem var(--page-pad) 1.4rem;
}

/* المحتوى كتلة واحدة في نص المساحة الفاضية — زي "أوجد المختلف" */
.wm-main { margin-block: auto; width: 100%; }

.wm-ask {
  text-align: center; font-family: var(--font-head); font-weight: 800;
  color: var(--navy); font-size: 1.25rem; margin-bottom: 0.5rem;
  min-height: 1.6em;   /* السؤال بيتغيّر ٣ مرات في الجولة — بنثبّت
                          مكانه عشان الشبكة متنطّش فوق وتحت */
}

.wm-tip {
  text-align: center; color: var(--ink-soft); font-weight: 600;
  font-size: 0.86rem; margin-top: 0.9rem; min-height: 1.4em;
}
/* لما يبقى فاضي (جولات "إيه اللي راح") ميحجزش مكان — كل بكسل هنا
   بيفرق في إن الشبكة والدرج يفضلوا في شاشة واحدة */
.wm-tip:empty { min-height: 0; margin-top: 0; }

/* ============ عدّاد الحفظ ============ */
.wm-timer {
  display: flex; align-items: center; gap: 0.6rem;
  width: min(420px, 100%); margin: 0 auto 0.9rem;
}
/* display:flex بتلغي مفعول خاصية hidden — الفخ المتكرر في المشروع ده */
.wm-timer[hidden] { display: none; }

.wm-timer .progress-track { flex: 1; margin-bottom: 0; }
.wm-timer .progress-bar { background: linear-gradient(90deg, var(--yellow), var(--pink)); }

.wm-clock {
  font-family: var(--font-head); font-weight: 800; color: var(--navy);
  background: var(--white); border-radius: 99px; padding: 0.15rem 0.7rem;
  font-size: 0.95rem; white-space: nowrap;
}

/* ============ شبكة الصور ============
   عرض العمود بيتحسب من عرض الشاشة وطولها مع بعض، عشان الشبكة كلها
   تفضل في شاشة واحدة من غير سكرول على الموبايل — وده مهم هنا أكتر
   من أي لعبة تانية، لأن اللي بيسكرول عشان يشوف الصور بيضيّع الوقت
   اللي المفروض يحفظ فيه. عدد الأعمدة بيتحط من الجافاسكربت (--cols). */
.wm-grid {
  --cell: clamp(74px, min(23vw, 15vh), 148px);
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), 1fr);
  gap: 0.5rem;
  width: min(100%, calc(var(--cols, 3) * var(--cell)));
  margin-inline: auto;
}

/* في جولات "إيه اللي راح" فيه صف اختيارات تحت الشبكة كمان، فبنصغّر
   الخلية شوية عشان الاتنين يفضلوا في شاشة واحدة من غير سكرول.
   الكلاس بيتحط من أول الجولة (مش عند ظهور الاختيارات) عن قصد —
   لو الشبكة غيّرت مقاسها بين "احفظ" و"جاوب" كانت هتبوّظ الذاكرة
   المكانية اللي اللعبة كلها قايمة عليها. */
.wm-main.has-choices .wm-grid { --cell: clamp(62px, min(19vw, 11.5vh), 124px); }

.wm-card {
  display: flex; flex-direction: column; align-items: stretch;
  background: var(--white); font-family: inherit;
  border: 3px solid rgba(51, 45, 110, 0.12);
  border-radius: var(--radius-sm);
  padding: 0; overflow: hidden;
  box-shadow: 0 4px 12px rgba(51, 45, 110, 0.08);
  transition: transform 0.2s ease, border-color 0.2s ease,
              box-shadow 0.2s ease, opacity 0.3s ease;
}
.wm-card:not(:disabled) { cursor: pointer; }
.wm-card:not(:disabled):hover {
  transform: translateY(-5px); border-color: var(--teal);
  box-shadow: 0 12px 22px rgba(35, 168, 159, 0.24);
}
.wm-card:focus-visible { outline: 4px solid var(--purple); outline-offset: 3px; }
/* مبنبهّتش المعطّل: في مرحلة الحفظ كل الصور معطّلة وهي اللي المفروض
   يركّز فيها */
.wm-card:disabled { opacity: 1; }

.wm-card-media {
  position: relative; aspect-ratio: 1; background: var(--cream);
}
.wm-card-media img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  transition: opacity 0.35s ease;
}

.wm-card-name {
  font-family: var(--font-head); font-weight: 800;
  font-size: clamp(0.62rem, 2.4vw, 0.85rem);
  line-height: 1.2; color: var(--navy);
  padding: 0.3rem 0.2rem; min-height: 2.4em;
  display: grid; place-items: center;
  border-top: 2px solid rgba(51, 45, 110, 0.08);
}

/* المكان الفاضي بتاع الصورة اللي راحت — بنسيبه مكانه بدل ما الصور
   تترصّ من تاني، لأن الفراغ نفسه هو نص اللعبة */
.wm-card.is-empty {
  display: grid; place-items: center;
  border: 3px dashed var(--pink);
  border-radius: var(--radius-sm);
  background: rgba(239, 95, 124, 0.07);
  font-family: var(--font-head); font-weight: 800;
  font-size: 2rem; color: var(--pink);
  animation: wm-gap 1.6s ease-in-out infinite;
}
@keyframes wm-gap {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50% { transform: scale(1.05); opacity: 1; }
}

/* ============ لحظة "بنغيّر حاجة" ============
   الكروت بتتغطّى بعلامة استفهام من غير ما نمسح الشبكة، عشان
   المقاسات متنطّش والطفل يفضل شايف الأماكن */
.wm-grid.is-back .wm-card-media img { opacity: 0; }
.wm-grid.is-back .wm-card-media::after {
  content: "؟";
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: var(--navy); color: var(--white);
  font-family: var(--font-head); font-weight: 800; font-size: 1.8rem;
  animation: wm-flip 0.35s ease;
}
.wm-grid.is-back .wm-card-name { opacity: 0.35; }
@keyframes wm-flip {
  from { transform: rotateY(90deg); }
  to { transform: rotateY(0); }
}

/* ============ علامة صح/غلط ============ */
.wm-mark {
  position: absolute; inset-block-start: 5px; inset-inline-end: 5px;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 1rem; font-weight: 800; color: var(--white);
  box-shadow: 0 4px 10px rgba(51, 45, 110, 0.3);
  animation: wm-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes wm-pop {
  from { transform: scale(0.2); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.wm-card.is-right, .wm-choice.is-right {
  border-color: var(--green); background: rgba(125, 194, 66, 0.12);
  animation: wm-bounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.is-right .wm-mark { background: #5aa832; }

.wm-card.is-wrong, .wm-choice.is-wrong {
  border-color: var(--pink); background: rgba(239, 95, 124, 0.1);
  animation: wm-shake 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
.is-wrong .wm-mark { background: var(--pink-dark); }

@keyframes wm-bounce {
  0% { transform: scale(0.94); }
  60% { transform: scale(1.05); }
  100% { transform: scale(1); }
}
@keyframes wm-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-9px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(3px); }
}

/* ============ الاختيارات الأربعة (نوع "إيه اللي راح") ============
   الأربعة دول كلهم **مش** موجودين في الشبكة عن قصد، فمينفعش يحلّها
   بالاستبعاد — لازم يفتكر بجد اللي شافه */
.wm-tray {
  width: min(580px, 100%); margin: 0.7rem auto 0;
  background: rgba(106, 79, 182, 0.09);
  border: 2px dashed rgba(106, 79, 182, 0.35);
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.5rem 0.55rem;
}
.wm-tray-label {
  text-align: center; font-family: var(--font-head); font-weight: 800;
  font-size: 0.9rem; color: var(--purple); margin-bottom: 0.4rem;
}

.wm-choices {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
}
.wm-choices[hidden] { display: none; }   /* display:grid بتلغي hidden */

.wm-choice {
  display: flex; flex-direction: column; cursor: pointer;
  font-family: inherit; background: var(--white);
  border: 3px solid rgba(106, 79, 182, 0.25);
  border-radius: var(--radius-sm); overflow: hidden; padding: 0;
  box-shadow: 0 4px 12px rgba(51, 45, 110, 0.08);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.wm-choice:not(:disabled):hover {
  transform: translateY(-5px); border-color: var(--purple);
  box-shadow: 0 12px 22px rgba(106, 79, 182, 0.24);
}
.wm-choice:focus-visible { outline: 4px solid var(--purple); outline-offset: 3px; }
.wm-choice:disabled { cursor: default; }

.wm-choice-media { position: relative; aspect-ratio: 1; background: var(--cream); }
.wm-choice-media img { width: 100%; height: 100%; object-fit: contain; display: block; }

.wm-choice-name {
  font-family: var(--font-head); font-weight: 800;
  font-size: clamp(0.65rem, 2.4vw, 0.88rem); line-height: 1.2;
  color: var(--navy); padding: 0.35rem 0.2rem; min-height: 2.3em;
  display: grid; place-items: center;
  border-top: 2px solid rgba(51, 45, 110, 0.08);
}

/* ============ شاشة نتيجة الجولة ============ */
.wm-shots {
  display: flex; justify-content: center; gap: 0.7rem; margin-bottom: 0.9rem;
}
.wm-shot {
  width: 116px; height: 116px;
  border-radius: 20px; overflow: hidden; background: var(--cream);
  border: 4px solid var(--white); box-shadow: var(--shadow);
  outline: 3px solid rgba(51, 45, 110, 0.1);
  animation: wm-reveal 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.wm-shot img { width: 100%; height: 100%; object-fit: contain; }
@keyframes wm-reveal {
  from { transform: scale(0.55) rotate(-6deg); opacity: 0; }
  to { transform: scale(1) rotate(0); opacity: 1; }
}

/* أهم سطر في الشاشة — بنبرزه زي "القاعدة" في أوجد المختلف */
.overlay-card .wm-answer {
  background: rgba(35, 168, 159, 0.1);
  border: 3px solid rgba(35, 168, 159, 0.35);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem; margin-bottom: 1rem;
  font-family: var(--font-head); font-weight: 800;
  font-size: 1rem; color: var(--teal-dark); line-height: 1.6;
}

/* ============ شاشة النهاية ============ */
.end-score { font-family: var(--font-head); color: var(--navy); margin-bottom: 0.5rem; }
.end-score b { font-size: 3rem; font-weight: 800; color: var(--pink); line-height: 1; }
.end-score span { font-weight: 700; font-size: 0.95rem; color: var(--ink-soft); }

/* لازم تسبق `.overlay-card p` في الترتيب المحدِّد، عشان كده متخصّصة */
.overlay-card .end-stars {
  font-size: 1.8rem; letter-spacing: 0.15rem; margin-bottom: 0.6rem;
}

/* ============ الشاشات الصغيرة ============ */
@media (max-width: 900px) {
  .wm-ask { font-size: 1.05rem; }
  .wm-grid { gap: 0.4rem; }
  /* المسافات هنا مقيسة مش مظبوطة بالنظر: أصعب حالة في اللعبة
     (١٢ صورة + درج الاختيارات) بتطلع أطول من شاشة ٣٦٠×٦٤٠ بشوية،
     فبنوفّر منها. لو زوّدتهم تاني، شغّل الفحص وشوف الأرقام. */
  .wm-choices { gap: 0.45rem; }
  .wm-tray { margin-top: 0.5rem; padding: 0.35rem 0.4rem 0.45rem; }
  .wm-tray-label { font-size: 0.82rem; margin-bottom: 0.3rem; }
  .wm-tip { font-size: 0.8rem; margin-top: 0.5rem; }
  .wm-shot { width: 92px; height: 92px; }
}

/* ⚠️ الاختيارات بتفضل ٤ في سطر واحد على كل المقاسات.
   جرّبنا ٢×٢ على الموبايل عشان تبقى أكبر — بس ده زوّد طول الصفحة
   ٢٩٠ بكسل وخلّى الشاشة تسكرول في مرحلة السؤال بالظبط، واللي هو
   أسوأ وقت ممكن تسكرول فيه. ٤ في سطر بيدّي كارت ٨٩px، نفس مقاس
   كروت الشبكة بالظبط، وده كفاية للدوس بالصباع. */

/* ============ تقليل الحركة ============ */
@media (prefers-reduced-motion: reduce) {
  .wm-card, .wm-choice, .wm-mark, .wm-shot, .wm-card.is-empty { animation: none !important; }
  .wm-grid.is-back .wm-card-media::after { animation: none !important; }
  .wm-card, .wm-choice { transition: none; }
}