/* =========================================
   Battle HUD Missions - Grid & Color Themes
========================================= */

/* تنظیم ساختار گرید (دو ستونه) */
#missions-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 10px 5px 20px 5px;
    align-items: stretch; /* هم‌اندازه کردن کارت‌ها در هر ردیف */
}

/* کلاس‌های رنگی اختصاصی (تم‌ها) */
.theme-hourly { --mc: #38bdf8; --mc-rgb: 56, 189, 248; }
.theme-red { --mc: #ef4444; --mc-rgb: 239, 68, 68; }
.theme-emerald { --mc: #10b981; --mc-rgb: 16, 185, 129; }
.theme-orange { --mc: #f97316; --mc-rgb: 249, 115, 22; }
.theme-blue { --mc: #3b82f6; --mc-rgb: 59, 130, 246; }
.theme-purple { --mc: #a855f7; --mc-rgb: 168, 85, 247; }
.theme-teal { --mc: #14b8a6; --mc-rgb: 20, 184, 166; }
.theme-gold { --mc: #f59e0b; --mc-rgb: 245, 158, 11; }

/* کارت پایه ماموریت */
.mission-item {
    background: linear-gradient(145deg, #1e293b, rgba(var(--mc-rgb), 0.08));
    border: 1px solid rgba(var(--mc-rgb), 0.2);
    border-top: 4px solid var(--mc); /* نوار رنگی بالای کارت */
    border-radius: 12px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    transition: all 0.3s ease;
}

/* کارت‌های تمام عرض (ساعتی و جایزه بزرگ) */
.mission-item.full-width {
    grid-column: 1 / -1;
}

/* حالت آماده دریافت جایزه */
.mission-item.ready-to-claim {
    background: linear-gradient(145deg, #1e293b, rgba(var(--mc-rgb), 0.25));
    border-color: var(--mc);
    box-shadow: 0 0 15px rgba(var(--mc-rgb), 0.4);
    transform: translateY(-2px);
}

/* حالت تکمیل شده */
.mission-item.completed {
    opacity: 0.5;
    background: #0f172a;
    border-top-color: #64748b;
    filter: grayscale(0.5);
}

/* بخش هدر ماموریت */
.mission-header {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.mission-title {
    font-size: 0.8rem;
    font-weight: 900;
    color: #f8fafc;
    line-height: 1.4;
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.mission-title i {
    font-size: 1.1rem;
    color: var(--mc); /* رنگ آیکون داینامیک */
    margin-top: 2px;
}

/* نشان جایزه */
.mission-reward {
    align-self: flex-start;
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(var(--mc-rgb), 0.5);
    color: var(--mc);
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 900;
}

/* نوار پیشرفت */
.mission-progress-bar {
    width: 100%;
    height: 8px;
    background: #020617;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 5px;
}

.mission-progress-fill {
    height: 100%;
    background: var(--mc); /* رنگ نوار داینامیک */
    width: 0%;
    border-radius: 4px;
    transition: width 0.5s ease-out;
    box-shadow: 0 0 8px var(--mc);
}

/* متن پیشرفت */
.mission-progress-text {
    font-size: 0.75rem;
    color: #cbd5e1;
    font-weight: bold;
    font-family: monospace;
    margin-bottom: 10px;
    text-align: left;
}

/* دکمه‌ها */
.btn-claim {
    margin-top: auto; /* هُل دادن دکمه به پایین کارت برای هم‌اندازه شدن */
    background: #334155;
    color: #94a3b8;
    border: none;
    border-radius: 8px;
    padding: 8px 10px;
    font-weight: 900;
    font-size: 0.8rem;
    cursor: not-allowed;
    width: 100%;
    text-align: center;
}

.btn-claim.ready {
    background: var(--mc);
    color: #ffffff;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(var(--mc-rgb), 0.5);
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    animation: pulse-btn 1.5s infinite;
}

@keyframes pulse-btn {
    0% { transform: scale(1); }
    50% { transform: scale(1.03); }
    100% { transform: scale(1); }
}

/* تایمر ساعتی */
#hourly-timer-text {
    font-size: 0.8rem;
    font-weight: bold;
    color: var(--mc);
    text-align: center;
    margin-bottom: 8px;
}