/* Player-facing missions page (/misijos).
 * Cards use .glass-card + Bootstrap .progress as the foundation.
 * Everything below is the redesign skin: hex badge, reset chips,
 * completion/lock overlays, progress meta row. Prefix: .misijos- */

/* ── Sidebar ──────────────────────────────────────────────────── */

.misijos-sidebar-item {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0.75rem;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.misijos-sidebar-item:hover {
    background: rgba(13, 202, 240, 0.07);
    border-color: rgba(13, 202, 240, 0.2);
}

.misijos-sidebar-item.active {
    background: rgba(13, 202, 240, 0.12);
    border-color: rgba(13, 202, 240, 0.4);
}

.misijos-count-badge {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.7);
    font-weight: 600;
}

/* ── Card shell ───────────────────────────────────────────────── */

.misijos-card {
    overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.misijos-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.5);
}

.misijos-card-done {
    border-color: rgba(40, 167, 69, 0.45);
    background:
        linear-gradient(180deg, rgba(40, 167, 69, 0.08), transparent 35%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
}

.misijos-card-locked {
    opacity: 0.65;
}

/* ── Hex badge container ──────────────────────────────────────── */
/* Octagonal-leaning hex via clip-path; matches the in-game achievement
   aesthetic the user shared in the reference screenshot. */

.misijos-badge-wrap {
    position: relative;
    width: 84px;
    height: 84px;
}

.misijos-badge {
    width: 84px;
    height: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, rgba(13, 202, 240, 0.22), rgba(13, 202, 240, 0.05));
    border: 1px solid rgba(13, 202, 240, 0.35);
    clip-path: polygon(
        50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%
    );
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08),
                0 6px 18px rgba(0, 0, 0, 0.35);
}

.misijos-card-done .misijos-badge {
    background: linear-gradient(160deg, rgba(40, 167, 69, 0.3), rgba(40, 167, 69, 0.05));
    border-color: rgba(40, 167, 69, 0.55);
}

.misijos-badge-img {
    width: 84px;
    height: 84px;
    object-fit: contain;
    filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.55));
}

/* Bare variant: when a real ImageUrl is set we drop the hex frame so the
   artwork can fill the full badge area. The fallback icon keeps the framed
   look (otherwise it would float without context). */
.misijos-badge-bare {
    background: transparent;
    border: 0;
    clip-path: none;
    box-shadow: none;
}

.misijos-card-done .misijos-badge-bare {
    background: transparent;
    border: 0;
}

.misijos-badge-icon {
    font-size: 2rem;
    color: rgba(13, 202, 240, 0.75);
    filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.5));
}

.misijos-card-done .misijos-badge-icon {
    color: rgba(120, 220, 150, 0.85);
}

/* Completion check + lock overlays anchored to bottom-right of badge */
.misijos-badge-check,
.misijos-badge-lock {
    position: absolute;
    bottom: 0;
    right: 4px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    border: 2px solid rgba(0, 0, 0, 0.55);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.45);
}

.misijos-badge-check {
    background: linear-gradient(160deg, #2ecc71, #27ae60);
    color: white;
}

.misijos-badge-lock {
    background: linear-gradient(160deg, #f1c40f, #c19a06);
    color: #2a1f00;
}

/* ── Reward strip (chips + phrase, above progress bar) ───────── */

.misijos-reward-strip {
    margin-top: auto;
}

.misijos-reward-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.2;
    border: 1px solid transparent;
    white-space: nowrap;
}

.misijos-reward-chip-jewels {
    background: rgba(13, 202, 240, 0.18);
    border-color: rgba(13, 202, 240, 0.35);
    color: #cfeefb;
}

.misijos-reward-chip-case {
    background: rgba(241, 196, 15, 0.15);
    border-color: rgba(241, 196, 15, 0.35);
    color: #f1c40f;
}

.misijos-card-done .misijos-reward-chip-jewels {
    background: rgba(40, 167, 69, 0.2);
    border-color: rgba(40, 167, 69, 0.45);
    color: #b9eccc;
}

.misijos-card-done .misijos-reward-chip-case {
    background: rgba(40, 167, 69, 0.18);
    border-color: rgba(40, 167, 69, 0.4);
    color: #d6f1de;
}

.misijos-reward-phrase {
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Reset chips (under the badge) ────────────────────────────── */

.misijos-reset-chip {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: 1px solid transparent;
    line-height: 1.3;
}

.misijos-reset-chip-daily {
    background: rgba(52, 152, 219, 0.15);
    color: #74b9ff;
    border-color: rgba(52, 152, 219, 0.35);
}

.misijos-reset-chip-weekly {
    background: rgba(241, 196, 15, 0.15);
    color: #f1c40f;
    border-color: rgba(241, 196, 15, 0.35);
}

.misijos-reset-chip-monthly {
    background: rgba(155, 89, 182, 0.15);
    color: #c39bd3;
    border-color: rgba(155, 89, 182, 0.35);
}

.misijos-reset-chip-permanent {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.6);
    border-color: rgba(255, 255, 255, 0.15);
}

.misijos-reset-chip-vip {
    background: rgba(241, 196, 15, 0.18);
    color: #f1c40f;
    border-color: rgba(241, 196, 15, 0.4);
}

.misijos-reset-chip-donate {
    background: rgba(232, 62, 140, 0.18);
    color: #ff6fb1;
    border-color: rgba(232, 62, 140, 0.45);
}

.misijos-reset-chip-server {
    background: rgba(13, 202, 240, 0.12);
    color: #8ed8f3;
    border-color: rgba(13, 202, 240, 0.32);
}

.misijos-reset-chip-map {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.7);
    border-color: rgba(255, 255, 255, 0.15);
}

/* ── Typography ───────────────────────────────────────────────── */

.misijos-card-title {
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Progress bar + meta row ─────────────────────────────────── */

.misijos-progress-thin {
    height: 6px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 3px;
    overflow: hidden;
}

.misijos-progress-row {
    margin-top: auto;
}

.misijos-progress-meta {
    font-size: 0.72rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.75);
    letter-spacing: 0.02em;
}