/* --- BỐ CỤC TIỆM BÁNH DỄ THƯƠNG --- */
.bakery-arena {
    height: 180px;
    background: radial-gradient(circle at center, #fff0f5 0%, #ffb6c1 100%); /* Màu hồng kem pastel */
    box-shadow: inset 0 0 15px rgba(255,105,180,0.3);
    position: relative;
    overflow: hidden;
    border: 4px solid #ff69b4; /* Viền hồng đậm */
    border-radius: 15px;
}

/* Rèm cửa tiệm bánh (trang trí) */
.awning {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 30px;
    background: repeating-linear-gradient(90deg, #ff69b4, #ff69b4 20px, #ffffff 20px, #ffffff 40px);
    box-shadow: 0 3px 5px rgba(0,0,0,0.1);
    z-index: 5;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

/* Chiếc bánh ở giữa */
.bakery-item {
    position: absolute;
    left: 45%;
    top: 40%;
    font-size: 4.5rem;
    z-index: 3;
    transition: all 0.3s ease;
    filter: drop-shadow(0 5px 5px rgba(0,0,0,0.2));
}

/* Hoạt ảnh bánh đang chờ */
.show-cake {
    animation: float-cake 2s ease-in-out infinite alternate;
}
@keyframes float-cake {
    0% { transform: translateY(0); }
    100% { transform: translateY(-5px); }
}

/* Hoạt ảnh vui mừng đóng hộp */
.bounce-happy {
    animation: happy-jump 0.6s cubic-bezier(0.28, 0.84, 0.42, 1) forwards;
}
@keyframes happy-jump {
    0% { transform: scale(1) translateY(0); }
    30% { transform: scale(1.2) translateY(-20px); }
    60% { transform: scale(0.9) translateY(0); }
    100% { transform: scale(1.1) translateY(-5px); }
}

/* Tiền xu bay lên khi thanh toán đúng */
.coin-fly {
    position: absolute;
    left: 45%;
    top: 40%;
    font-size: 3rem;
    z-index: 4;
}
.fly-up-fade {
    animation: fly-fade 1s ease-out forwards;
}
@keyframes fly-fade {
    0% { transform: translateY(0) scale(0.5); opacity: 1; }
    100% { transform: translateY(-60px) scale(1.2); opacity: 0; }
}

/* Tính sai - Lắc lư tức giận */
.shake-error { animation: cake-ruin 0.4s; }
@keyframes cake-ruin {
    0% { transform: translateX(0) rotate(0); filter: grayscale(0); }
    25% { transform: translateX(-10px) rotate(-15deg); filter: grayscale(1); }
    50% { transform: translateX(10px) rotate(15deg); filter: grayscale(1); }
    75% { transform: translateX(-10px) rotate(-15deg); filter: grayscale(1); }
    100% { transform: translateX(0) rotate(0); filter: grayscale(0); }
}

.min-h-75 { min-height: 90px; }
.hl-num { color: #d81b60; font-weight: 900; font-size: 1.2em; }