.bs{--vh:100vh;display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;max-width:440px;touch-action:manipulation;
  --bs-sea:#d8e6ee;--bs-wave:#c2d6e2;--bs-grid:#b6ccd9;--bs-deep:#a6c2d3;--bs-foam:#fff;--bs-miss:#6f8fa4;--bs-smoke:#4d4640;--bs-chip:#2c2723}
@supports (height:100dvh){.bs{--vh:100dvh}}
:root[data-theme=dark] .bs{--bs-sea:#16242d;--bs-wave:#1f323d;--bs-grid:#2a414e;--bs-deep:#0d181f;--bs-foam:#d6e7f0;--bs-miss:#7c9cb0;--bs-smoke:#0f0e0d;--bs-chip:#0f0e0d}
.bs-play{--room:calc(var(--vh) - 152px - env(safe-area-inset-top) - env(safe-area-inset-bottom));animation:bs-in .3s ease-out}
.bs-place{--room:calc(var(--vh) - 240px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}
@keyframes bs-in{from{opacity:0}}

.bs-blk{display:flex;flex-direction:column;gap:4px}
.bs-play .bs-blk{width:min(100%,calc(var(--room) * .69))}
.bs-place .bs-blk{width:min(100%,var(--room))}
.bs-cap{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:11px;line-height:14px;font-weight:600;color:var(--color-muted)}
.bs-cap b{font-weight:700;color:var(--color-ink)}
.bs-dock{display:flex;align-items:center;justify-content:center;gap:12px;width:100%}
.bs-dock .bs-board{width:min(45%,calc(var(--room) * .3));padding:2px;border-width:1.5px;border-radius:var(--radius-lg)}
.bs-dock .bs-sea{border-radius:calc(var(--radius-lg) - 3px)}
.bs-dock .bs-fxs{inset:2px}
.bs-dock-info{display:flex;flex-direction:column;gap:2px;font-size:12px;line-height:16px;color:var(--color-muted)}
.bs-dock-info b{font-size:13px;color:var(--color-ink)}

.bs-board{position:relative;width:100%;aspect-ratio:1;padding:3px;background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-xl);transition:border-color .15s}
.bs-board.is-turn{border-color:var(--me)}
.bs-board.is-open .bs-sea{cursor:pointer}
.bs-sea{position:relative;width:100%;height:100%;overflow:hidden;border-radius:calc(var(--radius-xl) - 4px);background:var(--bs-sea)}
.bs-water,.bs-ships,.bs-marks{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.bs-w-wave{fill:none;stroke:var(--bs-wave);stroke-width:1.6;stroke-linecap:round}
.bs-w-grid{fill:none;stroke:var(--bs-grid);stroke-width:1px;vector-effect:non-scaling-stroke;shape-rendering:crispEdges}
.bs-fxs{position:absolute;inset:3px;z-index:2;pointer-events:none}
.bs-cell,.bs-ship{position:absolute;left:calc(var(--c) * 100% / var(--n));top:calc(var(--r) * 100% / var(--n));width:calc(var(--w,1) * 100% / var(--n));height:calc(var(--h,1) * 100% / var(--n));pointer-events:none}
.bs-cell>svg,.bs-ship>svg{position:absolute;inset:0;display:block;width:100%;height:100%}

/* Палитры рисунка: свой флот, флот соперника, корабль под водой, недопустимое место. */
.bs-art{overflow:visible}
.bs-art.is-own{--hull:#e2639f;--deck:#f6bcd7;--line:#9c1a5d;--top:#fff6fa;--gun:#9c1a5d;--dark:#6e1042}
.bs-art.is-foe{--hull:#8d877f;--deck:#c9c3bb;--line:#25221e;--top:#f3f0ec;--gun:#3a3531;--dark:#25221e}
.bs-art.is-wreck{--hull:#a6bccb;--deck:#b3c7d4;--line:#7d99ac;--top:#bfd1dc;--gun:#8aa4b5;--dark:#7d99ac;--wash:#d8e6ee}
.bs-art.is-bad{--hull:var(--color-danger-soft);--deck:var(--color-danger-soft);--line:var(--color-danger);--top:var(--color-danger-soft);--gun:var(--color-danger);--dark:var(--color-danger)}
:root[data-theme=dark] .bs-art.is-own{--hull:#c94486;--deck:#e580b0;--line:#5c1239;--top:#fde4ef;--gun:#5c1239;--dark:#3d0b25}
:root[data-theme=dark] .bs-art.is-foe{--hull:#9a938a;--deck:#c4bdb3;--line:#2b2825;--top:#ebe6df;--gun:#3a3632;--dark:#2b2825}
:root[data-theme=dark] .bs-art.is-wreck{--hull:#2b4351;--deck:#324c5b;--line:#46667a;--top:#3a5565;--gun:#3f5d6f;--dark:#46667a;--wash:#16242d}
.bs-a-hull{fill:var(--hull);stroke:var(--line);stroke-width:2;stroke-linejoin:round}
.bs-a-deck{fill:var(--deck)}
.bs-a-top{fill:var(--top);stroke:var(--line);stroke-width:1.2}
.bs-a-gun{fill:var(--gun)}
.bs-a-dark{fill:var(--dark)}
.bs-a-barrel{fill:none;stroke:var(--gun);stroke-width:2;stroke-linecap:round}
.bs-a-line{fill:none;stroke:var(--line);stroke-width:1.2;stroke-linecap:round}
.bs-a-dash{stroke-dasharray:7 5}
.bs-a-plane{fill:none;stroke:var(--gun);stroke-width:1.7;stroke-linecap:round}
.bs-a-wash{display:none;fill:none;stroke:var(--wash);stroke-width:1.8;stroke-linecap:round}
.bs-art.is-wreck .bs-a-wash{display:block}
.bs-dock .bs-a-hull{stroke-width:3}
.bs-dock .bs-a-line,.bs-dock .bs-a-plane{display:none}

.bs-ship.is-wreck{transform:rotate(var(--tilt)) scale(.93)}
.bs-ship.is-plop{animation:bs-plop .36s cubic-bezier(.3,1.5,.5,1) backwards;animation-delay:calc(var(--q,0) * 55ms)}
.bs-ship.is-plop::after{content:"";position:absolute;inset:3px;border:2px solid var(--bs-foam);border-radius:999px;opacity:0;animation:bs-plop-ring .5s ease-out backwards;animation-delay:calc(var(--q,0) * 55ms + 60ms)}
@keyframes bs-plop{from{transform:scale(1.22);opacity:0}}
@keyframes bs-plop-ring{from{inset:3px;opacity:.95}to{inset:-8px;opacity:0}}
.bs-ship.is-bad{animation:bs-bad .3s ease-out}
@keyframes bs-bad{0%{transform:translateX(0)}25%{transform:translateX(-3px)}60%{transform:translateX(3px)}100%{transform:translateX(0)}}
.bs-ship.is-sinking{animation:bs-sink 1.4s ease-in both}
.bs-ship.is-sinking .bs-afloat{animation:bs-drown 1.4s ease-in both}
.bs-ship.is-reveal{animation:bs-emerge .5s ease-out backwards;animation-delay:calc(.7s + var(--q,0) * 110ms)}
@keyframes bs-sink{0%{transform:none}22%{transform:rotate(calc(var(--tilt) * -.6)) scale(1.03)}100%{transform:rotate(var(--tilt)) scale(.93)}}
@keyframes bs-drown{0%,35%{opacity:1}100%{opacity:0}}
@keyframes bs-emerge{from{opacity:0}}

.bs-m-ring{fill:none;stroke:var(--bs-foam);stroke-width:2.5}
.bs-m-dot{fill:var(--bs-miss)}
.bs-m-x{fill:none;stroke:var(--foe);stroke-width:3.6;stroke-linecap:round}
[data-board=foe] .bs-m-x{stroke:var(--me)}
.bs-mark.is-new{animation:bs-pop .3s ease-out}
.bs-mark.is-late{animation:bs-emerge .3s ease-out .9s backwards}
@keyframes bs-pop{from{opacity:0;transform:scale(.4)}}
.bs-cell>.bs-plate{display:none}
[data-board=foe]:not(.is-bare) .bs-cell>.bs-plate{display:block}
.bs-plate rect{fill:#a59f97;stroke:#4a443e;stroke-width:1.6}
.bs-scorch path{fill:#221d1a;opacity:.5}
.bs-f-out{fill:#ee5a24}
.bs-f-in{fill:#ffc93c}
.bs-cell>.bs-flame{transform-origin:50% 82%;animation:bs-flick .62s ease-in-out infinite alternate;animation-delay:calc(var(--k) * -170ms)}
.bs-cell>.bs-flame-core{animation-duration:.41s;animation-direction:alternate-reverse}
@keyframes bs-flick{from{transform:scale(1.04,.94) rotate(-3deg)}to{transform:scale(.92,1.1) rotate(3deg)}}
.bs-smoke{position:absolute;left:34%;top:4%;width:32%;height:32%;border-radius:50%;background:var(--bs-smoke);opacity:0;animation:bs-smoke 2.2s linear infinite;animation-delay:calc(var(--k) * -310ms)}
@keyframes bs-smoke{0%{transform:translate(0,40%) scale(.5);opacity:0}25%{opacity:.4}100%{transform:translate(45%,-170%) scale(1.5);opacity:0}}
.bs-dock .bs-smoke{display:none}

.bs-hover{background:var(--me);opacity:.16}
.bs-last{border:2px solid var(--color-ink);border-radius:4px}
.bs-dock .bs-last{border-width:1.5px;border-radius:2px}
.bs-aim svg{fill:none;stroke:var(--me);stroke-width:2.5;stroke-linecap:round;animation:bs-aim .5s ease-in-out infinite alternate}
@keyframes bs-aim{from{transform:scale(.8)}to{transform:scale(1)}}

.bs-fx i{position:absolute;border-radius:50%;opacity:0;will-change:transform,opacity}
.bs-fx-ring{border:2px solid var(--bs-foam)}
.bs-fx-wake{border-color:var(--bs-miss)}
.bs-fx-dip{background:var(--bs-deep)}
.bs-fx-foam{background:var(--bs-foam);box-shadow:0 0 0 1px var(--bs-miss)}
.bs-fx-shock{border:2px solid #fff3c2}
.bs-fx-flash{background:#fff3c2}
.bs-fx-fire{background:#f2702a}
.bs-fx-core{background:#ffd04f}
.bs-fx-smoke{background:var(--bs-smoke)}
.bs-fx .bs-fx-chip{background:var(--bs-chip);border-radius:20%}
.bs-shell{border-radius:50% 50% 30% 30%/70% 70% 20% 20%;background:#2c2723;box-shadow:inset 0 -3px 0 #d99a00}
.bs-shell-shade{border-radius:50%;background:#171512}
:root[data-theme=dark] .bs-shell{background:#d9d3ca}

.bs-tray{display:flex;justify-content:center;gap:6px;width:100%}
.bs-chip{display:flex;align-items:center;flex:none;height:40px;padding:0 7px;font:inherit;background:var(--color-surface);border:1.5px solid var(--color-line);border-radius:var(--radius-lg);cursor:pointer;touch-action:manipulation}
.bs-chip span{display:block;width:calc(var(--len) * 15px);height:15px}
.bs-chip .bs-art{display:block;width:100%;height:100%}
.bs-chip .bs-a-line,.bs-chip .bs-a-plane{display:none}
.bs-chip.is-put .bs-art{opacity:.3;filter:grayscale(1)}
.bs-chip.is-sel{border-color:var(--color-ink);background:var(--color-signal-faint)}
.bs-chip:disabled{cursor:default}
.bs-tray.is-wide{gap:4px}
.bs-tray.is-wide .bs-chip span{width:calc(var(--len) * 13px);height:13px}
.bs-btns{display:flex;gap:6px;width:100%}
.bs-btns .btn{flex:1;min-height:40px;padding:8px 6px}
.bs-btns .btn.primary{flex:1.2}
.bs-wait{display:flex;align-items:center;justify-content:center;height:40px;width:100%;font-size:14px;font-weight:600;color:var(--color-muted)}
.bs .stage-note{line-height:14px}

@media (prefers-reduced-motion:reduce){
  .bs-play,.bs-cell>.bs-flame,.bs-aim svg,.bs-ship.is-bad{animation:none}
  .bs-smoke{display:none}
}