.game-battleship{--bs-water:var(--lake-tint);--bs-line:#22304a29;--bs-ship:#54658a;--bs-hit:var(--taillight);--bs-sunk:var(--ink)}.game-battleship .bs-play{gap:16px;display:grid}.game-battleship .bs-meta{color:var(--muted);margin:0;font-size:14px;font-weight:700;line-height:1.5}.game-battleship .bs-meta b{color:var(--ink)}.game-battleship .bs-frame{border:2px solid var(--ink);border-radius:var(--radius-card);box-shadow:var(--shadow-card);background:#fff;padding:6px 8px 8px 4px;position:relative}.game-battleship .bs-grid{--bs-axis:18px;grid-template-columns:var(--bs-axis) repeat(10, minmax(0, 1fr));grid-template-rows:var(--bs-axis) auto;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;display:grid}.game-battleship .bs-grid[data-size=sm]{--bs-axis:14px}.game-battleship .bs-axis{color:var(--muted);font-variant-numeric:tabular-nums;justify-content:center;align-items:center;font-size:11px;font-weight:800;line-height:1;display:flex}.game-battleship .bs-grid[data-size=sm] .bs-axis{font-size:9.5px}.game-battleship .bs-rows{grid-area:2/1;grid-template-rows:repeat(10,minmax(0,1fr));display:grid}.game-battleship .bs-cells{aspect-ratio:1;background:var(--bs-water);border:1.5px solid var(--ink);border-radius:6px;grid-area:2/2/auto/-1;grid-template-rows:repeat(10,minmax(0,1fr));grid-template-columns:repeat(10,minmax(0,1fr));display:grid;overflow:hidden}.game-battleship .bs-cell{min-width:0;min-height:0;box-shadow:inset 0 0 0 .5px var(--bs-line);color:var(--ink);font:inherit;appearance:none;background:0 0;border:0;border-radius:0;justify-content:center;align-items:center;margin:0;padding:0;display:flex;position:relative}.game-battleship button.bs-cell{cursor:default}.game-battleship button.bs-cell:focus-visible{outline:3px solid var(--lake);outline-offset:-3px;z-index:2}.game-battleship .bs-cell[data-live]{cursor:pointer}.game-battleship .bs-frame[data-live] .bs-cell[data-live]{cursor:crosshair}@media (hover:hover){.game-battleship .bs-cell[data-live]:not([data-preview]):hover{background:var(--sunbeam-tint);box-shadow:inset 0 0 0 2px var(--ink)}}.game-battleship .bs-cell[data-ship]{background:var(--bs-ship);box-shadow:none}.game-battleship .bs-cell[data-part^=h-]{margin-block:9%}.game-battleship .bs-cell[data-part^=v-]{margin-inline:9%}.game-battleship .bs-cell[data-part=h-first]{border-radius:45% 0 0 45%}.game-battleship .bs-cell[data-part=h-last]{border-radius:0 45% 45% 0}.game-battleship .bs-cell[data-part=v-first]{border-radius:45% 45% 0 0}.game-battleship .bs-cell[data-part=v-last]{border-radius:0 0 45% 45%}.game-battleship .bs-cell[data-ship=revealed]{box-shadow:inset 0 0 0 1.5px var(--bs-ship);background:repeating-linear-gradient(45deg,#54658a4d 0 3px,#54658a1f 3px 6px)}.game-battleship .bs-mark{fill:none;stroke:currentColor;stroke-width:2.5px;stroke-linecap:round;stroke-linejoin:round;pointer-events:none;width:64%;height:64%}.game-battleship .bs-cell[data-mark=miss] .bs-mark{fill:#fff;color:var(--ink)}.game-battleship .bs-cell[data-mark=hit]{background:var(--bs-hit);box-shadow:inset 0 0 0 1.5px var(--ink);color:#fff}.game-battleship .bs-cell[data-mark=hit] .bs-mark{stroke-width:4px}.game-battleship .bs-cell[data-mark=sunk]{background:var(--bs-sunk);color:#fff;box-shadow:inset 0 0 0 .5px #ffffff40}.game-battleship .bs-cell[data-mark=sunk] .bs-mark{stroke-width:2px;width:70%;height:70%}.game-battleship .bs-cell[data-last]:after{content:"";border:3px solid var(--signpost);border-radius:inherit;pointer-events:none;position:absolute;inset:0}.game-battleship .bs-pending{background:var(--ink);opacity:.55;border-radius:50%;width:34%;height:34%}.game-battleship .bs-cell[data-preview=ok]{background:var(--meadow-tint);box-shadow:inset 0 0 0 2px var(--meadow)}.game-battleship .bs-cell[data-preview=bad]{background:repeating-linear-gradient(-45deg, var(--rose-tint) 0 4px, #ed6a8a8c 4px 6px);box-shadow:inset 0 0 0 2px var(--rose);cursor:not-allowed}@media (prefers-reduced-motion:no-preference){.game-battleship .bs-cell[data-last] .bs-mark{animation:.34s cubic-bezier(.2,.9,.3,1.3) both bs-pop}.game-battleship .bs-cell[data-last]:after{animation:.42s ease-out both bs-splash}.game-battleship .bs-cell[data-mark=sunk]{animation:.36s ease-out both bs-sink}.game-battleship .bs-pending{animation:.7s ease-in-out infinite alternate bs-pulse}}.game-battleship .bs-battle{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);align-items:start;gap:18px;display:grid}.game-battleship .bs-battle>.bs-board:first-child{justify-self:center;width:min(100%,max(300px,100dvh - 300px))}.game-battleship .bs-board{gap:8px;min-width:0;display:grid}.game-battleship .bs-board-head{flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:10px;display:flex}.game-battleship .bs-board-title{font-family:var(--font-display);margin:0;font-size:18px;font-weight:600;line-height:1.2}.game-battleship .bs-waiting{width:min(100%,420px);margin:0 auto}@media (width<=720px){.game-battleship .bs-battle{grid-template-columns:minmax(0,1fr)}.game-battleship .bs-battle>.bs-board:first-child{width:min(100%,480px)}.game-battleship .bs-board-own{justify-self:center;width:min(100%,300px)}}.game-battleship .bs-fleet{flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none;display:flex}.game-battleship .bs-fleet li{border:1.5px solid var(--ink);background:#fff;border-radius:999px;align-items:center;gap:6px;padding:3px 8px;font-size:12.5px;font-weight:800;line-height:1.3;display:flex}.game-battleship .bs-fleet li[data-sunk]{background:var(--bs-sunk);color:#fff}.game-battleship .bs-fleet li[data-sunk] .bs-fleet-name{text-decoration:line-through}.game-battleship .bs-fleet li[data-sunk] .bs-pips i{background:#ffffff80}.game-battleship .bs-fleet .bs-mark{stroke-width:2px;width:14px;height:14px}.game-battleship .bs-pips{gap:2px;display:inline-flex}.game-battleship .bs-pips i{background:var(--bs-ship);border-radius:2px;width:8px;height:8px;display:block}.game-battleship .bs-legend{color:var(--muted);flex-wrap:wrap;gap:6px 14px;margin:0;padding:0;font-size:13px;font-weight:700;list-style:none;display:flex}.game-battleship .bs-legend li{align-items:center;gap:6px;display:flex}.game-battleship .bs-cell.bs-legend-cell{border-radius:5px;flex:none;width:22px;height:22px;animation:none}.game-battleship .bs-cell.bs-legend-cell[data-mark=miss]{background:var(--bs-water);box-shadow:inset 0 0 0 1.5px var(--ink)}.game-battleship .bs-result-layer{z-index:10;border-radius:var(--radius-card);background:#cde2f799;justify-content:center;align-items:center;padding:10px;display:flex;position:absolute;inset:0}.game-battleship .bs-result-layer .dt-result{width:min(380px,100%)}.game-battleship .bs-result-line+.bs-result-line{margin-top:2px}.game-battleship .bs-result-note{margin-top:6px;font-weight:700}.game-battleship .bs-foot{flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 14px;display:flex}.game-battleship .bs-lead{border:2px solid var(--ink);background:var(--bs-water);border-radius:10px;justify-content:center;align-items:center;width:38px;height:38px;display:flex}.game-battleship .bs-lead svg{width:22px;height:22px}.game-battleship .bs-lead[data-mode=fire]{background:var(--signpost)}.game-battleship .bs-lead[data-mode=over]{background:var(--sunbeam)}.game-battleship .bs-place{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:start;gap:20px;display:grid}.game-battleship .bs-place>.bs-frame{justify-self:center;width:min(100%,max(300px,100dvh - 260px))}.game-battleship .bs-place-side{border:2px solid var(--ink);border-radius:var(--radius-card);box-shadow:var(--shadow-card);background:#fff;gap:14px;padding:16px;display:grid}@media (width<=720px){.game-battleship .bs-place{grid-template-columns:minmax(0,1fr);gap:14px}.game-battleship .bs-place>.bs-frame{width:min(100%,440px)}}.game-battleship .bs-tray{gap:6px;margin:0;padding:0;list-style:none;display:grid}.game-battleship .bs-ship{width:100%;min-height:40px;color:var(--ink);border:2px solid var(--ink);font:inherit;text-align:left;cursor:pointer;background:#fff;border-radius:12px;align-items:center;gap:10px;padding:6px 12px;font-size:14.5px;font-weight:800;display:flex}.game-battleship .bs-ship .bs-pips i{width:11px;height:11px}.game-battleship .bs-ship-name{flex:1;min-width:0}.game-battleship .bs-ship[aria-pressed=true]{background:var(--signpost-tint);box-shadow:inset 0 0 0 2px var(--signpost)}.game-battleship .bs-ship[data-placed]{color:var(--muted);border-style:dashed}.game-battleship .bs-ship:focus-visible{outline:3px solid var(--lake);outline-offset:2px}.game-battleship .bs-ship-check{width:18px;height:18px;color:var(--meadow);stroke-width:3px;flex:none}.game-battleship .bs-place-tools{flex-wrap:wrap;gap:8px;display:flex}.game-battleship .bs-rules{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;display:grid}.game-battleship .bs-rule .bs-meta{margin-top:8px}.game-battleship .bs-rules-summary ul{color:var(--muted);gap:6px;margin:0;padding:0;font-size:14px;font-weight:700;line-height:1.45;list-style:none;display:grid}.game-battleship .bs-rules-summary ul b{color:var(--ink)}.game-battleship .bs-pass{text-align:center}.game-battleship .bs-pass .dt-lede{margin-inline:auto}.game-battleship .bs-pass-note{margin:0 0 10px;font-size:16px;font-weight:800}.game-battleship .bs-modes{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:6px;display:grid}.game-battleship .bs-mode{text-align:left;color:var(--ink);border:2px solid var(--ink);border-radius:var(--radius-card);box-shadow:var(--shadow-card);cursor:pointer;font:inherit;background:#fff;flex-direction:column;gap:6px;padding:18px;transition:box-shadow .14s;display:flex}.game-battleship .bs-mode p{color:var(--muted);margin:0;font-size:14.5px;font-weight:600;line-height:1.45}.game-battleship .bs-mode:hover{box-shadow:var(--shadow-card-hover)}.game-battleship .bs-mode:focus-visible{outline:3px solid var(--lake);outline-offset:3px}.game-battleship .bs-mode-title{font-family:var(--font-display);align-items:center;gap:10px;font-size:20px;font-weight:600;display:flex}.game-battleship .bs-mode-title svg{width:22px;height:22px}.game-battleship .bs-records{gap:2px;margin:16px 0 0;padding:0;list-style:none;display:grid}.game-battleship .bs-code{font-family:var(--font-display);letter-spacing:.25em;text-align:center;border:2px dashed var(--sky-deep);border-radius:var(--radius-card);font-variant-numeric:tabular-nums;padding-left:.25em;margin:12px 0 16px;padding-block:10px;font-size:clamp(36px,10vw,52px);font-weight:700}.game-battleship .bs-code-input{font-family:var(--font-display);letter-spacing:.3em;text-transform:uppercase;width:11ch;font-weight:600}.game-battleship .bs-seats{gap:10px;margin:0;padding:0;list-style:none;display:grid}.game-battleship .bs-seats li{align-items:center;gap:10px;font-size:15px;font-weight:700;display:flex}.game-battleship .bs-seats li[data-taken=false]{color:var(--muted)}.game-battleship .bs-seats li[data-taken=false] .bs-seat-dot{background:0 0;border-style:dashed}.game-battleship .bs-seat-dot{border:2px solid var(--ink);background:var(--lake);border-radius:50%;flex:none;width:18px;height:18px}.game-battleship .bs-help{gap:12px;margin:0;padding:0;list-style:none;display:grid}.game-battleship .bs-help-step{grid-template-columns:76px minmax(0,1fr);align-items:center;gap:14px;display:grid}.game-battleship .bs-help-step h3{font-family:var(--font-display);margin:0 0 2px;font-size:17px;font-weight:600;line-height:1.2}.game-battleship .bs-help-step p{margin:0;font-size:14.5px;font-weight:600;line-height:1.4}.game-battleship .bs-help-art{background:var(--bs-water);border:2px solid var(--ink);border-radius:10px;justify-content:center;align-items:center;min-height:44px;display:flex}.game-battleship .bs-help-icon{width:24px;height:24px}.game-battleship .bs-help-ship i{width:11px;height:11px}.game-battleship .bs-help-marks{gap:3px;display:flex}.game-battleship .bs-help-marks .bs-legend-cell{width:19px;height:19px}.game-battleship .bs-help-foot{justify-content:flex-end;margin-top:16px;display:flex}@media (width<=420px){.game-battleship .bs-help{gap:8px}.game-battleship .bs-help-step{grid-template-columns:62px minmax(0,1fr);gap:12px}.game-battleship .bs-help-step h3{margin:0;font-size:15.5px}.game-battleship .bs-help-step p{font-size:13.5px;line-height:1.3}.game-battleship .bs-help-foot{margin-top:10px}.game-battleship .bs-help-marks .bs-legend-cell{width:17px;height:17px}}@media (width<=359px),(height<=600px){.game-battleship .bs-help{gap:7px}.game-battleship .bs-help-step{grid-template-columns:54px minmax(0,1fr);gap:10px}.game-battleship .bs-help-step h3{margin:0;font-size:14.5px}.game-battleship .bs-help-step p{font-size:12.5px;line-height:1.28}.game-battleship .bs-help-art{min-height:36px}.game-battleship .bs-help-ship i{width:8px;height:8px}.game-battleship .bs-help-marks{gap:2px}.game-battleship .bs-help-marks .bs-legend-cell{width:14px;height:14px}.game-battleship .bs-help-foot{margin-top:8px}.dt-modal:has(.bs-help){padding:10px 14px 12px}.dt-modal:has(.bs-help) .dt-modal-title{margin:6px 0 0;font-size:18px}.dt-modal:has(.bs-help) .dt-icon-btn{width:38px;height:38px}}@keyframes bs-pop{0%{opacity:0;transform:scale(.3)}60%{opacity:1;transform:scale(1.2)}to{transform:scale(1)}}@keyframes bs-splash{0%{opacity:0;transform:scale(1.9)}40%{opacity:1}to{transform:scale(1)}}@keyframes bs-sink{0%{filter:brightness(1.8);transform:scale(.8)}to{filter:none;transform:scale(1)}}@keyframes bs-pulse{0%{opacity:.35;transform:scale(.7)}to{opacity:.7;transform:scale(1.1)}}
