/* --- BỐ CỤC BIỂN CẢ HẢI TẶC --- */
.pirate-arena {
    height: 180px;
    background: linear-gradient(180deg, #001f3f 0%, #0074D9 100%);
    box-shadow: inset 0 0 20px rgba(0,0,0,0.8);
    position: relative;
    overflow: hidden;
    border: 4px solid #8B4513; /* Khung gỗ viền tàu */
    border-radius: 10px;
}

/* Sóng biển lăn tăn */
.ocean-waves {
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 200%;
    height: 40px;
    background: radial-gradient(circle at 10px 0px, transparent 10px, #0052a2 11px);
    background-size: 20px 20px;
    animation: wave-move 3s linear infinite;
    z-index: 2;
}
@keyframes wave-move {
    0% { transform: translateX(0); }
    100% { transform: translateX(-20px); }
}

/* Con tàu hải tặc (Bên trái) */
.pirate-ship {
    position: absolute;
    left: 10%;
    bottom: 20%;
    font-size: 4rem;
    z-index: 3;
    filter: drop-shadow(0 5px 5px rgba(0,0,0,0.5));
    animation: ship-bob 2s ease-in-out infinite alternate;
}
@keyframes ship-bob {
    0% { transform: translateY(0) rotate(-2deg); }
    100% { transform: translateY(-8px) rotate(2deg); }
}

/* Rương kho báu (Bên phải) */
.treasure-chest {
    position: absolute;
    right: 15%;
    bottom: 20%;
    font-size: 3.5rem;
    z-index: 4;
    transition: all 0.3s ease;
}
.chest-full {
    animation: pop-chest 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    filter: drop-shadow(0 0 15px #ffd54f);
}
@keyframes pop-chest {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1.1); }
}

/* Vàng bay vào rương */
.gold-coins-fly {
    position: absolute;
    left: 20%;
    bottom: 30%;
    font-size: 2rem;
    z-index: 5;
}
.fly-to-chest {
    animation: throw-gold 0.5s ease-in forwards;
}
@keyframes throw-gold {
    0% { left: 20%; bottom: 30%; transform: scale(1); opacity: 1; }
    50% { left: 50%; bottom: 50%; transform: scale(1.5); }
    100% { left: 80%; bottom: 20%; transform: scale(0.5); opacity: 0; }
}

/* Biển động / Tàu lắc khi sai */
.shake-error { animation: storm-shake 0.4s; }
@keyframes storm-shake {
    0% { transform: translateX(0) translateY(0) rotate(0); }
    25% { transform: translateX(-10px) translateY(10px) rotate(-10deg); }
    50% { transform: translateX(10px) translateY(-10px) rotate(10deg); }
    75% { transform: translateX(-10px) translateY(10px) rotate(-10deg); }
    100% { transform: translateX(0) translateY(0) rotate(0); }
}

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