:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;--bg:var(--lightningcss-light,#f6eedb)var(--lightningcss-dark,#d9c48b);--panel:var(--lightningcss-light,#faf3e2)var(--lightningcss-dark,#e1cd97);--text:var(--lightningcss-light,#23272d)var(--lightningcss-dark,#2b2210);--game-font:"The Girl Next Door", cursive;--rule:2rem;--wiggle:url(#wiggle);--rule-blue:var(--lightningcss-light,#bcd6ee)var(--lightningcss-dark,#9fb0aa);--margin-x:clamp(1.5rem, 7vw, 4.5rem);--margin-red:var(--lightningcss-light,#e58a8a)var(--lightningcss-dark,#b5563f);--pencil:var(--lightningcss-light,#4d5157)var(--lightningcss-dark,#4a3f2a);--water:transparent;--water-line:var(--lightningcss-light,#a9b4c0)var(--lightningcss-dark,#8c7b50);--ship:var(--lightningcss-light,#5b6168)var(--lightningcss-dark,#6b5d3a);--ship-ink:#10151b;--ship-fill:color-mix(in srgb, var(--pencil) 14%, transparent);--ship-mark:var(--ship-ink);--hit:#d6402f;--miss:var(--lightningcss-light,#2e62b0)var(--lightningcss-dark,#1f4f9c);--hit-ink:var(--lightningcss-light,#cc2f1f)var(--lightningcss-dark,#b32416);--accent:var(--lightningcss-light,#1b6fb8)var(--lightningcss-dark,#1a5a96);--ok:var(--lightningcss-light,#3a9d5d)var(--lightningcss-dark,#2f7d4d)}@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-color:var(--bg);background-image:linear-gradient(90deg, transparent calc(var(--margin-x) - 1px), var(--margin-red) calc(var(--margin-x) - 1px) calc(var(--margin-x) + 1px), transparent calc(var(--margin-x) + 1px)), repeating-linear-gradient(transparent 0 calc(var(--rule) - 1px), var(--rule-blue) calc(var(--rule) - 1px) var(--rule));background-position:0 0,0 0;overflow-x:hidden}body{font-family:var(--game-font);font-size:1.35rem;line-height:var(--rule);color:var(--text);background:0 0;min-height:100dvh;margin:0;overflow-x:hidden}.app{box-sizing:border-box;padding:var(--rule) 1rem 0;text-align:center;margin:0 auto}h1,h2,p,legend,label,.status,.fleet-edit .ship-name,footer a{position:relative;top:.6rem}p{margin:0}.hint{margin-bottom:var(--rule)}header{flex-wrap:wrap;justify-content:center;align-items:center;column-gap:1rem;display:flex}h1{font-size:2.2rem;line-height:calc(var(--rule) * 2);margin:0;top:1.4rem}h2{font-size:1.5rem;line-height:var(--rule);margin:0}footer{margin:var(--rule) 0}.copyright{color:var(--accent);text-decoration:underline}button{font:inherit;box-sizing:border-box;height:calc(var(--rule) + 1px);border:1px solid var(--water-line);color:var(--text);cursor:pointer;background:0 0;border-radius:0;margin:-1px 0 0;padding:0 .9rem;line-height:1}@media (hover:hover){button:hover:not(:disabled){border-color:var(--accent)}}button{white-space:nowrap}button:disabled{opacity:.45;cursor:default}button[aria-pressed=true],button.primary{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent) inset;font-weight:700}button.link{color:var(--accent);background:0 0;border:none;text-decoration:underline}.panel{background:var(--panel);padding:var(--rule) 1.25rem;margin:var(--rule) auto;border-radius:0;max-width:34rem;box-shadow:0 1px 8px #00000026}.placement{max-width:40rem;box-shadow:none;background:0 0}.panel.over{box-shadow:none;--outline:var(--accent);background:0 0;max-width:24rem;position:relative}.panel.over.lose{--outline:var(--hit)}.panel.over:before{content:"";border:2px solid var(--outline);pointer-events:none;position:absolute;inset:-1px 0 0}.panel.over .row{margin:-1px 0 0}.panel.over h2{font-size:1.8rem;line-height:calc(var(--rule) * 2);height:calc(var(--rule) * 2);margin:0}.error{color:var(--hit)}kbd{font:inherit}kbd:before{content:"‘"}kbd:after{content:"’"}.hint-btn{height:calc(var(--rule) + 1px);box-sizing:border-box;vertical-align:top;border:1px solid var(--water-line);border-radius:0;align-items:center;gap:.25em;margin:-1px 0 0;padding:.55rem .4em 0;line-height:1;display:inline-flex;position:relative;top:-.6rem}.row{flex-wrap:wrap;justify-content:center;align-items:center;column-gap:.5rem;margin:0;display:flex}.setup{max-width:46rem;margin:var(--rule) auto}.setup h2{text-align:center;margin-bottom:var(--rule)}.setup .primary{width:100%;margin-top:var(--rule);display:block}fieldset{margin:0 0 var(--rule);text-align:left;background:0 0;border:none;border-radius:0;min-width:0;padding:0 .75rem;position:relative}fieldset:before{content:"";border:1px solid var(--water-line);pointer-events:none;border-radius:0;position:absolute;inset:-1px 0 0}fieldset label{margin:0;display:block}input,select{box-sizing:border-box;font:inherit;vertical-align:middle;margin:0 .3rem 0 0}input[type=radio],input[type=checkbox]{appearance:none;vertical-align:top;width:calc(var(--rule) + 1px);height:calc(var(--rule) + 1px);border:1px solid var(--pencil);filter:var(--wiggle);cursor:pointer;background:0 0;border-radius:0;margin:-1px .6rem 0 0;padding:0;position:relative;top:-.6rem}input[type=radio]:checked:after,input[type=checkbox]:checked:after{content:"";background:var(--hit-ink);position:absolute;inset:5px;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 5 C9 9.5 15 15.5 20 20 M19.5 4 C15 9 9.5 14.5 4 19.5' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round'/%3E%3C/svg%3E") 50%/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 5 C9 9.5 15 15.5 20 20 M19.5 4 C15 9 9.5 14.5 4 19.5' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round'/%3E%3C/svg%3E") 50%/100% 100% no-repeat}input:not([type=radio]):not([type=checkbox]),select{height:calc(var(--rule) - 4px)}input[type=range]{--slider-track:linear-gradient(var(--accent), var(--accent)) calc(var(--rule) / 2) 50% / calc((100% - var(--rule)) * var(--i) / var(--span)) 3px no-repeat}input[type=range][min][max]{appearance:none;vertical-align:top;width:12rem;max-width:100%;height:calc(var(--rule) + 1px);filter:var(--wiggle);cursor:pointer;background:0 0;margin:-1px .8rem 0 0;padding:0;position:relative;top:-.6rem}input[type=range]::-webkit-slider-runnable-track{height:calc(var(--rule) + 1px);background:var(--slider-track)}input[type=range]::-moz-range-track{height:calc(var(--rule) + 1px);background:var(--slider-track)}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;box-sizing:border-box;width:var(--rule);height:calc(var(--rule) + 1px);background:0 0;border:0;border-radius:0}input[type=range]::-moz-range-thumb{box-sizing:border-box;width:var(--rule);height:calc(var(--rule) + 1px);background:0 0;border:0;border-radius:0}.pair{gap:.6rem;display:flex}.pair fieldset{flex:1 1 0}fieldset .row{justify-content:flex-start;margin:0}legend{float:left;width:100%;height:var(--rule);margin:0;padding:0;font-size:1.2rem;font-weight:700}legend+*{clear:both}legend+button{width:fit-content;display:block;position:relative;top:-1px}dialog.guide{box-sizing:border-box;overscroll-behavior:contain;text-align:left;width:min(36rem,100vw - 2rem);max-height:calc(100dvh - 2rem);padding:var(--rule) 1.75rem var(--rule) 2.75rem;color:var(--text);line-height:var(--rule);background-color:var(--bg);background-image:linear-gradient(90deg, transparent 1.5rem, var(--margin-red) 1.5rem calc(1.5rem + 2px), transparent calc(1.5rem + 2px)), repeating-linear-gradient(transparent 0 calc(var(--rule) - 1px), var(--rule-blue) calc(var(--rule) - 1px) var(--rule));background-attachment:local;border:none;border-radius:0;overflow-y:auto}dialog.guide::backdrop{background:#00000080}.guide .close{float:right;z-index:1;width:var(--rule);height:var(--rule);color:var(--text);background:0 0;border:none;margin:0 -.75rem 0 0;padding:0;font-size:1.4rem;line-height:1;position:sticky;top:0}.guide h2{margin:0 0 var(--rule);text-align:center}.guide h3{font-size:1.2rem;line-height:var(--rule);margin:0}.guide h2,.guide h3,.guide li,.guide th,.guide td{position:relative;top:.6rem}.guide section{margin:0 0 var(--rule);padding:0}.guide ul{margin:0;padding-left:1.2rem}.guide li{margin:0}.guide table{border-collapse:collapse;width:100%}.guide th,.guide td{text-align:left;vertical-align:top;padding:0 .6rem 0 0}.guide th{font-weight:600}.guide .primary{width:100%;display:block}.fleet-edit{margin:0;padding:0;list-style:none}.fleet-edit li{height:var(--rule);align-items:center;gap:.4rem;margin: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}.ship-preview{margin-top:-1px}.ship-preview i{width:var(--rule);height:calc(var(--rule) + 1px);border-radius:0;margin-right:-1px}.fleet-edit .ship-slot{align-self:flex-start}.ship-chip .ship-preview{margin-top:0}.fleet-edit .ship-preview i,.fleet-status .ship-preview i{background:0 0}.ship-chip .ship-preview i{border-color:var(--pencil);background:0 0}.ship-chip[aria-pressed=true] .ship-preview i,.setup button,.setup input[type=radio],.setup input[type=checkbox],.setup .ship-preview i,.setup .hint-btn,.setup fieldset:before{border-width:1.5px}.fleet-edit .len{text-align:center;width:1.5rem}.ship-preview{display:inline-flex;position:relative}.ship-preview .squares{display:inline-flex}.ship-preview i{box-sizing:border-box;background:var(--ship-fill);border:1px solid var(--water-line);position:relative}.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;align-items:center;padding:0;display:inline-flex}.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}.row:has(.ship-chip){margin-top:var(--rule)}.fleet-status{margin:var(--rule) 0 0;flex-wrap:wrap;justify-content:center;align-items:center;column-gap:.9rem;padding:0;list-style:none;display:flex}.tonnage{margin:var(--rule) 0 0;height:calc(var(--lines,1) * var(--rule));flex-direction:column;align-items:center;display:flex}.tonnage .squares{justify-content:center;margin-top:-1px;display:flex}.tonnage .squares+.squares{margin-top:-1px}.tonnage i{box-sizing:border-box;width:var(--rule);height:calc(var(--rule) + 1px);border:1px solid var(--water-line);margin-right:-1px;position:relative}.fleet-status li{height:var(--rule);align-items:flex-start;display:flex}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.status{min-height:var(--rule);font-weight:600}.boards{flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:0 1.5rem;display:flex}.boards section{flex:none;min-width:0;max-width:100%}.grid{--cell:min(calc(var(--rule) * 2), calc((100vw - 2rem - var(--rule)) / var(--n)));grid-template-columns:var(--cell) repeat(var(--n), var(--cell));grid-auto-rows:var(--cell);width:max-content;margin:var(--rule) auto;touch-action:manipulation;gap:0;display:grid}.placement .grid{margin:var(--rule) calc(50% - (var(--n) + 1) * var(--cell) / 2)}.axis{justify-content:center;align-items:center;line-height:1;display:flex}.cell{aspect-ratio:1;background:var(--water);border:1px solid #0000;border-radius:0;min-width:0;height:auto;margin:0 -1px -1px 0;padding:0;position:relative}.cell:disabled{opacity:1;cursor:default}@media (hover:hover){.cell:hover:not(:disabled){background:color-mix(in srgb, var(--pencil) 18%, transparent)}}.mark{z-index:2;pointer-events:none;filter:url(#pencil);width:80%;height:80%;position:absolute;inset:10%;overflow:visible}.mark path{fill:none;stroke:currentColor;stroke-width:2.6px;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1}.mark.o{color:var(--miss)}.mark.x{color:var(--hit-ink)}.ship-preview .mark,.tonnage .mark{width:100%;height:100%;inset:0}.ship-preview .mark path,.tonnage .mark path{stroke-width:3.6px}@media (prefers-reduced-motion:no-preference){.mark path{animation:.3s ease-out backwards pencil-draw}.mark path+path{animation-delay:.3s}}@keyframes pencil-draw{0%{stroke-dashoffset:1px}}.cell.preview-ok{background:color-mix(in srgb, var(--ok) 45%, transparent)}.cell.preview-bad{background:color-mix(in srgb, var(--hit) 45%, transparent)}.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,.cell.last{z-index:1}.cell.selected:after,.cell.last:after{content:"";border:2px solid var(--accent);pointer-events:none;z-index:1;filter:var(--wiggle);position:absolute;inset:-1px}.ship-chip.placed:not([aria-pressed=true]){opacity:.45}button:not(.cell):not(.ship-chip):not(.link):not(.close),fieldset:before,.ship-preview .squares,.hint-btn,.grid:before,.panel.over:before{filter:var(--wiggle)}.grid{position:relative}.grid:before{content:"";top:var(--cell);left:var(--cell);width:calc(var(--n) * var(--cell) + 1px);height:calc(var(--n) * var(--cell) + 1px);pointer-events:none;background-image:repeating-linear-gradient(to right, var(--pencil) 0 1px, transparent 1px var(--cell)), repeating-linear-gradient(to bottom, var(--pencil) 0 1px, transparent 1px var(--cell));position:absolute}@media (width<=40rem){.pair{flex-direction:column;gap:0}.fleet-edit li{grid-template-columns:1fr auto;grid-template-rows:var(--rule) var(--rule);height:calc(var(--rule) * 2);gap:0 .4rem;display:grid}.fleet-edit .ship-name{white-space:nowrap;grid-area:1/1}.fleet-edit .ship-slot{grid-area:2/1;justify-self:start;margin-right:0}.fleet-edit .ship-count{grid-area:1/2/3}}