/* ── Atlas ──────────────────────────────────────────── */
.atlas-intro {
  margin-bottom: 10px;
}
.atlas-intro h2 { font-size: 20px; margin-bottom: 6px; }
.atlas-intro p { color: var(--text-secondary); font-size: 13px; }
/* DCOSMOS-GALAXYMAP: intro header row carries the Map | List toggle */
.atlas-intro-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.stat-box { position: relative; cursor: pointer; }
.stat-box .stat-icon { color: var(--text-secondary); display: inline-flex; }
/* The tip opens below its chip: the chip row sits flush under the fixed
   top bar, and a tip opening upward slides beneath that bar. */
.stat-tip {
  position: absolute;
  left: 50%;
  top: calc(100% + 6px);
  transform: translateX(-50%);
  white-space: nowrap;
  background: var(--bg-panel, #0d1526);
  border: 1px solid var(--accent-dim, rgba(245, 158, 11, 0.45));
  border-radius: 6px;
  padding: 4px 9px;
  font-size: 11px;
  color: var(--text-primary);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  z-index: 20;
}
.stat-tip.show { opacity: 1; }
.stat-box .stat-icon svg { display: block; width: 17px; height: 17px; }
.star-dots {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-top: 2px;
}
/* Atlas map-view: view-body becomes a flex column so the map fills all
   remaining space below the intro row. */
#atlas.map-view .view-body {
  display: flex;
  flex-direction: column;
  padding: 0;
}
/* In map mode the heading and blurb go away so the map gets the space, but
   the control row STAYS -- it carries the Map | List toggle, the only way
   back to the list view. */
#atlas.map-view .atlas-intro {
  margin-bottom: 0;
  padding: 10px 14px;
  flex-shrink: 0;
}
#atlas.map-view .atlas-intro h2,
#atlas.map-view .atlas-intro p {
  display: none;
}
.atlas-intro-line {
  font-family: var(--font-data);
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.atlas-map {
  position: relative;
  width: 100%;
  flex: 1;
  min-height: 0;
}
#galaxyCanvas {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 0;
  background: #000;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}
#galaxyCanvas:active { cursor: grabbing; }
/* DCOSMOS-NAMING: the galaxy rename control -- small and quiet, sitting
   right after the canvas-drawn galaxy name instead of floating above it.
   js/atlas-naming.js toggles it and sets its exact left/top every frame
   from the title's own measured position (galaxymap-draw-background.js);
   translateY(-50%) here centers the button's height on the top value it
   is given, the same way the title is vertically centered on that line.
   left/top of 0 are just a harmless default before the first measurement
   lands -- hidden keeps it off-screen until then anyway. */
.btn-galaxy-rename {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(-50%);
  z-index: 5;
  background: rgba(12, 15, 26, 0.5);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1;
  padding: 6px 8px;
  pointer-events: auto;
  cursor: pointer;
}
.btn-galaxy-rename[hidden] { display: none; }
/* SC-MAPVOYAGE (owner 2026-09-04): the floating name label + voyage button that
   ride over a hovered or tapped point of light (js/galaxymap-voyage-overlay.js).
   Positioned in canvas CSS pixels: left/top are set to the point's own screen
   spot each frame, and translateX(-50%) centres the tag under it. The tag itself
   passes pointer events through to the map; only the button catches them, so a
   drag anywhere but the button still pans the disc. The name matches the map's
   own labels -- the data typeface, uppercase, the same slate the neighborhood
   and system names draw in (var(--text-secondary) == the canvas rgb(148,163,184)). */
.gmap-voy-tag {
  position: absolute;
  left: 0;
  top: 0;
  transform: translateX(-50%);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  white-space: nowrap;
}
.gmap-voy-tag[hidden] { display: none !important; }
.gmap-voy-name {
  font-family: var(--font-data);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95), 0 0 2px rgba(0, 0, 0, 0.9);
  pointer-events: none;
}
/* The voyage control: a 44px round tap target (owner's generosity standard),
   the placeholder arrow-to-star icon in the accent colour on a quiet disc. */
.gmap-voy-btn {
  pointer-events: auto;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--accent-dim);
  border-radius: 999px;
  background: rgba(12, 15, 26, 0.62);
  color: var(--accent);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
}
.gmap-voy-btn[hidden] { display: none !important; }
.gmap-voy-btn:hover { background: rgba(20, 26, 44, 0.85); border-color: var(--accent); }
.gmap-voy-btn:active { transform: scale(0.94); }
.gmap-voy-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gmap-voy-btn svg { width: 22px; height: 22px; display: block; }
/* hidden must win over the display:flex/grid/block these carry */
.atlas-map[hidden],
.atlas-stats[hidden],
.atlas-search[hidden],
.atlas-grid[hidden] { display: none !important; }
/* DCOSMOS-ATLASSEARCH: search/filter bar above the atlas card grid */
.atlas-search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  margin-bottom: 12px;
}
.atlas-search-box {
  position: relative;
  flex: 1;
  min-width: 80px;
  max-width: 480px;
  display: flex;
}
.atlas-search input {
  width: 100%;
  padding: 9px 38px 9px 14px; /* right side clears the clear button */
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 13px;
  font-family: var(--font-body);
  transition: border-color 0.2s;
}
.atlas-search input::placeholder {
  color: var(--text-dim);
}
.atlas-search input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.1);
}
/* clear button inside the search box; js/atlas-view.js unhides it while
   the box holds text, and a tap empties the box and refocuses it */
.atlas-search-clear {
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.atlas-search-clear:hover {
  border-color: var(--accent);
  color: var(--accent);
}
/* DCOSMOS-FAVSTAR: favorites filter toggle in the atlas search bar. The
   button is a flex row so the large ribbon glyph and the "Favorites"
   label stay aligned. */
.atlas-fav-filter {
  display: inline-flex;
  align-items: center;
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-dim);
  font-family: var(--font-data);
  font-size: 11px;
  letter-spacing: 1px;
  padding: 7px 14px;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
}
.atlas-fav-filter:hover {
  color: var(--text-secondary);
  border-color: var(--accent);
}
.atlas-fav-filter.active {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(245, 158, 11, 0.08);
}
/* the ribbon glyph inside the filter button: an outline in the button's
   own color while the filter is off, filled while the filter is on (the
   .active rule above carries color: var(--accent), so outline and fill
   both read the accent). */
.fav-filter-star {
  display: inline-block; width: 40px; height: 40px; margin-right: 6px;
  overflow: visible;
}
.atlas-fav-filter.active .fav-filter-star path { fill: currentColor; }
/* the favorite ribbon badge on the top right of a favorited card, always
   filled in the accent color; entry-info carries matching right padding
   so the badge never sits over text. */
.entry-fav-star { position: absolute; top: 5px; right: 10px; color: var(--accent); }
.entry-fav-star svg { display: block; width: 48px; height: 48px; overflow: visible; }
.entry-fav-star svg path { fill: currentColor; }
.atlas-no-match {
  text-align: center;
  padding: 48px 24px;
  color: var(--text-dim);
  font-size: 14px;
}
.atlas-stats {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.stat-box {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 12px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.stat-box .stat-value {
  font-size: 17px;
  font-weight: 700;
  color: var(--accent);
  text-shadow: 0 0 12px rgba(245, 158, 11, 0.2);
}
.stat-box .stat-label {
  font-size: 10px;
  font-family: var(--font-data);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-dim);
  margin-top: 4px;
}
.atlas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
}
.atlas-entry {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 9px 12px;
  cursor: pointer;
  transition: all 0.2s;
}
.atlas-entry:hover {
  border-color: var(--accent-dim);
  background: var(--bg-card-hover);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}
.atlas-entry .entry-info {
  flex: 1;
  min-width: 0;
  padding-right: 48px;
}
.atlas-entry .entry-age {
  position: absolute;
  bottom: 5px;
  right: 10px;
  font-family: var(--font-data);
  font-size: 10px;
  color: var(--text-dim);
}
.atlas-entry .entry-name {
  font-size: 14px;
  font-weight: 600;
}
/* SC-CREW-PLACES: the name line holds the name and, right after it, the "New"
   marker for an entry the player has not looked at in the list (js/atlas-seen-
   store.js). flex-wrap drops the marker below a long name on a narrow screen
   instead of overflowing the row. */
.atlas-entry .entry-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.atlas-entry .entry-new {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  font-family: var(--font-data);
  font-size: 9px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 1px 7px;
  border-radius: 8px;
  color: var(--accent);
  border: 1px solid var(--accent-dim);
  background: rgba(245, 158, 11, 0.1);
}
.atlas-entry .entry-new-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 5px rgba(245, 158, 11, 0.7);
}
/* SC-CREW-PLACES: a crew-revealed place the player has not visited, shown as a
   list row above the catalogued systems. A faint accent wash and the map note
   set it apart from an ordinary entry, and the corner voyage icon (the same one
   the galaxy map and the notebook use, js/voyage-icon.js) says a tap departs
   to it. The box is a full 44px so the corner is a real finger target even
   though the whole row is clickable. */
.atlas-entry-place { border-color: var(--accent-dim); background: linear-gradient(180deg, rgba(245, 158, 11, 0.06), var(--bg-card)); }
.atlas-entry-place .entry-tag-place { background: rgba(245, 158, 11, 0.14); }
.atlas-entry-place .entry-place-go {
  position: absolute;
  bottom: -3px;
  right: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}
.atlas-entry-place .entry-place-go svg { width: 22px; height: 22px; display: block; }
.atlas-entry .entry-id {
  font-family: var(--font-data);
  font-size: 10px;
  color: var(--text-dim);
  flex-shrink: 0;
}
.atlas-entry .entry-source {
  font-size: 11px;
  color: var(--text-secondary);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.atlas-entry .entry-summary {
  font-family: var(--font-data);
  font-size: 10px;
  color: var(--text-dim);
  line-height: 1.5;
}
/* DCOSMOS-SPECBADGE: star category dots on atlas cards. Moved here from
   css/cosmos-fx.css 2026-08-22 (that file's rule was atlas-list-only dead
   weight in the wrong stylesheet) and renamed spec-dot -> atlas-star-dot so
   this row's own class lives beside the .planet-dots row it must match the
   rhythm of. Size hierarchy (owner ruling 2026-08-22): 14px, the largest of
   the three dot classes on this row -- stars read as the big one. The
   .star-dots rule near the top of this file gives the row its 3px gap,
   same as .planet-dots, but the star glyph itself needs an extra pull --
   see the negative-margin rule right below this one. */
.atlas-star-dot {
  display: inline-block;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
/* Owner complaint 2026-08-22 (second pass): the star glyph's own point
   shape leaves a wide waist of empty space next to the box edges, so the
   row's 3px box gap still read as a wide gap between stars even after the
   first fix. Only between two star icons, pulling each one 4px closer than
   the row's own 3px gap, so consecutive boxes overlap by 1px -- with
   atlas-view.js drawing the star past its box edge (size:22) the point
   tips now bridge that overlap and read snug, the way the round planet
   dots already do without help. Never applies before the first star in the
   row, so the row's own left edge does not shift. */
.atlas-star-dot + .atlas-star-dot {
  margin-left: -4px;
}
/* DCOSMOS-PLANETCOUNT: planet-type colored dots on atlas cards */
.planet-dots {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-top: 2px;
}
.pdot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
/* Owner 2026-09-03: a crisp 2px ring like the info pane hab-ring
   (cosmos-sheet.css), not a soft glow; a 1px dark gap keeps it legible
   against a green-tinted dot. */
.pdot-hab {
  box-shadow: 0 0 0 1px #0b1220, 0 0 0 3px #34d399;
}
/* DCOSMOS-ENRICH: deepened / re-designated markers on atlas cards */
.atlas-entry .entry-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 5px;
}
.atlas-entry .entry-tag {
  font-family: var(--font-data);
  font-size: 9px;
  padding: 1px 7px;
  border: 1px solid var(--accent-dim);
  border-radius: 8px;
  color: var(--accent);
  white-space: nowrap;
}
/* DCOSMOS-REVISIT: survey percentage badge on atlas cards */
.entry-survey-pct {
  font-family: var(--font-data);
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-dim);
  flex-shrink: 0;
}
.entry-survey-pct.fully-surveyed {
  background: rgba(245, 158, 11, 0.15);
  color: var(--accent);
}
.atlas-empty {
  text-align: center;
  padding: 64px 24px;
  color: var(--text-dim);
}
.atlas-empty p { margin-bottom: 16px; font-size: 14px; }
/* DCOSMOS-MAPWELCOME: centered welcome card over an empty galaxy map. The
   outer layer spans the map but lets pointer events through; only the card
   itself catches taps. */
.atlas-map-welcome {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  pointer-events: none;
}
.atlas-map-welcome[hidden] { display: none !important; }
.atlas-map-welcome-card {
  pointer-events: auto;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 26px 22px;
  max-width: 340px;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
}
.atlas-map-welcome-card p {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 16px;
}
/* DCOSMOS-GALAXYMAP mobile: in map mode the atlas body becomes a column
   filling the viewport below the header (same recipe as the reveal view)
   and the map stage takes all the space left under the intro row.
   Short screens count as mobile so landscape phones stay full-bleed. */
@media (max-width: 720px), (max-height: 500px) {
  #atlas.map-view #galaxyCanvas { border-radius: 0; }
}
/* ── Scrollbar ──────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-light); }
/* ── Responsive ─────────────────────────────────────── */
@media (max-width: 768px) {
  .landing-title { font-size: 28px; letter-spacing: 3px; }
  .landing-subtitle { font-size: 14px; }
  .landing-card { width: 100%; max-width: 300px; }
  /* padding-top drops to 10px here, atlas button stays 84px until the 480px
     breakpoint in cosmos-controls.css -- 10 + 84/2 = 52px. Right padding 104px
     keeps the desktop header's gear/sound-edit tool lane (cosmos-base.css). */
  header { padding: 10px 104px 10px 12px; --hdr-line-y: 52px; }
  header nav { gap: 4px; }
  header nav button { padding: 5px 10px; font-size: 11px; }
  /* Top clearance recipe from cosmos-base.css's .view-body, kept here. */
  .view-body { padding: calc(var(--nav-hang, 42px) + 10px) 12px 16px; }
  .atlas-grid { grid-template-columns: 1fr; }
}
/* DCOSMOS-ATLASLINK: shown only if the page was opened with a #share= link
   already in the URL (the merge ceremony, js/multisurv.js, reads it). There
   is no in-game way to create that link -- see DESIGN_DECISIONS.md. */
.atlas-shared-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: rgba(245,158,11,0.12); border: 1px solid rgba(245,158,11,0.3);
  border-radius: 6px; padding: 8px 14px; margin-bottom: 10px;
  font: 12px var(--font-data); color: var(--text-dim, #94a3b8);
}
.btn-exit-shared { font-size: 11px; padding: 3px 10px; }
.btn-merge-atlas {
  font-size: 11px; padding: 3px 12px; border-radius: 4px; cursor: pointer;
  background: var(--accent, #f59e0b); color: #000; border: 1px solid var(--accent, #f59e0b);
  font-family: var(--font-data); letter-spacing: 0.5px;
  transition: opacity 0.15s;
}
.btn-merge-atlas:hover { opacity: 0.85; }
/* DCOSMOS-MULTISURV: merge ceremony overlay */
.merge-overlay {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(0,0,0,0.8); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
}
.merge-overlay[hidden] { display: none !important; }
.merge-card {
  background: var(--bg-card, #1e293b); border: 1px solid var(--border, #334155);
  border-radius: 10px; padding: 32px 28px; max-width: 400px; width: 90%;
  text-align: center;
}
.merge-title {
  font-size: 18px; font-weight: 700; margin-bottom: 18px;
  color: var(--accent, #f59e0b); letter-spacing: 1px;
}
.merge-names {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-bottom: 14px; flex-wrap: wrap;
}
.merge-name {
  font-size: 15px; font-weight: 600; color: var(--text-primary, #e2e8f0);
}
.merge-amp {
  font-size: 18px; color: var(--accent, #f59e0b);
}
.merge-sub {
  color: var(--text-secondary, #94a3b8); font-size: 13px; margin-bottom: 14px;
}
.merge-hint {
  color: var(--text-dim, #64748b); font-size: 11px; margin-top: 8px;
}
.merge-list {
  max-height: 200px; overflow-y: auto; margin-bottom: 12px;
  text-align: left;
}
.merge-sys {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.05);
}
.merge-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.merge-sys-name {
  font-size: 13px; color: var(--text-primary, #e2e8f0); flex: 1;
}
.merge-sys-id {
  font: 10px var(--font-data); color: var(--text-dim, #64748b);
}
.merge-actions {
  display: flex; gap: 10px; justify-content: center; margin-top: 18px;
}
.merge-done { padding: 20px 0; }
.merge-done-icon { font-size: 36px; margin-bottom: 10px; }
.merge-done p { color: var(--text-secondary, #94a3b8); font-size: 14px; }