:root {
  --text: #e8eefc;
  --muted: #9aabc8;
  --line: rgba(255, 255, 255, 0.1);
  --fuel: #ff8d5c;
  --charge: #ffb15a;
  --logs: #c4a574;
  --stone: #b7c0cc;
  --ore: #e2b15c;
  --red: #e07a5f;
  --glass: #d5e2f2;
  --ice: #7ad7ff;
  --gas: #9ad7c8;
  --power: #d6f26a;
  --food: #8fd18a;
  --danger: #ff8b96;
  --ink: #172033;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
}

body {
  font-family: Outfit, "Segoe UI", system-ui, sans-serif;
  color: var(--text);
  background: #03060f;
}

#sky {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: crosshair;
  touch-action: none;
}

.hud {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

header, .header-actions, .dock, .panels, #thrust, .overlay, .guide, .ghost, .action, .card-toggle, .building-card, .mission, .coach {
  pointer-events: auto;
}

.topbar, .goal, .world-label, .crosshair, .note, .announce, .context, .resources, .readout, .compass {
  pointer-events: none;
}

.compass {
  position: absolute;
  top: 8px;
  left: 50%;
  z-index: 2;
  width: min(460px, calc(100% - 360px));
  height: 64px;
  transform: translateX(-50%);
}

.compass[hidden] { display: none; }

.compass-dial {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 16px;
  background: rgba(8, 12, 24, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(8px);
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}

.compass-hub {
  position: absolute;
  left: 50%;
  top: 6px;
  bottom: 6px;
  width: 2px;
  transform: translateX(-50%);
  background: rgba(243, 247, 200, 0.92);
  box-shadow: 0 0 8px rgba(243, 247, 200, 0.55);
}

.compass-hub::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid #f3f7c8;
}

.compass-mark {
  position: absolute;
  top: 74%;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: var(--muted);
  transform: translate(-50%, -50%);
  white-space: nowrap;
}

.compass-mark span {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: inherit;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
}

.compass-mark.is-cardinal {
  top: 30%;
  color: white;
}

.compass-mark.is-cardinal span {
  font-size: 0.82rem;
}

.compass-mark.is-cardinal::before,
.compass-mark.is-tick {
  content: "";
  width: 1px;
  height: 8px;
  background: rgba(255, 255, 255, 0.55);
}

.compass-mark.is-tick {
  top: 22%;
  height: 9px;
  background: rgba(255, 255, 255, 0.35);
}

.compass-mark.is-camp { color: #e7c27a; }
.compass-mark.is-pad { color: #d6f26a; }
.compass-mark.is-mine { color: #e2b15c; }
.compass-mark.is-mill { color: #8fd18a; }
.compass-mark.is-drill { color: #7ad7ff; }

.compass-mark.is-camp::before,
.compass-mark.is-pad::before,
.compass-mark.is-mine::before,
.compass-mark.is-mill::before,
.compass-mark.is-drill::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
}

.topbar {
  position: absolute;
  top: 12px;
  left: 16px;
  right: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  pointer-events: none;
}

.eyebrow, .turn, .res span, .action small, .world-label small {
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.eyebrow, .turn {
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
}

.turn {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.cycle {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex: none;
  background: conic-gradient(from 0deg, var(--charge) var(--sweep, 0deg), rgba(255, 255, 255, 0.16) 0);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.28);
}

h1 {
  margin: 2px 0 0;
  font-size: 1.55rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.65);
}

.header-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.save-row { display: flex; gap: 14px; }

.readout {
  margin: 0;
  max-width: 220px;
  color: var(--muted);
  font-size: 0.72rem;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.saved {
  margin: 0;
  min-height: 0;
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ghost {
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  padding: 4px 0;
}

.ghost:hover, .ghost:focus-visible { color: white; }

.resources {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 100%;
}

.res {
  display: flex;
  align-items: baseline;
  gap: 5px;
  background: rgba(8, 12, 24, 0.72);
  border: 1px solid var(--line);
  border-top: 2px solid var(--accent, white);
  border-radius: 10px;
  padding: 3px 8px 2px;
  backdrop-filter: blur(8px);
}

.res b {
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.res span {
  color: var(--muted);
  font-size: 0.66rem;
}

.res-fuel { --accent: var(--fuel); }
.res-charge { --accent: var(--charge); }
.res-logs { --accent: var(--logs); }
.res-stone { --accent: var(--stone); }
.res-ore { --accent: var(--ore); }
.res-red { --accent: var(--red); }
.res-glass { --accent: var(--glass); }
.res-gas { --accent: var(--gas); }
.res-ice { --accent: var(--ice); }
.res-power { --accent: var(--power); }
.res-supplies { --accent: #e7c27a; }
.res-parts { --accent: #d6f26a; }
.res-food { --accent: var(--food); }
.res-oxygen { --accent: #8fd8ff; }
.res-people { --accent: #f2d6a8; }
.res.is-low b { color: var(--danger); }
.res.is-tick { animation: tick 0.45s ease; }

@keyframes tick {
  from { transform: translateY(-3px); }
  to { transform: none; }
}

.mission {
  width: min(420px, 100%);
  margin: 0;
  padding: 8px 12px 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(8, 12, 24, 0.78);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(8px);
}

.mission-chapter {
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mission-step {
  margin: 4px 0 0;
  color: #d5def2;
  font-size: 0.92rem;
  line-height: 1.35;
}

.mission-keys,
.mission-lore {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.mission-lore { color: #d5def2; }

.mission-why {
  margin-top: 4px;
  padding: 2px 0;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Epic: catalog picture icons and the scanner's three choices. */
.sci-icon { width: 28px; height: 28px; flex: 0 0 28px; --ink: #f7c22e; }
.sci-icon .sci-icon-bg { fill: rgba(16, 22, 34, 0.85); stroke: var(--ink); stroke-opacity: 0.55; }
.sci-icon path { fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sci-icon.is-dim { opacity: 0.45; }
.codex-head, .field-name { display: flex; align-items: center; gap: 8px; }
.field-name .sci-icon { width: 22px; height: 22px; flex-basis: 22px; }
.codex-sample { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; font-size: 0.8rem; color: #bff7f3; }
.scan-choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; }
.scan-choice { display: grid; gap: 2px; padding: 7px 8px; border: 1px solid rgba(143, 243, 255, 0.4); border-radius: 8px; background: rgba(12, 30, 40, 0.8); color: #e9fbff; text-align: left; cursor: pointer; font: inherit; }
.scan-choice span { font-weight: 700; font-size: 0.85rem; }
.scan-choice small { font-size: 0.7rem; color: #9fc6cf; line-height: 1.25; }
.scan-choice kbd { justify-self: start; padding: 0 5px; border-radius: 4px; background: #f7c22e; color: #1a1d24; font-size: 0.68rem; font-weight: 700; }
.scan-choice:hover:not(:disabled) { border-color: #8ff3ff; background: rgba(22, 52, 66, 0.9); }
.scan-choice.is-risky { border-color: rgba(247, 194, 46, 0.6); }
.scan-choice:disabled { opacity: 0.5; cursor: default; }

/* Epic: the mission checklist. */
.mission-list {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  font-size: 0.8rem;
  line-height: 1.3;
}
.mission-stage {
  position: relative;
  margin-bottom: 4px;
  padding-bottom: 5px;
  color: #f7c22e;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.mission-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, #2fc8c4 var(--fill, 0%), rgba(255, 255, 255, 0.12) var(--fill, 0%));
}
.mission-item {
  display: flex;
  gap: 7px;
  align-items: flex-start;
  padding: 2px 0;
  color: #aeb8cc;
}
.mission-box {
  flex: 0 0 15px;
  height: 15px;
  margin-top: 1px;
  border: 1px solid rgba(214, 222, 242, 0.45);
  border-radius: 4px;
  font-size: 0.72rem;
  line-height: 13px;
  text-align: center;
}
.mission-item.is-done { color: #7f8aa0; text-decoration: line-through; text-decoration-color: rgba(127, 138, 160, 0.6); }
.mission-item.is-done .mission-box { border-color: #2fc8c4; background: rgba(47, 200, 196, 0.25); color: #bff7f3; }
.mission-item.is-current { color: #f2f5fb; font-weight: 600; }
.mission-item.is-current .mission-box { border-color: #f7c22e; color: #f7c22e; }
/* Phones: the checklist shows the stage bar and the current step only. */
@media (max-width: 520px) {
  .mission-item:not(.is-current) { display: none; }
  .mission-list { margin-top: 3px; font-size: 0.74rem; }
}
/* The build list takes this corner while planning: the checklist steps aside (it was drawn over the list). */
.mission.is-planning { visibility: hidden; }

.mission.is-quiet .mission-keys,
.mission.is-quiet .mission-why,
.mission.is-quiet .mission-lore { display: none; }

.coach {
  position: absolute;
  left: 228px;
  top: 168px;
  z-index: 4;
  width: min(260px, calc(100% - 250px));
  padding: 12px 14px;
  border: 1px solid rgba(214, 242, 106, 0.45);
  border-radius: 14px;
  background: #121a2e;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
}

.coach[hidden] { display: none; }

.coach.is-design {
  left: 50%;
  top: auto;
  bottom: 168px;
  transform: translateX(-50%);
}

.coach p {
  margin: 0 0 8px;
  color: #d5def2;
  font-size: 0.86rem;
  line-height: 1.35;
}

.guide-sheet.menu-sheet { width: min(640px, 100%); overflow-anchor: none; }
.guide-sheet.journal-sheet { width: min(640px, 100%); }

.menu-list { display: grid; gap: 8px; }

.menu-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  color: inherit;
  font: inherit;
  font-size: 0.95rem;
  text-align: left;
  cursor: pointer;
}

.menu-item:hover, .menu-item:focus-visible { background: rgba(255, 255, 255, 0.08); }

.menu-item small {
  color: var(--muted);
  font-size: 0.75rem;
}

.menu-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
}

.menu-option span { font-size: 0.92rem; line-height: 1.3; }

.menu-note {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.4;
}

.guide-now {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-left: 3px solid #d6f26a;
  border-radius: 12px;
  background: #1c2942;
}

.guide-now h3 { margin-top: 0; }

.sheet-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }

.sheet-tabs button[aria-current="page"] {
  background: #d6f26a;
  color: #101827;
  border-radius: 8px;
  padding: 4px 8px;
}

.journal-entry { margin: 0 0 14px; }
.journal-entry.is-current {
  padding-left: 10px;
  border-left: 3px solid #d6f26a;
}
.guide-sheet .journal-entry h3 {
  margin: 0 0 4px;
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
}
.journal-entry p { margin: 0; }
.journal-log { margin: 0; padding-left: 1.1rem; }
.journal-log li { margin: 0 0 8px; line-height: 1.4; }

.guide {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 72px 16px 16px;
  background: rgba(5, 8, 16, 0.42);
  z-index: 40;
}

.guide[hidden] { display: none; }

#hub-module-controls { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
#hub-module-controls:empty { display: none; }
#hub-module-controls button { min-height: 36px; padding: 6px 10px; }
body:has(#building-card:not([hidden])) :is(#scanner-dev, #radar, #scan-chip, #scan-lock, #scan-pop) { display: none !important; }

/* Fixed HUD elements form a stacking context. Lift its modal sheets above
   body-mounted scanner controls, without lifting the normal play HUD. */
.hud:has(.guide:not([hidden]), .overlay:not([hidden])) { z-index: 50; }

/* Apply immediately when any reading sheet opens, including sheets mounted
   outside the HUD. Keep world controls out of the way until it closes. */
body:has(.guide:not([hidden]), .overlay:not([hidden]), .hero-overlay:not([hidden]), #voyage-panel:not([hidden]), #voyage-book:not([hidden]))
:is(#scanner-dev, #radar, #scan-chip, #scan-pop, #scan-lock, #suit-meter, #compass, #touch-pad, #thrust, #voyage-chip, .dock, .panels, .context, .coach) {
  display: none !important;
}

.guide-sheet.inventory-sheet { width: min(880px, 100%); }

.guide-sheet.science-sheet { width: min(940px, 100%); }
#science-sheet { z-index: 40; }
.science-summary { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; margin: 8px 0; }
.science-summary strong { color: #d6f26a; font-size: 1.25rem; }
.science-summary span { color: #b4c4db; font-size: .9rem; }
.science-loop { color: #9ad7c8; }
.science-warning, .science-progress, .science-next { background: #1c2942; border-left: 3px solid #e2c56a; padding: 10px 12px; border-radius: 6px; }
.science-progress { border-color: #9ad7c8; }
.science-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.science-tabs button[aria-current="page"] { background: #d6f26a; color: #101827; }
.science-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.science-card { background: #182238; border: 1px solid #34415a; border-radius: 12px; padding: 14px; min-width: 0; }
.guide-sheet .science-card h3 { margin: 0 0 6px; font-size: 1.05rem; }
.science-status { display: inline-block; font-size: .78rem; color: #9ad7c8; margin-bottom: 6px; }
.science-card .ghost { margin-top: 10px; white-space: normal; }
.science-card .science-requirement { color: #e2c56a; font-size: .85rem; margin-top: 8px; }
.science-card .science-finding { color: #cce8cb; }
.science-prediction { display: block; font-size: .85rem; margin: 12px 0 4px; }
.science-card select { display: block; width: 100%; padding: 9px; background: #0f182a; color: #edf3ff; border: 1px solid #52627d; border-radius: 6px; font: inherit; font-size: .86rem; }
.science-card select:disabled { opacity: .6; }
#science-body button:focus-visible, #science-body select:focus-visible { outline: 2px solid #d6f26a; outline-offset: 3px; }
@media (max-width: 650px) { .science-grid { grid-template-columns: 1fr; } .science-tabs .ghost { flex: 1 1 42%; } .science-summary { align-items: flex-start; flex-direction: column; gap: 4px; } }

.inv-note { margin: 0 0 12px; color: var(--muted, #9aa7bd); }

.inv-grid {
  display: grid;
  grid-template-columns: 5.5rem repeat(6, minmax(0, 1fr));
  gap: 6px;
  align-items: stretch;
}

.inv-cell {
  border-radius: 10px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.04);
  min-height: 2.6rem;
}

.inv-cell.is-open { box-shadow: inset 0 0 0 1px rgba(214, 242, 106, 0.4); }
.inv-cell.is-shut { opacity: 0.62; }
.inv-cell strong, .inv-cell b { display: block; }
.inv-cell small { color: var(--muted, #9aa7bd); }
.inv-cell button {
  display: block;
  width: 100%;
  margin-top: 4px;
  border: 0;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  color: inherit;
  font: inherit;
  font-size: 0.72rem;
  cursor: pointer;
  padding: 3px 4px;
}
.inv-label { display: flex; align-items: center; font-weight: 600; }

.guide-sheet {
  width: min(560px, 100%);
  max-height: 100%;
  overflow: auto;
  background: #121a2e;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  padding: 16px 18px 20px;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.45);
}

.guide-head {
  position: sticky;
  z-index: 1;
  top: -16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: -16px -18px 8px;
  padding: 16px 18px 8px;
  background: #121a2e;
}

.guide-sheet h2 {
  margin: 0;
  font-size: 1.35rem;
  letter-spacing: -0.03em;
}

.guide-sheet h3 {
  margin: 16px 0 6px;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.guide-sheet .lead,
.guide-sheet p {
  margin: 0 0 8px;
  color: #d5def2;
  font-size: 0.9rem;
  line-height: 1.4;
}

.guide-piece { margin: 0 0 12px; }
.guide-piece h4 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
}
.guide-piece .where {
  margin-left: 8px;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.guide-piece p { margin: 2px 0 0; }

.announce {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  width: min(440px, calc(100% - 48px));
  margin: 0;
  text-align: center;
  color: white;
  font-size: 1.08rem;
  line-height: 1.35;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.95);
  opacity: 0;
  transition: opacity 0.4s ease;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.announce.is-on { opacity: 1; }

.context {
  position: absolute;
  left: 228px;
  top: 168px;
  width: min(280px, calc(100% - 200px));
  margin: 0;
  color: #d5def2;
  font-size: 0.78rem;
  line-height: 1.35;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.context:empty { display: none; }

.building-card {
  position: absolute;
  top: 148px;
  right: 16px;
  width: min(340px, calc(100% - 32px));
  max-height: calc(100% - 180px);
  overflow: auto;
  z-index: 4;
}

.building-card[hidden] { display: none; }

.building-sheet {
  background: #121a2e;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 14px 16px 16px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
}

.building-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}

.building-head h2 {
  margin: 0;
  font-size: 1.2rem;
  letter-spacing: -0.03em;
}

.building-status {
  margin: 0 0 8px;
  color: #f3f7c8;
  font-size: 0.84rem;
  font-weight: 600;
}

.building-sheet p {
  margin: 0 0 8px;
  color: #d5def2;
  font-size: 0.88rem;
  line-height: 1.4;
}

.building-facts {
  margin: 4px 0 0;
}

.building-facts div {
  display: grid;
  grid-template-columns: 6.4rem 1fr;
  gap: 8px;
  margin: 0 0 6px;
  font-size: 0.82rem;
}

.building-facts dt {
  margin: 0;
  color: var(--muted);
}

.building-facts dd {
  margin: 0;
  color: #d5def2;
}

.building-post {
  margin-top: 12px;
  width: 100%;
}

.building-upgrade small {
  display: block;
  margin-top: 2px;
  font-size: 0.74rem;
  opacity: 0.8;
}

.building-upgrade:disabled { opacity: 0.45; cursor: default; }

.building-live {
  margin: 8px 0 0;
  color: #f3f7c8;
  font-size: 0.82rem;
}

.hud.is-surface .crosshair,
.hud.is-plot .crosshair,
.hud.is-design .crosshair { opacity: 0; }

#plot-bar,
#design-bar {
  position: absolute;
  pointer-events: auto;
}

#plot-bar {
  left: 16px;
  top: 168px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 196px;
  max-height: calc(100% - 188px);
  overflow: auto;
}

#design-bar {
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: min(420px, calc(100% - 32px));
}

#design-bar .menu-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  width: 100%;
}

#design-bar .bar-caption {
  margin: 0;
  max-width: 400px;
  text-align: center;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.3;
}

#plot-bar[hidden],
#design-bar[hidden] { display: none; }

#plot-bar button,
#design-bar button {
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 5px 8px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(8, 12, 24, 0.88);
  color: var(--text);
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
}

#plot-bar button { width: 100%; }
#plot-bar button span,
#plot-bar button small { white-space: nowrap; }
#plot-bar button small { text-transform: none; letter-spacing: 0; }
#design-bar button { min-width: 72px; }
#design-bar button[hidden] { display: none; }

#plot-bar button small,
#design-bar button small {
  color: var(--muted);
  font-size: 0.68rem;
}

#plot-bar button.is-selected,
#design-bar button.is-selected {
  background: #e7f0c4;
  color: var(--ink);
  border-color: transparent;
}

#plot-bar button.is-selected small,
#design-bar button.is-selected small { color: #52603a; }
#plot-bar button:disabled,
#design-bar button:disabled { opacity: 0.4; cursor: default; }

.hud.is-plot .dock,
.hud.is-design .dock,
.hud.is-design .panels { display: none; }

.hud.is-plot #ship-card,
.hud.is-plot .card:not(.is-here) { display: none; }

#plot-cards { display: contents; }

.crosshair {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 12px;
  transform: translate(-50%, -50%);
  border: 1.5px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45);
}

.world-label {
  position: absolute;
  transform: translate(-50%, -120%);
  text-align: center;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
}

.world-label strong, .world-label small { display: block; }
.world-label strong { font-size: 0.84rem; }
.world-label small {
  color: var(--muted);
  font-size: 0.64rem;
}
.world-label.is-near strong { color: #f3f7c8; }

.dock {
  position: absolute;
  left: 16px;
  bottom: 16px;
  width: min(280px, calc(100% - 360px));
}

.panels {
  position: absolute;
  right: 100px;
  bottom: 16px;
  width: 230px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: calc(100% - 150px);
}

.actions {
  display: grid;
  gap: 6px;
  max-height: min(42vh, 360px);
  overflow: auto;
}

.action {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 36px;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(8, 12, 24, 0.78);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  backdrop-filter: blur(8px);
}

.action small {
  color: var(--muted);
  font-size: 0.66rem;
}

.action.primary {
  background: #e7f0c4;
  color: var(--ink);
  border-color: transparent;
  font-weight: 600;
}

.action.primary small { color: #52603a; }
.action:disabled { opacity: 0.45; cursor: default; }

.note {
  margin: 6px 0 0;
  color: #d5def2;
  font-size: 0.78rem;
  line-height: 1.3;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.note:empty { display: none; }

.card {
  background: rgba(8, 12, 24, 0.72);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 8px 10px;
  backdrop-filter: blur(8px);
}

.card:not(.is-shut) {
  max-height: 46vh;
  overflow: auto;
}

.card-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.card-toggle::after {
  content: "▾";
  color: var(--muted);
  font-weight: 400;
}

.card:not(.is-shut) .card-toggle::after { content: "▴"; }

.card.is-shut p { margin-bottom: 0; }
.card p {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.3;
}

.ledger { margin: 0 0 8px; }
.ledger div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.78rem;
}
.ledger b { font-variant-numeric: tabular-nums; }
.policy {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ledger .logistics-row {
  justify-content: flex-start;
  flex-wrap: wrap;
}
.policy b { min-width: 1.2em; text-align: center; }
.policy button,
.policy-toggle {
  border: 0;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.policy button { width: 1.6rem; height: 1.6rem; }
.policy-toggle { margin-top: 6px; padding: 4px 8px; }
.ledger p { margin: 0 0 6px; }
.meter {
  height: 6px;
  margin: 2px 0 8px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.meter span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--food);
}

.res .rate {
  text-transform: none;
  letter-spacing: 0;
  color: var(--power);
}
.res .rate.is-down { color: var(--danger); }

.slots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}

.slots-wide {
  grid-template-columns: repeat(5, 1fr);
}

.slot {
  border-radius: 8px;
  border: 1px dashed rgba(255, 255, 255, 0.16);
  min-height: 26px;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.slot-logs {
  background: rgba(196, 165, 116, 0.18);
  border-style: solid;
  border-color: rgba(196, 165, 116, 0.55);
  color: var(--logs);
}

.slot-stone {
  background: rgba(183, 192, 204, 0.16);
  border-style: solid;
  border-color: rgba(183, 192, 204, 0.5);
  color: var(--stone);
}

.slot-ore {
  background: rgba(226, 177, 92, 0.18);
  border-style: solid;
  border-color: rgba(226, 177, 92, 0.5);
  color: var(--ore);
}

.slot-ice {
  background: rgba(122, 215, 255, 0.14);
  border-style: solid;
  border-color: rgba(122, 215, 255, 0.5);
  color: var(--ice);
}

.slot-gas {
  background: rgba(154, 215, 200, 0.16);
  border-style: solid;
  border-color: rgba(154, 215, 200, 0.5);
  color: var(--gas);
}

#thrust {
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 72px;
  height: 72px;
  border: 0;
  border-radius: 50%;
  background: #e7f0c4;
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.overlay {
  position: absolute;
  z-index: 40;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(5, 8, 16, 0.55);
}

.overlay[hidden] { display: none; }

.dialog {
  width: min(100%, 340px);
  background: #121a2e;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.35);
}

.dialog h2 {
  margin: 0 0 8px;
  font-size: 1.45rem;
  letter-spacing: -0.03em;
}

.dialog p {
  margin: 0 0 16px;
  color: #d5def2;
  line-height: 1.4;
}

.dialog button {
  width: 100%;
  min-height: 46px;
  border: 0;
  border-radius: 12px;
  background: #e7f0c4;
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.is-loss .dialog button { background: #f0d0c8; }

button:focus-visible {
  outline: 2px solid white;
  outline-offset: 3px;
}

@media (max-width: 1100px) {
  .compass {
    top: calc(var(--top-h, 120px) + 8px);
    width: min(460px, calc(100% - 32px));
  }
}

@media (max-width: 800px) {
  .dock {
    right: 16px;
    width: auto;
    bottom: 88px;
  }
  .panels {
    left: 16px;
    right: 16px;
    top: calc(var(--top-h, 120px) + 8px);
    bottom: auto;
    width: auto;
    flex-direction: row;
    align-items: flex-start;
  }
  .card { flex: 1; min-width: 0; }
  .card:not(.is-shut) { max-height: 28vh; }
  #plot-bar {
    top: auto;
    bottom: 88px;
    left: 8px;
    right: 8px;
    width: auto;
    max-height: none;
    flex-direction: row;
    overflow-x: auto;
  }
  #plot-bar button { width: auto; flex: 0 0 auto; }
  .context { left: 16px; top: auto; bottom: 156px; width: min(280px, calc(100% - 32px)); }
  .coach, .coach.is-design {
    left: 16px;
    top: auto;
    bottom: 168px;
    transform: none;
    width: min(260px, calc(100% - 32px));
  }
  #thrust { width: 64px; height: 64px; }
}
/* Science: codex, lab, bench, skill map, scanner */
.science-view h3 { margin: 14px 0 6px; }
.codex-region { margin: 10px 0 18px; }
.codex-cond { color: #9ad7c8; font-size: .85rem; }
.codex-hidden { color: #8aa0bf; font-size: .85rem; font-style: italic; }
.codex-data { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; font-size: .85rem; margin: 6px 0; }
.codex-data dt { color: #8aa0bf; } .codex-data dd { margin: 0; color: #edf3ff; }
.codex-reagent { color: #e8b06a; font-size: .82rem; }
.codex-map { width: 100%; height: auto; border-radius: 8px; border: 1px solid #34415a; image-rendering: pixelated; }
.sci-bar { height: 8px; background: #0f182a; border-radius: 4px; overflow: hidden; margin: 2px 0 8px; }
.sci-bar span { display: block; height: 100%; background: #9ad7c8; } .sci-bar.cat span { background: #e8b06a; } .sci-bar.und span { background: #d6f26a; }
.codex-traits { list-style: none; padding: 0; margin: 6px 0; font-size: .85rem; color: #8aa0bf; } .codex-traits li.owned { color: #d6f26a; }
.codex-sysrow { display: grid; grid-template-columns: 90px 1fr 140px; gap: 10px; align-items: center; }
.sci-stations, .sci-train { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; align-items: center; }
.sci-stations button[aria-current="page"] { background: #9ad7c8; color: #101827; }
.sci-train span { color: #8aa0bf; font-size: .82rem; }
.sort-inbox { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.sort-datum { background: #1c2942; border: 1px dashed #52627d; color: #edf3ff; border-radius: 8px; padding: 8px 10px; font: inherit; font-size: .85rem; cursor: pointer; }
.sort-datum.picked { border: 2px solid #d6f26a; background: #2a3a20; }
.sort-bins { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.sort-bin { min-height: 70px; border-radius: 12px; font-weight: 600; }
.bin-biology { border-color: #6fd08c !important; } .bin-geology { border-color: #b9c6ff !important; } .bin-chemistry { border-color: #6fd6e8 !important; } .bin-astronomy { border-color: #e07ad6 !important; }
.bench-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.bench-chip { border: 2px solid; border-radius: 18px; background: #182238; color: #edf3ff; padding: 6px 12px; font: inherit; font-size: .85rem; cursor: pointer; }
.bench-chip.on { background: #d6f26a; color: #101827; }
.bench-flask { display: flex; gap: 14px; align-items: center; background: radial-gradient(circle at 20% 50%, #24405a, #141d30); border: 1px solid #52627d; border-radius: 12px; padding: 14px; }
.bench-flask .primary-mix { background: #d6f26a; color: #101827; border: none; border-radius: 8px; padding: 10px 16px; font: inherit; font-weight: 600; cursor: pointer; }
.science-breakthrough { background: linear-gradient(90deg, #3a4a10, #1c2942); border-left: 4px solid #d6f26a; padding: 12px; border-radius: 6px; color: #f4ffd0; }
.skill-frame { overflow: hidden; height: 470px; background: #0b1220; border: 1px solid #34415a; border-radius: 12px; cursor: grab; touch-action: none; }
.skill-line { stroke: #34415a; stroke-width: 3; } .skill-line.lit { stroke: #d6f26a; }
.skill-node circle, .skill-node rect { fill: #182238; stroke: #52627d; stroke-width: 3; cursor: pointer; }
.skill-node.open circle, .skill-node.open rect { stroke: #e2c56a; fill: #2a2a14; }
.skill-node.owned circle, .skill-node.owned rect { stroke: #d6f26a; fill: #3a4a10; }
.skill-node.focus circle, .skill-node.focus rect { stroke: #fff; }
.skill-label { fill: #b4c4db; font-size: 11px; text-anchor: middle; } .skill-cost { fill: #edf3ff; font-size: 13px; font-weight: 600; text-anchor: middle; }
.skill-branch { fill: #9ad7c8; font-size: 13px; font-weight: 600; text-anchor: middle; }
.skill-info { margin-top: 12px; }
#scan-pop { position: fixed; right: 18px; top: 128px; width: min(360px, 92vw); background: rgba(13,20,36,.94); border: 1px solid #6fd6e8; border-radius: 12px; padding: 12px 14px; color: #edf3ff; z-index: 5; font-size: .88rem; }
#scan-pop h3 { margin: 0 0 4px; font-size: 1rem; color: #6fd6e8; }
#scan-pop .scan-cond { color: #9ad7c8; font-size: .8rem; margin-bottom: 6px; }
#scan-pop ul { list-style: none; margin: 0; padding: 0; } #scan-pop li { margin: 3px 0; cursor: pointer; } #scan-pop li.fresh { color: #d6f26a; }
#scan-pop .scan-detail { margin-top: 8px; border-top: 1px solid #34415a; padding-top: 6px; color: #cfdcf0; }
#scan-chip { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); background: rgba(13,20,36,.85); border: 1px solid #6fd6e8; color: #6fd6e8; border-radius: 16px; padding: 4px 12px; font-size: .8rem; z-index: 4; pointer-events: none; }

/* Science center interior: HUD over the room, compact station panels. */
#lab-hud { position: fixed; inset: 0; pointer-events: none; z-index: 30; }
#lab-hud[hidden] { display: none; }
#lab-hud .lab-title { position: absolute; top: 150px; left: 12px; padding: 6px 12px; border-radius: 8px; background: rgba(8, 14, 26, 0.82); color: #dfe8f4; font-size: 14px; border: 1px solid rgba(111, 214, 232, 0.35); }
#lab-hud .lab-prompt { pointer-events: auto; position: absolute; left: 50%; bottom: 96px; transform: translateX(-50%); padding: 12px 20px; min-height: 48px; border-radius: 10px; border: 1px solid #d6f26a; background: rgba(12, 22, 34, 0.92); color: #f2f7d8; font-size: 16px; font-weight: 600; box-shadow: 0 0 18px rgba(214, 242, 106, 0.35); animation: lab-pop 0.18s ease-out; cursor: pointer; }
#lab-hud .lab-prompt[hidden] { display: none; }
#lab-hud .lab-prompt kbd { display: inline-block; min-width: 22px; padding: 1px 6px; margin-right: 6px; border-radius: 5px; background: #d6f26a; color: #10161f; font: 700 14px/20px inherit; text-align: center; }
#lab-hud .lab-exit { pointer-events: auto; position: absolute; bottom: 16px; left: 12px; min-height: 44px; background: rgba(8, 14, 26, 0.85); }
#lab-hud.is-panel .lab-prompt, #lab-hud.is-panel .lab-help { display: none; }
#lab-hud .lab-help { position: absolute; left: 50%; bottom: 52px; transform: translateX(-50%); color: rgba(223, 232, 244, 0.75); font-size: 13px; white-space: nowrap; text-shadow: 0 1px 2px #000; }
@keyframes lab-pop { from { transform: translateX(-50%) scale(0.85); opacity: 0; } to { transform: translateX(-50%) scale(1); opacity: 1; } }
body.in-lab .dock, body.in-lab .panels, body.in-lab .crosshair, body.in-lab #compass, body.in-lab #scan-chip, body.in-lab #scan-pop, body.in-lab #thrust, body.in-lab #mission, body.in-lab #building-card, body.in-lab #world-labels, body.in-lab #touch-pad { display: none !important; }
#science-sheet.station .sheet-card, #science-sheet.station > section, #science-sheet.station > div { max-width: 560px; }
#science-sheet.station { background: transparent; align-items: flex-end; justify-content: flex-end; }
#science-sheet.station > * { margin: 0 16px 16px auto; max-height: min(72vh, 640px); }
#science-sheet .station-title { margin: 0 0 6px; color: #d6f26a; font-size: 18px; letter-spacing: 0.02em; }
#science-sheet.juice > * { animation: sci-juice 1.1s ease-out; }
@keyframes sci-juice { 0% { box-shadow: 0 0 0 0 rgba(214, 242, 106, 0.9); } 30% { box-shadow: 0 0 40px 10px rgba(214, 242, 106, 0.6); } 100% { box-shadow: 0 0 0 0 rgba(214, 242, 106, 0); } }
#science-sheet .science-breakthrough { animation: sci-bounce 0.5s ease-out; }
@keyframes sci-bounce { 0% { transform: scale(0.9); } 60% { transform: scale(1.05); } 100% { transform: scale(1); } }
.sci-hire { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 6px 0 10px; }
.sci-hire button { min-height: 40px; }
.sci-person.spec-biologist { border-left: 4px solid #6fd08c; } .sci-person.spec-geologist { border-left: 4px solid #b9c6ff; }
.sci-person.spec-chemist { border-left: 4px solid #6fd6e8; } .sci-person.spec-astrophysicist { border-left: 4px solid #e07ad6; }
.sci-sorted-row { display: grid; grid-template-columns: 120px 1fr; gap: 8px; align-items: center; margin: 4px 0; }
@media (max-width: 520px) {
  #science-sheet.station > * { margin: 0; width: 100%; max-height: 64vh; border-radius: 14px 14px 0 0; }
  #lab-hud .lab-prompt { bottom: 84px; max-width: calc(100vw - 32px); }
  #lab-hud .lab-help { font-size: 12px; bottom: 44px; }
  #lab-hud .lab-title { font-size: 12px; max-width: calc(100vw - 150px); top: auto; bottom: 22px; left: auto; right: 12px; }
  #lab-hud .lab-help { display: none; }
  #lab-hud.is-panel .lab-exit, #lab-hud.is-panel .lab-title { display: none; }
}

/* ---- Intro, cutscenes, naming and title screen ---- */
#intro, #title-screen { position: fixed; inset: 0; z-index: 200; color: #eef3ea; font-family: inherit; overflow: hidden; }
#intro[hidden], #title-screen[hidden] { display: none; }
#intro { background: #000; transition: opacity 0.9s ease; }
#intro.is-out { opacity: 0; pointer-events: none; }
#intro-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#intro.is-board #intro-canvas { display: none; }
.intro-board { position: absolute; inset: 0; display: none; transition: background 1.2s ease; animation: board-drift 24s ease-in-out infinite alternate; background-size: 140% 140% !important; }
#intro.is-board .intro-board { display: block; }
@keyframes board-drift { from { background-position: 40% 40%; } to { background-position: 60% 55%; } }
.intro-board-shot { position: absolute; left: 50%; top: 18%; transform: translateX(-50%); letter-spacing: 0.4em; font-size: 12px; opacity: 0.6; }
.intro-bar { position: absolute; left: 0; right: 0; height: 0; background: #000; transition: height 1.2s cubic-bezier(.2,.7,.2,1); z-index: 3; }
.intro-bar.top { top: 0; } .intro-bar.bottom { bottom: 0; }
#intro.is-boxed .intro-bar { height: 11vh; }
#intro.is-naming .intro-bar { height: 5vh; }
.intro-fade { position: absolute; inset: 0; z-index: 4; pointer-events: none; transition: background-color 0.6s ease; }
.intro-fade.is-black { background-color: #000; transition: background-color 0.05s; }
.intro-fade.is-white { background-color: #f4f8ff; transition: background-color 1s ease; }
.intro-card { position: absolute; left: 50%; top: 16vh; transform: translateX(-50%); z-index: 5; letter-spacing: 0.5em; font-size: clamp(11px, 1.6vw, 15px); font-weight: 600; opacity: 0; white-space: nowrap; text-shadow: 0 0 18px rgba(0,0,0,.8); }
.intro-card.is-on { animation: card-in 5.5s ease forwards; }
.intro-card.is-later { top: 46%; font-size: clamp(18px, 3.4vw, 34px); letter-spacing: 0.35em; }
@keyframes card-in { 0% { opacity: 0; letter-spacing: 0.9em; } 18% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; letter-spacing: 0.45em; } }
.intro-title { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; pointer-events: none; }
.intro-title span { font-size: clamp(56px, 14vw, 150px); font-weight: 800; letter-spacing: 0.32em; padding-left: 0.32em; background: linear-gradient(#fff6d8, #d6f26a 60%, #6fd0ff); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 30px rgba(214,242,106,.35)); }
.intro-title small { margin-top: 10px; letter-spacing: 0.6em; font-size: clamp(10px, 1.4vw, 14px); opacity: 0.8; }
.intro-title.is-on { animation: title-in 4s ease forwards; }
@keyframes title-in { 0% { opacity: 0; transform: scale(1.12); } 30% { opacity: 1; transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: scale(0.98); } }
.intro-sub { position: absolute; left: 50%; bottom: calc(11vh + 18px); transform: translateX(-50%); z-index: 7; width: min(880px, 92vw); text-align: center; opacity: 0; transition: opacity 0.35s ease; font-size: clamp(15px, 2.1vw, 21px); line-height: 1.45; text-shadow: 0 2px 8px #000, 0 0 2px #000; }
.intro-sub.is-on { opacity: 1; }
.intro-sub b { display: block; font-size: 0.62em; letter-spacing: 0.3em; color: #d6f26a; margin-bottom: 4px; }
.intro-sub.is-voice span { font-style: italic; color: #f4ecd8; }
.intro-skip { position: absolute; right: 16px; bottom: 12px; z-index: 8; display: flex; gap: 8px; align-items: center; font-size: 12px; opacity: 0.85; }
.intro-hold { position: relative; padding: 6px 10px 6px 30px; color: #c9d2c4; }
.intro-hold i { position: absolute; left: 6px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; background: conic-gradient(#d6f26a calc(var(--hold, 0) * 360deg), rgba(255,255,255,.18) 0); }
.intro-hold kbd { font: inherit; border: 1px solid rgba(255,255,255,.35); border-radius: 4px; padding: 0 4px; }
.intro-ghost { background: rgba(10,16,24,.55); color: #eef3ea; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; padding: 8px 14px; font: inherit; cursor: pointer; min-height: 36px; }
.intro-ghost:hover, .intro-ghost:focus-visible { border-color: #d6f26a; outline: none; }
.intro-go { background: #d6f26a; color: #10161f; border: 0; border-radius: 999px; padding: 12px 22px; font: inherit; font-weight: 700; cursor: pointer; min-height: 44px; }
.intro-go:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.intro-name { position: absolute; z-index: 9; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(420px, 92vw); box-sizing: border-box; padding: 22px; border-radius: 18px; background: rgba(8,14,22,.78); border: 1px solid rgba(214,242,106,.45); box-shadow: 0 0 60px rgba(111,208,255,.18); backdrop-filter: blur(6px); display: grid; gap: 10px; animation: lab-pop .4s ease; }
.intro-name[hidden] { display: none; }
.intro-name h2 { margin: 0 0 4px; font-size: 24px; }
.intro-eyebrow { margin: 0; letter-spacing: .3em; font-size: 11px; color: #d6f26a; text-transform: uppercase; }
.intro-name label { display: grid; gap: 6px; font-size: 13px; color: #c9d2c4; }
.intro-name label em { font-style: normal; opacity: .6; }
.intro-name input { font: inherit; font-size: 20px; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.3); background: rgba(0,0,0,.35); color: #fff; }
.intro-name input:focus { outline: none; border-color: #d6f26a; box-shadow: 0 0 0 3px rgba(214,242,106,.25); }
#intro-random { justify-self: start; }
.intro-error { min-height: 1.2em; margin: 0; color: #ff9a7a; font-size: 13px; }
.intro-name.is-shake { animation: name-shake .35s; }
@keyframes name-shake { 25% { transform: translate(calc(-50% - 8px), -50%); } 75% { transform: translate(calc(-50% + 8px), -50%); } }
#title-screen { background: radial-gradient(circle at 70% 40%, #1f6d8a 0, #0b2238 30%, #02040a 70%); }
#title-screen.is-flat { animation: board-drift 30s ease-in-out infinite alternate; background-size: 140% 140%; }
.title-logo { position: absolute; left: 8vw; top: 20vh; z-index: 2; }
.title-logo h1 { margin: 0; font-size: clamp(56px, 11vw, 130px); letter-spacing: .28em; font-weight: 800; background: linear-gradient(#fffbe8, #eaff9a 55%, #9fe4ff); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 24px rgba(214,242,106,.45)); }
@keyframes title-glow { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.title-logo h1 { animation: title-glow 2s ease both; }
.title-logo p { margin: 6px 0 0 4px; letter-spacing: .6em; font-size: 13px; opacity: .8; }
.title-menu, .title-settings { position: absolute; left: 8vw; top: calc(20vh + clamp(90px, 15vw, 190px)); z-index: 2; display: grid; gap: 10px; width: min(280px, 84vw); }
.title-menu[hidden], .title-settings[hidden] { display: none; }
.title-settings { background: rgba(8,14,22,.7); padding: 16px; border-radius: 14px; border: 1px solid rgba(255,255,255,.2); }
.title-settings h2 { margin: 0 0 4px; font-size: 18px; }
.title-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 14px; min-height: 36px; }
.title-foot { position: absolute; left: 8vw; bottom: 18px; font-size: 11px; opacity: .5; letter-spacing: .2em; z-index: 2; }
#intro.is-titlebg > :not(canvas) { display: none !important; }
#title-screen { z-index: 201; }
#title-screen:not(.is-flat) { background: radial-gradient(circle at 20% 40%, rgba(2,4,10,.75) 0, rgba(2,4,10,.2) 45%, transparent 70%); }
body.intro-on #topbar, body.intro-on .hud, body.intro-on #mission { visibility: hidden; }
@media (max-width: 600px) {
  .title-logo { left: 0; right: 0; top: 9vh; text-align: center; }
  .title-logo h1 { padding-left: .28em; }
  .title-menu, .title-settings { left: 50%; transform: translateX(-50%); top: auto; bottom: 12vh; }
  .title-foot { left: 0; right: 0; text-align: center; }
  #intro.is-boxed .intro-bar { height: 8vh; }
  .intro-sub { bottom: calc(8vh + 54px); }
  .intro-skip { left: 10px; right: 10px; justify-content: space-between; }
  .intro-hold { font-size: 11px; }
  .intro-hold kbd { display: none; }
  .intro-name { top: auto; bottom: 7vh; transform: translateX(-50%); padding: 16px; }
  @keyframes name-shake { 25% { transform: translateX(calc(-50% - 8px)); } 75% { transform: translateX(calc(-50% + 8px)); } }
  .intro-card { white-space: normal; width: 90vw; text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .intro-board { animation: none; } }
/* Explore round: lock-on bar, scanner minimap, readout line; the scan chip is a touch button too. */
#scan-pop { top: 236px; }
#scan-chip { pointer-events: auto; cursor: pointer; user-select: none; touch-action: none; }
#scan-lock { position: fixed; left: 50%; bottom: 52px; transform: translateX(-50%); width: min(340px, 86vw); background: rgba(13,20,36,.9); border: 1px solid #8ff3ff; border-radius: 10px; padding: 6px 10px 8px; color: #dff8ff; font-size: .82rem; z-index: 6; text-align: center; }
#scan-lock i { display: block; height: 7px; margin-top: 5px; background: #1b2a40; border-radius: 4px; overflow: hidden; }
#scan-lock b { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #6fd6e8, #d6f26a); }
#radar { position: fixed; right: 14px; top: 76px; width: 150px; height: 150px; z-index: 3; pointer-events: none; }
#scan-pop .scan-line { color: #d6f26a; margin: 6px 0 0; }
body.in-lab #radar, body.in-lab #scan-lock { display: none !important; }
@media (max-width: 520px) { #radar { width: 96px; height: 96px; right: 6px; top: 64px; } #scan-lock { bottom: 64px; } }
/* ---- Pathfinder MK-II: the scanner as a handheld device ---- */
.scan-device { --tint: #d6f26a; --bez: #1a2433; --bez2: #0c131e; font-family: inherit; color: #dff8ff; position: fixed; z-index: 5;
  background: linear-gradient(160deg, #263347 0%, var(--bez) 40%, var(--bez2) 100%);
  border: 1px solid #3a4b63; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 3px rgba(0,0,0,.25), 0 6px 18px rgba(0,0,0,.45);
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px); }
.scan-device[hidden] { display: none !important; }
.scan-device::before { content: ""; position: absolute; inset: 4px; pointer-events: none; border: 1px solid transparent;
  background: linear-gradient(var(--tint), var(--tint)) top left / 10px 2px no-repeat, linear-gradient(var(--tint), var(--tint)) top left / 2px 10px no-repeat,
    linear-gradient(var(--tint), var(--tint)) top right / 10px 2px no-repeat, linear-gradient(var(--tint), var(--tint)) top right / 2px 10px no-repeat,
    linear-gradient(var(--tint), var(--tint)) bottom left / 10px 2px no-repeat, linear-gradient(var(--tint), var(--tint)) bottom left / 2px 10px no-repeat,
    linear-gradient(var(--tint), var(--tint)) bottom right / 10px 2px no-repeat, linear-gradient(var(--tint), var(--tint)) bottom right / 2px 10px no-repeat; opacity: .8; }
.scan-device::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0,0,0,.14) 0 1px, transparent 1px 3px); }
body.reduce-fx .scan-device::after { display: none; }
#scanner-dev { right: 12px; top: 90px; width: 196px; padding: 8px 10px 9px; pointer-events: auto; }
#radar { position: static; display: block; width: 172px; height: 172px; margin: 0 auto; pointer-events: none; }
.dev-head { display: flex; align-items: center; gap: 5px; font: 700 .58rem/1 ui-monospace, monospace; letter-spacing: .12em; color: #8ea3b8; margin-bottom: 5px; }
.dev-model { flex: 1; }
.dev-led { width: 7px; height: 7px; border-radius: 50%; background: #2a3646; box-shadow: inset 0 0 2px #000; }
.dev-led.on { background: var(--tint); box-shadow: 0 0 6px var(--tint); }
.dev-led[data-led="pwr"].on { background: #6fd08c; box-shadow: 0 0 6px #6fd08c; }
.dev-sig { display: inline-flex; align-items: flex-end; gap: 2px; height: 10px; }
.dev-sig i { width: 3px; background: #2a3646; } .dev-sig i:nth-child(1) { height: 3px; } .dev-sig i:nth-child(2) { height: 5px; } .dev-sig i:nth-child(3) { height: 7px; } .dev-sig i:nth-child(4) { height: 10px; }
.dev-sig i.on { background: var(--tint); }
.dev-lcd { display: flex; justify-content: space-between; align-items: center; padding: 3px 7px; margin-bottom: 6px; border-radius: 3px; cursor: pointer;
  background: linear-gradient(#0a1a14, #06110d); border: 1px solid #22332c; box-shadow: inset 0 1px 4px rgba(0,0,0,.7);
  font: 700 .7rem/1.2 ui-monospace, monospace; letter-spacing: .1em; color: var(--tint); text-shadow: 0 0 6px var(--tint); }
.dev-lcd-range { opacity: .75; font-weight: 600; }
.dev-screen { position: relative; border-radius: 50%; width: 172px; height: 172px; margin: 0 auto; box-shadow: 0 0 0 2px #0a0f17, 0 0 0 4px #2d3b50, 0 0 14px rgba(0,0,0,.6); background: #081219; }
.dev-gauges { display: flex; align-items: center; gap: 6px; margin-top: 8px; font: 700 .58rem/1 ui-monospace, monospace; letter-spacing: .1em; color: #8ea3b8; }
.dev-gauge { flex: 1; height: 6px; background: #0a111b; border: 1px solid #2c3a4e; border-radius: 2px; overflow: hidden; }
.dev-gauge b { display: block; height: 100%; width: 100%; background: repeating-linear-gradient(90deg, var(--tint) 0 5px, transparent 5px 7px); transition: width .25s linear; }
.dev-gauge-val { min-width: 36px; text-align: right; color: var(--tint); }
#scanner-dev.charging .dev-gauge-val { color: #e8b06a; }
.dev-modes { display: flex; gap: 3px; margin-top: 7px; }
.dev-mode { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 0 3px; border: 1px solid #2c3a4e; border-radius: 3px; cursor: pointer;
  background: linear-gradient(#202c3d, #121a26); color: #8ea3b8; font: 700 .54rem/1 ui-monospace, monospace; letter-spacing: .06em; box-shadow: 0 2px 0 #070b11; }
.dev-mode:active { transform: translateY(1px); box-shadow: 0 1px 0 #070b11; }
.dev-mode-led { width: 6px; height: 6px; border-radius: 50%; background: #2a3646; }
.dev-mode.on { color: var(--m); border-color: var(--m); } .dev-mode.on .dev-mode-led { background: var(--m); box-shadow: 0 0 6px var(--m); }
.dev-mode.locked { opacity: .4; }
#scanner-dev.boot .dev-screen, #scanner-dev.boot .dev-lcd { animation: dev-boot 1.2s steps(12) both; }
@keyframes dev-boot { 0% { opacity: 0; filter: brightness(3); } 20% { opacity: .8; } 30% { opacity: .1; } 45% { opacity: 1; } 55% { opacity: .4; } 70% { opacity: 1; filter: brightness(1.6); } 100% { opacity: 1; filter: none; } }
#scanner-dev.noise .dev-screen::after, #scanner-dev.noise .dev-lcd { animation: dev-noise .25s steps(5); }
.dev-screen::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; opacity: 0;
  background: repeating-linear-gradient(0deg, rgba(220,255,255,.25) 0 1px, transparent 1px 2px), repeating-linear-gradient(90deg, rgba(0,0,0,.3) 0 2px, transparent 2px 5px); }
@keyframes dev-noise { 0% { opacity: .9; transform: translateY(-2px); } 40% { opacity: .5; transform: translateY(2px); } 100% { opacity: 0; transform: none; } }
/* lock-on panel */
#scan-lock { left: 50%; bottom: 52px; transform: translateX(-50%); width: min(380px, 92vw); padding: 8px 14px 8px 10px; display: flex; gap: 10px; align-items: center; text-align: left; border-radius: 0; z-index: 6; background: linear-gradient(160deg, #263347 0%, var(--bez) 40%, var(--bez2) 100%); }
.lock-ret { width: 58px; height: 58px; flex: none; fill: none; stroke: var(--tint); stroke-width: 3; }
.lock-brk { transform: scale(calc(1.15 - var(--k, 0) * .45)) rotate(calc(var(--k, 0) * 90deg)); transform-origin: 0 0; animation: lock-spin 1.6s linear infinite; }
@keyframes lock-spin { to { rotate: 360deg; } }
.lock-x { stroke-width: 2; opacity: .8; } .lock-dot { fill: var(--tint); stroke: none; }
.lock-body { flex: 1; min-width: 0; }
.lock-top { display: flex; justify-content: space-between; gap: 8px; font: 700 .72rem/1.2 ui-monospace, monospace; letter-spacing: .06em; }
.lock-pct { color: var(--tint); text-shadow: 0 0 6px var(--tint); white-space: nowrap; }
.lock-name { color: #cfe0f0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; letter-spacing: 0; }
#scan-lock .lock-bar { display: block; height: 6px; margin: 5px 0 4px; background: #0a111b; border: 1px solid #2c3a4e; border-radius: 0; overflow: hidden; }
#scan-lock .lock-bar b { display: block; height: 100%; width: 0; background: repeating-linear-gradient(90deg, var(--tint) 0 6px, rgba(0,0,0,.25) 6px 8px); }
.lock-wave { display: block; width: 100%; height: 26px; background: #071016; border: 1px solid #1c2a36; }
/* data card (pulse list + identify readout) */
#scan-pop.scan-card { right: 220px; top: 90px; width: min(330px, 92vw); padding: 12px 14px 12px; border: 1px solid #3a4b63; border-radius: 0; font-size: .86rem; max-height: calc(100vh - 300px); overflow: auto; }
.card-head { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; padding-bottom: 7px; border-bottom: 1px dashed rgba(143,243,255,.25); }
.card-icon { width: 34px; height: 34px; flex: none; fill: none; stroke: var(--tint); stroke-width: 1.4; stroke-linejoin: round; padding: 4px; border: 1px solid rgba(143,243,255,.25); background: #071016; }
.card-mid { flex: 1; min-width: 0; }
.card-tag { display: inline-block; font: 700 .6rem/1 ui-monospace, monospace; letter-spacing: .12em; color: #071016; background: var(--tint); padding: 2px 5px; }
#scan-pop.scan-card h3 { margin: 4px 0 0; font-size: 1.02rem; color: #edf3ff; text-shadow: 0 0 8px rgba(143,243,255,.35); }
.card-stars { color: var(--tint); font-size: .95rem; letter-spacing: 1px; text-shadow: 0 0 6px var(--tint); }
.card-text { margin: 0 0 8px; color: #cfdcf0; line-height: 1.35; }
.card-data { margin: 0 0 6px; display: grid; gap: 3px; font: .76rem/1.3 ui-monospace, monospace; }
.card-data div { display: flex; gap: 8px; animation: card-type .45s steps(14) both; animation-delay: calc(var(--i) * .16s + .1s); }
.card-data dt { color: #8ea3b8; min-width: 70px; text-transform: uppercase; letter-spacing: .06em; font-size: .68rem; padding-top: 1px; } .card-data dd { margin: 0; color: var(--tint); }
@keyframes card-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
body.reduce-fx .card-data div { animation: none; }
#scan-pop.scan-card .scan-cond { font: .74rem/1.35 ui-monospace, monospace; color: #9ad7c8; }
#scan-pop.scan-card li { font: .78rem/1.35 ui-monospace, monospace; padding: 2px 0 2px 16px; position: relative; color: #cfdcf0; }
#scan-pop.scan-card li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 7px; height: 7px; background: #8fa3ad; transform: rotate(45deg); }
#scan-pop.scan-card li[data-kind="flora"]::before { background: #6fd08c; border-radius: 50%; transform: none; }
#scan-pop.scan-card li[data-kind="mineral"]::before { background: #f2b44a; }
#scan-pop.scan-card li[data-kind="feature"]::before { background: #6fd6e8; transform: none; }
#scan-pop.scan-card li[data-kind="anomaly"]::before { background: #e07ad6; }
#scan-pop.scan-card li.fresh { color: var(--tint); }
#scan-pop.scan-card .scan-line { color: var(--tint); font-weight: 600; }
#scan-chip.scan-chip { border-radius: 3px; background: linear-gradient(#202c3d, #121a26); border: 1px solid #3a4b63; color: #d6f26a; font: 700 .72rem/1.2 ui-monospace, monospace; letter-spacing: .06em; box-shadow: 0 2px 0 #070b11, 0 0 10px rgba(214,242,106,.12); padding: 6px 14px; }
@media (max-width: 520px) {
  #scanner-dev { right: 6px; top: max(74px, calc(var(--header-bottom, 64px) + 10px)); width: 110px; padding: 5px 6px 6px; }
  #radar, .dev-screen { width: 96px; height: 96px; }
  .dev-model, .dev-gauge-label, .dev-modes, .dev-gauges, .dev-lcd-range, .dev-sig { display: none; }
  .dev-head { margin-bottom: 3px; }
  .dev-lcd { font-size: .56rem; padding: 2px 4px; margin-bottom: 4px; } .dev-gauges { margin-top: 5px; gap: 4px; } .dev-gauge-val { min-width: 24px; }
  #scan-pop.scan-card { left: 8px; right: 8px; top: auto; bottom: 120px; width: auto; max-height: 38vh; }
  #scan-lock { bottom: 64px; }
}
#scan-pop.scan-card { background: linear-gradient(160deg, #263347 0%, #1a2433 40%, #0c131e 100%); }
body.in-lab #scanner-dev { display: none !important; }

/* Graphics settings (Options > Graphics): PATHFINDER-style readout panel with presets and range sliders. */
.gfx-panel { --tint: #d6f26a; display: grid; gap: 10px; padding: 12px; border: 1px solid rgba(143, 243, 255, 0.28); border-radius: 12px;
  background: linear-gradient(180deg, rgba(14, 24, 36, 0.92), rgba(7, 14, 22, 0.92)); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4); }
.gfx-head { display: flex; justify-content: space-between; align-items: center; font: 700 .72rem/1.2 ui-monospace, monospace; letter-spacing: .14em; }
.gfx-title { color: #8ff3ff; }
.gfx-mode { color: #071016; background: var(--tint); padding: 2px 6px; }
.gfx-presets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.gfx-preset { min-height: 40px; border: 1px solid rgba(143, 243, 255, 0.3); border-radius: 8px; background: #071016; color: #dff8ff;
  font: 700 .78rem/1 ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.gfx-preset[aria-pressed="true"] { border-color: var(--tint); color: var(--tint); box-shadow: 0 0 8px rgba(214, 242, 106, 0.35); }
.gfx-preset:focus-visible, .gfx-range:focus-visible { outline: 2px solid var(--tint); outline-offset: 2px; }
.gfx-row { display: grid; gap: 4px; padding: 6px 2px; border-top: 1px dashed rgba(143, 243, 255, 0.14); }
.gfx-label { display: flex; justify-content: space-between; gap: 10px; font-size: .9rem; }
.gfx-val { font: 700 .78rem/1.4 ui-monospace, monospace; color: var(--tint); text-shadow: 0 0 6px rgba(214, 242, 106, 0.5); min-width: 56px; text-align: right; }
.gfx-hint { color: var(--muted); font-size: .74rem; }
.gfx-range { --fill: 100%; -webkit-appearance: none; appearance: none; width: 100%; height: 28px; margin: 0; background: transparent; cursor: pointer; touch-action: pan-y; }
.gfx-range::-webkit-slider-runnable-track { height: 8px; border: 1px solid rgba(143, 243, 255, 0.35); background:
  linear-gradient(90deg, var(--tint) 0 var(--fill), transparent var(--fill)), repeating-linear-gradient(90deg, rgba(143, 243, 255, 0.18) 0 4px, transparent 4px 6px); }
.gfx-range::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px; border-radius: 4px; background: #0c131e; border: 2px solid var(--tint); box-shadow: 0 0 6px rgba(214, 242, 106, 0.6); }
.gfx-range::-moz-range-track { height: 8px; border: 1px solid rgba(143, 243, 255, 0.35); background: rgba(143, 243, 255, 0.12); }
.gfx-range::-moz-range-progress { height: 8px; background: var(--tint); }
.gfx-range::-moz-range-thumb { width: 20px; height: 20px; border-radius: 4px; background: #0c131e; border: 2px solid var(--tint); }
.gfx-note { margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.4; }
.reduce-fx .gfx-preset[aria-pressed="true"], .reduce-fx .gfx-val { box-shadow: none; text-shadow: none; }
/* Voyage round: deck HUD, flight supplies chip, ship station panels, collection book, find toasts. */
#voyage-hud { position: fixed; inset: 0; pointer-events: none; z-index: 30; }
#voyage-hud[hidden] { display: none; }
#voyage-hud .voy-title { position: absolute; top: 12px; left: 12px; padding: 6px 12px; border-radius: 8px; background: rgba(8, 14, 26, 0.82); color: #dfe8f4; font-size: 14px; border: 1px solid rgba(111, 214, 232, 0.35); }
#voyage-hud .voy-sup { position: absolute; top: 48px; left: 12px; }
#voyage-hud .voy-suit { position: absolute; top: 12px; right: 12px; width: 220px; padding: 8px 10px; border-radius: 10px; background: rgba(8, 14, 26, 0.82); border: 1px solid rgba(111, 214, 232, 0.3); }
#voyage-hud .voy-suit[hidden] { display: none; }
#voyage-hud.is-panel .voy-prompt, #voyage-hud.is-panel .voy-help { display: none; }
#voyage-hud .voy-leave { pointer-events: auto; position: absolute; bottom: 16px; left: 12px; min-height: 44px; background: rgba(8, 14, 26, 0.85); }
#voyage-hud .voy-scan, #voyage-hud .voy-bookbtn { pointer-events: auto; position: absolute; bottom: 16px; min-height: 44px; background: rgba(8, 14, 26, 0.85); }
#voyage-hud .voy-scan { right: 12px; }
#voyage-hud .voy-scan[hidden] { display: none; }
#voyage-hud .voy-bookbtn { right: 120px; }
.voy-supplies { display: flex; flex-wrap: wrap; gap: 6px; }
.voy-pill { display: inline-flex; gap: 6px; align-items: baseline; padding: 3px 9px; border-radius: 999px; background: rgba(8, 14, 26, 0.82); border: 1px solid rgba(143, 160, 190, 0.35); color: #dfe8f4; font-size: 12px; }
.voy-pill b { font-weight: 600; color: #8ea2c8; } .voy-pill em { font-style: normal; font-variant-numeric: tabular-nums; }
.voy-pill.is-fuel { border-color: rgba(240, 180, 90, 0.6); } .voy-pill.is-o2 { border-color: rgba(111, 214, 232, 0.6); } .voy-pill.is-food { border-color: rgba(111, 208, 140, 0.6); } .voy-pill.is-hull { border-color: rgba(185, 198, 255, 0.6); }
.voy-pill.is-low { background: rgba(120, 30, 20, 0.85); border-color: #ff8a6a; animation: voy-blink 1s ease-in-out infinite; }
@keyframes voy-blink { 50% { opacity: 0.6; } }
.voy-bar { display: grid; grid-template-columns: 64px 1fr 64px; gap: 8px; align-items: center; color: #dfe8f4; font-size: 13px; margin: 6px 0; }
.voy-bar i { display: block; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.voy-bar b { display: block; height: 100%; background: linear-gradient(90deg, #6fd6e8, #d6f26a); }
.voy-bar.is-low b { background: #ff7a5a; }
.voy-bar em { font-style: normal; text-align: right; font-variant-numeric: tabular-nums; color: #a8b8d0; }
.voy-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.voy-tag { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); color: #dfe8f4; }
.voy-tag.is-key { background: rgba(240, 180, 90, 0.25); color: #ffe0a0; } .voy-tag.is-warn { background: rgba(255, 110, 80, 0.25); color: #ffc8b8; }
#voyage-chip { position: fixed; top: 132px; right: 12px; z-index: 5; padding: 6px 8px; border-radius: 10px; background: rgba(8, 14, 26, 0.7); cursor: pointer; max-width: 300px; }
#voyage-chip[hidden] { display: none; }
#voyage-chip.is-out { box-shadow: 0 0 0 1px rgba(240, 210, 138, 0.6); }
#voyage-chip small { display: block; margin-top: 4px; color: #f0d28a; font-size: 12px; } #voyage-chip small.is-low { color: #ff9a7a; }
.voy-op { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: center; margin-top: 6px; color: #f3f7c8; font-size: 12px; }
.voy-op i { display: block; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.12); overflow: hidden; } .voy-op b { display: block; height: 100%; background: #d6f26a; }
#voyage-toast { position: fixed; left: 50%; top: 72px; transform: translateX(-50%); z-index: 40; padding: 8px 12px; border-radius: 12px; background: rgba(8, 14, 26, 0.92); border: 1px solid rgba(214, 242, 106, 0.5); color: #f3f7c8; pointer-events: none; }
#voyage-toast[hidden] { display: none; }
#voyage-toast.pop { animation: lab-pop 0.25s ease-out; }
#voyage-toast strong { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: #d6f26a; margin-bottom: 4px; }
.voy-toast-row { display: flex; gap: 8px; }
.voy-toast-item { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.item-icon { border-radius: 8px; image-rendering: auto; display: block; }
#voyage-panel, #voyage-book { position: fixed; z-index: 35; color: #dfe8f4; }
#voyage-panel[hidden], #voyage-book[hidden] { display: none; }
#voyage-panel { right: 16px; bottom: 16px; top: 16px; width: min(560px, calc(100vw - 32px)); display: flex; align-items: flex-end; }
#voyage-book { inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(2, 4, 10, 0.55); }
.voy-card { width: 100%; max-height: 100%; overflow: auto; padding: 14px 16px; border-radius: 14px; background: rgba(10, 16, 28, 0.96); border: 1px solid rgba(111, 214, 232, 0.3); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5); }
.voy-bookcard { width: min(940px, calc(100vw - 24px)); max-height: min(86vh, 760px); }
.voy-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.voy-card h3 { margin: 14px 0 6px; font-size: 14px; color: #b9c6ff; text-transform: uppercase; letter-spacing: 0.05em; }
.voy-note { color: #a8b8d0; font-size: 13px; margin: 4px 0 8px; }
.voy-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0; }
.voy-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; }
.voy-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px; border-radius: 10px; background: rgba(255, 255, 255, 0.04); border: 1px solid transparent; color: #dfe8f4; font: inherit; }
.voy-item em { font-style: normal; font-size: 11px; text-align: center; line-height: 1.15; }
.voy-item.is-locked em { color: #6a7a90; } .voy-item.is-pick { border-color: #d6f26a; }
.voy-bookgrid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
.voy-bookgrid .voy-item { cursor: pointer; min-height: 92px; }
.voy-bookwrap { display: grid; grid-template-columns: 1fr 260px; gap: 14px; margin-top: 10px; }
.voy-detail { padding: 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.voy-detail strong { font-size: 16px; }
.voy-rar { font-size: 12px; } .rar-common .voy-rar, .voy-rar.rar-common { color: #b8c2cc; } .voy-rar.rar-uncommon { color: #6fd68a; } .voy-rar.rar-rare { color: #6fb6ff; } .voy-rar.rar-legendary { color: #f0b45a; }
.voy-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.voy-set { padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); margin: 8px 0; border: 1px solid transparent; }
.voy-set.is-ready { border-color: #d6f26a; } .voy-set.is-claimed { opacity: 0.75; }
.voy-set-head { display: flex; justify-content: space-between; } .voy-set-items { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.voy-claimed { color: #6fd08c; font-size: 13px; }
.voy-lore { padding: 8px 10px; border-left: 3px solid #d8f0a0; margin: 8px 0; background: rgba(216, 240, 160, 0.05); }
.voy-lore p { margin: 4px 0 0; color: #cfd8e6; font-size: 14px; }
.voy-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.voy-slot { padding: 8px; border-radius: 10px; background: rgba(255, 255, 255, 0.04); border: 1px dashed rgba(143, 160, 190, 0.4); display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.voy-slot.is-on { border: 1px solid #6fd08c; background: rgba(111, 208, 140, 0.08); }
.voy-upgrade, .voy-recipe { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.voy-recipe { grid-template-columns: auto auto 1fr auto; }
.voy-upgrade p { margin: 2px 0 0; color: #a8b8d0; font-size: 12px; } .voy-upgrade.is-on strong::after { content: " · fitted"; color: #6fd08c; font-weight: 400; }
.voy-cost { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.voy-costitem { display: inline-flex; flex-direction: column; align-items: center; font-size: 11px; color: #cfd8e6; }
.voy-costitem em { font-style: normal; } .voy-costitem.is-miss em, span.voy-costitem.is-miss { color: #ff9a7a; }
.voy-out { display: flex; align-items: center; gap: 6px; } .voy-arrow { color: #8ea2c8; }
.voy-map { width: 100%; height: auto; border-radius: 10px; display: block; margin: 8px 0; }
.voy-plan { width: 100%; border-collapse: collapse; font-size: 13px; }
.voy-plan th, .voy-plan td { text-align: left; padding: 4px 6px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.voy-plan tr.is-short td:last-child { color: #ff9a7a; }
.voy-atlas { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.voy-atlas-card { padding: 8px; border-radius: 10px; background: rgba(255, 255, 255, 0.04); font-size: 12px; }
.voy-atlas-card p { color: #cfd8e6; margin: 4px 0; } .voy-dots { display: block; color: #d6f26a; letter-spacing: 2px; }
.voy-atlas-card dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 6px; margin: 0; } .voy-atlas-card dt { color: #8ea2c8; } .voy-atlas-card dd { margin: 0; }
.world-label.is-landmark strong { color: #e8d8ff; }
body.in-deck .topbar, body.in-deck #radar, body.in-deck #scanner-dev, body.in-deck .dock, body.in-deck .panels, body.in-deck .crosshair, body.in-deck #compass, body.in-deck #scan-chip, body.in-deck #scan-pop, body.in-deck #thrust, body.in-deck #mission, body.in-deck #building-card, body.in-deck #world-labels, body.in-deck #touch-pad, body.in-deck .context { display: none !important; }
@media (max-width: 720px) {
  #voyage-panel { left: 0; right: 0; bottom: 0; top: auto; width: 100%; max-height: 64vh; }
  #voyage-panel .voy-card { border-radius: 14px 14px 0 0; }
  .voy-bookwrap { grid-template-columns: 1fr; }
  #voyage-hud .voy-suit { width: 170px; }
  #voyage-hud .voy-bookbtn { right: 100px; }
  #voyage-chip { top: auto; bottom: 150px; }
}
#voyage-hud .voy-help { position: absolute; left: 50%; bottom: 52px; transform: translateX(-50%); color: rgba(223, 232, 244, 0.75); font-size: 13px; white-space: nowrap; text-shadow: 0 1px 2px #000; }
#voyage-hud .voy-prompt { pointer-events: auto; position: absolute; left: 50%; bottom: 96px; transform: translateX(-50%); padding: 12px 20px; min-height: 48px; border-radius: 10px; border: 1px solid #d6f26a; background: rgba(12, 22, 34, 0.92); color: #f2f7d8; font-size: 16px; font-weight: 600; box-shadow: 0 0 18px rgba(214, 242, 106, 0.35); animation: lab-pop 0.18s ease-out; cursor: pointer; }
#voyage-hud .voy-prompt[hidden] { display: none; }
#voyage-hud .voy-prompt kbd { display: inline-block; min-width: 22px; padding: 1px 6px; margin-right: 6px; border-radius: 5px; background: #d6f26a; color: #10161f; font: 700 14px/20px inherit; text-align: center; }
@media (max-width: 520px) {
  #voyage-hud .voy-help { display: none; }
  #voyage-hud .voy-prompt { bottom: 84px; max-width: calc(100vw - 32px); }
}

/* Crew round: helmet colour dots, job marker glyphs, the marker legend. */
.helmet-dot { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 50%; margin-right: 6px; font: 700 9px/1 sans-serif; font-style: normal; vertical-align: -2px; box-shadow: 0 0 0 1px rgba(255,255,255,0.35); text-shadow: 0 0 2px #000, 0 0 2px #000; }
.crew-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 8px 0 4px; padding: 8px 10px; border-radius: 8px; background: rgba(120,200,255,0.08); font-size: 12px; }
.crew-legend b { font-size: 13px; text-shadow: 0 0 3px rgba(0,0,0,0.8); }
.crew-legend-title { width: 100%; font-weight: 700; color: #9fe6ff; }

/* Suit bay: the hero creator (js/hero-ui.js). */
.hero-overlay { position: fixed; z-index: 60; padding: 16px; background: rgba(4, 8, 18, 0.72); }
.hero-dialog { width: min(100%, 980px); max-height: calc(100vh - 32px); display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; border: 1px solid rgba(214, 242, 106, 0.28); background: linear-gradient(180deg, #131d33, #0d1424); }
.hero-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.hero-head .eyebrow { margin: 0 0 2px; color: #d6f26a; letter-spacing: 0.18em; }
.hero-dialog h2 { margin: 0; }
.hero-dialog button { width: auto; min-height: 40px; }
.hero-dialog .ghost { background: transparent; color: var(--muted); min-height: 40px; padding: 4px 10px; }
.hero-body { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(300px, 1.25fr); gap: 16px; min-height: 0; flex: 1; }
.hero-stage { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.hero-canvas { position: relative; flex: 1; min-height: 340px; border-radius: 14px; overflow: hidden; touch-action: none; cursor: grab;
  background: radial-gradient(circle at 50% 38%, rgba(95, 242, 230, 0.18), transparent 60%), repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 22px), repeating-linear-gradient(90deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 22px), #0a1120;
  border: 1px solid rgba(255, 255, 255, 0.08); }
.hero-canvas:focus-visible { outline: 2px solid #d6f26a; outline-offset: 2px; }
.hero-canvas canvas { position: absolute; inset: 0; display: block; }
.hero-nogl { position: absolute; inset: auto 12px 12px; margin: 0; color: var(--muted); font-size: 0.85rem; }
.hero-turn { display: flex; align-items: center; gap: 6px; }
.hero-anims { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; justify-content: center; }
.hero-panel { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; min-height: 0; padding-right: 4px; }
.hero-name { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 10px; color: var(--muted); font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; }
.hero-name input { min-height: 40px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.14); background: #0a1120; color: var(--text); font: inherit; font-size: 1rem; padding: 0 12px; text-transform: none; letter-spacing: 0; }
.hero-error { grid-column: 2; color: var(--danger); font-style: normal; font-size: 0.78rem; text-transform: none; }
.hero-error:empty { display: none; }
.hero-dialog .hero-label { margin: 4px 0 2px; color: var(--muted); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; }
.hero-presets, .hero-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hero-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-top: 4px; }
.hero-dialog .hero-tab { background: transparent; color: var(--muted); border-radius: 10px 10px 0 0; padding: 0 14px; min-height: 40px; border-bottom: 2px solid transparent; }
.hero-dialog .hero-tab.on { color: #d6f26a; border-bottom-color: #d6f26a; background: rgba(214, 242, 106, 0.08); }
.hero-row { display: flex; flex-direction: column; }
.hero-dialog .hero-chip { min-height: 38px; padding: 0 12px; border-radius: 999px; background: #1c2742; color: var(--text); border: 1px solid rgba(255,255,255,0.1); font-weight: 500; font-size: 0.88rem; display: inline-flex; align-items: center; gap: 6px; }
.hero-dialog .hero-chip.on { background: #d6f26a; color: var(--ink); border-color: #d6f26a; }
.hero-dialog .hero-chip.swatch { padding: 0 8px; gap: 0; }
.hero-chip.swatch i { width: 16px; height: 22px; display: block; }
.hero-chip.swatch i:first-of-type { border-radius: 8px 0 0 8px; }
.hero-chip.swatch i:last-of-type { border-radius: 0 8px 8px 0; }
.hero-chip.swatch i:only-of-type { border-radius: 50%; width: 20px; height: 20px; }
.hero-dialog .hero-chip.labelled { gap: 6px; padding: 0 10px 0 8px; }
.hero-colour { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 0.85rem; }
.hero-colour input { width: 44px; height: 36px; border: 0; padding: 0; background: none; cursor: pointer; }
.hero-chips input[type=range] { width: min(100%, 260px); accent-color: #d6f26a; min-height: 36px; }
.hero-foot { display: flex; gap: 8px; justify-content: flex-end; align-items: center; }
.hero-dialog #hero-done { min-width: 140px; background: #d6f26a; }
.hero-dialog #hero-close { color: #d6f26a; }
@media (max-width: 720px) {
  .hero-overlay { padding: 0; place-items: stretch; }
  .hero-dialog { max-height: none; height: 100vh; height: 100dvh; width: 100%; border-radius: 0; padding: 12px; gap: 8px; }
  .hero-body { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); gap: 8px; overflow: hidden; }
  .hero-canvas { min-height: 0; height: 34vh; flex: none; }
  .hero-foot { justify-content: stretch; }
  .hero-foot button { flex: 1; }
}
.dialog button.arrival-hero { margin-bottom: 8px; background: transparent; color: #d6f26a; border: 1px solid rgba(214, 242, 106, 0.5); }
.dialog button.arrival-hero[hidden] { display: none; }

/* Research phases: readable paths and native keyboard controls at every viewport size. */
.skill-phases { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin: 14px 0; }
.skill-phase { display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 12px; border: 1px solid #52627d; border-radius: 10px; background: #111d30; color: #e8eef8; cursor: pointer; }
.skill-phase span { font-size: 12px; }
.skill-phase.selected { border: 2px solid #d6f26a; padding: 11px; background: #243119; }
.skill-phase.locked { color: #b9c6db; }
.skill-phase-intro { padding: 12px 0; }
.skill-phase-intro h3 { margin: 0 0 8px; }
.skill-next { color: #e2c56a; }
.skill-paths { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 14px; margin: 14px 0; align-items: start; }
.skill-path { min-width: 0; border-top: 2px solid #52627d; }
.skill-path h4 { margin: 10px 0; color: #b9c6db; }
.skill-card { padding: 12px; margin-bottom: 10px; border: 1px solid #52627d; border-radius: 10px; background: #0b1220; overflow-wrap: anywhere; }
.skill-card.open { border-color: #e2c56a; }
.skill-card.owned { border-color: #a1bc51; }
.skill-card.selected { outline: 2px solid #fff; outline-offset: 2px; }
.skill-pick { background: transparent; border: 0; color: #f1f5ff; padding: 2px 0; font: inherit; font-weight: 700; cursor: pointer; text-align: left; }
.skill-state { color: #e2c56a; font-size: 12px; }
.skill-card.owned .skill-state { color: #d6f26a; }
.skill-card.locked .skill-state, .skill-blocker { color: #bac6da; }
.skill-links { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; align-items: baseline; }
.skill-links button { border: 1px solid #52627d; border-radius: 6px; background: #182238; color: #e8eef8; padding: 5px 7px; cursor: pointer; font: inherit; text-align: left; }
.skill-phases button:focus-visible, .skill-paths button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.skill-info { margin-top: 16px; }
.skill-tree-view > .science-tabs .ghost { padding: 8px 10px; border: 1px solid #52627d; border-radius: 7px; }

/* Science round 2: field research tree and the suit reserve meter. */
.field-head .field-job { margin-top: 8px; }
.field-scroll { overflow-x: auto; padding-bottom: 6px; }
.field-tree { display: grid; gap: 6px; min-width: 720px; align-items: stretch; }
.field-track { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: #6fd6e8; text-align: center; align-self: end; }
.field-tier { font-size: .72rem; color: #8a96aa; align-self: center; }
.field-node { background: rgba(18,26,40,.92); border: 1px solid #33425a; border-radius: 8px; padding: 6px; display: flex; flex-direction: column; gap: 3px; font-size: .72rem; line-height: 1.25; }
.field-node h4 { margin: 0; font-size: .78rem; }
.field-node p { margin: 0; }
.field-node.owned { border-color: #6fd08c; background: rgba(28,52,38,.9); }
.field-node.open { border-color: #f7c22e; box-shadow: 0 0 0 1px rgba(247,194,46,.35) inset; }
.field-node.busy { border-color: #6fd6e8; background: rgba(20,44,54,.92); }
.field-node.locked { opacity: .72; }
.field-node .field-cost { color: #f7c22e; }
.field-node .field-go { margin-top: auto; }
#suit-meter { position: fixed; left: 50%; bottom: 52px; transform: translateX(-50%); z-index: 4; pointer-events: none; display: flex; align-items: center; gap: 8px; font: 700 .68rem/1 ui-monospace, monospace; letter-spacing: .06em; color: #6fd6e8; background: rgba(13,20,36,.8); border: 1px solid #3a4b63; border-radius: 3px; padding: 4px 8px; transition: opacity .4s; }
#suit-meter i { display: block; width: 120px; height: 6px; background: #1d2636; border-radius: 3px; overflow: hidden; }
#suit-meter b { display: block; height: 100%; background: #6fd6e8; }
#suit-meter.winded { color: #ff9f43; } #suit-meter.winded b { background: #ff9f43; }
body.in-lab #suit-meter, body.in-deck #suit-meter, #suit-meter[hidden] { display: none !important; }

/* Shipment controls remain visible while the settlement planner is open. */
.logistics-station { margin: 12px 0; padding: 12px; border: 1px solid #334651; border-radius: 8px; }
.logistics-station h4 { margin: 0 0 8px; }


/* Spatial interaction controls and user-positioned scanner. */
.object-action-group { position: absolute; transform: translate(-50%, -100%); display: grid; gap: 3px; width: max-content; max-width: min(230px, calc(100vw - 24px)); max-height: 36vh; overflow-y: auto; padding: 5px; background: rgba(8,12,24,.88); border: 1px solid #7db9b8; border-radius: 10px; pointer-events: auto; }
.object-action-group[hidden], #object-actions[hidden], .dock-actions[hidden] { display: none !important; }
.object-action-group .action { display: flex; flex-direction: column; align-items: stretch; gap: 2px; min-height: 38px; width: 100%; padding: 5px 9px; text-align: left; }
.object-action-group small { font-size: 10px; }
.dev-head { cursor: grab; touch-action: none; }
.dev-head:active { cursor: grabbing; }
.dev-collapse { margin-left: auto; padding: 0 5px; min-width: 24px; min-height: 26px; font-size: 18px; line-height: 1; }
#scanner-dev.is-collapsed > :not(.dev-head) { display: none; }
#scanner-dev.is-collapsed .dev-sig { display: none; }
#scanner-dev .dev-model { flex: 1; font-size: 7px; letter-spacing: .05em; }
#scanner-dev .dev-sig { display: none; }
.colony-alert { margin: 6px 0; padding-left: 8px; border-left: 2px solid #e4b957; list-style: none; font-size: .78rem; }
.colony-alert.priority-0 { border-color: #f47b6a; }
.colony-alert.priority-2 { border-color: #67d1b4; }
body.in-lab #object-actions, body.in-deck #object-actions, body.intro-on #object-actions { display: none; }
.hud:not(.is-surface) .panels, .panels[hidden], #ship-card { display: none !important; }
.hud.is-surface .panels { width: 280px; max-width: calc(100vw - 32px); }
.planet-vitals { margin: 8px 0; padding-bottom: 7px; border-bottom: 1px solid var(--line); }
.planetary-location { padding: 12px; margin: 10px 0; border: 1px solid var(--line); border-radius: 12px; background: rgba(8,12,24,.7); }
.planetary-location summary { cursor: pointer; padding: 4px 0; }
.planetary-location summary strong, .planetary-location summary span { display: block; }
.planetary-location summary span { font-size: .8rem; margin-top: 5px; color: var(--muted); }
.planetary-location .ledger > div { padding: 3px 0; }
.planetary-location .ledger b { text-align: right; overflow-wrap: anywhere; }
#planetary-report { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .hud.is-surface .panels { top: auto; bottom: 94px; left: 16px; right: auto; width: min(260px, calc(100vw - 148px)); flex-direction: column; }
  .hud.is-surface .panels .card { flex: auto; width: 100%; box-sizing: border-box; }
  .hud.is-surface .panels .card:not(.is-shut) { max-height: 34vh; }
  .hud.is-surface #compass { left: 16px; transform: none; width: min(260px, calc(100vw - 148px)); bottom: 192px; }
  .hud.is-surface:has(.panels .card:not(.is-shut)) #compass { bottom: calc(94px + 34vh + 8px); }
  .planetary-location .ledger > div { flex-wrap: wrap; }
}
@media (max-width: 600px) {
  .hud.is-surface #compass { top: auto; bottom: 192px; }
}

/* Shard's copper and basalt colony identity. */
.shard-colony-ledger { border:1px solid #b77c45; border-radius:12px; padding:14px; margin:0 0 16px; background:linear-gradient(135deg,#1a2630,#26282b); color:#e3edf1; }
.shard-colony-ledger h3 { color:#ffd493; margin:0 0 6px; letter-spacing:.06em; font-size:1rem; }
.shard-colony-ledger h4 { color:#ffd493; margin:16px 0 8px; }
.shard-colony-ledger p { font-size:.85rem; line-height:1.5; }
.shard-colony-ledger .shard-next { border-left:3px solid #dea45f; padding-left:9px; color:#fff0d8; }
.shard-survey { display:block; width:100%; white-space:normal; padding:9px; margin:5px 0; border:1px solid #c38a4c; background:#343b40; color:#ffe1b2; border-radius:7px; cursor:pointer; }
.shard-survey:disabled { opacity:.55; cursor:default; }
.shard-colony-ledger > div { display:grid; grid-template-columns:minmax(90px, .8fr) minmax(0, 1.5fr); gap:12px; padding:5px 0; font-size:.82rem; line-height:1.45; border-bottom:1px solid #ffffff0d; }
.shard-colony-ledger > div > span { color:#b8cbd2; }
.shard-colony-ledger > div > b { overflow-wrap:anywhere; font-weight:500; }
@media(max-width:480px) { .shard-colony-ledger > div { grid-template-columns:1fr; gap:2px; padding:7px 0; } }

/* Ledger controls preserve their reading position across value changes. */
.panels .card, .guide-sheet.inventory-sheet { overflow-anchor: none; }


/* Shard field operations and the underground expedition view. */
.geo-sheet { position:fixed; inset:0; z-index:110; background:#080e16dc; padding:24px; overflow:auto; color:#e3edf1; }
.geo-sheet[hidden] { display:none; }
.geo-shell { max-width:1280px; margin:0 auto; padding:24px; border:1px solid #a97642; border-radius:18px; background:linear-gradient(145deg,#18252d,#101923); box-shadow:0 24px 90px #0009; }
.geo-header { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:18px; pointer-events:auto; }
.geo-header h2 { font-size:1.8rem; margin:0; color:#fff0d5; }
.geo-eyebrow { color:#e3af72; font-size:.72rem; letter-spacing:.16em; margin:0 0 5px; }
.geo-header button,.geo-button,.geo-mission-button { border:1px solid #986d43; border-radius:8px; padding:10px 13px; color:#ffe1b2; background:#28363e; cursor:pointer; font:inherit; }
.geo-button:disabled { opacity:.45; cursor:default; }
.geo-button:hover:not(:disabled),.geo-mission-button:hover { background:#3a4c54; border-color:#e4b276; }
.geo-button:focus-visible,.geo-header button:focus-visible,.geo-map-tile:focus-visible { outline:3px solid #9de1df; outline-offset:3px; }
.geo-mission-button { font-size:.75rem; padding:6px 10px; margin-top:5px; }
.geo-summary { background:#20303a; padding:16px; border-radius:12px; margin-bottom:20px; }
.geo-objective { color:#fff0d1; font-size:1.04rem; margin:0 0 12px; }
.geo-fact { display:flex; justify-content:space-between; flex-wrap:wrap; gap:6px 16px; padding:7px 0; line-height:1.4; font-size:.88rem; }
.geo-fact span { color:#a9bec8; }
.geo-fact strong { font-weight:500; }
.geo-journal-grid { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr); gap:20px; }
.geo-field-list h3,.geo-expeditions h3,.geo-mine-tools h3 { color:#e8c18e; margin:0 0 12px; }
.geo-site,.geo-contract { padding:16px; margin-bottom:12px; border:1px solid #42515b; border-radius:12px; background:#17242e; }
.geo-site.is-tracked { border-color:#d5a66d; box-shadow:inset 3px 0 #d5a66d; }
.geo-site h4,.geo-contract h4 { color:#f5e5cd; margin:0 0 8px; font-size:1.03rem; }
.geo-site p,.geo-contract p,.geo-mine-tools p { line-height:1.55; font-size:.88rem; margin:0 0 9px; }
.geo-site-state { color:#91d7da; font-size:.75rem!important; text-transform:uppercase; letter-spacing:.04em; }
.geo-purpose { color:#dcba87; }
.geo-small { color:#a9bec8; font-size:.78rem!important; }
.geo-row-actions,.geo-route-tools { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.geo-route-tools p { width:100%; font-size:.83rem; color:#b8ccd4; margin:5px 0 0; }
.geo-expeditions > .geo-button { width:100%; margin:5px 0; }
#geo-message { min-height:1.5em; border-top:1px solid #49606a; padding-top:14px; margin:16px 0 0; color:#b6eef0; line-height:1.5; }
.geo-mine-stats { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-bottom:16px; }
.geo-mine-stats .geo-fact { padding:12px; border:1px solid #42515b; border-radius:9px; flex-direction:column; }
.geo-mine-layout { display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:18px; }
.geo-mine-view { min-height:480px; height:57vh; max-height:690px; border:1px solid #53606a; border-radius:12px; overflow:hidden; background:#10171d; }
.geo-mine-view canvas { width:100%; height:100%; display:block; touch-action:manipulation; }
.geo-mine-tools .geo-button { width:100%; margin:5px 0; }
.geo-direction-pad { display:grid; grid-template:repeat(3,42px)/repeat(3,1fr); gap:4px; max-width:220px; margin:14px auto; }
.geo-direction-pad .geo-button { padding:3px; margin:0; font-size:.8rem; }
.geo-north { grid-area:1/2; }.geo-west {grid-area:2/1;}.geo-east {grid-area:2/3;}.geo-south {grid-area:3/2;}
.geo-warning { border-left:3px solid #e9b457; padding-left:10px; color:#ffd89e; }
.geo-map-details { margin-top:15px; color:#b7d3dc; }
.geo-map-details summary { cursor:pointer; padding:8px 0; }
.geo-tile-map { display:grid; grid-template-columns:repeat(11,minmax(0,1fr)); gap:3px; max-width:570px; margin:10px 0; }
.geo-map-tile { aspect-ratio:1; border:1px solid #52616a; background:#384751; color:#f2dfb7; font-size:.75rem; padding:0; cursor:pointer; }
.geo-map-tile:disabled { cursor:default; opacity:.55; }.geo-tile-unexplored {background:#121c24;}.geo-tile-you {background:#d7b46b;color:#101923;}.geo-tile-ice {background:#39778e;}.geo-tile-red {background:#8a4937;}.geo-tile-open {background:#273139;}
@media(max-width:760px) { .geo-sheet { padding:8px; }.geo-shell {padding:14px;}.geo-header {align-items:flex-start;gap:10px;}.geo-header h2 {font-size:1.35rem;}.geo-header button {font-size:.78rem;padding:8px;}.geo-journal-grid,.geo-mine-layout {grid-template-columns:1fr;}.geo-mine-stats {grid-template-columns:repeat(3,1fr);gap:6px;}.geo-mine-stats .geo-fact {font-size:.75rem;padding:7px;}.geo-mine-view {min-height:310px;height:44vh;}.geo-mine-tools {display:grid;grid-template-columns:1fr;}.geo-expeditions {margin-top:4px;} }

/* Volumetric excavation */
.sculpt-site{color:#e6e5d9}.sculpt-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:8px 0 12px}.sculpt-toolbar h3{margin:0;font-size:24px}.sculpt-stage{position:relative;height:clamp(320px,56vh,670px);overflow:hidden;border:1px solid #52616a;border-radius:12px;background:#202a35;touch-action:none;outline-offset:3px}.sculpt-stage canvas{display:block;width:100%;height:100%}.sculpt-crosshair{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);font-size:26px;color:#d2ffff;pointer-events:none;text-shadow:0 1px 4px #000}.sculpt-target{position:absolute;top:16px;left:16px;background:#15212cdd;border-radius:6px;padding:6px 12px;pointer-events:none}.sculpt-hint{position:absolute;bottom:12px;left:12px;right:12px;text-align:center;font-size:12px;background:#14212cd9;padding:8px;border-radius:6px;pointer-events:none}.sculpt-readout{padding:12px 0;min-height:48px;font-size:14px;line-height:1.6;color:#d9e5c2}.sculpt-controls{display:flex;flex-wrap:wrap;gap:8px}.sculpt-controls button,.sculpt-toolbar button,.sculpt-touch button{min-height:44px;padding:9px 14px;border:1px solid #677b82;background:#253b45;color:#f2f3e3;border-radius:8px;cursor:pointer}.sculpt-controls [data-action=dig]{background:#82552e}.sculpt-controls [data-action=fill]{background:#425e37}.sculpt-touch{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;max-width:500px;margin-top:10px}.sculpt-site .geo-small{margin-top:12px;line-height:1.5}.sculpt-controls button:focus-visible,.sculpt-touch button:focus-visible{outline:2px solid #93e8ee;outline-offset:2px}@media(max-width:600px){.sculpt-toolbar{align-items:flex-start}.sculpt-toolbar h3{font-size:19px}.sculpt-toolbar button{max-width:140px;font-size:12px}.sculpt-stage{height:42vh;min-height:280px}.sculpt-controls button{flex:1 1 40%;font-size:12px}.sculpt-hint{font-size:10px}.sculpt-readout{font-size:12px}.sculpt-touch button{padding:8px 4px;font-size:12px}}

/* Dig round: Mine shaft dig site panel (js/dig-ui.js). */
#dig-hud { position: fixed; left: 12px; bottom: 64px; z-index: 30; width: min(420px, calc(100vw - 24px)); padding: 10px 12px 9px; border-radius: 12px; background: rgba(14, 22, 30, 0.86); border: 1px solid rgba(242, 180, 90, 0.45); color: #e9eef2; font-size: 13px; line-height: 1.35; box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35); }
#dig-hud[hidden] { display: none; }
#dig-hud p { margin: 0 0 4px; }
#dig-hud .dig-eyebrow { font-size: 11px; letter-spacing: 0.12em; color: #f2b45a; font-weight: 700; }
#dig-hud .dig-target { color: #9fe9f2; }
#dig-hud .dig-msg { min-height: 1.35em; color: #f3e3c2; }
#dig-hud .dig-msg[data-ok="0"] { color: #ffb4a8; }
#dig-hud .dig-buttons { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 4px; }
#dig-hud .dig-buttons button { min-height: 34px; padding: 4px 10px; border-radius: 8px; border: 1px solid rgba(159, 233, 242, 0.35); background: rgba(40, 60, 72, 0.9); color: #e9eef2; font: inherit; cursor: pointer; touch-action: none; }
#dig-hud .dig-buttons button[data-dig="dig"] { background: rgba(150, 92, 44, 0.92); border-color: rgba(242, 180, 90, 0.7); }
#dig-hud .dig-buttons button[data-dig="fill"] { background: rgba(76, 96, 52, 0.92); }
#dig-hud .dig-buttons kbd { font: 700 11px/1 inherit; padding: 2px 4px; margin-right: 3px; border-radius: 4px; background: rgba(0, 0, 0, 0.35); }
#dig-hud.is-scanning { border-color: rgba(127, 243, 255, 0.8); }
#dig-hud .dig-help { font-size: 11.5px; color: #a9b6bf; }
@media (max-width: 620px) {
  #dig-hud { bottom: 112px; font-size: 12px; padding: 8px 10px; }
  #dig-hud .dig-help { display: none; }
  #dig-hud .dig-buttons { flex-wrap: nowrap; gap: 4px; }
  #dig-hud .dig-buttons button { min-height: 40px; padding: 4px 7px; flex: 1 1 auto; white-space: nowrap; }
  #dig-hud .dig-buttons kbd { display: none; }
  /* At the dig site on a phone the location card would sit under the dig panel. */
  body.at-dig-site #plot-cards { display: none; }
}

/* Native modal keeps slot selection above the title and contains keyboard focus. */
.save-files { color: #e5f4ff; background: #101c2c; border: 1px solid #41627b; border-radius: 16px; padding: 24px; width: min(560px, calc(100vw - 32px)); max-height: 85dvh; overflow-y: auto; box-sizing: border-box; }
.save-files::backdrop { background: #020713dd; }
.save-files h2 { margin-top: 0; }
.save-slot { border: 1px solid #354d62; border-radius: 10px; padding: 14px; margin: 12px 0; }
.save-slot h3 { margin: 0 0 8px; }
.save-slot p { color: #b4ccdc; line-height: 1.5; overflow-wrap: anywhere; }
.save-slot button { min-height: 44px; }

.save-slot button { font: inherit; color: #e5f4ff; background: #24445a; border: 1px solid #5789a7; border-radius: 8px; padding: 10px 14px; cursor: pointer; }
.save-slot button:hover { background: #315b76; }
.save-files button:focus-visible { outline: 2px solid #a8e5ff; outline-offset: 3px; }
.save-slot button:disabled { opacity: .55; cursor: default; }

.world-sandbox-banner { position:fixed; bottom:10px; left:50%; transform:translateX(-50%); z-index:999; max-width:90vw; padding:8px 12px; border:1px solid #82b9a9; border-radius:8px; background:#112e27; color:#d5fff0; font:12px system-ui,sans-serif; text-align:center; }
.title-menu a.intro-ghost{display:block;text-decoration:none;text-align:center;box-sizing:border-box}

/* Action pad: one control at bottom centre (paw layout). Big main button, four small buttons arched
   above it (outer two lower), side slots beside the main button only when needed. Kit: glass, white,
   yellow main, teal accents. Sits above the suit meter and scan chip, below everything modal. */
.action-pad { position: fixed; left: 50%; bottom: 74px; transform: translateX(-50%); z-index: 18; pointer-events: none;
  display: grid; grid-template-columns: repeat(4, 138px); grid-template-rows: 22px auto auto; column-gap: 8px; row-gap: 6px; justify-items: stretch; }
.action-pad[hidden] { display: none !important; }
.action-pad.has-side { grid-template-columns: repeat(6, minmax(104px, 132px)); }
.pad-btn { pointer-events: auto; position: relative; display: flex; align-items: center; gap: 7px; min-height: 44px; padding: 5px 9px 5px 6px;
  border-radius: 16px; border: 1px solid rgba(111,214,232,.55); background: rgba(12,22,34,.62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: #f4f8fa; font: 600 13px/1.15 Outfit, system-ui, sans-serif; text-align: left; cursor: pointer; touch-action: manipulation; user-select: none;
  box-shadow: 0 6px 18px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.18); transition: transform .12s, background .12s; min-width: 0; }
.pad-btn[hidden] { display: none !important; }
.pad-btn:hover:not(:disabled) { background: rgba(28,48,64,.78); transform: translateY(-1px); }
.pad-btn:active:not(:disabled) { transform: translateY(1px); }
.pad-btn:focus-visible { outline: 2px solid #8ff3ff; outline-offset: 2px; }
.pad-btn kbd { flex: none; min-width: 22px; height: 22px; display: grid; place-items: center; padding: 0 4px; border-radius: 7px; background: rgba(255,255,255,.92); color: #13232a; font: 700 11px/1 ui-monospace, monospace; }
.pad-text { display: flex; flex-direction: column; min-width: 0; }
.pad-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pad-target { font-size: 11px; font-weight: 500; color: #8fe6f2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pad-target:empty { display: none; }
.pad-target::before { content: "· "; }
.pad-reason { display: none; }
.pad-btn:disabled { cursor: not-allowed; opacity: 1; color: #c8d2d8; border-style: dashed; border-color: rgba(200,210,216,.45); background: rgba(12,22,34,.5); }
.pad-btn:disabled kbd { background: rgba(255,255,255,.4); }
.pad-btn:disabled .pad-reason:not(:empty) { display: block; flex-basis: 100%; order: 3; color: #ffd98a; font: 500 10px/1.2 Outfit, system-ui, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pad-main:disabled .pad-reason:not(:empty) { font-size: 11px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; padding-left: 34px; }
.pad-btn { flex-wrap: wrap; align-content: center; }
.pad-small .pad-text { flex: 1; }
.pad-btn:disabled .pad-text { flex: 1; }

.pad-main { grid-row: 3; grid-column: 2 / span 2; min-height: 58px; padding: 6px 14px 6px 8px; border-radius: 22px; font-size: 16px;
  background: linear-gradient(#e4f77e, #c8e34f); color: #172033; border-color: rgba(255,255,255,.85); box-shadow: 0 8px 22px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.6); }
.pad-main:hover:not(:disabled) { background: linear-gradient(#ecfb94, #d1ec5a); }
.pad-main .pad-target { color: #1e5a63; font-size: 12px; }
.pad-main kbd { background: #172033; color: #e4f77e; min-width: 26px; height: 26px; }
.pad-main:disabled { background: rgba(214,242,106,.18); color: #eef6c8; border-color: rgba(214,242,106,.6); }
.pad-main:disabled .pad-target { color: #b9e9ef; }
.pad-main .pad-text { flex: 1; }
/* Paw arch: outer small buttons sit lower (row 2), inner ones higher (rows 1-2 shifted up). */
.pad-scan { grid-row: 2; grid-column: 1; transform: translateY(20px); }
.pad-s1 { grid-row: 1 / span 2; grid-column: 2; align-self: start; }
.pad-s2 { grid-row: 1 / span 2; grid-column: 3; align-self: start; }
.pad-s3 { grid-row: 2; grid-column: 4; transform: translateY(20px); }
.pad-s4, .pad-s5 { grid-row: 3; }
.action-pad.has-side .pad-scan { grid-column: 2; } .action-pad.has-side .pad-s1 { grid-column: 3; } .action-pad.has-side .pad-s2 { grid-column: 4; } .action-pad.has-side .pad-s3 { grid-column: 5; }
.action-pad.has-side .pad-main { grid-column: 3 / span 2; }
.action-pad.has-side .pad-s4 { grid-column: 1; } .action-pad.has-side .pad-s5 { grid-column: 6; }
.pad-scan:hover:not(:disabled), .pad-s3:hover:not(:disabled) { transform: translateY(19px); }
.pad-scan { border-color: rgba(111,214,232,.9); }
.pad-scan kbd { background: #6fd6e8; }
.pad-btn.is-risky:not(:disabled) { border-color: rgba(255,159,67,.8); }
.pad-btn.is-risky kbd { background: #ffb36b; }
.pad-s6, .pad-s7, .pad-s8 { grid-row: 1; }
#dig-hud .dig-buttons { display: none !important; }
/* Its buttons live on the action pad now, so the panel narrows to stay clear of the pad. */
#dig-hud { width: min(300px, calc(50vw - 300px)); min-width: 200px; }
.scan-choices-hint { margin: 6px 0 0; font-size: 11px; color: #8fe6f2; }
body.in-lab .action-pad, body.in-deck .action-pad, body.intro-on .action-pad { display: none !important; }
@media (max-width: 620px) {
  #dig-hud { width: auto; min-width: 0; left: 8px; right: 128px; bottom: auto; top: 132px; }
}
/* Scan round: field test pattern game and the sample case (kit: glass, white, yellow, teal). */
.kit-sheet { position: fixed; z-index: 40; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 40px); overflow-y: auto;
  padding: 14px 16px 16px; border-radius: 22px; border: 1px solid rgba(111,214,232,.6); background: rgba(12,22,34,.82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  color: #f4f8fa; font: 500 14px/1.35 Outfit, system-ui, sans-serif; box-shadow: 0 18px 50px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.16); }
.kit-sheet[hidden] { display: none !important; }
.kit-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.kit-head > div { flex: 1; }
.kit-head small { color: #8fe6f2; letter-spacing: .08em; font-size: 11px; font-weight: 700; }
.kit-head h2 { margin: 0; font-size: 20px; color: #fff; }
.kit-close { width: 44px; height: 44px; border-radius: 14px; border: 1px solid rgba(255,255,255,.4); background: rgba(255,255,255,.08); color: #fff; font-size: 16px; cursor: pointer; }
.kit-icon { width: 26px; height: 26px; flex: none; fill: none; stroke: #8fe6f2; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.kit-icon.big { width: 40px; height: 40px; padding: 6px; border-radius: 12px; background: rgba(111,214,232,.14); }
.kit-icon.kind-flora { stroke: #6fd08c; } .kit-icon.kind-fauna { stroke: #e8b06a; } .kit-icon.kind-mineral { stroke: #f2b44a; } .kit-icon.kind-anomaly { stroke: #e07ad6; }
.kit-primary { display: block; width: 100%; min-height: 50px; margin-top: 10px; border-radius: 18px; border: 1px solid rgba(255,255,255,.85); background: linear-gradient(#e4f77e, #c8e34f); color: #172033; font: 700 16px Outfit, system-ui, sans-serif; cursor: pointer; }
.kit-primary:disabled { background: rgba(214,242,106,.18); color: #c8d2d8; border-style: dashed; cursor: not-allowed; }
.kit-button { min-height: 40px; padding: 0 12px; border-radius: 12px; border: 1px solid rgba(111,214,232,.7); background: rgba(111,214,232,.12); color: #e9fbff; font: 600 13px Outfit, system-ui, sans-serif; cursor: pointer; }
.test-rule { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0; }
.test-chip { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: rgba(255,255,255,.92); }
.test-chip svg, .test-slot svg, .test-pick svg { width: 22px; height: 22px; fill: none; stroke: #13232a; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.test-info { color: #b9e9ef; font-size: 12.5px; margin: 4px 0 10px; }
.test-slots { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.test-slot { aspect-ratio: 1; min-height: 44px; border-radius: 12px; border: 1.5px dashed rgba(143,230,242,.7); background: rgba(255,255,255,.06); display: grid; place-items: center; cursor: pointer; }
.test-slot:not(.is-fixed):not(:empty) { background: rgba(255,255,255,.92); border-style: solid; border-color: #6fd6e8; }
.test-slot.is-fixed { background: rgba(214,242,106,.92); border: 1.5px solid #fff; cursor: default; opacity: 1; }
.test-palette { display: flex; gap: 8px; justify-content: center; margin: 12px 0 2px; }
.test-pick { width: 52px; height: 52px; border-radius: 16px; border: 1px solid rgba(255,255,255,.5); background: rgba(255,255,255,.85); display: grid; place-items: center; cursor: pointer; }
.test-pick.is-on { outline: 3px solid #6fd6e8; outline-offset: 2px; background: #fff; }
.test-msg { min-height: 1.3em; margin: 6px 0 0; color: #ffd98a; font-size: 12.5px; }
.case-group h3 { margin: 10px 0 4px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #8fe6f2; }
.case-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: rgba(255,255,255,.06); margin-bottom: 6px; }
.case-mid { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.case-mid small { color: #b9c9d2; font-size: 11.5px; }
.case-pips { display: flex; gap: 3px; }
.case-pips i { width: 12px; height: 12px; border-radius: 4px; border: 1px solid rgba(143,230,242,.6); }
.case-pips i.on { background: #d6f26a; border-color: #fff; }
.case-empty { color: #b9c9d2; }
.bench-uses { display: block; color: #b9e9ef; font-size: 12px; margin-top: 4px; }
body.scan-on .pad-scan { border-color: #3fa9ff; background: rgba(40,110,190,.55); box-shadow: 0 0 18px rgba(63,169,255,.6); }

/* Jump boots: a fixed pad button right of the main button (row 3), clear of the arched small buttons. */
.pad-jump { grid-row: 3; grid-column: 4; align-self: end; border-color: rgba(120,170,255,.9); }
.pad-jump kbd { background: #8fb4ff; min-width: 40px; font-size: 10px; }
.action-pad.has-side .pad-jump { grid-row: 1; grid-column: 6; align-self: start; }
.pad-s3:not([hidden]) ~ .pad-jump, .pad-jump { margin-top: 22px; }

/* Build round: build mode on the paw. Two arched rows of four labelled toes over a Done / Back main button. */
.build-paw { grid-template-columns: repeat(4, 156px); grid-template-rows: 68px 68px auto; row-gap: 8px; bottom: 26px; }
.build-paw .build-toe { min-height: 46px; }
.build-paw .pad-b1 { grid-row: 1; grid-column: 1; align-self: start; margin-top: 18px; }
.build-paw .pad-b2 { grid-row: 1; grid-column: 2; align-self: start; }
.build-paw .pad-b3 { grid-row: 1; grid-column: 3; align-self: start; }
.build-paw .pad-b4 { grid-row: 1; grid-column: 4; align-self: start; margin-top: 18px; }
.build-paw .pad-b5 { grid-row: 2; grid-column: 1; align-self: start; margin-top: 18px; }
.build-paw .pad-b6 { grid-row: 2; grid-column: 2; align-self: start; }
.build-paw .pad-b7 { grid-row: 2; grid-column: 3; align-self: start; }
.build-paw .pad-b8 { grid-row: 2; grid-column: 4; align-self: start; margin-top: 18px; }
.build-paw .pad-main { grid-row: 3; grid-column: 2 / span 2; }
.build-paw .pad-target::before { content: ""; }
.build-paw .pad-btn.is-selected { border-color: #e4f77e; background: rgba(120,150,40,.55); box-shadow: 0 0 0 2px rgba(228,247,126,.6), 0 6px 18px rgba(0,0,0,.28); }
.build-paw .pad-btn[data-kind="folder"] { border-color: rgba(228,247,126,.75); }
.build-paw .pad-btn[data-kind="folder"] kbd { background: #e4f77e; }
.build-paw .pad-btn.is-locked { border-style: dashed; color: #c8d2d8; background: rgba(12,22,34,.5); }
.build-paw .pad-btn.is-locked .pad-target { color: #ffd98a; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.build-paw .pad-btn.is-locked kbd { background: rgba(255,255,255,.4); }
.build-paw .pad-btn.is-locked .pad-label::before { content: "🔒 "; font-size: 11px; }
.build-paw .pad-btn[data-kind="tool"]:disabled { cursor: not-allowed; }
/* Walkthrough: the card and the pad button it points at. */
.walk-card { position: fixed; z-index: 19; right: 16px; top: 96px; width: min(330px, calc(100vw - 24px)); padding: 12px 14px; border-radius: 20px;
  border: 1px solid rgba(228,247,126,.7); background: rgba(12,22,34,.82); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  color: #f4f8fa; font: 500 13.5px/1.35 Outfit, system-ui, sans-serif; box-shadow: 0 14px 36px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.16); }
.walk-card[hidden] { display: none !important; }
.walk-card small { color: #e4f77e; font-weight: 700; letter-spacing: .08em; font-size: 11px; text-transform: uppercase; }
.walk-card h3 { margin: 2px 0 4px; font-size: 17px; color: #fff; }
.walk-card p { margin: 0 0 8px; color: #d8e6ec; }
.walk-dots { display: flex; gap: 4px; margin: 0 0 8px; }
.walk-dots i { flex: 1; height: 5px; border-radius: 3px; background: rgba(255,255,255,.18); }
.walk-dots i.on { background: #e4f77e; } .walk-dots i.now { background: #6fd6e8; }
.walk-row { display: flex; gap: 8px; justify-content: flex-end; }
.pad-btn.walk-hint { box-shadow: 0 0 0 3px rgba(228,247,126,.85), 0 0 22px rgba(228,247,126,.65); animation: walkpulse 1.4s ease-in-out infinite; }
@keyframes walkpulse { 50% { box-shadow: 0 0 0 5px rgba(228,247,126,.35), 0 0 30px rgba(228,247,126,.4); } }
body.intro-on .walk-card, body.in-lab .walk-card { display: none !important; }

/* Round 3: the grid line under a power-related upgrade on the building card. */
.building-grid { margin: 6px 0 0; font-size: 11.5px; line-height: 1.35; color: #9fd8e2; }
.building-grid.is-warn { color: #ffd98a; }
.building-grid.is-warn::before { content: "\26A1 "; }
/* Round 3: an enabled pad button can carry a short note (the Upgrade toe's grid line). */
.pad-btn.has-note .pad-reason:not(:empty) { display: block; flex-basis: 100%; order: 3; color: #9fd8e2; font: 500 10px/1.2 Outfit, system-ui, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }