/* =================================================
   UI UPGRADE – SAFE GOD MODE
================================================= */

/* =====================
   FONTS
===================== */
body {
    font-family: 'Lalezar', 'Mikhak', sans-serif;
    color: var(--text-main);
    transition: color 0.4s ease;
}

.game-title,
.menu-title,
.section-title,
.modal-title,
.results-title,
.scoring-title,
.option-title,
.start-game-btn,
.finish-btn,
.submit-scores-btn,
.current-letter {
    font-family: 'Lalezar', 'Mikhak', cursive;
    letter-spacing: 1.2px;
}

/* =====================
   THEME VARIABLES
===================== */
:root {
    --text-main: #2c3e50;
    --text-soft: #6c757d;
    --card-bg: rgba(255,255,255,0.85);
    --accent: #ff6b6b;
}

body.dark {
    --text-main: #f1f3f5;
    --text-soft: #adb5bd;
    --card-bg: rgba(26,31,54,0.92);
    --accent: #ff8787;
}

/* =====================
   SAFE GLOBAL OVERRIDES
===================== */
.game-container,
.menu-option,
.players-section,
.settings-panel,
.category-card,
.modal-content,
.scoring-category,
.other-players,
.player-answers {
    background: var(--card-bg);
    color: var(--text-main);
    transition: background 0.4s ease, color 0.4s ease;
}

.option-description,
.player-status,
.answer-category {
    color: var(--text-soft);
}

.game-container {
    backdrop-filter: blur(12px);
}

/* =====================
   MENU WOW
===================== */
.menu-option {
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
}

.menu-option::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        120deg,
        transparent 20%,
        rgba(255,255,255,0.45),
        transparent 80%
    );
    transform: translateX(-100%);
    transition: 0.6s;
    pointer-events: none;
}

.menu-option:hover::before {
    transform: translateX(100%);
}

.menu-option:hover {
    transform: translateY(-8px) scale(1.04);
    box-shadow: 0 30px 70px rgba(0,0,0,0.22);
}

/* =====================
   ICONS
===================== */
.option-icon {
    transition: transform 0.4s ease;
}

.menu-option:hover .option-icon {
    transform: scale(1.2) rotate(-6deg);
}

/* =====================
   BUTTONS (SAFE CLICK)
===================== */
.btn,
.start-game-btn,
.finish-btn,
.submit-scores-btn {
    position: relative;
    overflow: hidden;
    transition: transform 0.25s ease;
}

.btn::after,
.start-game-btn::after,
.finish-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, rgba(255,255,255,0.35), transparent 70%);
    opacity: 0;
    transition: 0.3s;
    pointer-events: none;
}

.btn:hover::after,
.start-game-btn:hover::after,
.finish-btn:hover::after {
    opacity: 1;
}

.btn:hover,
.start-game-btn:hover,
.finish-btn:hover {
    transform: translateY(-3px) scale(1.06);
}

/* =====================
   CURRENT LETTER
===================== */
.current-letter {
    animation: letterPulse 1.4s infinite;
}

@keyframes letterPulse {
    0% { box-shadow: 0 0 0 0 rgba(255,107,107,0.6); }
    70% { box-shadow: 0 0 0 26px rgba(255,107,107,0); }
    100% { box-shadow: 0 0 0 0 rgba(255,107,107,0); }
}

/* =====================
   CARDS
===================== */
.category-card {
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.category-card:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 22px 55px rgba(0,0,0,0.18);
}

/* =====================
   MODAL
===================== */
.modal-content {
    animation: modalPop 0.45s ease;
}

@keyframes modalPop {
    from { transform: scale(0.85); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* =====================
   SCORE
===================== */
.score-option:hover {
    transform: scale(1.15);
}

.score-option.selected {
    animation: scoreWin 0.5s ease;
}

@keyframes scoreWin {
    0% { transform: scale(0.9); }
    70% { transform: scale(1.2); }
    100% { transform: scale(1.1); }
}

/* =====================
   DARK MODE SWITCH
===================== */
.theme-toggle {
    position: fixed;
    bottom: 25px;
    left: 25px;
    z-index: 9999;
}

.theme-toggle input {
    display: none;
}

.theme-toggle label {
    width: 70px;
    height: 36px;
    background: #dee2e6;
    border-radius: 50px;
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.2);
    transition: background 0.3s ease;
}

.theme-toggle .sun,
.theme-toggle .moon {
    font-size: 1.2rem;
}

.theme-toggle .ball {
    position: absolute;
    width: 28px;
    height: 28px;
    background: white;
    border-radius: 50%;
    top: 4px;
    left: 4px;
    transition: transform 0.35s ease;
}

#darkSwitch:checked + label .ball {
    transform: translateX(34px);
}

body.dark .theme-toggle label {
    background: #343a40;
}

/* =====================
   DARK MODE BACKGROUND GRADIENT
===================== */
body.dark {
    background: linear-gradient(
        135deg,
        #0b0f1a,
        #191c29,
        #31333d
    ) !important;
}



html, body {
    direction: rtl;
}

/* =====================
   MOBILE
===================== */
.menu-option:hover {
        transform: scale(1.03);
    
/* =====================================
   CARD SIZE FIX – NO MEDIA QUERIES
===================================== */

/* کانتینر کارت‌ها */
.menu-container,
.category-container,
.cards,
.grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px;
}

/* خود کارت‌ها */
.menu-option,
.category-card,
.game-card,
.card {
    width: 100%;
    max-width: 320px;   /* 🔥 مهم: جلوی گنده شدن */
    min-height: 120px;
    padding: 16px 18px;
}

/* متن داخل کارت */
.menu-option h3,
.category-card h3,
.card-title {
    font-size: 1.2rem;
    line-height: 1.4;
}

/* جلوگیری از کش‌اومدن */
.menu-option *,
.category-card *,
.card * {
    max-width: 100%;
    word-wrap: break-word;
}

/* فیکس کلی layout */
html, body {
    width: 100%;
    overflow-x: hidden;
}

/* =====================================
   DARK MODE – CARD + TEXT FORCE FIX
===================================== */


}