/* Menghapus padding/margin dasar canvas Three.js */
canvas { 
    display: block; 
}

/* Modal garasi aktif */
#showroom-modal.active {
    display: flex;
    pointer-events: auto;
}

/* Card item garasi */
.char-card {
    background: linear-gradient(145deg, #1e1e2f, #12121a);
    border: 2px solid #333; 
    border-radius: 12px; 
    overflow: hidden;
    display: flex; 
    flex-direction: column; 
    position: relative;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5); 
    height: 230px; 
}
.char-card.selected { 
    border-color: #32CD32; 
    box-shadow: 0 0 15px rgba(50,205,50,0.4); 
}

/* Thumbnail preview */
.card-thumbnail {
    width: 100%; 
    height: 120px; 
    position: relative; 
    background: radial-gradient(circle, #2a2a3e 0%, #111 100%);
}
.card-thumbnail canvas { 
    width: 100% !important; 
    height: 100% !important; 
    display: block; 
}
.detail-canvas-container canvas { 
    width: 100% !important; 
    height: 100% !important; 
    position: absolute; 
    top:0; left:0; 
}

/* Animasi Tombol Rekam */
.recording-blink { 
    animation: blinker 1.5s linear infinite; 
    background: #8B0000 !important; 
}
@keyframes blinker { 
    50% { opacity: 0.6; } 
}

/* Animasi Teks Komik (BOOM!) */
#popup-container { display: block; }
.comic-text { 
    position: absolute; 
    font-family: 'Comic Sans MS', sans-serif; 
    font-weight: bold; 
    font-size: 80px; 
    color: #FFF; 
    text-shadow: 5px 5px 0 #000, -3px -3px 0 #000, 3px -3px 0 #000, -3px 3px 0 #000; 
    transform: translate(-50%, -50%) scale(0); 
    animation: popAction 0.8s forwards; 
}
@keyframes popAction { 
    0% { transform: translate(-50%, -50%) scale(0) rotate(-15deg); opacity: 1; } 
    50% { transform: translate(-50%, -50%) scale(1.2) rotate(10deg); opacity: 1; } 
    100% { transform: translate(-50%, -150%) scale(1) rotate(0deg); opacity: 0; } 
}