/* The Galaxy — deep-space counterpart to the paper site. Surface #0a0e1c
   (palette validated against it — see site/generate/galaxy.ts).
   Chrome wears cool moonlight so the UI recedes; only the works and the
   era ramp stay warm. */

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --space: #0a0e1c;
  --ink: #e9e4d8;
  --ink-2: #a9a596;
  --accent: #a8c0ea; /* moonlight — 10.4:1 on --space */
  --panel: rgba(12, 16, 30, 0.62);
  --panel-line: rgba(233, 228, 216, 0.14);
  --serif: "Songti SC", "STSong", "Noto Serif CJK SC", "Iowan Old Style", Palatino, Georgia, serif;
  --sans: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
}

html, body { height: 100%; }
[hidden] { display: none !important; } /* our panels set display:flex/grid — hidden must still win */
body {
  background: var(--space);
  color: var(--ink);
  font-family: var(--sans);
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
  user-select: none;
  -webkit-user-select: none;
}

#space { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
#space.dragging { cursor: grabbing; }
#space.hover { cursor: pointer; }

/* a quiet photographic vignette — the poster edge */
body::after {
  content: '';
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 42%, transparent 58%, rgba(3, 5, 10, 0.5) 100%);
}

/* ------------------------------------------------------------------ HUD -- */

.hud { position: fixed; z-index: 5; }

.hud-top {
  top: 0; left: 0; right: 0;
  padding: calc(10px + var(--sat)) calc(16px + var(--sar)) 10px calc(16px + var(--sal));
  display: flex; align-items: baseline; gap: 12px;
  pointer-events: none;
  background: linear-gradient(rgba(10, 14, 28, 0.8), rgba(10, 14, 28, 0));
}
.hud-top > * { pointer-events: auto; }
.wordmark {
  font-family: var(--serif); font-size: 17px; color: var(--ink);
  text-decoration: none; letter-spacing: 0.01em;
}
.wordmark:hover { color: var(--accent); }
.page-title { font-family: var(--serif); font-style: italic; color: var(--accent); font-size: 15px; }
.hud-links { margin-left: auto; display: flex; gap: 14px; }
.hud-links a { color: var(--ink-2); text-decoration: none; font-size: 12.5px; letter-spacing: 0.04em; text-transform: uppercase; }
.hud-links a:hover { color: var(--ink); }

.era-hud {
  top: calc(46px + var(--sat)); left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; letter-spacing: 0.05em; color: var(--ink-2);
  background: var(--panel); border: 1px solid var(--panel-line); border-radius: 999px;
  padding: 6px 14px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  white-space: nowrap; max-width: 92vw; overflow: hidden; text-overflow: ellipsis;
  transition: opacity 0.5s;
}
.era-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); flex: none; }

/* the menu — wall-label typography, no pills: quiet serif lines, the active
   one marked by a hairline dash and the same italic moonlight as the page
   title. Chrome should feel typeset, not injected. */
.hud-left {
  left: calc(18px + var(--sal)); top: calc(92px + var(--sat));
  display: flex; flex-direction: column; gap: 16px; max-width: min(78vw, 300px);
}
.mode-chips { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.chip {
  position: relative;
  font: 500 15px/1.4 var(--serif); letter-spacing: 0.015em;
  color: var(--ink-2); background: none; border: 0;
  padding: 5px 8px 5px 22px; cursor: pointer; text-align: left;
  text-shadow: 0 1px 10px rgba(6, 9, 16, 0.95), 0 0 26px rgba(6, 9, 16, 0.8);
  transition: color 0.25s;
}
.chip::before {
  content: ''; position: absolute; left: 0; top: calc(50% - 0.5px);
  width: 14px; height: 1px; background: currentColor;
  opacity: 0; transition: opacity 0.25s;
}
.chip:hover { color: var(--ink); }
.chip:hover::before { opacity: 0.35; }
.chip[aria-selected="true"] { color: var(--accent); font-style: italic; }
.chip[aria-selected="true"]::before { opacity: 0.9; }

.legend-toggle {
  align-self: flex-start; position: relative;
  font: 10.5px/1 var(--sans); letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-2); background: none; border: 0;
  padding: 6px 8px 6px 22px; cursor: pointer;
  text-shadow: 0 1px 10px rgba(6, 9, 16, 0.95);
  transition: color 0.25s;
}
.legend-toggle::before {
  content: ''; position: absolute; left: 0; top: calc(50% - 0.5px);
  width: 14px; height: 1px; background: currentColor;
  opacity: 0; transition: opacity 0.25s;
}
.legend-toggle:hover { color: var(--ink); }
.legend-toggle:hover::before { opacity: 0.35; }
.legend-toggle[aria-expanded="true"] { color: var(--ink); }
.legend-toggle[aria-expanded="true"]::before { opacity: 0.9; }

.legend {
  list-style: none; margin-left: 22px;
  background: rgba(10, 14, 26, 0.5); border: 1px solid rgba(233, 228, 216, 0.1);
  border-radius: 10px;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  padding: 9px 10px; max-height: 44vh; overflow: auto;
}
.legend li { display: block; }
.legend button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: none; border: 0; color: var(--ink-2);
  font: 12px/1.35 var(--sans); letter-spacing: 0.01em; text-align: left;
  padding: 5px 6px; border-radius: 6px; cursor: pointer;
  transition: color 0.2s;
}
.legend button:hover { color: var(--ink); }
.legend button[aria-pressed="true"] { color: var(--accent); }
.legend .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; box-shadow: 0 0 6px rgba(0, 0, 0, 0.4); }
.legend .count { margin-left: auto; padding-left: 12px; color: var(--ink-2); opacity: 0.6; font-size: 10.5px; font-variant-numeric: tabular-nums; }

.chip:focus-visible, .legend-toggle:focus-visible, .legend button:focus-visible,
.voyage-btn:focus-visible, .splash-enter:focus-visible {
  outline: 1px solid var(--accent); outline-offset: 3px; border-radius: 2px;
}

/* bottom: voyage + time scrubber */
.hud-bottom {
  left: 0; right: 0; bottom: 0;
  padding: 12px calc(16px + var(--sar)) calc(14px + var(--sab)) calc(16px + var(--sal));
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(rgba(10, 14, 28, 0), rgba(10, 14, 28, 0.85));
}
.voyage-btn {
  flex: none;
  font: italic 500 13.5px/1 var(--serif); letter-spacing: 0.03em;
  color: var(--ink-2); background: rgba(10, 14, 26, 0.35); border: 1px solid var(--panel-line);
  border-radius: 999px; padding: 10px 18px; cursor: pointer;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: color 0.25s, border-color 0.25s;
}
.voyage-btn:hover { color: var(--ink); border-color: rgba(233, 228, 216, 0.3); }
.voyage-btn[aria-pressed="true"] { color: var(--accent); border-color: rgba(168, 192, 234, 0.55); }

.scrubber { position: relative; flex: 1; height: 34px; cursor: pointer; touch-action: none; }
.scrub-track {
  position: absolute; left: 0; right: 0; top: 50%; height: 6px; transform: translateY(-50%);
  border-radius: 3px; overflow: hidden; display: flex;
  border: 1px solid rgba(233, 228, 216, 0.18);
}
.scrub-track span { height: 100%; }
.scrub-thumb {
  position: absolute; top: 50%; width: 16px; height: 16px;
  transform: translate(-50%, -50%);
  border-radius: 50%; background: var(--ink); border: 2px solid var(--space);
  box-shadow: 0 0 8px rgba(168, 192, 234, 0.75);
  pointer-events: none;
}
.scrub-label {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
  font-size: 11.5px; letter-spacing: 0.04em; white-space: nowrap;
  color: var(--ink); background: var(--panel); border: 1px solid var(--panel-line);
  padding: 4px 9px; border-radius: 999px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}

/* ----------------------------------------------------------------- card -- */

.card {
  position: fixed; z-index: 8;
  right: calc(12px + var(--sar)); top: calc(64px + var(--sat)); bottom: calc(70px + var(--sab));
  width: min(400px, calc(100vw - 24px));
  background: rgba(13, 17, 32, 0.9);
  border: 1px solid var(--panel-line); border-radius: 16px;
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  display: flex; flex-direction: column;
  animation: card-in 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes card-in { from { opacity: 0; transform: translateY(14px); } }
.card-scroll { overflow-y: auto; overscroll-behavior: contain; flex: 1; user-select: text; -webkit-user-select: text; }
.card-close {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(10, 14, 28, 0.72); color: var(--ink); border: 1px solid var(--panel-line);
  font-size: 14px; cursor: pointer;
}
.card-fig { background: #060910; border-radius: 16px 16px 0 0; overflow: hidden; position: relative; }
.card-fig img { width: 100%; max-height: 42vh; object-fit: contain; display: block; opacity: 0; transition: opacity 0.4s; }
.card-fig img.on { opacity: 1; }
.card-fig figcaption {
  position: absolute; left: 10px; top: 10px;
  font-size: 10.5px; letter-spacing: 0.14em; color: var(--ink-2);
  background: rgba(10, 14, 28, 0.72); border: 1px solid var(--panel-line);
  padding: 3px 8px; border-radius: 999px;
}
.card-body { padding: 16px 18px 18px; display: grid; gap: 9px; }
.card-era { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }
.card-title { font-family: var(--serif); font-size: 23px; line-height: 1.18; font-weight: 500; }
.card-artist { font-size: 13.5px; color: var(--ink); }
.card-meta, .card-museum { font-size: 12.5px; color: var(--ink-2); }
.card-desc { font-size: 13.5px; line-height: 1.55; color: var(--ink); }
.card-quote {
  border-left: 2px solid var(--accent);
  padding: 2px 0 2px 12px; font-family: var(--serif); font-style: italic;
  font-size: 13.5px; line-height: 1.5; color: var(--ink-2);
}
.card-quote cite { display: block; margin-top: 6px; font-style: normal; font-size: 11.5px; }
.card-quote a { color: var(--accent); text-decoration: none; }
.card-quote a:hover { text-decoration: underline; }
.card-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.card-chips span {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; letter-spacing: 0.03em; color: var(--ink-2);
  border: 1px solid var(--panel-line); border-radius: 999px; padding: 4px 9px;
}
.card-chips i { width: 8px; height: 8px; border-radius: 50%; }
.card-links { display: flex; gap: 14px; align-items: center; margin-top: 2px; }
.card-link { font-size: 12.5px; color: var(--accent); text-decoration: none; cursor: pointer; }
.card-link:hover { text-decoration: underline; }
.card-link.as-btn { background: none; border: 0; font-family: var(--sans); padding: 0; }
.card-nav {
  display: flex; gap: 8px; padding: 10px 14px calc(10px);
  border-top: 1px solid var(--panel-line);
}
.card-nav button {
  flex: 1; font-size: 15px; padding: 8px 0;
  background: rgba(233, 228, 216, 0.06); color: var(--ink);
  border: 1px solid var(--panel-line); border-radius: 10px; cursor: pointer;
}
.card-nav button:hover { background: rgba(233, 228, 216, 0.12); }

@media (max-width: 720px) {
  .card {
    left: 0; right: 0; bottom: 0; top: auto;
    width: auto; max-height: 64vh;
    border-radius: 18px 18px 0 0; border-bottom: 0;
    padding-bottom: var(--sab);
    animation: sheet-in 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  @keyframes sheet-in { from { transform: translateY(40%); opacity: 0.4; } }
  .card-fig img { max-height: 30vh; }
  .hud-links { display: none; }
}

/* --------------------------------------------------------------- splash -- */

.splash {
  position: fixed; inset: 0; z-index: 20;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; text-align: center; padding: 24px;
  background: radial-gradient(ellipse at center, rgba(10, 14, 28, 0.72), rgba(6, 9, 16, 0.94));
  transition: opacity 0.9s;
}
.splash.away { opacity: 0; pointer-events: none; }
.splash-kicker { font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-2); }
.splash h1 { font-family: var(--serif); font-size: clamp(40px, 9vw, 72px); font-weight: 500; color: var(--ink); }
.splash-line { font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--accent); }
.splash-hint { font-size: 12.5px; color: var(--ink-2); margin-top: 8px; }
.splash-enter {
  margin-top: 18px; font: 500 12.5px/1 var(--sans); letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent); background: none; border: 1px solid rgba(168, 192, 234, 0.5); border-radius: 999px;
  padding: 13px 38px 13px calc(38px + 0.22em); cursor: pointer;
  transition: background 0.3s, color 0.3s;
}
.splash-enter:hover { background: rgba(168, 192, 234, 0.14); color: #cbdaf4; }

/* ----------------------------------------------------------- toast/fail -- */

.toast {
  position: fixed; z-index: 30; left: 50%; bottom: calc(78px + var(--sab));
  transform: translateX(-50%);
  max-width: min(92vw, 480px);
  font-size: 12.5px; line-height: 1.45; color: var(--ink);
  background: var(--panel); border: 1px solid var(--panel-line); border-radius: 12px;
  padding: 10px 14px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.fail {
  position: fixed; inset: 0; z-index: 40;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; text-align: center; padding: 24px; background: var(--space);
}
.fail h1 { font-family: var(--serif); font-weight: 500; }
.fail a { color: var(--accent); }
.fail[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .card, .splash, .card-fig img { animation: none; transition: none; }
}