:root{--pp-css:1;--ink:#120c1a;--panel:#120c1acc;--wood:#6c4125;--wood-hi:#bb8752;--gold:#e6ac2e;--gold-hi:#fbe27a;--cloth:#efe4c6;--sea:#3f9bc4;--sea-hi:#6fc4dc;--red:#d8462c;--red-dk:#a8261f;--green:#7fb84a;color:var(--cloth);background:var(--ink);font-synthesis:none;-webkit-font-smoothing:none;text-rendering:optimizespeed;font-family:Trebuchet MS,Segoe UI,Verdana,sans-serif;font-weight:700}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden}#app{background:var(--ink);cursor:default;position:relative}#game-canvas{width:100vw;height:100vh;image-rendering:pixelated;outline:none;display:block}.frame{background:var(--panel);border:2px solid var(--gold);box-shadow:0 0 0 2px var(--ink), inset 0 0 0 2px var(--ink), 4px 4px 0 2px #120c1a8c;clip-path:polygon(0 4px,4px 4px,4px 0,calc(100% - 4px) 0,calc(100% - 4px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 4px) calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 4px),0 calc(100% - 4px))}#hud{pointer-events:none;text-shadow:2px 2px 0 var(--ink);text-transform:uppercase;letter-spacing:.04em;transition:opacity .12s steps(2,end);position:absolute;inset:0}#hud.dim{opacity:.25}.hidden{display:none!important}.label{color:var(--gold-hi);letter-spacing:.08em;font-size:11px}.value{color:var(--cloth);font-variant-numeric:tabular-nums;font-size:26px;line-height:1}.value small{color:var(--wood-hi);margin-left:2px;font-size:12px}.value.small{font-size:16px}.sub{color:var(--sea-hi);font-variant-numeric:tabular-nums;margin-top:3px;font-size:11px}.panel{padding:10px 12px;position:absolute}#compass{width:420px;height:46px;position:absolute;top:14px;left:50%;overflow:hidden;transform:translate(-50%)}#compass-strip{position:absolute;inset:0 0 14px}#compass-strip .tick{background:var(--wood-hi);width:2px;height:6px;position:absolute;top:4px;transform:translate(-1px)}#compass-strip .tick.major{background:var(--cloth);height:10px}#compass-strip .card{color:var(--cloth);font-size:13px;position:absolute;top:12px;transform:translate(-50%)}#compass-strip .card.n{color:var(--red)}#compass-strip .marker{width:12px;height:12px;position:absolute;top:3px;transform:translate(-50%)}#compass-strip .marker.enemy{background:var(--red);box-shadow:0 0 0 2px var(--ink);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}#compass-strip .marker.wind{background:var(--sea-hi);clip-path:polygon(0 30%,60% 30%,60% 0,100% 50%,60% 100%,60% 70%,0 70%);width:18px;height:10px;top:4px}#compass-caret{background:var(--gold-hi);clip-path:polygon(50% 0,100% 100%,0 100%);width:10px;height:8px;position:absolute;bottom:12px;left:50%;transform:translate(-50%)}#heading-readout{text-align:center;height:13px;color:var(--gold-hi);font-variant-numeric:tabular-nums;background:#120c1ae6;font-size:11px;position:absolute;bottom:0;left:0;right:0}#heading-readout span+span{color:var(--cloth);margin-left:6px}#water-panel{align-items:stretch;gap:10px;width:186px;display:flex;top:14px;left:14px}.tank{width:26px;height:64px;box-shadow:inset 0 0 0 2px var(--ink);background:#2c170f;position:relative;overflow:hidden}#water-fill{background:repeating-linear-gradient(0deg, var(--sea) 0 4px, #2677a6 4px 8px);height:0;position:absolute;bottom:2px;left:2px;right:2px}#water-fill.warn{background:repeating-linear-gradient(0deg, var(--sea) 0 4px, var(--red-dk) 4px 8px)}.tank-ticks{background:repeating-linear-gradient(0deg,#0000 0 14px,#fbe27a99 14px 16px);position:absolute;inset:0}#holes-line.alarm{color:var(--red);animation:.6s steps(2,end) infinite blink}#wind-panel{align-items:center;gap:10px;width:186px;display:flex;top:110px;left:14px}#wind-rose{width:44px;height:44px;box-shadow:inset 0 0 0 2px var(--ink);background:#123f66;position:relative}#wind-arrow{background:var(--sea-hi);clip-path:polygon(50% 100%,100% 70%,65% 70%,65% 0,35% 0,35% 70%,0 70%);width:10px;height:36px;margin:-18px 0 0 -5px;position:absolute;top:50%;left:50%}#wind-ship{background:var(--wood-hi);clip-path:polygon(50% 0,100% 35%,100% 100%,0 100%,0 35%);width:8px;height:14px;margin:-7px 0 0 -4px;position:absolute;top:50%;left:50%}#enemy-panel{width:204px;top:14px;right:14px}#enemy-panel .label strong{color:var(--red);margin-left:6px;font-size:16px}.enemy-row{grid-template-columns:1fr 70px;align-items:center;gap:8px;margin-top:7px;font-size:11px;display:grid}.enemy-row .bar{height:8px}.enemy-row.sunk{color:var(--wood-hi);text-decoration:line-through}.enemy-row .swatch{width:8px;height:8px;box-shadow:0 0 0 1px var(--ink);margin-right:6px;display:inline-block}.bar{height:10px;box-shadow:inset 0 0 0 2px var(--ink);background:#2c170f;position:relative}.bar b{background:var(--sea);width:0;position:absolute;top:2px;bottom:2px;left:2px}#ship-panel{width:186px;bottom:14px;left:14px}.stat{justify-content:space-between;align-items:center;height:22px;display:flex}.pips{gap:4px;display:flex}.pips i{width:14px;height:12px;box-shadow:inset 0 0 0 2px var(--ink);background:#2c170f;display:block}.pips i.on{background:var(--cloth)}#rudder-bar{width:84px;height:10px;box-shadow:inset 0 0 0 2px var(--ink);background:#2c170f;position:relative}#rudder-bar:after{content:"";background:var(--wood-hi);width:2px;height:10px;position:absolute;top:0;left:41px}#rudder-mark{background:var(--gold-hi);width:6px;height:14px;box-shadow:0 0 0 1px var(--ink);margin-left:-3px;position:absolute;top:-2px;left:50%}#guns-panel{width:170px;bottom:14px;right:14px}.gun-row{grid-template-columns:1fr 44px 44px;align-items:center;gap:6px;margin-top:6px;font-size:11px;display:grid}.gun{height:12px;box-shadow:inset 0 0 0 2px var(--ink);background:#2c170f;position:relative}.gun b{background:var(--gold);width:0;position:absolute;top:2px;bottom:2px;left:2px}.gun.ready b{background:var(--green)}.gun.manned{box-shadow:inset 0 0 0 2px var(--ink), 0 0 0 2px var(--gold-hi)}#crosshair{background:var(--cloth);width:4px;height:4px;box-shadow:0 0 0 2px var(--ink);margin:-2px 0 0 -2px;position:absolute;top:50%;left:50%}#prompt{white-space:nowrap;padding:6px 12px;font-size:13px;position:absolute;top:calc(50% + 34px);left:50%;transform:translate(-50%)}#prompt kbd,#station kbd,#overlay kbd{min-width:20px;font:inherit;text-align:center;color:var(--ink);background:var(--cloth);box-shadow:0 2px 0 var(--wood), 0 0 0 2px var(--ink);text-shadow:none;margin:0 3px;padding:1px 5px;font-size:11px;display:inline-block}#progress{width:220px;padding:7px 10px;position:absolute;top:calc(50% + 34px);left:50%;transform:translate(-50%)}#progress .bar{height:12px;margin-top:5px}#progress .bar b{background:var(--wood-hi)}#station{text-align:center;min-width:260px;padding:8px 14px;position:absolute;bottom:18px;left:50%;transform:translate(-50%)}#station-name{color:var(--gold-hi);font-size:15px}#station-hint{color:var(--cloth);margin-top:4px;font-size:11px}#reload-bar{margin-top:6px}#reload-bar b{background:var(--gold)}#reload-bar.ready b{background:var(--green)}#alert{color:var(--cloth);background:var(--red-dk);box-shadow:0 0 0 2px var(--ink);white-space:nowrap;padding:6px 16px;font-size:16px;position:absolute;top:78px;left:50%;transform:translate(-50%)}#alert.good{background:#335f2c}@keyframes blink{50%{opacity:.35}}#overlay{text-shadow:2px 2px 0 var(--ink);background:#120c1a6b;justify-content:center;align-items:center;display:none;position:absolute;inset:0}#overlay.visible{display:flex}#overlay[data-mode=lost]{background:#6b141861}#overlay[data-mode=won]{background:#120c1a2e}#overlay .card{text-align:center;width:min(520px,90vw);padding:22px 28px 24px}#overlay h1{letter-spacing:.06em;text-transform:uppercase;color:var(--gold-hi);text-shadow:3px 3px 0 var(--red-dk), 5px 5px 0 var(--ink);margin:0;font-size:40px}#overlay[data-mode=lost] h1{color:var(--cloth);text-shadow:3px 3px 0 var(--red-dk), 5px 5px 0 var(--ink)}#overlay p{color:var(--cloth);margin:10px 0 14px;font-size:14px}#overlay-stats{color:var(--sea-hi);text-transform:uppercase;justify-content:center;gap:18px;margin-bottom:12px;font-size:12px;display:flex}#overlay-stats b{color:var(--cloth);font-variant-numeric:tabular-nums;font-size:22px;display:block}#overlay-controls{color:var(--cloth);gap:7px;margin:6px 0 16px;font-size:12px;display:grid}.actions{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.actions button{min-width:150px;font:inherit;text-transform:uppercase;letter-spacing:.06em;color:var(--ink);background:var(--gold);box-shadow:0 0 0 2px var(--ink), inset 0 -4px 0 #a8261f33, 0 4px 0 2px var(--ink);cursor:pointer;border:0;padding:10px 18px;font-size:15px}.actions button:hover,.actions button:focus-visible{background:var(--gold-hi);outline:none}.actions button:active{box-shadow:0 0 0 2px var(--ink), 0 2px 0 2px var(--ink);transform:translateY(2px)}.actions button.secondary{background:var(--wood-hi)}#overlay[data-mode=won],#overlay[data-mode=lost]{align-items:flex-end;padding-bottom:36px}#mute-badge{z-index:3;text-transform:uppercase;letter-spacing:.08em;color:var(--cloth);background:var(--panel);box-shadow:0 0 0 2px var(--ink);text-shadow:2px 2px 0 var(--ink);pointer-events:none;padding:3px 8px 3px 4px;font-size:10px;position:absolute;top:104px;right:16px}#mute-badge.muted{color:var(--red)}#mute-badge.muted:after{content:"";vertical-align:middle;background:var(--red);width:10px;height:2px;margin-left:6px;display:inline-block}#mute-badge kbd{min-width:16px;font:inherit;text-align:center;color:var(--ink);background:var(--cloth);box-shadow:0 2px 0 var(--wood), 0 0 0 2px var(--ink);text-shadow:none;margin-right:6px;padding:0 4px;font-size:10px;display:inline-block}#crew-screen{z-index:6;text-shadow:2px 2px 0 var(--ink);background:#120c1a8c;justify-content:center;align-items:center;display:none;position:absolute;inset:0}#crew-screen.visible{display:flex}#crew-screen .card{text-align:center;width:min(440px,92vw);padding:22px 28px 24px}#crew-screen h1{letter-spacing:.06em;text-transform:uppercase;color:var(--gold-hi);text-shadow:3px 3px 0 var(--red-dk), 5px 5px 0 var(--ink);margin:0 0 6px;font-size:34px}#crew-screen p{color:var(--cloth);margin:8px 0 14px;font-size:13px}.crew-panel{display:none}#crew-screen[data-panel=loading] .crew-panel[data-for=loading],#crew-screen[data-panel=auth] .crew-panel[data-for=auth],#crew-screen[data-panel=name] .crew-panel[data-for=name],#crew-screen[data-panel=join] .crew-panel[data-for=join],#crew-screen[data-panel=lobby] .crew-panel[data-for=lobby]{display:block}#crew-screen label{text-align:left;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-hi);margin:10px 0 0;font-size:11px;display:block}#crew-screen input{width:100%;font:inherit;color:var(--cloth);box-shadow:inset 0 0 0 2px var(--ink), 0 0 0 2px var(--wood);text-shadow:none;background:#2c170f;border:0;outline:none;margin-top:4px;padding:8px 10px;font-size:15px;display:block}#crew-screen input:focus{box-shadow:inset 0 0 0 2px var(--ink), 0 0 0 2px var(--gold-hi)}#join-code{text-align:center;letter-spacing:.4em;text-transform:uppercase;font-size:28px!important}.crew-hint{text-align:left;color:var(--sea-hi);text-transform:uppercase;letter-spacing:.06em;margin-top:4px;font-size:10px}.crew-error{min-height:16px;color:var(--red);text-transform:uppercase;letter-spacing:.04em;margin:10px 0 12px;font-size:12px}#crew-screen .actions{flex-wrap:wrap}#lobby-code{letter-spacing:.25em;color:var(--gold-hi);text-shadow:4px 4px 0 var(--red-dk), 6px 6px 0 var(--ink);font-variant-numeric:tabular-nums;margin:4px 0 12px;padding-left:.25em;font-size:64px;line-height:1}#lobby-crew{gap:6px;width:260px;margin:0 auto 6px;display:grid}.lobby-row{box-shadow:inset 0 0 0 2px var(--ink);color:var(--cloth);background:#2c170fcc;justify-content:space-between;padding:6px 10px;font-size:14px;display:flex}.lobby-row small{color:var(--gold-hi);letter-spacing:.08em;align-self:center;font-size:10px}.lobby-row.empty{color:#efe4c659}.lobby-row i{width:10px;height:10px;box-shadow:0 0 0 2px var(--ink);vertical-align:-1px;margin-right:8px;display:inline-block}.actions button:disabled{background:var(--wood);color:#120c1a99;cursor:default}.title-only{display:none}#overlay[data-mode=title] .title-only{display:inline-block}#overlay[data-mode=title] #title-who{display:block}#title-who{color:var(--sea-hi);text-transform:uppercase;letter-spacing:.08em;margin-top:14px;font-size:11px}button.link{font:inherit;color:var(--gold-hi);cursor:pointer;text-transform:uppercase;background:0 0;border:0;padding:0;text-decoration:underline}#overlay-code{color:var(--cloth);text-transform:uppercase;letter-spacing:.08em;margin:0 0 14px;font-size:12px}#overlay-code b{letter-spacing:.25em;color:var(--gold-hi);margin:0 6px;font-size:22px}#crew-labels{pointer-events:none;z-index:2;position:absolute;inset:0;overflow:hidden}.crew-label{letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;color:var(--cloth);box-shadow:0 0 0 2px var(--ink);text-shadow:1px 1px 0 var(--ink);background:#120c1abf;padding:2px 6px;font-size:11px;position:absolute;transform:translate(-50%,-100%)}.crew-label i{width:8px;height:8px;box-shadow:0 0 0 1px var(--ink);margin-right:5px;display:inline-block}.crew-label small{color:var(--gold-hi);margin-left:5px;font-size:9px}#crew-panel{z-index:2;width:204px;top:130px;right:14px}#crew-panel .label strong{color:var(--gold-hi);letter-spacing:.2em;margin-left:6px}.crew-row{text-transform:uppercase;color:var(--cloth);justify-content:space-between;margin-top:6px;font-size:11px;display:flex}.crew-row i{width:8px;height:8px;box-shadow:0 0 0 1px var(--ink);margin-right:6px;display:inline-block}.crew-row small{color:var(--gold-hi);font-size:10px}.crew-row.me{color:var(--gold-hi)}#crew-toast{z-index:3;text-transform:uppercase;letter-spacing:.06em;color:var(--cloth);box-shadow:0 0 0 2px var(--ink);white-space:nowrap;background:#335f2c;padding:6px 14px;font-size:13px;position:absolute;bottom:92px;left:50%;transform:translate(-50%)}#crew-toast.bad{background:var(--red-dk)}#host-wait{z-index:3;text-transform:uppercase;letter-spacing:.08em;color:var(--ink);background:var(--gold);box-shadow:0 0 0 2px var(--ink);padding:4px 12px;font-size:12px;animation:.8s steps(2,end) infinite blink;position:absolute;top:72px;left:50%;transform:translate(-50%)}#mouse-prompt{z-index:3;text-transform:uppercase;letter-spacing:.08em;color:var(--cloth);background:var(--panel);box-shadow:0 0 0 2px var(--ink), 0 0 0 4px var(--gold);pointer-events:none;text-shadow:2px 2px 0 var(--ink);padding:8px 14px;font-size:13px;position:absolute;top:58%;left:50%;transform:translate(-50%)}#mouse-prompt kbd{font:inherit;color:var(--ink);background:var(--cloth);box-shadow:0 2px 0 var(--wood), 0 0 0 2px var(--ink);text-shadow:none;margin-right:8px;padding:1px 6px;font-size:11px;display:inline-block}#mouse-settings{text-transform:uppercase;letter-spacing:.08em;color:var(--gold-hi);justify-content:center;align-items:center;gap:12px;margin:0 0 14px;font-size:11px;display:flex}#mouse-settings.hidden{display:none}#mouse-settings b{color:var(--cloth);font-variant-numeric:tabular-nums;margin-left:4px}#mouse-settings input[type=range]{width:150px;accent-color:var(--gold)}#mouse-settings .check{color:var(--cloth);cursor:pointer;align-items:center;gap:6px;display:inline-flex}#mouse-settings input[type=checkbox]{accent-color:var(--gold);width:14px;height:14px}