.card.transition {
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    position: relative;
    top: 0;
}

.card.transition:hover {
    transform: translateY(-5px); 
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3) !important;
}

.loveroom {
    background-color: #fff0ff !important;
}
.loveroom .card-title {
    color:#AA0088;
}

.midnight {
    background: linear-gradient(
        345deg, 
        #050510 0%, 
        #1a1a3a 25%, 
        #1a1a3a 50%,
        #050510 100% 
    ) !important;
}
.midnight .card-title {
    color:#ccc;
}
.midnight .description {
    background-image: linear-gradient(
        135deg, 
        #a29bfe 0%,
        #74b9ff 20%,
        #fab1a0 30%,
        #a29bfe 60%,
        #74b9ff 80%, 
        #fab1a0 100% 
    ) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
}
.midnight .btn-outline-primary {
    background: linear-gradient(135deg, #a29bfe, #fab1a0) !important;
    border: none !important;
    color: #121220 !important;
    font-weight: 800 !important;
    padding: 12px !important;
    border-radius: 12px !important;
    box-shadow: 0 5px 15px rgba(250, 177, 160, 0.3) !important;
    transition: all 0.3s ease !important;
}

/* カード本体 */
.masquerade,
.masquerade_ura {
    background-color: #2a2c33 !important;
    border: 1px solid rgba(130, 160, 255, 0.2) !important; 
    backdrop-filter: blur(20px);
}

/* タイトル */
.masquerade .card-title,
.masquerade_ura .card-title {
    color: #f8fafc !important; 
    letter-spacing: 0.3rem !important; 
    text-transform: uppercase;
}

/* 説明文 */
.masquerade .description,
.masquerade_ura .description {
    color: rgba(168, 183, 204, 0.9) !important;
    line-height: 1.8 !important;
    letter-spacing: 0.05rem !important;
}

/* ボタン（通常時） */
.masquerade .btn-outline-primary,
.masquerade_ura .btn-outline-primary {
    background-color: transparent !important; 
    border: 1px solid rgba(130, 160, 255, 0.4) !important;
    color: #82a0ff !important;
    font-weight: 400 !important;
    padding: 14px !important;
    border-radius: 2px !important; 
    transition: all 0.4s ease !important;
}

/* ボタン（ホバー時） */
.masquerade .btn-outline-primary:hover,
.masquerade_ura .btn-outline-primary:hover {
    background-color: #82a0ff !important; 
    color: #0a0a15 !important;
    border-color: #82a0ff !important;
    box-shadow: 0 0 20px rgba(130, 160, 255, 0.3) !important;
}