/* gacha.css - Gacha Main UI Styles */

.gacha-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 1.5rem;
    gap: 1.5rem;
    text-align: center;
    height: 93.5%;
    min-height: 500px;
    position: relative;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    margin: 0 1rem;
    padding-bottom: 2rem;
}

/* 가챠 결과창에서는 컨테이너를 완전히 보이지 않게 처리 */
body.gacha-result-active .gacha-container {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    border: none !important;
}


/* 상단 UI 요소들을 위한 내부 래퍼 */
.gacha-top-ui-wrapper {
    position: absolute;
    top: 10px;
    left: 0;
    width: 100%;
    z-index: 200;
    pointer-events: none;
    display: flex;
    justify-content: space-between;
    padding: 0 15px;
    align-items: flex-start;
    /* 좌측 버튼들을 상단에 고정 */
}

.gacha-header-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    pointer-events: auto;
}

.gacha-right-ui-group {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    /* 우측 정렬 */
    gap: 8px;
    /* 쥬얼칸과 음소거 버튼 사이 간격 */
    pointer-events: auto;
}

.jewel-container {
    position: static;
    display: flex;
    align-items: center;
}

.mute-toggle-btn {
    position: static !important;
    /* absolute 해제 */
    margin: 0;
}

/* 내부 버튼들이 absolute 속성 때문에 겹치는 것을 방지 */
.gacha-header-controls .log-btn {
    position: static !important;
    margin: 0;
}



.gacha-pickup-selector {
    position: absolute;
    top: 34%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    gap: 60px;
    z-index: 5;
    pointer-events: auto;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    align-items: flex-start;
}

.pickup-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;

}


.selector-bg-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
    border-radius: inherit;
}

.selector-bg-item {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center bottom;
    filter: brightness(1.2);
    opacity: 0.4;
    transition: all 0.4s ease;
    margin: 0;
}

/* 셀렉션/가로형 아이템 스타일 */
.pickup-item.selection-item {
    width: 500px;
    height: auto;
    border-radius: 0 50px 0 50px;
}

.pickup-item.selection-item .pickup-img-wrapper {
    aspect-ratio: 3 / 2;
    /* 16/9 -> 3/2 로 세로 길이 확대 */
    border-radius: 0 50px 0 50px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

@media (max-width: 768px) {
    .pickup-item.selection-item {
        width: 300px;
    }

    .pickup-item.selection-item .pickup-img-wrapper {
        border-radius: 0 30px 0 30px;
    }
}

.selection-wrapper {
    justify-content: center;
    width: 100%;
}

.selector-bg-item:first-child,
.selector-bg-item:last-child {
    margin: 0;
}



/* Pickup Group (Unit) */
.pickup-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 0;
    background: none;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    z-index: 10;
}

.pickup-group:hover .pickup-images-inner {
    transform: translateY(-8px);
}

.pickup-group.selected {
    box-shadow: 0 0 15px rgba(255, 64, 129, 0.8);
}

.pickup-images-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.pickup-name {
    position: absolute;
    top: -28px;
    left: 5px;
    color: #fff;
    font-size: 0.9rem;
    font-weight: bold;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.8), 0 0 10px rgba(0, 0, 0, 0.5);
    white-space: nowrap;
    padding: 0;
    z-index: 20;
    pointer-events: none;
    text-align: left;
}

@media (max-width: 768px) {
    .pickup-name {
        top: -22px;
        left: 3px;
        font-size: 0.75rem;
    }
}

.pickup-date {
    position: absolute;
    bottom: -28px;
    right: 5px;
    color: #fff;
    font-size: 0.9rem;
    font-weight: bold;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.8), 0 0 10px rgba(0, 0, 0, 0.5);
    white-space: nowrap;
    z-index: 20;
    pointer-events: none;
    text-align: right;
}

.pickup-date.is-unit {
    right: auto;
    left: 5px;
    text-align: left;
}

@media (max-width: 768px) {
    .pickup-date {
        bottom: -22px;
        right: 3px;
        font-size: 0.75rem;
    }

    .pickup-date.is-unit {
        right: auto;
        left: 3px;
    }
}

.pickup-item-inner {
    width: 160px;
    background: none;
    border: none;
    padding: 0;
    pointer-events: none;
    margin: 0;
}

.pickup-item-inner:first-child .pickup-img-wrapper {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

.pickup-item-inner:last-child .pickup-img-wrapper {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

.pickup-item-inner .pickup-img-wrapper {
    margin-bottom: 0;
    border-radius: 0;
    mask-image: none !important;
    -webkit-mask-image: none !important;
}

.pickup-item {
    position: relative;
    cursor: pointer;
    border-radius: 0 50px 0 50px;
    padding: 0;
    background: none;
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 10;
}

/* 중복 삭제 */


.pickup-item.selected {
    box-shadow: 0 0 15px rgba(255, 64, 129, 0.8);
}

.pickup-img-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 0 50px 0 50px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
}

/* 이미지 중복 스타일 삭제 */


/* 중복된 pickup-name 스타일 삭제됨 */


/* 중복 모바일 설정 삭제됨 */


.pickup-item {
    position: relative;
    width: 260px;
    aspect-ratio: 1 / 1.3;
    /* 1.1 -> 1.3 으로 세로 길이 확대 */
}

.pickup-item.selection-item {
    width: 500px;
    aspect-ratio: 3 / 2;
}

.idol-main-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    overflow: hidden;
    z-index: 10;
    opacity: 1;
}

/* 픽업 서포트 카드 컬럼 - 기본 위치 (우측 하단 바깥 세로 나열) */
.pickup-support-column {
    position: absolute;
    bottom: 0;
    /* 배너 하단 라인에 맞춤 */
    left: 110%;
    /* 배너 이미지 오른쪽으로 뺌 */
    top: auto;
    transform: none;
    width: auto;
    display: flex;
    flex-direction: column;
    /* 기본은 세로 나열 */
    align-items: center;
    gap: 15px;
    z-index: 20;
    pointer-events: none;
}

/* 유닛 가챠 전용 위치 (우하단 바깥 가로 나열 유지) */
.pickup-item.selection-item .pickup-support-column {
    left: auto;
    right: 0;
    top: auto;
    bottom: -85px;
    /* -75px에서 -85px로 조정 */
    transform: none;
    flex-direction: row;
    /* 유닛은 가로 나열 */
    gap: 15px;
}

@media (max-width: 768px) {

    /* 모바일 기본 배너: 우측 바깥 */
    .pickup-support-column {
        left: 105%;
        top: 50%;
        transform: translateY(-50%);
        gap: 10px;
    }

    /* 모바일 유닛 배너: 우하단 바깥 가로 나열 유지 */
    .pickup-item.selection-item .pickup-support-column {
        left: auto !important;
        right: 0 !important;
        bottom: -55px !important;
        top: auto !important;
        transform: none !important;
        flex-direction: row !important;
        gap: 8px !important;
    }
}

/* 유닛 가챠 서포트 카드 스타일 - 삭제됨 */


.support-pickup-mini:hover {
    transform: scale(1.05);
}

.pickup-item.selection-item .support-pickup-mini:hover {
    transform: rotate(0deg) scale(1.05);
}

.support-pickup-mini {
    width: 70px;
    /* PC 크기 70px로 축소 */
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    border: 2px solid #fff;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.9);
    pointer-events: auto;
    transform: none;
    transition: transform 0.2s ease;
}

.support-pickup-mini[data-rarity="SSR"] {
    border-color: #d4a5ff !important;
    box-shadow: 0 0 15px rgba(212, 165, 255, 0.4);
}

.support-pickup-mini[data-rarity="SR"] {
    border-color: #ffe082 !important;
    box-shadow: 0 0 12px rgba(255, 224, 130, 0.3);
}

@media (max-width: 768px) {
    .pickup-item {
        width: 150px;
        aspect-ratio: 1 / 1.35 !important;
        /* 모바일은 더 길쭉하게 변경 */
    }

    .pickup-item.selection-item {
        width: 280px;
        aspect-ratio: 4 / 3 !important;
    }


    .pickup-support-column {
        left: 120%;
        gap: 30px;
    }

    /* 모바일 유닛 가챠 서포트 카드 위치 - 삭제됨 (최하단 통합) */


    .support-pickup-mini {
        width: 80px !important;
        border-radius: 6px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
    }

    /* 유닛 전용 모바일 크기 설정 삭제 (공통 45px 적용) */
    /* .pickup-item.selection-item .support-pickup-mini { width: 80px !important; } 삭제됨 */
}


#idol:has(.gacha-container) {
    overflow: hidden !important;
}




.mute-toggle-btn {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid #ddd;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    padding: 0;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: all 0.2s;
}

.mute-toggle-icon {
    width: 18px;
    height: 18px;
    display: block;
    color: #333;
}

.mute-toggle-btn:hover {
    background: #fff;
    transform: scale(1.1);
}

.back-btn {
    background: #333;
    color: #fff;
    border: none;
    border-radius: 20px;
    padding: 8px 20px;
    font-size: 0.9rem;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: all 0.2s;
}


.back-btn.hidden {
    display: none;
}


.gacha-controls-top {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
    margin-bottom: 40px;
    order: 0;
    perspective: none;
    transform-style: flat;
}

.gacha-buttons {
    display: flex;
    column-gap: 1.5rem;
    row-gap: 4px;
    justify-content: center;
    flex-wrap: wrap;
    position: absolute;
    bottom: 0px;
    left: 0;
    right: 0;
    padding: 1rem 0;
    z-index: 10;
    opacity: 1;
    transition: opacity 0.15s ease-in-out;
}

.gacha-buttons.loading-shift {
    opacity: 0 !important;
}


.gacha-buttons.view-main .gacha-controls-top {
    order: 0;
}

.gacha-buttons.view-main .gacha-btn {
    order: 1;
}

.gacha-buttons.view-main .total-pulls-box {
    order: 2;
    margin-top: 10px;
}

.gacha-buttons.view-result .gacha-controls-top {
    order: 0;
}

.gacha-buttons.view-result .total-pulls-box {
    order: 1;
    margin-bottom: 10px;
}

.gacha-buttons.view-result .gacha-btn {
    order: 2;
}

.gacha-btn {
    width: 180px;
    height: 70px;
    background: url('../icons/gasya.png') no-repeat center;
    background-size: contain;
    border: none;
    cursor: pointer;
    transition: transform 0.1s ease;
    color: #fff;
    font-weight: bold;
    font-size: 1.1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 8px;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));
    line-height: 1.75;
    text-align: center;
}

.btn-cost {
    padding-left: 60px;
    font-size: 0.95rem;
}

.gacha-btn.close-style {
    background: #ffffff !important;
    color: #444;
    text-shadow: none;
    border: 1px solid #dcdcdc;
    border-radius: 35px;
    font-weight: bold;
    font-size: 1rem;
    letter-spacing: 0.5px;
    display: flex;
    flex-direction: row !important;
    align-items: center;
    justify-content: center;
    padding-top: 18px;
    filter: none;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
    transition: all 0.2s ease;
    gap: 8px;
    white-space: nowrap;
}

.close-x {
    font-size: 1.2rem;
    font-weight: normal;
    color: #888;
}

.gacha-btn:active:not(:disabled) {
    transform: scale(0.96);
}


.gacha-sub-buttons {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    gap: 8px;
    z-index: 200;
}

.gacha-sub-buttons .log-btn {
    position: static !important;
    margin: 0;
}

@media (max-width: 768px) {
    .gacha-sub-buttons {
        top: 5px;
        left: 5px;
        gap: 5px;
    }
}

.total-pulls-box {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-bottom: 2px;
    color: #fff;
    font-size: 0.9rem;
    font-weight: bold;
}

#total-pull-count {
    background: rgba(0, 0, 0, 0.6);
    padding: 2px 15px;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    min-width: 160px;
    text-align: center;
    font-size: 0.85rem;
    white-space: pre;
}


.view-main #total-pull-count {
    min-width: 120px;
}

#btn-gacha-reset {
    position: static;
    padding: 2px 10px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    border-radius: 15px;
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: none;
}

#btn-gacha-reset:hover {
    background: rgba(0, 0, 0, 0.8);
    transform: scale(1.05);
}




.jewel-container.hidden {
    display: none !important;
}

.jewel-box {
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 4px 10px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    width: 145px;
    white-space: nowrap;
    font-size: 0.9rem;
    font-weight: bold;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.jewel-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
}

#jewel-count {
    flex-grow: 1;
    text-align: right;
    margin: 0;
}

.add-jewel-btn {
    background: none !important;
    color: #fff;
    border: none !important;
    box-shadow: none !important;
    width: auto;
    height: auto;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    padding: 0 0 0 4px;
    transition: transform 0.1s, opacity 0.1s;
}

.add-jewel-btn:hover {
    opacity: 0.8;
}

.add-jewel-btn:active {
    transform: scale(0.9);
}


/* 상단 중복 스타일 제거됨 - 하단 통합 관리 구역 사용 */


.type-nav-btn.circle-btn {
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: #fff;
    font-size: 0.9rem;
    cursor: pointer;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transform: translateY(20px);
    will-change: transform, width, opacity;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.type-nav-btn.circle-btn:hover,
.type-nav-btn.circle-btn:active {
    transform: translateY(20px);
}

.capsule-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.gacha-type-indicator {
    display: flex;
    gap: 8px;
}

.gacha-type-indicator .dot {
    width: 6px;
    height: 6px;
    background: rgba(150, 150, 150, 0.6);
    border-radius: 0;
    transform: rotate(45deg);
    transition: all 0.2s;
}

.gacha-type-indicator .dot.active {
    background: #FF9800;
    box-shadow: 0 0 6px rgba(255, 152, 0, 0.8);
    transform: rotate(45deg);
}

.current-type-display.capsule-box span,
.type-nav-btn.circle-btn span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.current-type-display.capsule-box {
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50px;
    min-width: 240px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    font-size: 1.6rem;
    font-weight: bold;
    user-select: none;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    position: relative;
    --base-trans: translateY(0);
}

.slide-out-left span {
    animation: textOutLeft 0.1s ease-in forwards;
}

.slide-in-right span {
    animation: textInRight 0.1s ease-out forwards;
}

.slide-out-right span {
    animation: textOutRight 0.1s ease-in forwards;
}

.slide-in-left span {
    animation: textInLeft 0.1s ease-out forwards;
}

/* 텍스트 슬라이드 애니메이션 복구 */
@keyframes textOutLeft {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(-40px);
    }
}

@keyframes textInRight {
    from {
        opacity: 0;
        transform: translateX(40px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes textOutRight {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(40px);
    }
}

@keyframes textInLeft {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}


/* Spinner Overlay */
.spinner {
    display: none;
}

.spinner.active {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: #ffffff !important;
    z-index: 9990 !important;
    margin: 0 !important;
    padding: 0 !important;
    touch-action: none;
    user-select: none;
    pointer-events: all;
    display: block !important;
}

.spinner.active::after {
    display: none;
}

#gacha-progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--primary-color);
    font-weight: bold;
    font-size: 1.2rem;
    z-index: 10001;
}

@keyframes spin {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* Gacha Download Confirmation Modal */
.gacha-confirm-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 500;
}

.gacha-confirm-content {
    background: white;
    width: 90%;
    max-width: 400px;
    border-radius: 20px;
    padding: 2rem;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    border: 2px solid #ff4d8d;
    animation: gachaConfirmPop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes gachaConfirmPop {
    from {
        transform: scale(0.8);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.gacha-confirm-header {
    font-size: 1.3rem;
    font-weight: bold;
    color: #ff4d8d;
    margin-bottom: 1rem;
}

.gacha-confirm-body p {
    font-size: 1rem;
    color: #333;
    margin: 0.5rem 0;
}

.gacha-confirm-sub {
    font-size: 0.8rem !important;
    color: #888 !important;
}

.gacha-confirm-footer {
    display: flex;
    gap: 15px;
    margin-top: 2rem;
    justify-content: center;
}

.gacha-confirm-btn {
    padding: 10px 25px;
    border-radius: 25px;
    border: none;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.9rem;
}

.gacha-confirm-btn.cancel {
    background: #f0f0f0;
    color: #666;
}

.gacha-confirm-btn.start {
    background: #ff4d8d;
    color: white;
    box-shadow: 0 4px 10px rgba(255, 77, 141, 0.3);
}

.gacha-confirm-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
}

.gacha-confirm-btn:active {
    transform: translateY(0);
}

@media (max-width: 768px) {
    .gacha-confirm-content {
        padding: 1.5rem 1rem;
    }

    .gacha-confirm-header {
        font-size: 1rem;
        margin-bottom: 0.8rem;
    }

    .gacha-confirm-body p {
        font-size: 0.8rem;
        margin: 0.3rem 0;
    }

    .gacha-confirm-sub {
        font-size: 0.65rem !important;
    }

    .gacha-confirm-btn {
        padding: 6px 16px;
        font-size: 0.75rem;
    }
}

/* 가챠 애니메이션 연출 요소 */
#gacha-video-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #000;
    z-index: 1000;
    display: flex;
    /* justify-content: center; /* 제거하여 스킵 버튼 위치 제약 해제 */
    /* align-items: center; /* 제거하여 스킵 버튼 위치 제약 해제 */
    overflow: hidden;
}

.gacha-vid {
    width: 100%;
    height: 100%;
    object-fit: contain;
    margin: auto;
    /* 비디오 요소를 중앙 정렬 */
}

#gacha-card-overlay {
    position: absolute;
    left: 50%;
    z-index: 1010;
    width: 45vh;
    max-width: 100%;
    height: auto;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.1);
}

#gacha-card-overlay.produce-card {
    top: 43.5%;
}

#gacha-card-overlay.produce-card.visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.60);
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
}

#gacha-card-overlay.landscape-card {
    top: 45%;
}

#gacha-card-overlay.landscape-card.visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.9);
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
}

#gacha-card-overlay.landscape-card.ssr-tilt {
    top: 46%;
    transform: translate(-50%, -50%) scale(0.1) rotate(-5deg);
}

#gacha-card-overlay.landscape-card.ssr-tilt.visible {
    transform: translate(-50%, -50%) scale(1.01) rotate(-5deg);
}

#gacha-name-overlay {
    position: absolute;
    left: 50%;
    z-index: 1011;
    color: white;
    font-size: 1.5rem;
    font-weight: bold;
    padding: 8px 25px;
    border-radius: 4px;
    pointer-events: none;
    opacity: 0;
    white-space: nowrap;
    transform: translate(-50%, -50%) translateY(20px);
}

#gacha-name-overlay.produce-name {
    top: 78%;
}

#gacha-name-overlay.landscape-name {
    top: 66%;
}

#gacha-name-overlay.visible {
    opacity: 1;
    transform: translate(-50%, -50%) translateY(0);
    transition: transform 0.4s ease, opacity 0.4s ease;
}

#gacha-new-badge {
    position: absolute;
    top: 15%;
    left: 50%;
    z-index: 1012;
    background: none;
    color: white;
    font-size: 1.5rem;
    font-weight: 900;
    text-shadow: 0 0 2px #ffcc00, 0 0 4px rgba(255, 153, 0, 0.6);
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
}

#gacha-new-badge.visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.2s ease;
}

.skip-btn {
    position: absolute;
    bottom: 12%;
    right: 5%;
    /* 우측 5% 위치 */
    left: auto;
    /* 좌측 고정 해제 */
    width: max-content;
    z-index: 1020;
    background: rgba(0, 0, 0, 0.4);
    color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 8px 18px;
    border-radius: 25px;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: bold;
}

/* Immersive Mode */
body.immersive-mode .button-group.horizontal,
body.immersive-mode #gacha-fixed-buttons,
body.immersive-mode #fixed-bg,
body.immersive-mode header,
body.immersive-mode footer {
    display: none !important;
}

body.immersive-mode {
    background-color: #000 !important;
    overflow: hidden;
}

/* Mobile Media Queries */
@media (max-width: 768px) {
    .gacha-container {
        padding-top: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        height: 91% !important;
        min-height: 45vh !important;
        width: 100% !important;
        margin: 0 !important;
        left: 0 !important;
        /* 내부 배경 잘림 방지 (삭제됨: fixed 요소 잘림 방지) */
    }

    .gacha-pickup-selector {
        top: 37% !important;
    }

    .selector-bg-item {
        background-position: center bottom !important;
        /* 모바일에서 아래 정렬 */
        width: 100% !important;
    }

    .gacha-buttons {
        gap: 10px;
        bottom: 5px;
    }

    .gacha-btn {
        width: 130px !important;
        min-width: 0 !important;
        height: 55px;
        padding-top: 5px;
        font-size: 0.75rem;
        line-height: 2;
        background-size: 130px 55px !important;
        overflow: visible;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
        white-space: nowrap;
    }

    .btn-cost {
        padding-left: 15px;
        font-size: 0.75rem;
    }

    .gacha-btn.close-style {
        width: 90px !important;
        height: 45px;
        border-radius: 25px;
        padding-top: 13px !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        margin-top: 5px;
        background: #ffffff !important;
        font-size: 0.75rem;
    }

    .gacha-btn.close-style>* {
        transform: none !important;
    }

    .close-x {
        transform: translateY(-1px) !important;
        margin-right: 4px;
    }

    .mute-toggle-btn {
        width: 30px;
        height: 30px;
        font-size: 0.9rem;
    }

    .jewel-container {
        top: 5px;
        right: 5px;
    }

    .jewel-box {
        width: 100px;
        padding: 3px 8px;
        font-size: 0.75rem;
        gap: 2px;
    }

    .add-jewel-btn {
        width: 16px;
        height: 16px;
        font-size: 0.8rem;
    }

    #total-pull-count {
        min-width: 130px;
        font-size: 0.75rem;
    }

    #btn-gacha-reset {
        padding: 1px 6px;
        font-size: 0.6rem;
    }

    .gacha-controls-top {
        gap: 10px;
        margin-bottom: 25px;
    }

    .type-nav-btn.circle-btn {
        width: 45px;
        height: 45px;
        font-size: 0.4rem;
        /* Further reduced from 0.7rem */
        transform: translateY(20px);
    }

    .type-nav-btn.circle-btn:hover,
    .type-nav-btn.circle-btn:active {
        transform: translateY(20px);
    }

    .current-type-display.capsule-box {
        min-width: 130px;
        height: 60px;
        line-height: 60px;
        font-size: 0.95rem;
        /* Reduced further from 1rem */
    }



    /* 모바일 서포트 카드 위치 및 크기 설정 */
    .pickup-support-column {
        left: 102% !important;
        /* 기본 배너: 우측 바깥 */
        right: auto !important;
        bottom: 0 !important;
        /* 하단 라인에 맞춤 */
        top: auto !important;
        transform: none !important;
        flex-direction: column !important;
        /* 기본 배너: 세로 나열 */
        gap: 6px !important;
    }

    /* 모바일 유닛 배너: 우하단 바깥 가로 나열 유지 */
    .pickup-item.selection-item .pickup-support-column {
        left: auto !important;
        right: 0 !important;
        bottom: -55px !important;
        top: auto !important;
        transform: none !important;
        flex-direction: row !important;
        gap: 8px !important;
    }

    .support-pickup-mini {
        width: 45px !important;
        /* 모바일 크기 45px로 더 축소 */
        border-radius: 50% !important;
        transform: none !important;
    }

    /* 위치 보정 */
    .pickup-support-column {
        left: 102% !important;
        gap: 6px !important;
    }

    .pickup-item.selection-item .pickup-support-column {
        bottom: -55px !important;
        gap: 6px !important;
    }
}

/* 호버 애니메이션: 이미지만 독립 이동 */
.pickup-item:hover .pickup-img-wrapper,
.pickup-group:hover .pickup-images-inner {
    transform: translateY(-10px) !important;
}

/* 서포트 카드 영역 호버 시 이미지 이동 무효화 */
.pickup-item:has(.pickup-support-column:hover) .pickup-img-wrapper {
    transform: none !important;
}

.pickup-img-wrapper,
.pickup-images-inner {
    transition: transform 0.3s ease !important;
}