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

/* فونت وزیر - مدیوم */
@font-face {
    font-family: 'Vazir';
    src: url('Vazir-Medium.woff2') format('woff2'),
        url('Vazir-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* فونت وزیر - بولد */
@font-face {
    font-family: 'Vazirb';
    /* یا می‌توانید از همین 'Vazir' با وزن bold استفاده کنید */
    src: url('Vazir-Bold.woff2') format('woff2'),
        url('Vazir-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}


body {
    font-family: 'Vazir', 'Tahoma', sans-serif;
    background: #0b0c1a;
    color: #fff;
    min-height: 100vh;
    overflow-x: hidden;
    user-select: none;
}

/* ===== SCREENS ===== */
.screen {
    display: none;
    width: 100%;
    min-height: 100vh;
    animation: fadeIn 0.3s ease;
}
.screen.active {
    display: flex;
    flex-direction: column;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ===== MAIN MENU ===== */
#mainMenu {
    justify-content: center;
    align-items: center;
    position: relative;
    background: radial-gradient(ellipse at center, #1a1c3a 0%, #0b0c1a 70%);
}
.menu-bg {
    position: absolute;
    inset: 0;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" opacity="0.05"><text x="10" y="30" font-size="20" fill="white">س</text><text x="70" y="50" font-size="28" fill="white">ل</text><text x="30" y="80" font-size="24" fill="white">ا</text><text x="60" y="20" font-size="18" fill="white">م</text></svg>');
    background-size: 200px;
}
.menu-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 20px;
}
.logo-wrapper {
    margin-bottom: 40px;
}
.logo-icon {
    font-size: 72px;
    margin-bottom: 10px;
}
.logo-text {
    font-size: 48px;
    font-weight: bold;
    background: linear-gradient(135deg, #f7d875, #e6b422);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 40px rgba(230, 180, 34, 0.2);
}
.logo-sub {
    color: #8899bb;
    font-size: 16px;
    margin-top: 5px;
}
.menu-buttons {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 320px;
    margin: 0 auto;
}
.menu-btn {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 16px;
    padding: 16px 28px;
    font-family: 'Vazir', sans-serif;
    font-size: 18px;
    font-weight: bold;
    color: #eee;
    cursor: pointer;
    transition: all 0.3s;
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}
.menu-btn:hover {
    background: rgba(255,255,255,0.12);
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(230,180,34,0.15);
}
.menu-btn.primary {
    background: linear-gradient(135deg, #f7d875, #e6b422);
    color: #1a1a2e;
    border-color: #f7d875;
    box-shadow: 0 4px 20px rgba(230,180,34,0.3);
}
.menu-btn.primary:hover {
    box-shadow: 0 8px 40px rgba(230,180,34,0.5);
    transform: translateY(-3px);
}
.menu-btn .btn-icon {
    font-size: 22px;
}
.menu-footer {
    margin-top: 40px;
    display: flex;
    justify-content: center;
    gap: 24px;
    color: #8899bb;
    font-size: 14px;
    flex-wrap: wrap;
}

/* ===== MODAL ===== */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(6px);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease;
}
.modal-box {
    background: linear-gradient(145deg, #1e2040, #14152b);
    border: 1px solid rgba(255,215,0,0.2);
    border-radius: 24px;
    padding: 40px 32px;
    max-width: 420px;
    width: 90%;
    text-align: center;
    box-shadow: 0 30px 80px rgba(0,0,0,0.6);
}
.modal-box h2 {
    font-size: 26px;
    margin-bottom: 12px;
    color: #f7d875;
}
.modal-box p {
    color: #aabbcc;
    margin-bottom: 20px;
    font-size: 15px;
}
.modal-box input {
    width: 100%;
    padding: 14px 18px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.06);
    color: #fff;
    font-family: 'Vazir', sans-serif;
    font-size: 18px;
    text-align: center;
    outline: none;
    transition: border 0.3s;
    margin-bottom: 16px;
}
.modal-box input:focus {
    border-color: #f7d875;
    box-shadow: 0 0 20px rgba(230,180,34,0.15);
}
.modal-box .menu-btn {
    width: 100%;
    margin-top: 4px;
}
.error-msg {
    color: #ff6b6b !important;
    font-size: 13px !important;
    margin-top: 10px !important;
}
.celebration h2 {
    font-size: 30px;
    animation: pulse 0.8s ease infinite alternate;
}
@keyframes pulse {
    from { transform: scale(1); }
    to { transform: scale(1.04); }
}
.stage-complete-buttons {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}
.stage-complete-buttons .menu-btn {
    flex: 1;
}

/* ===== GAME HEADER ===== */
.game-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    background: rgba(255,255,255,0.04);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    backdrop-filter: blur(12px);
    position: sticky;
    top: 0;
    z-index: 10;
}
.back-btn {
    background: none;
    border: none;
    color: #f7d875;
    font-size: 26px;
    cursor: pointer;
    padding: 4px 12px;
    border-radius: 12px;
    transition: background 0.3s;
}
.back-btn:hover {
    background: rgba(255,215,0,0.1);
}
.game-header span {
    font-size: 18px;
    font-weight: bold;
}

/* ===== QUESTIONS PANEL ===== */
.questions-panel {
    background: rgba(255,255,255,0.03);
    padding: 14px 18px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    max-height: 130px;
    overflow-y: auto;
}
.questions-panel h3 {
    font-size: 14px;
    color: #f7d875;
    margin-bottom: 8px;
}
.questions-panel .q-item {
    font-size: 13px;
    color: #ccd;
    padding: 4px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    display: flex;
    gap: 8px;
}
.questions-panel .q-item .q-num {
    color: #f7d875;
    font-weight: bold;
    min-width: 24px;
}
.questions-panel .q-item .q-dir {
    color: #77aaff;
    font-size: 12px;
}

/* ===== GRID ===== */
.grid-container {
    display: flex;
    justify-content: center;
    padding: 20px 10px;
    flex: 1;
}
.grid-table {
    border-collapse: collapse;
    background: rgba(255,255,255,0.03);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(0,0,0,0.4);
}
.grid-cell {
    width: 52px;
    height: 52px;
    text-align: center;
    vertical-align: middle;
    font-size: 22px;
    font-weight: bold;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
    cursor: pointer;
    transition: all 0.2s;
    color: #fff;
    font-family: 'Vazir', sans-serif;
}
.grid-cell:hover:not(.blocked):not(.clue) {
    background: rgba(255,215,0,0.12);
}
.grid-cell.clue {
    background: rgba(255,215,0,0.15);
    color: #f7d875;
    border-color: rgba(255,215,0,0.25);
    cursor: default;
}
.grid-cell.blocked {
    background: rgba(0,0,0,0.3);
    border-color: rgba(255,255,255,0.04);
    cursor: default;
}
.grid-cell.selected {
    background: rgba(255,215,0,0.25) !important;
    border-color: #f7d875 !important;
    box-shadow: 0 0 20px rgba(230,180,34,0.2);
    transform: scale(1.02);
}
.grid-cell.correct {
    background: rgba(100,220,100,0.2) !important;
    color: #7d7 !important;
    border-color: rgba(100,220,100,0.3) !important;
}
.grid-cell.revealed {
    background: rgba(100,180,255,0.2) !important;
    color: #7df !important;
    border-color: rgba(100,180,255,0.3) !important;
}

/* ===== KEYBOARD ===== */
.keyboard {
    background: rgba(255,255,255,0.04);
    border-top: 1px solid rgba(255,255,255,0.06);
    padding: 10px 8px 14px;
    backdrop-filter: blur(12px);
}
.kb-row {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin-bottom: 5px;
    flex-wrap: wrap;
}
.kb-key {
    width: 46px;
    height: 46px;
    border-radius: 10px;
    border: none;
    background: rgba(255,255,255,0.08);
    color: #eee;
    font-size: 18px;
    font-family: 'Vazir', sans-serif;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.kb-key:hover {
    background: rgba(255,255,255,0.16);
    transform: translateY(-1px);
}
.kb-key:active {
    transform: scale(0.93);
    background: rgba(255,215,0,0.2);
}
.kb-key.kb-space {
    width: 160px;
    font-size: 14px;
    background: rgba(255,255,255,0.06);
}
.kb-key.kb-back {
    width: 90px;
    font-size: 14px;
    background: rgba(255,80,80,0.15);
    color: #ff7777;
}
.kb-key.kb-back:hover {
    background: rgba(255,80,80,0.25);
}
.kb-space-row {
    gap: 8px;
}

/* ===== ABILITY BAR ===== */
.ability-bar {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 10px 16px 16px;
    background: rgba(255,255,255,0.02);
    border-top: 1px solid rgba(255,255,255,0.04);
}
.ability-btn {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 14px;
    padding: 10px 18px;
    font-family: 'Vazir', sans-serif;
    font-size: 14px;
    color: #ddd;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    max-width: 220px;
    justify-content: center;
}
.ability-btn:hover {
    background: rgba(255,255,255,0.12);
    border-color: #f7d875;
}
.ability-btn span {
    color: #f7d875;
    font-weight: bold;
}

/* ===== SHOP ===== */
.shop-content {
    padding: 16px 20px 30px;
    overflow-y: auto;
    flex: 1;
}
.shop-section {
    margin-bottom: 28px;
}
.shop-section h3 {
    font-size: 18px;
    color: #f7d875;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.shop-item {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 14px 18px;
    margin-bottom: 10px;
    transition: all 0.3s;
}
.shop-item:hover {
    background: rgba(255,255,255,0.07);
    border-color: rgba(255,215,0,0.15);
}
.shop-item-icon {
    font-size: 32px;
    min-width: 48px;
    text-align: center;
}
.shop-item-info {
    flex: 1;
}
.shop-item-title {
    display: block;
    font-size: 16px;
    font-weight: bold;
    color: #eee;
}
.shop-item-price {
    display: block;
    font-size: 13px;
    color: #8899bb;
    margin-top: 2px;
}
.buy-btn {
    background: linear-gradient(135deg, #f7d875, #e6b422);
    border: none;
    border-radius: 12px;
    padding: 10px 22px;
    font-family: 'Vazir', sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: #1a1a2e;
    cursor: pointer;
    transition: all 0.3s;
    white-space: nowrap;
}
.buy-btn:hover {
    transform: scale(1.04);
    box-shadow: 0 4px 20px rgba(230,180,34,0.3);
}
.buy-btn:active {
    transform: scale(0.96);
}
.weekly-offer {
    border-color: rgba(255,215,0,0.25);
    background: rgba(255,215,0,0.06);
}
.weekly-offer .shop-item-title {
    color: #f7d875;
}

/* ===== LEADERBOARD ===== */
.lb-content {
    padding: 20px;
    flex: 1;
    overflow-y: auto;
}
.lb-content h3 {
    font-size: 20px;
    color: #f7d875;
    margin-bottom: 18px;
    text-align: center;
}
.lb-item {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    padding: 12px 18px;
    margin-bottom: 8px;
    transition: all 0.3s;
}
.lb-item:hover {
    background: rgba(255,255,255,0.07);
}
.lb-rank {
    font-size: 20px;
    font-weight: bold;
    color: #f7d875;
    min-width: 36px;
    text-align: center;
}
.lb-name {
    flex: 1;
    font-size: 16px;
    font-weight: bold;
    color: #eee;
}
.lb-progress {
    font-size: 14px;
    color: #8899bb;
    direction: ltr;
}
.lb-progress .lb-bar-bg {
    display: inline-block;
    width: 80px;
    height: 6px;
    background: rgba(255,255,255,0.1);
    border-radius: 4px;
    overflow: hidden;
    margin-left: 8px;
    vertical-align: middle;
}
.lb-progress .lb-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #f7d875, #e6b422);
    border-radius: 4px;
    transition: width 0.6s ease;
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar {
    width: 4px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(255,215,0,0.3);
    border-radius: 4px;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 500px) {
    .grid-cell {
        width: 42px;
        height: 42px;
        font-size: 18px;
    }
    .kb-key {
        width: 38px;
        height: 42px;
        font-size: 15px;
    }
    .kb-key.kb-space {
        width: 120px;
    }
    .kb-key.kb-back {
        width: 70px;
    }
    .logo-text {
        font-size: 34px;
    }
    .menu-btn {
        font-size: 15px;
        padding: 14px 20px;
    }
    .shop-item {
        padding: 12px 14px;
    }
    .ability-btn {
        font-size: 12px;
        padding: 8px 12px;
    }
}

@media (max-width: 380px) {
    .grid-cell {
        width: 34px;
        height: 34px;
        font-size: 15px;
    }
    .kb-key {
        width: 32px;
        height: 36px;
        font-size: 13px;
    }
    .kb-key.kb-space {
        width: 90px;
        font-size: 12px;
    }
    .kb-key.kb-back {
        width: 60px;
        font-size: 12px;
    }
}


        .footer-container {
            margin-top: 20px;
            /* رنگ پس زمینه فوتر */
            padding: 30px 20px;
            /* فاصله داخلی فوتر */
            text-align: center;
            /* وسط چین کردن محتوا */
            box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.05);
            /* سایه ملایم بالای فوتر */
            border-top: 1px solid #e0e0e0;
            /* خط نازک بالای فوتر */
        }

        .footer-links {
            display: flex;
            justify-content: center;
            /* وسط چین کردن لینک ها */
            align-items: center;
            gap: 25px;
            /* فاصله بین آیتم ها */
            flex-wrap: wrap;
            /* اجازه می دهد لینک ها در صورت کمبود فضا به خط بعدی بروند */
        }

        .footer-link-item {
            display: flex;
            flex-direction: column;
            /* آیکون و متن زیر هم */
            align-items: center;
            text-decoration: none;
            /* حذف خط زیر لینک */
            color: #333;
            /* رنگ متن لینک */
            transition: all 0.3s ease-in-out;
            /* انیمیشن برای تغییرات */
            position: relative;
            padding-bottom: 5px;
            /* فضایی برای انیمیشن زیر خط */
        }

        .footer-link-item::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            /* شروع از وسط */
            transform: translateX(-50%);
            /* تنظیم مرکزیت */
            width: 0;
            /* عرض صفر در حالت عادی */
            height: 2px;
            /* ارتفاع خط */
            background-color: #007bff;
            /* رنگ خط */
            transition: width 0.3s ease-in-out;
            /* انیمیشن عرض */
        }

        .footer-link-item:hover {
            color: #007bff;
            /* تغییر رنگ متن هنگام هاور */
            transform: translateY(-3px);
            /* کمی بالا آمدن */
        }

        .footer-link-item:hover::after {
            width: 80%;
            /* خط تا 80% عرض آیتم کشیده شود */
        }

        .footer-icon {
            width: 40px;
            /* اندازه آیکون */
            height: 40px;
            margin-bottom: 8px;
            /* فاصله بین آیکون و متن */
            transition: transform 0.3s ease-in-out;
            /* انیمیشن برای آیکون */
            border-radius: 8px;
            /* گوشه های گرد برای آیکون */
            object-fit: cover;
            /* برای اطمینان از اینکه عکس خوب دیده شود */
        }

        .footer-link-item:hover .footer-icon {
            transform: scale(1.1);
            /* کمی بزرگ شدن آیکون هنگام هاور */
            box-shadow: 0 0 10px rgba(0, 123, 255, 0.3);
            /* سایه رنگی */
        }

        .footer-link-text {
            font-size: 0.9em;
            font-weight: bold;
        }

        /* استایل برای فوتر در موبایل */
        @media (max-width: 768px) {
            .footer-links {
                flex-direction: column;
                /* چیدمان عمودی لینک ها */
                gap: 20px;
            }

            .footer-link-item {
                width: 100%;
                /* هر لینک کل عرض را بگیرد */
                max-width: 200px;
                /* حداکثر عرض برای جلوگیری از کشیدگی زیاد */
            }

            .footer-icon {
                width: 35px;
                height: 35px;
            }

            .footer-link-text {
                font-size: 0.85em;
            }

            .footer-container {
                padding: 20px 15px;
            }
        }


        /* استایل‌های پایه برای مودال */
.modal {
  display: none; /* به صورت پیش‌فرض مخفی است */
  position: fixed; /* موقعیت ثابت */
  z-index: 1000; /* بالای همه محتوا */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto; /* در صورت نیاز اسکرول */
  background-color: rgba(0,0,0,0.5); /* پس‌زمینه تیره */
}

.modal-content {
  background-color: #fefefe;
  margin: 10% auto; /* وسط صفحه */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* عرض مودال */
  max-width: 600px; /* حداکثر عرض */
  text-align: right; /* راست‌چین برای فارسی */
  border-radius: 8px;
  position: relative;
}

.close-btn {
 color: black;
  position: absolute;
  top: 10px;
  left: 20px; /* موقعیت دکمه بستن */
  font-size: 28px;
  font-weight: bold;
}

.close-btn:hover,
.close-btn:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}



.btn-icon {
  margin-left: 8px; /* فاصله آیکون از متن */
}

h2 {
    margin-top: 0;
 color: black;
}

ul {
    color: black;
    list-style-type: disc;
    margin-right: 20px; /* تنظیم مارجین برای لیست */
}