/* Orbital Command: a connected engineering atlas and compact flight controls. */
.dialog:has(#panel-upgrades:not([hidden]) #engineering-tree:not([hidden])){max-width:1120px;width:calc(100vw - 64px)}
.upgrade-family{display:flex;gap:8px;border-bottom:1px solid var(--line);padding:0 0 12px;margin:10px 0}
.upgrade-family button{padding:10px 15px;background:var(--surface);color:var(--muted);border:1px solid var(--line);border-radius:3px;font:11px var(--mono)}
.upgrade-family button[aria-pressed=true]{border-color:var(--accent);color:var(--text);background:var(--raised)}
.heritage-cards .upgrade-icon svg{width:32px;height:32px}.heritage-cards button:disabled{opacity:.55;cursor:default}.heritage-cards .card-rank{margin-top:auto}
.tree-toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;font:10px/1.6 var(--mono);color:var(--muted);margin:15px 0}
.tree-toolbar label{display:flex;gap:9px;align-items:center}.tree-toolbar input{width:90px;accent-color:var(--accent)}
.tree-layout{display:grid;grid-template-columns:minmax(0,1fr) 225px;border:1px solid var(--line);border-radius:3px;overflow:hidden;background:var(--surface)}
.tree-viewport{overflow:auto;max-height:570px;min-height:360px;background-image:radial-gradient(var(--line) .7px,transparent .7px);background-size:18px 18px;overscroll-behavior:contain;scrollbar-color:var(--line) var(--surface)}
#tree-canvas{position:relative;transform-origin:0 0}.tree-links{position:absolute;inset:0;pointer-events:none}.tree-links path{stroke:#4e6365;stroke-width:1.5;fill:none;stroke-dasharray:4 5}.tree-links path.met{stroke:var(--branch-color);stroke-dasharray:none;stroke-width:2}
.skill-node{position:absolute;width:182px;min-height:82px;border:1px solid var(--line);border-left:3px solid var(--branch-color);border-radius:3px;background:var(--surface);text-align:left;padding:9px 11px;display:flex;flex-direction:column;gap:6px;color:var(--text);box-shadow:0 3px 10px #0003}
.skill-node small{display:block;max-width:154px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:7px var(--mono);letter-spacing:.6px;color:var(--muted)}
.skill-node strong{font:11px/1.3 var(--mono);font-weight:500}.skill-node em{font:8px var(--mono);font-style:normal;color:var(--muted)}.skill-node>span{display:flex;gap:3px}.skill-node i{height:4px;flex:1;background:var(--raised);border:1px solid var(--line)}.skill-node i.filled{background:var(--branch-color);border-color:var(--branch-color)}
.skill-node.ready{border-color:var(--branch-color)}.skill-node.owned{background:var(--raised)}.skill-node[aria-pressed=true]{outline:2px solid var(--text);outline-offset:3px}.skill-node:hover{filter:brightness(1.12)}.skill-node:focus-visible{outline:2px solid var(--text);outline-offset:3px}
.tree-inspect{padding:20px 16px;border-left:1px solid var(--line);background:var(--raised);font-size:11px;line-height:1.7}.tree-inspect>small{font:8px var(--mono);color:var(--accent);letter-spacing:1px}.tree-inspect h3{margin:10px 0;font-size:18px}.tree-inspect p{color:var(--muted)}.tree-inspect h4{font:9px var(--mono);text-transform:uppercase;margin-top:20px}.tree-inspect ul{padding-left:16px;color:var(--muted);font-size:10px}.tree-inspect li{margin:6px 0}.tree-inspect li.met{color:var(--accent)}.tree-inspect li button{border:0;background:none;padding:0;color:inherit;text-align:left;font:inherit;text-decoration:underline;text-underline-offset:3px}.tree-inspect .primary{width:100%;font-size:10px;padding:10px}.tree-inspect .tree-blockers{font:9px/1.7 var(--mono)}
#guardian-controls{padding:18px;margin:14px 0;border:1px solid var(--line);font-size:11px}#guardian-controls h3{margin:0 0 10px;font-size:14px}#guardian-controls button{padding:10px;border:1px solid var(--accent);border-radius:3px;background:var(--surface);color:var(--text)}
.command-bar{position:fixed;bottom:116px;left:50%;transform:translateX(-50%);display:flex;gap:5px;align-items:center;justify-content:center;flex-wrap:wrap;max-width:610px;width:max-content;padding:9px 12px;background:#071218e8;border:1px solid var(--line);border-radius:4px;pointer-events:auto;z-index:8}
.command-bar button{font:9px var(--mono);padding:7px 9px;border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:2px}.command-bar button[aria-pressed=true]{color:var(--accent);border-color:var(--accent)}.command-bar button:disabled{opacity:.35}.command-bar>span{flex-basis:100%;text-align:center;font:8px var(--mono);color:var(--muted)}
.scenario-hud{position:fixed;top:24px;left:50%;transform:translateX(-50%);width:320px;padding:12px 15px;border:1px solid var(--line);pointer-events:none}.scenario-hud strong,.scenario-hud span{display:block;font:10px var(--mono);margin:3px 0 8px}.scenario-hud span{color:var(--muted);font-size:9px}.scenario-hud .progress-track{height:3px}.scenario-hud i{display:block;height:100%;background:var(--gold)}
.flight-hud-hidden .command-bar,.flight-hud-hidden .scenario-hud,.flight-hud-hidden #taunt-layer{display:none!important}
.mode-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.mode-card{border:1px solid var(--line);padding:20px;background:var(--surface);border-radius:3px}.mode-card small{font:8px var(--mono);letter-spacing:1px;color:var(--accent)}.mode-card h3{font-size:18px;font-weight:500}.mode-card p{font-size:11px;line-height:1.7;color:var(--muted)}.mode-card .compact{font-size:10px;max-width:100%}
.network-fields,.sandbox-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;margin:18px 0}.network-fields label{display:flex;flex-direction:column;gap:8px;font:10px var(--mono)}.network-fields input,.signal-message input,.signal-upload input{width:100%;padding:10px;border:1px solid var(--line);color:var(--text);background:var(--surface);border-radius:3px;font:12px var(--mono)}#network-status{font:11px/1.7 var(--mono);color:var(--accent)}
.sandbox-command{padding-block:16px;border-block:1px solid var(--line);margin-block:18px}.sandbox-command h3{margin:24px 0 12px;font:13px var(--mono)}.sandbox-command label{font:10px var(--mono);color:var(--muted)}.sandbox-command input[type=number]{width:95px}.sandbox-command input,.sandbox-command select{border:1px solid var(--line);background:var(--surface);color:var(--text);padding:7px;border-radius:2px}.sandbox-options label{display:flex;align-items:center;justify-content:space-between;gap:12px}.sandbox-options input[type=range]{width:120px;accent-color:var(--accent)}.sandbox-command .exp-controls{align-items:end}.sandbox-command .exp-controls label{display:flex;flex-direction:column;gap:7px}
.signal-choice{display:flex;flex-direction:column;gap:12px;text-align:left;padding:18px;color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:3px}.signal-choice small{font:8px var(--mono);color:var(--accent)}.signal-choice b{font-size:13px;font-weight:400}.signal-message{display:block;font:10px var(--mono);margin:18px 0}.signal-message input{display:block;margin-top:9px}.signal-upload{display:block;margin:20px 0;font-size:11px}.signal-upload input{display:block;margin-top:8px;font-size:10px}.taunt-preview{position:relative;padding:16px;min-height:60px;border:1px solid var(--accent);background:var(--raised);width:max-content;max-width:240px;display:flex;flex-direction:column;align-items:center;gap:10px;margin:25px auto;font-size:12px;overflow-wrap:anywhere}.taunt-preview img{max-width:160px;max-height:140px;object-fit:contain}
#taunt-layer{position:fixed;inset:0;pointer-events:none;z-index:7}.flight-taunt{position:absolute;transform:translate(-50%,-100%);display:flex;flex-direction:column;gap:6px;align-items:center;max-width:180px;padding:9px 13px;background:#102126eb;border:1px solid #8da89c;color:#dde8db;font:10px/1.45 var(--mono);overflow-wrap:anywhere;text-align:center;box-shadow:0 3px 15px #0004}.flight-taunt img{max-width:110px;max-height:85px;object-fit:contain}.taunt-speech{border-radius:7px}.taunt-speech:after{content:'';position:absolute;bottom:-6px;left:50%;width:9px;height:9px;transform:rotate(45deg);background:#102126;border-right:1px solid #8da89c;border-bottom:1px solid #8da89c}.taunt-angular{clip-path:polygon(0 0,calc(100% - 11px) 0,100% 11px,100% 100%,11px 100%,0 calc(100% - 11px))}.taunt-banner{border-inline:4px solid var(--gold)}.taunt-circle{border-radius:50%;min-width:70px;min-height:70px;justify-content:center;padding:18px}
.fps-slider{display:flex;flex-direction:column;gap:8px;align-items:flex-end}.fps-slider input{width:180px;accent-color:var(--accent)}.fps-slider output{font:10px var(--mono);color:var(--accent)}
@media(max-width:900px){.command-bar{bottom:112px;max-width:440px}.command-bar button{padding:6px;font-size:8px}.scenario-hud{top:12px;width:260px}.tree-layout{grid-template-columns:minmax(0,1fr) 180px}.tree-inspect{padding:14px 11px}}
@media(max-width:650px){.dialog:has(#panel-upgrades:not([hidden]) #engineering-tree:not([hidden])){width:calc(100vw - 20px)}.tree-layout{grid-template-columns:1fr}.tree-inspect{border-left:0;border-top:1px solid var(--line)}.tree-viewport{max-height:370px;min-height:270px}.mode-list,.network-fields{grid-template-columns:1fr}.command-bar{max-width:90vw;bottom:112px}.scenario-hud{position:static;transform:none;margin:12px auto}.sandbox-options{grid-template-columns:1fr}.tree-toolbar{flex-wrap:wrap}}
/* Hosted arena: one-button quick match above the optional own-server form. */
.quick-match{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:22px 0 6px}.quick-match .primary{min-width:220px}.quick-match .subtle{margin:0}
.own-server{margin:14px 0 6px;border-top:1px solid var(--line);padding-top:10px}.own-server summary{cursor:pointer;color:var(--muted);font-size:12px;padding:10px 0;min-height:44px;display:flex;align-items:center}.own-server summary:hover{color:var(--aqua)}
/* Quick match loading screen: a core with two captured moons while the arena wakes and the match joins. */
.arena-loading{position:fixed;inset:0;z-index:40;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px;text-align:center;background:radial-gradient(60% 50% at 50% 42%,rgba(var(--accent-rgb),.08),transparent 70%),rgba(3,8,12,.94);backdrop-filter:blur(10px);animation:al-in .35s ease}
.arena-loading.al-out{opacity:0;transform:scale(1.04);transition:opacity .6s ease,transform .6s ease}
.arena-loading h2{margin:18px 0 0;font-size:26px;font-weight:400;letter-spacing:-.4px;color:var(--text)}
.al-detail{margin:0;max-width:30em;min-height:3.4em;color:var(--muted);font-size:13px;line-height:1.7;font-variant-numeric:tabular-nums}
.al-orbit{position:relative;width:132px;height:132px}
.al-core{position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:var(--aqua);box-shadow:0 0 0 6px rgba(var(--accent-rgb),.12),0 6px 24px rgba(0,0,0,.5);animation:al-pulse 2.4s ease-in-out infinite}
.al-ring{position:absolute;inset:18px;border:1px solid rgba(var(--accent-rgb),.25);border-radius:50%;animation:al-spin 2.6s linear infinite}
.al-ring-b{inset:0;border-color:rgba(var(--accent-rgb),.14);animation-duration:4.4s;animation-direction:reverse}
.al-ring b{position:absolute;left:50%;top:-4px;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--accent)}
.al-ring-b b{width:6px;height:6px;margin-left:-3px;top:-3px;background:var(--gold)}
.al-bar{width:min(320px,80vw);height:2px;background:rgba(var(--accent-rgb),.15);border-radius:2px;overflow:hidden}
.al-bar i{display:block;height:100%;width:0;background:var(--aqua);transition:width .8s ease}
.al-actions{display:flex;gap:10px;margin-top:10px}
.arena-loading[data-state="error"] .al-ring,.arena-loading[data-state="error"] .al-core{animation-play-state:paused;opacity:.45}
.arena-loading[data-state="error"] .al-bar{visibility:hidden}
@keyframes al-spin{to{transform:rotate(360deg)}}
@keyframes al-pulse{50%{transform:scale(1.12)}}
@keyframes al-in{from{opacity:0}}
@media (prefers-reduced-motion:reduce){.arena-loading,.al-ring,.al-core{animation:none}.arena-loading.al-out,.al-bar i{transition:none}}
.reduced-motion .arena-loading,.reduced-motion .al-ring,.reduced-motion .al-core{animation:none}

/* ===== Phone layout (js/mobile.js) ===== */
/* Device picker, shown on every visit */
.device-picker{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:20px;background:rgba(3,8,12,.88);backdrop-filter:blur(8px);animation:al-in .3s ease}
.dp-card{width:min(720px,100%);background:var(--surface);border:1px solid rgba(var(--muted-rgb),.18);border-radius:10px;padding:30px 28px;box-shadow:0 30px 90px rgba(0,0,0,.55)}
.dp-card h2{margin:0 0 8px;font-size:26px;font-weight:400;letter-spacing:-.4px;color:var(--text)}
.dp-card p{margin:0 0 22px;color:var(--muted);font-size:13px;line-height:1.7}
.dp-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.dp-option{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:20px 18px;min-height:150px;border:1px solid rgba(var(--muted-rgb),.3);border-radius:8px;background:rgba(var(--surface-rgb),.6);text-align:left;color:var(--text);transition:border-color .2s,background .2s}
.dp-option:hover,.dp-option:focus-visible{border-color:var(--aqua);background:rgba(var(--accent-rgb),.08)}
.dp-option svg{width:34px;height:34px;stroke:var(--aqua);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.dp-option b{font-size:17px;font-weight:500}
.dp-option span{font-size:12px;color:var(--muted);line-height:1.5}
@media(max-width:440px){.dp-card{padding:24px 18px}.dp-options{grid-template-columns:1fr}.dp-option{min-height:0;display:grid;grid-template-columns:40px 1fr;align-items:center;column-gap:14px;row-gap:2px}.dp-option svg{grid-row:1/3}}

/* Portrait only: turning the phone sideways covers the game */
.rotate-lock{display:none}
@media (orientation:landscape) and (max-height:560px){.mobile .rotate-lock{position:fixed;inset:0;z-index:70;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px;text-align:center;background:#03080c;color:var(--text)}}
.rotate-lock svg{width:56px;height:56px;stroke:var(--aqua);fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.rotate-lock b{font-size:20px;font-weight:400}
.rotate-lock span{font-size:13px;color:var(--muted)}

/* Minimal phone HUD: desktop panels step aside unless switched on in the phone menu */
.m-hud{display:none}
.mobile .m-hud{display:block;position:absolute;inset:0;pointer-events:none}
.mobile .flight-rail>#hud-panel-mass,.mobile .flight-rail>#command-bar,.mobile .flight-rail>#expedition-status,.mobile .flight-rail>#collision-hud,.mobile .flight-rail>#cosmic-hud,.mobile .flight-rail>#flight-guide,
.mobile #hud .top-controls,.mobile #hud-panel-rivals,.mobile #hud-panel-final,.mobile #hud-panel-telemetry,.mobile #hud-panel-abilities,.mobile #hud-panel-radar,.mobile #scale-note,.mobile #flight-dock{display:none!important}
/* The phone layout is drawn at full size (the small-screen HUD zoom would shrink its touch targets);
   desktop instruments switched on from the phone menu are scaled to 75%, offsets compensated. */
.mobile #hud{zoom:1!important}
.mobile .flight-rail,.mobile #hud-panel-rivals,.mobile #hud-panel-radar,.mobile #hud-panel-telemetry{zoom:.75}
.mobile .flight-rail{top:calc((70px + env(safe-area-inset-top)) / .75);left:13px;width:330px;bottom:calc(240px / .75)}
.mobile.m-show-mass .flight-rail>#hud-panel-mass,.mobile.m-show-system .flight-rail>#cosmic-hud:not([hidden]),.mobile.m-show-notes .flight-rail>#flight-guide{display:block!important;position:relative;inset:auto;width:auto}
.mobile.m-show-rivals #hud-panel-rivals{display:block!important;top:calc((70px + env(safe-area-inset-top)) / .75);right:13px;width:200px;padding:12px}
.mobile.m-show-radar #hud-panel-radar{display:block!important;left:13px;right:auto;bottom:calc((150px + env(safe-area-inset-bottom)) / .75);width:147px}
.mobile.m-show-radar #hud-panel-radar canvas{width:147px;height:147px}
.mobile.m-show-telemetry #hud-panel-telemetry{display:flex!important;left:13px;right:auto;bottom:calc((72px + env(safe-area-inset-bottom)) / .75);padding:8px 0;max-width:300px;overflow:hidden}
.mobile.m-show-telemetry #hud-panel-telemetry .telemetry-item{min-width:0;padding:0 8px}
.mobile .threat-banner{top:calc(70px + env(safe-area-inset-top));max-width:calc(100vw - 24px)}
.mobile .toasts{top:calc(72px + env(safe-area-inset-top));width:calc(100vw - 24px)}
.mobile .evolution h2{font-size:30px}
/* Phone windows: no flight toasts over them, no keyboard hints in their header */
.mobile:has(#overlay:not([hidden])) .toasts{display:none}
.mobile #window-minimize kbd{display:none}

.m-top{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;gap:8px;padding:calc(10px + env(safe-area-inset-top)) 10px 10px;background:linear-gradient(rgba(3,8,12,.82),rgba(3,8,12,0))}
.m-mass{flex:1;min-width:0;display:grid;grid-template-columns:1fr auto;align-items:baseline;column-gap:10px;row-gap:6px}
.m-stage{font:9px var(--mono);letter-spacing:1.2px;color:var(--aqua);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-value{font-weight:400;font-size:15px;color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap}
.m-track{grid-column:1/-1;height:3px;background:rgba(var(--accent-rgb),.15);border-radius:2px;overflow:hidden}
.m-fill{display:block;height:100%;width:0;background:var(--aqua);transition:width .3s ease}
.m-btn{position:relative;flex:none;width:46px;height:46px;display:grid;place-items:center;border:1px solid rgba(var(--muted-rgb),.25);border-radius:10px;background:rgba(var(--surface-rgb),.82);color:var(--text)}
.m-btn svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.m-badge{position:absolute;top:-5px;right:-5px;min-width:19px;height:19px;padding:0 5px;border-radius:10px;background:var(--gold);color:#1b1206;font:600 11px/19px var(--sans);text-align:center}
.m-aim{position:absolute;left:50%;transform:translateX(-50%);top:calc(70px + env(safe-area-inset-top));display:flex;align-items:center;gap:10px;padding:6px 6px 6px 14px;border:1px solid rgba(var(--accent-rgb),.35);border-radius:999px;background:rgba(var(--surface-rgb),.9);font-size:12px;color:var(--accent);white-space:nowrap}
.m-aim button{min-height:36px;padding:0 14px;border-radius:999px;background:var(--aqua);color:var(--surface);font-size:12px;font-weight:600}
.m-hint{position:absolute;left:0;right:0;bottom:calc(36% + env(safe-area-inset-bottom));margin:0;text-align:center;font:10px var(--mono);letter-spacing:2px;text-transform:uppercase;color:rgba(var(--accent-rgb),.6);animation:m-hint 3s ease-in-out infinite}
.m-steered .m-hint{display:none}
@keyframes m-hint{50%{opacity:.35}}
/* Zoom, bottom left: telemetry, when shown, sits above it */
.m-zoom{position:absolute;left:12px;bottom:calc(16px + env(safe-area-inset-bottom));display:flex;gap:8px}
.m-zoom .m-btn{touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.m-zoom .m-btn[aria-disabled="true"]{opacity:.4}
.m-thumbs{position:absolute;right:12px;bottom:calc(16px + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.m-row{display:flex;align-items:flex-end;gap:10px}
.m-hold,.m-act{display:grid;place-items:center;border:1px solid rgba(var(--accent-rgb),.35);border-radius:50%;background:rgba(var(--surface-rgb),.78);color:var(--accent);font-size:11px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.m-hold{width:68px;height:68px}
.m-boost{width:84px;height:84px;font-size:12px;border-color:var(--aqua);color:var(--aqua)}
.m-boost span{max-width:64px;text-align:center;line-height:1.2}
.m-hold.is-held{background:rgba(var(--accent-rgb),.28);color:var(--text);transform:scale(.96)}
.m-boost.is-locked{opacity:.45;border-style:dashed}
.m-act{width:58px;height:58px;font-size:10px}
.m-supernova{width:auto;height:44px;padding:0 18px;border-radius:999px;border-color:var(--gold);color:var(--gold)}

/* Phone menu: the dock as one menu */
.phone-menu h2{margin-top:0}
.pm-section{margin:18px 0 0}
.pm-section h3{margin:0 0 10px;font:10px var(--mono);letter-spacing:1.6px;text-transform:uppercase;color:var(--muted);font-weight:400}
.pm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.pm-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:84px;padding:10px 6px;border:1px solid rgba(var(--muted-rgb),.2);border-radius:8px;background:rgba(var(--surface-rgb),.55);color:var(--text);font-size:12px;text-align:center;line-height:1.3}
.pm-tile svg{width:26px;height:26px;stroke:var(--aqua);fill:none;stroke-width:1.6}
.pm-tile:hover,.pm-tile:focus-visible,.pm-toggle:hover,.pm-chip:hover{border-color:var(--aqua)}
.pm-chips{display:flex;flex-wrap:wrap;gap:8px}
.pm-chip{min-height:44px;padding:0 16px;border:1px solid rgba(var(--muted-rgb),.25);border-radius:999px;background:rgba(var(--surface-rgb),.55);color:var(--text);font-size:13px}
.pm-chip.is-on{border-color:var(--aqua);color:var(--aqua)}
.pm-toggles{display:grid;gap:6px}
.pm-toggle{display:flex;justify-content:space-between;align-items:center;min-height:46px;padding:0 14px;border:1px solid rgba(var(--muted-rgb),.2);border-radius:8px;background:rgba(var(--surface-rgb),.55);color:var(--text);font-size:13px}
.pm-toggle b{font:400 10px var(--mono);letter-spacing:1.2px;text-transform:uppercase;color:var(--muted)}
.pm-toggle[aria-pressed="true"] b{color:var(--aqua)}
.pm-close{margin-top:22px;width:100%}
@media (prefers-reduced-motion:reduce){.m-hint,.device-picker{animation:none}}
.reduced-motion .m-hint{animation:none}

/* Install as an app (phones only): a card under the title actions and a help sheet with the browser's steps */
.m-install{display:grid;grid-template-columns:44px minmax(0,1fr) auto auto;align-items:center;gap:12px;margin:14px 0 4px;padding:10px 6px 10px 12px;border:1px solid rgba(var(--accent-rgb),.3);border-radius:8px;background:rgba(var(--surface-rgb),.82)}
:root:not(.mobile) .m-install{display:none}
.m-install img{border-radius:10px}
.mi-text b{display:block;font-size:14px;font-weight:500;color:var(--text)}
.mi-text span{display:block;margin-top:2px;font-size:11px;line-height:1.45;color:var(--muted)}
.mi-go{min-height:44px;padding:0 16px;border-radius:999px;background:var(--aqua);color:var(--surface);font-size:12px;font-weight:600}
.mi-close{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:none;color:var(--muted)}
.mi-close svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.ih-card img{display:block;margin-bottom:14px;border-radius:12px}
.ih-steps{margin:0 0 16px;padding-left:20px;font-size:14px;line-height:1.6;color:var(--text)}
.ih-steps li{margin-bottom:8px}
.ih-actions{display:flex;flex-wrap:wrap;gap:10px}
.ih-actions .primary{justify-content:center}

/* First steps (js/firststeps.js): three goals for a new player, a calm screen until the first evolution */
.first-steps #hud-panel-rivals,.first-steps #hud-panel-radar,.first-steps #hud-panel-telemetry,.first-steps #command-bar,.first-steps #hud-panel-abilities,.first-steps #flight-guide,.first-steps #scale-note,.first-steps #expedition-status,.first-steps #flight-dock,.first-steps .m-hint{display:none!important}
.fs-finale #command-bar,.fs-finale #hud-panel-abilities{display:none!important}
.fs-reveal #hud-panel-rivals,.fs-reveal #hud-panel-radar,.fs-reveal #hud-panel-telemetry,.fs-reveal #command-bar,.fs-reveal #hud-panel-abilities,.fs-reveal #flight-guide{animation:fs-in 1.2s ease both}
@keyframes fs-in{from{opacity:0;transform:translateY(6px)}}
.first-steps-card{position:absolute;left:50%;bottom:48px;transform:translateX(-50%);width:min(440px,calc(100vw - 32px));padding:14px 18px 16px;pointer-events:auto;animation:al-in .4s ease both}
.mobile .first-steps-card{bottom:calc(118px + env(safe-area-inset-bottom));width:calc(100vw - 24px)}
.fs-head{display:flex;justify-content:space-between;font:10px var(--mono);letter-spacing:1.6px;color:var(--aqua)}
.fs-title{display:block;margin:8px 0 4px;font-size:19px;font-weight:400;color:var(--text)}
.fs-hint{margin:0 0 12px;font-size:12px;line-height:1.55;color:var(--muted)}
.fs-track{display:block;height:3px;border-radius:2px;background:rgba(var(--accent-rgb),.15);overflow:hidden}
.fs-fill{display:block;height:100%;width:0;background:var(--aqua);transition:width .35s ease}
.first-steps-card.is-evolved{border-color:rgba(var(--accent-rgb),.45)}
.is-evolved .fs-head span:first-child{color:var(--gold)}
.fs-road{display:flex;margin:12px 0;padding:0;list-style:none;font:10px var(--mono);letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.fs-road li{flex:1;position:relative;padding-top:14px;text-align:center}
.fs-road li:before{content:"";position:absolute;top:3px;left:50%;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:var(--raised);box-shadow:0 0 0 1px rgba(var(--muted-rgb),.4)}
.fs-road li:after{content:"";position:absolute;top:6px;left:calc(50% + 6px);right:calc(-50% + 6px);height:1px;background:rgba(var(--muted-rgb),.3)}
.fs-road li:last-child:after{display:none}
.fs-road .is-past,.fs-road .is-here{color:var(--aqua)}
.fs-road .is-past:before{background:var(--aqua)}
.fs-road .is-here:before{background:var(--gold);box-shadow:0 0 10px var(--gold)}
.fs-actions{display:flex;flex-wrap:wrap;gap:8px}
.fs-actions .primary{justify-content:center}
@media (prefers-reduced-motion:reduce){.first-steps-card,.fs-reveal #hud-panel-rivals,.fs-reveal #hud-panel-radar,.fs-reveal #hud-panel-telemetry,.fs-reveal #command-bar,.fs-reveal #hud-panel-abilities,.fs-reveal #flight-guide{animation:none}}

/* Leaderboards (js/boards.js) */
.boards-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 14px}
.boards-tabs button{min-height:40px;padding:0 14px;border:1px solid rgba(var(--muted-rgb),.25);border-radius:999px;background:rgba(var(--surface-rgb),.55);color:var(--muted);font-size:12px}
.boards-tabs button[aria-selected="true"]{border-color:var(--aqua);color:var(--aqua);background:rgba(var(--accent-rgb),.08)}
.boards-list{margin:0 0 14px;padding:0;list-style:none}
.boards-list li{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:baseline;gap:10px;padding:10px 4px;border-bottom:1px solid var(--line);font-size:13px;color:var(--accent)}
.boards-list li b{font:400 11px var(--mono);color:var(--muted)}
.boards-list li:nth-child(-n+3) b{color:var(--gold)}
.boards-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text)}
.boards-value{font:11px var(--mono);color:var(--muted);text-align:right;white-space:nowrap}
.boards-list li.is-you{background:rgba(var(--accent-rgb),.07)}
.boards-list li.is-you .boards-name,.boards-list li.is-you .boards-value{color:var(--aqua)}
.boards-note{color:var(--muted);font-size:13px;line-height:1.6}
.boards-you{font:12px var(--mono);color:var(--aqua)}
.boards-foot{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:14px}
.boards-foot p{flex-basis:100%;margin:0}
.boards-back{margin-top:4px}
.over-boards{margin:-8px 0 18px;color:var(--aqua)}
@media (max-width:520px){.boards-value{grid-column:2/-1;text-align:left}.boards-list li{grid-template-columns:36px minmax(0,1fr)}}

/* Apex rivals (js/apex.js) */
.apex-bar{position:absolute;top:24px;left:50%;transform:translateX(-50%);width:min(380px,calc(100vw - 32px));padding:10px 16px 12px;border-color:rgba(239,151,125,.45);pointer-events:none;animation:al-in .4s ease both}
.apex-active .threat-banner{display:none!important}
.mobile .apex-bar{top:auto;bottom:calc(118px + env(safe-area-inset-bottom));width:calc(100vw - 24px)}
.apex-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.apex-head b{font-size:15px;font-weight:500;color:var(--text)}
.apex-pips{display:flex;gap:5px}
.apex-pips i{width:16px;height:6px;border-radius:2px;background:#ef977d}
.apex-pips i.is-hit{background:rgba(var(--muted-rgb),.25)}
.apex-state{display:block;margin-top:6px;font:11px var(--mono);letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.apex-bar[data-phase="warn"] .apex-state,.apex-bar[data-phase="dash"] .apex-state{color:#ef977d}
.apex-bar[data-phase="stun"]{border-color:rgba(176,255,242,.6)}
.apex-bar[data-phase="stun"] .apex-state{color:#b0fff2}
@media (prefers-reduced-motion:reduce){.apex-bar{animation:none}}

/* Daily challenges (js/daily.js) */
.daily-card{margin:14px 0 4px;padding:12px 14px;max-width:520px;border:1px solid rgba(var(--muted-rgb),.22);border-radius:8px;background:rgba(var(--surface-rgb),.72)}
.dc-head{display:flex;justify-content:space-between;font:10px var(--mono);letter-spacing:1.4px;color:var(--aqua)}
.daily-card ol{margin:8px 0 0;padding:0;list-style:none}
.daily-card li{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-top:1px solid var(--line);font-size:12px;color:var(--accent)}
.daily-card li b{font:400 10px var(--mono);letter-spacing:1px;color:var(--gold);white-space:nowrap}
.daily-card li.is-done{color:var(--muted);text-decoration:line-through}
.daily-card li.is-done b{color:var(--aqua);text-decoration:none}

/* Game modes picker (js/modes.js) */
#mode-list{display:grid;gap:16px}
.mode-tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.mode-tile{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-height:150px;padding:12px;border:1px solid rgba(var(--muted-rgb),.22);border-radius:10px;background:rgba(var(--surface-rgb),.6);color:var(--text);text-align:left;overflow:hidden;transition:transform .25s ease,border-color .25s,box-shadow .25s}
.mode-tile:hover,.mode-tile:focus-visible{transform:translateY(-3px);border-color:rgba(var(--accent-rgb),.6);box-shadow:0 10px 26px rgba(0,0,0,.35)}
.mode-tile[aria-selected="true"]{border-color:var(--aqua);box-shadow:0 0 0 1px var(--aqua) inset,0 10px 30px rgba(var(--accent-rgb),.12)}
.mode-tile b{font-size:14px;font-weight:500;line-height:1.25}
.mode-tag{font:10px var(--mono);letter-spacing:.6px;color:var(--muted);line-height:1.4}
.mode-art{position:relative;display:block;width:64px;height:64px;margin-bottom:6px;border-radius:50%}
.mode-art i{position:absolute;inset:0;border-radius:50%}
.mode-art i:nth-child(1){inset:22%;background:radial-gradient(circle at 35% 30%,#fff,var(--c1) 45%,var(--c2));box-shadow:0 0 18px var(--c1)}
.mode-art i:nth-child(2){border:1px solid var(--c1);opacity:.55;transform:rotate(-20deg) scaleY(.38);animation:mode-spin 7s linear infinite}
.mode-art i:nth-child(3){inset:6%;border:1px dashed var(--c2);opacity:.45;animation:mode-spin 14s linear infinite reverse}
.mode-art-big{width:96px;height:96px;flex:none}
.mode-journey{--c1:#a9eed0;--c2:#3c6e66}.mode-multiplayer{--c1:#7fd3ff;--c2:#2a4f8a}.mode-boss{--c1:#ffae83;--c2:#8a3b2a}.mode-salvage{--c1:#e9c98a;--c2:#7a5a2a}.mode-sandbox{--c1:#c9a8ff;--c2:#4b3a8a}
@keyframes mode-spin{to{transform:rotate(340deg) scaleY(.38)}}
.mode-art i:nth-child(3){animation-name:mode-turn}
@keyframes mode-turn{to{transform:rotate(-360deg)}}
.mode-detail{display:flex;gap:18px;align-items:flex-start;padding:16px;border:1px solid rgba(var(--muted-rgb),.2);border-radius:10px;background:rgba(var(--surface-rgb),.45);animation:al-in .3s ease}
.mode-detail small{font:10px var(--mono);letter-spacing:1.5px;color:var(--c1)}
.mode-detail h3{margin:4px 0 6px;font-size:20px;font-weight:400;color:var(--text)}
.mode-detail p{margin:0 0 8px;font-size:12px;line-height:1.6;color:var(--muted)}
.mode-detail .mode-progress{color:var(--accent)}
@media (max-width:760px){.mode-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.mode-tile{min-height:120px}.mode-detail{flex-direction:column}.mode-art-big{width:72px;height:72px}}
@media (prefers-reduced-motion:reduce){.mode-art i,.mode-detail{animation:none!important}.mode-tile{transition:none}}
.reduced-motion .mode-art i{animation:none!important}

/* Multiplayer arenas, coins and the shop (js/multiplayer.js, js/shop.js) */
.arena-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin:12px 0}
.arena-card{display:grid;gap:6px;padding:12px;border:1px solid rgba(var(--muted-rgb),.22);border-radius:8px;background:rgba(var(--surface-rgb),.55)}
.arena-card b{font-size:14px;font-weight:500;color:var(--text)}
.arena-count{font:11px var(--mono);color:var(--muted)}
.arena-fill{display:block;height:3px;border-radius:2px;background:rgba(var(--accent-rgb),.15);overflow:hidden}
.arena-fill i{display:block;height:100%;width:0;background:var(--aqua)}
.arena-card.is-full{opacity:.6}
.mp-shop{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin:10px 0;padding:10px 12px;border:1px solid rgba(244,197,66,.3);border-radius:8px;background:rgba(244,197,66,.05)}
.coin-line{display:flex;align-items:center;gap:8px;color:#f4c542;font:13px var(--mono)}
.coin-glyph{display:inline-block;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff4c2,#f4c542 50%,#b8860b);box-shadow:0 0 8px rgba(244,197,66,.6);flex:none}
.coin-chip{position:absolute;top:24px;right:250px;display:flex;align-items:center;gap:6px;padding:6px 12px;font:12px var(--mono);color:#f4c542;pointer-events:none}
.coin-chip span{color:var(--muted)}
.mobile .coin-chip{top:calc(66px + env(safe-area-inset-top));right:10px}
.shop-wallet{display:flex;align-items:center;gap:8px;margin:0 0 6px;font:15px var(--mono);color:#f4c542}
.shop-section h3{margin:16px 0 8px;font:10px var(--mono);letter-spacing:1.6px;text-transform:uppercase;color:var(--muted);font-weight:400}
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.shop-item{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px;border:1px solid rgba(var(--muted-rgb),.2);border-radius:8px;background:rgba(var(--surface-rgb),.55);text-align:center}
.shop-item.is-on{border-color:#f4c542;box-shadow:0 0 0 1px rgba(244,197,66,.4) inset}
.shop-item b{font-size:13px;font-weight:500;color:var(--text)}
.shop-item .compact{min-width:0;width:100%;justify-content:center}
.shop-item [aria-disabled="true"]{opacity:.55}
#mode-list.mode-list{display:block}
#mode-list .mode-detail{margin-top:14px}
.arena-card .compact{min-width:0;width:100%;justify-content:center}

/* Console mode: the desktop screen played from a controller; the pointer stays out of the way in flight. */
html.console #universe{cursor:none}
html.console .pad-focus{outline-width:3px!important;outline-offset:5px}
/* Controller overlay: lights up exactly what the player presses (setting: Controller overlay). */
.pad-overlay{position:fixed;left:26px;top:246px;z-index:40;width:190px;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:4px;opacity:.92}
.pad-overlay svg{width:190px;height:auto;display:block}
.pad-overlay .po-body{fill:rgba(10,22,28,.82);stroke:rgba(172,200,192,.35);stroke-width:1.2}
.pad-overlay .po-well{fill:rgba(4,9,14,.8);stroke:rgba(172,200,192,.25)}
.pad-overlay .po-stick{fill:#182a36;stroke:#859c9a;stroke-width:1.4;transition:fill .08s}
.pad-overlay .po-btn,.pad-overlay .po-trig{fill:rgba(4,9,14,.85);stroke:#859c9a;stroke-width:1.2;transition:fill .08s,stroke .08s}
.pad-overlay .po-fill{fill:var(--aqua)}
.pad-overlay .on{fill:var(--aqua);stroke:var(--aqua)}
.pad-overlay .po-a.on{fill:#7fcf8a;stroke:#7fcf8a}.pad-overlay .po-b.on{fill:#e3a08b;stroke:#e3a08b}.pad-overlay .po-x.on{fill:#7fb2e3;stroke:#7fb2e3}.pad-overlay .po-y.on{fill:#e8d27a;stroke:#e8d27a}
.pad-overlay .po-letter{font:600 8px var(--sans);fill:#e7ece5;text-anchor:middle;pointer-events:none}
.pad-overlay .po-label{margin:0;min-height:22px;padding:3px 10px;border-radius:3px;background:rgba(10,22,28,.86);border:1px solid rgba(172,200,192,.2);font:11px var(--mono);letter-spacing:.06em;color:var(--aqua);opacity:0;transition:opacity .2s}
.pad-overlay .po-label.on{opacity:1}
html.mobile .pad-overlay{bottom:auto;top:70px;width:160px}html.mobile .pad-overlay svg{width:160px}
/* Xbox install card: the close button appears two seconds after the card. */
.xbox-install{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:20px;background:rgba(3,8,12,.82);backdrop-filter:blur(8px);animation:al-in .3s ease}
.xi-card{position:relative;width:min(560px,100%);background:var(--surface);border:1px solid rgba(var(--muted-rgb),.2);border-radius:10px;padding:30px 30px 26px;box-shadow:0 30px 90px rgba(0,0,0,.55);display:flex;flex-direction:column;gap:14px}
.xi-card h2{margin:0;font-size:26px;font-weight:400;letter-spacing:-.5px;padding-right:40px}
.xi-card p{margin:0;color:var(--muted);font-size:15px;line-height:1.6}
.xi-steps{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px;font-size:15px;line-height:1.5;color:var(--text)}
.xi-close{position:absolute;top:14px;right:14px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(var(--muted-rgb),.35);background:rgba(var(--surface-rgb),.6);font-size:24px;line-height:1;color:var(--text);animation:al-in .25s ease}
.xi-close:hover,.xi-close:focus-visible{border-color:var(--aqua);color:var(--aqua)}
.xi-go{align-self:flex-start;min-width:200px}
/* Arena notice: kicked for idling, or the link lost; Reconnect sits centred under the message. */
.mp-notice{position:fixed;inset:0;z-index:65;display:grid;place-items:center;padding:20px;background:rgba(3,8,12,.8);backdrop-filter:blur(8px);animation:al-in .3s ease}
.mn-card{width:min(460px,100%);background:var(--surface);border:1px solid rgba(var(--muted-rgb),.2);border-radius:10px;padding:32px 30px 22px;box-shadow:0 30px 90px rgba(0,0,0,.55);display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.mn-card h2{margin:0;font-size:28px;font-weight:500;letter-spacing:-.5px}
.mp-notice[data-kind=kicked] .mn-card h2{color:#ff5a4f}
.mp-notice[data-kind=kicked] .mn-card{border-color:rgba(255,90,79,.45)}
.mn-card p{margin:0;color:var(--muted);font-size:15px;line-height:1.6}
.mn-reconnect{min-width:220px;justify-content:center;margin-top:6px;font-size:16px}
.mn-menu{font-size:13px;min-height:40px}
/* Owner panel */
.owner-entry{color:var(--gold)!important}
.owner-panel .owner-status{min-height:20px;font-size:13px;color:var(--aqua);margin:8px 0}.owner-panel .owner-status.bad{color:var(--danger)}
.owner-sent{font-size:16px;color:var(--gold);margin:0 0 12px}
#owner-key{width:100%;max-width:320px;font:600 26px var(--mono);letter-spacing:8px;text-transform:uppercase;padding:12px 14px;border-radius:6px;border:1px solid rgba(var(--muted-rgb),.35);background:var(--surface);color:var(--text);margin-bottom:12px}
#owner-key:focus{outline:2px solid var(--aqua);outline-offset:2px}
.owner-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:10px 0}
.owner-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 4px}
.owner-tab{padding:9px 14px;border-radius:4px;border:1px solid rgba(var(--muted-rgb),.25);font-size:13px;color:var(--muted)}
.owner-tab[aria-selected=true]{border-color:var(--gold);color:var(--gold);background:rgba(216,188,141,.08)}
.owner-body{display:flex;flex-direction:column;gap:12px;max-height:52vh;overflow:auto;padding-right:4px}
.owner-body select,.owner-body textarea{background:var(--surface);color:var(--text);border:1px solid rgba(var(--muted-rgb),.35);border-radius:4px;padding:9px 10px;font:inherit;font-size:13px}
.owner-body textarea{resize:vertical;min-height:80px}
.owner-sum{font-size:12px;color:var(--muted);margin:0}
.owner-room h3{font-size:14px;font-weight:500;margin:6px 0}
.owner-table{width:100%;border-collapse:collapse;font-size:13px}
.owner-table td{padding:7px 6px;border-bottom:1px solid var(--line)}
.owner-actions{text-align:right;white-space:nowrap}.owner-actions button{min-height:32px;padding:5px 10px;font-size:12px;margin-left:6px}
.owner-actions .danger,.owner-pick .danger{color:var(--danger)}
.owner-pick{border:1px solid rgba(216,188,141,.4);border-radius:6px;padding:12px 14px;background:rgba(216,188,141,.06)}.owner-pick p{margin:0 0 6px;font-size:13px}
.owner-foot{margin-top:10px}
/* The age step after sign-up */.consent-row{display:flex;gap:12px;align-items:flex-start;padding:14px 0;font-size:12px;line-height:1.6;color:var(--text)}.consent-row input{margin-top:2px;width:20px!important;height:20px!important}.consent-row a{color:var(--gold);text-decoration:underline}#signin-age .exp-controls{margin-top:6px}
.signin-turnstile{margin:14px 0 4px;min-height:65px}
/* The Life Lab incubator: three egg slots */.incubator-head{margin:4px 0 14px}.incubator-head h3{margin:6px 0 4px;font-size:18px;font-weight:500;color:var(--text)}.incubator-head p{margin:0}.incubator-slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:22px}.egg-slot{display:flex;flex-direction:column;align-items:center;text-align:center;padding:12px 12px 14px;border:1px solid var(--line);border-radius:6px;background:linear-gradient(180deg,rgba(var(--raised-rgb),.95),rgba(var(--surface-rgb),.95))}.egg-slot.ready{border-color:var(--pet-color);box-shadow:0 0 26px -10px var(--pet-color)}.egg-slot.empty{border-style:dashed}.egg-canvas{width:100%;max-width:220px;height:auto;aspect-ratio:220/190}.egg-rarity{font:9px var(--mono);letter-spacing:1.4px;color:var(--pet-color,var(--muted))}.egg-slot h4{margin:4px 0 2px;font-size:15px;font-weight:500;color:var(--text)}.egg-slot .egg-flavour,.egg-slot .subtle{min-height:3.2em;margin:2px 0 0}.egg-progress{width:100%;height:5px;border-radius:3px;background:var(--surface);overflow:hidden;margin:8px 0 4px}.egg-progress div{height:100%;background:var(--pet-color);box-shadow:0 0 8px var(--pet-color)}.egg-time{font:10px var(--mono);color:var(--muted);margin:0 0 10px}.egg-slot button{width:100%;justify-content:center;min-height:40px;margin-top:auto}.hatch-ready{animation:hatch-pulse 1.6s ease-in-out infinite}@keyframes hatch-pulse{0%,100%{box-shadow:0 0 0 0 var(--pet-color)}50%{box-shadow:0 0 18px 2px var(--pet-color)}}.reduced-motion .hatch-ready{animation:none}@media(max-width:620px){.incubator-slots{grid-template-columns:1fr}.egg-canvas{max-width:170px}}