/* StarCode — Stylesheet */
/* The `hidden` attribute must always win. A plain class selector like
   `.anomaly-overlay { display: flex }` is author-origin and beats the UA
   stylesheet's `[hidden] { display: none }`, so any panel styled that way
   stays on screen forever, painting an opaque scrim over the whole app.
   Every panel here is toggled via `el.hidden = true/false`, so this rule
   is the correct single place to enforce it — when the attribute is
   removed the element's own display value applies again as normal. */
[hidden] { display: none !important; }
:root {
  --bg-deep: #040810;
  --bg-panel: #080e1a;
  --bg-card: #0d1525;
  --bg-card-hover: #141f38;
  --text-primary: #e2e8f0;
  --text-secondary: #94a3b8;
  --text-dim: #4a5568;
  --accent: #f59e0b;
  --accent-dim: #b45309;
  --accent-glow: rgba(245, 158, 11, 0.15);
  --border: #1a2235;
  --border-light: #2d3a50;
  --success: #22c55e;
  --danger: #ef4444;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-data: "SF Mono", "Cascadia Code", "Fira Code", "Consolas", monospace;
  /* SC-HEADER-CLEARANCE: how far the round nav buttons hang below the
     header's divider line (--hdr-line-y) -- half the tallest button, the
     100px Capture button. Screen content starts at the line, so anything that
     must not sit under the hanging buttons pads down by this much. The
     480px block in cosmos-controls.css drops it to 32px alongside the
     72px Capture button it shrinks to there. */
  --nav-hang: 50px;
}
[data-theme="nebula"] {
  --bg-deep: #060812;
  --bg-panel: #0a0e1e;
  --bg-card: #0f1328;
  --bg-card-hover: #161d3a;
  --text-primary: #d8dff0;
  --text-secondary: #8898c4;
  --text-dim: #4a5580;
  --accent: #818cf8;
  --accent-dim: #5b64c4;
  --accent-glow: rgba(129, 140, 248, 0.15);
  --border: #1a1f3a;
  --border-light: #2a3358;
}
[data-theme="ember"] {
  --bg-deep: #0a0608;
  --bg-panel: #120a0e;
  --bg-card: #1a0f15;
  --bg-card-hover: #281820;
  --text-primary: #f0e0e4;
  --text-secondary: #b89098;
  --text-dim: #6a4a52;
  --accent: #f0a0b0;
  --accent-dim: #c07080;
  --accent-glow: rgba(240, 160, 176, 0.15);
  --border: #2a1820;
  --border-light: #3d2830;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  height: 100%;
  background: var(--bg-deep);
  color: var(--text-primary);
  font-family: var(--font-body);
  overflow-x: hidden;
}
/* ── Background starfield canvas ────────────────────── */
#bgStarfield {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
}
/* ── Build stamp (DCOSMOS-BUILDSTAMP) ──────────────── */
/* ── Layout ─────────────────────────────────────────── */
/* SC-FB12: --header-h is set from the header's real offsetHeight by an
   inline script right after the header in index.html, before first paint,
   so the fallback below never actually runs. It is kept honest anyway --
   108px is the header's own default height (no width media query active:
   12px padding + the 84px atlas button + 12px padding), not the 58px
   pre-thin number the header used to be before the divider-bulge redesign
   (that old number left a dead band under the header on the rare path
   where this fallback did apply). */
/* SC-FB17: the fixed header no longer occupies flow, so the page content
   starts below the visual header line through this one padding. */
body { padding-top: var(--header-h, 54px); }
.view {
  display: none;
  height: calc(100dvh - var(--header-h, 54px));
  position: relative;
  z-index: 1;
  overflow-y: auto;
}
.view.active {
  display: flex;
  flex-direction: column;
  animation: viewFadeIn 0.2s ease forwards;
}
/* DCOSMOS-ANIMENTRY: the departing view stays rendered while it fades out,
   then JS removes the class and it returns to display:none. */
.view.view-exit {
  display: flex;
  flex-direction: column;
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  animation: viewFadeOut 0.15s ease forwards;
}
@keyframes viewFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes viewFadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}
/* DCOSMOS-STREETVIEW: the atlas<->reveal handoff specifically gets a
   longer cross-dissolve than every other view switch -- js/app.js's
   showView sets this class on both the departing and entering view only
   for that one pair, so the galaxy and the orrery ease into one another
   instead of a quick generic cut. Every other view switch keeps the
   default 0.2s/0.15s timing above untouched. */
.view.active.view-blend-slow { animation-duration: 420ms; }
.view.view-exit.view-blend-slow { animation-duration: 420ms; }
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 104px on the right reserves a lane for the two fixed round tools at
     the viewport's right edge -- the options gear (right 16, 36px wide,
     cosmos-options.css) and the sound-edit button one seat left of it
     (right 60, cosmos-audio-edit.css) -- so the nav's own Ship button
     never reaches under either of them. */
  /* Owner 2026-09-03: the gear sits at top 8 / right 8 (44px wide), so the
     nav's Ship button ends 8px left of it -- the same 8px the nav gap
     puts between every other button. */
  padding: 12px 60px 12px 24px;
  /* SC-FB17: the header floats over the page instead of occupying flow --
     every view starts at the divider line (--header-h now equals
     --hdr-line-y), and the button halves below the line hang over the
     view's own top, the bulge design completed. The header box itself
     must never eat clicks in that below-line band, so the box ignores
     the pointer and only the nav re-enables it. */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  pointer-events: none;
  z-index: 100;
  /* Owner 2026-08-22, header divider bulge: the round nav buttons sit
     centered on this box, so the opaque panel and its dividing line stop
     at the buttons' vertical middle (padding-top + half the tallest
     button, the atlas button) instead of the header's bottom edge. The
     bottom half of every button then hangs past the line onto the page,
     reading as a bulge. Keep this number in sync with the padding-top
     and nav-atlas size used at each width below and in cosmos-atlas.css
     and cosmos-controls.css. */
  --hdr-line-y: 62px;
}
/* The header's own opaque backdrop + blur + dividing line, sized to stop
   at --hdr-line-y instead of covering the whole header box. Everything
   below that line inside the header (the bulging bottom half of the
   round buttons) has no background here, so the page shows through. */
header::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--hdr-line-y);
  background: rgba(8, 14, 26, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  z-index: 0;
  pointer-events: none;
}
header nav {
  display: flex;
  gap: 8px;
  align-items: center;
  /* The nav strip spans the full width but only its BUTTONS may take the
     pointer -- the empty stretch between them belongs to the view below. */
  pointer-events: none;
  flex: 1;
  /* Stacked above header::before so the buttons render on top of the
     dividing line and bulge past it, not behind it. */
  position: relative;
  z-index: 1;
}
header nav button, header nav a, header nav select { pointer-events: auto; }
header nav button {
  background: none;
  border: 1px solid transparent;
  color: var(--text-dim);
  padding: 6px 14px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  letter-spacing: 0.5px;
  transition: all 0.2s;
}
/* Hover feedback only for a real pointer. A touch tap has no way to leave
   the button afterward, so on a phone :hover would just stay switched on
   forever -- and its look (accent border, glow) reads as the same lit
   ring as .active below, so a merely-tapped icon looked selected. Gating
   behind (hover: hover) keeps the effect for a mouse and removes it for
   touch, where it was never a real "hovering" state anyway. */
@media (hover: hover) {
  header nav button:hover {
    color: var(--text-secondary);
    border-color: var(--border);
  }
}
header nav button.active {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(245, 158, 11, 0.08);
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.1);
}
/* Keyboard focus gets its own ring, in a color .active never uses, so
   tabbing through the nav is visible without ever being mistaken for the
   selected view. :focus-visible already excludes a plain tap or click on
   evergreen browsers, so this never fires from touch. */
header nav button:focus-visible {
  outline: 2px solid var(--text-secondary);
  outline-offset: 2px;
}
/* The boot log button (#_logBtn, built by js/boot-diagnostics.js) is fixed at
   the right edge just under the header line, because the options gear holds
   the top right corner itself. Three controls pass through that spot: the SKIP
   button while a system reveal plays, and the close button of the ship builder
   and the critter lab. The log button leaves the screen while any of them is
   up, so none of them loses part of its tap target. */
body:has(#btnSkipReveal:not([hidden])) #_logBtn,
body:has(.ship-overlay:not([hidden])) #_logBtn,
body:has(.critter-overlay:not([hidden])) #_logBtn { display: none; }
/* SC-HEADER-CLEARANCE: the view starts at the divider line, so the top
   padding clears the button halves hanging below it (--nav-hang) plus a
   10px breathing gap. The full-bleed canvas views (#reveal, #atlas in map
   mode) zero their padding on purpose -- the buttons hang over their
   canvas backdrop, which collides with nothing. */
.view-body {
  flex: 1;
  padding: calc(var(--nav-hang, 42px) + 10px) 24px 32px;
  width: 100%;
  min-height: 0;
}
/* ── Landing ────────────────────────────────────────── */
#landing .view-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 40px;
}
.landing-title {
  font-size: 52px;
  font-weight: 700;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: var(--text-primary);
  text-shadow: 0 0 40px rgba(245, 158, 11, 0.2), 0 0 80px rgba(245, 158, 11, 0.08);
  animation: titleGlow 4s ease-in-out infinite alternate;
}
@keyframes titleGlow {
  from { text-shadow: 0 0 40px rgba(245, 158, 11, 0.15), 0 0 80px rgba(245, 158, 11, 0.05); }
  to { text-shadow: 0 0 60px rgba(245, 158, 11, 0.3), 0 0 120px rgba(245, 158, 11, 0.1); }
}
.landing-subtitle {
  font-size: 16px;
  color: var(--text-secondary);
  max-width: 520px;
  line-height: 1.7;
  opacity: 0.8;
}
.landing-actions {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
}
.landing-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 28px;
  width: 260px;
  cursor: pointer;
  transition: all 0.3s;
  text-align: left;
  position: relative;
  overflow: hidden;
}
.landing-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0;
  transition: opacity 0.3s;
}
.landing-card:hover {
  border-color: var(--accent-dim);
  background: var(--bg-card-hover);
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 20px var(--accent-glow);
}
.landing-card:hover::before { opacity: 1; }
.landing-card h3 {
  font-size: 15px;
  color: var(--accent);
  margin-bottom: 8px;
}
.landing-card p {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.landing-card .phase-tag {
  display: inline-block;
  font-size: 10px;
  font-family: var(--font-data);
  color: var(--text-dim);
  border: 1px solid var(--border);
  padding: 2px 8px;
  border-radius: 3px;
  margin-bottom: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
/* Primary and secondary buttons, used across every screen. */
.btn-primary {
  background: var(--accent);
  color: var(--bg-deep);
  border: none;
  padding: 10px 28px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.2s;
  text-transform: uppercase;
}
.btn-primary:hover {
  background: #d97706;
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.2);
}
.btn-secondary {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 10px 28px;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-secondary:hover {
  border-color: var(--text-dim);
  color: var(--text-secondary);
}