/* ===== RESET & BASE STYLES ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --grass-green: #7CB342;
    --pure-white: #FFFFFF;
    --golden-yellow: #FFD700;
    --bright-orange: #FF8C00;
    --crimson-red: #E53935;
    --text-dark: #2E2E2E;
    --text-light: var(--pure-white);
    --shadow-heavy: rgba(0, 0, 0, 0.4);
    --border-radius: 12px;
    --border-radius-large: 25px;
    --transition-medium: 0.3s ease;
    --spacing-md: 16px;
    --spacing-lg: 24px;
}

body {
    font-family: 'Cairo', 'Fredoka One', Arial, sans-serif;
    color: var(--text-light);
    overflow-x: hidden;
}

.background-blur {
    background-image: url('background.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    filter: blur(4px);
    position: fixed;
    top: -10px; right: -10px; bottom: -10px; left: -10px;
    z-index: -1;
}

#main-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--spacing-md);
}

/* ===== HEADER & TITLES ===== */
.header-section, .title-section, .category-title {
    text-align: center;
}
.header-section { margin-bottom: var(--spacing-lg); }

.logo-container {
    display: inline-block;
    animation: float 3s ease-in-out infinite;
}
@keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } }

.main-logo {
    height: 100px;
    filter: drop-shadow(0 8px 16px var(--shadow-heavy));
}

.subtitle {
    font-size: clamp(1.1rem, 3vw, 1.4rem);
    opacity: 0.95;
    max-width: 600px;
    margin: 0 auto;
    font-weight: 600;
}

/* ===== STATUS (USERS & TIMER) ===== */
.status-container {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: var(--spacing-md);
    margin: var(--spacing-lg) auto;
    flex-wrap: wrap;
}
.active-users-display, .countdown-wrapper {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    padding: 10px 20px;
    border-radius: var(--border-radius-large);
    border: 2px solid var(--golden-yellow);
    color: var(--text-dark);
    font-family: 'Fredoka One', sans-serif;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.timer-display, .users-count { font-size: 1.8em; color: var(--bright-orange); }

/* ===== SELECTION & CONTROLS ===== */
.selection-section { text-align: center; margin: var(--spacing-lg) auto; }
.selection-counter {
    background: rgba(0, 0, 0, 0.25);
    padding: 12px 25px;
    border-radius: var(--border-radius);
    display: inline-block;
    font-size: 1.2em;
    font-weight: 600;
}
#selected-count { color: var(--golden-yellow); }
.selection-message {
    display: none;
    background: var(--crimson-red);
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
    margin-top: var(--spacing-md);
    animation: shake 0.5s ease-in-out;
}
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

.category-tabs { display: flex; justify-content: center; gap: var(--spacing-md); margin-bottom: var(--spacing-lg); }
.tab-btn {
    background: #fff; border: 2px solid #ddd; color: #333;
    padding: 10px 20px; border-radius: 10px; font-weight: 800;
    cursor: pointer; transition: all var(--transition-medium);
}
.tab-btn:hover { transform: translateY(-3px); }
.tab-btn.active { background: var(--grass-green); border-color: var(--golden-yellow); color: white; transform: translateY(-3px); }

/* ===== ITEM CARDS ===== */
.items-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--spacing-md); }
.item-card {
    background: rgba(255, 255, 255, 0.95);
    border-radius: var(--border-radius); padding: var(--spacing-md);
    text-align: center; cursor: pointer; transition: all var(--transition-medium);
    position: relative; border: 3px solid transparent;
}
.item-card:hover { transform: translateY(-5px); border-color: var(--grass-green); }
.item-card.selected { border-color: var(--golden-yellow); transform: translateY(-5px); }
.item-card.selected::after {
    content: '✓'; position: absolute; top: 8px; right: 8px; background: var(--golden-yellow);
    color: var(--text-dark); width: 25px; height: 25px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-weight: 900;
}
.item-badge {
    position: absolute; top: 10px; left: 10px; padding: 3px 10px;
    border-radius: 8px; font-size: 0.7em; font-weight: 900; color: var(--text-light);
}
.item-badge[data-rarity="LEGENDARY"] { background: linear-gradient(135deg, #FF6B35, #F7931E); }
.item-badge[data-rarity="EPIC"] { background: linear-gradient(135deg, #9C27B0, #E91E63); }
.item-badge[data-rarity="RARE"] { background: linear-gradient(135deg, #2196F3, #03DAC6); }
.item-badge[data-rarity="COMMON"] { background: linear-gradient(135deg, #4CAF50, #8BC34A); }
.item-image { width: 100px; height: 100px; object-fit: contain; margin-bottom: 10px; }
.item-title { font-family: 'Fredoka One', sans-serif; font-size: 1.1em; color: var(--text-dark); }

/* ===== CONTINUE BUTTON & MODAL ===== */
.continue-btn {
    position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%);
    background: linear-gradient(145deg, var(--bright-orange), #FF6B35);
    color: white; border: 3px solid var(--golden-yellow); padding: 15px 35px;
    border-radius: 50px; font-size: 1.2em; font-weight: 900;
    cursor: pointer; transition: all var(--transition-medium); display: none; z-index: 1000;
}
.continue-btn:hover { transform: translateX(-50%) translateY(-5px); }

.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(8px);
    display: flex; justify-content: center; align-items: center;
    z-index: 10000; padding: var(--spacing-md);
    opacity: 0; animation: fadeIn 0.4s forwards;
}
.modal-content {
    background: var(--pure-white); border-radius: var(--border-radius-large); padding: var(--spacing-lg);
    max-width: 500px; width: 100%; box-shadow: 0 10px 50px rgba(0, 0, 0, 0.3);
    border: 2px solid var(--golden-yellow); color: var(--text-dark); text-align: center;
    max-height: 90vh; overflow-y: auto;
    animation: modalSlideIn 0.5s forwards; transform: scale(0.9);
}
@keyframes fadeIn { to { opacity: 1; } }
@keyframes modalSlideIn { to { transform: scale(1); } }

.modal-header h3 { font-family: 'Fredoka One', sans-serif; font-size: 1.8em; }
.confirmation-text { font-size: 1.1em; line-height: 1.6; color: #444; margin: var(--spacing-lg) 0; }
.selected-items-preview { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: var(--spacing-lg) 0; }
.selected-item-preview {
    background: #f0f0f0; border-radius: 8px; padding: 5px 8px; /* حجم أصغر */
    display: flex; align-items: center; gap: 8px;
}
.preview-image { width: 40px; height: 40px; /* حجم أصغر */ }
.preview-title { font-size: 0.85em; font-weight: 600; /* خط أصغر */ }

/* تصميم جديد واحترافي لحقل الإدخال */
.input-group input {
    width: 100%;
    border: 2px solid #ddd;
    background-color: #f9f9f9;
    padding: 15px; /* حشو داخلي أكبر */
    border-radius: 10px;
    font-size: 1.2em; /* خط أكبر */
    text-align: center;
    font-weight: 600;
    transition: all 0.3s ease;
}
.input-group input:focus {
    outline: none;
    border-color: var(--grass-green);
    box-shadow: 0 0 10px rgba(124, 179, 66, 0.2);
}

.user-error { color: var(--crimson-red); display: none; margin-top: 10px; font-weight: 600; }
.modal-buttons { display: flex; gap: var(--spacing-md); justify-content: center; margin-top: var(--spacing-lg); }
.modal-btn {
    flex: 1; background: var(--grass-green); color: white; border: none;
    padding: 15px 25px; border-radius: 10px; font-size: 1.1em; font-weight: 700; cursor: pointer;
    font-family: 'Fredoka One', sans-serif; transition: all var(--transition-medium);
}
.modal-btn:hover { transform: translateY(-2px); }
.modal-btn.cancel-btn { background: #757575; }

/* Staged Modal Styles */
.progress-bar { width: 100%; height: 10px; background: #e0e0e0; border-radius: 10px; margin-top: 20px; overflow: hidden; }
.progress-fill { width: 0%; height: 100%; background: var(--grass-green); transition: width 1.1s ease-in-out; }
#generation-log { width: 100%; margin: 20px 0; text-align: left; }
#generation-log p {
    margin-bottom: 10px; padding: 10px; color: #333;
    background-color: #f0f0f0; border-radius: 8px;
    display: flex; align-items: center; gap: 10px;
    animation: fadeInText 0.5s ease-out; font-weight: 600;
}
#generation-log p .log-icon { color: var(--grass-green); }
@keyframes fadeInText { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } }

.success-icon, .verification-icon {
    font-size: 4em;
    display: block; /* توسيط الأيقونة */
    margin: 15px auto;
    animation: popIn 0.5s ease-out;
}
.success-icon { color: var(--grass-green); }
.verification-icon { color: var(--golden-yellow); }
@keyframes popIn { from { transform: scale(0); } to { transform: scale(1); } }

/* MOBILE RESPONSIVENESS */
@media (max-width: 768px) {
    .items-grid { grid-template-columns: repeat(2, 1fr); }
    .modal-buttons { flex-direction: column; align-items: stretch; }
}
@media (max-width: 480px) {
    .subtitle { font-size: 1.1rem; }
    .status-container { flex-direction: column; }
    .modal-btn { padding: 12px; }
}