/* 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);

    /* Mission Buttons - Default (Dark) */
    --nb-btn-primary-border: #bae6fd;
    --nb-btn-primary-text: #bae6fd;
    --nb-btn-primary-hover-bg: #bae6fd;
    --nb-btn-primary-hover-text: #0f172a;
    --nb-btn-primary-shadow: 0 0 15px rgba(186, 230, 253, 0.3);

    --nb-btn-secondary-border: #22c55e;
    --nb-btn-secondary-text: #22c55e;
    --nb-btn-secondary-hover-bg: #22c55e;
    --nb-btn-secondary-hover-text: #0f172a;
    --nb-btn-title-shadow: 0 0 20px rgba(var(--accent-primary-rgb), 0.3);
}

/* Theme Overrides for Buttons */
:root[data-theme="light"],
:root[data-theme="zen"] {
    --nb-btn-primary-border: var(--accent-primary);
    --nb-btn-primary-text: var(--accent-primary);
    --nb-btn-primary-hover-bg: var(--accent-primary);
    --nb-btn-primary-hover-text: var(--bg-primary);
    --nb-btn-primary-shadow: 0 4px 12px rgba(var(--accent-primary-rgb), 0.15);

    --nb-btn-secondary-border: var(--text-secondary);
    --nb-btn-secondary-text: var(--text-secondary);
    --nb-btn-secondary-hover-bg: var(--text-secondary);
    --nb-btn-secondary-hover-text: var(--bg-primary);
    --nb-btn-title-shadow: none;
}

.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);
    }
}

/* --- Fleet Tracker --- */
.tracker-row {
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.tracker-row.sunk {
    opacity: 0.3;
    filter: grayscale(100%);
    text-decoration: line-through;
}

.tracker-name {
    font-size: 0.75rem;
    color: var(--text-muted);
    width: 120px;
    /* Fixed width for alignment */
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.tracker-ships {
    display: flex;
    gap: 2px;
}

.tracker-cell {
    width: 12px;
    height: 12px;
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 2px;
}

/* Player Specific Tracker */
#player-fleet-tracker .tracker-cell {
    background-color: var(--nb-player-ship);
    box-shadow: 0 0 2px var(--nb-player-ship);
}

#player-fleet-tracker .tracker-row.sunk .tracker-name {
    color: #ef4444;
    /* Alert color when sunk */
}

/* AI Specific Tracker */
#ai-fleet-tracker .tracker-cell {
    background-color: #ef4444;
    box-shadow: 0 0 2px #ef4444;
}

#ai-fleet-tracker .tracker-row.sunk .tracker-name {
    color: var(--accent-primary);
    /* Victory color when sunk */
}

/* Mixed Game Styles */
.game-title {
    text-shadow: var(--nb-btn-title-shadow);
}

.btn-mission-primary {
    background: transparent;
    border: 2px solid var(--nb-btn-primary-border);
    color: var(--nb-btn-primary-text);
    box-shadow: var(--nb-btn-primary-shadow);
}

.btn-mission-primary:hover {
    background: var(--nb-btn-primary-hover-bg);
    color: var(--nb-btn-primary-hover-text);
}

.btn-mission-secondary {
    background: transparent;
    border: 1px solid var(--nb-btn-secondary-border);
    color: var(--nb-btn-secondary-text);
}

.btn-mission-secondary:hover {
    background: var(--nb-btn-secondary-hover-bg);
    color: var(--nb-btn-secondary-hover-text);
}