<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>رقعة لعبة مسار الشغف</title>
    <style>
        @page {
            size: A4 landscape;
            margin: 0;
        }
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        body {
            width: 297mm;
            height: 210mm;
            background-color: #1a1a2e;
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 10mm;
        }
        /* الرقعة الرئيسية */
        .board {
            width: 100%;
            height: 100%;
            border: 3px solid #e94560;
            border-radius: 12px;
            display: grid;
            grid-template-columns: repeat(10, 1fr);
            grid-template-rows: repeat(6, 1fr);
            gap: 4px;
            background-color: #16213e;
            padding: 6px;
            position: relative;
        }
        /* تصميم الخانات */
        .cell {
            background: #0f3460;
            border: 1px solid #e94560;
            border-radius: 6px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            font-size: 11px;
            font-weight: bold;
            text-align: center;
            padding: 2px;
            color: #e0e0e0;
        }
        .cell .num {
            font-size: 14px;
            color: #e94560;
            margin-bottom: 2px;
        }
        .cell.draw {
            background-color: #533483;
            color: #fff;
        }
        .cell.start {
            background-color: #2e7d32;
            font-size: 14px;
        }
        .cell.finish {
            background-color: #c62828;
            font-size: 14px;
        }

        /* المنطقة الوسطى */
        .center-area {
            grid-column: 2 / 10;
            grid-row: 2 / 6;
            background: rgba(15, 52, 96, 0.4);
            border: 2px dashed #e94560;
            border-radius: 10px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            padding: 15px;
            margin: 4px;
        }

        /* مكان الكروت */
        .card-deck {
            width: 65mm;
            height: 95mm;
            border: 2px dashed #ffb703;
            border-radius: 8px;
            background: rgba(83, 52, 131, 0.3);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            padding: 10px;
            color: #ffb703;
        }
        .card-deck h3 {
            font-size: 16px;
            margin-bottom: 8px;
        }
        .card-deck p {
            font-size: 11px;
            color: #ccc;
        }

        /* مربع التعليمات */
        .rules-box {
            width: 120mm;
            height: 95mm;
            background: #0f3460;
            border: 2px solid #e94560;
            border-radius: 8px;
            padding: 12px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .rules-box h2 {
            color: #e94560;
            font-size: 18px;
            text-align: center;
            border-bottom: 1px solid #e94560;
            padding-bottom: 5px;
            margin-bottom: 8px;
        }
        .rules-box ol {
            padding-right: 18px;
            font-size: 11px;
            line-height: 1.6;
            color: #e0e0e0;
        }
        .rules-box li {
            margin-bottom: 4px;
        }
        .rules-footer {
            text-align: center;
            font-size: 10px;
            color: #ffb703;
            font-weight: bold;
            margin-top: 5px;
        }
    </style>
</head>
<body>

    <div class="board">
        <!-- الضلع العلوي (1 إلى 10) -->
        <div class="cell start"><span class="num">1</span>البداية</div>
        <div class="cell"><span class="num">2</span>أمر خفيف</div>
        <div class="cell draw"><span class="num">3</span>اسحب كارت</div>
        <div class="cell"><span class="num">4</span>تحرك للامام</div>
        <div class="cell"><span class="num">5</span>سؤال سريع</div>
        <div class="cell draw"><span class="num">6</span>اسحب كارت</div>
        <div class="cell"><span class="num">7</span>تحدي دقيقة</div>
        <div class="cell"><span class="num">8</span>استراحة</div>
        <div class="cell draw"><span class="num">9</span>اسحب كارت</div>
        <div class="cell"><span class="num">10</span>مكافأة</div>

        <!-- الضلع الأيمن (11 إلى 13) -->
        <div class="cell" style="grid-column: 10; grid-row: 2;"><span class="num">11</span>همسة</div>
        <div class="cell draw" style="grid-column: 10; grid-row: 3;"><span class="num">12</span>اسحب كارت</div>
        <div class="cell" style="grid-column: 10; grid-row: 4;"><span class="num">13</span>امر جريء</div>

        <!-- الضلع السفلي (14 إلى 23) -->
        <div class="cell finish" style="grid-column: 10; grid-row: 6;"><span class="num">28</span>النهاية والشرط النهائي</div>
        <div class="cell draw" style="grid-column: 9; grid-row: 6;"><span class="num">27</span>اسحب كارت</div>
        <div class="cell" style="grid-column: 8; grid-row: 6;"><span class="num">26</span>عقاب خفيف</div>
        <div class="cell" style="grid-column: 7; grid-row: 6;"><span class="num">25</span>نظرة عين</div>
        <div class="cell draw" style="grid-column: 6; grid-row: 6;"><span class="num">24</span>اسحب كارت</div>
        <div class="cell" style="grid-column: 5; grid-row: 6;"><span class="num">23</span>تحدي جديد</div>
        <div class="cell" style="grid-column: 4; grid-row: 6;"><span class="num">22</span>كارت جوكر</div>
        <div class="cell draw" style="grid-column: 3; grid-row: 6;"><span class="num">21</span>اسحب كارت</div>
        <div class="cell" style="grid-column: 2; grid-row: 6;"><span class="num">20</span>رجع خطوة</div>
        <div class="cell" style="grid-column: 1; grid-row: 6;"><span class="num">19</span>دور إضافي</div>

        <!-- الضلع الأيسر (16 إلى 18) -->
        <div class="cell draw" style="grid-column: 1; grid-row: 5;"><span class="num">18</span>اسحب كارت</div>
        <div class="cell" style="grid-column: 1; grid-row: 4;"><span class="num">17</span>اختيار حر</div>
        <div class="cell draw" style="grid-column: 1; grid-row: 3;"><span class="num">16</span>اسحب كارت</div>
        <div class="cell" style="grid-column: 1; grid-row: 2;"><span class="num">15</span>شرط بسيط</div>

        <!-- المنتصف: التعليمات والكروت -->
        <div class="center-area">
            <!-- مكان وضع الكروت -->
            <div class="card-deck">
                <h3>🎴 كروت الشغف</h3>
                <p>ضع مجموعة الكروت هنا مقلوبة</p>
                <p style="margin-top: 10px; font-size: 9px; color: #aaa;">(مقاس الكارت: 6.5 × 9.5 سم)</p>
            </div>

            <!-- مربع القواعد -->
            <div class="rules-box">
                <h2>تعليمات وقواعد اللعبة</h2>
                <ol>
                    <li>يختار كل لاعب المجسم الخاص به ويبدأ من الخانة رقم (1).</li>
                    <li>يتم رمي النرد ويتنقل اللاعب بعدد الخانات الظاهرة.</li>
                    <li>إذا وقفت على خانة <b>"اسحب كارت"</b>، يجب سحب كارت من المجموعة وتنفيذ ما فيه فوراً.</li>
                    <li>تطبيق الأوامر المدونة على الخانات العادية عند الوقوف عليها.</li>
                    <li>الوصول للخانة الأخيرة (28) يتطلب تنفيذ "الشرط النهائي" للفوز بالدور.</li>
                </ol>
                <div class="rules-footer">
                    استمتعوا باللعبة والأجواء! ✨
                </div>
            </div>
        </div>
    </div>

</body>
</html>
