.sb{--sb-water: color-mix(in srgb, var(--sky) 15%, var(--cell));--sb-water-t: color-mix(in srgb, var(--sky) 24%, var(--cell));--sb-line: color-mix(in srgb, var(--sky) 34%, var(--cell));--sb-edge: color-mix(in srgb, var(--sky) 55%, var(--ink));--sb-ship: color-mix(in srgb, var(--ink-2) 82%, var(--cell));--sb-label: 15px;display:grid;grid-template-columns:minmax(0,1fr);gap:6px;user-select:none;-webkit-user-select:none}:root[data-look=dusk] .sb{--sb-water: color-mix(in srgb, var(--sky) 16%, var(--bg));--sb-water-t: color-mix(in srgb, var(--sky) 24%, var(--bg));--sb-line: color-mix(in srgb, var(--sky) 32%, var(--bg));--sb-edge: color-mix(in srgb, var(--sky) 55%, var(--bg));--sb-ship: color-mix(in srgb, var(--ink-2) 80%, var(--bg))}.sb-tabs{display:flex}.sb-tab{position:relative}.sb-badge{position:absolute;top:7px;right:10px;width:9px;height:9px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 2px var(--bg-2)}.sb[data-phase=setup] .sb-tabs{display:none}.sb-help{margin:0;text-align:center;color:var(--ink-2);font-size:.86rem;min-height:1.3em;display:none}.sb[data-phase=setup] .sb-help{display:block}.sb-boards{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}.sb[data-show=target] .sb-board.is-own,.sb[data-show=own] .sb-board.is-target,.sb[data-phase=setup] .sb-board.is-target{display:none}.sb-board{min-width:0;--sb-w: min(100%, 440px, calc(var(--tg-stage-h) - 70px));display:grid;justify-items:center}.sb[data-phase=setup] .sb-board{--sb-w: min(100%, 440px, calc(var(--tg-stage-h) - 84px))}.sb-title{display:none;align-items:baseline;justify-content:space-between;gap:8px;width:var(--sb-w);padding-left:var(--sb-label);margin:0 0 4px}.sb-title b{font-family:var(--font-display);font-size:1rem}.sb-title small{color:var(--ink-2);font-size:.8rem}.sb-grid{width:var(--sb-w);margin:0 auto;display:grid;grid-template-columns:var(--sb-label) minmax(0,1fr);grid-template-rows:var(--sb-label) auto}.sb-corner{display:block}.sb-colhead,.sb-rowhead{display:grid;color:var(--ink-2);font-size:.6rem;font-weight:700;text-align:center;line-height:1}.sb-colhead{grid-template-columns:repeat(10,minmax(0,1fr));align-items:end;padding-bottom:3px}.sb-rowhead{grid-template-rows:repeat(10,minmax(0,1fr));align-items:center;padding-right:3px}.sb-area{position:relative;aspect-ratio:1;border-radius:8px;box-shadow:0 0 0 2px var(--sb-edge),var(--shadow)}.sb-cells{position:absolute;inset:0;display:grid;grid-template-columns:repeat(10,minmax(0,1fr));grid-template-rows:repeat(10,minmax(0,1fr));border-radius:8px;overflow:hidden;background:var(--sb-water)}.sb-board.is-target .sb-cells{background:var(--sb-water-t)}.sb-cell{display:block;min-width:0;border:0;margin:0;padding:0;background:transparent;box-shadow:inset -1px -1px 0 var(--sb-line);color:inherit;font:inherit;-webkit-tap-highlight-color:transparent}.sb-board.is-target .sb-cell{cursor:default}.sb.is-live .sb-board.is-target .sb-cell:not(.is-fired){cursor:crosshair}.sb.is-live .sb-board.is-target .sb-cell:not(.is-fired):hover{background:color-mix(in srgb,var(--sun) 32%,transparent)}.sb-board.is-target .sb-cell:focus-visible{outline:3px solid var(--sun);outline-offset:-3px;position:relative;z-index:1}.sb-cell.is-shake{animation:sb-shake calc(.3s * var(--motion)) ease-in-out}@keyframes sb-shake{25%{box-shadow:inset 3px 0 0 var(--coral)}75%{box-shadow:inset -3px 0 0 var(--coral)}}.sb-ships,.sb-marks{position:absolute;inset:0;pointer-events:none}.sb-ship{position:absolute;display:block;margin:0;padding:0;border:0;background:none;color:inherit;--n: 3}.sb-ships.is-shuffle .sb-ship{transition:left calc(.25s * var(--motion)) ease-out,top calc(.25s * var(--motion)) ease-out,width calc(.25s * var(--motion)),height calc(.25s * var(--motion))}.sb-hull{position:absolute;inset:13% calc(13% / var(--n));border-radius:999px;background:linear-gradient(180deg,color-mix(in srgb,var(--sb-ship) 65%,white) 0 16%,var(--sb-ship) 36% 68%,color-mix(in srgb,var(--sb-ship) 78%,black));box-shadow:0 2px #00000029}.sb-ship[data-h="0"] .sb-hull{inset:calc(13% / var(--n)) 13%;background:linear-gradient(90deg,color-mix(in srgb,var(--sb-ship) 65%,white) 0 16%,var(--sb-ship) 36% 68%,color-mix(in srgb,var(--sb-ship) 78%,black))}.sb-hull:before{content:"";position:absolute;inset:38% calc(40% / var(--n));border-radius:999px;background:color-mix(in srgb,var(--sb-ship) 55%,white);opacity:.55}.sb-ship[data-h="0"] .sb-hull:before{inset:calc(40% / var(--n)) 38%}.sb-hull:after{content:"";position:absolute;top:24%;bottom:24%;right:calc(60% / var(--n));width:calc(70% / var(--n));border-radius:3px;background:color-mix(in srgb,var(--sb-ship) 70%,black);opacity:.5}.sb-ship[data-h="0"] .sb-hull:after{top:auto;bottom:calc(60% / var(--n));left:24%;right:24%;width:auto;height:calc(70% / var(--n))}.sb-ship.is-sunk{--sb-ship: color-mix(in srgb, var(--coral) 50%, var(--ink-2))}.sb-ship.is-sunk .sb-hull{opacity:.8}.sb-ship.is-revealed .sb-hull{background:color-mix(in srgb,var(--sb-ship) 25%,transparent);box-shadow:inset 0 0 0 2px var(--sb-ship)}.sb-ship.is-revealed .sb-hull:before,.sb-ship.is-revealed .sb-hull:after{display:none}.sb[data-phase=setup] .sb-ship.is-drag-able{pointer-events:auto;cursor:grab;touch-action:none}.sb-ship.is-selected .sb-hull{box-shadow:0 0 0 2px var(--sun),0 2px #00000029}.sb-ship:focus-visible{outline:none}.sb-ship:focus-visible .sb-hull{box-shadow:0 0 0 3px var(--sun)}.sb-ship.is-dragging{z-index:3;cursor:grabbing}.sb-ship.is-dragging .sb-hull{transform:scale(1.04);box-shadow:0 6px 14px #00000040}.sb-ship.is-bad{--sb-ship: var(--coral)}.sb-ship.is-bad .sb-hull{opacity:.7}.sb-ship.is-shake .sb-hull{animation:sb-wobble calc(.35s * var(--motion)) ease-in-out}@keyframes sb-wobble{25%{transform:translate(-3px)}75%{transform:translate(3px)}}.sb-m{position:absolute;width:10%;height:10%;display:grid;place-items:center}.sb-m:before{content:"";display:block}.sb-m.is-miss:before{width:26%;height:26%;border-radius:50%;background:color-mix(in srgb,var(--ink-2) 70%,transparent)}.sb-m.is-hit:before{width:78%;height:78%;background:radial-gradient(circle,var(--sun) 0 22%,var(--coral) 34% 100%);clip-path:polygon(50% 0%,59.9% 26%,85.4% 14.6%,74% 40.1%,100% 50%,74% 59.9%,85.4% 85.4%,59.9% 74%,50% 100%,40.1% 74%,14.6% 85.4%,26% 59.9%,0% 50%,26% 40.1%,14.6% 14.6%,40.1% 26%)}.sb-m.is-sunk:before{width:62%;height:62%;background:radial-gradient(circle,color-mix(in srgb,var(--coral) 55%,black) 0 30%,var(--coral) 40% 100%)}.sb-m.is-last:after{content:"";position:absolute;inset:4%;border-radius:50%;box-shadow:0 0 0 2px var(--sun);animation:sb-ring calc(1.6s * var(--motion) + 1s) ease-in-out infinite}@keyframes sb-ring{0%,to{opacity:1}50%{opacity:.35}}.sb-m.is-fresh.is-hit:before,.sb-m.is-fresh.is-sunk:before{animation:sb-pop calc(.4s * var(--motion)) cubic-bezier(.2,1.6,.4,1)}.sb-m.is-fresh.is-miss:before{animation:sb-drop calc(.3s * var(--motion)) ease-out}.sb-m.is-fresh.is-miss:after{animation:sb-splash calc(.7s * var(--motion)) ease-out}@keyframes sb-pop{0%{transform:scale(.2) rotate(-30deg)}to{transform:none}}@keyframes sb-drop{0%{transform:scale(2.2);opacity:0}to{transform:none;opacity:1}}@keyframes sb-splash{0%{transform:scale(.3);opacity:1;box-shadow:0 0 0 3px var(--sky)}to{transform:scale(1.5);opacity:0;box-shadow:0 0 0 1px var(--sky)}}.sb-m.is-hint:after{content:"";position:absolute;inset:2%;border-radius:50%;border:3px dashed var(--sun);animation:sb-hint calc(.8s * var(--motion) + .2s) ease-in-out infinite alternate}@keyframes sb-hint{to{transform:scale(.8)}}.sb-flash{position:absolute;left:50%;top:var(--at, 50%);z-index:5;pointer-events:none;transform:translate(-50%,-50%);max-width:94%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:9px 16px;border-radius:999px;background:var(--ink);color:var(--bg);box-shadow:var(--shadow);font-family:var(--font-display);font-weight:800;font-size:1.05rem;animation:sb-flash var(--ms, .9s) ease-out forwards}.sb-flash.is-hit,.sb-flash.is-sunk{background:var(--coral);color:#fff}.sb-flash.is-sunk{font-size:1.15rem}@keyframes sb-flash{0%{opacity:0;transform:translate(-50%,-50%) scale(.85)}12%{opacity:1;transform:translate(-50%,-50%) scale(1)}82%{opacity:1}to{opacity:0}}:root[data-reduce-motion="1"] .sb-flash{animation-name:sb-fade}@keyframes sb-fade{0%{opacity:0}8%{opacity:1}85%{opacity:1}to{opacity:0}}.sb-fleet{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 12px;min-height:16px;margin-top:8px}.sb-chip{position:relative;display:inline-flex;gap:2px;align-items:center}.sb-chip i{width:9px;height:9px;border-radius:2px;background:var(--sb-ship)}.sb-chip.is-sunk i{background:var(--coral);opacity:.45}.sb-chip.is-sunk:after{content:"";position:absolute;left:-3px;right:-3px;top:50%;height:2px;background:var(--coral);transform:rotate(-8deg)}.sb-setup{display:none;gap:8px}.sb[data-phase=setup] .sb-setup{display:flex}.sb-setup .suvi-btn{flex:1 1 0;min-width:0}@media(min-width:700px){.sb-tabs{display:none}.sb-title{display:flex}.sb-boards{grid-template-columns:repeat(2,minmax(0,1fr))}.sb[data-show] .sb-board.is-own,.sb[data-show] .sb-board.is-target{display:grid}.sb[data-phase=setup] .sb-boards{grid-template-columns:minmax(0,1fr)}.sb[data-phase=setup] .sb-board.is-target{display:none}.sb-board{--sb-w: min(100%, 440px, calc(var(--tg-stage-h) - 52px))}.sb[data-phase=setup] .sb-board{--sb-w: min(100%, 400px, calc(var(--tg-stage-h) - 128px))}.sb[data-phase=setup] .sb-setup{max-width:400px;margin:0 auto;width:100%}}