/* ==========================================================================
   Schiffe versenken – Steckbrett aus Kunststoff: Lochraster, graue Schiffe, weiße/rote Stecker
   ========================================================================== */
.bs { --sea: #23324f; --sea-d: #18233a; position: absolute; inset: 0; display: flex; flex-direction: column; gap: 8px; padding: 2px 8px 10px; }
.bs-rail { flex: none; }
.bs .rail-chip .val { display: inline-flex; align-items: center; }
.rail-chip .val svg { width: 15px; height: 15px; margin-left: 2px; vertical-align: -2px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Ziel wählen (zu dritt/viert): Spieler in der Leiste antippen */
.bs.choose .rail-chip { cursor: pointer; }
.bs .rail-chip.aim { background: var(--grain), var(--mustard); }

/* Bretter */
.bs-main { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; container-type: size; }
.bs-board { position: relative; display: grid; grid-template-columns: 1.5em 1fr; grid-template-rows: 1.5em auto auto; flex: none; font: 700 clamp(8px, 2.2cqw, 13px) var(--text); }
.bs-board.big { width: min(100cqw - 4px, 100cqh - 8px, 560px); }
.bs-main:has(.bs-smalls) .bs-board.big { width: min(100cqw - 4px, 100cqh - 170px, 560px); }
.bs-cols { grid-column: 2; grid-row: 1; display: grid; grid-template-columns: repeat(10, 1fr); align-items: center; text-align: center; color: var(--on-wood-3); }
.bs-rows { grid-column: 1; grid-row: 2; display: grid; grid-template-rows: repeat(10, 1fr); align-items: center; text-align: center; color: var(--on-wood-3); }
.bs-sea { grid-column: 2; grid-row: 2; position: relative; aspect-ratio: 1; border-radius: 6px; background: var(--grain), linear-gradient(160deg, var(--sea), var(--sea-d)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 3px 0 #0f1626, 0 14px 24px -10px rgba(0, 0, 0, .7); }
.bs-cells { position: absolute; inset: 0; z-index: 2; display: grid; grid-template-columns: repeat(10, 1fr); grid-template-rows: repeat(10, 1fr); }
.bs-cells i { position: relative; display: grid; place-items: center; }
.bs-cells i::before { content: ""; width: 30%; aspect-ratio: 1; border-radius: 50%; background: rgba(5, 9, 18, .55); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .6), 0 1px 0 rgba(255, 255, 255, .08); }
.bs-cells i.m::before { width: 44%; background: radial-gradient(circle at 35% 30%, #fff, #e9e1cf 55%, #b9ae98); box-shadow: 0 2px 3px rgba(0, 0, 0, .55); }
.bs-cells i.h::before { width: 48%; background: radial-gradient(circle at 35% 30%, #ff9b80, var(--red) 55%, var(--red-d)); box-shadow: 0 2px 4px rgba(0, 0, 0, .6), 0 0 10px rgba(255, 110, 70, .35); }
.bs-cells i.drop::before { animation: pegDrop .5s var(--spring); }
@keyframes pegDrop { from { transform: translateY(-120%) scale(2.2); opacity: 0; } 60% { opacity: 1; } }
.bs-ships { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.bs-ship { position: absolute; left: calc(var(--x) * 10%); top: calc(var(--y) * 10%); width: calc(var(--l) * 10%); height: 10%; transition: left .25s var(--ease), top .25s var(--ease), transform .2s var(--spring); }
.bs-ship.v { width: 10%; height: calc(var(--l) * 10%); }
.bs-ship::before { content: ""; position: absolute; inset: 13% 4%; border-radius: 50% 50% 46% 46% / 50%; background: var(--grain), linear-gradient(#b7bec2, #7c868b 60%, #5f686d); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 3px 5px rgba(0, 0, 0, .55); }
.bs-ship.v::before { inset: 4% 13%; border-radius: 50% / 50% 50% 46% 46%; background: var(--grain), linear-gradient(90deg, #b7bec2, #7c868b 60%, #5f686d); }
.bs-ship.sunk::before { background: var(--grain), linear-gradient(#7d6a62, #4a3a33); }
.bs-ship.sunk.v::before { background: var(--grain), linear-gradient(90deg, #7d6a62, #4a3a33); }
.bs.placing .bs-board.mine.big .bs-ships { pointer-events: auto; }
.bs.placing .bs-board.mine.big .bs-cells { pointer-events: none; }
.bs.placing .bs-board.mine.big .bs-ship { cursor: grab; touch-action: none; }
.bs-ship.lift { z-index: 3; transform: scale(1.06); transition: transform .2s var(--spring); cursor: grabbing; }
.bs-ship.lift::before { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 10px 16px rgba(0, 0, 0, .55); }
.bs-ship.bad::before { background: var(--grain), linear-gradient(#e0a08f, #b25a45); }
.bs.aiming .bs-board.enemy .bs-cells i:not(.m):not(.h) { cursor: crosshair; }
@media (hover: hover) { .bs.aiming .bs-board.enemy .bs-cells i:not(.m):not(.h):hover::before { width: 46%; background: var(--mustard); box-shadow: 0 0 0 3px rgba(217, 162, 58, .35); } }
.bs-board.out { opacity: .45; filter: grayscale(.6); }
.bs-shake { animation: bsShake .5s ease; }
@keyframes bsShake { 20%, 60% { translate: -4px 0; } 40%, 80% { translate: 4px 0; } }
.bs-tag { grid-column: 1 / -1; grid-row: 3; justify-self: center; display: flex; align-items: center; gap: 6px; margin-top: 6px; padding: 2px 12px 2px 2px; border-radius: 99px; color: var(--ink); background: var(--grain), var(--paper); box-shadow: var(--shadow-1); font: 700 17px/1 var(--hand); }

.bs-smalls { flex: none; display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.bs-board.small { width: 150px; font-size: 7px; grid-template-columns: 1.2em 1fr; grid-template-rows: 1.2em auto auto; }
.bs-board.small .bs-cells i.m::before { width: 50%; } .bs-board.small .bs-cells i.h::before { width: 56%; }

.bs-foot { flex: none; min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 10px; }
.bs-foot .btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }

/* Tisch-Bildschirm: alle Bretter nebeneinander */
.bs.table { padding: 8px 24px 20px; }
.bs.table .bs-smalls { flex: 1; align-items: center; flex-wrap: nowrap; gap: 4cqw; }
.bs.table .bs-board.small { width: min((100cqw - (var(--nb) - 1) * 4cqw) / var(--nb) - 2cqw, 100cqh - 80px, 560px); font-size: clamp(9px, 1.4cqw, 15px); grid-template-columns: 1.5em 1fr; grid-template-rows: 1.5em auto auto; }
.bs.table .bs-tag { font-size: 26px; }