:root{--bg:#0a1628;--panel:#081224d1;--border:#78b4dc47;--text:#e8f1fa;--muted:#8aa4bc;--accent:#3db8ff;--danger:#ff6b4a;--ok:#5ddea8;font-family:Segoe UI,system-ui,-apple-system,sans-serif}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;color:var(--text);margin:0;overflow:hidden}#app{width:100%;height:100%;position:relative}#c{width:100%;height:100%;display:block}#hud{pointer-events:none;flex-direction:column;justify-content:flex-start;gap:12px;padding:16px;display:flex;position:absolute;inset:0}.bar,.panel,.hint{pointer-events:auto}.bar h1{letter-spacing:.04em;text-shadow:0 2px 12px #00000080;margin:0;font-size:1.35rem;font-weight:700}.bar .tag{color:var(--muted);margin:4px 0 0;font-size:.85rem}.panel{background:var(--panel);border:1px solid var(--border);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:12px;flex-direction:column;align-self:flex-start;gap:12px;width:min(320px,100vw - 32px);padding:14px;display:flex;box-shadow:0 12px 40px #00000059}.panel.hidden{display:none}label{text-transform:uppercase;letter-spacing:.08em;color:var(--muted);flex-direction:column;gap:6px;font-size:.75rem;display:flex}select,button{font:inherit;border:1px solid var(--border);color:var(--text);cursor:pointer;background:#142846e6;border-radius:8px;padding:10px 12px}select{text-transform:none;letter-spacing:normal;font-size:.95rem}button{background:linear-gradient(#2a7fbf,#1b5f95);border-color:#64b4ff66;font-weight:600;transition:filter .15s,transform .1s}button:hover{filter:brightness(1.1)}button:active{transform:translateY(1px)}#reset-btn{background:linear-gradient(#4a5568,#2d3748)}.status{font-size:.95rem;font-weight:600}.status .sep{color:var(--muted);margin:0 6px}.speed-label{gap:8px}.speed-label input[type=range]{width:100%;accent-color:var(--accent)}#speed-readout{font-variant-numeric:tabular-nums;color:var(--accent);text-transform:none;letter-spacing:normal;font-size:.95rem;font-weight:700}.btn-row{grid-template-columns:1fr 1fr;gap:8px;display:grid}.alert{color:#f6e7c1;letter-spacing:.05em;text-align:center;pointer-events:none;text-shadow:0 1px 2px #00000080;background:#0c1018d1;border:1px solid #f2c14e80;border-radius:999px;max-width:min(560px,100vw - 32px);padding:8px 16px;font-size:.82rem;position:absolute;top:78px;left:50%;transform:translate(-50%)}.alert.hidden{display:none}.dash{pointer-events:none;gap:8px;display:flex;position:absolute;bottom:22px;left:50%;transform:translate(-50%)}.dash.hidden{display:none}.bubble{text-align:center;background:#10141cc7;border:1px solid #ffffff24;border-radius:14px;min-width:86px;padding:8px 12px 7px;box-shadow:0 10px 28px #00000059}.bubble .k{letter-spacing:.08em;text-transform:uppercase;color:#9aa4b2;font-size:10px;display:block}.bubble .v{color:#f2c14e;font-variant-numeric:tabular-nums;margin-top:2px;font-size:15px;font-weight:700;display:block}.keys{text-align:right;color:#d2dce6b8;pointer-events:none;text-shadow:0 1px 2px #000000a6;font-size:12px;line-height:1.55;position:absolute;bottom:18px;right:16px}.keys .key{color:#f4f7fb;font-weight:600}.build-info{color:#d2dce699;letter-spacing:.04em;pointer-events:none;text-shadow:0 1px 2px #000000a6;font-size:11px;position:absolute;bottom:16px;left:16px}@media (width<=720px){#hud{padding:10px}.panel{width:min(280px,100vw - 20px)}.dash{flex-wrap:wrap;justify-content:center;gap:6px;bottom:10px;left:8px;right:8px;transform:none}.bubble{min-width:64px;padding:6px 8px 5px}.bubble .v{font-size:13px}.keys{text-align:right;font-size:11px;inset:58px 8px auto auto}.build-info{bottom:96px;left:8px}.alert{max-width:calc(100vw - 24px);top:96px}}:root{--bridge-size:150px;--safe-left:env(safe-area-inset-left,0px);--safe-right:env(safe-area-inset-right,0px);--safe-bottom:env(safe-area-inset-bottom,0px)}.bridge.hidden{display:none}.bridge-wheel,.bridge-telegraph{width:var(--bridge-size);pointer-events:auto;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;cursor:grab;filter:drop-shadow(0 8px 16px #00000073);position:absolute}.bridge-wheel.dragging,.bridge-telegraph.dragging{cursor:grabbing}.bridge-wheel svg,.bridge-telegraph svg{width:var(--bridge-size);height:var(--bridge-size);display:block;overflow:visible}.bridge-wheel{left:calc(16px + var(--safe-left));bottom:calc(36px + var(--safe-bottom))}.bridge-telegraph{right:calc(16px + var(--safe-right));bottom:calc(16px + var(--safe-bottom))}.bridge-wheel .rim{fill:none;stroke:url(#teak);stroke-width:12px}.bridge-wheel .rim-grain{fill:none;stroke:#ffdcaa2e;stroke-width:1.5px}.bridge-wheel .spoke{stroke:#6b3c1c;stroke-width:6px;stroke-linecap:round}.bridge-wheel .handle{fill:url(#teak);stroke:#3d220e;stroke-width:1px}.bridge-wheel .handle.king,.bridge-wheel .king-band{fill:url(#brass);stroke:#5a3d10}.bridge-wheel .hub,.bridge-telegraph .hub{fill:url(#brass);stroke:#5a3d10;stroke-width:1.5px}.bridge-wheel .hub-cap,.bridge-telegraph .hub-cap{fill:#fff0bf;opacity:.7}.bridge-wheel .wheel-port,.bridge-wheel .wheel-stbd{fill:none;stroke-width:4px;opacity:.8}.bridge-wheel .wheel-port{stroke:#d6453b}.bridge-wheel .wheel-stbd{stroke:#3fbf6a}.bridge-wheel .mark-mid,.bridge-wheel .mark-hard{stroke:#f2d27a;stroke-width:4px;stroke-linecap:round}.bridge-wheel .mark-hard{stroke:#f4f7fb}.bridge-telegraph .dial-rim{fill:url(#brass);stroke:#5a3d10;stroke-width:2px}.bridge-telegraph .dial-face{fill:url(#dialFace);stroke:#7a5a20;stroke-width:1.5px}.bridge-telegraph .dial-astern,.bridge-telegraph .dial-ahead{fill:none;stroke-width:28px}.bridge-telegraph .dial-astern{stroke:#b02c2233}.bridge-telegraph .dial-ahead{stroke:#283c5a14}.bridge-telegraph .dial-div{stroke:#3b2a14;stroke-width:1.2px}.bridge-telegraph .dial-label{fill:#2a1d0c;text-anchor:middle;dominant-baseline:middle;letter-spacing:.02em;font:700 8.5px Georgia,serif}.bridge-telegraph .dial-label.stop{fill:#9e1f16}.bridge-telegraph .dial-word{fill:#5c4420;text-anchor:middle;letter-spacing:.12em;font:700 9px Georgia,serif}.bridge-telegraph .answer{fill:#1c1c1c;opacity:.75}.bridge-telegraph .lever-arm{fill:url(#brass);stroke:#5a3d10;stroke-width:1px}.bridge-telegraph .lever-knob{fill:#2b1a0c;stroke:#d4a64a;stroke-width:3px}.telegraph-order{color:#f2c14e;letter-spacing:.1em;text-align:center;white-space:nowrap;background:#10141cd1;border:1px solid #f2c14e73;border-radius:999px;margin-top:6px;padding:4px 8px;font-size:11px;font-weight:700}.bridge-on .keys{bottom:calc(16px + var(--bridge-size) + 44px + var(--safe-bottom))}@media (width<=1000px){.bridge-on .dash{bottom:calc(var(--bridge-size) + 60px + var(--safe-bottom))}}@media (width<=720px){:root{--bridge-size:124px}.bridge-wheel{left:calc(8px + var(--safe-left));bottom:calc(26px + var(--safe-bottom))}.bridge-telegraph{right:calc(8px + var(--safe-right));bottom:calc(8px + var(--safe-bottom))}.bridge-on .build-info{bottom:calc(8px + var(--safe-bottom))}.bridge-on .dash{bottom:calc(var(--bridge-size) + 46px + var(--safe-bottom))}.bridge-on .keys{bottom:auto}}