:root{--accent:#2f6f9f}
.sb{gap:18px;padding:10px;flex-wrap:wrap;align-content:center;background:#e4eef5;overflow:auto}
.sb section{display:flex;flex-direction:column;align-items:center;gap:6px}
.sb h2{margin:0;font-size:15px;letter-spacing:.03em}
.grid{display:grid;grid-template-columns:repeat(10,var(--s));gap:2px;padding:4px;background:#7fb0d3;border:2px solid var(--ink);border-radius:10px}
.sq{width:var(--s);height:var(--s);border:0;border-radius:4px;background:#bcd8ec;padding:0;cursor:pointer;position:relative}
.sq.ship{background:#5f6f78}.sq.ghost{background:#9fd3a8}.sq.bad{background:#f2a39a}
.sq.miss::after{content:"";position:absolute;inset:35%;border-radius:50%;background:#fff}
.sq.hit{background:#e2584a}.sq.hit::after{content:"✕";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-weight:900;font-size:calc(var(--s)*0.6)}
.sq.sunk{background:#8c2d24}
#enemy .sq:not(.hit):not(.miss):hover{background:#d3e7f5}
#enemy.locked .sq{cursor:default}