/* --- BỐ CỤC ĐẠI DƯƠNG HÀNG HẢI --- */
.ocean-arena {
    height: 220px;
    background: linear-gradient(180deg, #4fc3f7 0%, #0288d1 40%, #01579b 100%);
    box-shadow: inset 0 0 15px rgba(0,0,0,0.5);
    position: relative;
    overflow: hidden;
    border: 5px solid #000000;
    border-radius: 12px;
}

/* Radar định vị (Bên phải trên) */
.radar-bg {
    position: absolute;
    top: 10px;
    right: 15px;
    width: 60px;
    height: 60px;
    background: rgba(0, 0, 0, 0.5);
    border: 3px solid #00e5ff;
    border-radius: 50%;
    z-index: 1;
    overflow: hidden;
}
.radar-grid {
    position: absolute;
    top: 50%; left: 50%;
    width: 100%; height: 100%;
    transform: translate(-50%, -50%);
    background-image: 
        linear-gradient(rgba(0, 229, 255, 0.3) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 229, 255, 0.3) 1px, transparent 1px);
    background-size: 20px 20px;
    border-radius: 50%;
}
.radar-sweep {
    position: absolute;
    top: 50%; left: 50%;
    width: 30px; height: 30px;
    background: linear-gradient(45deg, rgba(0, 229, 255, 0.8) 0%, transparent 50%);
    transform-origin: top left;
}
.sweeping {
    animation: radar-spin 2s linear infinite;
}
@keyframes radar-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Các gợn sóng biển cuộn lên */
.waves-front {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 200%;
    height: 50px;
    background: radial-gradient(circle at 20px 0px, transparent 20px, #01579b 21px);
    background-size: 40px 100%;
    z-index: 3;
    animation: wave-roll 3s linear infinite;
    opacity: 0.8;
}
@keyframes wave-roll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-40px); }
}

/* Con Tàu Biển */
.ship-item {
    position: absolute;
    left: 20%;
    bottom: 30px;
    font-size: 6rem;
    z-index: 2;
    transition: all 0.5s ease;
    filter: drop-shadow(0 10px 5px rgba(0,0,0,0.4));
}
.sailing {
    animation: ship-bob 2s infinite alternate ease-in-out;
}
@keyframes ship-bob {
    0% { transform: translateY(0) rotate(0deg); }
    100% { transform: translateY(-8px) rotate(-3deg); }
}

/* Hoạt ảnh khi trả lời đúng (Tăng tốc lướt sóng) */
.speed-up {
    animation: ship-dash 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
@keyframes ship-dash {
    0% { transform: translateX(0) rotate(0deg); }
    50% { transform: translateX(20px) translateY(-5px) rotate(-5deg); }
    100% { transform: translateX(0) translateY(0) rotate(0deg); }
}

/* Hoạt ảnh khi sai (Đụng đá ngầm) */
.hit-rock {
    animation: ship-crash 0.4s infinite; filter: sepia(1) hue-rotate(-50deg) saturate(3);
}
@keyframes ship-crash {
    0% { transform: translate(0,0) rotate(0); }
    25% { transform: translate(-5px, 5px) rotate(-5deg); }
    50% { transform: translate(5px, -5px) rotate(5deg); }
    75% { transform: translate(-5px, -5px) rotate(-5deg); }
    100% { transform: translate(0,0) rotate(0); }
}

/* Chạy về đích */
.sail-away {
    animation: sail-out 3s ease-in forwards;
}
@keyframes sail-out {
    0% { left: 20%; }
    100% { left: 150%; opacity: 0; }
}

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