<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<title>رقعة بنك الحظ الشغف - 36 خانة (صفحة واحدة مضغوطة)</title>
<style>
  @page {
    size: A4 landscape;
    margin: 4mm;
  }
  
  * {
    box-sizing: border-box;
  }

  html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #fff;
    color: #000;
  }

  .no-print {
    text-align: center;
    padding: 3px;
    background: #f0f0f0;
  }
  
  .btn-print {
    padding: 5px 15px;
    font-size: 13px;
    font-weight: bold;
    background-color: #b71c1c;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  
  /* شبكة بنك الحظ بأبعاد أصغر محكومة بالكامل داخل A4 */
  .monopoly-board {
    display: grid;
    grid-template-columns: repeat(11, 1fr);
    grid-template-rows: repeat(8, 1fr);
    gap: 2px;
    width: 96vw;
    height: 88vh; /* تم تقليل الارتفاع لمنع أي تسريب لصفحة ثانية */
    margin: 0 auto;
    border: 2px solid #880e4f;
    padding: 2px;
    background-color: #fafafa;
  }

  /* تصميم الخانات بخطوط عريضة وواضحة */
  .cell {
    border: 1.5px solid #880e4f;
    border-radius: 3px;
    padding: 2px;
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
  }

  .cell-num { 
    font-weight: 900; 
    font-size: 9px; 
    color: #b71c1c; 
    border-bottom: 1px dashed #bbb; 
    padding-bottom: 1px; 
  }

  .cell-title { 
    font-weight: 900; 
    font-size: 10.5px; 
    margin: 1px 0; 
    color: #0d47a1; 
    text-align: center; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
  }

  .cell-desc { 
    font-size: 8.5px; 
    font-weight: 700; 
    color: #000; 
    line-height: 1.1; 
    text-align: center; 
  }

  /* ألوان الخانات */
  .cell-warm { background-color: #fff8e1; border-color: #f57f17; }
  .cell-hot { background-color: #fff0f5; border-color: #c2185b; }
  .cell-super-hot { background-color: #ffebee; border-color: #d50000; }
  .cell-card { background-color: #f3e5f5; border-color: #7b1fa2; }
  .cell-corner { background-color: #efebe9; border-color: #4e342e; }
  .cell-final { background-color: #b71c1c; color: #fff; border-color: #5f0000; }

  /* منتصف الرقعة */
  .center-space {
    grid-column: 2 / 11;
    grid-row: 2 / 8;
    border: 1.5px dashed #b71c1c;
    border-radius: 6px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    padding: 4px 8px;
  }

  .board-logo { 
    font-size: 15px; 
    font-weight: 900; 
    color: #b71c1c; 
    text-align: center; 
  }

  /* صندوق القوانين */
  .rules-box {
    background-color: #fffde7;
    border: 1.5px solid #fbc02d;
    border-radius: 5px;
    padding: 4px 8px;
    width: 98%;
    font-size: 9.5px;
    font-weight: 700;
    color: #111;
    line-height: 1.2;
  }

  .rules-title { 
    font-weight: 900; 
    color: #b71c1c; 
    margin-bottom: 2px; 
    text-align: center; 
    font-size: 11px; 
  }
  
  .rules-list { margin: 0; padding-right: 15px; }
  .rules-list li { margin-bottom: 1px; }

  .deck-zones {
    display: flex;
    justify-content: space-around;
    width: 80%;
  }

  .deck-box {
    width: 100px;
    height: 45px;
    border: 1.5px dashed #7b1fa2;
    border-radius: 5px;
    background-color: #f3e5f5;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 10px;
    font-weight: 900;
    color: #4a148c;
  }

  @media print {
    body { background: none; padding: 0; height: 100vh; overflow: hidden; }
    .no-print { display: none; }
    .monopoly-board { height: 93vh; width: 98%; }
  }
</style>
</head>
<body>

<div class="no-print">
  <button class="btn-print" onclick="window.print()">🖨️ طباعة / حفظ PDF صفحة واحدة</button>
</div>

<div class="monopoly-board">

  <!-- منتصف الرقعة (القوانين والكوتشينة) -->
  <div class="center-space">
    <div class="board-logo">🎲 بنك الحظ - مسار الشغف (36 مرحلة) 🎲</div>
    
    <!-- صندوق القوانين -->
    <div class="rules-box">
      <div class="rules-title">📜 قوانين وقواعد اللعب 📜</div>
      <ol class="rules-list">
        <li><strong>التجهيز:</strong> نرد واحد مع مجسمين صغيرين للتحريك على حواف الرقعة.</li>
        <li><strong>البداية:</strong> يبدأ اللاعب صاحب الرقم الأعلى بالنرد بالتحرك من الخانة (1).</li>
        <li><strong>تنفيذ الخانة:</strong> يجب تنفيذ الأمر المكتوب داخل المربع فور الوقوف عليه بالكامل.</li>
        <li><strong>مربعات الكروت 🃏:</strong> اسحب كارت من كوتشينة الشغف، نفذ أمره، ثم ضعه في سلة المستعمل.</li>
        <li><strong>الفوز والحسم:</strong> أول لاعب يصل للخانة (36) يحسم الجولة وينتقل الشريكان فوراً لللقاء النهائي.</li>
      </ol>
    </div>

    <!-- أماكن الكوتشينة -->
    <div class="deck-zones">
      <div class="deck-box">🃏 مكان سحب<br>كوتشينة الشغف</div>
      <div class="deck-box" style="border-color: #880e4f; background-color: #fff0f5; color: #880e4f;">سلة الكروت<br>المستعملة</div>
    </div>
  </div>

  <!-- الصف العلوي (المربعات من 1 إلى 11) -->
  <div class="cell cell-corner cell-warm" style="grid-column: 1; grid-row: 1;">
    <span class="cell-num">1. البداية 🏁</span>
    <div class="cell-title">نظرة دافية</div>
    <div class="cell-desc">نظرة عين لعين 30 ثانية بابتسامة.</div>
  </div>
  <div class="cell cell-warm" style="grid-column: 2; grid-row: 1;">
    <span class="cell-num">2</span>
    <div class="cell-title">همس بالأذن</div>
    <div class="cell-desc">اهمس بأكتر حاجة بتحبها في الشريك.</div>
  </div>
  <div class="cell cell-card" style="grid-column: 3; grid-row: 1;">
    <span class="cell-num">3 🃏</span>
    <div class="cell-title">سحب كارت</div>
    <div class="cell-desc">اسحب كارت ونفذه فوراً.</div>
  </div>
  <div class="cell cell-warm" style="grid-column: 4; grid-row: 1;">
    <span class="cell-num">4</span>
    <div class="cell-title">صوابع خفيفة</div>
    <div class="cell-desc">تلميس بالراحة على الرقبة والودان.</div>
  </div>
  <div class="cell cell-warm" style="grid-column: 5; grid-row: 1;">
    <span class="cell-num">5</span>
    <div class="cell-title">صراحة نارية</div>
    <div class="cell-desc">إيه أكتر لبس بتفضل تشوفني بيه؟</div>
  </div>
  <div class="cell cell-hot" style="grid-column: 6; grid-row: 1;">
    <span class="cell-num">6</span>
    <div class="cell-title">قبلة الرقبة</div>
    <div class="cell-desc">بوسة على الرقبة وتحت الذقن.</div>
  </div>
  <div class="cell cell-card" style="grid-column: 7; grid-row: 1;">
    <span class="cell-num">7 🃏</span>
    <div class="cell-title">سحب كارت</div>
    <div class="cell-desc">اسحب كارت ونفذه فوراً.</div>
  </div>
  <div class="cell cell-hot" style="grid-column: 8; grid-row: 1;">
    <span class="cell-num">8</span>
    <div class="cell-title">تثبيت الإيدين</div>
    <div class="cell-desc">امسك إيدين الشريك فوق دماغه وبوسه.</div>
  </div>
  <div class="cell cell-hot" style="grid-column: 9; grid-row: 1;">
    <span class="cell-num">9</span>
    <div class="cell-title">تلميس هانش</div>
    <div class="cell-desc">ضغط بكفوف الإيد على الهانش دقيقة.</div>
  </div>
  <div class="cell cell-card" style="grid-column: 10; grid-row: 1;">
    <span class="cell-num">10 🃏</span>
    <div class="cell-title">سحب كارت</div>
    <div class="cell-desc">اسحب كارت ونفذه فوراً.</div>
  </div>
  <div class="cell cell-corner cell-hot" style="grid-column: 11; grid-row: 1;">
    <span class="cell-num">11 🔥</span>
    <div class="cell-title">تجريد قطعة</div>
    <div class="cell-desc">قلع الشريك قطعة واحدة من هدومه.</div>
  </div>

  <!-- العمود الأيمن (المربعات من 12 إلى 17) -->
  <div class="cell cell-hot" style="grid-column: 11; grid-row: 2;">
    <span class="cell-num">12</span>
    <div class="cell-title">مساج الظهر</div>
    <div class="cell-desc">تدليك ببطء للظهر والهانش.</div>
  </div>
  <div class="cell cell-card" style="grid-column: 11; grid-row: 3;">
    <span class="cell-num">13 🃏</span>
    <div class="cell-title">سحب كارت</div>
    <div class="cell-desc">اسحب كارت ونفذه.</div>
  </div>
  <div class="cell cell-hot" style="grid-column: 11; grid-row: 4;">
    <span class="cell-num">14</span>
    <div class="cell-title">تنفس قريب</div>
    <div class="cell-desc">تنفس عند الشفايف بدون تلامس.</div>
  </div>
  <div class="cell cell-card" style="grid-column: 11; grid-row: 5;">
    <span class="cell-num">15 🃏</span>
    <div class="cell-title">سحب كارت</div>
    <div class="cell-desc">اسحب كارت ونفذه.</div>
  </div>
  <div class="cell cell-super-hot" style="grid-column: 11; grid-row: 6;">
    <span class="cell-num">16</span>
    <div class="cell-title">دلع اللسان</div>
    <div class="cell-desc">تمرير اللسان من الرقبة للصدر.</div>
  </div>
  <div class="cell cell-corner cell-super-hot" style="grid-column: 11; grid-row: 7;">
    <span class="cell-num">17 💥</span>
    <div class="cell-title">المداعبة الحساسة</div>
    <div class="cell-desc">لمسات فوق الهدوم الداخلية.</div>
  </div>

  <!-- الصف السفلي (المربعات من 18 إلى 27) -->
  <div class="cell cell-card" style="grid-column: 11; grid-row: 8;">
    <span class="cell-num">18 🃏</span>
    <div class="cell-title">سحب كارت</div>
    <div class="cell-desc">اسحب كارت ونفذه.</div>
  </div>
  <div class="cell cell-super-hot" style="grid-column: 10; grid-row: 8;">
    <span class="cell-num">19</span>
    <div class="cell-title">تغمية العينين</div>
    <div class="cell-desc">غمي عينين الشريك ومارس لمساتك.</div>
  </div>
  <div class="cell cell-super-hot" style="grid-column: 9; grid-row: 8;">
    <span class="cell-num">20</span>
    <div class="cell-title">الهدوم الداخلية</div>
    <div class="cell-desc">قلع الهدوم الداخلية فوراً.</div>
  </div>
  <div class="cell cell-card" style="grid-column: 8; grid-row: 8;">
    <span class="cell-num">21 🃏</span>
    <div class="cell-title">سحب كارت</div>
    <div class="cell-desc">اسحب كارت ونفذه.</div>
  </div>
  <div class="cell cell-super-hot" style="grid-column: 7; grid-row: 8;">
    <span class="cell-num">22</span>
    <div class="cell-title">رضاعة ودلع</div>
    <div class="cell-desc">رضاعة ومداعبة للصدر والحلمات.</div>
  </div>
  <div class="cell cell-super-hot" style="grid-column: 6; grid-row: 8;">
    <span class="cell-num">23</span>
    <div class="cell-title">شفاه ولحس</div>
    <div class="cell-desc">استخدام اللسان بالمنطقة الحساسة.</div>
  </div>
  <div class="cell cell-card" style="grid-column: 5; grid-row: 8;">
    <span class="cell-num">24 🃏</span>
    <div class="cell-title">سحب كارت</div>
    <div class="cell-desc">اسحب كارت ونفذه.</div>
  </div>
  <div class="cell cell-super-hot" style="grid-column: 4; grid-row: 8;">
    <span class="cell-num">25</span>
    <div class="cell-title">بين الفخاذ</div>
    <div class="cell-desc">تدليك ولحس هادي بين الفخاذ.</div>
  </div>
  <div class="cell cell-super-hot" style="grid-column: 3; grid-row: 8;">
    <span class="cell-num">26</span>
    <div class="cell-title">على البطن</div>
    <div class="cell-desc">استلقاء الشريك ومداعبة الهانش.</div>
  </div>
  <div class="cell cell-corner cell-super-hot" style="grid-column: 2; grid-row: 8;">
    <span class="cell-num">27 🔥</span>
    <div class="cell-title">بدون سواتر</div>
    <div class="cell-desc">التجرد الكامل من كل الملابس.</div>
  </div>

  <!-- العمود الأيسر (المربعات من 28 إلى 36) -->
  <div class="cell cell-card" style="grid-column: 1; grid-row: 8;">
    <span class="cell-num">28 🃏</span>
    <div class="cell-title">سحب كارت</div>
    <div class="cell-desc">اسحب كارت ونفذه.</div>
  </div>
  <div class="cell cell-super-hot" style="grid-column: 1; grid-row: 7;">
    <span class="cell-num">29</span>
    <div class="cell-title">لحس المؤخرة</div>
    <div class="cell-desc">مداعبة ولحس بلسانك للمؤخرة.</div>
  </div>
  <div class="cell cell-card" style="grid-column: 1; grid-row: 6;">
    <span class="cell-num">30 🃏</span>
    <div class="cell-title">سحب كارت</div>
    <div class="cell-desc">اسحب كارت ونفذه.</div>
  </div>
  <div class="cell cell-super-hot" style="grid-column: 1; grid-row: 5;">
    <span class="cell-num">31</span>
    <div class="cell-title">سيطرة الشريك</div>
    <div class="cell-desc">الشريك يحدد الوضع لمدة دقيقتين.</div>
  </div>
  <div class="cell cell-super-hot" style="grid-column: 1; grid-row: 4;">
    <span class="cell-num">32</span>
    <div class="cell-title">مص اللسان</div>
    <div class="cell-desc">بوسة حارة مع مص لسان الشريك.</div>
  </div>
  <div class="cell cell-card" style="grid-column: 1; grid-row: 3;">
    <span class="cell-num">33 🃏</span>
    <div class="cell-title">سحب كارت</div>
    <div class="cell-desc">اسحب كارت ونفذه.</div>
  </div>
  <div class="cell cell-super-hot" style="grid-column: 1; grid-row: 2;">
    <span class="cell-num">34</span>
    <div class="cell-title">تسخين أخير</div>
    <div class="cell-desc">دقيقة واحدة من المداعبة السريعة.</div>
  </div>
  <div class="cell cell-final" style="grid-column: 1; grid-row: 1;">
    <span class="cell-num" style="color:#fff;">36 🏆 الحسم</span>
    <div class="cell-title" style="color:#fff;">اللقاء المباشر</div>
    <div class="cell-desc" style="color:#eee;">الانتقال الفوري للسرير وتأدية اللقاء بالوضع المفضل!</div>
  </div>

</div>

</body>
</html>
