.sb-root{--p0:var(--game);--p1:var(--white);--water:#a6e1ff;--line:#1a1a2e38}.sb-root *{box-sizing:border-box}.sb-toolbar{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.sb-root .ka-bar{align-items:flex-start}.sb-status{max-width:100%}.sb-status>span:not(.kbg-notice){color:var(--ink-2)}.sb-dot{background:var(--p0);border:2px solid var(--ink);width:14px;height:14px;box-shadow:1px 1.5px 0 var(--ink);border-radius:50%;flex:none;display:inline-block}.sb-dot[data-side="1"]{background:var(--p1)}.sb-dot.is-pulse{animation:kbg-pulse .9s var(--ease-spring) infinite}.sb-notice.is-hit{background:var(--cherry);color:var(--white)}.sb-notice.is-miss{background:var(--white)}.sb-notice.is-sunk{background:var(--ink);color:var(--white);border-color:var(--ink)}.sb-rules{flex-wrap:wrap;justify-content:center;gap:6px;display:inline-flex}.sb-rule{background:var(--cream);border:2px solid var(--ink);color:var(--ink-2);border-radius:999px;padding:2px 10px 3px;font-size:13px;font-weight:700}.sb-harbour,.sb-battle{flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:20px 28px;width:100%;display:flex}.sb-side{flex-direction:column;gap:8px;width:min(100%,440px);display:flex}.sb-battle .sb-side.is-mine{width:min(100%,300px)}.sb-harbour{column-gap:24px}.sb-harbour .sb-side{width:min(100%,416px)}.sb-dockwrap{flex-direction:column;gap:12px;width:min(100%,320px);display:flex}.sb-h{font-family:var(--font-display);letter-spacing:-.03em;color:var(--ink);justify-content:space-between;align-items:baseline;gap:8px;margin:0;font-size:20px;font-weight:800;display:flex}.sb-count{font-family:var(--font-body);letter-spacing:0;color:var(--ink-3);font-variant-numeric:tabular-nums;font-size:13px;font-weight:700}.sb-board{grid-template-rows:16px auto;grid-template-columns:16px minmax(0,1fr);gap:3px;width:100%;display:grid}.sb-cols{grid-column:2;grid-template-columns:repeat(10,1fr);display:grid}.sb-rows{grid-area:2/1;grid-template-rows:repeat(10,1fr);display:grid}.sb-cols span,.sb-rows span{font-family:var(--font-display);color:var(--ink-3);place-items:center;font-size:12px;font-weight:800;display:grid}.sb-board.is-small{grid-template-rows:13px auto;grid-template-columns:13px minmax(0,1fr)}.sb-board.is-small .sb-cols span,.sb-board.is-small .sb-rows span{font-size:10px}.sb-grid{aspect-ratio:1;border:var(--edge);background:var(--water);box-shadow:var(--hard);touch-action:manipulation;border-radius:12px;grid-area:2/2;position:relative;container-type:inline-size}.sb-board.is-small .sb-grid{box-shadow:3px 3px 0 var(--ink);border-radius:9px}.sb-grid.is-active{touch-action:none}.sb-cells{border-radius:9.5px;grid-template-rows:repeat(10,1fr);grid-template-columns:repeat(10,1fr);display:grid;position:absolute;inset:0;overflow:hidden}.sb-cell{appearance:none;color:inherit;border:0;border-right:1.5px solid var(--line);border-bottom:1.5px solid var(--line);background:0 0;margin:0;padding:0;transition:background .12s}.sb-cell:nth-child(10n){border-right:0}.sb-cell:nth-child(n+91){border-bottom:0}button.sb-cell{cursor:pointer}button.sb-cell:disabled{cursor:default}.sb-grid.is-active .sb-cell:hover{background:color-mix(in srgb, var(--sun) 45%, var(--water))}.sb-grid.is-live .sb-cell:not(:disabled):hover{background:var(--sun)}.sb-cell:focus-visible{outline:3px solid var(--ink);outline-offset:-3px;z-index:1;border-radius:4px;position:relative}.sb-grid.is-live .sb-cell:not(:disabled):hover:after{content:none}.sb-grid:not(.is-live):not(.is-active){cursor:default}.sb-layer{pointer-events:none;position:absolute;inset:0}.sb-ship,.sb-mark,.sb-water{left:calc(var(--c) * 10%);top:calc(var(--r) * 10%);width:10%;height:10%;position:absolute}.sb-ship[data-dir=h]{width:calc(var(--len) * 10%)}.sb-ship[data-dir=v]{height:calc(var(--len) * 10%)}.sb-ship i,.sb-dockship i,.sb-float i,.sb-fleet i{background:var(--sun);border:2.5px solid var(--ink);box-shadow:.6cqi .8cqi 0 var(--ink);border-radius:999px;justify-content:space-around;align-items:center;display:flex;position:absolute;inset:.9cqi}.sb-ship[data-dir=v] i,.sb-float[data-dir=v] i{flex-direction:column}.sb-ship i b,.sb-dockship i b,.sb-float i b{background:var(--white);border:1.5px solid var(--ink);border-radius:50%;width:1.9cqi;min-width:5px;height:1.9cqi;min-height:5px}.sb-board.is-small .sb-ship i{border-width:2px}.sb-ship.is-placed{pointer-events:auto;cursor:grab;touch-action:none}.sb-ship.is-placed:hover i{box-shadow:.9cqi 1.1cqi 0 var(--ink);transform:translate(-1px,-1px)}.sb-ship.is-placed:focus-visible{outline:none}.sb-ship.is-placed:focus-visible i{outline:3px solid var(--ink);outline-offset:2px}.sb-ship i{transition:transform .14s var(--ease-spring), box-shadow .14s var(--ease-spring), background .2s}.sb-ship.is-placed i{animation:sb-land .24s var(--ease-spring)}@keyframes sb-land{0%{transform:scale(1.08,.9)}}.sb-ship.is-lifted{opacity:.3}.sb-ship.is-nope i,.sb-dockship.is-nope i{animation:.36s sb-nope}@keyframes sb-nope{20%,60%{transform:translate(-4px)}40%,80%{transform:translate(4px)}}.sb-ship.is-ghost i{background:color-mix(in srgb, var(--sun) 55%, transparent);box-shadow:none;border-style:dashed}.sb-ship.is-ghost.is-bad i{background:color-mix(in srgb, var(--cherry) 45%, transparent)}.sb-ship.is-sunk i{background:var(--cream);box-shadow:none;animation:sb-surface .42s var(--ease-spring);border-width:3.5px}.sb-ship.is-sunk i b,.sb-ship.is-reveal i b{display:none}@keyframes sb-surface{0%{opacity:0;transform:scale(.6)}}.sb-ship.is-reveal i{background:color-mix(in srgb, var(--sun) 70%, transparent);box-shadow:none;border-style:dashed}.sb-ship.is-down i{background:var(--cream);box-shadow:none;border-width:3px}.sb-water:after{content:"";background:#1a1a2e47;border-radius:50%;width:16%;height:16%;margin:-8% 0 0 -8%;position:absolute;top:50%;left:50%}.sb-mark{z-index:2;place-items:center;display:grid}.sb-mark svg{width:92%;height:92%;overflow:visible}.sb-mark.is-miss svg{animation:sb-splash .36s var(--ease-spring) backwards}.sb-mark.is-hit svg{animation:sb-burst .42s var(--ease-squish) backwards}@keyframes sb-splash{0%{opacity:0;transform:scale(.2)}}@keyframes sb-burst{0%{opacity:0;transform:scale(.2)rotate(-40deg)}60%{opacity:1;transform:scale(1.18)rotate(6deg)}}.sb-mark.is-last:before{content:"";border:3px solid var(--ink);background:color-mix(in srgb, var(--sun) 60%, transparent);z-index:-1;border-radius:50%;animation:.9s ease-out both sb-ping;position:absolute;inset:4%}@keyframes sb-ping{0%{opacity:1;transform:scale(.4)}to{opacity:0;transform:scale(1.3)}}.sb-grid.is-over .sb-cell{cursor:default}.sb-dock{flex-direction:column;gap:8px;display:flex}.sb-berth{align-items:center;gap:12px;min-height:36px;display:flex}.sb-berth-name{color:var(--ink-2);font-size:14px;font-weight:700}.sb-berth-name em{font-style:normal;font-family:var(--font-display);color:var(--ink-3);margin-left:2px;font-weight:800}.sb-dockship{--cell:30px;width:calc(var(--len) * var(--cell));height:var(--cell);cursor:grab;touch-action:none;background:0 0;border:0;border-radius:999px;flex:none;margin:0;padding:0;position:relative;container-type:inline-size}.sb-dockship i{box-shadow:2px 2.5px 0 var(--ink);transition:transform .16s var(--ease-spring), box-shadow .16s var(--ease-spring);inset:3px}.sb-dockship i b{width:8px;height:8px}.sb-dockship:hover i{box-shadow:3px 3.5px 0 var(--ink);transform:translate(-1px,-1px)}.sb-dockship.is-sel i{box-shadow:4px 5px 0 var(--ink);outline:3px solid var(--ink);outline-offset:3px;transform:translate(-2px,-3px)}.sb-dockship:focus-visible{outline:none}.sb-dockship:focus-visible i{outline:3px solid var(--ink);outline-offset:3px}.sb-dockship:disabled{cursor:default}.sb-dockship:disabled i{box-shadow:none;background:0 0;border-style:dashed;border-color:#1a1a2e4d;outline:0;transform:none}.sb-dockship:disabled i b{visibility:hidden}.sb-dockship.is-lifted i{opacity:.3}.sb-berth.is-out .sb-berth-name{color:var(--ink-3);text-decoration:line-through 2px}.sb-harbour-actions{flex-wrap:wrap;gap:8px;display:flex}.sb-start{flex:1 0 auto}.sb-options{flex-direction:column;gap:8px;display:flex}.sb-tip{color:var(--ink-3);margin:0;font-size:13.5px;font-weight:600;line-height:1.45}.sb-toggle{background:var(--white);border:var(--edge);min-height:36px;box-shadow:var(--hard-sm);font:inherit;color:var(--ink);cursor:pointer;transition:transform .14s var(--ease-spring), box-shadow .14s var(--ease-spring);border-radius:999px;align-self:flex-start;align-items:center;gap:10px;padding:4px 14px 4px 6px;font-size:14px;font-weight:750;display:inline-flex}.sb-toggle:hover{box-shadow:3px 3px 0 var(--ink);transform:translate(-1px,-1px)}.sb-toggle:active{box-shadow:none;transform:translate(2px,2px)}.sb-switch{background:var(--cream);border:2px solid var(--ink);border-radius:999px;width:38px;height:22px;transition:background .16s;position:relative}.sb-switch i{background:var(--white);border:2px solid var(--ink);width:14px;height:14px;transition:transform .2s var(--ease-spring);border-radius:50%;position:absolute;top:2px;left:2px}.sb-toggle[aria-checked=true] .sb-switch{background:var(--game)}.sb-toggle[aria-checked=true] .sb-switch i{transform:translate(16px)}.sb-float{z-index:1000;pointer-events:none;width:var(--cell);height:var(--cell);opacity:.92;position:fixed;transform:rotate(-3deg)scale(1.05)}.sb-float[data-dir=h]{width:calc(var(--len) * var(--cell))}.sb-float[data-dir=v]{height:calc(var(--len) * var(--cell))}.sb-float i{box-shadow:4px 5px 0 var(--ink);inset:3px}.sb-float i b{background:var(--white);border:1.5px solid var(--ink);border-radius:50%;width:7px;height:7px}.sb-float.is-ok{opacity:.35}.sb-fleet{flex-wrap:wrap;gap:8px 10px;margin:4px 0 0;padding:0;list-style:none;display:flex}.sb-fleet li{width:calc(var(--len) * 13px + 6px);height:18px;position:relative}.sb-fleet i{box-shadow:1.5px 2px 0 var(--ink);border-width:2px;inset:0}.sb-fleet i b{display:none}.sb-fleet li.is-down i{background:var(--cream);box-shadow:none}.sb-fleet li.is-down:after{content:"";background:var(--cherry);border:1px solid var(--ink);border-radius:3px;height:3px;margin-top:-1.5px;position:absolute;top:50%;left:-3px;right:-3px;transform:rotate(-8deg)}.sb-sr{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.sb-dim{color:var(--ink-3)}@media (width<=560px){.sb-harbour,.sb-battle{gap:16px}.sb-h{font-size:18px}.sb-dockwrap{width:100%}.sb-dock{grid-template-columns:1fr 1fr;gap:8px 10px;display:grid}.sb-berth{flex-direction:column;align-items:flex-start;gap:3px}.sb-dockship{--cell:27px}.sb-battle .sb-side.is-mine{width:min(100%,250px)}.sb-root .ka-stat{min-width:0;padding:4px 9px 5px}.sb-root .ka-stat dd{font-size:18px}.sb-root .ka-seg button{padding:0 11px}}@media (prefers-reduced-motion:reduce){.sb-mark svg,.sb-ship i,.sb-mark.is-last:before,.sb-dockship i{transition:none!important;animation:none!important}}