/* ==================================================================
   DRAW & GUESS — LARGER LAYOUT FIX (2026-04-18)
   --------------------------------------------------------------------
   المشكلة:  لعبة الرسم صغيرة جدا بالنسبة لحجم الصفحة ومساحتها
             + فيه لوحة "تخمينات الشات" مكررة داخل اللعبة رغم أن
             الـ jawlah-sidebar-left (شات مباشر) بتاع الصفحة كلها
             بالفعل بيعرض التخمينات.
   الحل:   -  توسيع .draw-v2-wrap للعرض الكامل للمنطقة الوسطى
           -  تكبير الكانفاس عن طريق إزالة max-height والـ aspect-ratio
              (نستخدم height: min(70vh, 720px)) — لا يزال متوازن
              على شاشات صغيرة
           -  إخفاء .draw-v2-side (اللوحة المضاعفة) على جميع الشاشات
              لأنها تكرار لـ jawlah-sidebar-left
           -  تحسين الـ toolbar ليكون أكثر انضباطا
   نُحمّل بعد fixes-2026-04-17-v2.css حتى تفوز قواعدنا في التتالي.
   ================================================================== */

/* 1) توسيع الحاوية — عمود واحد يأخذ كامل المساحة المتاحة
   (الـ jawlah-game-center بالفعل محدود بـ grid الصفحة، فنأخذ
   كل عرضها). */
.draw-v2-wrap {
  max-width: 100% !important;     /* كان 1200px */
  width: 100% !important;
  grid-template-columns: 1fr !important;  /* عمود واحد — إزالة عمود 300px */
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 2) إخفاء اللوحة المضاعفة داخل اللعبة (نعتمد على jawlah-sidebar-left) */
.draw-v2-side {
  display: none !important;
}

/* 3) ضبط حاوية الكانفاس لأقصى استغلال للمساحة العمودية */
.draw-v2-canvas-wrap {
  /* نلغي aspect-ratio لأنه كان يحد الارتفاع على شاشات عريضة
     ونعتمد على height ديناميكي بدلاً منه */
  aspect-ratio: auto !important;
  height: min(70vh, 780px) !important;     /* كان max-height: 560px */
  max-height: min(70vh, 780px) !important;
  min-height: 380px !important;
  width: 100% !important;
  background: #ffffff !important;
  border-radius: 0 !important;
}

/* 4) تكبير حجم الـ .draw-v2-main حتى تمتد أفقياً لكامل المنطقة */
.draw-v2-main {
  width: 100% !important;
  /* إزالة border-radius الخارجي لأن الحاوية جوّا sidebar
     بالفعل لها شكل منضبط */
}

/* 5) تحسين الـ header (ترتيب أفضل على الشاشات الواسعة) */
.draw-v2-header {
  padding: 12px 18px !important;
  gap: 12px !important;
}
.draw-v2-wordbar {
  padding: 12px 18px !important;
  gap: 12px !important;
  align-items: center !important;
}
.draw-v2-wordbar .draw-v2-word {
  font-size: 1.55rem !important;          /* من 1.75 → أخف قليلا */
}

/* 6) توسيع الـ toolbar */
.draw-v2-toolbar {
  padding: 10px 14px !important;
  gap: 10px !important;
}
.draw-v2-colors {
  flex-wrap: wrap !important;
}
.draw-v2-color {
  width: 28px !important;
  height: 28px !important;
}

/* 7) شريط متحرك عند نقص المساحة — الألعاب التانية مش هتتأثر
   لأن الـ CSS scoped على .draw-v2-wrap فقط */

/* 8) على الشاشات الصغيرة (< 900px) نرجع scope الحاوية للارتفاع
   الطبيعي بدون vh حتى لا ياكل كل الشاشة على موبايل */
@media (max-width: 900px) {
  .draw-v2-canvas-wrap {
    height: 420px !important;
    max-height: 420px !important;
    min-height: 320px !important;
  }
  .draw-v2-wordbar .draw-v2-word { font-size: 1.25rem !important; }
}
@media (max-width: 600px) {
  .draw-v2-canvas-wrap {
    height: 340px !important;
    max-height: 340px !important;
    min-height: 260px !important;
  }
}