:root{--paper:#f2f0e8;--surface:#fbfaf6;--ink:#0b2239;--ink2:#2f4558;--muted:#53687a;--line:#d6d3c5;--field:#6f8798;--sea:#1b5e8c;--sea-l:#e3ecf1;--sea-m:#bfd2de;--acc:#c2410c;--acc-l:#fbe9df;--ok:#1f6b4a;--ok-l:#ddefe5;--bad:#9b2c1b}*{box-sizing:border-box}body{background:var(--paper);color:var(--ink);margin:0;font-family:Barlow,system-ui,sans-serif;font-size:16px;line-height:1.45}h1,h2,h3{letter-spacing:.02em;text-transform:uppercase;margin:0;font-family:Barlow Condensed,Barlow,sans-serif;font-weight:700;line-height:1.05}h1{font-size:44px}h2{font-size:24px}h3{font-size:18px}p{margin:0}a{color:inherit}.mono{font-family:IBM Plex Mono,ui-monospace,monospace;font-weight:500}.muted{color:var(--muted)}.sm{font-size:14px}.xs{font-size:13px}.b{font-weight:600}.app{flex-direction:column;min-height:100%;display:flex}.top{background:var(--ink);color:#fff;flex-wrap:wrap;align-items:center;gap:8px 32px;min-height:64px;padding:10px 32px;display:flex}.brand{color:#fff;letter-spacing:.06em;text-transform:uppercase;align-items:center;gap:12px;min-height:44px;font-family:Barlow Condensed,sans-serif;font-size:22px;font-weight:700;text-decoration:none;display:flex}.nav{flex-wrap:wrap;flex:1;gap:4px;display:flex}.nav a{color:#c9d8e3;border-bottom:3px solid #0000;align-items:center;min-height:44px;padding:0 14px;font-weight:600;text-decoration:none;display:inline-flex}.nav a.on{color:#fff;border-bottom-color:#f2762e}.nav a:hover{color:#fff}.user{color:#c9d8e3;flex-wrap:wrap;align-items:center;gap:8px 14px;font-size:14px;display:flex}.chip{white-space:nowrap;background:var(--sea-l);color:var(--ink);border-radius:999px;align-items:center;gap:6px;padding:2px 10px;font-size:13px;font-weight:600;line-height:1.5;display:inline-flex}.chip.acc{background:var(--acc);color:#fff}.chip.ok{background:var(--ok);color:#fff}.chip.ink{background:var(--ink2);color:#fff}.chip.line{border:1px solid var(--field);color:var(--ink2);background:0 0}.chip.role{color:var(--ink);background:#fff}.wrap{width:100%;max-width:1160px;margin:0 auto;padding:36px 24px 72px}.pagehead{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:28px;display:flex}.pagehead .sub{color:var(--muted);margin-top:8px}.crumb{color:var(--muted);margin-bottom:10px;font-size:14px}.crumb a{color:var(--sea)}.card{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:22px}.card>h2{margin-bottom:4px}.card .lead{color:var(--muted);margin-bottom:16px;font-size:15px}.stack{flex-direction:column;gap:24px;display:flex}.grid2{grid-template-columns:repeat(auto-fit,minmax(min(440px,100%),1fr));align-items:start;gap:24px;display:grid}.split{flex-wrap:wrap;align-items:flex-start;gap:24px;display:flex}.split>.main{flex:999 560px;min-width:0}.split>.side{flex:320px;min-width:0}.btn{border:1.5px solid var(--ink);background:var(--ink);color:#fff;cursor:pointer;white-space:nowrap;border-radius:8px;justify-content:center;align-items:center;gap:8px;min-height:44px;padding:0 18px;font:600 16px Barlow,sans-serif;text-decoration:none;display:inline-flex}.btn.acc{background:var(--acc);border-color:var(--acc)}.btn.out{color:var(--ink);background:0 0}.btn.outw{color:#fff;background:0 0;border-color:#8fa9bd}.btn.dng{color:var(--bad);border-color:var(--bad);background:0 0}.btn.sm{min-height:40px;padding:0 14px;font-size:15px}.btn.block{width:100%}.btn.dis{color:#43525e;cursor:not-allowed;background:#c9cfd3;border-color:#c9cfd3}.field{flex-direction:column;gap:6px;margin-bottom:16px;display:flex}.field label{font-size:15px;font-weight:600}.field .hint{color:var(--muted);font-size:13px}.input,.select{border:1.5px solid var(--field);width:100%;min-height:46px;color:var(--ink);background:#fff;border-radius:8px;padding:0 14px;font:400 16px Barlow,sans-serif}.select{appearance:auto}.inline-form{flex-wrap:wrap;align-items:flex-end;gap:12px;display:flex}.inline-form .field{flex:220px;margin:0}.seg{border:1.5px solid var(--ink);border-radius:8px;display:inline-flex;overflow:hidden}.seg a{min-height:44px;color:var(--ink);justify-content:center;align-items:center;padding:0 18px;font-weight:600;text-decoration:none;display:inline-flex}.seg a.on{background:var(--ink);color:#fff}.alert{background:var(--sea-l);color:var(--ink);border-radius:8px;gap:10px;padding:12px 14px;font-size:15px;display:flex}.alert.err{color:#6e1d10;background:#f8e3de}.list{flex-direction:column;display:flex}.li{border-top:1px solid var(--line);flex-wrap:wrap;align-items:center;gap:10px 16px;padding:14px 0;display:flex}.li:first-child{border-top:0}.li .grow{flex:200px;min-width:0}.li .t{font-weight:600}.li .acts{flex-wrap:wrap;gap:8px;display:flex}.scroll{overflow-x:auto}.tbl{border-collapse:collapse;width:100%;min-width:640px}.tbl th{text-align:left;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border-bottom:2px solid var(--ink);padding:10px 12px;font:600 13px Barlow,sans-serif}.tbl td{border-bottom:1px solid var(--line);vertical-align:middle;padding:14px 12px}.tbl tr.me td{background:var(--sea-l)}.tbl .acts{flex-wrap:wrap;justify-content:flex-end;gap:8px;display:flex}.empty{text-align:center;color:var(--muted);border:1.5px dashed var(--field);border-radius:10px;padding:28px}.bf{grid-template-columns:22px repeat(var(--cols,10),minmax(0,1fr));width:100%;color:var(--muted);font-family:IBM Plex Mono,monospace;font-size:12px;font-weight:500;display:grid}.bf .l{justify-content:center;align-items:center;min-height:20px;display:flex}.bf .cell{aspect-ratio:1;font:inherit;appearance:none;color:#fff;background:#eaf1f5;border:1px solid #c3d3dd;padding:0;position:relative}.bf .cell.ship{background:var(--ink);border-color:#2b4660}.bf .cell.rev{background:#6b8498;border-color:#566f83}.bf .cell.ghost{background:var(--sea);border-color:#12466a}.bf .cell.water:after{content:"";background:#5b86a3;border-radius:50%;position:absolute;inset:36%}.bf .cell.hit{background:var(--acc);border-color:#8f2f08}.bf .cell.sunk{background:#3a1305;border-color:#1f0a02}.bf .cell.hit:after,.bf .cell.sunk:after{content:"";background:linear-gradient(45deg,#0000 43%,#fff 43% 57%,#0000 57%),linear-gradient(-45deg,#0000 43%,#fff 43% 57%,#0000 57%);position:absolute;inset:22%}.bf .cell.sunk:after{background:linear-gradient(45deg,#0000 43%,#f2762e 43% 57%,#0000 57%),linear-gradient(-45deg,#0000 43%,#f2762e 43% 57%,#0000 57%)}.bf .cell.sel{background:var(--acc-l);outline:3px solid var(--ink);outline-offset:-3px;z-index:1}.bf .cell.sel:after{content:"";background:var(--ink);width:2px;position:absolute;top:15%;bottom:15%;left:50%;box-shadow:0 0 #0000}.bf.click .cell:not(.water):not(.hit):not(.sunk){cursor:crosshair}.bf.click .cell:not(.water):not(.hit):not(.sunk):not(.ship):not(.ghost):not(.sel):hover{background:var(--sea-m)}.legend{color:var(--muted);flex-wrap:wrap;gap:6px 16px;font-size:13px;display:flex}.legend i{vertical-align:-2px;border:1px solid #00000040;border-radius:3px;width:14px;height:14px;margin-right:6px;display:inline-block}.boards{grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr));gap:24px;display:grid}.turn{background:var(--acc);color:#fff;border-radius:10px;flex-wrap:wrap;align-items:center;gap:10px 20px;padding:16px 20px;display:flex}.turn.wait{background:var(--ink2)}.turn.win{background:var(--ok)}.turn.lose{background:#3a1305}.turn h2{font-size:30px}.turn .grow{flex:240px}.pulse{opacity:.9;background:#fff;border-radius:50%;width:10px;height:10px;margin-right:8px;display:inline-block}.log{border:1px solid var(--line);background:#fff;border-radius:8px;flex-direction:column;max-height:340px;display:flex;overflow-y:auto}.log .m{border-bottom:1px solid var(--line);align-items:center;gap:12px;padding:9px 14px;font-size:15px;display:flex}.log .m .n{width:32px;color:var(--muted);font-size:13px}.log .m .w{flex:1}.fleet-row{border-top:1px solid var(--line);flex-wrap:wrap;align-items:center;gap:8px 14px;padding:12px 0;display:flex}.fleet-row:first-child{border-top:0}.fleet-row .blocks{gap:2px;width:110px;display:flex}.fleet-row .blocks i{background:var(--ink);border-radius:3px;width:18px;height:18px}.fleet-row .blocks i.p{background:var(--sea-m);border:1px dashed var(--sea)}.fleet-row .nm{flex:120px;font-weight:600}@media (width<=700px){.top{gap:4px 16px;padding:8px 16px}.nav{flex:100%;order:3}.user{margin-left:auto}.wrap{padding:24px 16px 56px}h1{font-size:34px}.card{padding:16px}.turn h2{font-size:26px}}html,body,#root{min-height:100%}button{font-family:inherit}:focus-visible{outline-offset:2px;outline:3px solid #f2762e}.btn:disabled,.btn[aria-disabled=true]{color:#43525e;cursor:not-allowed;background:#c9cfd3;border-color:#c9cfd3}.btn.out:hover:not(:disabled){background:var(--sea-l)}.btn.dng:hover:not(:disabled){background:#f8e3de}.btn:active:not(:disabled){transform:translateY(1px)}.bf .cell.ghost.bad{border-color:var(--bad);background:#e7b9a6}.bf .cell.ship.picked{background:var(--sea);border-color:#12466a}.bf .cell:disabled{cursor:default}.nav a.active{color:#fff;border-bottom-color:#f2762e}.seg button{min-height:44px;color:var(--ink);cursor:pointer;background:0 0;border:0;justify-content:center;align-items:center;padding:0 18px;font:600 16px Barlow,sans-serif;display:inline-flex}.seg button.on{background:var(--ink);color:#fff}.alert.ok{background:var(--ok-l);color:#0f3d29}.chip:empty{display:none}.center{min-height:50vh;color:var(--muted);justify-content:center;align-items:center;display:flex}.spinner{border:3px solid var(--sea-m);border-top-color:var(--sea);border-radius:50%;width:28px;height:28px;margin-right:12px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.pulse{animation:1.6s ease-in-out infinite pulse}@keyframes pulse{50%{opacity:.25}}@media (prefers-reduced-motion:reduce){.pulse,.spinner{animation:none}}.toast{z-index:20;max-width:min(560px,100% - 32px);position:fixed;bottom:24px;left:50%;transform:translate(-50%);box-shadow:0 6px 24px #0b223940}.fleet-row.active{background:var(--sea-l);margin:0 -12px;padding:12px}.fleet-row .blocks{flex-wrap:wrap}.fleet-row .acts{gap:8px;margin-left:auto;display:flex}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;overflow:hidden;position:absolute!important}.login{background:var(--paper);flex-wrap:wrap;min-height:100vh;display:flex}.login .hero{background:var(--ink);color:#fff;flex-direction:column;flex:520px;justify-content:space-between;gap:40px;padding:48px;display:flex}.login .hero h1{max-width:480px;font-size:64px}.login .form{flex:440px;justify-content:center;align-items:center;padding:48px 24px;display:flex}@media (width<=700px){.login .hero{gap:20px;padding:28px 20px}.login .hero h1{font-size:40px}.login .hero .art{width:160px;height:160px}.login .form{padding:28px 16px}.turn h2[style]{font-size:32px!important}}.shipsvg{width:100%;height:100%;display:block;overflow:visible}.placer{position:relative}.placer .bf .cell.ghost{border-color:var(--sea);background:#cfe0ec}.placer .bf .cell.ghost.bad{border-color:var(--bad);background:#f6d9cf}.placer-layer{pointer-events:none;position:absolute;top:20px;left:22px;right:0}.placer-ship{pointer-events:auto;touch-action:none;cursor:grab;background:0 0;border:0;border-radius:6px;padding:0;position:absolute}.placer-ship:focus-visible{outline-offset:1px}.placer-ship .shipsvg,.dock-ship .shipsvg{filter:drop-shadow(1.5px 3px 2px #0b223961)}.placer-ship.src,.dock-ship.src{opacity:.22}.ship-float{z-index:30;pointer-events:none;position:fixed;top:0;left:0}.ship-float .shipsvg{filter:drop-shadow(9px 16px 9px #0b223952);transform:scale(1.07)}.ship-float.bad .shipsvg{filter:drop-shadow(9px 16px 9px #9b2c1b59)saturate(.5)}.dock{flex-wrap:wrap;align-items:flex-end;gap:8px 12px;min-height:72px;display:flex}.dock-ship{cursor:grab;touch-action:none;font:inherit;color:inherit;background:0 0;border:0;border-radius:10px;flex-direction:column;align-items:flex-start;gap:6px;padding:8px;transition:background .15s,box-shadow .15s;display:flex;box-shadow:inset 0 0 0 1.5px #0000}.dock-ship:hover{background:var(--sea-l)}.dock-ship.on{background:var(--acc-l);box-shadow:inset 0 0 0 1.5px var(--acc)}.dock-ship .art{display:block}.dock-ship .lbl{color:var(--muted);font-family:IBM Plex Mono,monospace;font-size:12px;font-weight:500}.segs{gap:4px;display:flex}.segs i{background:var(--line);border-radius:3px;flex:1;height:6px;transition:background .25s}.segs i.on{background:var(--sea)}.board-wrap{position:relative}.ship-layer{pointer-events:none;position:absolute;top:20px;left:22px;right:0}.ship-layer .ship{position:absolute}.ship-layer .ship .shipsvg{filter:drop-shadow(1.5px 3px 2px #0b223961)}.ship-layer .ship.sunk .shipsvg{filter:drop-shadow(1px 2px 1px #0b22394d)}.ship-layer.faded .ship{opacity:.82}.bf .cell.under{background:#eaf1f5;border-color:#c3d3dd}.bf .cell.under:after{display:none}