/* ===========================
   style.css
=========================== */

/* Import Font */
@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;700;900&display=swap');

/* ===========================
   Theme Setup
=========================== */
:root {
    --color-primary: #FF5722; /* Energetic Orange */
    --color-secondary: #0c1a2e; /* Deep Dark Blue */
    --color-card: #12243d;
    --color-text: #f3f4f6;
    --color-secondary-rgb: 12, 26, 46;
}

/* ===========================
   Global Body Styles
=========================== */
body {
    font-family: 'Vazirmatn', sans-serif;
    background-color: var(--color-secondary);
    color: var(--color-text);
}

/* ===========================
   Hero / Mascot Animation
=========================== */
@keyframes running-wobble {
    0%, 100% { transform: scale(1) translateY(0); }
    50% { transform: scale(1.02) translateY(-5px); }
}
.slime-container {
    width: 300px;
    height: 300px;
    animation: running-wobble 0.7s infinite alternate ease-in-out; 
}

/* ===========================
   Buttons
=========================== */
.btn-primary {
    background-color: var(--color-primary);
    color: white;
    transition: background-color 0.3s, transform 0.2s;
    box-shadow: 0 4px 20px rgba(255, 87, 34, 0.5);
}
.btn-primary:hover {
    background-color: #E64A19;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(255, 87, 34, 0.6);
}

/* ===========================
   Cards
=========================== */
.gamofit-card {
    background-color: var(--color-card);
    border: 1px solid #1e3a5a;
    border-radius: 1rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s, border-color 0.3s;
}
.gamofit-card:hover {
    border-color: var(--color-primary);
    transform: translateY(-5px);
}

/* ===========================
   Section Titles
=========================== */
.section-title {
    color: var(--color-primary);
    text-shadow: 0 0 10px rgba(255, 87, 34, 0.5);
}

/* ===========================
   Leaderboard Table
=========================== */
.leaderboard-table th {
    background-color: #1a345c;
}
.leaderboard-table tr:nth-child(1) td {
    color: gold;
    font-weight: bold;
    background-color: rgba(59, 130, 246, 0.25); /* #3b82f640 */
}
.leaderboard-table tr:nth-child(2) td {
    color: silver;
}
.leaderboard-table tr:nth-child(3) td {
    color: #cd7f32; /* Bronze */
}
.leaderboard-row {
    background-color: rgba(var(--color-secondary-rgb), 0.7);
    border-radius: 0.5rem;
}
.leaderboard-row:hover {
     background-color: var(--color-secondary);
}

/* ===========================
   Login / Signup Card
=========================== */
.auth-card {
    background-color: var(--color-card);
    border: 2px solid var(--color-primary);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4), 0 0 20px rgba(255, 87, 34, 0.2);
    max-width: 450px;
    width: 100%;
    border-radius: 1rem;
    padding: 1rem;
}

body.login-body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 1rem;
}

/* ===========================
   Tabs
=========================== */
.tab-active {
    color: var(--color-primary);
    border-bottom: 3px solid var(--color-primary);
    font-weight: 700;
}
.tab-inactive {
    color: #9ca3af;
    border-bottom: 3px solid transparent;
    transition: color 0.3s;
}
.tab-inactive:hover {
    color: var(--color-text);
}
/* ===========================
   Smooth Scrolling for Anchor Links
=========================== */
html {
    scroll-behavior: smooth;
}
/* ===========================
   Gamofit General Card Style
=========================== */
.gamofit-card {
    background-color: var(--color-card); /* #12243d */
    border: 1px solid #1e3a5a;
    border-radius: 0.75rem; /* rounded-lg */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.gamofit-card:hover {
    box-shadow: 0 6px 15px rgba(255, 87, 34, 0.2);
}
/* ===========================
   رفع مشکل رنگ متن Input در حالت تیره (Dark Background Fix)
/* اعمال استایل بر روی تمام فیلدهای ورودی متنی، ایمیل، رمز عبور و ناحیه‌های متنی (Textarea) */
input[type="text"], 
input[type="email"], 
input[type="password"], 
textarea {
    background-color: #1F2937; /* رنگ خاکستری تیره (پیشنهاد شده) */
    color: #F3F4F6; /* رنگ متن: سفید ملایم */
    border: 1px solid #374151; /* حاشیه ملایم */
    border-radius: 0.5rem; /* گرد کردن لبه‌ها */
    padding: 0.75rem 1rem;
    transition: all 0.2s;
    width: 100%; /* معمولاً فیلدهای فرم باید عرض کامل داشته باشند */
}

/* استایل هنگام فوکوس (انتخاب شدن فیلد) */
input[type="text"]:focus, 
input[type="email"]:focus, 
input[type="password"]:focus, 
textarea:focus {
    outline: none; 
    border-color: var(--color-primary); /* رنگ نارنجی/قرمز تم اصلی */
    box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.2); 
}
textarea {
    resize: none !important;
}