/* Living Galaxy — the loading screen and the enlarged main menu.
   Its own file rather than more of overlays.css: this is the only surface that exists
   before the game does, and it has no styles in common with anything that comes after. */

#load-overlay{position:absolute;inset:0;z-index:95;
  background:radial-gradient(ellipse at 50% 38%,#07203a,#000206 72%);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .6s ease;opacity:1}
#load-overlay.done{opacity:0}
#load-overlay.hidden{display:none}

#load-card{width:min(420px,92vw);display:flex;flex-direction:column;gap:9px;
  padding:0 8px}

#load-title{font-size:19px;letter-spacing:9px;color:var(--edge-hot);text-align:center;
  text-shadow:0 0 22px rgba(55,185,212,.55);font-weight:600}

/* The art. A fixed aspect rather than a fixed height so it holds its shape on a phone in
   landscape, where a fixed height would take the whole viewport. */
#load-art{width:100%;aspect-ratio:16/10;display:block;
  background:linear-gradient(180deg,rgba(2,12,24,.85),rgba(1,6,14,.95));
  border:1px solid rgba(45,110,170,.4);border-radius:3px}
@supports not (aspect-ratio:1/1){ #load-art{height:190px} }

#load-headline{font-size:12px;color:#cfe8ff;letter-spacing:.06em;text-align:center}
#load-sub{font-size:10px;color:#6f9dbe;text-align:center;min-height:12px}

#load-bar{height:6px;background:rgba(0,20,38,.9);border:1px solid rgba(45,110,190,.5);
  border-radius:4px;overflow:hidden}
#load-bar-fill{height:100%;width:0;border-radius:3px;
  background:linear-gradient(90deg,#0a5a4a,#1aa888,var(--edge-hot));
  box-shadow:0 0 10px rgba(80,220,255,.45)}

#load-meter{display:flex;justify-content:space-between;
  font:9px/1.4 ui-monospace,monospace;color:#5f88a8;letter-spacing:.08em}

/* The feed. Fixed height so the card does not jump as lines arrive — a layout that resizes
   on every log line is the loading-screen equivalent of a progress bar that goes backwards. */
#load-feed{height:88px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;
  font:9.5px/1.45 ui-monospace,monospace;gap:1px}
#load-feed .lf{color:#9fd4ef;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#load-feed .lf.dim{color:#4e7591}
#load-feed .lf.ok{color:#6fe0a8}
#load-feed .lf.warn{color:#e0b46f}

/* ── the menu grew ───────────────────────────────────────────────── */

#boot-card{max-height:92vh;overflow-y:auto}

#gen-panel{border:1px solid rgba(45,110,190,.35);border-radius:3px;padding:9px 10px;
  display:flex;flex-direction:column;gap:5px;text-align:left}
.gen-row{display:flex;justify-content:space-between;align-items:baseline;
  font:10px/1.3 ui-monospace,monospace;color:#8bc8ff;letter-spacing:.05em}
.gen-row span:last-child{color:#fff}
#gen-panel input[type=range]{width:100%;accent-color:var(--edge-hot);
  height:22px;margin:0;background:none;border:none;padding:0;touch-action:none}
#gen-note{font:9px/1.5 ui-monospace,monospace;color:#5f88a8}
#gen-archive{font:9px/1.5 ui-monospace,monospace;color:#4e7591}
#gen-apply{padding:7px 0!important;font-size:10px!important}
#gen-apply.hidden{display:none}

#pilot-panel{border:1px solid rgba(45,110,190,.35);border-radius:3px;padding:8px 9px;
  display:flex;flex-direction:column;gap:6px;text-align:left}
#pilot-head{display:flex;justify-content:space-between;align-items:center;
  font:10px/1.3 ui-monospace,monospace;color:#8bc8ff;letter-spacing:.06em}
/* The two buttons inside the panels are not primary actions, and #boot-card's button rule
   makes everything look like one — a clipped corner, three-pixel letter spacing and full
   width. Overridden here rather than loosened there: the power-up button should keep looking
   like the power-up button. */
#boot-card #pilot-head button{padding:4px 9px;font-size:9px;letter-spacing:.08em;width:auto;
  clip-path:none;border-radius:3px;border-color:rgba(60,120,190,.5)}
#boot-card .pilot-retire{padding:0;font-size:10px;letter-spacing:0;text-transform:none;
  clip-path:none;border-radius:3px}
#boot-card #gen-apply{clip-path:none;border-radius:3px;letter-spacing:.1em}
#pilot-list{display:flex;flex-direction:column;gap:4px;max-height:150px;overflow-y:auto}
.pilot-empty{font:9px/1.5 ui-monospace,monospace;color:#4e7591}
.pilot-row{display:flex;align-items:center;gap:7px;padding:5px 7px;cursor:pointer;
  background:rgba(6,18,32,.8);border:1px solid rgba(45,110,190,.3);border-radius:3px}
.pilot-row.active{border-color:var(--edge-hot);box-shadow:inset 0 0 12px rgba(60,200,230,.14)}
.pilot-row:active{background:rgba(14,40,60,.95)}
.pr-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px}
.pr-name{font-size:11px;color:#dff0ff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pr-line{font:8.5px/1.3 ui-monospace,monospace;color:#6f9dbe;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pr-cr{font:9px/1 ui-monospace,monospace;color:var(--gold);white-space:nowrap}
.pilot-retire{flex:0 0 auto;width:20px;height:20px;padding:0;border-radius:3px;
  background:none;border:1px solid rgba(120,60,60,.5);color:#c08a8a;
  font-size:10px;line-height:1;font-family:inherit;cursor:pointer}
.pilot-retire:active{background:var(--hostile);color:#fff}

@media (max-height:700px){
  #load-feed{height:56px}
  #load-title{font-size:16px;letter-spacing:6px}
  #pilot-list{max-height:96px}
}