:root{--bg:#070d1c;--ink:#eef3ff;--dim:#93a4c4;--line:#a0beff29;--card:#091122d1;--gold:#ffcf5a;--sea:#2a5d92;--mint:#6dffb0;--ember:#ff6a3c;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body,#root{background:var(--bg);height:100%;color:var(--ink);margin:0;font:15px/1.5 Inter,system-ui,sans-serif;overflow:hidden}a{color:var(--gold)}button,.btn{cursor:pointer;background:var(--gold);color:#1a1205;text-align:center;border:0;border-radius:10px;padding:10px 16px;font:700 14px Inter,sans-serif;text-decoration:none;display:inline-block}button:disabled{opacity:.5;cursor:default}button.ghost,.btn.ghost{color:var(--ink);border:1px solid var(--line);background:#ffffff0f}button.small{padding:6px 10px;font-size:12px}input{border:1px solid var(--line);color:var(--ink);background:#00000059;border-radius:9px;min-width:0;padding:9px 11px;font:600 14px Inter}code{background:#ffffff0f;border-radius:5px;padding:1px 5px;font:12px ui-monospace,monospace}.dim{color:var(--dim)}.small{font-size:12px}.err{color:#ff9b8a}.grow{flex:1}.row{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.sea{position:fixed;inset:0}.sea canvas{touch-action:none;display:block}.top{z-index:5;pointer-events:none;align-items:center;gap:10px;padding:10px 16px;display:flex;position:fixed;top:0;left:0;right:0}.top>*{pointer-events:auto}.logo{letter-spacing:2px;color:#fff;text-shadow:0 0 14px #ffcf5a8c,3px 3px #1d3b63;font:700 20px Silkscreen,monospace;text-decoration:none}.acct{align-items:center;gap:8px;font-size:12px;display:flex}.acct a{color:var(--mint)}.harbour{z-index:2;background:linear-gradient(#070d1c33,#070d1ca6 40%,#070d1ce6);padding:64px 16px 40px;position:fixed;inset:0;overflow-y:auto}.harbour>section{max-width:760px;margin:0 auto 16px}.hero{text-align:center;padding:24px 0 8px}.hero h1{letter-spacing:4px;color:#fff;text-shadow:0 0 26px #ffcf5a99,5px 5px #1d3b63;margin:0;font:700 clamp(40px,9vw,76px) Silkscreen,monospace}.hero p{color:#c8d4ee;max-width:600px;margin:12px auto 18px}.name{color:var(--dim);align-items:center;gap:10px;font-size:13px;display:inline-flex}.panel{background:var(--card);border:1px solid var(--line);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:16px;padding:16px 18px}.panel h2{color:var(--gold);letter-spacing:1px;margin:0 0 10px;font:700 15px Silkscreen,monospace}.admirals{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;display:grid}.admiral{text-align:left;color:var(--ink);border:1px solid var(--line);background:#ffffff0d;flex-direction:column;gap:3px;padding:12px 14px;display:flex}.admiral b{font-size:16px}.admiral small{color:var(--dim);text-transform:uppercase;letter-spacing:1px;font-size:10px}.admiral span{color:#c8d4ee;font-size:13px;font-weight:400}.admiral.easy{border-left:3px solid var(--mint)}.admiral.medium{border-left:3px solid var(--gold)}.admiral.hard{border-left:3px solid var(--ember)}.admiral:hover:not(:disabled){background:#ffffff1a}.battles{gap:6px;margin:0;padding:0;list-style:none;display:grid}.battles a{color:var(--ink);background:#ffffff0a;border-radius:10px;align-items:center;gap:12px;padding:10px 12px;text-decoration:none;display:flex}.battles a span{flex:1}.battles i{color:var(--dim);font-style:normal}.battles em{color:var(--dim);font-size:12px;font-style:normal}.battles em.hot{color:var(--gold);font-weight:700}.battles small{color:var(--dim)}.ledger{border-collapse:collapse;width:100%;font-size:13px}.ledger td{border-top:1px solid var(--line);padding:5px 6px}.how ol{margin:0 0 8px;padding-left:20px}.how li{margin-bottom:6px}.foot{text-align:center;color:var(--dim);font-size:12px}.hud{pointer-events:none;z-index:3;position:fixed;inset:0}.hud .card{pointer-events:auto;background:var(--card);border:1px solid var(--line);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:14px;padding:12px 14px}.status{text-align:center;width:min(560px,100% - 32px);position:absolute;top:54px;left:50%;transform:translate(-50%)}.status p{margin:4px 0 0}.status p.go{color:var(--gold);font-weight:700}.vs{justify-content:center;align-items:baseline;gap:6px;font-size:14px;display:flex}.vs b{font:700 18px Silkscreen,monospace}.vs i{color:var(--dim);font-size:12px;font-style:normal}.vs .me{color:var(--mint);font-weight:700}.vs .them{color:#ffb59c;font-weight:700}.vs .sep{color:var(--dim);margin:0 8px}.dock{text-align:center;flex-direction:column;align-items:center;gap:6px;width:min(560px,100% - 32px);display:flex;position:absolute;bottom:16px;left:50%;transform:translate(-50%)}.invite input{flex:1;width:280px}.side{width:260px;max-height:calc(100% - 70px);font-size:13px;position:absolute;top:54px;right:16px;overflow:auto}.side h3{color:var(--gold);letter-spacing:1px;margin:4px 0 6px;font:700 12px Silkscreen,monospace}.fleets{grid-template-columns:1fr 1fr;gap:6px;display:grid}.fleets ul{margin:0;padding:0;font-size:12px;list-style:none}.fleets ul:first-child{color:#b9f5d8}.fleets ul:last-child{color:#ffd0c0}.fleets i{letter-spacing:-1px;opacity:.7;font-style:normal}.fleets li.sunk{opacity:.4;text-decoration:line-through}blockquote{border-left:3px solid var(--gold);background:#ffcf5a0f;border-radius:0 8px 8px 0;margin:10px 0;padding:8px 10px;font-style:italic}blockquote b{color:var(--gold);font-size:11px;font-style:normal;display:block}.signed{color:var(--mint);font-size:10px;font-style:normal;display:block}.txs{margin:0 0 8px;padding:0;font-size:12px;list-style:none}.center{text-align:center;width:min(460px,100% - 32px);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.center h2{margin:4px 0 8px;font:700 26px Silkscreen,monospace}.center .row{justify-content:center}.result h2.win{color:var(--gold);text-shadow:0 0 18px #ffcf5a99}.result h2.lose{color:#ff9b8a}.toast{border:1px solid var(--gold);color:var(--gold);pointer-events:none;background:#0a1224eb;border-radius:12px;padding:12px 18px;font:700 16px Silkscreen,monospace;animation:.25s ease-out pop;position:absolute;top:40%;left:50%;transform:translate(-50%)}@keyframes pop{0%{opacity:0;transform:translate(-50%)scale(.85)}}.badge{color:var(--dim);font-size:11px;position:absolute;bottom:16px;left:16px}.narrow-tabs{display:none}@media (max-width:900px){.side{width:auto;max-height:30%;inset:auto 16px 16px}.side h3:not(:first-child),.side .txs,.side p.dim{display:none}.dock{bottom:calc(30% + 28px)}}@media (max-aspect-ratio:5/4){.narrow-tabs{pointer-events:auto;gap:6px;display:flex;position:absolute;top:140px;left:50%;transform:translate(-50%)}.narrow-tabs button{color:var(--ink);border:1px solid var(--line);background:#ffffff14;padding:6px 10px;font-size:12px}.narrow-tabs button.on{background:var(--gold);color:#1a1205}}.ob-overlay{z-index:20;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#0307109e;place-items:center;padding:16px;display:grid;position:fixed;inset:0}.ob-card{border:1px solid var(--line);text-align:center;background:#0d1830;border-radius:18px;width:min(460px,100%);max-height:calc(100% - 32px);padding:22px 22px 18px;overflow:auto;box-shadow:0 30px 80px #0000008c}.ob-card.wide{text-align:left;width:min(760px,100%)}.ob-card h2{color:var(--gold);letter-spacing:1px;margin:6px 0 10px;font:700 20px Silkscreen,monospace}.ob-card p{color:#c8d4ee;margin:0 0 8px}.ob-art{filter:drop-shadow(0 0 18px #ffcf5a73);font-size:54px;line-height:1}.ob-dots{justify-content:center;gap:6px;margin:12px 0 4px;display:flex}.ob-dots i{background:#fff3;border-radius:50%;width:8px;height:8px}.ob-dots i.on{background:var(--gold)}.ob-row{margin-top:12px}.ob-sheet{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:4px 20px;font-size:13.5px;display:grid}.ob-sheet h3{color:var(--mint);letter-spacing:1px;margin:8px 0 4px;font:700 12px Silkscreen,monospace}.ob-sheet ul{color:#c8d4ee;margin:0;padding-left:18px}.ob-sheet li{margin-bottom:5px}kbd{border:1px solid var(--line);background:#ffffff14;border-radius:5px;padding:1px 6px;font:600 11px ui-monospace,monospace}.ob-coach{z-index:15;pointer-events:auto;border:1px solid var(--gold);background:#102040;border-radius:14px;width:320px;max-width:calc(100% - 32px);padding:12px 14px;animation:.25s ease-out pop;position:fixed;box-shadow:0 16px 50px #00000080,0 0 24px #ffcf5a2e}.ob-coach small{color:var(--dim);text-transform:uppercase;letter-spacing:1px;font-size:11px}.ob-coach b{color:var(--gold);margin:2px 0 4px;font:700 14px Silkscreen,monospace;display:block}.ob-coach p{color:#dbe5fa;margin:0 0 8px;font-size:13.5px}.ob-ring{z-index:14;border:2px solid var(--gold);pointer-events:none;border-radius:16px;animation:1.6s ease-in-out infinite pulse;position:fixed;box-shadow:0 0 0 9999px #03071040,0 0 20px #ffcf5a80}@keyframes pulse{50%{border-color:#ffcf5a73}}@media (max-width:600px){.top button.ghost.small[title^=How]{font-size:0}.top button.ghost.small[title^=How]:before{content:"?";font-size:12px}}.chartbox{width:196px;padding:8px 10px;position:absolute;top:54px;left:12px}.charts{gap:8px;display:grid}.charts figure{margin:0}.charts figcaption{color:var(--gold);letter-spacing:1px;margin-bottom:4px;font:700 11px Silkscreen,monospace}.grid{grid-template-columns:repeat(10,1fr);gap:2px;display:grid}.grid .cell{aspect-ratio:1;background:#1d4775;border:0;border-radius:3px;min-width:0;padding:0;display:block}.grid.enemy .cell.fog{background:#46587a}.grid.enemy.live .cell.fog{cursor:crosshair}.grid.enemy.live .cell.fog:hover,.grid .cell.aim{background:var(--ember);box-shadow:0 0 8px var(--ember)}.grid .cell.miss{background:#2b4366 radial-gradient(circle,#dfe8f5 28%,#0000 30%);box-shadow:inset 0 0 0 3px #1d4775}.grid .cell.hit{background:#ff5a2a;box-shadow:0 0 6px #ff5a2ab3}.grid .cell.wreck{background:#5a1e14}.grid .cell.ship{background:#8a5a33}.grid .cell.last{outline:2px solid var(--gold);outline-offset:1px;animation:1.2s ease-in-out infinite pulse}.grid button.cell:disabled{cursor:default}.log{gap:2px;margin:10px 0 0;padding:0;font-size:12px;list-style:none;display:grid}.log li{background:#ffffff08;border-radius:6px;grid-template-columns:1fr auto auto;gap:8px;padding:2px 6px;display:grid}.log li:first-child{background:#ffcf5a1a}.log li.me span{color:var(--mint)}.log li.them span{color:#ffb59c}.log b{font-family:ui-monospace,monospace}.log em{color:var(--dim);font-style:normal}.log em.hit{color:#ff9b70;font-weight:700}.stats{color:var(--mint);margin-top:2px;font-size:12px;display:block}.cursor-tag{z-index:12;pointer-events:none;border:1px solid var(--line);background:#0a1224e6;border-radius:8px;align-items:baseline;gap:6px;padding:3px 8px;font-size:12px;display:flex;position:fixed}.cursor-tag b{color:var(--gold);font:700 13px Silkscreen,monospace}.cursor-tag span{color:var(--dim)}.turn-banner{color:var(--gold);letter-spacing:6px;text-shadow:0 0 30px #ffcf5acc,4px 4px #1d3b63;pointer-events:none;font:700 clamp(30px,6vw,64px) Silkscreen,monospace;animation:1.3s ease-out forwards banner;position:absolute;top:34%;left:50%;transform:translate(-50%,-50%)}@keyframes banner{0%{opacity:0;transform:translate(-50%,-50%)scale(1.4)}18%{opacity:1;transform:translate(-50%,-50%)scale(1)}75%{opacity:1}to{opacity:0;transform:translate(-50%,-60%)}}.status p.go{animation:1.6s ease-in-out infinite glowtext}@keyframes glowtext{50%{text-shadow:0 0 12px #ffcf5a99}}button:not(:disabled):active{transform:translateY(1px)}@media (max-width:900px){.chartbox{width:200px;top:auto;bottom:calc(30% + 28px);left:16px}.chartbox .log,.chartbox figure:last-child{display:none}}@media (hover:none){.cursor-tag{display:none}}.phonebar{display:none}@media (max-aspect-ratio:5/4){.status .narrow-tabs{justify-content:center;margin-top:6px;position:static;transform:none}}@media (max-width:600px){.top{gap:6px;padding:8px 10px}.logo{letter-spacing:1px;font-size:15px}.top button.small{white-space:nowrap;padding:5px 8px}.acct a{display:none}.status{width:calc(100% - 20px);padding:8px 10px;top:46px}.status p{font-size:13px;line-height:1.35}.status small.dim,.status .stats{display:none}.vs{gap:4px;font-size:12px}.vs .sep{margin:0 4px}.vs .me,.vs .them{text-overflow:ellipsis;white-space:nowrap;max-width:30vw;overflow:hidden}.side,.chartbox{display:none}.side.open,.chartbox.open{z-index:6;width:auto;max-height:55vh;display:block;position:fixed;inset:auto 10px 62px;overflow:auto}.side.open h3,.side.open .txs,.side.open p.dim,.chartbox.open figure:last-child,.chartbox.open .log{display:block}.chartbox.open .charts{grid-template-columns:1fr 1fr}.phonebar{z-index:6;pointer-events:auto;gap:8px;display:flex;position:fixed;bottom:12px;right:10px}.phonebar button{color:var(--ink);border:1px solid var(--line);background:#091122e6;padding:9px 14px}.phonebar button.on{background:var(--gold);color:#1a1205}.dock{width:calc(100% - 20px);padding:8px;bottom:10px}.dock small{display:none}.dock .row{flex-wrap:nowrap;justify-content:center}.dock .row button{padding:9px 12px}.turn-banner{letter-spacing:3px;font-size:30px}.center{width:calc(100% - 20px)}}