:root{--cell:21px;--water-rgb:84 166 209;--water-cell:#ffffffa6;--water-cell-shot:#cbe3f0bf;--paper:#fdfdfb;--grid-line:#00468c14;--water-line:#1e3c501a;--ink:#333;--accent:#2e9e5b}body{color:var(--ink);background:#fff;margin:0;padding:0 0 2em;font-family:Helvetica Neue,Helvetica,Arial,sans-serif}#app{flex-direction:column;display:flex}#app>*{min-width:0}#app-title{text-align:center;letter-spacing:.02em;color:var(--ink);margin:.8em 0 .2em;font-family:Consolas,monospace;font-size:1.9em;font-weight:700}#container{width:max-content;max-width:100%;margin:1.2em auto 0;padding:.5em .7em;font-family:Consolas,monospace;overflow-x:auto}.grid{background:var(--grid-line);-webkit-user-select:none;user-select:none;--fade:44px;-webkit-mask-image:linear-gradient(to right, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent), linear-gradient(to bottom, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);-webkit-mask-composite:source-in;-webkit-mask-image:linear-gradient(to right, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent), linear-gradient(to bottom, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);mask-image:linear-gradient(to right, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent), linear-gradient(to bottom, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);gap:1px;line-height:1;display:grid;-webkit-mask-composite:source-in;mask-composite:intersect}.grid>div{background:var(--paper);justify-content:center;align-items:center;display:flex;overflow:hidden}.grid .label{color:#1e3c506b;font-size:11px}.grid .cell.miss{background:var(--water-cell-shot)}.grid .cell.miss:before{content:"~";color:rgb(var(--water-rgb) / .62);font-size:12px}.grid .cell.left.ship{background:color-mix(in srgb, var(--accent-left) 25%, #fff)}.grid .cell.left.hit{background:var(--accent-left)}.grid .cell.right.ship{background:color-mix(in srgb, var(--accent-right) 25%, #fff)}.grid .cell.right.hit{background:var(--accent-right)}.grid .cell.held{outline-offset:-2px;outline:2px solid #000000b3}.grid .cell.ship.invalid{background:#ce3d3da6}.grid.fire-right .cell.right{cursor:crosshair}.grid .cell.just-shot{animation:.6s ease-out shot-pulse}@keyframes shot-pulse{0%,to{outline-offset:0;outline:0 solid #0000}25%{outline-offset:2px;outline:3px solid #0009}}.grid .name{white-space:nowrap;justify-content:center;gap:.3em;padding:0 .15em;font-size:11px;overflow:hidden}.grid .name.left{cursor:text}.grid .name.active{box-shadow:inset 0 0 0 1px var(--c);background:color-mix(in srgb, var(--c) 10%, var(--paper));font-weight:700}.grid .name .n{color:var(--ink)}.grid .name .s{color:#8a8a8a;border-left:1px solid #1e3c5040;margin-left:.55em;padding-left:.55em;font-size:10px;font-weight:400}.grid .name .nick-input{font:inherit;border:1px solid #bbb;border-radius:3px;width:8em;padding:0 3px}#game-status.status-band{min-height:0;color:var(--ink);text-align:center;white-space:normal;margin:0;padding:.2em 0;font-family:Consolas,monospace;font-size:13px;line-height:1.25;overflow:visible}@media (width<=700px){#container{box-sizing:border-box;width:100%;padding:.4em .15em}#game-invite{order:-2}#game-status:not(.status-band){order:-1}}.grid.solo{--fade:14px;width:100%;margin:0 auto}.grid.solo+.grid.solo{margin-top:.15em}.grid.solo>div{aspect-ratio:1}.grid.solo>div.name,.grid.solo>div.status-band{aspect-ratio:auto}#game-status{text-align:center;min-height:1.5em;color:var(--ink);margin:.5em auto .2em;font-family:Consolas,monospace;font-size:14px}#shot-feedback{text-align:center;min-height:1.5em;color:rgb(var(--water-rgb));margin:0 auto .6em;font-family:Consolas,monospace;font-size:13px;font-weight:700}#game-controls,#color-pick,#new-game{text-align:center;margin:.4em 0;font-family:Consolas,monospace;font-size:14px}#game-controls[hidden],#game-invite[hidden],#color-pick[hidden],#new-game[hidden]{display:none}#new-game{isolation:isolate;align-self:center;width:100%;max-width:36em;padding:3em;position:relative}#new-game:before{content:"";z-index:-1;background-image:linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);background-size:var(--cell) var(--cell);-webkit-mask-composite:source-in;pointer-events:none;background-position:50%;position:absolute;inset:-1.6em;-webkit-mask-image:linear-gradient(90deg,#0000,#000 3em calc(100% - 3em),#0000),linear-gradient(#0000,#000 3em calc(100% - 3em),#0000);mask-image:linear-gradient(90deg,#0000,#000 3em calc(100% - 3em),#0000),linear-gradient(#0000,#000 3em calc(100% - 3em),#0000);-webkit-mask-composite:source-in;mask-composite:intersect}#game-controls button{font:inherit;cursor:pointer;margin:.25em;padding:.35em .9em}#game-controls .confirm:not(:disabled){border-color:var(--accent);background:color-mix(in srgb, var(--accent) 12%, #fff);font-weight:700}#new-game button{font:inherit;cursor:pointer}#new-game .primary{box-sizing:border-box;color:#fff;background:var(--accent);border:none;border-radius:5px;margin:.7em auto .3em;padding:.5em 1.6em;font-size:1.05em;font-weight:700;display:block;box-shadow:0 2px 8px #2e9e5b66}#new-game .primary:hover:not(:disabled){background:#278a4e}#new-game .primary:disabled{box-shadow:none;cursor:not-allowed;background:#b7bcb9}#new-game .sizes{justify-content:center;gap:.6em;margin:.6em 0;display:flex}.size-card{font:inherit;color:var(--ink);cursor:pointer;background:#fff;border:2px solid #ddd;border-radius:8px;flex-direction:column;align-items:center;gap:.35em;padding:.5em .9em;display:flex}.size-card .mini-grid{width:52px;height:52px;display:block}.size-card .mini-grid .mg-bg{fill:var(--water-cell);stroke:#1e3c5047;stroke-width:1px}.size-card .mini-grid .mg-line{stroke:#1e3c5047;stroke-width:1px;vector-effect:non-scaling-stroke}.size-card.selected .mini-grid .mg-bg{fill:color-mix(in srgb, var(--accent) 8%, var(--water-cell))}.size-card .label{font-size:12px;font-weight:700}.size-card.selected{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 10%, #fff)}#new-game .fleet{flex-wrap:wrap;justify-content:center;gap:1em;margin:.8em 0 .5em;display:flex}.ship-picker{flex-direction:column;align-items:center;gap:.35em;display:flex}.ship-picker .sketch{align-content:end;gap:2px;min-height:24px;display:grid}.ship-picker .sketch>div{width:11px;height:11px}.ship-picker .sketch>div.filled{background:#7f9fb3;border-radius:2px}.ship-picker .label{color:#555;white-space:nowrap;font-size:12px}.stepper{align-items:center;gap:.5em;display:flex}.stepper button{width:1.8em;height:1.8em;font:inherit;color:var(--ink);cursor:pointer;background:#fff;border:1px solid #ccc;border-radius:50%;margin:0;padding:0;font-weight:700;line-height:1}.stepper button:disabled{opacity:.3;cursor:not-allowed}.stepper .count{text-align:center;min-width:1.3em;font-weight:700}.colors-label{color:#777;text-align:center;margin-bottom:.3em;font-size:12px}#new-game .colors,#color-pick .swatches{flex-wrap:nowrap;justify-content:center;align-items:center;gap:.35em;display:flex}#new-game .colors{margin:.5em 0}.swatch{aspect-ratio:1;background:var(--c);cursor:pointer;border:2px solid #0000;border-radius:50%;flex:1 1 0;min-width:0;max-width:1.7em;padding:0;position:relative}.swatch.selected{border-color:var(--ink);box-shadow:inset 0 0 0 1px #fff}.swatch.taken{opacity:.55;cursor:not-allowed}.swatch.taken:after{content:"";background:linear-gradient(45deg,#0000 44%,#282828e6 44% 56%,#0000 56%);border-radius:50%;position:absolute;inset:0}@media (width<=700px){#new-game .primary{width:100%;padding:.8em 1em;font-size:1.15em}.size-card{padding:.7em 1.1em}.stepper button{width:2.4em;height:2.4em;font-size:1.15em}.swatch{max-width:2.3em}#new-game .fleet{max-width:21em;margin-left:auto;margin-right:auto}}#new-game .summary{color:#777;margin:.7em 0 1.1em;font-size:12px}#game-invite{flex-wrap:nowrap;align-items:center;gap:.4em;max-width:30em;margin:.5em auto;padding:0 .5em;font-family:Consolas,monospace;font-size:13px;display:flex}#game-invite input{min-width:0;font:inherit;color:var(--ink);background:#fdfdfd;border:1px solid #ccc;border-radius:4px;flex:auto;width:27em;padding:.35em .5em}#game-invite button{font:inherit;cursor:pointer;background:#fff;border:1px solid #ccc;border-radius:4px;flex:none;padding:.35em .9em}#game-banner{color:#222;text-shadow:0 2px 12px #ffffffe6;pointer-events:none;z-index:100;justify-content:center;align-items:center;font-family:Consolas,monospace;font-size:clamp(2rem,8vw,4rem);font-weight:700;display:flex;position:fixed;inset:0}#game-banner[hidden]{display:none}#game-banner.show{animation:2.4s ease-out forwards banner}@keyframes banner{0%{opacity:0;transform:scale(.6)}12%{opacity:1;transform:scale(1.05)}20%{transform:scale(1)}80%{opacity:1}to{opacity:0;transform:scale(1)}}