/* ---------------------------------------------------------------- 
 ROBOT//YARD CAROUSEL BY GABRIEL VEGA - SWEDEN | ITeGAMAX
    - ROBOTYARD.STORE | 2026
 ----------------------------------------------------------------- */
.carousel-panel {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-30);
    padding-top: var(--space-90);
    padding-bottom: var(--space-80);
}
.c3d-stage {
    width: 100%;
    height: var(--space-330);
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: var(--space-1000);
    cursor: grab;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
}

    .c3d-stage.dragging {
        cursor: grabbing;
    }

.c3d {
    position: relative;
    width: var(--space-230);
    height: var(--space-300);
    transform-style: preserve-3d;
}

.c3d-card {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transition: opacity 0.2s linear;
}

.c3d-cardM {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transition: opacity 0.2s linear;
}

.card-face {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--space-22);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.face-front {
    background: var(--ry-indu-warning-glass);
    border: var(--border-s1-w);
    backdrop-filter: blur(var(--size-6));
    -webkit-backdrop-filter: blur(var(--size-6));
    box-shadow: 0 0 var(--size-50) rgba(0, 240, 255, 0.06) inset;
}

.face-back {
    transform: rotateY(180deg);
    align-items: center;
    justify-content: center;
    gap: var(--space-16);
    background: rgba(6, 10, 16, 0.88);
    border: var(--size-1) dashed rgba(0, 240, 255, 0.35);
}

    .face-back .back-id {
        font-family: var(--ry-brand-font);
        font-size: var(--size-12);
        font-weight: var(--font-w-500);
        letter-spacing: 0.34em;
        color: var(--ry-indu-warning);
    }

    .face-back .back-bars {
        width: var(--space-90);
        height: var(--space-30);
        background: repeating-linear-gradient(to right, rgba(0, 240, 255, 0.55) 0 2px, transparent 2px 6px, rgba(0, 240, 255, 0.3) 6px 7px, transparent 7px 12px);
    }

    .face-back .back-label {
        font-family: var(--ry-brand-font);
        font-size: var(--size-10);
        letter-spacing: 0.3em;
        color: var(--ry-faint);
    }

.c3d-card .c-id {
    font-family: var(--ry-brand-font);
    font-size: var(--size-10);
    letter-spacing: 0.3em;
    color: var(--ry-indu-laser);
}

.c3d-card .c-name {
    font-family: var(--ry-brand-font);
    font-weight: var(--font-w-700);
    font-size: 1.5rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: var(--space-12) 0;
}

.c3d-card .c-fig {
    font-family: var(--ry-brand-font);
    font-weight: var(--font-w-500);
    font-size: 2rem;
    color: var(--ry-indu-warning);
}

    .c3d-card .c-fig small {
        font-size: 0.5em;
        color: var(--ry-dim);
        margin-left: var(--space-4);
    }

.c3d-card .c-desc {
    font-size: var(--size-11);
    line-height: 1.7;
    color: var(--ry-dim);
}
.c3d-cardM .c-id {
    font-family: var(--ry-brand-font);
    font-size: var(--size-10);
    letter-spacing: 0.3em;
    color: var(--ry-indu-laser);
}
.c3d-cardM .c-name {
    font-family: var(--ry-brand-font);
    font-weight: var(--font-w-700);
    font-size: 1.5rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: var(--space-12) 0;
}
.c3d-cardM .c-fig {
    font-family: var(--ry-brand-font);
    font-weight: var(--font-w-500);
    font-size: 2rem;
    color: var(--ry-indu-warning);
}

    .c3d-cardM .c-fig small {
        font-size: 0.5em;
        color: var(--ry-dim);
        margin-left: var(--space-4);
    }

.c3d-cardM .c-desc {
    font-size: var(--size-11);
    line-height: 1.7;
    color: var(--ry-dim);
}
.c3d-deck {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-16);
}
.c3d-status {
    font-family: var(--ry-brand-font);
    font-size: var(--size-12);
    font-weight: var(--font-w-500);
    letter-spacing: 0.28em;
    color: var(--ry-carbon-silver);
    margin: var(--space-15) 0;
}

    .c3d-status b {
        color: var(--ry-indu-warning);
        font-weight: var(--font-w-500);
    }

.c3d-controls {
    display: flex;
    align-items: center;
    gap: var(--space-8);
}
.c3d-ctl,
.mod-btn {
    height: var(--space-42);
    display: flex;
    align-items: center;
    justify-content: center;
    border: var(--border-s1-ry);
    background: rgba(6, 10, 16, 0.7);
    transition: border-color 0.25s, color 0.25s, background 0.25s;
}
.c3d-ctl {
    width: var(--space-42);
}

    .c3d-ctl:hover {
        border-color: var(--ry-indu-laser);
    }
.chev-l,
.chev-r {
    width: var(--space-9);
    height: var(--space-9);
    border-left: var(--border-s1-w);
    border-bottom: var(--border-s1-w);
    transition: border-color 0.25s;
}
.chev-l {
    transform: rotate(45deg) translate(1px, -1px);
}
.chev-r {
    transform: rotate(-135deg) translate(1px, -1px);
}
.c3d-ctl:hover .chev-l,
.c3d-ctl:hover .chev-r {
    border-color: var(--ry-indu-laser);
}
.mod-btn {
    min-width: var(--space-42);
    padding: 0 var(--space-10);
    font-family: var(--ry-brand-font);
    font-size: var(--size-11);
    font-weight: var(--font-w-500);
    letter-spacing: 0.2em;
    color: var(--ry-dim);
}
    .mod-btn:hover {
        color: var(--ry-carbon-silver);
        border-color: rgba(226, 232, 240, 0.3);
    }

    .mod-btn.active {
        color: var(--ry-indu-laser);
        border-color: var(--ry-indu-laser);
    }
.ico-play {
    width: 0;
    height: 0;
    border-left: var(--border-s8-w);
    border-top: var(--border-s6-tr);
    border-bottom: var(--border-s6-tr);
}
.c3d-ctl.playing .ico-play {
    width: var(--space-8);
    height: var(--space-12);
    border-top: 0;
    border-bottom: 0;
    border-left: var(--border-s4-w);
    border-right: var(--border-s4-w);
}
.c3d-hint {
    font-family: var(--ry-brand-font);
    font-size: var(--size-10);
    letter-spacing: 0.3em;
    color: var(--ry-faint);
}
    .c3d-hint b {
        color: var(--ry-indu-warning);
        font-weight: var(--font-w-500);
    }