:root{font-family:'Trebuchet MS',Arial,sans-serif;color:#e9e7df;background:#0b1622;font-synthesis:none;--gold:#eebc60;--navy:#11253c;--ink:#14263c;--mint:#81c3b7}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 28% 40%,#142f40 0,#0b1724 55%,#09131e 100%);min-height:100vh}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:2px solid #f6d58d;outline-offset:4px}button:disabled{cursor:default;opacity:.55}button svg{pointer-events:none}svg{width:100%;height:100%;display:block}button:active{transform:translateY(1px)}[hidden]{display:none!important}
.studio-header{height:76px;border-bottom:1px solid #ffffff0b;display:flex;align-items:center;gap:27px;padding:0 5vw;max-width:1600px;margin:auto}.wordmark{font-size:19px;font-weight:900;letter-spacing:1.5px;color:#fff1d8;text-decoration:none;display:flex;align-items:center;gap:7px}.wordmark span{color:var(--gold)}.wordmark img{width:34px;height:34px;margin-right:7px}.edition{font-size:9px;color:#8497a5;letter-spacing:2px;display:flex;align-items:center;gap:11px}.edition i{width:3px;height:3px;background:#69868d;border-radius:50%}.quiet-button{background:none;border:0;color:#9cafba;font-size:12px;margin-left:auto;padding:10px}.quiet-button span{margin-left:13px;color:var(--gold)}
.studio{max-width:1000px;margin:auto;display:grid;grid-template-columns:auto 320px;gap:72px;justify-content:center;align-items:center;padding:30px 32px 20px}.preview-column{width:min(48vw,calc((100dvh - 150px)*9/16));min-width:290px}.game-frame{width:100%;aspect-ratio:9/16;position:relative;background:#0588b4;overflow:hidden;border-radius:9px;box-shadow:0 0 0 1px #edca8225,0 18px 75px #0006;isolation:isolate;user-select:none;touch-action:none;container-type:inline-size}.game-frame canvas{display:block;width:100%;height:100%;touch-action:none;outline:none}.vignette{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 70px #0739551a}.preview-footer{display:flex;align-items:center;justify-content:space-between;padding:15px 0 0;color:#627f8e;font-size:8px;letter-spacing:1.7px}.preview-footer>span:first-child{color:#afbac0}.preview-footer i{display:inline-block;width:4px;height:4px;background:#e4bd70;border-radius:50%;vertical-align:middle;margin-right:7px}.preview-footer button{background:transparent;border:0;color:#9aafb7;font-size:20px;line-height:10px;padding:0}
.director-kicker{font-size:9px;color:#cfb37c;letter-spacing:2.7px;display:flex;align-items:center;gap:9px}.director-kicker>span{height:1px;width:23px;background:#b5924f}.director>h1{font-family:Georgia,serif;font-size:36px;line-height:1.12;font-weight:400;letter-spacing:-1.1px;margin:17px 0 13px}.director>h1 em{font-weight:400;color:var(--gold)}.director-intro{color:#879da8;font-size:12px;line-height:1.8;margin:0 0 23px}.preview-status{display:flex;align-items:center;gap:8px;margin-bottom:11px;font-size:9px;letter-spacing:1.4px;color:#9aabb4}.preview-status>span{width:5px;height:5px;border-radius:50%;background:#6ec3a0}.preview-status>span.running{background:#f0bc61;box-shadow:0 0 10px #edbc6360}.preview-status strong{font-size:8px;letter-spacing:1.6px}.preview-status time{margin-left:auto;font-variant-numeric:tabular-nums;letter-spacing:1px;font-size:10px}.director-primary{display:flex;align-items:center;width:100%;gap:11px;background:#eec16f;border:1px solid #ffdda0;border-radius:5px;color:#1a2a36;padding:15px 17px;font-weight:bold;font-size:12px;box-shadow:0 4px 0 #8d633425}.director-primary>span:first-child{width:15px;height:15px}.director-primary b{margin-left:auto;font-size:16px}.director-secondary{display:flex;gap:9px;margin-top:9px}.director-secondary button{width:50%;padding:10px;display:flex;align-items:center;justify-content:center;gap:8px;background:#ffffff05;border:1px solid #ffffff14;border-radius:4px;color:#98adb9;font-size:10px}.director-secondary button>span{width:12px;height:12px}.shot-list{margin-top:25px}h3{font-size:8px;letter-spacing:1.9px;color:#a9b7be;display:flex;justify-content:space-between;margin:0 0 9px}h3>span{color:#587583;font-size:8px;letter-spacing:1px}.shot{display:flex;gap:14px;padding:10px 0;align-items:center;border-bottom:1px solid #ffffff07}.shot>b{font-size:9px;font-weight:normal;color:#587684;font-family:monospace}.shot>span{font-size:11px;color:#b7c6cc}.shot small{display:block;font-size:9px;color:#66828e;margin-top:4px}.shot>i{width:4px;height:4px;border-radius:50%;background:#294352;margin-left:auto}.shot.active>b,.shot.active>span{color:#edc980}.shot.active>i{background:#edc980;box-shadow:0 0 12px #edc98070}.shot.done>i{background:#75b3a4}.preview-tools{margin-top:24px}.preview-tools h3{margin-bottom:7px}.preview-tools button{display:flex;align-items:center;width:100%;padding:10px 0;border:0;border-bottom:1px solid #ffffff08;background:transparent;color:#a0b3bb;gap:12px;text-align:left;font-size:10px}.preview-tools button>span:first-child{width:16px;height:16px;color:#bdab7c}.preview-tools small{display:block;font-size:8px;color:#567583;margin-top:5px}.preview-tools button>i{margin-left:auto;font-style:normal;color:#869da6}.toggle{width:26px;height:14px;background:#243a47;border-radius:12px;position:relative}.toggle:before{content:'';position:absolute;width:8px;height:8px;border-radius:50%;background:#83969e;left:3px;top:3px;transition:.2s}[aria-pressed=true] .toggle{background:#427566}[aria-pressed=true] .toggle:before{background:#c8f4d3;left:15px}.keyboard-note{font-size:9px;color:#64818e;line-height:2.3;margin:16px 0 0}.keyboard-note span{margin:0 5px}kbd{display:inline-block;min-width:16px;padding:0 4px;border:1px solid #314752;border-radius:3px;text-align:center;line-height:16px;font:8px/16px monospace;color:#9aaeb6}.deck-footer{font-size:7px;letter-spacing:1.3px;color:#486571;margin-top:18px}.deck-footer span{margin:0 8px;color:#927d54}
/* Everything inside the portrait uses container units, preserving the exact composition. */
.hud{position:absolute;inset:0;pointer-events:none;font-family:'Trebuchet MS',Arial,sans-serif;color:white}.hud button{pointer-events:auto}.top-hud{position:absolute;top:3.4cqw;left:3.4cqw;right:3.4cqw;display:flex;align-items:center;gap:2cqw}.pause-button{width:10cqw;height:10cqw;flex-shrink:0;border:1cqw solid #142442;border-radius:3.5cqw;background:linear-gradient(#ffe772,#ef9d28);color:#744115;padding:1.8cqw;box-shadow:inset 0 0 0 .45cqw #ffec9c,0 .6cqw 0 #122e50}.mission{height:9.1cqw;flex:1;min-width:0;border:.7cqw solid #452f29;border-radius:3cqw;background:linear-gradient(#fff7d8,#efdab2);display:flex;align-items:center;gap:1cqw;padding:.7cqw 1.8cqw .9cqw 1cqw;box-shadow:0 .7cqw 0 #1c3d5660;color:#3c2b25}.mission-icon{width:5.2cqw;height:6cqw;flex-shrink:0;color:#b66033}.mission>div{flex:1;min-width:0}.mission strong{font-size:2.55cqw;display:block;text-align:center;white-space:nowrap}.mission-track{height:1.5cqw;border-radius:2cqw;background:#4b3329;margin-top:.8cqw;overflow:hidden}.mission-track i{display:block;height:100%;width:0;background:linear-gradient(#b5f569,#50c447);transition:width .4s;border-radius:2cqw}.mission b{font-size:2.6cqw;display:none}.currency{display:flex;align-items:center;min-width:22cqw;height:7.6cqw;gap:2.2cqw;border:.6cqw solid #182642;border-radius:6cqw;background:linear-gradient(#33559a,#263767);padding:0 2.6cqw 0 .4cqw;box-shadow:0 .5cqw 0 #132638}.currency strong{font-size:3.2cqw;white-space:nowrap;text-shadow:0 .4cqw #14263e}.gold-coin{width:7cqw;height:7cqw;margin-left:-1.3cqw;filter:drop-shadow(0 .4cqw 0 #233650)}.location-label{position:absolute;top:16cqw;left:5cqw;display:flex;align-items:center;gap:1.5cqw;font-size:1.95cqw;font-weight:bold;letter-spacing:.55cqw;color:#e4ffffcc;text-shadow:0 1px 3px #055477}.location-label span{width:4cqw;height:1px;background:#b1f5f36b}.gem-counter{position:absolute;top:12.5cqw;right:4cqw;display:flex;align-items:center;gap:3cqw;background:#122c57e8;border:.45cqw solid #0d233e;border-radius:3cqw;height:5.9cqw;padding:0 2.6cqw;font-size:2.6cqw}.gem-counter>span{width:5.4cqw;height:5.4cqw;margin-left:-3cqw}.compass{position:absolute;right:4.5cqw;top:22cqw;width:12cqw;height:12cqw;border:1px solid #cef8eb88;border-radius:50%;color:#edfff2aa;background:#06618718;font-size:1.7cqw}.compass b{position:absolute;left:44%;top:0;font-size:2cqw}.compass i{position:absolute;inset:0;text-align:center;line-height:12cqw;font-size:8cqw;font-style:normal;opacity:.85}.compass>span{position:absolute;right:.9cqw;top:43%}.compass em{position:absolute;left:.6cqw;top:43%;font-style:normal}
.game-toast{position:absolute;left:50%;top:27cqw;width:max-content;max-width:85%;transform:translateX(-50%);display:flex;align-items:center;gap:2.2cqw;background:linear-gradient(100deg,#073c58e8,#073c58c7);border:1px solid #bdebc648;border-radius:2.2cqw;padding:2.5cqw 3.5cqw;box-shadow:0 1cqw 3cqw #003c6a15;transition:opacity .5s,top .5s}.game-toast>span{width:7.5cqw;height:7.5cqw;color:#f2d690}.game-toast b{font-size:3.3cqw;display:block;color:#fff1c7}.game-toast small{font-size:2.3cqw;display:block;margin-top:.9cqw;color:#b9e5e7}.game-toast.fade{opacity:0;top:24cqw}.world-labels{position:absolute;inset:0}.ship-label{position:absolute;transform:translate(-50%,-100%);min-width:15cqw;text-align:center}.ship-label b{display:block;font-size:2.2cqw;letter-spacing:.15cqw;text-shadow:0 .4cqw .3cqw #173247,0 0 .8cqw #173247;margin-bottom:1cqw}.ship-label .hp{height:1.7cqw;border:.3cqw solid #153345;background:#162a3d;border-radius:1.5cqw;overflow:hidden;box-shadow:0 .25cqw .2cqw #062a4666}.hp i{display:block;height:100%;background:linear-gradient(#ffb681,#f05b43);transition:width .15s}.ship-label.player .hp i{background:linear-gradient(#bdfb67,#58c952)}.ship-label.player b{color:#ffe7a9}.damage-number,.pickup-number{position:absolute;font-weight:900;font-size:5cqw;transform:translate(-50%,-50%);text-shadow:0 .5cqw 0 #673a23,.4cqw 0 #673a23,-.4cqw 0 #673a23;animation:float-number .95s forwards;color:#fff8dc}.pickup-number{color:#ffda45;font-size:4cqw}.damage-number.enemy-hit{color:#ffd1b5;font-size:3.7cqw}.joystick-zone{position:absolute;bottom:12cqw;left:50%;transform:translateX(-50%);width:30cqw;height:30cqw;pointer-events:none}.joystick{height:26cqw;width:26cqw;border:2px solid #d2fff9c2;position:relative;margin:auto;border-radius:50%;background:radial-gradient(circle,#087baf1c,#07547377);box-shadow:0 0 0 1px #0a5b8b22,inset 0 0 5cqw #013d6622}.joystick:before,.joystick:after{content:'';position:absolute;width:1.6cqw;height:1.6cqw;background:#e1ffff;transform:rotate(45deg);left:calc(50% - .8cqw);top:-.8cqw}.joystick:after{top:auto;bottom:-.8cqw}.joystick-compass{color:#c9ffffe0;position:absolute;inset:0;font-size:30cqw;line-height:23.5cqw;text-align:center;transform:scaleX(1.07);font-family:serif;opacity:.36}.joystick-knob{position:absolute;width:12.7cqw;height:12.7cqw;left:calc(50% - 6.35cqw);top:calc(50% - 6.35cqw);border:1.35cqw solid #154865;border-radius:50%;background:radial-gradient(circle at 36% 24%,#e2ffff,#7cdcf4 35%,#2b9fcc 72%,#1077a9);box-shadow:0 1cqw 2cqw #043b6755,inset 0 .7cqw 1cqw #e4ffffb3,0 0 0 .6cqw #d0fbff17;will-change:transform}.steering-caption{font-size:2cqw;letter-spacing:.6cqw;font-weight:bold;text-align:center;margin-top:3cqw;color:#d8fcf6c7;text-shadow:0 .4cqw .4cqw #166782;white-space:nowrap}.auto-fire{position:absolute;bottom:4.4cqw;left:50%;transform:translateX(-50%);font-size:1.9cqw;letter-spacing:.2cqw;color:#c9edec;white-space:nowrap;display:flex;align-items:center;gap:1.4cqw;text-shadow:0 1px 2px #123c5d}.auto-fire i{width:1cqw;height:1cqw;border-radius:50%;background:#aaf69d;box-shadow:0 0 2cqw #84ff9f}.auto-fire>span{font-size:1.6cqw;padding:.6cqw 1.1cqw;background:#173d5488;border-radius:.7cqw;color:#c2eacb}
.port-panel{position:absolute;inset:0;background:linear-gradient(#0a31515c,transparent 35%,transparent 55%,#102c4bba 75%,#112644f5)}.port-heading{position:absolute;top:23cqw;width:100%;text-align:center;text-shadow:0 .6cqw .3cqw #112840}.eyebrow{font-size:2.2cqw;font-weight:bold;letter-spacing:.8cqw;color:#ffe4a1}.port-heading h2{font-size:7cqw;line-height:1.1;margin:2.5cqw 0 1cqw;color:#fff2c9;letter-spacing:-.2cqw}.ship-stars{font-size:5cqw;color:#ffc941;letter-spacing:1cqw}.ship-stars span{color:#eaf6ff55}.power-banner{position:absolute;left:50%;top:85cqw;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;gap:2cqw;background:linear-gradient(90deg,#60442b,#9c5b29,#694025);border:.6cqw solid #ffe393;border-radius:2.5cqw;box-shadow:0 .8cqw 0 #233143,0 1.5cqw 5cqw #092c5655;padding:1.4cqw 5cqw;white-space:nowrap}.power-banner>span{width:7cqw;height:7cqw}.power-banner strong{font-size:5.5cqw;color:#fff0ad;text-shadow:0 .5cqw 0 #603c25}.power-banner small{font-size:1.6cqw;letter-spacing:.4cqw;color:#ffdf94}.upgrade-bottom{position:absolute;bottom:5cqw;left:4cqw;right:4cqw}.upgrade-caption{text-align:center;font-size:2.6cqw;color:#d0e1e1;letter-spacing:.05cqw;margin-bottom:4cqw}.upgrade-cards{display:flex;gap:2cqw}.upgrade-card{flex:1;background:linear-gradient(#5a76a3,#2c456d);border:.55cqw solid #142a4a;border-radius:2cqw;box-shadow:inset 0 .5cqw #bedbfd7d,0 .9cqw 0 #092442;text-align:center;position:relative;padding:3.2cqw 1cqw 2cqw}.upgrade-card.featured{background:linear-gradient(#ab73c7,#734dad);border-color:#392850;box-shadow:inset 0 .5cqw #f6c4fb94,0 .9cqw 0 #201e3f}.stat-icon{display:block;width:13cqw;height:12cqw;margin:0 auto 2cqw;filter:drop-shadow(0 .8cqw 0 #15253e88)}.upgrade-card small{display:block;font-size:1.7cqw;font-weight:bold;letter-spacing:.1cqw;color:#e3eeff}.upgrade-card strong{display:block;font-size:4.1cqw;color:#fff1c6;margin-top:1.8cqw;text-shadow:0 .4cqw #21324d;white-space:nowrap}.upgrade-card strong i{color:#b5e6b1;font-style:normal;font-size:3cqw}.upgrade-card>b{display:inline-block;margin-top:2cqw;background:#153c5066;border-radius:1cqw;padding:.5cqw 2cqw;color:#c3ff9e;font-size:2.2cqw}.gold-button{width:100%;display:flex;align-items:center;justify-content:center;gap:3cqw;margin-top:5cqw;border:.65cqw solid #4c3320;border-radius:2.2cqw;background:linear-gradient(#ffe883 0,#ffd156 45%,#edae30 46%,#ffc848 100%);box-shadow:inset 0 .7cqw #fff2b7,0 1.2cqw 0 #693e23,0 1.7cqw 0 #142741;padding:3cqw 3.5cqw;color:#46301e;text-shadow:0 .35cqw #ffec9c;font-size:4.8cqw;font-weight:900;min-height:14cqw}.gold-button>span:first-child{width:5.8cqw;height:5.8cqw}.gold-button b{font-size:4.4cqw;letter-spacing:-.15cqw}.upgrade-cost{display:flex;align-items:center;gap:1cqw;border-left:.3cqw solid #c18931;padding-left:2.5cqw;font-size:4.2cqw}.upgrade-cost>span{width:5.5cqw;height:5.5cqw}.sail-button{background:linear-gradient(#bdfc79,#87d947 48%,#65bd35 49%,#8dde45);border-color:#254a25;box-shadow:inset 0 .7cqw #e1ffbb,0 1.2cqw 0 #38652c,0 1.7cqw 0 #142741;text-shadow:0 .35cqw #bcf688;color:#20452a}.sail-button b{font-size:5cqw;letter-spacing:.2cqw}.sail-button>span:last-child{margin-left:3cqw}.upgrade-footer{text-align:center;font-size:1.9cqw;font-weight:bold;letter-spacing:.4cqw;color:#9db3c3;margin-top:4cqw}.pause-overlay{position:absolute;inset:0;background:#102b49ba;backdrop-filter:blur(6px);pointer-events:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10cqw}.pause-overlay>span{width:20cqw;height:20cqw;color:#ffe09a}.pause-overlay h2{font-family:Georgia,serif;font-size:7cqw;color:#fff0c6}.pause-overlay button{font-size:4cqw}.flash{position:absolute;inset:0;background:#fff0a4;opacity:0;pointer-events:none}.flash.go{animation:flash .65s ease-out}.loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;background:radial-gradient(ellipse,#11687e,#12324a);z-index:5;text-align:center}.loading>img{width:25%;filter:drop-shadow(0 5px 0 #062b3b)}.loading h1{font-size:9cqw;letter-spacing:-.4cqw;color:#fff2c8;text-shadow:0 1cqw #142c3e;margin:5cqw 0}.loading h1 span{color:#f5c460}.loading p{font-size:2.8cqw;color:#b1d9dc}.loading>div{width:48%;height:1.5cqw;background:#082e42;border-radius:1cqw;margin-top:4cqw;overflow:hidden}.loading>div>i{display:block;background:#f1ca72;width:5%;height:100%;transition:width .25s}
.startup-help{width:82%;padding:2cqw 4cqw 5cqw;border:1px solid #f1ca7255;border-radius:3cqw;background:#082e4266}.loading .startup-help p{font-size:3.4cqw;line-height:1.6}.startup-help strong{color:#fff2c8}.startup-help a{display:block;margin-top:5cqw;padding:3.5cqw 2cqw;border-radius:1.8cqw;background:#f1ca72;color:#18364a;text-decoration:none;font-size:3.6cqw;font-weight:bold}.startup-help small{display:block;margin-top:3cqw;font-size:2.8cqw;line-height:1.5;color:#b1d9dc}#loading-message{max-width:84%;line-height:1.5}
.notice{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);max-width:90vw;padding:14px 20px;border:1px solid #dabb775e;border-radius:7px;background:#19364a;color:#ffebc2;font-size:12px;z-index:20;box-shadow:0 10px 40px #0006}.exit-clean{position:fixed;right:16px;top:14px;background:#12354799;border:1px solid #f3d88b55;color:#faeac3;padding:10px 15px;border-radius:5px;font-size:11px;z-index:10;opacity:.2}.exit-clean:hover{opacity:1}.clean .studio-header,.clean .director,.clean .preview-footer{display:none}.clean .studio{display:block;max-width:none;padding:0;margin:0}.clean .preview-column{width:min(100vw,calc(100dvh*9/16));min-width:0;margin:auto}.clean .game-frame{border-radius:0;box-shadow:none}.game-frame:fullscreen{height:100dvh;width:min(100vw,56.25dvh);margin:auto;border-radius:0}.game-frame:fullscreen::backdrop{background:#081827}
@keyframes float-number{0%{opacity:0;margin-top:0;scale:.5}20%{opacity:1;scale:1.1}50%{scale:1}100%{margin-top:-45px;opacity:0}}
@keyframes flash{0%{opacity:.8}100%{opacity:0}}
@media(min-height:980px){.studio{gap:88px}.director>h1{font-size:40px}.shot{padding:13px 0}.director-intro{margin-bottom:28px}.preview-tools{margin-top:28px}}
@media(max-width:850px){.studio{gap:30px;padding:22px}.studio-header{padding:0 24px}.director{width:280px}.director>h1{font-size:32px}.preview-column{width:min(48vw,calc((100dvh - 130px)*9/16));min-width:260px}.studio{grid-template-columns:auto 280px}.edition{display:none}}
@media(max-width:620px){.studio-header{height:57px;padding:0 18px}.wordmark{font-size:14px}.wordmark img{width:27px;height:27px}.studio{display:block;padding:15px 15px 30px}.preview-column{width:min(100%,calc((100dvh - 110px)*9/16));min-width:0;margin:auto}.director{width:min(100%,400px);margin:35px auto 0}.director>h1{font-size:36px}.director-intro br{display:none}.preview-footer{padding-top:10px}.director-primary{padding:16px}.shot{padding:13px 0}.game-frame{border-radius:6px}.clean .exit-clean{top:auto;bottom:10px;right:8px;font-size:9px}.clean .preview-column{width:min(100vw,56.25dvh)}}
.hold-button{display:flex;align-items:center;width:100%;margin-top:13px;padding:10px 0;border:0;border-bottom:1px solid #ffffff08;background:transparent;text-align:left;color:#a0b3bb;font-size:10px}.hold-button small{display:block;font-size:8px;color:#567583;margin-top:5px}.hold-button .toggle{margin-left:auto}

/* Reference-aligned Pirate Wars shipyard: open sea, purple stat cards, dark dock tabs. */
.hud{font-family:'Trebuchet MS',Arial,sans-serif;font-weight:bold}
.compass{width:20cqw;height:20cqw;top:23cqw;right:2.5cqw;border:.8cqw solid #112b34;background:#209db7c9;color:#ffe390}.compass i{line-height:18cqw;font-size:11cqw}.compass b,.compass>span,.compass em{display:none}
.joystick-compass{color:transparent;opacity:1}.joystick-compass:before,.joystick-compass:after{content:'';position:absolute;background:#e1ffff;width:1.6cqw;height:1.6cqw;top:calc(50% - .8cqw);left:-.8cqw;transform:rotate(45deg)}.joystick-compass:after{left:auto;right:-.8cqw}
.at-port .top-hud{z-index:3;top:2cqw;left:3cqw;right:3cqw}.at-port .top-hud .mission{display:none}.at-port .pause-button{width:6cqw;height:6cqw;border:.5cqw solid #091a35;border-radius:1cqw;background:linear-gradient(#344f80,#1a2c53);color:#b6d0ec;padding:1cqw;box-shadow:0 .5cqw #112035}.at-port .currency{height:4.7cqw;min-width:20cqw;padding:0 2cqw;margin-left:auto;border-width:.35cqw;background:#173456;border-radius:3cqw;gap:1.5cqw}.at-port .currency strong{font-size:2.4cqw}.at-port .gold-coin{width:5.4cqw;height:5.4cqw}.at-port .gem-counter{z-index:3;top:2.7cqw;right:27cqw;height:4.3cqw;min-width:20cqw;background:#173456;border-width:.35cqw;font-size:2.4cqw;gap:2cqw}.at-port .gem-counter>span{width:4.8cqw;height:4.8cqw}
.port-panel{background:linear-gradient(transparent 54%,#0c5c8b22 62%,#17364cf0 73%,#142a40 94%)}.port-heading{top:10cqw}.port-heading h2{font-size:4.5cqw;letter-spacing:0;margin:0;color:#fff8da;text-shadow:.35cqw .35cqw #182332,-.35cqw -.35cqw #182332,-.35cqw .35cqw #182332,.35cqw -.35cqw #182332}.ship-stars{font-size:3cqw;margin-top:1cqw}.power-banner{top:91cqw;border:.4cqw solid #edc686;padding:.4cqw 3cqw;border-radius:5cqw;gap:1cqw}.power-banner>span{width:5cqw;height:5cqw}.power-banner strong{font-size:3.8cqw}.power-banner small{font-size:1.7cqw}.ship-actions{position:absolute;top:101cqw;left:5cqw;right:5cqw;display:flex;justify-content:space-between;align-items:center}.ship-action{pointer-events:auto;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;position:relative;border:.4cqw solid #1a2745;background:linear-gradient(#47b3df,#166eb0);border-radius:1cqw;width:16cqw;height:12cqw;box-shadow:inset 0 .5cqw #a7e8f3,0 .6cqw #11253c;color:#fff4c9;padding:.3cqw}.ship-action>span{display:block;position:absolute;top:-4cqw;width:14cqw;height:13cqw;filter:drop-shadow(.4cqw .5cqw 0 #182536)}.ship-action b{z-index:1;font-size:2.3cqw;line-height:1.2;text-shadow:.3cqw .3cqw #142332,-.3cqw -.3cqw #142332,-.3cqw .3cqw #142332,.3cqw -.3cqw #142332}.ship-level-track{position:absolute;left:0;right:0;top:116cqw;display:flex;justify-content:space-between;align-items:center;padding:2.5cqw 16cqw 0;font-size:2.2cqw;text-shadow:0 .3cqw #123}.ship-level-track>div{position:absolute;top:0;left:0;right:0;height:2.2cqw;background:#5b3d1c;border-top:.4cqw solid #edb348;border-bottom:.4cqw solid #271e1d}.ship-level-track>div>i{display:block;height:100%;background:linear-gradient(#ffe785,#f5b422);width:40%;transition:width .6s}.ship-level-track>b{position:absolute;left:calc(50% - 4cqw);top:-3cqw;width:8cqw;height:8cqw;border:.6cqw solid #d38b25;border-radius:50%;background:#fff1a9;color:#8b572a;text-shadow:0 .3cqw #fff8c4;text-align:center;line-height:6.8cqw;font-size:4cqw;box-shadow:0 0 0 .5cqw #ffe399}
.upgrade-bottom{bottom:18cqw;left:4cqw;right:4cqw}.upgrade-caption{display:none}.upgrade-cards{gap:2cqw}.upgrade-card{position:relative;background:linear-gradient(#cc96f3,#b47ae1);border:.55cqw solid #362244;border-radius:1cqw;padding:0 1cqw 0;height:35cqw;box-shadow:0 .8cqw #131f33,inset 0 0 0 .35cqw #dec2f5}.upgrade-card.featured{background:linear-gradient(#b880e9,#ab70e1);border-color:#362244;box-shadow:0 .8cqw #131f33,inset 0 0 0 .35cqw #d7b4f6}.upgrade-card.capacity{background:linear-gradient(#ffebc4,#f5d796);border-color:#6f4c30;box-shadow:0 .8cqw #131f33,inset 0 0 0 .35cqw #fff3d7}.card-level{font-size:2.8cqw;line-height:5.4cqw;margin:0 -1cqw;background:#62408e;color:white;text-shadow:.25cqw .25cqw #251832,-.25cqw -.25cqw #251832}.capacity .card-level{background:#d7b687}.stat-icon{width:12cqw;height:11cqw;margin:1.7cqw auto 1.1cqw;filter:drop-shadow(.5cqw .6cqw 0 #413557)}.upgrade-card strong{font-size:3.8cqw;color:#fff8da;margin:0;line-height:4.8cqw;text-shadow:.3cqw .3cqw #322035,-.3cqw -.3cqw #322035,-.3cqw .3cqw #322035,.3cqw -.3cqw #322035}.upgrade-card.capacity strong{color:#66b532}.upgrade-card small{font-size:2.6cqw;color:#302e43;line-height:3.5cqw;margin:0;font-weight:bold;letter-spacing:0}.upgrade-card>b.card-check{position:absolute;bottom:0;left:0;right:0;margin:0;height:7cqw;border-radius:0 0 .5cqw .5cqw;background:linear-gradient(#93df4d,#55b826);border-top:.35cqw solid #527a31;color:#eefecf;font-size:6cqw;line-height:6cqw;text-shadow:.4cqw .4cqw #2c532c,-.4cqw -.4cqw #2c532c;padding:0}.card-buy{position:absolute;bottom:0;left:0;right:0;width:100%;border:.4cqw solid #966225;border-radius:.7cqw;display:flex;justify-content:center;align-items:center;gap:1.1cqw;height:7cqw;background:linear-gradient(#ffe17c,#f6b92d);box-shadow:inset 0 .5cqw #fff0ba;color:#fff5c4;text-shadow:.3cqw .3cqw #61401e,-.3cqw -.3cqw #61401e;font-size:3cqw}.card-buy>span{width:4.4cqw;height:4.4cqw}.card-buy>b{font-size:3cqw}.upgrade-footer{font-size:1.8cqw;letter-spacing:.3cqw;margin-top:2cqw;color:#b5d0d9}.sail-button{position:absolute;left:26cqw;right:26cqw;bottom:43cqw;width:40cqw;margin:0;min-height:10cqw;height:10cqw;border-width:.4cqw;border-radius:1cqw;padding:1cqw;gap:1cqw}.sail-button b{font-size:3cqw}.sail-button>span:first-child{width:4cqw;height:4cqw}.sail-button>span:last-child{font-size:4cqw;margin-left:0}
.port-nav{position:absolute;bottom:0;left:0;right:0;display:flex;height:14cqw;background:#0d2134;border-top:.65cqw solid #102030;box-shadow:0 -1cqw #21405255;pointer-events:auto}.nav-item{flex:1;min-width:0;position:relative;border:.4cqw solid #0c1a29;border-radius:.8cqw .8cqw 0 0;background:linear-gradient(#36516b,#243b50);color:white;display:flex;align-items:center;flex-direction:column;justify-content:flex-end;padding:.9cqw .2cqw}.nav-item>span{width:10cqw;height:10cqw;position:absolute;bottom:3.6cqw;filter:drop-shadow(.5cqw .5cqw #132131)}.nav-item>b{font-size:1.9cqw;text-shadow:.25cqw .25cqw #101f30,-.25cqw -.25cqw #101f30}.nav-item.battle>span{width:14cqw;height:14cqw;bottom:3.6cqw}.nav-item.selected{background:linear-gradient(#efca66,#cf8f23);border-color:#10202e;box-shadow:inset 0 .4cqw #ffe593}.nav-item.selected>span{width:13cqw;height:13cqw;bottom:3cqw}.nav-item.selected>b{color:#fff0ba}.nav-item.decorative{cursor:default}.nav-item.decorative:after,.nav-item:nth-child(2):after{content:'';position:absolute;right:1cqw;top:-1cqw;width:1.8cqw;height:2.4cqw;border-radius:1cqw;background:#ff4d62;border:.3cqw solid #801d2d}
.port-info{position:absolute;left:8cqw;right:8cqw;top:50cqw;z-index:5;padding:5cqw;border:.7cqw solid #6f462d;border-radius:3cqw;background:linear-gradient(#fff1cf,#e9c78e);box-shadow:0 0 0 100cqw #05233b70;color:#523925;pointer-events:auto}.port-info>button{position:absolute;right:2cqw;top:1cqw;border:0;background:none;font-size:6cqw;color:#6c4328}.port-info h3{display:block;text-align:center;font-size:5cqw;color:#603e25;letter-spacing:0;margin:0 0 4cqw}.port-info-content{display:flex}.port-info #port-info-content>div{display:flex;align-items:center;gap:3cqw;padding:2.5cqw 0;border-top:.2cqw solid #b28e5d;font-size:3cqw}.port-info #port-info-content svg{width:8cqw;height:8cqw;flex-shrink:0}.port-info #port-info-content b{font-size:5cqw;min-width:20cqw}.port-info #port-info-content span{font-weight:normal}
.compass i{inset:4cqw;line-height:normal;font-size:0}.currency:after,.gem-counter:after{content:"+";display:flex;align-items:center;justify-content:center;color:#fff6d4;font-size:3cqw;line-height:1;width:4.3cqw;height:4.3cqw;border:.4cqw solid #0d332d;border-radius:50%;background:linear-gradient(#7fe057,#29993a);position:absolute;right:-1cqw;box-shadow:inset 0 .5cqw #baff8833}.currency{position:relative}.gem-counter:after{right:-.8cqw}.at-port .currency:after,.at-port .gem-counter:after{display:none}
.hud:not(.at-port) .currency{min-width:35cqw;justify-content:space-between;padding-right:6cqw}.hud:not(.at-port) .gem-counter{min-width:28cqw;justify-content:space-between;padding-right:5cqw}
.auto-fire{bottom:5cqw;--charge-color:#d8eee5}.auto-fire i{background:var(--charge-color);box-shadow:0 0 1.5cqw var(--charge-color)}.auto-fire>span{color:var(--charge-color)}.cannon-track{position:absolute;top:calc(100% + 1.1cqw);left:27%;width:46%;height:.65cqw;background:#163c5399;border-radius:1cqw;overflow:hidden}.cannon-track b{display:block;height:100%;background:var(--charge-color);border-radius:inherit}
.source-icon{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}.port-info #port-info-content .source-icon{width:8cqw;height:8cqw;flex-shrink:0}.stat-icon,.nav-item>span,.ship-action>span{filter:none}.card-buy,.gold-button,.sail-button{border:0;border-radius:0;background:transparent url(assets/figma/button-gold.png) center/100% 100% no-repeat;box-shadow:none}.card-buy{height:7.8cqw;padding:0 1.5cqw}.gold-button,.sail-button{color:#fff4d4;text-shadow:.25cqw .25cqw #382414,-.25cqw -.25cqw #382414;padding:1.5cqw 3cqw}
.compass i{inset:6.6cqw}.hud:not(.at-port) .pause-button{background:transparent url(assets/figma/button-gold.png) center/100% 100% no-repeat;border:0;border-radius:0;box-shadow:none;padding:2.5cqw}
@font-face{font-family:PW Lilita;src:url(assets/fonts/LilitaOne-Regular.ttf) format("truetype");font-display:swap}.hud strong,.hud button,.hud .card-level,.hud .nav-item b,.hud .port-heading h2,.hud .gem-counter b,.hud .mission strong{font-family:PW Lilita,Trebuchet MS,sans-serif;font-weight:400}
.tuning-trigger{display:flex;align-items:center;gap:8px;width:100%;margin:-4px 0 12px;padding:9px 11px;background:#143040;border:1px solid #55777a66;border-radius:5px;color:#ead4a3;font-size:11px;text-align:left}.tuning-trigger>span{width:22px;height:22px}.tuning-trigger b{font-size:8px;color:#9bbbbb;margin-left:auto;font-weight:normal}.settings-dialog{width:min(450px,calc(100vw - 28px));max-height:90dvh;overflow:auto;background:#112c3e;border:1px solid #d9bc76;border-radius:12px;color:#e6f0ec;padding:22px;box-shadow:0 20px 80px #0009;font-family:Arial,sans-serif}.settings-dialog::backdrop{background:#061721b8;backdrop-filter:blur(4px)}.settings-dialog header{display:flex;align-items:center;justify-content:space-between}.settings-dialog header small{font-size:9px;letter-spacing:2px;color:#d5b87b}.settings-dialog h2{font-size:24px;margin:6px 0}.settings-dialog header button{border:0;background:transparent;color:#e4d3a6;font-size:32px}.settings-dialog p{font-size:12px;line-height:1.6;color:#b7cfd2}.settings-dialog select,.settings-dialog input[type=number]{background:#092132;border:1px solid #567781;border-radius:5px;color:#f4edda;padding:10px;font:inherit;width:100%}.preset-label{display:block;margin:18px 0 8px;font-size:12px;color:#f1d490}.outline-options{display:flex;gap:15px;flex-wrap:wrap;margin:20px 0;font-size:12px}.outline-options label{display:flex;align-items:center;gap:7px}.outline-options input{accent-color:#edc476;width:17px;height:17px}.settings-dialog summary{cursor:pointer;font-size:12px;color:#edcb89;padding:12px 0;border-top:1px solid #6b838733}.movement-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:8px 0}.movement-fields label{font-size:10px;line-height:1.5;color:#bbd1d1}.movement-fields input{display:block;margin-top:5px;font-size:14px!important}.settings-dialog footer{display:flex;gap:8px;justify-content:space-between;margin-top:18px}.settings-quiet,.settings-done{border:1px solid #7c938e66;border-radius:5px;background:#19394a;color:#d4dfd9;padding:10px 13px;font-size:11px}.settings-done{background:#edc476;color:#173244;font-weight:bold}.public-controls{display:none}.public-playtest .studio-header,.public-playtest .director,.public-playtest .preview-footer,.public-playtest #exit-clean{display:none!important}.public-playtest .studio{display:block;padding:0 0 46px;max-width:none}.public-playtest .preview-column{width:min(100vw,calc((100dvh - 46px)*9/16));min-width:0;margin:auto}.public-playtest .game-frame{border-radius:0;box-shadow:none}.public-playtest .public-controls{display:flex;position:fixed;bottom:0;left:0;right:0;height:46px;align-items:center;justify-content:center;gap:10px;background:#0b2333;border-top:1px solid #31535e}.public-controls button{border:0;background:#1b3b4a;border-radius:5px;color:#eddaae;padding:7px 14px;font-size:11px;display:flex;align-items:center;gap:6px}.public-controls img{width:19px;height:19px}.cannon-count{margin-top:2cqw;font-size:2.5cqw;letter-spacing:.2cqw;color:#e5f0d7;text-shadow:0 .4cqw #102d40}.upgrade-progress{position:absolute;top:110.8cqw;left:29cqw;right:29cqw;display:flex;gap:1.4cqw;justify-content:center}.upgrade-progress i{height:2.2cqw;width:4.7cqw;border:.3cqw solid #e8cc87;border-radius:.5cqw;background:#16384b;box-shadow:0 .3cqw #173347}.upgrade-progress i:nth-child(3n){border-color:#e5f8a0;transform:scale(1.15)}.upgrade-progress i.done{background:#ffd25c}.upgrade-progress i.tier.done{background:#a2e85a}.upgrade-footer{letter-spacing:0;font-size:2cqw}.ship-level-track{padding-left:6cqw;padding-right:6cqw}.port-heading .ship-stars{margin-top:1.5cqw}
.tier-up-banner{position:absolute;top:31cqw;left:50%;transform:translateX(-50%);white-space:nowrap;padding:2cqw 4cqw;background:#173849e8;border:.5cqw solid #ffe58e;border-radius:2cqw;color:#ffe596;text-shadow:0 .5cqw #774e21;font-family:'PW Lilita',sans-serif;font-size:4.2cqw;box-shadow:0 1cqw 3cqw #0d2b4a44}
.charge-setting{display:block;font-size:12px;color:#edcb89;margin-bottom:14px}.charge-setting input{display:block;margin:8px 0 5px;max-width:150px}.charge-setting small{font-size:10px;color:#a9c5c9}
/* Keep progress labels clear of the stat cards and departure button. */
.upgrade-bottom{bottom:16cqw}.sail-button{bottom:51cqw}