/* Battleship (battleship-2-player.js): two 10x10 grids with A-J / 1-10 axes, ships drawn as rounded hulls. */
.tool.duel-g-bs { --sea: rgb(var(--accent) / .09); --hull: rgb(var(--ink) / .62); --hit: rgb(var(--p1)); }
@media (prefers-color-scheme: dark) { .tool.duel-g-bs { --sea: rgb(var(--accent) / .13); --hull: rgb(var(--ink) / .55); } }
.tool .bs-dot { border-radius: 50%; min-width: 14px; width: 14px; height: 14px; padding: 0; }
.tool .bs-who { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tool .duel-player.p1 .bs-who { align-items: flex-end; }
.tool .bs-pills { display: flex; gap: 3px; }
.tool .bs-pill { display: block; height: 5px; width: calc(var(--len) * 5px); border-radius: 3px; background: rgb(var(--ink) / .5); transition: background-color .3s ease, opacity .3s ease; }
.tool .bs-pill.is-sunk { background: var(--hit); opacity: .35; }

.tool .bs-stage { display: grid; gap: 16px; }

.tool .bs-board { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tool .bs-board[hidden] { display: none !important; }
.tool .bs-grid-t { font-size: 13px; line-height: 18px; font-weight: 800; color: rgb(var(--ink) / .55); }
.tool .bs-grid { display: grid; grid-template-columns: 14px repeat(10, 1fr); gap: 2px; width: 100%; max-width: 460px; touch-action: manipulation; }

.tool .bs-axis { display: grid; place-items: center; font-size: 10px; line-height: 12px; font-weight: 800; color: rgb(var(--ink) / .55); font-variant-numeric: tabular-nums; }
.tool .bs-corner { visibility: hidden; }
.tool .bs-cell {
  position: relative; aspect-ratio: 1; min-width: 0; padding: 0; border-radius: 5px; background: var(--sea);
  display: grid; place-items: center; cursor: default; user-select: none; -webkit-user-select: none;
  transition: background-color .15s ease, transform .16s var(--ease-out);
}
.tool .bs-cell:focus-visible { outline: 2px solid rgb(var(--accent)); outline-offset: 1px; z-index: 2; }
.tool .bs-target.can-fire .bs-cell.can { cursor: crosshair; }
.tool .bs-target.can-fire .bs-cell.can:active { transform: scale(.88); }
@media (hover: hover) and (pointer: fine) { .tool .bs-target.can-fire .bs-cell.can:hover { background: rgb(var(--accent) / .28); } }
.tool .bs-mark { width: 30%; height: 30%; border-radius: 50%; }
.tool .bs-cell.is-miss .bs-mark { background: rgb(var(--ink) / .35); }
.tool .bs-cell.is-hit .bs-mark, .tool .bs-cell.is-sunkshot .bs-mark { width: 56%; height: 56%; background: var(--hit); box-shadow: 0 0 0 3px rgb(var(--p1) / .25); }
.tool .bs-cell.is-sunkshot { background: rgb(var(--p1) / .22); }
.tool .bs-cell.is-pending .bs-mark { width: 44%; height: 44%; background: none; box-shadow: inset 0 0 0 2px rgb(var(--accent)); animation: duel-pulse 1.2s ease-in-out infinite; }
.tool .bs-cell.is-last.is-miss .bs-mark { animation: bs-splash .45s var(--ease-out) both; }
.tool .bs-cell.is-last.is-hit .bs-mark, .tool .bs-cell.is-last.is-sunkshot .bs-mark { animation: bs-boom .5s var(--ease-out) both; }
@keyframes bs-splash { from { transform: scale(2.4); opacity: 0; } }
@keyframes bs-boom { 0% { transform: scale(.2); } 55% { transform: scale(1.35); } }
.tool .bs-cell.is-last { box-shadow: inset 0 0 0 2px rgb(var(--ink) / .45); }

/* Ships: each hull is drawn inset inside its cells and bridges the grid gap only toward its own next cell,
   so two ships that touch still read as two ships. */
.tool .bs-cell.is-ship::before { content: ''; position: absolute; inset: 3px; border-radius: 4px; background: var(--hull); z-index: 0; }
.tool .bs-cell.s-left::before { right: -2px; border-radius: 40% 2px 2px 40%; }
.tool .bs-cell.s-midh::before { left: 0; right: -2px; border-radius: 0; }
.tool .bs-cell.s-right::before { left: 0; border-radius: 2px 40% 40% 2px; }
.tool .bs-cell.s-top::before { bottom: -2px; border-radius: 40% 40% 2px 2px; }
.tool .bs-cell.s-midv::before { top: 0; bottom: -2px; border-radius: 0; }
.tool .bs-cell.s-bottom::before { top: 0; border-radius: 2px 2px 40% 40%; }
.tool .bs-cell .bs-mark { position: relative; z-index: 1; }
.tool .bs-cell.is-ship.is-hit::before { opacity: .55; }
.tool .bs-mine.is-placing .bs-cell.is-ship::before { background: rgb(var(--ink) / .72); }
.tool .bs-mine .bs-cell.is-sel::before { background: rgb(var(--accent)); }
.tool .bs-mine.is-bump { animation: bs-bump .3s ease; }
@keyframes bs-bump { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.tool .bs-target .bs-cell.is-ship::before { background: rgb(var(--ink) / .28); }
.tool .bs-target .bs-cell.is-ship.is-sunk::before { background: rgb(var(--p1) / .35); }

/* Hand-off screen between private fleet placements on one phone */
.tool .bs-handoff { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 40px 20px; border-radius: 24px; background: var(--surface); }
.tool .bs-handoff[hidden] { display: none !important; }
.tool .bs-handoff-t { font-size: 22px; line-height: 28px; font-weight: 950; color: rgb(var(--ink)); text-wrap: balance; }

@media (max-width: 599px) {
  .tool .bs-grid { gap: 2px; grid-template-columns: 12px repeat(10, 1fr); }
  .tool .bs-cell { border-radius: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .tool .bs-cell .bs-mark, .tool .bs-mine.is-bump { animation: none !important; }
}
@media (min-width: 900px) { .tool .bs-stage.is-two { grid-template-columns: 1fr 1fr; align-items: start; } .tool .bs-stage.is-two .bs-board-mine .bs-grid { max-width: none; } }
/* Hits take the shooter's color */
.tool .bs-grid[data-shooter="0"] { --hit: rgb(var(--p0)); }
.tool .bs-grid[data-shooter="1"] { --hit: rgb(var(--p1)); }
.tool .bs-cell.is-hit .bs-mark, .tool .bs-cell.is-sunkshot .bs-mark { box-shadow: 0 0 0 3px rgb(var(--ink) / .08); }
.tool .bs-grid[data-shooter="0"] .bs-cell.is-sunkshot { background: rgb(var(--p0) / .2); }
.tool .bs-target .bs-cell.is-ship.is-sunk::before { background: rgb(var(--ink) / .22); }
.tool .duel-icon-btn { touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
/* A hit is a cross in the shooter's color with a short flash; a miss stays a small grey dot */
.tool .bs-cell.is-hit .bs-mark, .tool .bs-cell.is-sunkshot .bs-mark { position: relative; width: 64%; height: 64%; border-radius: 0; background: none; box-shadow: none; }
.tool .bs-cell.is-hit .bs-mark::before, .tool .bs-cell.is-hit .bs-mark::after,
.tool .bs-cell.is-sunkshot .bs-mark::before, .tool .bs-cell.is-sunkshot .bs-mark::after { content: ''; position: absolute; left: 50%; top: 50%; width: 100%; height: 22%; min-height: 3px; border-radius: 3px; background: var(--hit); transform: translate(-50%, -50%) rotate(45deg); }
.tool .bs-cell.is-hit .bs-mark::after, .tool .bs-cell.is-sunkshot .bs-mark::after { transform: translate(-50%, -50%) rotate(-45deg); }
.tool .bs-cell.is-hit { background: color-mix(in srgb, var(--hit) 16%, transparent); }
.tool .bs-cell.is-last.is-hit, .tool .bs-cell.is-last.is-sunkshot { animation: bs-flash .5s var(--ease-out); }
@keyframes bs-flash { 0% { background: color-mix(in srgb, var(--hit) 60%, transparent); } }
.tool .bs-cell.is-pending { cursor: pointer; }
.tool .bs-pill { height: 6px; }
/* Phone, while placing: Ready and Shuffle sit above the grid so they are on the first screen */
@media (max-width: 899px) {
  .tool.duel-g-bs[data-phase="place"] > .duel-seg, .tool.duel-g-bs[data-phase="place"] > .duel-strip, .tool.duel-g-bs[data-phase="place"] > .duel-status { order: -2; }
  .tool.duel-g-bs[data-phase="place"] > .duel-actions, .tool.duel-g-bs[data-phase="place"] > .duel-ask { order: -1; }
}
@media (prefers-reduced-motion: reduce) { .tool .bs-cell.is-last { animation: none !important; } }
.tool .bs-place-side { display: flex; flex-direction: column; gap: 12px; }
.tool .bs-place-side .duel-actions { flex-direction: column; }
.tool .bs-place-side .duel-actions .btn { width: 100%; justify-content: center; }
.tool .bs-place-side .duel-opts { flex-direction: column; align-items: flex-start; }
.tool .duel-actions .is-danger { color: #C2410C; }
@media (prefers-color-scheme: dark) { .tool .duel-actions .is-danger { color: #FDBA74; } }
.tool .bs-cell.is-miss .bs-mark { background: rgb(var(--ink) / .45); }
/* Round 7: one-line board label (name left, hits right), a two-line status, the last shot of each side ringed in its color */
.tool .bs-grid-t { display: flex; justify-content: space-between; gap: 8px; white-space: nowrap; }
.tool .bs-grid-t > span:first-child { overflow: hidden; text-overflow: ellipsis; }
.tool .bs-grid-n { font-variant-numeric: tabular-nums; color: rgb(var(--ink) / .7); }
.tool .duel-status .bs-status-b { display: block; margin-top: 2px; font-weight: 950; }
.tool .duel-status.bs-two-line:not(:empty) { line-height: 20px; }
.tool .bs-cell.is-last { box-shadow: inset 0 0 0 2px var(--hit); }
.tool .bs-target .bs-cell.is-ship.is-sunk::before { background: color-mix(in srgb, var(--hit) 34%, transparent); box-shadow: 0 0 0 1.5px var(--hit); }
/* Sunk toast over the boards */
.tool .bs-stage { position: relative; }
.tool .bs-toast { position: absolute; left: 50%; top: 38%; z-index: 5; transform: translate(-50%, -50%) scale(.9); opacity: 0; pointer-events: none;
  padding: 12px 20px; border-radius: 999px; background: rgb(var(--ink)); color: var(--bg); font-size: 16px; font-weight: 950; white-space: nowrap;
  box-shadow: var(--shadow); transition: opacity .2s ease, transform .25s var(--ease-out); }
.tool .bs-toast.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
/* In-app browser warning, above the board */
.tool .bs-inapp { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border-radius: 16px; background: rgb(var(--p1) / .16); }
.tool .bs-inapp[hidden] { display: none; }
.tool .bs-inapp p { flex: 1 1 200px; font-size: 14px; line-height: 19px; font-weight: 800; color: rgb(var(--ink)); }
.tool .bs-inapp .btn { min-height: 44px; }
/* Phone, while placing: the main button and Shuffle share one row, so the whole fleet fits on the first screen */
@media (max-width: 899px) {
  .tool.duel-g-bs[data-phase="place"] > .duel-actions { flex-wrap: nowrap; }
  .tool.duel-g-bs[data-phase="place"] > .duel-actions .duel-primary { flex: 1.7 1 0; min-width: 0; padding: 0 12px; white-space: nowrap; }
  .tool.duel-g-bs[data-phase="place"] > .duel-actions .duel-icon-btn { flex: 1 1 0; }
}
/* Desktop, while placing: names and status sit in the side column, so the full board is on the first screen */
.tool .bs-place-side .duel-strip { grid-template-columns: 1fr; gap: 6px; margin-top: 0; }
.tool .bs-place-side .duel-draws { display: none; }
.tool .bs-place-side .duel-status { text-align: left; }
@media (prefers-reduced-motion: reduce) { .tool .bs-toast { transition: none; } }
.tool .bs-place-side .duel-player.p1 { flex-direction: row-reverse; justify-content: flex-end; }
.tool .bs-place-side .duel-player.p1 .bs-who { align-items: flex-start; }
.tool .bs-place-side .duel-player.p1 .duel-name { text-align: left; }
.tool .bs-place-side .duel-player.p1 .duel-score-n { margin: 0 0 0 auto; }
.tool .bs-place-side .duel-status { text-wrap: pretty; }
.tool.duel-g-bs[data-phase="place"] > .bs-inapp { order: -2; }
.tool.duel-g-bs.bs-act-top > .duel-seg, .tool.duel-g-bs.bs-act-top > .bs-inapp, .tool.duel-g-bs.bs-act-top > .duel-strip, .tool.duel-g-bs.bs-act-top > .duel-status { order: -2; }
.tool.duel-g-bs.bs-act-top > .duel-actions { order: -1; }
.tool .bs-board > .bs-grid-t { max-width: 460px; }
@media (min-width: 900px) { .tool .bs-stage.is-two .bs-board-mine > .bs-grid-t { max-width: none; } }