/* --- BỐ CỤC ĐẠI DƯƠNG --- */
.ocean-arena {
    height: 220px; /* Tăng chút chiều cao để hiển thị trọn vòng tròn */
    background: linear-gradient(180deg, #4fc3f7 0%, #0277bd 100%);
    box-shadow: inset 0 0 20px rgba(0,0,0,0.5);
    position: relative; 
    overflow: hidden;
}

/* Sóng biển lượn lờ */
.ocean-bg {
    position: absolute;
    width: 200%; height: 100%;
    background-image: radial-gradient(circle at 40px 10px, rgba(255,255,255,0.2) 20px, transparent 21px);
    background-repeat: repeat;
    animation: wave-move 10s linear infinite;
    z-index: 1;
}
@keyframes wave-move {
    0% { transform: translateX(0) translateY(0); }
    50% { transform: translateX(-25%) translateY(10px); }
    100% { transform: translateX(-50%) translateY(0); }
}

/* Vòng tròn Radar */
.sonar-circle {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 140px; height: 140px;
    border: 3px dashed rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    z-index: 2;
}

/* Tâm O của hình tròn */
.center-o {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 10px; height: 10px;
    background-color: #ff3d00; /* Điểm đỏ tâm */
    border: 2px solid #fff;
    border-radius: 50%;
    z-index: 4;
}

.label-o {
    position: absolute;
    top: -25px; left: -5px;
    font-weight: 900;
    color: #fff;
    font-size: 1.2rem;
    text-shadow: 1px 1px 2px #000;
}

/* Đường Bán kính (Chỉ kéo từ tâm ra mép phải) */
.radius-line {
    position: absolute;
    top: 50%; left: 50%;
    width: 50%; height: 4px;
    background-color: #ffeb3b;
    transform-origin: left center;
    transform: translateY(-50%);
    z-index: 3;
}

/* Đường Đường kính (Nối từ mép trái sang mép phải đi qua tâm) */
.diameter-line {
    position: absolute;
    top: 50%; left: 0;
    width: 100%; height: 4px;
    background-color: #69f0ae; /* Màu xanh lá mạ phân biệt */
    transform: translateY(-50%);
    z-index: 3;
}

.line-label {
    position: absolute;
    top: -22px; left: 50%;
    transform: translateX(-50%);
    font-weight: 900;
    box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

/* Nhân vật Cá heo */
.dolphin-char {
    position: absolute;
    top: 60%;
    left: 10%;
    font-size: 3.5rem;
    z-index: 5;
    filter: drop-shadow(3px 5px 4px rgba(0,0,0,0.4));
    animation: float-dolphin 3s ease-in-out infinite alternate;
}

@keyframes float-dolphin {
    0% { transform: translateY(-10px) rotate(-5deg) scaleX(-1); }
    100% { transform: translateY(10px) rotate(5deg) scaleX(-1); }
}

/* Hiệu ứng Cá heo nhảy mừng khi Đúng */
.happy-jump {
    animation: dolphin-jump 0.8s ease-out forwards !important;
}
@keyframes dolphin-jump {
    0% { transform: translateY(0) scaleX(-1); }
    50% { transform: translateY(-60px) rotate(-20deg) scaleX(-1); }
    100% { transform: translateY(0) scaleX(-1); }
}

/* Hiệu ứng Radar nhấp nháy phát sóng */
.sonar-ping {
    animation: ping 1s ease-out;
}
@keyframes ping {
    0% { box-shadow: 0 0 0 0 rgba(255,255,255,0.7); }
    100% { box-shadow: 0 0 0 30px rgba(255,255,255,0); }
}

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

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