@keyframes mappackShimmer {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes levelCompletedShimmer {
    0% { filter: drop-shadow(0 0 0 rgba(34,197,94,0.0)); }
    50% { filter: drop-shadow(0 0 18px rgba(34,197,94,0.55)); }
    100% { filter: drop-shadow(0 0 0 rgba(34,197,94,0.0)); }
}

.mappack-folder {
    color: #fff;
    border: 1px solid rgba(255,255,255,0.22);
    background-size: 200% 200%;
    animation: mappackShimmer 3s ease infinite;
    border-radius: 14px;
    overflow: hidden;
    position: relative;
}

.mappack-header {
    background: rgba(15,23,42,0.78);
    border-bottom: 1px solid rgba(255,255,255,0.12);
    padding: 12px 14px;
}

/* Пакет содержит уровни, снятые с AivanCrate — как «строительная» разметка */
.mappack-header.mappack-header--delisted {
    background: repeating-linear-gradient(
        -52deg,
        #0a0a0a 0px,
        #0a0a0a 14px,
        #facc15 14px,
        #facc15 28px
    );
    border-bottom: 3px solid #000;
}
.mappack-header.mappack-header--delisted .mappack-header-title,
.mappack-header.mappack-header--delisted .mappack-header-points {
    color: #111;
    text-shadow:
        0 0 8px rgba(255, 255, 255, 0.95),
        0 0 3px rgba(255, 255, 255, 0.9),
        1px 1px 0 #facc15;
}
.mappack-header.mappack-header--delisted .mappack-progress {
    color: #111;
    text-shadow:
        0 0 8px rgba(255, 255, 255, 0.95),
        1px 1px 0 #facc15;
}

.mappack-delisted-strip {
    background: repeating-linear-gradient(
        -52deg,
        #0a0a0a 0px,
        #0a0a0a 12px,
        #facc15 12px,
        #facc15 24px
    );
    border-bottom: 2px solid #000;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    color: #111;
    text-shadow:
        0 0 8px rgba(255, 255, 255, 0.95),
        1px 1px 0 #facc15;
}

/* Отдельная ячейка уровня в пакете — снят с AivanCrate */
a.mappack-level.mappack-level--delisted {
    box-shadow: inset 0 0 0 3px #000;
    position: relative;
}
a.mappack-level.mappack-level--delisted::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 6px;
    z-index: 3;
    background: repeating-linear-gradient(
        -52deg,
        #0a0a0a 0px,
        #0a0a0a 8px,
        #facc15 8px,
        #facc15 16px
    );
    border-bottom: 1px solid #000;
    pointer-events: none;
}

.player-mappack-item--delisted {
    flex-direction: column;
    align-items: stretch !important;
}
.player-mappack-item--delisted > .player-mappack-item-inner {
    display: flex;
    align-items: center;
    width: 100%;
}

.mappack-header-title {
    font-weight: 700;
    margin: 0;
    font-size: 1.05rem;
}

.mappack-header-points {
    color: rgba(226, 232, 240, 0.85);
    font-weight: 600;
}

.mappacks-sort-toolbar .mappacks-order-btn.active {
    background: rgba(37, 99, 235, 0.2);
    border-color: rgba(37, 99, 235, 0.55);
    color: #1e3a8a;
}

.player-mappack-thumb {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    object-fit: cover;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.12);
}

/* Иконка сложности (самый сложный уровень в маппаке) — вкладка профиля */
.player-mappack-diff-icon {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.player-mappack-diff-fallback {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: rgba(148, 163, 184, 0.25);
    color: #64748b;
    font-weight: 700;
}

.mappack-progress {
    font-weight: 800;
    font-size: 0.95rem;
}

.mappack-progress-complete {
    color: #22c55e;
    text-shadow: 0 0 10px rgba(34,197,94,0.45);
}

.mappack-levels {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mappack-level {
    position: relative;
    display: block;
    border-radius: 12px;
    overflow: hidden;
    min-height: 80px;
    border: 1px solid rgba(255,255,255,0.16);
}

.mappack-level-bg {
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: cover;
    filter: saturate(1.05);
}

.mappack-level-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(1.05);
}

.mappack-level-overlay {
    position: relative;
    z-index: 2;
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, rgba(0,0,0,0.55), rgba(0,0,0,0.25));
    display: flex;
    align-items: center;
    padding: 10px 12px;
    gap: 10px;
}

.mappack-level-overlay .level-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.mappack-level-title {
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mappack-level-sub {
    color: rgba(255,255,255,0.85);
    font-size: 0.85rem;
}

.mappack-level.completed {
    animation: levelCompletedShimmer 2s ease-in-out infinite;
    border-color: rgba(34,197,94,0.95) !important;
    border-width: 2px !important;
    box-shadow: 0 0 0 2px rgba(34,197,94,0.35), 0 0 22px rgba(34,197,94,0.55);
}

/* Gradients by color_code (from mappacks.color_code) */
.mappack-color-default {
    background: linear-gradient(90deg, #334155, #94a3b8);
}

.mappack-color-blue { background: linear-gradient(90deg, #2563eb, #60a5fa); }
.mappack-color-green { background: linear-gradient(90deg, #16a34a, #4ade80); }
.mappack-color-brown { background: linear-gradient(90deg, #7c3f00, #c0853a); }
.mappack-color-red { background: linear-gradient(90deg, #dc2626, #fb7185); }
.mappack-color-purple { background: linear-gradient(90deg, #6d28d9, #c084fc); }
.mappack-color-yellow { background: linear-gradient(90deg, #ca8a04, #fde047); }
.mappack-color-orange { background: linear-gradient(90deg, #ea580c, #fb923c); }
.mappack-color-teal { background: linear-gradient(90deg, #0d9488, #5eead4); }
.mappack-color-pink { background: linear-gradient(90deg, #db2777, #f472b6); }

.mappack-color-rainbow {
    background: linear-gradient(90deg, #ef4444, #f59e0b, #84cc16, #22c55e, #06b6d4, #3b82f6, #a855f7);
}

.mappack-color-flame {
    background-image: linear-gradient(90deg, #dc2626, #f97316, #facc15);
    background-size: 200% 200%;
}

.mappack-color-bloodsport {
    background-image: linear-gradient(90deg, #dc2626 0%, #ffffff 35%, #000000 100%),
        repeating-linear-gradient(135deg, rgba(239,68,68,0.0) 0 14px, rgba(239,68,68,0.35) 14px 18px),
        radial-gradient(circle at 20% 30%, rgba(239,68,68,0.55), transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(239,68,68,0.35), transparent 55%);
    background-blend-mode: overlay, screen, normal, normal;
    background-size: 100% 100%, 200% 200%, 100% 100%, 100% 100%;
    animation: mappackShimmer 2.5s ease infinite;
}

/* nine-circles effects by DB color_code tags: nc1 nc2 nc3 */
.mappack-color-nc1 {
    background-image: linear-gradient(90deg, #dc2626, #f97316, #facc15);
    background-size: 200% 200%;
    animation: mappackShimmer 3s ease infinite, nc1Glow 1.2s steps(3) infinite;
}

.mappack-color-nc2 {
    background-image: linear-gradient(90deg, #dc2626 0%, #ffffff 35%, #000000 100%),
        repeating-linear-gradient(135deg, rgba(255,255,255,0.0) 0 14px, rgba(255,255,255,0.45) 14px 18px),
        radial-gradient(circle at 20% 30%, rgba(255,255,255,0.7), transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(0,0,0,0.6), transparent 55%);
    background-blend-mode: overlay, screen, normal, normal;
    background-size: 100% 100%, 200% 200%, 100% 100%, 100% 100%;
    animation: mappackShimmer 3s ease infinite, nc2Glow 1.1s steps(2) infinite;
}

.mappack-color-nc3 {
    background-image: linear-gradient(90deg, #c084fc, #6d28d9, #4c1d95);
    background-size: 200% 200%;
    animation: mappackShimmer 3s ease infinite, nc3Glow 1.6s ease-in-out infinite;
}

/* Nine-circles-like glow effects (keyframes only). Real usage is via mappack-color-nc1/nc2/nc3. */
@keyframes nc1Glow {
    0% { box-shadow: 0 0 0 2px rgba(220,38,38,0.35), 0 0 30px rgba(220,38,38,0.55); }
    33% { box-shadow: 0 0 0 2px rgba(249,115,22,0.35), 0 0 30px rgba(249,115,22,0.55); }
    66% { box-shadow: 0 0 0 2px rgba(250,204,21,0.35), 0 0 30px rgba(250,204,21,0.55); }
    100% { box-shadow: 0 0 0 2px rgba(220,38,38,0.35), 0 0 30px rgba(220,38,38,0.55); }
}

@keyframes nc2Glow {
    0% { box-shadow: 0 0 0 2px rgba(229,231,235,0.40), 0 0 30px rgba(229,231,235,0.55); }
    50% { box-shadow: 0 0 0 2px rgba(0,0,0,0.45), 0 0 30px rgba(0,0,0,0.65); }
    100% { box-shadow: 0 0 0 2px rgba(229,231,235,0.40), 0 0 30px rgba(229,231,235,0.55); }
}

@keyframes nc3Glow {
    0% { box-shadow: 0 0 0 2px rgba(196,181,253,0.45), 0 0 34px rgba(167,139,250,0.65); }
    45% { box-shadow: 0 0 0 2px rgba(129,78,255,0.35), 0 0 34px rgba(99,102,241,0.55); }
    100% { box-shadow: 0 0 0 2px rgba(76,29,149,0.55), 0 0 34px rgba(76,29,149,0.75); }
}