/* ============================================================
   SETUP SKIN SELECTOR — közös prémium, reszponzív megjelenés
   battle-setupv2 / ranked-setup / mission-setup
   ============================================================ */

:is(#bsv2-skin-select, #ranked-skin-select) {
    --ssx-gold: #e5c36f;
    --ssx-cyan: #65d9ef;
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: clamp(48px, 5vw, 74px) minmax(0, 1fr) clamp(48px, 5vw, 74px);
    grid-template-rows: auto minmax(0, 1fr) auto;
    align-items: center;
    justify-items: center;
    gap: clamp(10px, 1.6vw, 22px);
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: clamp(18px, 2.3vw, 34px) clamp(14px, 2vw, 30px) clamp(14px, 1.8vw, 26px);
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 0;
    background: #03070d;
}

:is(#bsv2-skin-select, #ranked-skin-select).hidden { display: none; }

:is(#bsv2-skin-select, #ranked-skin-select)::before {
    content: "";
    position: absolute;
    inset: 10px;
    z-index: 0;
    border: 1px solid rgba(221, 191, 116, 0.12);
    clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 11px 100%, 0 calc(100% - 11px));
    pointer-events: none;
}

:is(#bsv2-skin-select, #ranked-skin-select)::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(229,195,111,.78) 28%, rgba(101,217,239,.58) 52%, rgba(229,195,111,.7) 76%, transparent);
    box-shadow: 0 0 13px rgba(207,177,105,.28);
    pointer-events: none;
}

:is(#bsv2-skin-select, #ranked-skin-select) #bsv2-skin-select-bg {
    inset: -12px;
    z-index: -2;
    background-size: cover;
    background-position: center 30%;
    filter: brightness(.28) saturate(.78) blur(2px);
    transform: scale(1.035);
    transition: background-image 280ms ease, opacity 280ms ease;
}

:is(#bsv2-skin-select, #ranked-skin-select) #bsv2-skin-select-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(112,196,215,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(112,196,215,.025) 1px, transparent 1px);
    background-size: 42px 42px;
    mix-blend-mode: screen;
}

:is(#bsv2-skin-select, #ranked-skin-select) #bsv2-skin-select-bg::after {
    background:
        radial-gradient(ellipse at 50% 47%, rgba(7,12,18,.04) 0%, rgba(3,7,12,.38) 48%, rgba(2,5,9,.94) 100%),
        linear-gradient(180deg, rgba(2,5,9,.58), transparent 25%, transparent 70%, rgba(2,5,9,.8));
}

.ssx-header {
    position: relative;
    z-index: 3;
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: stretch;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding: 0 clamp(6px, 1vw, 16px) clamp(12px, 1.4vw, 19px);
    border-bottom: 1px solid rgba(214,183,109,.16);
}

.ssx-eyebrow {
    display: block;
    color: var(--ssx-cyan);
    font: 700 clamp(.48rem, .55vw, .6rem)/1 "Montserrat", sans-serif;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.ssx-header h2 {
    margin: 6px 0 0;
    color: #f2eee4;
    font-family: "AOW", "SpectralBold", serif;
    font-size: clamp(1.35rem, 2.1vw, 2.25rem);
    font-weight: 400;
    line-height: 1;
    letter-spacing: .035em;
    text-shadow: 0 4px 18px rgba(0,0,0,.78);
}

.ssx-hero-name { color: var(--ssx-gold); }

.ssx-counter {
    display: flex;
    align-items: baseline;
    gap: 7px;
    color: #817b70;
    font-family: "Montserrat", sans-serif;
}

.ssx-counter span { font-size: .72rem; font-weight: 700; }
.ssx-counter .ssx-current { color: #f0d48f; font-size: 1.45rem; }
.ssx-counter i { color: #56534d; font-size: .75rem; font-style: normal; }

:is(#bsv2-skin-carousel, #ranked-skin-carousel) {
    position: relative;
    z-index: 3;
    grid-column: 2;
    grid-row: 2;
    width: auto;
    height: min(100%, clamp(310px, 50vh, 570px));
    max-width: min(100%, 920px);
    max-height: 100%;
    aspect-ratio: 16 / 10;
    overflow: visible;
    border: 1px solid rgba(224,191,109,.4);
    background: rgba(2,5,9,.8);
    box-shadow: 0 24px 58px rgba(0,0,0,.58), 0 0 0 8px rgba(2,5,9,.38), 0 0 34px rgba(220,184,96,.1);
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}

:is(#bsv2-skin-carousel, #ranked-skin-carousel)::before {
    content: "PREVIEW // LOADOUT VISUAL";
    position: absolute;
    top: 13px;
    left: 16px;
    z-index: 8;
    color: rgba(229,207,154,.72);
    font: 700 .48rem/1 "Montserrat", sans-serif;
    letter-spacing: .17em;
    text-shadow: 0 1px 4px #000;
    pointer-events: none;
}

:is(#bsv2-skin-carousel, #ranked-skin-carousel) .bsv2-skin-card,
:is(#bsv2-skin-carousel, #ranked-skin-carousel) .bsv2-skin-card.is-active {
    display: none;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
    overflow: hidden;
    background: #03070c;
    box-shadow: none;
    transform: none;
    opacity: 1;
    transition: opacity 220ms ease;
}

:is(#bsv2-skin-carousel, #ranked-skin-carousel) .bsv2-skin-card.is-active {
    display: block;
    z-index: 2 !important;
    animation: ssxCardReveal 340ms cubic-bezier(.2,.7,.2,1);
}

:is(#bsv2-skin-carousel, #ranked-skin-carousel) .bsv2-skin-card::before {
    content: "";
    position: absolute;
    inset: 9px;
    z-index: 3;
    border: 1px solid rgba(235,213,160,.12);
    pointer-events: none;
}

:is(#bsv2-skin-carousel, #ranked-skin-carousel) .bsv2-skin-card::after {
    z-index: 2;
    height: 48%;
    background: linear-gradient(0deg, rgba(2,5,9,.98) 5%, rgba(2,5,9,.72) 32%, transparent 100%);
}

:is(#bsv2-skin-carousel, #ranked-skin-carousel) .bsv2-skin-card img.bsv2-skin-card-art {
    width: 100%;
    height: 100%;
    padding: 0;
    object-fit: cover;
    object-position: center;
    filter: saturate(1.03) contrast(1.02);
    transform: scale(1.002);
}

:is(#bsv2-skin-carousel, #ranked-skin-carousel) .bsv2-skin-card.is-locked img.bsv2-skin-card-art {
    filter: grayscale(.85) brightness(.42);
}

:is(#bsv2-skin-carousel, #ranked-skin-carousel) .bsv2-skin-card-label {
    left: clamp(20px, 3vw, 42px);
    right: auto;
    bottom: clamp(27px, 4vw, 48px);
    padding: 0;
    color: #f1ede4;
    font-family: "AOW", "SpectralBold", serif;
    font-size: clamp(1.25rem, 2vw, 2rem);
    font-weight: 400;
    letter-spacing: .04em;
    text-align: left;
    z-index: 5;
}

:is(#bsv2-skin-carousel, #ranked-skin-carousel) .bsv2-skin-card-label::before {
    content: "KIVÁLASZTOTT MEGJELENÉS";
    display: block;
    margin-bottom: 7px;
    color: var(--ssx-gold);
    font: 700 .48rem/1 "Montserrat", sans-serif;
    letter-spacing: .17em;
}

:is(#bsv2-skin-carousel, #ranked-skin-carousel) .bsv2-skin-card-sub {
    left: clamp(20px, 3vw, 42px);
    right: auto;
    bottom: 17px;
    padding: 0;
    color: #9d927c;
    font-size: .58rem;
    letter-spacing: .13em;
    text-align: left;
    text-transform: uppercase;
    z-index: 5;
}

:is(#bsv2-skin-carousel, #ranked-skin-carousel) .bsv2-skin-card-lock {
    z-index: 6;
    background: radial-gradient(circle, rgba(2,5,9,.22), rgba(2,5,9,.68));
}

:is(#bsv2-skin-carousel, #ranked-skin-carousel) .bsv2-skin-card-lock img {
    width: 58px;
    height: 58px;
    padding: 10px;
    border: 1px solid rgba(229,195,111,.35);
    background: rgba(2,5,9,.72);
    box-sizing: border-box;
}

:is(#bsv2-skin-select, #ranked-skin-select) .bsv2-skin-nav {
    position: relative;
    z-index: 5;
    grid-row: 2;
    width: clamp(43px, 4vw, 58px);
    height: clamp(43px, 4vw, 58px);
    border: 1px solid rgba(224,191,109,.35);
    border-radius: 2px;
    background: linear-gradient(145deg, rgba(21,25,28,.88), rgba(3,7,12,.94));
    color: #e4d8bc;
    font-family: "Montserrat", sans-serif;
    font-size: 0;
    box-shadow: 0 12px 25px rgba(0,0,0,.36), inset 0 1px rgba(255,255,255,.04);
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}

:is(#bsv2-skin-select, #ranked-skin-select) .bsv2-skin-nav::before {
    display: block;
    font-size: 1.25rem;
    transition: transform 180ms ease;
}

:is(#bsv2-skin-select, #ranked-skin-select) .bsv2-skin-nav:first-of-type { grid-column: 1; }
:is(#bsv2-skin-select, #ranked-skin-select) .bsv2-skin-nav:first-of-type::before { content: "‹"; }
:is(#bsv2-skin-select, #ranked-skin-select) .bsv2-skin-nav:nth-of-type(2) { grid-column: 3; }
:is(#bsv2-skin-select, #ranked-skin-select) .bsv2-skin-nav:nth-of-type(2)::before { content: "›"; }
:is(#bsv2-skin-select, #ranked-skin-select) .bsv2-skin-nav:hover { border-color: rgba(237,207,135,.75); background: rgba(31,27,18,.92); box-shadow: 0 0 20px rgba(218,181,91,.17); }
:is(#bsv2-skin-select, #ranked-skin-select) .bsv2-skin-nav:hover::before { transform: scale(1.18); }

.ssx-footer {
    position: relative;
    z-index: 3;
    grid-column: 1 / -1;
    grid-row: 3;
    justify-self: stretch;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 12px clamp(6px, 1vw, 16px) 0;
    border-top: 1px solid rgba(214,183,109,.12);
}

.ssx-footer span,
.ssx-footer small { color: #77746c; font: 700 .52rem/1 "Montserrat", sans-serif; letter-spacing: .11em; text-transform: uppercase; }
.ssx-footer span { color: #aaa18e; }
.ssx-footer i { display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: #68dab2; box-shadow: 0 0 8px rgba(104,218,178,.56); }

#ranked-skin-select { padding-bottom: 80px; }
#ranked-skin-select .ssx-footer { margin-bottom: 42px; }
#ranked-skin-confirm {
    bottom: 17px;
    z-index: 6;
    min-width: 235px;
    padding: 12px 24px;
    border: 1px solid rgba(238,211,145,.65);
    border-radius: 1px;
    background: linear-gradient(180deg, #e6c979, #a77b25);
    clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px));
}

@keyframes ssxCardReveal {
    from { opacity: .35; transform: scale(1.018); }
    to { opacity: 1; transform: scale(1); }
}

@media (max-height: 820px) and (min-width: 821px) {
    :is(#bsv2-skin-select, #ranked-skin-select) { padding-block: 14px; gap: 10px; }
    .ssx-header { padding-bottom: 10px; }
    .ssx-header h2 { font-size: 1.32rem; }
    :is(#bsv2-skin-carousel, #ranked-skin-carousel) { height: min(100%, 390px); }
    .ssx-footer { padding-top: 8px; }
}

@media (max-width: 820px) {
    #bsv2-grid-wrap:has(> #bsv2-skin-select:not(.hidden)),
    #bsv2-grid-wrap:has(> #ranked-skin-select:not(.hidden)) {
        height: clamp(500px, 72dvh, 650px);
        min-height: 500px;
    }

    :is(#bsv2-skin-select, #ranked-skin-select) {
        min-height: 0;
        grid-template-columns: 48px minmax(0,1fr) 48px;
        padding: 18px 10px 16px;
    }
    :is(#bsv2-skin-carousel, #ranked-skin-carousel) { width: 100%; height: auto; max-height: none; aspect-ratio: 16 / 10; }
    .ssx-footer small { display: none; }
    #ranked-skin-select { padding-bottom: 78px; }
}

@media (max-width: 520px) {
    #bsv2-grid-wrap:has(> #bsv2-skin-select:not(.hidden)),
    #bsv2-grid-wrap:has(> #ranked-skin-select:not(.hidden)) {
        height: clamp(430px, 68dvh, 540px);
        min-height: 430px;
    }
    :is(#bsv2-skin-select, #ranked-skin-select) { min-height: 0; grid-template-columns: 38px minmax(0,1fr) 38px; gap: 6px; }
    .ssx-header { align-items: flex-start; }
    .ssx-header h2 { font-size: 1.12rem; }
    .ssx-counter .ssx-current { font-size: 1.05rem; }
    :is(#bsv2-skin-select, #ranked-skin-select) .bsv2-skin-nav { width: 36px; height: 46px; }
    :is(#bsv2-skin-carousel, #ranked-skin-carousel) .bsv2-skin-card-label { font-size: 1rem; bottom: 29px; }
    .ssx-footer { justify-content: center; }
    #ranked-skin-confirm { min-width: calc(100% - 90px); font-size: .68rem; }
}

@media (prefers-reduced-motion: reduce) {
    :is(#bsv2-skin-carousel, #ranked-skin-carousel) .bsv2-skin-card.is-active { animation: none; }
    :is(#bsv2-skin-select, #ranked-skin-select) .bsv2-skin-nav::before { transition: none; }
}