/* --- BỐ CỤC SÂN ĐÌNH LÀNG QUÊ --- */
.yard-arena {
    height: 180px;
    background: linear-gradient(180deg, #bbdefb 0%, #e0f7fa 40%, #d7ccc8 40%, #8d6e63 100%);
    box-shadow: inset 0 0 15px rgba(0,0,0,0.3);
    position: relative;
    overflow: hidden;
}

/* Mặt trời & Mây */
.sky-bg {
    position: absolute;
    top: 5%;
    left: 80%;
    font-size: 2.5rem;
    animation: float-sun 4s ease-in-out infinite alternate;
}
@keyframes float-sun {
    0% { transform: translateY(0); }
    100% { transform: translateY(-5px); }
}

/* Bác thợ xây bên trái */
.builder-char {
    position: absolute;
    left: 15%;
    bottom: 5%;
    font-size: 4rem;
    z-index: 4;
    filter: drop-shadow(-3px 3px 3px rgba(0,0,0,0.4));
}

/* Khu vực sân chờ lát gạch (bên phải) */
.yard-area {
    position: absolute;
    right: 15%;
    bottom: 10%;
    font-size: 2.5rem;
    line-height: 1.1;
    z-index: 3;
    opacity: 0;
    transform: perspective(400px) rotateX(45deg); /* Phối cảnh nằm nghiêng thành mặt sàn */
}

/* Hiệu ứng gạch rơi xuống xếp thành sân */
.build-brick {
    animation: drop-brick 0.5s ease-out forwards;
}
@keyframes drop-brick {
    0% { transform: perspective(400px) rotateX(45deg) translateY(-50px); opacity: 0; }
    100% { transform: perspective(400px) rotateX(45deg) translateY(0); opacity: 1; }
}

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

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