html[data-theme=zine-calm]{--game-ease:cubic-bezier(.22, 1, .36, 1);--sea:var(--paper-white);--sea-line:color-mix(in srgb, var(--spot-blue) 38%, var(--paper-white));--sea-line-soft:color-mix(in srgb, var(--spot-blue) 13%, var(--paper-white));--sea-edge:color-mix(in srgb, var(--spot-blue) 60%, var(--ink));--sea-deep:var(--paper-deep);--sea-glint:var(--paper-white);--ship-hull:color-mix(in srgb, var(--spot-blue) 62%, var(--ink));--ship-deck:color-mix(in srgb, var(--spot-blue) 80%, var(--paper-white));--ship-detail:var(--paper-white);--ship-shine:var(--paper-white);--ship-outline:var(--ink);--ship-fold:color-mix(in srgb, var(--paper-white) 70%, transparent);--ship-cast:color-mix(in srgb, var(--ink) 38%, transparent);--ship-silver-dark:var(--ink-soft);--ship-silver-mid:color-mix(in srgb, var(--spot-blue) 14%, color-mix(in srgb, var(--ink) 34%, var(--paper-white)));--ship-silver-light:color-mix(in srgb, var(--paper-white) 58%, var(--ship-silver-mid));--ship-engrave:color-mix(in srgb, var(--ink) 36%, transparent);--ship-wreck:color-mix(in srgb, var(--ink) 22%, var(--paper-deep));--ship-wreck-deck:color-mix(in srgb, var(--ink) 10%, var(--paper-deep));--ship-scribble:color-mix(in srgb, var(--ink) 62%, transparent);--mark-miss:var(--ink-soft);--mark-hit:var(--spot-red);--mark-hit-deep:var(--spot-red-deep);--mark-hit-soft:color-mix(in srgb, var(--spot-yellow) 80%, transparent);--mark-halo:var(--paper-white);--mark-stamp:var(--spot-red-deep);--aim:var(--ink);--aim-band:color-mix(in srgb, var(--spot-yellow) 30%, transparent);--placement-ok:var(--ok);--placement-bad:var(--danger);--flame-core:var(--spot-yellow);--flame-mid:var(--spot-red);--flame-edge:var(--spot-red-deep);--shard-light:var(--paper-white);--shard-mid:color-mix(in srgb, var(--ink) 22%, var(--paper-white));--shard-dark:var(--ink-soft);--spark-gold:var(--spot-yellow);--spark-ember:var(--spot-red);--spark-ice:var(--spot-blue);--spark-white:var(--ink)}html[data-theme=zine-calm] [data-waters=enemy]{--sea-sheet:var(--paper-deep);--sea:color-mix(in srgb, var(--paper-deep) 55%, var(--paper-white));--sea-line:color-mix(in srgb, var(--ink) 30%, var(--sea));--sea-line-soft:color-mix(in srgb, var(--ink) 9%, var(--sea));--sea-edge:var(--ink-soft)}html[data-theme=zine-calm] [data-sea=night]{--sea:color-mix(in srgb, var(--ink) 84%, var(--paper));--sea-line:color-mix(in srgb, var(--paper) 30%, var(--sea));--sea-line-soft:color-mix(in srgb, var(--paper) 10%, var(--sea));--sea-edge:color-mix(in srgb, var(--paper) 55%, var(--sea));--sea-deep:var(--ink);--sea-glint:var(--paper);--ship-hull:color-mix(in srgb, var(--spot-blue) 50%, var(--paper));--ship-deck:color-mix(in srgb, var(--spot-blue) 22%, var(--paper));--ship-outline:var(--ink);--ship-fold:color-mix(in srgb, var(--ink) 35%, transparent);--ship-cast:color-mix(in srgb, var(--ink) 70%, transparent);--ship-silver-mid:color-mix(in srgb, var(--paper-white) 72%, var(--ink));--ship-wreck:color-mix(in srgb, var(--paper) 45%, var(--ink));--ship-wreck-deck:color-mix(in srgb, var(--paper) 55%, var(--ink));--mark-miss:var(--paper);--mark-hit-soft:color-mix(in srgb, var(--spot-yellow) 72%, transparent);--aim:var(--paper);--aim-band:color-mix(in srgb, var(--spot-yellow) 16%, transparent);--placement-ok:color-mix(in srgb, var(--spot-green) 50%, var(--paper));--placement-bad:color-mix(in srgb, var(--spot-red) 55%, var(--paper))}html[data-theme=zine-calm] [data-sea=night][data-waters=enemy]{--sea-sheet:color-mix(in srgb, var(--spot-blue) 16%, var(--surface));--sea:color-mix(in srgb, var(--spot-blue) 30%, var(--ink))}html[data-theme=zine-calm] .board .cell:focus-visible{outline-offset:-3px}@layer components{.board{--label:26px;--radius-water:var(--radius-sm);border:2px solid var(--border);border-radius:var(--radius-lg);background:var(--sea-sheet,var(--surface));width:100%;box-shadow:var(--shadow-hard);color:var(--foreground);isolation:isolate;padding:12px 16px 16px 10px;line-height:1.35;position:relative;container-type:inline-size}.board[data-size=sm]{--label:18px;padding:8px 10px 10px 6px}.board[data-size=xs]{--label:0px;box-shadow:none;padding:6px}.board[data-size=xs] .board-table thead,.board[data-size=xs] .board-table tbody th{display:none}.board:before{content:"";z-index:-1;border-radius:inherit;box-shadow:0 0 0 3px var(--ring), 8px 8px 0 3px var(--ring);opacity:0;transition:opacity var(--duration-base) var(--game-ease);pointer-events:none;position:absolute;inset:-2px}.board[data-active]:before{opacity:1}.board-grid{--cell:calc((100cqi - var(--label)) / 10);position:relative}.board-table{z-index:2;table-layout:fixed;border-collapse:separate;border-spacing:0;width:100%;position:relative}.board-table col:first-child{width:var(--label)}.board-table thead th,.board-table .board-corner{height:var(--label);font-family:var(--font-mono);color:var(--muted-foreground);text-align:center;vertical-align:bottom;padding:0 0 5px;font-size:12px;font-weight:400;line-height:1}.board-table tbody th{font-family:var(--font-mono);color:var(--muted-foreground);text-align:end;padding:0 6px 0 0;font-size:12px;font-weight:400;line-height:1}.board-table tbody tr{height:var(--cell)}.board-table td{height:var(--cell);padding:0}.cell{width:100%;height:var(--cell);cursor:default;-webkit-tap-highlight-color:transparent;background:0 0;border:0;border-radius:0;padding:0;display:block;position:relative}button.cell{cursor:pointer}button.cell[aria-disabled=true]{cursor:default}.cell:focus-visible{z-index:1}.board[data-interactive] button.cell:not([aria-disabled=true]):hover{background:color-mix(in srgb, var(--aim) 9%, transparent)}.board-water{z-index:0;left:var(--label);top:var(--label);width:calc(var(--cell) * 10);height:calc(var(--cell) * 10);border-radius:var(--radius-water);background-color:var(--sea);background-image:linear-gradient(to right, var(--sea-line) 1px, transparent 1px), linear-gradient(to bottom, var(--sea-line) 1px, transparent 1px), linear-gradient(to right, var(--sea-line-soft) 1px, transparent 1px), linear-gradient(to bottom, var(--sea-line-soft) 1px, transparent 1px);background-size:var(--cell) var(--cell), var(--cell) var(--cell), calc(var(--cell) / 2) calc(var(--cell) / 2), calc(var(--cell) / 2) calc(var(--cell) / 2);box-shadow:inset 0 0 0 1.5px var(--sea-edge);background-position:-1px -1px;position:absolute}.board-layer{left:var(--label);top:var(--label);width:calc(var(--cell) * 10);height:calc(var(--cell) * 10);pointer-events:none;position:absolute}.board-layer[data-layer=ships]{z-index:1;border-radius:var(--radius-water);overflow:hidden}.board-layer[data-layer=fx]{z-index:3}.aim-line{background:var(--aim-band);opacity:0;transition:opacity var(--duration-fast) var(--game-ease), transform .14s var(--game-ease);position:absolute;top:0;left:0}.aim-line[data-axis=x]{width:var(--cell);height:100%;transform:translateX(calc(var(--aim-x,0) * var(--cell)))}.aim-line[data-axis=y]{width:100%;height:var(--cell);transform:translateY(calc(var(--aim-y,0) * var(--cell)))}.aim-reticle{width:var(--cell);height:var(--cell);opacity:0;transform:translate(calc(var(--aim-x,0) * var(--cell)), calc(var(--aim-y,0) * var(--cell)));transition:opacity var(--duration-fast) var(--game-ease), transform .14s var(--game-ease);position:absolute;top:0;left:0}.aim-reticle:before,.aim-reticle:after{content:"";border:2px solid var(--aim);border-radius:50%;position:absolute;inset:16%}.aim-reticle:after{background:var(--aim);border:0;inset:44%}.board[data-aim] .aim-line,.board[data-aim] .aim-reticle{opacity:1}.ship{--ship-lift:calc(var(--cell) * .06);left:calc(var(--x) * var(--cell));top:calc(var(--y) * var(--cell));width:calc(var(--len) * var(--cell));height:var(--cell);transform-origin:calc(var(--cell) / 2) 50%;position:absolute}.ship[data-orientation=vertical]{rotate:90deg}.ship-art{width:100%;height:100%;display:block;overflow:visible}.ship-art :is(path,circle,rect){vector-effect:non-scaling-stroke}.ship .ship-art{filter:drop-shadow(var(--ship-lift) var(--ship-lift) 0 var(--ship-cast))}.ship[data-orientation=vertical] .ship-art{filter:drop-shadow(var(--ship-lift) calc(var(--ship-lift) * -1) 0 var(--ship-cast))}.ship-scribble{display:none}.ship:is([data-state=ghost],[data-state=invalid]) .ship-art{filter:none}.ship:is([data-state=ghost],[data-state=invalid]) .ship-outline{stroke-dasharray:4 3}.ship[data-state=ghost]{opacity:.6}.ship[data-state=invalid]{opacity:.4}.ship[data-state=lifted]{opacity:.3}.ship[data-state=wreck] .ship-hull{fill:var(--ship-wreck)}.ship[data-state=wreck] .ship-deck{fill:var(--ship-wreck-deck)}.ship[data-state=wreck] .ship-engrave{display:none}.ship[data-state=wreck] .ship-scribble{display:inline}.ship[data-sinking]{animation:ship-sink var(--sink-ms,.95s) var(--game-ease) both}@keyframes ship-sink{0%{opacity:1;transform:translateY(0)scale(1.06)rotate(-2deg)}35%{opacity:1;transform:translateY(-4%)scale(1.03)rotate(1deg)}to{opacity:1;transform:none}}.ship-enter{animation:ship-enter .38s var(--game-ease) both}@keyframes ship-enter{0%{opacity:0;transform:scale(1.12)}}.preview-cell{left:calc(var(--x) * var(--cell));top:calc(var(--y) * var(--cell));width:var(--cell);height:var(--cell);padding:2px;position:absolute}.preview-cell:before{content:"";border-radius:var(--radius-sm);background:color-mix(in srgb, var(--placement-ok) 18%, transparent);width:100%;height:100%;box-shadow:inset 0 0 0 2.5px var(--placement-ok);display:block}.preview-cell[data-bad]:before{background:repeating-linear-gradient(-45deg, color-mix(in srgb, var(--placement-bad) 45%, transparent) 0 2px, transparent 2px 6px), color-mix(in srgb, var(--placement-bad) 10%, transparent);box-shadow:none;outline:2.5px dashed var(--placement-bad);outline-offset:-2.5px}.ship-selected{left:calc(var(--x) * var(--cell));top:calc(var(--y) * var(--cell));width:calc(var(--len) * var(--cell));height:var(--cell);border-radius:var(--radius-sm);outline:2.5px dashed var(--aim);outline-offset:-2px;position:absolute}.ship-selected[data-orientation=vertical]{width:var(--cell);height:calc(var(--len) * var(--cell))}.cursor-cell{left:calc(var(--x) * var(--cell));top:calc(var(--y) * var(--cell));width:var(--cell);height:var(--cell);border-radius:var(--radius-sm);box-shadow:inset 0 0 0 3px var(--aim);position:absolute}.mark{left:calc(var(--x) * var(--cell));top:calc(var(--y) * var(--cell));width:var(--cell);height:var(--cell);place-items:center;display:grid;position:absolute}.mark-dot{aspect-ratio:1;background:var(--mark-miss);width:24%;box-shadow:0 0 0 calc(var(--cell) * .05) color-mix(in srgb, var(--mark-miss) 14%, transparent);animation:mark-in .26s var(--game-ease) both;border-radius:47% 53% 44% 56%/55% 46% 54% 45%}.mark[data-kind=hit]:before{content:"";background:var(--mark-hit-soft);animation:mark-in .26s var(--game-ease) both;border-radius:42% 58% 46% 54%/57% 43%;position:absolute;inset:13%;rotate:-10deg}.mark[data-kind=hit][data-effect=shards]:before{inset:2%}.mark :is(.mark-cross,.mark-stamp){width:76%;height:76%;position:relative;overflow:visible}.mark-cross path{fill:none;stroke-linecap:round}.mark-cross-halo{stroke:var(--mark-halo);stroke-width:10px;animation:.12s ease-out both fade-soft}.mark-cross-ink{stroke:var(--mark-hit);stroke-width:5.5px;stroke-dasharray:1;animation:marker-draw .17s var(--game-ease) both}.mark-cross-ink:last-child{animation-delay:.12s}.mark[data-kind=sunk] .mark-cross-ink{stroke:var(--mark-hit-deep)}@keyframes marker-draw{0%{stroke-dashoffset:1px}}.mark-stamp{animation:stamp-in .24s var(--game-ease) both;rotate:-9deg}.mark-stamp-pad{fill:var(--mark-halo);fill-opacity:.94;stroke:var(--mark-stamp);stroke-width:3px;rx:2px}.mark-stamp-ink{fill:var(--mark-stamp)}.mark[data-kind=sunk] .mark-stamp{rotate:7deg}@keyframes mark-in{0%{opacity:0;transform:scale(.2)}}@keyframes stamp-in{0%{opacity:0;transform:scale(1.5)}60%{opacity:1}}.shot-marker{left:calc(var(--x) * var(--cell));top:calc(var(--y) * var(--cell));width:var(--cell);height:var(--cell);animation:shot-lock .32s var(--game-ease) both;padding:1px;position:absolute}.shot-marker svg{width:100%;height:100%;display:block;overflow:visible}.shot-marker path{fill:none;stroke:var(--aim);stroke-width:2.5px;stroke-linecap:square;stroke-linejoin:miter;vector-effect:non-scaling-stroke}@keyframes shot-lock{0%{opacity:0;transform:scale(1.45)}}.fx{left:calc(var(--x) * var(--cell));top:calc(var(--y) * var(--cell));width:var(--cell);height:var(--cell);pointer-events:none;position:absolute}.fx-tracer-body{animation:tracer-fly var(--tracer-ms,.32s) cubic-bezier(.33, 0, .2, 1) both;place-items:center;display:grid;position:absolute;inset:0}.fx-tracer-dot{aspect-ratio:1;background:var(--aim);width:22%;box-shadow:0 0 0 2px var(--mark-halo);border-radius:50%}.fx-tracer-trail{width:calc(var(--cell) * 2.4);background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--aim) 60%, transparent));transform-origin:100%;height:2px;transform:translateX(-100%) rotate(var(--angle));margin-top:-1px;position:absolute;top:50%;left:50%}@keyframes tracer-fly{0%{transform:translate(calc(var(--dx) * var(--cell)), calc(var(--dy) * var(--cell))) scale(.7);opacity:.2}15%{opacity:1}to{opacity:1;transform:translate(0)scale(1)}}.fx-splash i{border:1.5px solid var(--mark-miss);animation:ripple .9s var(--game-ease) both;border-radius:50%;position:absolute;inset:8%}.fx-splash i:nth-child(2){animation-delay:.12s}.fx-splash i:nth-child(3){animation-delay:.24s}.fx-splash b{background:var(--mark-miss);width:16%;height:16%;animation:droplet .52s var(--game-ease) both;border-radius:50%;position:absolute;top:42%;left:42%}@keyframes ripple{0%{opacity:.95;transform:scale(.15)}to{opacity:0;transform:scale(1.9)}}@keyframes droplet{0%{opacity:1;transform:translateY(0)scale(1)}50%{opacity:1;transform:translateY(-120%)scale(.8)}to{opacity:0;transform:translateY(0)scale(.4)}}.fx-flash{width:220%;height:220%;animation:flash .46s var(--game-ease) both;position:absolute;inset:-60%;overflow:visible}.fx-flash path{fill:var(--flame-core);stroke:var(--ink);stroke-width:1.5px;stroke-linejoin:round;vector-effect:non-scaling-stroke}.fx-hit[data-effect=shards] .fx-flash path{fill:var(--shard-light)}.fx-hit[data-kind=sunk] .fx-flash{width:320%;height:320%;animation-duration:.7s;inset:-110%}.fx-ring{border:2px solid var(--flame-mid);animation:shock .52s var(--game-ease) both;border-radius:50%;position:absolute;inset:0}.fx-hit[data-effect=shards] .fx-ring{border-color:var(--ink)}.fx-particle{background:var(--flame-mid);--turn:calc(var(--i) / var(--n) * 360deg);border-radius:1px;width:16%;height:12%;margin:-6% 0 0 -8%;animation:.62s cubic-bezier(.15,.7,.3,1) both particle;position:absolute;top:50%;left:50%}.fx-particle:nth-child(odd){background:var(--flame-core)}.fx-hit[data-effect=shards] .fx-particle{background:0 0;border-radius:0;width:22%;height:22%;margin:-11% 0 0 -11%}.fx-particle svg{width:100%;height:100%;display:block;overflow:visible}.fx-particle path{fill:var(--shard-mid);stroke:var(--ink);stroke-width:1px;vector-effect:non-scaling-stroke}.fx-hit[data-kind=sunk] .fx-particle{animation-duration:.9s}@keyframes flash{0%{opacity:1;transform:scale(.25)rotate(-12deg)}60%{opacity:1}to{opacity:0;transform:scale(1)rotate(0)}}@keyframes shock{0%{opacity:1;transform:scale(.3)}to{opacity:0;transform:scale(2.2)}}@keyframes particle{0%{transform:rotate(var(--turn)) translateY(0) rotate(0deg) scale(1);opacity:1}to{transform:rotate(var(--turn)) translateY(calc(var(--cell) * -.95)) rotate(160deg) scale(.3);opacity:0}}.fx-bubbles i{border:1.5px solid var(--mark-miss);width:14%;height:14%;animation:bubble 1.1s var(--game-ease) both;border-radius:50%;position:absolute;bottom:20%}.fx-bubbles i:first-child{left:18%}.fx-bubbles i:nth-child(2){animation-delay:.16s;left:46%}.fx-bubbles i:nth-child(3){animation-delay:.3s;left:70%}.fx-bubbles i:nth-child(4){animation-delay:.42s;left:32%}@keyframes bubble{0%{opacity:0;transform:translateY(0)scale(.6)}30%{opacity:1}to{transform:translateY(calc(var(--cell) * -.9)) scale(1.1);opacity:0}}.demo-live .board{overflow:hidden}.demo-piece{position:absolute;inset:0}.demo-piece:not([data-shown]){opacity:0;transform:translateY(calc(var(--cell) * .14))}.demo-live .demo-piece{transition:opacity .8s var(--game-ease), transform .8s var(--game-ease)}.demo-live[data-phase=reset] .demo-piece{transition-duration:.45s}.demo-live .demo-piece[data-wreck][data-shown]{transition:none}.demo-live .ship[data-sinking]{animation-name:demo-sink}@keyframes demo-sink{0%{opacity:1;transform:translateY(-8%)scale(1.08)rotate(-2deg)}35%{opacity:1;transform:translateY(-3%)scale(1.03)rotate(1deg)}to{opacity:1;transform:none}}.demo-marks{position:absolute;inset:0}.demo-mark{display:contents}.demo-live .mark-dot{animation-delay:var(--delay,0s)}.demo-live[data-phase=reset] .demo-marks{opacity:0;transition:opacity .45s var(--game-ease)}.demo-live .aim-line,.demo-live .aim-reticle{transition:opacity .22s var(--game-ease), transform .44s cubic-bezier(.45, 0, .2, 1)}.demo-live[data-aim] .aim-line,.demo-live[data-aim] .aim-reticle{opacity:1}.demo-sonar{aspect-ratio:1;width:150%;position:absolute;top:50%;left:50%;translate:-50% -50%}.demo-sonar:before,.demo-sonar:after{content:"";border:2px solid color-mix(in srgb, var(--mark-miss) 55%, transparent);border-radius:50%;animation:1.3s cubic-bezier(.2,.6,.35,1) both demo-ping;position:absolute;inset:0}.demo-sonar:after{animation-delay:.3s}@keyframes demo-ping{0%{opacity:.9;transform:scale(.04)}to{opacity:0;transform:scale(1)}}.match{gap:14px;padding-top:8px;line-height:1.4;display:grid}.match-bar{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:16px;min-height:76px;display:grid}.side-chip{align-items:center;gap:12px;min-width:0;display:flex}.side-chip[data-side=opponent]{text-align:end;flex-direction:row-reverse;justify-self:end}.side-chip-text{gap:3px;min-width:0;display:grid}.side-chip-name{letter-spacing:-.01em;text-overflow:ellipsis;white-space:nowrap;align-items:center;gap:8px;font-size:16px;font-weight:700;display:flex;overflow:hidden}.side-chip[data-side=opponent] .side-chip-name{justify-content:flex-end}.side-chip-meta{color:var(--muted-foreground);font-variant-numeric:tabular-nums;align-items:center;gap:8px;font-size:14px;display:flex}.side-chip[data-side=opponent] .side-chip-meta{justify-content:flex-end}.presence{background:var(--ok);border-radius:50%;width:9px;height:9px;display:inline-flex}.presence[data-away]{background:var(--warn)}.presence-away{color:var(--warn);white-space:nowrap;font-weight:600}.turn{border-radius:var(--radius-pill);align-items:center;gap:14px;min-width:260px;min-height:76px;padding:8px 22px 8px 8px;display:flex}.turn-text{gap:3px;min-width:170px;display:grid;position:relative}.turn-lines{display:grid}.turn-rule{color:var(--muted-foreground);font-size:12px;line-height:1.35}.turn-line{opacity:0;transition:opacity var(--duration-base) var(--game-ease), transform var(--duration-base) var(--game-ease);grid-area:1/1;gap:2px;display:grid;transform:translateY(8px)}.turn-line[data-on]{opacity:1;transform:none}.turn-line strong{font-family:var(--font-sign);letter-spacing:-.01em;font-size:16px;font-weight:900;line-height:1.25}.turn-line span{color:var(--muted-foreground);font-size:13px}.ring{--ring-size:52px;--ring-width:4px;--ring-color:var(--foreground);width:var(--ring-size);height:var(--ring-size);border-radius:50%;flex-shrink:0;position:relative}.ring[data-urgent]{--ring-color:var(--danger)}.ring-track{border:var(--ring-width) solid color-mix(in srgb, var(--foreground) 14%, transparent);border-radius:50%;position:absolute;inset:0}.ring-half{position:absolute;inset:0}.ring-half[data-half=right]{clip-path:inset(0 0 0 50%)}.ring-half[data-half=left]{clip-path:inset(0 50% 0 0)}.ring-fill{border:var(--ring-width) solid var(--ring-color);border-radius:50%;position:absolute;inset:0;transform:rotate(180deg)}.ring-half[data-half=right] .ring-fill{clip-path:inset(0 50% 0 0);animation:ring-right var(--ring-total) linear both;animation-delay:var(--ring-offset)}.ring-half[data-half=left] .ring-fill{clip-path:inset(0 0 0 50%);animation:ring-left var(--ring-total) linear both;animation-delay:var(--ring-offset)}@keyframes ring-right{0%{transform:rotate(180deg)}50%,to{transform:rotate(360deg)}}@keyframes ring-left{0%,50%{transform:rotate(180deg)}to{transform:rotate(360deg)}}.ring-value{font-variant-numeric:tabular-nums;letter-spacing:-.02em;place-content:center;justify-items:center;font-size:16px;font-weight:800;line-height:1;display:grid;position:absolute;inset:0}.ring-value small{letter-spacing:.02em;color:var(--muted-foreground);margin-top:2px;font-size:10px;font-weight:600}.ring[data-urgent] .ring-value small{color:inherit}.ring[data-urgent] .ring-value{color:var(--danger);animation:1s ease-in-out infinite urgent}@keyframes urgent{50%{transform:scale(1.12)}}.ring-idle{border:2px solid var(--border);background:var(--secondary);border-radius:50%;flex-shrink:0;place-items:center;width:52px;height:52px;display:grid}.ring-idle svg{width:22px;height:22px}.banner-slot{min-height:52px;display:grid}.banner{border:2px solid var(--border);border-radius:var(--radius-md);background:var(--surface);min-height:52px;animation:banner-in var(--duration-base) var(--game-ease) both;grid-area:1/1;align-items:center;gap:12px;padding:10px 16px;font-size:14px;font-weight:600;line-height:1.4;display:flex}.banner svg{flex-shrink:0;width:20px;height:20px}.banner[data-tone=warn]{background:var(--warn-soft)}.banner[data-tone=info]{background:var(--secondary)}.banner[data-tone=error]{border-color:var(--danger);background:var(--danger-soft);color:var(--danger)}.banner .spinner{flex-shrink:0}.banner-action{margin-inline-start:auto}@keyframes banner-in{0%{opacity:0;transform:translateY(-6px)}}.boards{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:clamp(20px,3vw,48px);display:grid}.board-column{grid-template-columns:minmax(0,1fr);justify-self:center;gap:12px;width:100%;min-width:0;max-width:560px;display:grid}.board-caption{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:4px 12px;min-height:32px;padding-inline:4px;display:flex}.board-caption h2{letter-spacing:-.01em;font-size:16px;line-height:1.2}.fleet-pips{align-items:center;gap:4px;display:flex}.fleet-pip{gap:2px;display:flex}.fleet-pip i{background:var(--foreground);width:8px;height:8px}.fleet-pip[data-gone] i{box-shadow:inset 0 0 0 1px var(--muted-foreground);background:0 0}.match-foot{justify-content:space-between;align-items:center;gap:16px;min-height:48px;display:flex}.last-shot{min-height:24px;color:var(--muted-foreground);font-size:14px}.legend{border:2px dashed var(--border);border-radius:var(--radius-md);background:var(--surface);flex-wrap:wrap;align-items:flex-start;gap:10px 24px;padding:12px 18px;display:flex}.legend-heading{font-family:var(--font-sans);font-size:inherit;letter-spacing:0;font-weight:600;line-height:26px}.legend:not([data-mode=placement]) .legend-list{flex:1 1 0;min-width:min(100%,420px)}.legend-title{font-family:var(--font-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--muted-foreground);font-size:13px;font-weight:400}.legend-toggle{display:none}.legend-list{flex-wrap:wrap;align-items:center;gap:10px 22px;display:flex}.legend-item{align-items:center;gap:10px;min-height:26px;font-size:14px;line-height:1.35;display:flex}.legend-item .kbd{margin-inline:1px}.legend-swatch{--cell:26px;width:calc(var(--w) * var(--cell));height:calc(var(--h) * var(--cell));border-radius:var(--radius-sm);background-color:var(--sea);background-image:linear-gradient(to right, var(--sea-line) 1px, transparent 1px), linear-gradient(to bottom, var(--sea-line) 1px, transparent 1px);background-size:var(--cell) var(--cell);box-shadow:inset 0 0 0 1.5px var(--sea-edge);background-position:-1px -1px;flex-shrink:0;position:relative;overflow:hidden}.placement{grid-template-columns:minmax(0,560px) minmax(300px,380px);justify-content:center;align-items:start;gap:clamp(20px,3vw,44px);display:grid}.placement-side{gap:16px;display:grid}.tray{gap:10px;display:grid}.tray-row{align-items:center;gap:10px;min-height:48px;display:flex}.tray-ship{--tray-cell:40px;width:calc(var(--len) * var(--tray-cell) + 12px);height:calc(var(--tray-cell) + 12px);border-radius:var(--radius-md);cursor:grab;touch-action:none;transition:transform var(--duration-fast) var(--game-ease), opacity var(--duration-fast) var(--game-ease);background:0 0;border:2px solid #0000;padding:6px;display:block;position:relative}.tray-ship:hover:not(:disabled){transform:translateY(-2px)}.tray-ship[aria-pressed=true]{border-color:var(--foreground);background:var(--warn-soft);border-style:dashed}.tray-ship[data-placed]{opacity:.3}.tray-ship:disabled{cursor:default}.tray-done{min-height:48px;color:var(--ok);align-items:center;gap:10px;font-size:14px;font-weight:600;display:flex}.tool-row{flex-wrap:wrap;gap:10px;display:flex}.tool-row>button{flex:auto}.kbd{border-radius:var(--radius-sm);border:1.5px solid var(--border);background:var(--surface);min-width:24px;height:24px;box-shadow:0 2px 0 var(--border);font-family:var(--font-mono);color:var(--foreground);place-items:center;padding-inline:6px;font-size:12px;font-weight:400;line-height:1;display:inline-grid}.ready-note{min-height:44px;color:var(--muted-foreground);align-items:center;gap:10px;font-size:14px;display:flex}.opponent-status{border:1.5px solid var(--border);border-radius:var(--radius-md);background:var(--secondary);align-items:center;gap:10px;min-height:44px;padding:8px 14px;font-size:14px;font-weight:600;display:flex}.opponent-status svg{width:18px;height:18px}.opponent-status[data-ready]{border-color:var(--ok);background:var(--ok-soft);color:var(--ok)}.placement-head{gap:6px;padding-bottom:4px;display:grid}.placement-head h1{letter-spacing:-.025em;font-size:clamp(26px,2.6vw,36px);line-height:1.1}.placement-side .side-chip[data-side=opponent]{text-align:start;flex-direction:row;justify-self:start}.placement-side .side-chip[data-side=opponent] .side-chip-name,.placement-side .side-chip[data-side=opponent] .side-chip-meta{justify-content:flex-start}.placement-meta{gap:10px;display:grid}.placement-timer{align-items:center;gap:12px;display:flex}.placement-timer-text{gap:2px;display:grid}.placement-side h2{font-size:16px;line-height:1.25}.board[data-interactive] button.cell[data-draggable]{cursor:grab;touch-action:none}.ready-note{min-height:58px}.drag-ghost{z-index:60;pointer-events:none;width:calc(var(--len) * var(--ghost-cell));height:var(--ghost-cell);transform-origin:calc(var(--ghost-cell) / 2) 50%;will-change:transform;opacity:.94;filter:drop-shadow(6px 6px 0 color-mix(in srgb, var(--ink) 35%, transparent));position:fixed;top:0;left:0}.drag-ghost[data-orientation=vertical]{filter:drop-shadow(6px -6px 0 color-mix(in srgb, var(--ink) 35%, transparent));rotate:90deg}.result{gap:28px;padding-top:12px;display:grid;position:relative}.result-head{justify-items:start;gap:16px;max-width:760px;display:grid}.result-head h1{letter-spacing:-.035em;font-size:clamp(48px,7vw,104px);line-height:.95}.result-head h1 .og-accent{letter-spacing:-.02em;font-size:1.1em}.result-head p{color:var(--muted-foreground);font-size:18px;line-height:1.5}.rating-delta{border:2px solid var(--border);border-radius:var(--radius-sm);background:var(--secondary);font-variant-numeric:tabular-nums;align-items:center;gap:10px;min-height:40px;padding-inline:16px;font-weight:700;display:inline-flex}.rating-delta[data-sign=up]{border-color:var(--ok);background:var(--ok-soft);color:var(--ok)}.rating-delta[data-sign=down]{border-color:var(--danger);background:var(--danger-soft);color:var(--danger)}.result-stats{flex-wrap:wrap;gap:12px;display:flex}.result-stats .stat{min-width:140px;min-height:0}.result-actions{flex-wrap:wrap;gap:12px;display:flex}.fireworks{z-index:30;pointer-events:none;position:fixed;inset:0;overflow:hidden}.burst{left:var(--bx);top:var(--by);width:0;height:0;position:absolute}.spark{background:var(--spark-color);--turn:calc(var(--i) / var(--n) * 360deg);width:8px;height:6px;animation:1.3s cubic-bezier(.12,.7,.3,1) both spark;animation-delay:var(--delay);border-radius:1px;position:absolute;top:-3px;left:-4px}@keyframes spark{0%{transform:rotate(var(--turn)) translateY(0) scale(1.4);opacity:0}8%{opacity:1}to{transform:rotate(var(--turn)) translateY(var(--reach)) rotate(200deg) scale(.4);opacity:0}}.replay-controls{border-radius:var(--radius-md);flex-wrap:wrap;align-items:center;gap:10px 16px;padding:12px;display:flex}.replay-buttons{gap:6px;display:flex}.replay-slider{min-width:160px;accent-color:var(--foreground);flex:1;height:44px}.replay-step{font-variant-numeric:tabular-nums;min-width:150px;font-size:14px;font-weight:600}.replay-move{min-height:24px;color:var(--muted-foreground);font-size:14px}@media (max-width:1100px){.placement{grid-template-columns:minmax(0,1fr);width:100%;max-width:620px;margin-inline:auto}}@media (max-width:900px){.boards{grid-template-columns:minmax(0,1fr)}.board-column[data-board=target]{order:-1}.match-bar{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"you opp""turn turn";row-gap:12px}.match-bar>.side-chip[data-side=you]{grid-area:you}.match-bar>.side-chip[data-side=opponent]{grid-area:opp}.match-bar>.turn{grid-area:turn;justify-self:stretch}}@media (max-width:767px){.match{margin-inline:-14px}.board{--label:16px;padding:6px 5px 8px 2px}.board-table thead th{padding-bottom:4px}.board-table tbody th{padding-right:2px}.board-caption h2{white-space:nowrap}.fleet-pips{gap:3px}.fleet-pip i{width:6px;height:6px}.board:before{box-shadow:0 0 0 3px var(--ring), 5px 5px 0 3px var(--ring)}.banner-slot{z-index:6;height:0;min-height:0;position:sticky;top:8px}.banner{box-shadow:var(--shadow-hard);position:absolute;inset:0 0 auto}.turn{min-width:0;padding-right:14px}.turn-text{min-width:0}.ring{--ring-size:46px}.side-chip .avatar{width:32px;height:32px;font-size:13px}.tray-ship{--tray-cell:30px}.tool-row>button{gap:8px;padding-inline:12px}.legend{padding:0;display:block}.legend-title{display:none}.legend-toggle{border-radius:inherit;text-align:start;cursor:pointer;background:0 0;border:0;align-items:center;gap:10px;width:100%;min-height:48px;padding:0 16px;font-size:15px;font-weight:600;display:flex}.legend-toggle svg{flex-shrink:0;width:18px;height:18px}.legend-caret{transition:transform var(--duration-fast) var(--game-ease);margin-inline-start:auto}.legend[data-open] .legend-caret{transform:rotate(180deg)}.legend:not([data-open]) .legend-list{display:none}.legend-list{gap:10px;padding:2px 16px 16px;display:grid}.result-stats .stat{min-width:calc(50% - 6px)}}@media (prefers-reduced-motion:reduce){.ring[data-urgent] .ring-value{animation:none}.fx-tracer-body,.fx-splash i,.fx-splash b,.fx-flash,.fx-ring,.fx-particle,.fx-bubbles i,.ship[data-sinking],.ship-enter,.mark-dot,.mark[data-kind=hit]:before,.mark-cross-ink,.mark-stamp,.shot-marker,.banner,.spark{animation:.16s ease-out both fade-soft}.fx-particle,.fx-bubbles,.fx-tracer-trail,.fireworks{display:none}.turn-line,.aim-line,.aim-reticle,.board:before,.tray-ship,.legend-caret,.demo-live .demo-piece,.demo-live .aim-line,.demo-live .aim-reticle{transition-duration:1ms}}@keyframes fade-soft{0%{opacity:0}}}@layer motion-overrides{.demo-live[data-paused] *,.demo-live[data-paused] :before,.demo-live[data-paused] :after{animation-play-state:paused}.legend-swatch *,.legend-swatch :before,.legend-swatch :after{animation:none}}