/* Submarine hunt. Layout, toggles, boards and charts come from battleship.css. */

.sub-board-wrap { position: relative; max-width: 620px; margin: 10px auto 0; overflow: hidden; border-radius: 6px; }
.sub-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.sub-overlay .ring { fill: none; stroke: var(--ink); stroke-width: 2; stroke-dasharray: 6 5; opacity: .8; }
.sub-overlay .ring-band { fill: none; stroke: rgba(57, 135, 229, .13); }
.sub-overlay .path { fill: none; stroke: var(--gold); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.sub-overlay .sub { fill: var(--gold); stroke: var(--felt-0); stroke-width: 2; }
.sub-overlay .start { fill: none; stroke: var(--gold); stroke-width: 2; }

.bs-cell.pinged::after { content: "\25CE"; font-size: 1.3em; color: var(--ink); }
.bs-cell.charged { box-shadow: inset 0 0 0 2px var(--hot); }
.bs-cell.charged::after { content: "\2715"; color: var(--hot); font-size: 1.1em; }
.bs-cell.found { background: var(--gold) !important; color: #2b1f06; }
.bs-cell.found::after { content: "\2605"; font-size: 1.2em; }

.sub-quad { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 560px) { .sub-quad { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sub-quad figure { margin: 0; min-width: 0; }
.sub-quad figcaption { font-size: 13px; font-weight: 650; margin-bottom: 6px; line-height: 1.25; }
.sub-quad figcaption small { display: block; font-weight: 400; color: var(--ink-dim); font-size: 11px; }

.sub-small { font-size: 13px; margin: 6px 0 8px; line-height: 1.45; }