*{box-sizing:border-box}html,body{padding:0;margin:0;width:100%;height:100%;background:#0a202d;color:#f1e6cd;font-family:Georgia,serif}button{font:13px Georgia,serif;cursor:pointer;background:#284957;color:#f1e5cb;border:1px solid #547585;border-radius:6px;padding:10px}button:hover{background:#365969}button:disabled{opacity:.45;cursor:not-allowed}#app{width:100%;height:100dvh;display:flex;flex-direction:column;overflow:hidden}header{min-height:54px;flex:none;display:flex;align-items:center;gap:16px;padding:6px 16px;background:#102b39;border-bottom:1px solid #43616c}header strong{letter-spacing:2px;font-size:15px}#destination{font-size:11px;color:#a8c1c3}.header-actions{margin-left:auto;display:flex;gap:8px}main{display:flex;flex:1;min-height:0}.viewport{flex:1;min-width:0;position:relative;overflow:hidden;background:#286f83}.viewport canvas{display:block;width:100%;height:100%;touch-action:none}.panel{background:#102936ef;border:1px solid #55717b;border-radius:9px;padding:12px}.telemetry{position:absolute;left:12px;top:12px;font-size:12px;line-height:1.9;pointer-events:none}.telemetry b{color:#f8d99b}.compass{position:absolute;right:12px;top:12px;text-align:center;width:135px;pointer-events:none}.compass svg{width:109px;display:block;margin:auto}.compass small{font-size:10px;color:#b5d2d7}.notice{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);width:min(540px,90%);background:#092532e8;border:1px solid #537782;border-radius:8px;padding:12px;text-align:center;font-size:12px;pointer-events:none}.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#061925c9;padding:15px}.parchment{background:#e9d9b5;color:#473721;border:5px double #9b8358;width:min(440px,100%);padding:22px;text-align:center}.parchment h2{font-weight:normal}.parchment p{text-align:left;line-height:1.7;border-top:1px solid #ab9774;border-bottom:1px solid #ab9774;padding:14px 0}.parchment button{background:#355548;padding:12px 26px}aside{width:278px;min-width:278px;flex:none;overflow-y:auto;background:#0e2532;padding:12px;display:flex;flex-direction:column;gap:12px}h3{font-size:12px;color:#e3bd7d;letter-spacing:2px;margin:0 0 12px}.spread{display:flex;justify-content:space-between;align-items:center;gap:6px;font-size:12px}.small{font-size:11px;color:#afc3c8}.center{text-align:center}.wide{width:100%;margin-top:10px}#sail{width:100%;accent-color:#e6bd78;margin:13px 0 4px;touch-action:pan-x}.ammo{font:24px monospace;color:#f3c97c}.deck{display:grid;grid-template-columns:1fr 80px 1fr;align-items:center;gap:6px}.deck svg{width:100%}.cannoncol{display:flex;flex-direction:column;gap:12px}.gun{padding:10px 4px;background:#203846;color:#84989a;min-height:65px}.gun small{display:block;font-size:9px;margin-top:6px;color:#f0e3ca}.gun.on{background:#592c31;color:#ff6262;border-color:#e56b65;text-shadow:0 0 10px #ff5555}.fire{background:#884d42;font-size:14px;padding:13px}.helm{width:48%;font-size:25px}@media(max-width:660px){header{gap:6px;flex-wrap:wrap;min-height:46px}header strong{font-size:11px;letter-spacing:1px}#destination{display:none}header button{font-size:11px;padding:8px}main{flex-direction:column}.viewport{min-height:47vh;flex:1}aside{width:100%;min-width:0;max-height:42vh;flex-direction:row;overflow:auto;align-items:start}aside .panel{min-width:220px}.compass{width:100px}.compass svg{width:86px}.telemetry{font-size:10px;padding:7px}}

.dock-now{background:#8e703e;border-color:#daba7d;font-weight:bold}.dock-now:hover{background:#aa8951}

.gun .load-state{display:block;font:10px ui-monospace,monospace;margin-top:5px;color:#b1c1c6}.gun.loading{border-color:#d6b276;background:#3f3b30;color:#f4d08a}.gun.loading .load-state{color:#ffdd9a}.gun.on .load-state{color:#ff9996}

.broadside-controls{display:flex;gap:8px;margin-top:8px}.broadside-controls button{flex:1;min-width:0;background:#884d42;font-size:11px;padding:10px 4px}

.ship-status{position:absolute;left:50%;top:12px;transform:translateX(-50%);z-index:4;width:min(240px,38vw);font-size:12px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px;pointer-events:none}
.ship-status #ship-name-display{font-weight:bold;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:130px}
.ship-status #ship-health-number{font:11px monospace}
.health-track{width:100%;height:9px;border-radius:6px;overflow:hidden;border:1px solid #66838b;background:#4d2526}
#ship-health-fill{height:100%;width:100%;background:#5cae80;transition:width .16s linear}
.shore-warning{position:absolute;z-index:6;top:84px;left:50%;transform:translateX(-50%);width:min(630px,84%);padding:13px 15px;text-align:center;background:rgba(93,29,27,.78);border:1px solid rgba(250,180,146,.75);color:#ffe9dd;font:700 13px Georgia,serif;letter-spacing:.4px;border-radius:8px;pointer-events:none;box-shadow:0 5px 18px #06192555}
.shore-warning[hidden]{display:none}
.ship-name-row{display:flex;flex-direction:column;gap:7px;margin:12px auto 16px;text-align:left}
.ship-name-row[hidden]{display:none}
.ship-name-row label{font:700 12px Georgia;color:#6e5133;letter-spacing:1px}
.ship-name-row input{padding:11px 12px;background:#fff8e8;border:1px solid #aa936c;color:#43331e;border-radius:4px;font:16px Georgia;min-width:0}
@media(max-width:660px){.ship-status{top:5px;width:165px;font-size:10px;padding:7px}.ship-status #ship-health-number{font-size:9px}.shore-warning{top:67px;font-size:11px}}