/* --- BỐ CỤC XƯỞNG MAY SIÊU NHÂN --- */
.tailor-arena {
    height: 180px;
    background: radial-gradient(circle, #1e3c72 0%, #2a5298 100%); /* Nền xanh siêu nhân */
    box-shadow: inset 0 0 20px rgba(0,0,0,0.6);
    position: relative;
    overflow: hidden;
    border: 4px solid #ffca28; /* Khung vàng rực rỡ */
}

/* Ánh sáng phép thuật chớp nháy phía sau */
.magic-sparks {
    position: absolute;
    width: 100%; height: 100%;
    background-image: radial-gradient(2px 2px at 20% 30%, #ffd54f, transparent),
                      radial-gradient(2px 2px at 70% 60%, #ffd54f, transparent),
                      radial-gradient(3px 3px at 40% 80%, #ffd54f, transparent),
                      radial-gradient(3px 3px at 80% 20%, #ffd54f, transparent);
    animation: twinkle 2s infinite alternate;
    z-index: 1;
}
@keyframes twinkle {
    0% { opacity: 0.3; }
    100% { opacity: 1; }
}

/* Tấm vải (Ban đầu ở giữa) */
.fabric-item {
    position: absolute;
    left: 45%;
    top: 35%;
    font-size: 4.5rem;
    z-index: 3;
    transition: all 0.3s ease;
    filter: drop-shadow(0 5px 10px rgba(0,0,0,0.5));
}

/* Kéo cắt (Bên phải lao vào) */
.scissors-tool {
    position: absolute;
    right: 10%;
    top: 40%;
    font-size: 3.5rem;
    z-index: 4;
}
.cut-fabric {
    animation: snip-snip 0.4s ease-in forwards;
}
@keyframes snip-snip {
    0% { right: 10%; transform: rotate(0deg) scale(1); }
    50% { right: 45%; transform: rotate(-30deg) scale(1.2); }
    100% { right: 45%; transform: rotate(0deg) scale(1); opacity: 0; }
}

/* Hiệu ứng áo choàng siêu nhân bay lên */
.cape-fly {
    animation: fly-away 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
@keyframes fly-away {
    0% { transform: scale(1) translateY(0); filter: brightness(1); }
    50% { transform: scale(1.5) translateY(-30px); filter: brightness(1.5); }
    100% { transform: scale(1.2) translateY(-10px); }
}

/* Vải rách / Sai số */
.shake-error { animation: fabric-tear 0.4s; }
@keyframes fabric-tear {
    0% { transform: translateX(0) rotate(0); }
    25% { transform: translateX(-15px) rotate(-15deg); }
    50% { transform: translateX(15px) rotate(15deg); }
    75% { transform: translateX(-15px) rotate(-15deg); }
    100% { transform: translateX(0) rotate(0); }
}

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