.stage{max-width:640px;margin-inline:auto}
.turnbar{--tb-msg-lines:3;--tb-st-lines:2}
.turnbar .message{height:calc(var(--tb-msg-lines)*1lh);overflow-y:auto}
.field select{max-width:100%}
.board-wrap{position:relative;border:1px solid var(--line-strong);border-radius:6px;padding:8px;background:var(--surface)}
#board{display:block;width:100%;touch-action:manipulation;outline-offset:2px}
.sea-cell{fill:var(--surface);stroke:var(--line-strong);stroke-width:1}
.coord{font:700 21px system-ui;fill:var(--ink);text-anchor:middle}
.ship path{fill:#D5E7E4;stroke:#285E58;stroke-width:2}
.ship rect{fill:#285E58}
.ship text{fill:white;font:700 20px system-ui;text-anchor:middle}
.water-mark{fill:none;stroke:var(--accent);stroke-width:3}
.hit-mark rect{fill:var(--surface);stroke:var(--warn);stroke-width:3}
.hit-mark path{fill:none;stroke:var(--warn);stroke-width:4}
.hit-mark.sunk rect{fill:var(--ink)}
.hit-mark.sunk path{stroke:var(--surface)}
.preview{fill:#7FA8D144;stroke:var(--accent);stroke-width:2;pointer-events:none}
.preview.invalid{fill:#E0706A33;stroke:var(--ng)}
.selected-cell{fill:var(--accent);stroke:var(--ink);stroke-width:2}
.queue-num{fill:var(--surface);font:700 20px system-ui;text-anchor:middle;pointer-events:none}
.cursor-cell{fill:none;stroke:var(--accent);stroke-width:3;stroke-dasharray:5 3;pointer-events:none}
.ship,.water-mark,.hit-mark{pointer-events:none}
.tabs{display:flex;gap:8px;margin:8px 0}
.tabs .btn{flex:1}
.tabs [aria-pressed=true]{border:3px solid var(--accent)}
.fleet-list{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.fleet-list .btn{min-width:60px}
.fleet-list [aria-pressed=true]{outline:3px solid var(--accent);outline-offset:1px}
.fleet-list .placed::after{content:' ✓'}
.coordinate-controls{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:12px 0}
.coordinate-controls select{min-height:44px;font-size:17px;min-width:60px}
.coordinate-controls .btn{min-height:44px}
.legend{display:flex;flex-wrap:wrap;gap:12px;margin:8px 0;font-size:14px}
.fleet-summary{min-height:1.75em;margin:8px 0}
.privacy-shield{position:absolute;inset:0;z-index:4;background:var(--surface);display:flex;justify-content:center;align-items:center;text-align:center;padding:24px}
.privacy-shield[hidden]{display:none}
.privacy-shield>div{max-width:420px}
.privacy-shield h2{font-size:22px}
.privacy-shield .btn{margin:8px}
.game-actions{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.result-panel{border:2px solid var(--accent);padding:16px;margin:16px 0;border-radius:6px}
.result-panel h2{margin:0 0 8px;font-size:24px}
.article{max-width:800px;margin:32px auto}
.article p{line-height:1.9}
.article table{border-collapse:collapse;width:100%;table-layout:fixed}
.article th,.article td{border:1px solid var(--line);padding:8px;overflow-wrap:anywhere}
.article figure{margin:24px 0}
.article img{max-width:100%;height:auto;display:block;margin:auto}
#record{font-size:14px;min-height:24px}
button,select{touch-action:manipulation}
.board-title{font-size:18px;margin:8px 0}
.help-short{font-size:14px;margin:8px 0;line-height:1.65}
.privacy-active .board-ui{visibility:hidden}
.board-wrap.busy{border-color:var(--warn)}
@media(min-width:641px){.turnbar{--tb-msg-lines:2}
}
@media(max-width:480px){.wrap{padding-inline:12px}
.board-wrap{padding:4px}
.game-title{font-size:26px}
.game-actions .btn{padding-inline:12px}
.tabs .btn{font-size:16px}
.coordinate-controls{gap:8px}
.coordinate-controls label{font-size:14px}
}
:root:lang(en) .turnbar{--tb-msg-lines:4}
@media(min-width:375px){:root:lang(en) .turnbar{--tb-msg-lines:3}
}
@media(min-width:641px){:root:lang(en) .turnbar{--tb-msg-lines:2}
}


.field select{font:inherit;font-size:16px;min-height:44px;padding:6px 28px 6px 8px;border:1px solid var(--line-strong);border-radius:6px;background:var(--surface);color:var(--ink)}
.fleet-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.fleet-list .btn{min-width:0;min-height:62px;padding:6px 4px;display:flex;flex-direction:column;gap:4px;align-items:center;font-size:16px}.fleet-list svg{width:100%;max-width:70px;height:22px;fill:#d5e7e4;stroke:#285e58;stroke-width:1.5}.fleet-list svg rect{fill:#285e58;stroke:none}.fleet-list .placed::after{content:'✓';position:absolute;right:4px;top:3px;font-size:12px}.fleet-list .placed{position:relative;background:var(--bg)}.fleet-list [aria-pressed=true]{outline:none;border:2px solid var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.board-title{border-left:5px solid var(--accent);padding:4px 8px;margin:12px 0 4px}.fleet-summary{margin:4px 0;min-height:1.75em}.board-wrap{max-width:520px;margin:auto}.board-wrap[data-phase=deploy]{border-color:#285e58;background:#e9f2ee}.board-wrap[data-phase=own]{background:#e9f2ee}.board-wrap[data-phase=target]{background:#e5eef6}.board-wrap .sea-cell{fill:var(--surface)}.coord{font-size:24px}.candidate-note{font-size:16px;line-height:1.5;min-height:3em;display:flex;align-items:center;margin:8px 0}.candidate-note.invalid{color:var(--ng)}#primary-actions{margin:8px 0;gap:8px}#primary-actions .btn{min-height:44px;font-size:16px}#commit,#next{flex-grow:1}.last-search{font-size:16px;line-height:1.5;margin:12px 0;padding:8px 12px;border-left:4px solid var(--accent);background:var(--surface);max-height:7em;overflow:auto}
.fine-controls,.arrange-tools,.utility-tools{margin:8px 0}.fine-controls summary,.arrange-tools summary,.utility-tools summary{min-height:44px;display:flex;align-items:center;gap:8px;cursor:pointer;font-size:16px}.fine-controls summary::before,.arrange-tools summary::before,.utility-tools summary::before{content:'▸'}details[open]>summary::before{content:'▾'}.arrange-tools>.controls{margin:4px 0}.coordinate-controls{margin:4px 0}.legend{font-size:14px}.privacy-active .board-ui{visibility:hidden}.result-panel .controls{gap:8px}.article .howto-shot{position:relative;max-width:390px;margin:auto}.article .howto-shot img{display:block;width:100%;height:auto}.howto-shot>svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.article figcaption{font-size:16px;line-height:1.65}.hit-mark.sunk rect{fill:var(--ink)}
@media(max-width:640px){.stage{max-width:100%}.board-wrap{padding:4px}.candidate-note{font-size:16px;min-height:4.5em}.board-title{font-size:17px}.fleet-list{gap:8px}.fleet-list .btn{font-size:16px}#primary-actions #rotate{flex-grow:1}#primary-actions #choose-cell{flex-grow:1}.arrange-tools summary{font-size:14px}}
.selected-cell,.queue-num{pointer-events:none}
@media(prefers-color-scheme:dark){.board-wrap[data-phase=deploy],.board-wrap[data-phase=own],.board-wrap[data-phase=target]{background:var(--surface)}}