<div class="main-menu">
<h2>خيارات اللعب</h2>
<div class="game-mode">
<button class="mode-btn active" data-mode="1vs1">
<i class="fas fa-users"></i> لاعب ضد لاعب
</button>
<button class="mode-btn" data-mode="vsComputer">
<i class="fas fa-laptop"></i> لاعب ضد الكمبيوتر
</button>
</div>
<div class="hands-selection">
<h3>عدد الأيدي:</h3>
<div class="hands-options">
<label class="hand-option">
<input type="radio" name="handsCount" value="8" checked>
<span>8 أيادي</span>
</label>
<label class="hand-option">
<input type="radio" name="handsCount" value="12">
<span>12 أيادي</span>
</label>
<label class="hand-option">
<input type="radio" name="handsCount" value="16">
<span>16 أيادي</span>
</label>
<label class="hand-option">
<input type="radio" name="handsCount" value="20">
<span>20 أيادي</span>
</label>
</div>
</div>
<div class="buttons">
<button id="start-game">
<i class="fas fa-play"></i> بدء اللعبة
</button>
</div>
</div>
</div>
<!-- الصفحة 1: إدخال أسماء اللاعبين -->
<div class="page" id="page-names">
<div class="game-title">
<h1>لعبة المحييس العراقية</h1>
<p>اختبر حظك وابدأ اللعبة!</p>
</div>
<div class="players-setup">
<h2>محيبس بغدادي (بات)</h2>
<div class="player-input">
<label for="player1-name">اسم اللاعب 1:</label>
<input type="text" id="player1-name" placeholder="أدخل اسم اللاعب 1" value="علي">
</div>
<div class="player-input" id="player2-input">
<label for="player2-name">اسم اللاعب 2:</label>
<input type="text" id="player2-name" placeholder="أدخل اسم اللاعب 2" value="احمد">
</div>
</div>
<div class="buttons">
<button id="back-to-main">
<i class="fas fa-arrow-left"></i> رجوع
</button>
<button id="to-lottery-page">
<i class="fas fa-arrow-right"></i> التالي
</button>
</div>
</div>
<!-- الصفحة 2: القرعة العشوائية -->
<div class="page" id="page-lottery">
<h2>ال القرعة العشوائية</h2>
<div class="lottery-container">
<div class="lottery-spinner" id="lottery-spinner">
جاري السحب...
</div>
</div>
<div class="message" id="lottery-result">
من سيكون المخبئ الأول؟
</div>
<div class="buttons">
<button id="back-to-names">
<i class="fas fa-arrow-left"></i> رجوع
</button>
<button id="start-lottery">
<i class="fas fa-play"></i> بدء السحب
</button>
<button id="to-hide-page" style="display: none;">
<i class="fas fa-arrow-right"></i> التالي
</button>
</div>
</div>
<!-- الصفحة 3: تخبئة الخاتم -->
<div class="page" id="page-hide">
<h2 id="hide-title">تخبئة الخاتم - علي</h2>
<div class="score-display">
<div class="player-score-display">
<span class="name" id="hider-score-name">علي</span>
<span class="score" id="hider-score">0</span>
</div>
<div class="player-score-display">
<span class="name" id="searcher-score-name">احمد</span>
<span class="score" id="searcher-score">0</span>
</div>
</div>
<div class="message" id="hide-message">
اختر اليد التي تريد تخبئة الخاتم فيها
</div>
<div class="hands-background">
<div class="hands-container" id="hide-hands">
<!-- سيتم إنشاء الأيدي ديناميكيًا -->
</div>
</div>
<div class="buttons">
<button id="back-to-lottery">
<i class="fas fa-arrow-left"></i> رجوع
</button>
<button id="to-search-page" style="display: none;">
<i class="fas fa-arrow-right"></i> ابدأ البحث
</button>
</div>
</div>
<!-- الصفحة 4: البحث عن الخاتم -->
<div class="page" id="page-search">
<h2 id="search-title">البحث عن الخاتم - علي</h2>
<div class="score-display">
<div class="player-score-display">
<span class="name" id="search-hider-score-name">علي</span>
<span class="score" id="search-hider-score">0</span>
</div>
<div class="player-score-display">
<span class="name" id="search-searcher-score-name">احمد</span>
<span class="score" id="search-searcher-score">0</span>
</div>
</div>
<div class="message" id="search-message">
ابحث عن الخاتم في إحدى اليدين
</div>
<div class="search-actions">
<div class="search-option active" id="normal-search">
<i class="fas fa-hand-point-up"></i> طلگ
</div>
<div class="search-option" id="pocket-search">
<i class="fas fa-hand-point-up"></i> جيبة
</div>
</div>
<div class="hands-background">
<div class="hands-container" id="search-hands">
<!-- سيتم إنشاء الأيدي ديناميكيًا -->
</div>
</div>
<div class="buttons">
<button id="back-to-hide">
<i class="fas fa-arrow-left"></i> رجوع
</button>
<button id="next-round-button" style="display: none;">
<i class="fas fa-redo"></i> الجولة التالية
</button>
<button id="restart-game-button" style="display: none;">
<i class="fas fa-play"></i> لعب مرة أخرى
</button>
<button id="to-main-from-search">
<i class="fas fa-home"></i> الرئيسية
</button>
</div>
</div>
<!-- الصفحة 5: عرض النتائج -->
<div class="page" id="page-results">
<h2>نتائج الجولة</h2>
<div class="round-result">
<div class="result-title">البحث عن الخاتم</div>
<div class="players-result">
<div class="player-result">
<span class="player-name" id="result-player1-name">علي</span>
<span class="player-score" id="result-player1-score">0</span>
</div>
<div class="player-result">
<span class="player-name" id="result-player2-name">احمد</span>
<span class="player-score" id="result-player2-score">0</span>
</div>
</div>
<div class="round-info">
<div class="round-item">
<span>الجولة</span>
<span class="round-number" id="result-round">1</span>
</div>
<div class="round-item">
<span>النقاط للفوز</span>
<span class="round-number">10</span>
</div>
</div>
<div class="found-message" id="result-found-message">
وجد أحمد الخاتم!
</div>
</div>
<div class="result-note">
<p>سيتم الانتقال إلى الجولة التالية خلال <span id="countdown">3</span> ثوانٍ</p>
</div>
<div class="buttons">
<button id="back-to-search">
<i class="fas fa-arrow-left"></i> رجوع
</button>
<button id="to-main-from-results">
<i class="fas fa-home"></i> الرئيسية
</button>
</div>
</div>
</div>
<div class="winner-banner" id="winner-banner">
<h2>مبروك!</h2>
<p id="winner-text">فاز علي بالجولة!</p>
<button id="close-winner">
<i class="fas fa-times"></i> إغلاق
</button>
<button id="to-main-from-winner">
<i class="fas fa-home"></i> الرئيسية
</button>
</div>
<div class="footer">
DES HUSSAIN AL NASINI | © 2023 لعبة المحيبس العراقية
</div>
<audio id="background-music" loop>
<source src="https://assets.mixkit.co/music/preview/mixkit-game-show-suspense-waiting-667.mp3" type="audio/mpeg">
</audio>
<audio id="open-sound">
<source src="https://assets.mixkit.co/sfx/preview/mixkit-select-click-1109.mp3" type="audio/mpeg">
</audio>
<audio id="win-sound">
<source src="https://assets.mixkit.co/sfx/preview/mixkit-winning-chimes-2015.mp3" type="audio/mpeg">
</audio>
<audio id="lose-sound">
<source src="https://assets.mixkit.co/sfx/preview/mixkit-losing-drums-2023.mp3" type="audio/mpeg">
</audio>
<audio id="lottery-sound">
<source src="https://assets.mixkit.co/sfx/preview/mixkit-whoosh-1114.mp3" type="audio/mpeg">
</audio>
لعبة المحيبس العراقية
اختبر حظك وابدأ اللعبة!