/* 璋冭壊鏉跨粍浠舵牱寮?- 妯悜闀挎柟褰㈠竷灞€ */

.palette-container {
    max-width: 1000px;
    margin: 0;
    padding: 20px;
    padding-left: 40px;
}

.palette-card {
    background: transparent;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    position: relative;
}

.color-strips {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
    justify-content: flex-start;
}

/* 鏁戣祹涔嬭矾鐗规畩鏍峰紡 - 3D Hover Card */
.container {
    position: relative;
    width: 320px;
    height: 180px;
    transition: 200ms;
}

.container:active {
    width: 310px;
    height: 174px;
}

#card {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    transition: all 0.3s ease;
    background-image: url('/images/jiushu.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: transparent;
    border: 3px solid rgba(212, 175, 55, 0.8);
    box-shadow: 
        0 0 15px rgba(212, 175, 55, 0.6),
        0 0 30px rgba(212, 175, 55, 0.4),
        0 0 45px rgba(212, 175, 55, 0.2);
    image-rendering: high-quality;
    image-rendering: -webkit-optimize-contrast;
}

/* 鎷ョ儸杩芥様鎸夐挳鐗瑰畾鑳屾櫙 */
#ember-retrospect-btn #card {
    background-image: url('/images/zhuxian.png');
}

/* 浜垫笌妗ｆ鎸夐挳鐗瑰畾鑳屾櫙 */
#soul-reconstruction-btn #card {
    background-image: url('/images/linghun.png');
}

#card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: transparent;
    border-radius: 17px;
    z-index: 1;
    transition: all 0.3s ease;
    pointer-events: none;
}

.container:hover #card {
    border-color: rgba(212, 175, 55, 1);
    box-shadow: 
        0 0 20px rgba(212, 175, 55, 0.8),
        0 0 40px rgba(212, 175, 55, 0.6),
        0 0 60px rgba(212, 175, 55, 0.4),
        inset 0 0 20px rgba(212, 175, 55, 0.2);
}

.container:hover #card::before {
    background: transparent;
}

.canvas {
    perspective: 800px;
    inset: 0;
    z-index: 2;
    position: absolute;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
    gap: 0px 0px;
    grid-template-areas: 
        "tr-1 tr-2 tr-3 tr-4 tr-5"
        "tr-6 tr-7 tr-8 tr-9 tr-10"
        "tr-11 tr-12 tr-13 tr-14 tr-15"
        "tr-16 tr-17 tr-18 tr-19 tr-20"
        "tr-21 tr-22 tr-23 tr-24 tr-25";
}

.tracker {
    position: absolute;
    z-index: 3;
    width: 100%;
    height: 100%;
}

.tracker:hover {
    cursor: pointer;
}

.tracker:hover ~ #card {
    transition: 300ms;
}

.tr-1 { grid-area: tr-1; }
.tr-2 { grid-area: tr-2; }
.tr-3 { grid-area: tr-3; }
.tr-4 { grid-area: tr-4; }
.tr-5 { grid-area: tr-5; }
.tr-6 { grid-area: tr-6; }
.tr-7 { grid-area: tr-7; }
.tr-8 { grid-area: tr-8; }
.tr-9 { grid-area: tr-9; }
.tr-10 { grid-area: tr-10; }
.tr-11 { grid-area: tr-11; }
.tr-12 { grid-area: tr-12; }
.tr-13 { grid-area: tr-13; }
.tr-14 { grid-area: tr-14; }
.tr-15 { grid-area: tr-15; }
.tr-16 { grid-area: tr-16; }
.tr-17 { grid-area: tr-17; }
.tr-18 { grid-area: tr-18; }
.tr-19 { grid-area: tr-19; }
.tr-20 { grid-area: tr-20; }
.tr-21 { grid-area: tr-21; }
.tr-22 { grid-area: tr-22; }
.tr-23 { grid-area: tr-23; }
.tr-24 { grid-area: tr-24; }
.tr-25 { grid-area: tr-25; }

.tr-1:hover ~ #card {
    transition: 125ms ease-in-out;
    transform: rotateX(20deg) rotateY(-10deg) rotateZ(0deg);
}

.tr-2:hover ~ #card {
    transition: 125ms ease-in-out;
    transform: rotateX(20deg) rotateY(-5deg) rotateZ(0deg);
}

.tr-3:hover ~ #card {
    transition: 125ms ease-in-out;
    transform: rotateX(20deg) rotateY(0deg) rotateZ(0deg);
}

.tr-4:hover ~ #card {
    transition: 125ms ease-in-out;
    transform: rotateX(20deg) rotateY(5deg) rotateZ(0deg);
}

.tr-5:hover ~ #card {
    transition: 125ms ease-in-out;
    transform: rotateX(20deg) rotateY(10deg) rotateZ(0deg);
}

.tr-6:hover ~ #card {
    transition: 125ms ease-in-out;
    transform: rotateX(10deg) rotateY(-10deg) rotateZ(0deg);
}

.tr-7:hover ~ #card {
    transition: 125ms ease-in-out;
    transform: rotateX(10deg) rotateY(-5deg) rotateZ(0deg);
}

.tr-8:hover ~ #card {
    transition: 125ms ease-in-out;
    transform: rotateX(10deg) rotateY(0deg) rotateZ(0deg);
}

.tr-9:hover ~ #card {
    transition: 125ms ease-in-out;
    transform: rotateX(10deg) rotateY(5deg) rotateZ(0deg);
}

.tr-10:hover ~ #card {
    transition: 125ms ease-in-out;
    transform: rotateX(10deg) rotateY(10deg) rotateZ(0deg);
}

.tr-11:hover ~ #card {
    transition: 125ms ease-in-out;
    transform: rotateX(0deg) rotateY(-10deg) rotateZ(0deg);
}

.tr-12:hover ~ #card {
    transition: 125ms ease-in-out;
    transform: rotateX(0deg) rotateY(-5deg) rotateZ(0deg);
}

.tr-13:hover ~ #card {
    transition: 125ms ease-in-out;
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}

.tr-14:hover ~ #card {
    transition: 125ms ease-in-out;
    transform: rotateX(0deg) rotateY(5deg) rotateZ(0deg);
}

.tr-15:hover ~ #card {
    transition: 125ms ease-in-out;
    transform: rotateX(0deg) rotateY(10deg) rotateZ(0deg);
}

.tr-16:hover ~ #card {
    transition: 125ms ease-in-out;
    transform: rotateX(-10deg) rotateY(-10deg) rotateZ(0deg);
}

.tr-17:hover ~ #card {
    transition: 125ms ease-in-out;
    transform: rotateX(-10deg) rotateY(-5deg) rotateZ(0deg);
}

.tr-18:hover ~ #card {
    transition: 125ms ease-in-out;
    transform: rotateX(-10deg) rotateY(0deg) rotateZ(0deg);
}

.tr-19:hover ~ #card {
    transition: 125ms ease-in-out;
    transform: rotateX(-10deg) rotateY(5deg) rotateZ(0deg);
}

.tr-20:hover ~ #card {
    transition: 125ms ease-in-out;
    transform: rotateX(-10deg) rotateY(10deg) rotateZ(0deg);
}

.tr-21:hover ~ #card {
    transition: 125ms ease-in-out;
    transform: rotateX(-20deg) rotateY(-10deg) rotateZ(0deg);
}

.tr-22:hover ~ #card {
    transition: 125ms ease-in-out;
    transform: rotateX(-20deg) rotateY(-5deg) rotateZ(0deg);
}

.tr-23:hover ~ #card {
    transition: 125ms ease-in-out;
    transform: rotateX(-20deg) rotateY(0deg) rotateZ(0deg);
}

.tr-24:hover ~ #card {
    transition: 125ms ease-in-out;
    transform: rotateX(-20deg) rotateY(5deg) rotateZ(0deg);
}

.tr-25:hover ~ #card {
    transition: 125ms ease-in-out;
    transform: rotateX(-20deg) rotateY(10deg) rotateZ(0deg);
}

.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#card .redemption-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 20px;
    position: relative;
    z-index: 3;
}

.redemption-text {
    font-size: 24px;
    font-weight: bold;
    color: white;
    text-shadow: 
        -2px -2px 0 #000,
        2px -2px 0 #000,
        -2px 2px 0 #000,
        2px 2px 0 #000,
        0 3px 6px rgba(0, 0, 0, 0.8);
    letter-spacing: 2px;
}

.redemption-arrow {
    font-size: 16px;
    font-weight: normal;
    color: white;
    text-shadow: 
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000,
        0 2px 4px rgba(0, 0, 0, 0.8);
    letter-spacing: 1px;
    animation: textGlow 2s ease-in-out infinite;
    text-align: center;
}

@keyframes textGlow {
    0%, 100% {
        opacity: 0.8;
        text-shadow: 
            -1px -1px 0 #000,
            1px -1px 0 #000,
            -1px 1px 0 #000,
            1px 1px 0 #000,
            0 2px 4px rgba(0, 0, 0, 0.8);
    }
    50% {
        opacity: 1;
        text-shadow: 
            -1px -1px 0 #000,
            1px -1px 0 #000,
            -1px 1px 0 #000,
            1px 1px 0 #000,
            0 2px 8px rgba(212, 175, 55, 0.8);
    }
}



/* 鍝嶅簲寮忚璁?*/
@media (max-width: 768px) {
    .palette-container {
        padding: 15px;
    }
    
    .container {
        width: 240px;
        height: 135px;
    }
    
    .redemption-text {
        font-size: 18px;
    }
}

@media (max-width: 480px) {
    .container {
        width: 100%;
        max-width: 320px;
        height: calc(100vw / 16 * 9 - 30px);
        max-height: 180px;
    }
    
    #card .redemption-content {
        flex-direction: row;
        gap: 15px;
    }
    
    .redemption-arrow {
        font-size: 13px;
    }
    
    .redemption-text {
        font-size: 16px;
    }
}