:root {
    --water-bg: #a8d8ea; /* Светло-голубая вода */
    --water-line: #5fa8d3;
    --ship-color: #7f8c8d;
    --hit-color: #e74c3c;
    --miss-color: #34495e;
    --sunk-color: #2c3e50;
}

/* Контейнер основного поля */
#board-container {
    position: relative;
    width: 100%;
    /* Ограничиваем ширину высотой экрана, чтобы поле было квадратным и влезало */
    max-width: 85vh; 
    aspect-ratio: 1 / 1;
    margin: 0 auto; /* Центрируем */
}

/* Стили доски (общие для врага и игрока) */
.battle-board {
    display: grid;
    /* ВАЖНО: Растягиваем доску на весь родительский контейнер */
    width: 100%;
    height: 100%;
    
    background-color: var(--water-bg);
    border: 2px solid var(--water-line);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.cell {
    border: 1px solid rgba(255, 255, 255, 0.3);
    position: relative;
    cursor: crosshair; /* Прицел */
    transition: background 0.2s;
    /* Чтобы ячейки не схлопывались, если в них нет контента */
    min-width: 0;
    min-height: 0;
}

/* Клетки поля врага при наведении */
#enemy-board .cell:hover:not(.shot) {
    background-color: rgba(255, 255, 255, 0.4);
}

/* СОСТОЯНИЯ КЛЕТОК */

/* Промах */
.cell.miss::after {
    content: '';
    position: absolute;
    width: 20%;
    height: 20%;
    background-color: var(--miss-color);
    border-radius: 50%;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    animation: splash 0.3s;
}

/* Попадание (крестик/взрыв) */
.cell.hit {
    background-color: rgba(231, 76, 60, 0.2);
}
.cell.hit::after {
    content: '❌';
    position: absolute;
    font-size: clamp(10px, 1.5vw, 24px); /* Адаптивный размер иконки */
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    color: var(--hit-color);
    line-height: 1;
}

/* Убит (весь корабль) */
.cell.sunk {
    background-color: var(--hit-color) !important;
    border-color: var(--hit-color);
}
.cell.sunk::after {
    content: '💀'; 
    font-size: clamp(10px, 1.5vw, 24px);
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    line-height: 1;
}

/* Корабль (виден только на поле игрока) */
.cell.ship {
    background-color: var(--ship-color);
    border: 1px solid #fff;
}

/* Выстрел уже сделан */
.cell.shot {
    cursor: default;
}

/* ПОЛЕ ИГРОКА (В боковой панели) */
.player-board-wrapper {
    width: 100%;
    position: relative;
    aspect-ratio: 1 / 1; /* Квадрат */
}

#player-board {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
}

/* На маленьком поле убираем курсор прицела */
#player-board .cell { cursor: default; }

/* --- ЛЕГЕНДА --- */
.info-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 10px;
    justify-content: center;
}
.legend-item { display: flex; align-items: center; gap: 5px; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.dot.miss { background-color: var(--miss-color); }
.dot.hit { border: 2px solid var(--hit-color); background: transparent; }
.dot.sunk { background-color: var(--hit-color); }

/* --- АНИМАЦИИ --- */
@keyframes splash {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
    50% { transform: translate(-50%, -50%) scale(1.5); opacity: 0.5; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

/* --- АДАПТИВНОСТЬ --- */
.mobile-player-board-wrapper {
    margin-top: 20px;
    width: 70%; /* Не на весь экран на телефоне, чтобы не занимать много места */
    margin-left: auto; margin-right: auto;
    aspect-ratio: 1/1;
}
#player-board-mobile {
    width: 100%; height: 100%;
}

@media (max-width: 900px) {
    #board-container { max-width: 100%; }
}

/* Контейнер статуса флота */
.fleet-status-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: rgba(0,0,0,0.03);
    padding: 10px;
    border-radius: 6px;
}

/* Строка одного типа корабля */
.fleet-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Визуализация корабля (квадратики) */
.ship-preview {
    display: flex;
    gap: 2px;
}

.ship-deck-mini {
    width: 12px;
    height: 12px;
    background-color: var(--ship-color);
    border: 1px solid #fff;
    border-radius: 2px;
}

/* Счетчик */
.fleet-count {
    font-weight: bold;
    color: var(--text-main);
    font-size: 0.95rem;
}

/* Если все корабли этого типа потоплены */
.fleet-row.done {
    opacity: 0.4;
}
.fleet-row.done .fleet-count {
    color: var(--hit-color); /* Красный ноль или галочка */
    text-decoration: line-through;
}