:root{font-family:DM Sans,sans-serif;color:#edf4f2;background:#091f2b;font-synthesis:none}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 70% 25%,#133742 0,transparent 55%),#091f2b}button,input{font:inherit}button{cursor:pointer;color:inherit}button:disabled{cursor:default;opacity:.45}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #61cddd;outline-offset:3px}.app{max-width:1080px;margin:auto;padding:0 36px}header{height:90px;display:flex;align-items:center;gap:18px;border-bottom:1px solid #ffffff20}.brand{color:#fff;text-decoration:none;font-weight:800;letter-spacing:2px;font-size:14px;display:flex;align-items:center;gap:10px}.brandmark{color:#e6ff7a;font-size:40px}.edition{margin-left:auto;color:#8ca8ae;font-size:10px;letter-spacing:2px}.help{border:1px solid #7d979b;border-radius:50%;width:27px;height:27px;background:none}main{max-width:680px;margin:52px auto 0}.eyebrow{color:#a9bbc0;font-size:11px;letter-spacing:2px;font-weight:700;margin-bottom:24px}h1{font-family:Barlow Condensed,Impact,sans-serif;font-size:clamp(70px,12vw,122px);line-height:.88;margin:0;letter-spacing:-1px;font-weight:900}h1 span{color:#e6ff7a}p{color:#aebfc3;line-height:1.7}h2{font-size:22px;margin:12px 0}.intro{font-size:18px;margin:26px 0}.ocean{position:relative;height:240px;overflow:hidden;background:repeating-linear-gradient(0deg,transparent 0 39px,#61cddd0c 40px),repeating-linear-gradient(90deg,transparent 0 39px,#61cddd0c 40px);border:1px solid #61cddd18;margin:32px 0;border-radius:3px}.radar{position:absolute;width:310px;height:310px;border:1px solid #61cddd26;border-radius:50%;left:48%;top:-50px;background:repeating-radial-gradient(circle,transparent 0 50px,#61cddd15 51px,transparent 52px)}.boat{position:absolute;top:90px;left:calc(50% - 110px);width:220px;height:60px;background:#e6ff7a;clip-path:polygon(0 22%,100% 22%,81% 100%,20% 100%);transform:rotate(-9deg);filter:drop-shadow(0 10px 20px #000)}.boat i{position:absolute;background:#091f2b;width:95px;height:10px;top:27px;left:60px}.boat b{position:absolute;left:85px;top:0;width:55px;height:28px;background:#91b848}.crosshair{position:absolute;left:20%;top:30px;font-size:42px;color:#fa826d}.coord{position:absolute;bottom:18px;left:20px;letter-spacing:2px;font-size:10px;color:#61cddd}.waterline{position:absolute;left:0;bottom:60px;width:100%;height:1px;background:#61cddd40}.launch{padding:26px 0}.tag{font-size:10px;letter-spacing:2px;color:#e6ff7a}.launch h2{font-size:28px}.primary{display:flex;justify-content:space-between;align-items:center;width:100%;background:#e6ff7a;color:#11232b;border:0;padding:20px 23px;font-weight:800;border-radius:5px;margin-top:22px;font-size:16px}.primary:hover{background:#f0ffa9}.primary span{font-size:26px}.small{font-size:12px}.launch .small{text-align:center;letter-spacing:1.8px;font-size:10px}.coming{padding:18px 0;display:flex;gap:10px;align-items:center;color:#adbfc1;border-top:1px solid #ffffff20;font-size:13px}.coming span:last-child{margin-left:auto;font-size:9px;letter-spacing:1px}.dot{height:6px;width:6px;border-radius:50%;background:#61cddd}footer{display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;margin:65px 0 26px;padding-top:20px;border-top:1px solid #ffffff20;font-size:8px;letter-spacing:1.2px;color:#839fa5}footer button{background:none;border:0;color:#bbcacc;padding:0;font-size:10px}.small-title{font-size:clamp(45px,8vw,78px);overflow-wrap:anywhere}.panel{padding:20px;background:#13313c;border:1px solid #ffffff15;border-radius:8px;margin:25px 0}label{display:block;font-size:12px;color:#aebfc3;margin-bottom:15px}label:last-child{margin:0}input{display:block;width:100%;padding:14px;background:#091f2b;border:1px solid #37535c;color:#fff;border-radius:4px;margin-top:7px}.choices{display:grid;grid-template-columns:1fr 1fr;gap:8px}.choices button{padding:15px;background:#14303b;border:1px solid #37535c;text-align:left;border-radius:5px;font-size:12px;display:flex;justify-content:space-between;gap:8px}.choices .chosen{background:#263d32;border-color:#e6ff7a;color:#e6ff7a}.count{font-size:11px;color:#61cddd;margin-left:10px;font-weight:400}.add{display:flex;gap:8px;margin-top:15px}.add input{margin:0}.add button,.toolbar button,.custom{background:#1b3943;border:1px solid #416069;border-radius:4px;padding:10px}.custom{margin:8px 5px 0 0;font-size:12px}.note{font-size:11px;background:#122e39;padding:14px;border-left:2px solid #61cddd}.handoff{text-align:center;padding:30px 0}.handoff .primary{justify-content:center}.lock,.victory{color:#e6ff7a;font-size:80px;margin-bottom:30px}.fleet{display:flex;gap:6px;margin:25px 0 15px}.fleet button{flex:1;background:#14303b;border:1px solid #37535c;border-radius:5px;padding:12px 3px;color:#aebfc3;letter-spacing:2px;font-size:18px}.fleet .selected{border-color:#e6ff7a;color:#e6ff7a}.fleet small{display:block;font-size:9px;letter-spacing:0;margin-top:5px}.toolbar{display:flex;justify-content:space-between;margin:0 0 15px}.toolbar button{font-size:11px}.grid{display:grid;grid-template-columns:repeat(10,1fr);gap:3px;background:#071a24;border:1px solid #38525d;padding:7px;border-radius:6px}.grid button{aspect-ratio:1;border:1px solid #ffffff08;background:#173641;min-width:0;padding:0;color:#d9fafa;font-size:24px;border-radius:2px}.grid button:not(:disabled):hover{background:#2b5360;border-color:#e6ff7a}.grid .ship{background:#647e64;color:#e6ff7a;border-color:#adcf7b60}.grid .hit{background:#df785e;color:#172b32;animation:pop .3s}.grid .miss{background:#203b47;color:#7d9daa}.grid .sunk{background:#ad4f40;border-color:#fa9874}.grid button:disabled{opacity:1}.battle-heading{display:flex;justify-content:space-between;gap:15px}.shots{font-size:35px;color:#e6ff7a;text-align:center}.shots small{display:block;font-size:9px;color:#aebfc3}.board-heading{display:flex;align-items:center;justify-content:space-between;margin:24px 0 9px}.board-heading h2{font-size:16px}.board-heading span{font-size:9px;letter-spacing:1px;color:#aebfc3}.own-grid{max-width:350px;margin:auto}.own-grid button{font-size:15px}.notice{min-height:21px;color:#61cddd}.secondary{width:100%;background:transparent;border:1px solid #60767d;padding:16px;margin-top:12px;border-radius:5px}.textbutton{background:none;border:0;margin-top:18px;color:#aebfc3}.overlay{position:fixed;inset:0;background:#04131dea;z-index:10;display:flex;align-items:center;justify-content:center;padding:22px;overflow-y:auto;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.modal{width:100%;max-width:450px;border:1px solid #4a6970;border-radius:12px;padding:30px;background:#11303c;box-shadow:0 25px 80px #0007}.modal h2{font-family:Barlow Condensed,Impact,sans-serif;font-size:40px;line-height:1.1}.coral{color:#fa9874}.forfeit{font-size:25px;color:#e6ff7a;margin:28px 0}.modal p{overflow-wrap:anywhere}@keyframes pop{0%{transform:scale(.6)}to{transform:scale(1)}}@media(min-width:850px){main{max-width:620px}body{background:radial-gradient(ellipse at 80% 30%,#193d47,transparent 60%),#091f2b}}@media(max-width:600px){.app{padding:0 22px}header{height:72px}.edition{font-size:7px;letter-spacing:1px}main{margin-top:35px}.ocean{height:200px;margin:25px 0}.grid{gap:2px;padding:5px}.grid button{font-size:18px}.choices{gap:7px}.handoff{padding:35px 0}footer{margin-top:45px}.primary{padding:18px}.small-title{font-size:59px}}@media(prefers-reduced-motion:reduce){*{animation:none!important}}:root{color-scheme:dark}.ocean{height:300px;background:radial-gradient(ellipse at 60% 50%,#27576b,transparent 65%),repeating-linear-gradient(165deg,#153d4b 0 2px,#123341 3px 18px);box-shadow:inset 0 0 65px #020e1a}.warship{display:block;width:100%;height:100%;filter:drop-shadow(3px 7px 3px #0008)}.wake{fill:none;stroke:#a2e2e4;stroke-width:3;opacity:.4}.hero-vessel{position:absolute;width:105px;height:300px;left:50%;top:-25px;transform:rotate(57deg)}.hero-escort{position:absolute;width:58px;height:170px;left:18%;top:60px;transform:rotate(57deg);opacity:.8}.ocean-label{position:absolute;right:18px;bottom:18px;font:9px monospace;letter-spacing:1px;color:#b9ced4;text-align:right;line-height:2}.ocean-label b{color:#e6ff7a;font-size:10px}.chart{position:relative;padding:22px 0 0 21px}.col-labels{position:absolute;top:0;left:21px;right:0;display:grid;grid-template-columns:repeat(10,1fr);text-align:center;font:10px monospace;color:#86a9ba}.row-labels{position:absolute;top:22px;bottom:0;left:0;display:grid;grid-template-rows:repeat(10,1fr);align-items:center;font:10px monospace;color:#86a9ba}.grid{position:relative;gap:0;padding:0;border-radius:2px;overflow:hidden;background:radial-gradient(ellipse at 30% 20%,#24576c,#0b2638)}.grid button{background:transparent;border:0;border-right:1px solid #a8def21d;border-bottom:1px solid #a8def21d;border-radius:0;position:relative}.grid .hit{background:#ee774b35;color:#ffbc7c}.grid .miss{background:#ffffff03;color:#9bbfcd}.marker{position:relative;z-index:2;text-shadow:0 0 10px #021525}.ship-layer{position:absolute;inset:0;pointer-events:none}.placed-ship{position:absolute;padding:2px;display:flex;align-items:center;justify-content:center}.placed-ship.horizontal .warship{position:absolute;width:calc(100% / var(--length));height:calc(100% * var(--length));transform:rotate(90deg)}.placed-ship.vertical .warship{width:100%;height:100%}.placed-ship.wreck{opacity:.45;filter:sepia(1)}.fleet button{min-width:0;letter-spacing:0;padding:10px 2px;display:flex;flex-direction:column;align-items:center}.fleet .warship{width:30px;height:86px;margin-bottom:9px}.fleet strong{font-size:10px;line-height:1.3;min-height:27px}.fleet small{font-size:9px}.fleet-report{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:20px 0}.fleet-report>div{display:flex;align-items:center;gap:10px;border:1px solid #54718155;background:#102c3b;padding:10px}.fleet-report .warship{width:20px;height:55px;flex-shrink:0}.fleet-report span{font-size:12px}.fleet-report small{display:block;font-size:8px;margin-top:6px;color:#90b8bd}.fleet-report b{margin-left:auto;font:11px monospace;color:#dce6b5}.fleet-report .lost{opacity:.5}.impact-symbol{font-size:70px;color:#ffac70;text-align:center;animation:pop .4s}.splash .impact-symbol{color:#8fd9ef}.shot-report h2{text-align:center}.shot-report>.eyebrow{text-align:center}.shot-report.impact{border-color:#ac7552}.own-grid{max-width:420px}.board-heading span{color:#aec8d4}@media(max-width:420px){.app{padding:0 16px}.fleet strong{font-size:9px}.fleet-report{grid-template-columns:1fr}.ocean{height:240px}.ocean-label{font-size:8px}.edition{display:none}.help{margin-left:auto}}