.bs-wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; width: 100%; }
.bs-side { display: flex; flex-direction: column; gap: 8px; width: min(100%, 360px); }
.bs-grid { display: grid; grid-template-columns: 18px repeat(10, 1fr); gap: 2px; }
.bs-h { display: grid; place-items: center; font-size: 11px; color: var(--faint); }
.bs-sq { aspect-ratio: 1; border-radius: 4px; background: color-mix(in srgb, var(--blue) 14%, var(--panel)); border: 1px solid var(--panel-line); padding: 0; display: grid; place-items: center; font: inherit; }
button.bs-sq { cursor: crosshair; }
button.bs-sq:hover { background: color-mix(in srgb, var(--blue) 35%, var(--panel)); }
button.bs-sq:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.bs-sq.ship { background: var(--dot-off); }
.bs-sq.sunk { background: color-mix(in srgb, var(--red) 40%, var(--chip)); }
.bs-sq i { display: block; border-radius: 50%; }
.bs-sq.miss i { width: 28%; height: 28%; background: var(--faint); }
.bs-sq.hit i { width: 52%; height: 52%; background: var(--red); }
.bs-fleet { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; color: var(--dim); }
.bs-fleet .faint { letter-spacing: -1px; font-size: 10px; }
.bs-fleet .gone { text-decoration: line-through; color: var(--faint); }