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

/* ============================================================
   وضع التركيز — الصفحة كلها مساحة لعب

   الفكرة: نحسب أكبر ارتفاع ممكن للصورة بحيث تحقق شرطين مع بعض:
     ١) الاتنين مع بعض ميعدّوش عرض الشاشة
     ٢) الصورة ميعدّش الارتفاع الفاضي بعد الهيدر والشريط
   وبنسيب aspect-ratio يحسب العرض من الارتفاع، عشان الصورتين
   يطلعوا أكبر حاجة ممكنة من غير ما حد منهم يتقص أو يحصل سكرول.
   ============================================================ */
.game-page {
  --board-ratio: 600 / 327;   /* نسبة الصور — لازم تتغير لو الصور اتغيرت */
  --board-gap: 6px;
  --board-border: 3px;
  /* الهيدر + شريط المعلومات + التقدّم + التلميح + الحشو (مقاسة في المتصفح) */
  --chrome: 172px;
  --chrome-solo: 156px;       /* من غير سطر التلميح */
}

/* ============ الهيكل ============ */
.game-shell {
  width: 100%;
  margin: 0;
  /* بتملا باقي الشاشة تحت الهيدر عشان الصورتين يتظبطوا في النص
     ومايفضلش فراغ أبيض تحتيهم */
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100dvh - var(--header-h));
  display: flex;
  flex-direction: column;
  background: var(--white);
  padding: 0.55rem var(--page-pad) 0.7rem;
  position: relative;
}

.scene-hint {
  text-align: center; color: var(--ink-soft); font-weight: 700;
  font-size: 0.9rem; margin-bottom: 0.5rem;
}

/* ============ الصورتين ============ */
.game-boards {
  display: flex;
  flex: 1;                    /* تاخد باقي المساحة وتتظبط في نصها */
  justify-content: center;
  align-items: center;
  gap: var(--board-gap);

  /* أكبر ارتفاع ممكن للصورة: الأصغر بين "اللي الشاشة بتسمح بيه بالطول"
     و"اللي بيخلي الاتنين يدخلوا في العرض" (٤ × البرواز = بروازين) */
  --frames: calc(4 * var(--board-border));
  --board-h: min(
    calc(100vh - var(--chrome)),
    calc((100vw - var(--board-gap) - (2 * var(--page-pad)) - var(--frames)) / 2 / (var(--board-ratio)))
  );
  --board-h: min(
    calc(100dvh - var(--chrome)),
    calc((100vw - var(--board-gap) - (2 * var(--page-pad)) - var(--frames)) / 2 / (var(--board-ratio)))
  );
}

/* ---- وضع التكبير: صورة واحدة بس، بتاخد الشاشة كلها ----
   جنب بعض الصورتين وصلوا أقصى حجم ممكن (العرض هو اللي بيحدّهم)،
   فالطريقة الوحيدة لتكبير أكتر إن اللاعب يشوف واحدة في المرة
   ويبدّل بينهم — ودي كمان بتسهّل المقارنة لأن الفرق بيـ"يرفرف". */
.is-solo .board { display: none; }
.is-solo .board.is-shown { display: block; }
.is-solo .scene-hint { display: none; }
.is-solo .game-boards {
  --board-h: min(
    calc(100vh - var(--chrome-solo)),
    calc((100vw - (2 * var(--page-pad)) - (2 * var(--board-border))) / (var(--board-ratio)))
  );
  --board-h: min(
    calc(100dvh - var(--chrome-solo)),
    calc((100vw - (2 * var(--page-pad)) - (2 * var(--board-border))) / (var(--board-ratio)))
  );
}

/* اسم الصورة بيبقى أوضح في وضع التكبير عشان اللاعب يعرف هو فين */
.is-solo .board-tag { font-size: 0.95rem; padding: 0.3rem 1rem; }

.board {
  position: relative; margin: 0;
  flex: 0 0 auto;                     /* الحجم بييجي من الصورة اللي جوه */
  border-radius: var(--radius-sm);
  border: var(--board-border) solid var(--white);
  box-shadow: var(--shadow);
  background: var(--white);
  overflow: hidden;
  cursor: crosshair;
  outline: 3px solid rgba(51, 45, 110, 0.08);
}

/* الصورة هي اللي بتحدد المقاس: ارتفاع محسوب + النسبة تجيب العرض */
.board svg.scene {
  display: block;
  height: var(--board-h);
  width: auto;
  aspect-ratio: var(--board-ratio);
  touch-action: manipulation;
}

/* مراحل الصور: منع سحب الصورة أو ظهور قائمة "حفظ الصورة" وسط اللعب */
.board { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.scene image { -webkit-user-drag: none; }

.board-tag {
  position: absolute; top: 8px; inset-inline-start: 8px; z-index: 3;
  background: var(--navy); color: var(--white);
  font-family: var(--font-head); font-weight: 700; font-size: 0.78rem;
  padding: 0.15rem 0.7rem; border-radius: 99px;
  box-shadow: 0 4px 10px rgba(51, 45, 110, 0.25);
}
.board-tag-alt { background: var(--teal); }

/* اهتزاز عند الخطأ */
.board.is-wrong { animation: board-shake 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97); }
.board.is-wrong::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: rgba(239, 95, 124, 0.2);
  animation: flash-red 0.45s ease-out forwards;
}
@keyframes board-shake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-9px) rotate(-0.6deg); }
  30% { transform: translateX(8px) rotate(0.6deg); }
  45% { transform: translateX(-6px); }
  60% { transform: translateX(5px); }
  80% { transform: translateX(-2px); }
}
@keyframes flash-red { from { opacity: 1; } to { opacity: 0; } }

/* ============ علامة الإجابة الصح ============ */
.marker { animation: marker-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
@keyframes marker-pop {
  0% { transform: scale(0.3); opacity: 0; }
  60% { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.marker-halo {
  fill: rgba(125, 194, 66, 0.22);
  animation: halo-breathe 2.4s ease-in-out infinite;
}
@keyframes halo-breathe { 0%, 100% { opacity: 0.75; } 50% { opacity: 0.35; } }

.marker-ring {
  fill: none; stroke: #5aa832; stroke-width: 5.5; stroke-linecap: round;
  animation: draw-ring 0.55s ease-out 0.05s forwards;
}
@keyframes draw-ring { to { stroke-dashoffset: 0; } }

/* شارة الصح بتقف على حرف الدايرة عشان متغطّيش الفرق نفسه */
.marker-tick path {
  fill: none; stroke: #ffffff; stroke-width: 3;
  stroke-linecap: round; stroke-linejoin: round;
}
.marker-tick {
  animation: tick-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) 0.35s both;
  filter: drop-shadow(0 2px 3px rgba(51, 45, 110, 0.35));
}
@keyframes tick-in {
  from { transform: scale(0); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.spark { fill: var(--yellow); animation: spark-fly 0.75s ease-out forwards; }
@keyframes spark-fly {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(0); opacity: 0; }
}

/* ============ علامة الإجابة الغلط ============ */
.miss { animation: miss-fade 0.7s ease-out forwards; }
@keyframes miss-fade {
  0% { transform: scale(0.4); opacity: 1; }
  55% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1.5); opacity: 0; }
}
.miss-ring { fill: rgba(239, 95, 124, 0.18); stroke: var(--pink); stroke-width: 4; }
.miss-x { stroke: var(--pink-dark); stroke-width: 5.5; stroke-linecap: round; fill: none; }

/* ============ التلميح ============ */
.hint-ring {
  fill: none; stroke: var(--yellow); stroke-width: 5;
  stroke-dasharray: 10 9;
  animation: hint-spin 3s linear infinite, hint-pulse 1s ease-in-out infinite;
  transform-box: fill-box; transform-origin: center;
}
@keyframes hint-spin { to { stroke-dashoffset: -76; } }
@keyframes hint-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ============ الموبايل ============ */
@media (max-width: 900px) {
  .game-page { --board-gap: 8px; }
  .scene-hint { font-size: 0.8rem; margin-bottom: 0.4rem; }
}

/* على الشاشات القصيرة سطر التلميح بياخد سطرين ويزحم الصور — نشيله،
   والتلميح الأساسي موجود أصلاً في زرار 💡 */
@media (max-height: 720px) {
  .scene-hint { display: none; }
}

/* الصورتين فوق بعض في الوضع الطولي بس — في الوضع العرضي
   يفضلوا جنب بعض عشان الشاشة تبقى واطية */
@media (max-width: 900px) and (orientation: portrait) {
  .game-page { --chrome: 200px; }

  .game-boards { flex-direction: column; }
  .game-boards {
    --board-h: min(
      calc((100vh - var(--chrome) - var(--board-gap)) / 2 - 10px),
      calc((100vw - (2 * var(--page-pad)) - 10px) / (var(--board-ratio)))
    );
    --board-h: min(
      calc((100dvh - var(--chrome) - var(--board-gap)) / 2 - 10px),
      calc((100vw - (2 * var(--page-pad)) - 10px) / (var(--board-ratio)))
    );
  }
}

/* ============ تقليل الحركة ============ */
@media (prefers-reduced-motion: reduce) {
  .marker, .marker-tick, .miss, .board.is-wrong,
  .marker-halo, .hint-ring { animation: none !important; }
  .marker-ring { stroke-dashoffset: 0 !important; animation: none !important; }
  .board.is-wrong::after { animation: none !important; opacity: 0; }
}