.battleship__boards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr));gap:1.5rem;margin-block:1rem}.battleship__boards h3{text-align:center;margin:.4rem}.battleship__grid{display:grid;grid-template-columns:repeat(var(--battleship-size,9),minmax(1.55rem,2.5rem));gap:2px;width:max-content;max-width:100%;margin:.5rem auto;padding:.4rem;border:1px solid var(--line,#cbd5e1);border-radius:.7rem;background:#e8f0f4}.battleship__coordinate{display:grid;place-items:center;min-width:0;color:#334155;font-size:.8rem;font-weight:700;font-variant-numeric:tabular-nums}.battleship__cell{display:grid;place-items:center;width:clamp(1.55rem,7vw,2.5rem);aspect-ratio:1;padding:0;border:1px solid #8ba1af;border-radius:.2rem;background:#fff;color:#172033;font-size:1.1rem;font-weight:800;cursor:pointer}.battleship__cell:not(:disabled):hover{background:#e1f1f8}.battleship__cell.is-ship{background:#9aa9b1;color:#172033}.battleship__cell.is-hit{background:#f5b8a8;color:#812d1d}.battleship__cell.is-miss{background:#d7e7ed;color:#345b6a}.battleship__cell:disabled{cursor:default}.battleship__cell:focus-visible{outline:3px solid #1769ff;outline-offset:1px;z-index:1}.battleship__actions{display:flex;justify-content:center}