.fs{--fs-water: color-mix(in srgb, var(--p3) 9%, var(--cell));--fs-water-2: color-mix(in srgb, var(--p3) 16%, var(--cell));--fs-hull: color-mix(in srgb, var(--cell-strong) 85%, var(--surface));display:grid;gap:10px;width:100%}.fs-boards{display:grid;gap:16px;justify-items:center}.fs-panel{width:100%;max-width:440px;display:grid;gap:8px;justify-items:center}.fs:not(.fs-placing) .fs-mine{max-width:340px}@media (min-width: 860px){.fs:not(.fs-placing) .fs-boards{grid-template-columns:1.15fr 1fr;align-items:start}.fs:not(.fs-placing) .fs-mine{max-width:400px}}.fs-title{margin:0;font-size:1rem;font-weight:700}.fs-grid{display:grid;grid-template-columns:1.3em repeat(10,1fr);gap:2px;width:100%;padding:4px;border-radius:var(--radius-sm);background:var(--surface-2);touch-action:manipulation}.fs-placing .fs-grid-mine{touch-action:none}.fs-lab{display:grid;place-items:center;font-size:clamp(.6rem,2.2vw,.78rem);font-weight:700;color:var(--muted);min-height:1.3em}.fs-cell{position:relative;aspect-ratio:1;min-width:0;padding:0;margin:0;border:0;border-radius:3px;background:var(--fs-water);font:inherit;color:var(--text);cursor:default}.fs-cell:nth-child(odd){background:var(--fs-water-2)}.fs-cell:disabled{cursor:default}.fs-grid-enemy.fs-armed .fs-cell:not(:disabled){cursor:crosshair}.fs-grid-enemy.fs-armed .fs-cell:not(:disabled):hover{background:var(--accent-soft);box-shadow:inset 0 0 0 2px var(--accent)}.fs-interactive .fs-cell{cursor:pointer}.fs-cell.fs-ship{background:var(--fs-hull);border-radius:0}.fs-cell.fs-ship.fs-h.fs-start{border-radius:40% 4px 4px 40%}.fs-cell.fs-ship.fs-h.fs-end{border-radius:4px 40% 40% 4px}.fs-cell.fs-ship.fs-v.fs-start{border-radius:40% 40% 4px 4px}.fs-cell.fs-ship.fs-v.fs-end{border-radius:4px 4px 40% 40%}.fs-cell.fs-ship:before{content:"";position:absolute;inset:34%;border-radius:50%;background:#ffffff38}.fs-cell.fs-ship.fs-ghost{background:transparent;box-shadow:inset 0 0 0 2px var(--fs-hull)}.fs-cell.fs-ship.fs-ghost:before{display:none}.fs-cell.fs-prev-ok{background:color-mix(in srgb,var(--good) 55%,var(--cell))}.fs-cell.fs-prev-bad{background:color-mix(in srgb,var(--danger) 55%,var(--cell))}.fs-cell.fs-prev-bad:after{content:"✕";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-weight:800;font-size:.8em}.fs-cell.fs-cursor{outline:3px solid var(--focus);outline-offset:-1px;z-index:1}.fs-cell.fs-miss:after{content:"";position:absolute;left:50%;top:50%;width:26%;height:26%;transform:translate(-50%,-50%);border-radius:50%;background:var(--muted)}.fs-cell.fs-hit{background:color-mix(in srgb,var(--bad) 80%,var(--cell))}.fs-cell.fs-sunk{background:color-mix(in srgb,var(--bad) 45%,var(--cell-strong))}.fs-cell.fs-hit:after,.fs-cell.fs-sunk:after{content:"✕";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-weight:900;font-size:clamp(.75rem,3.4vw,1.2rem);line-height:1}.fs-cell.fs-ship.fs-hit:before,.fs-cell.fs-ship.fs-sunk:before{display:none}.fs-cell.fs-lastshot{box-shadow:0 0 0 2px var(--focus);z-index:1;animation:fs-splash .4s ease-out}@keyframes fs-splash{0%{transform:scale(1.35)}}.fs-fleet{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 10px;font-size:.78rem;color:var(--muted)}.fs-stat{display:inline-flex;align-items:center;gap:4px}.fs-pips{display:inline-flex;gap:2px}.fs-pips i{width:7px;height:7px;border-radius:2px;background:var(--fs-hull)}.fs-stat-sunk{text-decoration:line-through;opacity:.6}.fs-stat-sunk .fs-pips i{background:var(--bad)}.fs-tray{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;width:100%}.fs-tray-ship{appearance:none;display:grid;gap:4px;justify-items:start;padding:6px 10px;border-radius:var(--radius-sm);border:2px solid var(--border);background:var(--surface);color:var(--text);font:inherit;cursor:grab;touch-action:none}.fs-tray-ship.fs-selected{border-color:var(--accent);background:var(--accent-soft)}.fs-tray-ship.fs-placed{opacity:.55}.fs-tray-hull{display:flex;gap:2px}.fs-tray-hull i{width:14px;height:14px;background:var(--fs-hull);border-radius:2px}.fs-tray-hull i:first-child{border-radius:50% 2px 2px 50%}.fs-tray-hull i:last-child{border-radius:2px 50% 50% 2px}.fs-tray-name{font-size:.78rem;font-weight:600}.fs-placebar{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}.fs-help{margin:0;text-align:center}@media (max-width: 400px){.fs-tray-ship{padding:4px 6px}.fs-tray-hull i{width:10px;height:10px}.fs-grid{padding:2px;gap:1px}}