*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;background:#123c4c;color:#193c49;font-family:Arial,Helvetica,sans-serif}button{font:inherit;cursor:pointer}button:disabled{cursor:default;opacity:.45}button:focus-visible,#viewport:focus-visible{outline:3px solid #e89437;outline-offset:3px}kbd{font:10px Arial,sans-serif;font-weight:bold;border:1px solid currentColor;border-radius:4px;padding:3px 6px;white-space:nowrap}#game{height:100%;display:flex;flex-direction:column;max-width:2000px;margin:auto}header{display:flex;height:67px;flex-shrink:0;align-items:center;justify-content:space-between;gap:20px;padding:0 25px;background:#fff3d7;border-bottom:3px solid #e6c185;z-index:10}.brand{text-decoration:none;color:#17424d;display:flex;align-items:center;gap:12px;font-size:13px;letter-spacing:2px;font-weight:800}.brand small{display:block;letter-spacing:3px;font-size:8px;color:#a77237;margin-top:5px}.crest{border:2px solid #c18941;border-radius:50%;height:36px;width:36px;display:grid;place-items:center;color:#ae7834;font:24px Georgia}.tagline{font-size:9px;letter-spacing:2px;color:#859385}.tools{display:flex;gap:8px}.tools button{background:#f6e4bd;border:1px solid #dabc89;color:#33525b;padding:9px 12px;border-radius:7px;font-size:11px}.tools kbd{font-size:8px;margin-left:5px;opacity:.7}#viewport{flex:1;min-height:380px;position:relative;overflow:hidden;isolation:isolate;background:#78d7e8}canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.hidden{display:none!important}.scene-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(#004a7322,transparent 19%,transparent 76%,#092f5644)}.hud{position:absolute;top:20px;left:26px;right:26px;display:flex;justify-content:space-between;pointer-events:none;color:#fff6d7;text-shadow:0 2px 8px #24657799}.hud small{display:block;font-size:9px;font-weight:700;letter-spacing:1.7px;margin-bottom:7px}.hud b{font-size:15px}.health{width:130px;height:6px;border-radius:4px;background:#19577377;margin-bottom:7px;overflow:hidden}.health i{display:block;width:100%;height:100%;background:#ffe38c;transition:width .2s}.muted{font-size:11px;font-weight:normal;opacity:.7}.wave{text-align:center}.wave b{font-size:19px;letter-spacing:2px}.wave b span{font-size:12px;opacity:.6}.coins{text-align:right}.coins b{font-size:24px;color:#ffecac}.coins>span{display:block;font-size:10px;margin-top:5px}.legend{position:absolute;top:96px;left:26px;display:flex;flex-direction:column;gap:8px;pointer-events:none;font-size:8px;letter-spacing:.8px;color:#fff7df;text-shadow:0 1px 6px #2a6578}.legend span{display:flex;align-items:center;gap:7px}.legend i{width:7px;height:7px;display:block;border-radius:2px}.hostile-dot{background:#e27b50}.ally-dot{background:#8ce6c4}#leaders{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}#labels,#crate-labels{position:absolute;inset:0;pointer-events:none}.ship-label{position:absolute;transform:translate(-50%,-100%);min-width:98px;text-align:center;color:#fff8df;background:#193a4eed;border:1px solid #efd49388;box-shadow:0 4px 12px #0d4c6233;border-radius:6px;padding:5px 9px 6px;transition:background .1s;will-change:left,top}.ship-label::after{content:"";position:absolute;left:calc(50% - 4px);bottom:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #193a4e}.ship-label .status{font-size:7px;letter-spacing:1.2px;display:block;color:#ffbd82;margin-bottom:2px}.ship-label .word{font:bold 17px/1.1 'Courier New',monospace;letter-spacing:1px}.ship-label .word .done{color:#ffe094}.ship-label .layers{display:block;font-size:7px;letter-spacing:1px;color:#b8cbd0;margin-top:3px}.ship-label.ally{background:#e6fff0e8;border-color:#52ab8d;color:#216351;box-shadow:0 3px 10px #287e7044}.ship-label.ally::after{border-top-color:#e6fff0}.ship-label.ally .status{color:#31856a}.ship-label.ally .layers{color:#468b73}.ship-label.ally .done{color:#cc523d}.ship-label.target{background:#4c4c37;border:2px solid #ffe28f;box-shadow:0 0 0 3px #ffe28f22}.ship-label.ally.target{background:#ffe6c4;border-color:#e88a5e}.ship-label.pending{opacity:.55}.ship-label.pending .status{color:#f8e0ad}.crate-label{position:absolute;transform:translate(-50%,-100%);padding:6px 10px;text-align:center;background:#ffedbded;border:1px solid #b98748;border-radius:5px;box-shadow:0 3px 10px #18435b33;min-width:86px}.crate-label small{display:block;font-size:7px;letter-spacing:1px;color:#8d6335}.crate-label strong{display:block;font:bold 15px 'Courier New',monospace;margin:2px 0;color:#624423}.crate-label span{font-size:8px;color:#987444}.crate-label.active{outline:3px solid #ffe695;background:#fff4d6}.overlay{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;padding:24px;background:#1e6b833a;backdrop-filter:blur(2px);z-index:8}.panel{max-width:680px;width:100%;padding:30px 34px;text-align:center;background:#fff5dff5;border:2px solid #e3bb7c;border-radius:16px;box-shadow:0 18px 60px #13546e44}.panel.small{max-width:430px}.eyebrow{font-size:9px;letter-spacing:2.3px;color:#a1763d;font-weight:bold}h1{font:46px/1.08 Georgia,serif;font-weight:normal;margin:18px 0 15px}h1 em{color:#d47b35;font-weight:normal}h2{font:39px/1.1 Georgia,serif;font-weight:normal;margin:15px 0;color:#265260}.panel p{font-size:13px;line-height:1.8;color:#6b817d;margin:12px 0 20px}.instruction-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin:25px 0}.instruction-grid>div{display:flex;flex-direction:column;align-items:center;gap:9px;padding:16px 10px;background:#edd6a826;border:1px solid #dfc39366;border-radius:8px}.instruction-grid kbd{color:#9a6b31;font-size:12px;padding:5px 9px}.instruction-grid strong{font-size:11px}.instruction-grid span:not(.ally-symbol){font-size:10px;color:#82918b;line-height:1.5}.ally-symbol{font-size:10px;padding:5px 9px;border:1px solid #8ac8ab;border-radius:4px;color:#378664;background:#e7f4dc}.primary{background:var(--hw-accent,#edb555);color:#4f3d22;border:1px solid #c69238;border-bottom:3px solid #bf8936;border-radius:7px;padding:13px 24px;font-size:13px;font-weight:700}.primary:hover{background:#f5c66f}.primary kbd{margin-left:18px;font-size:9px;opacity:.7}.subhint{display:block;font-size:9px;color:#94a196;margin-top:16px}.upgrade-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:25px 0}.upgrade-grid button{background:#f5e7c8;border:1px solid #d7b681;border-radius:9px;padding:16px 13px;text-align:left;color:#36545a}.upgrade-grid button>kbd{display:inline-block;color:#a4783d;margin-bottom:10px}.upgrade-grid strong,.upgrade-grid span,.upgrade-grid b{display:block}.upgrade-grid strong{font-size:12px}.upgrade-grid span{font-size:10px;color:#7f9287;line-height:1.5;margin:8px 0 12px}.upgrade-grid b{color:#ac7935;font-size:14px}.input-dock{position:absolute;left:25px;right:25px;bottom:18px;display:flex;align-items:center;gap:24px;min-height:83px;padding:14px 20px;border:1px solid #c5e3d288;background:#163c4ff0;border-radius:10px;box-shadow:0 5px 25px #13516844;color:#fff1cf;z-index:3}.input-main{flex:1;min-width:0}.input-main>small{display:block;font-size:8px;letter-spacing:1.8px;color:#bbd7d0;font-weight:bold}.typed{font:bold 23px/1.3 'Courier New',monospace;margin:4px 0 3px;min-height:30px;display:flex;align-items:center;color:#ffe198;white-space:nowrap}.typed i{display:inline-block;width:2px;height:21px;margin-left:4px;background:#ffe198;animation:blink 1s steps(1) infinite}.ghost{font:italic 17px Georgia;color:#8eadb2}.input-main>span{font-size:8px;color:#8eb5b9;letter-spacing:.3px}.skill-stats{display:flex;gap:22px;text-align:center}.skill-stats b{display:block;font-size:18px;color:#ffdf94}.skill-stats small{display:block;font-size:7px;letter-spacing:1px;color:#94b8b7;margin-top:5px}.supply-shortcut{display:flex;align-items:center;gap:10px;padding-left:20px;border-left:1px solid #b8ddc933}.supply-shortcut kbd{color:#edd397}.supply-shortcut span{font-size:7px;line-height:1.6;letter-spacing:1px;color:#c5dacf}.supply-shortcut b{font-size:8px;color:#e8d29e}#toast{position:absolute;top:85px;left:25%;right:25%;text-align:center;font:bold 13px Arial;letter-spacing:.3px;color:#fff4c4;background:#255166d9;border:1px solid #afd8c677;padding:9px 12px;border-radius:7px;opacity:0;pointer-events:none;transition:opacity .15s;z-index:5}.input-dock.error{animation:shake .22s linear;border-color:#ee996e}.end-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:23px 0}.end-stats b{display:block;font-size:22px;color:#a77532}.end-stats small{font-size:8px;color:#6f8981;letter-spacing:.8px}footer{height:30px;flex-shrink:0;display:flex;justify-content:space-between;gap:10px;align-items:center;padding:0 25px;font-size:7px;letter-spacing:1px;color:#96b6bb;background:#123748}@keyframes blink{50%{opacity:0}}@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}@media(max-width:850px){.tagline{display:none}.input-dock{gap:15px}.skill-stats{gap:12px}.supply-shortcut{padding-left:12px}}@media(max-width:600px){header{height:55px;padding:0 12px}.brand{font-size:10px;letter-spacing:1px;gap:8px}.brand small{font-size:7px;letter-spacing:1.5px}.crest{width:29px;height:29px;font-size:20px}.tools button{font-size:10px;padding:7px}.tools kbd{display:none}.hud{left:14px;right:14px;top:14px}.hud small{font-size:7px;letter-spacing:1px}.health{width:85px}.wave b{font-size:14px}.wave b span{font-size:10px}.coins b{font-size:20px}.legend{left:14px;top:85px;font-size:7px}.input-dock{left:10px;right:10px;bottom:10px;padding:11px 12px;gap:10px}.skill-stats{gap:8px}.skill-stats b{font-size:13px}.skill-stats small{font-size:6px}.supply-shortcut{display:none}.input-main>small{font-size:6px;letter-spacing:1px}.typed{font-size:19px}.ghost{font-size:13px}.input-main>span{font-size:6px}.panel{padding:22px 17px}.overlay{padding:12px}h1{font-size:33px}h2{font-size:31px}.panel p{font-size:11px}.instruction-grid{gap:7px;margin:18px 0}.instruction-grid>div{padding:12px 5px}.instruction-grid strong{font-size:9px}.instruction-grid span:not(.ally-symbol){font-size:8px}.eyebrow{font-size:7px;letter-spacing:1.5px}.primary{padding:12px 20px}.subhint{font-size:7px}.ship-label{min-width:75px;padding:4px 6px}.ship-label .word{font-size:13px}.ship-label .status,.ship-label .layers{font-size:6px}.crate-label{min-width:72px;padding:4px 6px}.crate-label strong{font-size:12px}footer{padding:0 12px;font-size:6px}footer>span:nth-child(2){display:none}.upgrade-grid{gap:6px}.upgrade-grid button{padding:12px 8px}.upgrade-grid strong{font-size:10px}.upgrade-grid span{font-size:8px}.end-stats b{font-size:18px}.end-stats small{font-size:6px}#toast{left:18%;right:18%;font-size:10px}}

/* Merchant life is separate from hostile hull layers. */
.merchant-life{height:7px;width:100%;min-width:96px;margin-top:5px;border:1px solid #bdebd577;border-radius:5px;background:#091f2c;overflow:hidden}
.merchant-life-fill{display:block;height:100%;width:100%;background:#86e6c8;transition:width .18s ease,background .18s ease}
.merchant-life.hidden{display:none}

.ship-label .word[dir="rtl"]{direction:rtl;unicode-bidi:isolate;letter-spacing:0;font-family:Tahoma,Arial,sans-serif;font-size:20px;line-height:1.45}
.typed span[dir="auto"]{unicode-bidi:isolate;letter-spacing:0}

.save-controls{display:grid;gap:8px;margin:12px 0;text-align:left}.save-controls label{display:grid;gap:4px;font-size:11px}.save-controls select,#save-slot{padding:8px;border:1px solid #bb9a66;border-radius:5px;background:#fff8e9;color:#25444d;max-width:100%;width:100%}.secondary{border:1px solid #b3996d;border-radius:6px;background:#f6e7c7;color:#304f55;padding:10px 14px;margin:6px;font-size:12px}#overwrite-label{display:block;margin:12px 0;font-size:12px}#overwrite-label.hidden{display:none}#save-panel{z-index:12}.save-controls.hidden{display:none}.panel{max-height:calc(100% - 12px);overflow:auto}