/* Drift Fleet 06 — a game front end, followed by a readable command deck. */
[hidden]{display:none!important}button:focus-visible,select:focus-visible{outline:2px solid #9be7ff;outline-offset:4px}
body{--gas:#8ce5f3;--paper:#edf4ff;--gold:#ffe1a1}body[data-stage]:not([data-stage="playing"]) #game>*:not(canvas):not(.vignette):not(#webgl-error){visibility:hidden}body[data-stage]:not([data-stage="playing"]) #labels{opacity:0}
#game-shell{position:fixed;inset:0;z-index:60;color:var(--paper);overflow:auto}.shell-shade{position:absolute;inset:0;background:linear-gradient(90deg,#080d24ed 0%,#0b122ba8 35%,#111a3220 65%,#080d2440),linear-gradient(0deg,#060c20dd,transparent 40%);pointer-events:none}.main-menu{position:relative;margin:7vh 0 60px 7vw;width:490px;max-width:85vw}.menu-kicker{font:10px ui-monospace,monospace;letter-spacing:3px;color:#9ae2f1;display:flex;gap:12px;align-items:center}.menu-kicker i{width:20px;height:2px;background:#9ae2f1}.main-menu h1{font-family:Impact,'Arial Narrow',sans-serif;font-stretch:condensed;font-size:clamp(66px,8.5vw,126px);line-height:.83;letter-spacing:7px;font-weight:500;margin:30px 0 23px;text-shadow:0 0 70px #74a7ff35}.main-menu h1>span{color:#ffe2b1}.main-menu h1 em{display:block;font:500 16px system-ui;letter-spacing:2px;color:#c8d6ec;margin-top:25px}.menu-description{font-size:13px;color:#9fadc9;line-height:1.9}.main-menu-actions{display:flex;flex-direction:column;gap:0;width:340px;max-width:100%;margin-top:29px}.main-menu-actions button{background:transparent;border:0;border-bottom:1px solid #839bb33b;border-radius:0;text-align:left;padding:16px 7px;color:#dce8fa;display:flex;align-items:center;justify-content:space-between;font:500 15px system-ui;transition:background .2s,padding .2s}.main-menu-actions button:hover{background:#829acb20;padding-left:16px}.main-menu-actions button span{font-size:10px;color:#92a6c6}.main-menu-actions #menu-play{margin-bottom:12px;background:#ffdfaa;color:#1c2332;padding:19px 20px;border:0;box-shadow:0 10px 50px #ffbd6615}.main-menu-actions #menu-play b{font-size:17px}.main-menu-actions #menu-play span{font:8px ui-monospace,monospace;letter-spacing:1px;color:#524331}.menu-save{font-size:10px;color:#9dacc6;line-height:1.8;margin-top:17px}.menu-idle-note{margin-top:26px;border-left:2px solid #7ab5da75;padding-left:13px}.menu-idle-note b{font-size:11px;font-weight:500;color:#c1d4ec}.menu-idle-note p{font-size:10px;line-height:1.8;color:#839bb9;margin:6px 0}.menu-ship-label{position:absolute;left:62%;top:65%;padding-left:25px;border-left:1px solid #c9d9f555;pointer-events:none}.menu-ship-label>span{font:9px ui-monospace;letter-spacing:2px;color:#a8c4e9}.menu-ship-label>b{display:block;font-size:26px;color:#fff0cd;margin:8px 0}.menu-ship-label em{font-size:12px;font-style:normal;font-weight:400;border:1px solid #e7d9b066;padding:3px 8px;margin-left:8px}.menu-ship-label small{color:#a9bbd7;font-size:10px}.shell-footer{position:fixed;bottom:25px;left:7vw;right:4vw;display:flex;justify-content:space-between;font:8px ui-monospace;letter-spacing:1.5px;color:#8e9ab7}.brand-intro{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;background:#080e24d9;animation:intro-appear 1.5s ease both}.brand-intro h1{font-family:Impact,'Arial Narrow',sans-serif;font-weight:400;font-size:clamp(40px,7vw,90px);letter-spacing:12px;margin:28px 0 15px;color:#ffe6be}.brand-intro>span{font:10px ui-monospace;letter-spacing:5px;color:#b8d6f9}.brand-intro p{font-size:14px;letter-spacing:4px;color:#a5b8d4}.brand-intro button{margin-top:42px;border:0;background:transparent;color:#849dbe;font-size:11px}.intro-orbit{position:relative;display:grid;place-items:center;width:110px;height:110px;margin:0 auto 36px;transform:none}.intro-orbit i{position:absolute;inset:0;border:1px solid #9edcfa;border-radius:50%;box-shadow:0 0 30px #65bce322;animation:orbit 9s linear infinite}.intro-orbit i:nth-child(2){inset:20px -20px;animation-direction:reverse}.intro-orbit i:nth-child(3){inset:33px -33px;border-color:#ffe4aa}.arrival-caption{position:absolute;left:0;right:0;bottom:13%;text-align:center;text-shadow:0 3px 30px #000}.arrival-caption small{font:10px ui-monospace;letter-spacing:5px;color:#b1e3ff}.arrival-caption h2{font-size:32px;font-weight:400;letter-spacing:5px;color:#f0f9ff;margin:17px 0}.arrival-caption p{font-size:12px;color:#b1cbe4}.arrival-caption button{position:fixed;bottom:35px;right:4vw;background:#0b162699;border:1px solid #9cc6ea44;padding:9px 16px;font-size:11px;color:#d5e7ff}body[data-stage="arrival"] .shell-shade{background:linear-gradient(0deg,#040c23a8,transparent 35%,transparent 80%,#070d20a0)}
.drawer,.drawer.research-wide{width:366px!important}.drawer-tabs button{font-size:11px;padding:0 10px}.drawer>section{width:100%;box-sizing:border-box}.top-actions #menu-open{color:#ffe2b1}.ship-info h3{font-size:14px;line-height:1.45}.ship-info .role-tag{font-size:9px}.ship-info p{font-size:10px}.ship-card{padding-top:12px;padding-bottom:11px}.ship-art svg{height:49px}.queue-item b{font-size:11px}.queue-item span{font-size:10px}.cost{font-size:12px}.tech-cost{font-size:10px}.tech-node p{font-size:10px;line-height:1.6}
.fleet-dock{height:184px;min-height:184px;padding:14px 16px;bottom:14px}.selected-ship{width:215px}.selected-ship #selected-name{font-size:20px;letter-spacing:-.3px}.selected-ship #selected-class{font-size:9px}.selected-ship #selected-icon{width:64px}.selected-ship #selected-role{font-size:9px;line-height:1.5}.selected-ship>button{align-items:center}.dock-title{height:22px}.formation-panel{width:150px}.fleet-roster{min-width:0}#fleet-cards{height:136px;display:flex;gap:8px;overflow-x:auto;scrollbar-width:thin;padding-bottom:4px}.fleet-card.role-card{position:relative;min-width:145px;width:145px;height:126px;flex:0 0 145px;padding:9px 10px 8px;background:#101d35bd;border:1px solid #748caf37;border-top:2px solid var(--role);text-align:left;overflow:hidden}.fleet-card.role-card.selected{background:#27415cbd;border-color:var(--role);box-shadow:inset 0 0 20px #8fbaff12}.role-card .card-class{display:flex;justify-content:space-between;align-items:center}.role-card .card-class b{font-size:14px;color:var(--role);white-space:nowrap;font-weight:650;letter-spacing:-.4px}.role-card .card-class small{font:5px ui-monospace;color:var(--role);opacity:.6}.role-card svg{display:block;width:100%;height:44px;color:var(--role);margin:1px 0}.role-card .card-name{display:flex;justify-content:space-between;color:#aebed6;font:9px system-ui}.role-card .card-name span{font-size:8px;color:#95adc7}.role-card p{color:#90a8c7;font-size:8px;margin:6px 0;white-space:nowrap}.role-card .tiny-health{position:absolute;bottom:0;left:0;right:0;height:3px}.fleet-card.mother-card{position:sticky;left:0;z-index:2;flex-basis:160px;min-width:160px;width:160px;background:#263148!important;border-color:#baa78460}.mother-card .card-class b{font-size:18px}.mother-card svg{height:43px}.formation-panel .dock-title{font-size:10px}.formation-panel #formations{margin-top:13px}.formation-panel #formation-desc{font-size:9px}
.command-column{bottom:236px;overflow-y:auto;scrollbar-width:thin}.command-column .radar-panel{min-height:130px;flex-shrink:0}.command-column .salvage{border-top-color:#8be4f3}.salvage-symbol{color:#8be4f3!important}.salvage-foot{font-size:8px}.command-column .wreck-panel{padding:10px 12px;flex-shrink:0;border-top:1px solid #d1a5ed70}.wreck-panel>div{display:flex;flex-direction:column;gap:5px}.wreck-panel b{font-size:11px;color:#d9bcff}.wreck-panel span{font-size:8px;color:#a2b2cd}.wreck-panel button{font-size:9px;color:#bfcfeb;background:none;border:0;padding:7px 0 0}.wreck-panel #wreck-recover{background:#b693e733;border:1px solid #b89be766;color:#ead9ff;padding:7px;width:100%;margin-top:8px}.time-control{bottom:207px}.camera-caption{bottom:211px}.view-tools{bottom:238px}.contact{max-width:calc(100% - 710px);font-size:11px}.contact small{font-size:9px}
.tutorial{position:absolute;left:264px;bottom:242px;width:310px;padding:15px 17px;z-index:5;background:linear-gradient(125deg,#132844ee,#111b34ed);border:1px solid #87c5ec66;box-shadow:0 12px 50px #0005}.tutorial-heading{display:flex;justify-content:space-between;align-items:center}.tutorial-heading small{font:8px ui-monospace;letter-spacing:1.4px;color:#7eb9d9}.tutorial-heading b{font:9px ui-monospace;color:#d4eaff;margin-left:15px}.tutorial-heading button{font-size:18px;line-height:1;background:transparent;border:0;color:#8eafd1}.tutorial-track{height:2px;background:#54698440;margin:11px 0 13px}.tutorial-track i{display:block;height:2px;background:#a1e7ff;transition:width .3s}.tutorial h2{font-size:17px;font-weight:500;margin:0 0 10px;color:#f0f7ff;letter-spacing:-.5px}.tutorial p{font-size:11px;line-height:1.9;color:#aabed8;margin:0 0 12px}.tutorial #tutorial-progress{font-size:10px;color:#ffe0a3;margin-bottom:11px}.tutorial #tutorial-action{border:1px solid #9edff36b;background:#75c1d91a;width:100%;font-size:11px;color:#d1f0ff;padding:10px}.tutorial-reward{display:block;font-size:8px;color:#96adc2;margin-top:8px}#tutorial-restore{position:absolute;left:264px;bottom:240px;padding:9px 14px;font-size:10px;color:#b8dff3;z-index:5}.tutorial-target{outline:2px solid #a5e7ff!important;outline-offset:3px;box-shadow:0 0 23px #73cfff42!important}
.idle-explanation{border-left:2px solid #92d0ed;padding:1px 10px;margin:8px 0 17px}.idle-explanation>b{font-size:13px;color:#e3efff}.idle-explanation p{font-size:10px;line-height:1.8;color:#9eafc8;margin-bottom:0}.prototype-label{font-size:9px;line-height:1.8;color:#e1c9a8;background:#dfaa6310;border:1px solid #d7ab663a;padding:9px 10px;margin:12px 0}#item-inventory{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin:14px 0}#item-inventory>div{padding:13px 3px;background:#203149b3;border:1px solid #7e9dbb30;text-align:center}#item-inventory b{display:block;font:26px ui-monospace;color:#dfebfd}#item-inventory span{display:block;font-size:9px;margin-top:6px;color:#a6b9d4}.boost-target{display:flex;flex-direction:column;gap:8px;font-size:10px;color:#adbed5}.boost-target select{padding:9px;background:#122039;color:#e3ecfb;border:1px solid #769ac14f}.store-tools{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}.store-tools button{font-size:10px;line-height:1.8;color:#cfc5ee;background:#c3a9eb0c;border:1px solid #a997c63b;padding:9px 5px}.store-tools small{font-size:8px;display:block;color:#899bb9}.reward-ad{border:1px solid #91b9dd40;margin:12px 0;padding:12px}.reward-ad>div:first-child{display:flex;justify-content:space-between;align-items:center}.reward-ad b{font-size:11px;color:#c8e4fb}.reward-ad small{font-size:8px;color:#8fadc8}.reward-ad p{font-size:10px;line-height:1.8;color:#9baec7}.reward-ad button{background:#4c8ca326;border:1px solid #88c6d64d;padding:10px 12px;font-size:10px;color:#d4f1ff;width:100%}.supply-pack{padding:15px;border:1px solid #d4b17b45;background:linear-gradient(135deg,#8d633f1c,#25344f33);margin:14px 0}.supply-pack>small{font:8px ui-monospace;color:#d4b888;letter-spacing:1px}.supply-pack h3{font-size:13px;display:flex;justify-content:space-between;margin:13px 0;color:#ecddbd}.supply-pack h3>b{font-size:15px;font-weight:400}.supply-pack p{font-size:10px;line-height:1.9;color:#b6b4bf}.supply-pack button{width:100%;padding:10px;background:#d5ba841c;border:1px solid #e5c88f66;font-size:10px;color:#f1d6a3}.experience-dialog{width:410px;max-width:90vw;padding:30px;background:#121e35;color:#dce9fc;border:1px solid #94bce666;box-shadow:0 20px 100px #000a}.experience-dialog::backdrop{background:#020719b9;backdrop-filter:blur(8px)}.experience-dialog>small{font:9px ui-monospace;color:#7fa7c7;letter-spacing:2px}.experience-dialog h2{font-size:24px;font-weight:500;letter-spacing:-.5px;margin:15px 0 22px}.experience-dialog p{font-size:12px;line-height:1.9;color:#9eb0cb}.experience-dialog .primary{margin:20px 0 0;width:100%;background:#bfe7ef;color:#152d40;padding:12px}.experience-dialog .check-row{font-size:13px;padding:10px 0;color:#cfdef0}.experience-dialog input[type=checkbox]{accent-color:#a4def3}.volume-row{display:flex;align-items:center;gap:20px;font-size:12px;color:#a0b8d2;margin:8px 0 15px}.volume-row input{flex:1;accent-color:#9bd5ef}.ad-timer{text-align:center;font:62px ui-monospace;color:#b8eaff;padding:25px}.ad-progress{height:3px;background:#5b84a331}.ad-progress i{height:3px;background:#a2e5ff;display:block;transition:width .1s}#reward-dialog .wide-button{margin-top:15px}#report-bonus{max-width:450px;margin:20px 0;padding:14px;background:#283c5229;border:1px solid #92bdcd44;font-size:12px}
@keyframes intro-appear{from{opacity:0}to{opacity:1}}@keyframes orbit{to{transform:rotate(360deg)}}
@media(min-width:1500px){.drawer,.drawer.research-wide{width:390px!important}.main-menu{margin-top:10vh}.menu-ship-label{left:64%}}
@media(max-height:820px){.main-menu{margin-top:6vh}.main-menu h1{font-size:78px;margin:22px 0 15px}.main-menu-actions{margin-top:20px}.main-menu-actions button{padding:12px 7px}.menu-idle-note{margin-top:17px}.menu-description{font-size:12px}.main-menu h1 em{font-size:13px;margin-top:18px}.command-column .radar-panel{height:112px;min-height:112px}.command-column .radar-panel canvas{height:51px}.tutorial{bottom:235px;padding:12px 14px;width:282px}.tutorial p{font-size:10px;line-height:1.7}.tutorial h2{font-size:15px}}
@media(max-width:1150px){.drawer,.drawer.research-wide{width:330px!important}.selected-ship{width:180px}.formation-panel{width:125px}.tutorial{left:245px;width:260px}.contact{display:none}.top-actions span{display:none!important}.main-menu{margin-left:6vw}.menu-ship-label{left:65%;max-width:30%}.menu-ship-label small{line-height:1.8;display:block}.tutorial #tutorial-body{font-size:10px}}
@media(max-width:900px){.drawer,.drawer.research-wide{width:320px!important}.tutorial{left:215px;width:255px;bottom:237px}.fleet-dock{height:184px}.selected-ship{width:165px}.formation-panel{display:none}.menu-ship-label{display:none}.shell-shade{background:linear-gradient(90deg,#080d24ed,#0b122b80 70%,#111a3220)}.command-column{bottom:235px}.camera-caption{bottom:211px}.time-control{bottom:207px}}
@media(max-width:620px){.main-menu{margin:8vh 7vw 100px;width:86vw;max-width:86vw}.main-menu h1{font-size:80px}.main-menu-actions{width:100%}.menu-description{font-size:12px}.main-menu-actions button{padding:13px 6px}.shell-footer{font-size:6px;letter-spacing:.8px}.shell-footer>span:last-child{display:none}.brand-intro h1{font-size:37px;letter-spacing:5px}.brand-intro p{font-size:10px;letter-spacing:2px}.arrival-caption h2{font-size:23px;letter-spacing:2px}.arrival-caption p{font-size:10px}.drawer,.drawer.research-wide{width:calc(100% - 20px)!important;bottom:244px}.fleet-dock{height:218px;min-height:218px;display:flex;flex-direction:column;gap:8px;padding:10px;bottom:8px}.selected-ship{display:none}.fleet-roster{width:100%}.fleet-card.role-card{height:151px;flex-basis:150px;width:150px}.fleet-card.role-card svg{height:58px}.fleet-card.mother-card{flex-basis:155px;min-width:155px}.role-card .card-class b{font-size:14px}.role-card .card-name{font-size:10px}.role-card p{font-size:9px;margin-top:9px}#fleet-cards{height:165px}.dock-title>span:last-child{font-size:7px}.time-control{bottom:232px}.camera-caption{display:none}.tutorial{left:10px;right:10px;width:auto;bottom:281px;z-index:9;padding:12px 15px}.tutorial h2{font-size:15px}.tutorial p{font-size:10px;line-height:1.7;margin-bottom:8px}.tutorial #tutorial-action{padding:8px}.tutorial #tutorial-progress{font-size:9px}.tutorial-reward{font-size:7px}#tutorial-restore{left:10px;bottom:242px}.command-column .salvage{bottom:293px}.command-column .wreck-panel{position:absolute;right:10px;top:285px;width:145px;padding:8px}.command-column .wreck-panel b{font-size:10px}.command-column .wreck-panel span{font-size:7px}.command-column .wreck-panel button{font-size:8px}.view-tools{top:375px;bottom:auto}.top-actions{max-width:100px;flex-wrap:wrap}.top-actions #menu-open{width:29px}.boss-hud{top:395px}.experience-dialog{padding:24px;max-width:92vw}.drawer-tabs button{font-size:10px;padding:0 8px}}
@media(prefers-reduced-motion:reduce){.intro-orbit i{animation:none}.brand-intro{animation:none}*{scroll-behavior:auto!important}}

/* Keep the tutorial above the fleet instead of covering the mothership. */
body[data-stage="loading"]::after{content:"ASTRAYSTAR";position:fixed;inset:0;display:grid;place-items:center;background:#0b1229;color:#ffe4b2;font:40px system-ui;letter-spacing:8px;z-index:80}
.role-card .card-class small{display:none}.resource-icon.copper{color:#8ce5f3}.tutorial{left:calc(50% - 90px);top:160px;bottom:auto;width:290px}.command-column .voyage{padding:9px 12px}.command-column .voyage h1{margin:8px 0}.command-column .distance{margin:7px 0}.command-column .distance>b{font-size:31px}.command-column .radar-panel{min-height:116px;height:116px}.command-column .radar-panel canvas{height:55px}
body[data-stage="arrival"] .shell-footer{display:none}
@media(max-width:1150px){.tutorial{left:calc(50% - 90px);width:260px;top:150px}}
@media(max-width:900px){.tutorial{left:212px;top:150px;width:248px}}
@media(max-width:620px){.tutorial{left:10px;right:10px;top:auto;bottom:281px;width:auto}.command-column .voyage{padding:8px}.command-column .distance>b{font-size:24px}.command-column .radar-panel{height:130px}.command-column .radar-panel canvas{height:69px}}