/* --- BỐ CỤC PHÉP THUẬT --- */
.magic-arena {
    height: 220px;
    background: linear-gradient(180deg, #4a148c 0%, #311b92 100%);
    box-shadow: inset 0 0 20px rgba(0,0,0,0.8);
    position: relative; 
    overflow: hidden;
}

/* Nền sao lấp lánh (phép thuật) */
.magic-bg {
    position: absolute;
    top: 0; left: 0;
    width: 200%; height: 100%;
    background-image: 
        radial-gradient(2px 2px at 20px 30px, #e040fb, rgba(0,0,0,0)),
        radial-gradient(2px 2px at 40px 70px, #ffeb3b, rgba(0,0,0,0)),
        radial-gradient(3px 3px at 90px 40px, #ffffff, rgba(0,0,0,0)),
        radial-gradient(2px 2px at 160px 120px, #69f0ae, rgba(0,0,0,0));
    background-repeat: repeat;
    animation: magic-stars 8s linear infinite;
    z-index: 1;
}
@keyframes magic-stars {
    0% { transform: translateY(0) rotate(0); }
    100% { transform: translateY(-50px) rotate(5deg); }
}

/* Đồ vật khổng lồ ở giữa */
.giant-item {
    position: absolute;
    top: 50%; left: 55%;
    transform: translate(-50%, -50%);
    font-size: 6rem; /* Khổng lồ */
    z-index: 2;
    filter: drop-shadow(0 0 15px rgba(255, 235, 59, 0.4));
    transition: all 1s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Hiệu ứng thu nhỏ khi trả lời đúng */
.shrink-magic {
    animation: poof-shrink 1.2s forwards !important;
}
@keyframes poof-shrink {
    0% { transform: translate(-50%, -50%) scale(1); filter: drop-shadow(0 0 20px #ffeb3b) brightness(1.5); }
    50% { transform: translate(-50%, -50%) scale(1.2); filter: drop-shadow(0 0 50px #fff) brightness(2); } /* Phình to tí trước khi teo */
    100% { transform: translate(-50%, -10%) scale(0.3); filter: drop-shadow(0 0 5px #000) brightness(1); } /* Teo nhỏ và rớt xuống */
}

/* Nhân vật Phù thủy */
.wizard-char {
    position: absolute;
    bottom: 20px;
    left: 10%;
    font-size: 4rem;
    z-index: 5;
    filter: drop-shadow(3px 5px 4px rgba(0,0,0,0.5));
}

/* Đũa phép (Gắn liền với phù thủy) */
.magic-wand {
    position: absolute;
    top: 10px; right: -25px;
    font-size: 2.5rem;
    transform-origin: bottom left;
    transform: rotate(20deg);
}

/* Hiệu ứng vẩy đũa phép */
.wand-wave {
    animation: wave-wand 0.5s ease-in-out 2;
}
@keyframes wave-wand {
    0% { transform: rotate(20deg); }
    50% { transform: rotate(60deg); }
    100% { transform: rotate(20deg); }
}

/* Rung lắc khi sai */
.shake-error { animation: shake-char 0.4s !important; }
@keyframes shake-char {
    0% { transform: translateX(0); }
    25% { transform: translateX(-10px) rotate(-10deg); }
    50% { transform: translateX(10px) rotate(10deg); }
    75% { transform: translateX(-10px) rotate(-10deg); }
    100% { transform: translateX(0); }
}

.min-h-75 { min-height: 85px; }