:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;--bg:var(--lightningcss-light,#eef3f8)var(--lightningcss-dark,#10171f);--panel:var(--lightningcss-light,#fff)var(--lightningcss-dark,#1a2430);--text:var(--lightningcss-light,#14212e)var(--lightningcss-dark,#e3ebf3);--water:var(--lightningcss-light,#cfe3f5)var(--lightningcss-dark,#16324a);--water-line:var(--lightningcss-light,#a9c8e4)var(--lightningcss-dark,#24506f);--ship:var(--lightningcss-light,#6b7d8f)var(--lightningcss-dark,#7e93a8);--ship-ink:#10151b;--ship-fill:var(--lightningcss-light,var(--bg))var(--lightningcss-dark,var(--ship));--ship-mark:var(--ship-ink);--hit:#d6402f;--miss:var(--lightningcss-light,#7fa2c2)var(--lightningcss-dark,#5d88ad);--accent:var(--lightningcss-light,#1b6fb8)var(--lightningcss-dark,#4aa3ec);--ok:var(--lightningcss-light,#3a9d5d)var(--lightningcss-dark,#52c47a)}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;background:var(--bg);overflow-x:hidden}body{background:var(--bg);color:var(--text);min-height:100dvh;margin:0;font-family:system-ui,sans-serif;overflow-x:hidden}.app{box-sizing:border-box;text-align:center;max-width:1000px;margin:0 auto;padding:1rem}header{flex-wrap:wrap;justify-content:center;align-items:center;gap:1rem;display:flex}h1{margin:.4rem 0}h2{margin:.5rem 0;font-size:1.15rem}footer{margin:1.5rem 0 .5rem}.copyright{color:var(--accent);text-decoration:underline}button{font:inherit;border:1px solid var(--water-line);background:var(--bg);color:var(--text);cursor:pointer;border-radius:6px;padding:.45rem .9rem}button:hover:not(:disabled){border-color:var(--accent)}button:disabled{opacity:.45;cursor:default}button[aria-pressed=true]{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent) inset}button.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}button.link{color:var(--accent);background:0 0;border:none;text-decoration:underline}.panel{background:var(--panel);border-radius:10px;max-width:34rem;margin:1rem auto;padding:1rem 1.25rem;box-shadow:0 1px 8px #00000026}.placement{background:var(--bg);max-width:40rem;box-shadow:none}.panel.over{border:2px solid var(--ok);max-width:24rem;padding:.6rem 1.25rem}.panel.over.lose{border-color:var(--hit)}.panel.over h2{margin:.3rem 0;font-size:1.8rem}.error{color:var(--hit)}kbd{border:1px solid var(--water-line);border-radius:4px;padding:0 .3em}.hint-btn{border:1px solid var(--water-line);vertical-align:middle;border-radius:6px;align-items:center;gap:.25em;padding:0 .4em;display:inline-flex}.row{flex-wrap:wrap;justify-content:center;gap:.5rem;margin:.75rem 0;display:flex}.setup{max-width:34rem;margin:1rem auto}.setup h2{text-align:center;margin-bottom:1rem}.setup .primary{width:100%;margin-top:1.25rem;padding:.7rem;display:block}fieldset{background:color-mix(in srgb, var(--ship) 18%, transparent);text-align:left;border:none;border-radius:6px;min-width:0;margin:.6rem 0;padding:.5rem .75rem .75rem}fieldset label{margin:.3rem 0;display:block}.pair{gap:.6rem;margin:.6rem 0;display:flex}.pair fieldset{flex:1 1 0;margin:0}fieldset .row{justify-content:flex-start;margin:0}fieldset>button{margin-top:.5rem}legend{float:left;width:100%;margin:0 0 .4rem;padding:0;font-size:1rem;font-weight:700}legend+*{clear:both}dialog.guide{box-sizing:border-box;overscroll-behavior:contain;text-align:left;background:var(--bg);width:min(36rem,100vw - 2rem);max-height:calc(100dvh - 2rem);color:var(--text);border:none;border-radius:10px;padding:1.5rem 1.75rem;line-height:1.5;overflow-y:auto}dialog.guide::backdrop{background:#00000080}.guide .close{float:right;z-index:1;width:2rem;height:2rem;color:var(--text);background:0 0;border:none;margin:-.5rem -.75rem 0 0;padding:0;font-size:1.4rem;line-height:1;position:sticky;top:0}.guide h2{text-align:center;margin:0 0 1.25rem}.guide h3{margin:0 0 .6rem;font-size:1rem}.guide section{background:color-mix(in srgb, var(--ship) 18%, transparent);border-radius:6px;margin:0 0 1rem;padding:.9rem 1rem}.guide ul{margin:0;padding-left:1.2rem}.guide li{margin:.5rem 0}.guide table{border-collapse:collapse;width:100%}.guide th,.guide td{text-align:left;border-bottom:1px solid var(--water-line);vertical-align:top;padding:.5rem .6rem}.guide th{font-weight:600}.guide tr:last-child td{border-bottom:none}.guide .primary{width:100%;margin-top:1.25rem;padding:.7rem;display:block}.fleet-edit{margin:0;padding:0;list-style:none}.fleet-edit li{align-items:center;gap:.4rem;margin:.3rem 0;display:flex}.fleet-edit .ship-name{flex:auto;min-width:0}.fleet-edit .ship-slot{flex:none;justify-content:flex-end;margin-right:2.2rem;display:flex}.fleet-edit .ship-count{flex:none;align-items:center;gap:.2rem;display:flex}.fleet-edit .ship-count .step{padding:.25rem .55rem}.fleet-edit .len{text-align:center;width:1.5rem}.ship-preview{display:inline-flex;position:relative}.ship-preview .squares{gap:2px;display:inline-flex}.ship-preview i{box-sizing:border-box;width:var(--sq,14px);height:var(--sq,14px);background:var(--ship-fill);border:1px solid var(--water-line);border-radius:3px}.ship-preview.sunk i{background:color-mix(in srgb, var(--hit) 55%, var(--ship))}.ship-preview.art .silhouette{color:var(--ship-mark);justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.ship-preview.art .silhouette svg{width:92%;height:78%;display:block}.ship-chip{background:0 0;border:none;padding:0}.ship-chip[aria-pressed=true]{box-shadow:none;border-color:#0000}.ship-chip[aria-pressed=true] .ship-preview i{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}.fleet-status{flex-wrap:wrap;justify-content:center;gap:.5rem .9rem;margin:.6rem 0;padding:0;list-style:none;display:flex}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.status{min-height:1.5em;font-weight:600}.boards{flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:1.5rem;display:flex}.boards section{flex:320px;min-width:0;max-width:30rem}.grid{grid-template-columns:1.2rem repeat(var(--n), 1fr);touch-action:manipulation;gap:2px;width:100%;max-width:30rem;margin:.5rem auto;display:grid}.axis{justify-content:center;align-items:center;display:flex}.cell{aspect-ratio:1;border:1px solid var(--water-line);background:var(--water);border-radius:3px;min-width:0;padding:0;position:relative}.cell:disabled{opacity:1;cursor:default}.cell:hover:not(:disabled){background:color-mix(in srgb, var(--accent) 35%, var(--water))}.cell.ship{background:var(--ship-fill);border-color:var(--water-line)}.cell.miss:after{content:"";background:var(--miss);border-radius:50%;position:absolute;inset:34%}.cell.hit:after{content:"";background:var(--hit);border-radius:50%;position:absolute;inset:22%}.cell.hit.sunk{background:color-mix(in srgb, var(--hit) 55%, var(--ship))}.cell.last{outline:2px solid var(--accent);outline-offset:-1px}.cell.preview-ok{background:color-mix(in srgb, var(--ok) 60%, var(--water))}.cell.preview-bad{background:color-mix(in srgb, var(--hit) 55%, var(--water))}.ship-art{pointer-events:none;color:var(--ship-mark);z-index:1;position:relative;overflow:hidden}.ship-art.preview-ok,.ship-art.preview-bad{opacity:.9}.ship-art-inner{width:92%;height:78%;position:absolute;top:11%;left:4%}.ship-art-inner svg{width:100%;height:100%;display:block}@media (prefers-reduced-motion:no-preference){.cell{transition:background .12s}}.icon-btn{justify-content:center;align-items:center;gap:.4rem;display:inline-flex}.cell.selected{outline:2px solid var(--accent);outline-offset:-1px}.ship-chip.placed:not([aria-pressed=true]){opacity:.45}