/* Statki: two 10×10 boards. Water, ships and shot colours belong to the game; interface colours come from theme.css. */
.eg-game:has(#eg-surface.sh-surface){max-width:880px}
#eg-surface.sh-surface{touch-action:manipulation}
.sh-head{margin:6px 0 10px;font-size:13px;color:var(--ink-2)}
.sh-boards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:14px 22px;align-items:start;margin:0 auto}
.sh-boards.sh-single{max-width:440px}
.sh-side{min-width:0}
.sh-side h3{margin:0 0 6px;font-size:14px;color:var(--ink)}
.sh-board{display:grid;grid-template-columns:minmax(12px,.55fr) repeat(10,minmax(0,1fr));gap:2px;width:100%;max-width:430px;margin:0 auto;padding:6px;box-sizing:border-box;border-radius:12px;background:#c9ddee;user-select:none;-webkit-user-select:none}
.sh-label{display:grid;place-items:center;min-width:0;font:700 clamp(9px,1.5vw,12px)/1 var(--font);color:#40607e}
.sh-cell{position:relative;display:block;min-width:0;aspect-ratio:1;padding:0;margin:0;border:0;border-radius:3px;background:#eaf3fb;font:inherit;color:inherit}
button.sh-cell{cursor:crosshair;touch-action:manipulation}
.sh-board[data-kind="setup"] button.sh-cell{cursor:pointer}
.sh-cell:focus-visible{outline:3px solid var(--accent-strong);outline-offset:0;z-index:2}
@media(hover:hover){.sh-board[data-kind="enemy"] button.sh-cell[data-state="0"]:hover{background:#cfe3f4}}
/* Miss: a dot; empty water next to a sunk ship: a lighter, smaller dot. */
.sh-cell[data-state="1"]::after,.sh-cell[data-state="4"]::after{content:'';position:absolute;inset:38%;border-radius:50%;background:#4d6b88}
.sh-cell[data-state="4"]{background:#dfe9f2}
.sh-cell[data-state="4"]::after{inset:44%;background:#a5b9cc}
/* Ships, with a rounded bow and stern. */
.sh-ship{background:#56667b}
.sh-faded{background:#a9b6c5}
.sh-cell[data-part="single"]{border-radius:38%}
.sh-cell[data-part="bow"][data-dir="h"]{border-radius:45% 3px 3px 45%}
.sh-cell[data-part="stern"][data-dir="h"]{border-radius:3px 45% 45% 3px}
.sh-cell[data-part="bow"][data-dir="v"]{border-radius:45% 45% 3px 3px}
.sh-cell[data-part="stern"][data-dir="v"]{border-radius:3px 3px 45% 45%}
/* Hit: orange with a cross; sunk: dark red. */
.sh-cell[data-state="2"]{background:#e8590c}
.sh-cell[data-state="3"]{background:#9f2a1d}
.sh-faded[data-state="2"]{background:#e8590c}
.sh-cell[data-state="2"]::after,.sh-cell[data-state="3"]::after{content:'✕';position:absolute;inset:0;display:grid;place-items:center;color:#fff;font:900 clamp(10px,2.3vw,17px)/1 var(--font)}
.sh-last{box-shadow:inset 0 0 0 2px #f6c445,0 0 0 2px #f6c445;z-index:1}
/* Fleet editor: the selected ship and the cells where its bow may go. */
.sh-cell.sh-can:not(.sh-ship){background:#cdeed6}
.sh-ship.sh-selected{background:var(--accent)}
.sh-roster{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 8px;margin:8px 0 0}
.sh-mini{display:flex;gap:2px}
.sh-mini i{display:block;width:8px;height:8px;border-radius:2px;background:#56667b}
.sh-mini.sh-sunk i{background:#9f2a1d;opacity:.35}
.eg-toolbar .sh-primary{background:var(--accent-strong);border-color:var(--accent-strong);color:#fff;font-weight:700}
.eg-toolbar .sh-primary:hover{background:var(--accent-hover)}
@media(max-width:640px){.sh-own .sh-board{max-width:280px}.sh-boards{gap:12px}}