/* Neon Battleship Dual-Grid Styles */

:root {
    --nb-water: rgba(15, 23, 42, 0.4);
    --nb-grid-border: rgba(255, 255, 255, 0.05);

    /* Player Colors */
    --nb-player-ship: var(--accent-primary);
    --nb-player-miss: rgba(255, 255, 255, 0.2);

    /* AI Colors */
    --nb-ai-border: #ef4444;
    --nb-ai-hit: #ef4444;
    --nb-miss: rgba(255, 255, 255, 0.15);
}

.game-grid {
    width: 300px;
    /* Fixed size for consistency */
    aspect-ratio: 1;
}

@media (max-width: 768px) {
    .game-grid {
        width: 100%;
        max-width: 320px;
    }
}

.grid-cell {
    background-color: var(--nb-water);
    border: 1px solid var(--nb-grid-border);
    border-radius: 2px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

/* --- Player Grid Specifics --- */
.player-ship {
    background-color: var(--nb-player-ship);
    box-shadow: 0 0 10px var(--nb-player-ship);
    border-color: rgba(255, 255, 255, 0.2);
}

.player-hit {
    background-color: #ef4444 !important;
    /* Damage */
    box-shadow: 0 0 15px #ef4444;
}

.player-miss {
    /* AI missed shooting at player */
    background-color: var(--nb-player-miss);
}

.player-miss::after {
    content: '';
    position: absolute;
    width: 4px;
    height: 4px;
    background: #fff;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.5;
}


/* --- AI Grid Specifics (Targeting) --- */

/* Hover targeting effect */
#ai-grid:not(.cursor-not-allowed) .grid-cell:hover:not(.hit):not(.miss) {
    background-color: rgba(239, 68, 68, 0.2);
    border-color: #ef4444;
    cursor: crosshair;
}

.ai-hit {
    background-color: #ef4444;
    /* We hit them! */
    box-shadow: 0 0 15px #ef4444;
    animation: neonPulse 1s infinite alternate;
}

.ai-miss {
    background-color: var(--nb-miss);
}

.ai-miss::after {
    content: '•';
    color: rgba(255, 255, 255, 0.3);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.ai-sunk-reveal {
    /* Visual indicator for a sunken ship (optional grey out) */
    opacity: 0.5;
    background-color: #7f1d1d;
    /* Dark red */
}

@keyframes neonPulse {
    from {
        opacity: 0.8;
        box-shadow: 0 0 5px #ef4444;
    }

    to {
        opacity: 1;
        box-shadow: 0 0 20px #ef4444;
    }
}

/* Animations */
.shake-grid {
    animation: shake 0.4s cubic-bezier(.36, .07, .19, .97) both;
}

@keyframes shake {

    10%,
    90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%,
    80% {
        transform: translate3d(2px, 0, 0);
    }

    30%,
    50%,
    70% {
        transform: translate3d(-4px, 0, 0);
    }

    40%,
    60% {
        transform: translate3d(4px, 0, 0);
    }
}