#board{display:grid;grid-template-columns:repeat(6,minmax(44px,1fr));gap:0;width:100%;aspect-ratio:1;max-width:420px;margin:auto}
.ship-tile{min-width:44px;min-height:44px;width:100%;height:100%;font-size:1.8rem;line-height:1;padding:0;border:1px solid #64748b;border-radius:0;touch-action:manipulation}
.ship-tile.ship{background:#0f172a;color:#fff}.ship-tile.water{background:#fff;color:#0f172a}.ship-tile.unknown{background:var(--surface);color:var(--muted)}
.ship-tile.selected{outline:2px solid #3b82f6;outline-offset:-5px}.ship-tile.error{text-decoration:underline wavy var(--error)}.ship-tile:disabled{opacity:1}
.mark-controls,.play-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}.mark-controls button,.play-actions button{min-height:44px}.mark-controls button{font-size:1.2rem}
#save-notice:empty{display:none}

.board-shell{display:grid;grid-template-columns:20px minmax(264px,1fr);grid-template-rows:20px auto;max-width:420px;margin:auto}#cols{display:grid;grid-template-columns:repeat(6,1fr)}#rows{display:grid;grid-template-rows:repeat(6,1fr)}#cols span,#rows span{display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:700}.count-error{color:var(--error)}#fleet{text-align:center;font-size:.85rem;margin:4px 0 8px}.ship-tile.fixed{font-weight:900;text-decoration:underline;text-underline-offset:5px}.ship-tile.water{background:var(--surface);color:var(--text)}