:root{--cell:21px;--water-rgb:84 166 209;--water-cell:#e4f0f7;--water-cell-shot:#cbe3f0;--paper:#fdfdfb;--grid-line:#1e3c5017;--ink:#333}body{color:var(--ink);background:#fff;margin:0;padding:0 0 2em;font-family:Helvetica Neue,Helvetica,Arial,sans-serif}#container{width:max-content;max-width:100%;margin:1.6em 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{background:var(--water-cell)}.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) 38%, #fff)}.grid .cell.left.hit{background:var(--accent-left)}.grid .cell.right.ship{background:color-mix(in srgb, var(--accent-right) 38%, #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:flex-start;gap:.4em;padding:0 .3em;font-size:12px}.grid .name.left{cursor:text}.grid .name.active{box-shadow:inset 0 0 0 2px 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;font-size:11px;font-weight:400}.grid .name .nick-input{font:inherit;border:1px solid #bbb;border-radius:3px;width:8em;padding:0 3px}#game-status{text-align:center;min-height:1.5em;color:var(--ink);white-space:nowrap;text-overflow:ellipsis;margin:.5em auto .2em;font-family:Consolas,monospace;font-size:14px;overflow:hidden}#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,#game-invite,#color-pick,#new-game{text-align:center;margin:.4em auto;font-family:Consolas,monospace;font-size:14px}#game-controls[hidden],#game-invite[hidden],#color-pick[hidden],#new-game[hidden]{display:none}#game-controls button,#new-game button{font:inherit;cursor:pointer;margin:.25em;padding:.35em .9em}#new-game select{font:inherit;margin-left:.4em}#new-game .fleet{margin:.6em 0 .4em}#new-game .fleet label{white-space:nowrap;margin:0 .5em;display:inline-block}#new-game .fleet input{font:inherit;text-align:right;width:3em}#new-game .colors,#color-pick{justify-content:center;align-items:center;gap:.35em;display:flex}#new-game .colors{margin:.5em 0}.swatch{background:var(--c);cursor:pointer;border:2px solid #0000;border-radius:4px;width:1.5em;height:1.5em;padding:0}.swatch.selected{border-color:var(--ink);box-shadow:inset 0 0 0 1px #fff}.swatch.taken{opacity:.3;cursor:not-allowed}#new-game .summary{color:#777;margin-top:.4em;font-size:12px}#game-invite code{-webkit-user-select:all;user-select:all;background:#f0f0f0;border-radius:3px;padding:2px 5px}#game-invite button{font:inherit;cursor:pointer;margin-left:.4em;padding:.1em .5em;font-size:12px}#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)}}