/* Battleship */

.bt-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    user-select: none;
    width: 100%;
}

.bt-status {
    font-size: 1.1rem;
    font-weight: 700;
    min-height: 1.5em;
    margin: 0;
    text-align: center;
}

.bt-grids {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}

.bt-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
}

.bt-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-text-light);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.bt-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 1px;
    width: min(300px, 44vw);
    aspect-ratio: 1;
    background: #7fa8c4;
    border: 2px solid #4a7d9e;
    border-radius: 4px;
    overflow: hidden;
}

.bt-cell {
    border: none;
    padding: 0;
    background: #cfe4f0;
    cursor: default;
    -webkit-tap-highlight-color: transparent;
}

.bt-enemy .bt-cell { cursor: crosshair; }
.state-placing .bt-own .bt-cell { cursor: pointer; }

/* Your own ships are visible; the enemy's are not until sunk. */
.bt-cell.ship { background: #7d8794; }

.bt-cell.miss {
    background: #eef6fb;
    box-shadow: inset 0 0 0 3px #b6cbd8;
}

.bt-cell.hit { background: var(--color-accent); }
.bt-cell.sunk { background: #7b241c; }

.bt-cell:focus-visible {
    outline: 3px solid var(--color-text);
    outline-offset: -3px;
}

.state-result .bt-cell { pointer-events: none; }

.bt-fleet {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    justify-content: center;
}

.bt-ship {
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    border: 2px solid var(--color-border);
    color: var(--color-text-light);
    background: var(--color-card-bg);
}

.bt-ship.placed { border-color: var(--color-success); color: var(--color-text); }
.bt-ship.next { border-color: var(--color-primary-dark); background: var(--color-primary); }
.bt-ship.sunk { text-decoration: line-through; border-color: var(--color-accent); }

.bt-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
}

.bt-btn {
    padding: 0.55rem 1.2rem;
    font-size: 0.95rem;
    font-weight: 600;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-card-bg);
    color: var(--color-text);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.bt-btn:hover { border-color: var(--color-primary-dark); }
.bt-btn:focus-visible {
    outline: 3px solid var(--color-text);
    outline-offset: 2px;
}

/* Placement controls only make sense before the battle starts. */
.state-playing .bt-btn:not(#action),
.state-result .bt-btn:not(#action) { display: none; }

.bt-feedback {
    min-height: 1.4em;
    margin: 0;
    font-weight: 600;
    color: var(--color-text-light);
    text-align: center;
}

.game-container .content:has(.bt-stage) { max-width: 700px; }