/* Figma artwork is drawn by harbor-view.js for the live playable.
   These semantic HTML targets provide pointer, touch and keyboard interaction. */
:root,.hud,.settings-dialog,.director>h1,.pause-overlay h2{font-family:'PW Lilita',sans-serif;font-weight:400}
.studio{align-items:start}
button,input,select{font:inherit}
.hud b,.hud strong,.hud small,.hud button{font-weight:400}
#ui-canvas,#transition-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#transition-canvas{z-index:12}
.screenreader-only{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip-path:inset(50%);white-space:nowrap}
.hud .top-hud,.hud.at-port .top-hud{inset:0;display:block;z-index:3;pointer-events:none}
.hud .canvas-target{pointer-events:auto;border:0;background:transparent;box-shadow:none;color:transparent;padding:0;margin:0;border-radius:0;transform:none}
.hud .canvas-target:focus-visible{outline:.6cqw solid #fff1a8;outline-offset:-.8cqw;border-radius:1cqw}
.hud .pause-button,.hud.at-port .pause-button,.hud:not(.at-port) .pause-button{position:absolute;left:3.33%;top:2.5%;width:10%;height:5.75%;padding:0;background:none;border:0;box-shadow:none}
.hud .currency,.hud .gem-counter{display:none!important}
.hud .mission{position:absolute;left:16.67%;top:2.5%;width:53.33%;height:4.875%;margin:0;flex:none}
.hud.at-port .mission{display:none}
.hud .mission strong{font-size:2.65cqw}
.location-label{top:9.6%;left:5%;font-size:1.8cqw}
.hud .port-panel{background:none}
.hud .port-nav{position:absolute;inset:auto 0 0;display:flex;height:10.25%;border:0;background:none;box-shadow:none;pointer-events:auto}
.hud .port-nav>*{height:100%;flex:0 0 18.2857%}
.hud .port-nav>[aria-current=page]{flex-basis:26.8572%}
#upgrade-controls{position:absolute;inset:0;pointer-events:none}
[data-upgrade]{position:absolute;top:61.625%;width:27.556%;height:23.727%;border-radius:2cqw}
#upgrade-hp{left:5.333%}#upgrade-button{left:36.222%}#upgrade-capacity{left:67.111%}
#battle-button{position:absolute;left:25.78%;top:75.625%;width:48.44%;height:10.86%}
.hud .game-toast{top:25%;z-index:2}
.hud .game-toast.fade{top:24%;opacity:0}
.port-info{top:30%;z-index:5}
.hud .flash{display:none}
.hud .pause-overlay{z-index:8}
.game-frame:has(#settings-dialog[open]) .pause-overlay{display:none}
.hud .auto-fire{bottom:3.3%}
.hud .steering-caption{font-size:1.9cqw;letter-spacing:.35cqw}
.hud .auto-fire,.hud .steering-caption,.hud .location-label,.hud .game-toast,.hud .joystick-compass{display:none!important}
.hud .joystick-zone{left:50%;bottom:auto;top:71.2%;width:33%;height:auto;transform:translateX(-50%)}
.hud .joystick{width:100%;height:auto;aspect-ratio:1;border:.45cqw solid #b5eced66;border-radius:50%;background:#003d5966;box-shadow:inset 0 0 6cqw #174d6266;display:grid;place-items:center}
.hud .joystick-knob{position:relative;inset:auto;width:40%;height:40%;border:.5cqw solid #71d8ed;border-radius:50%;background:#e5fbff;box-shadow:0 0 0 2.3cqw #133f5477,0 0 0 2.65cqw #b9ebdf22,0 0 3cqw #96f1ff66;margin:0}
.hud .mission{left:16.67%;top:1.375%;width:55.56%;height:8.5%;border:.55cqw solid #442c20;border-radius:3cqw;padding:1.2cqw 2.4cqw;background:#ffe5b9;box-shadow:0 .4cqw 0 #00364e66;display:block}
.hud .mission-icon{display:none}.hud .mission strong{font-size:4cqw;color:white;-webkit-text-stroke:1px #111;paint-order:stroke fill;text-shadow:0 .3cqw #111;line-height:1.2}
.hud .mission-track{height:3.4cqw;margin-top:1.7cqw;border:.5cqw solid #9a6139;background:#764222;border-radius:3cqw}
.hud .mission-track i{background:linear-gradient(#ffd757,#ffa939);border-radius:3cqw}
.hud .mission b{display:block;position:absolute;bottom:1.05cqw;left:0;right:0;text-align:center;color:#fff;font-size:3.2cqw;-webkit-text-stroke:1px #111;paint-order:stroke fill;text-shadow:0 .3cqw #111}
.hud .ship-label{width:19cqw;height:3.5cqw;padding:0;display:flex;align-items:center;transform:translate(-50%,-50%)}
.hud .ship-label[hidden]{display:none!important}
.hud .ship-label>b{background:#ec372c;border:.4cqw solid #fff3cb;outline:.35cqw solid #182d30;line-height:3.7cqw;width:3.9cqw;height:3.9cqw;flex:none;border-radius:30%;font-size:2.7cqw;text-align:center;color:#fff;text-shadow:0 .2cqw #291c19;z-index:1}
.hud .ship-label.player>b{background:#68cc27}
.hud .ship-label .hp{width:15cqw;height:2.4cqw;margin-left:-.4cqw;border:.35cqw solid #c2e3d2;border-radius:3cqw;background:#153b46;overflow:hidden}
.hud .ship-label .hp i{height:100%;border-radius:3cqw}
.hud .joystick::before,.hud .joystick::after{display:none}
.hud .ship-label>b{margin-bottom:0;letter-spacing:0}