/* The split world (§9). Dark HUD is the base; parchment is the Journal's surface.
   Mobile-first, no hover states (§9.4). */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--void);
  color: var(--text);
  font-family: var(--font-hud);
  -webkit-font-smoothing: antialiased;
}

/* ── The journey artwork slot ────────────────────────────────────
   Fixed painterly backdrop the HUD floats over. Ships a placeholder
   atmosphere (two aurora blobs + vignette) until Asi's pick lands. */
.journey-art {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--void);
  filter: blur(var(--art-blur)) brightness(var(--art-brightness));
}
/* Asi's pick (#23): Bierstadt, "Among the Sierra Nevada, California" (1868),
   Smithsonian American Art Museum, CC0 — SAAM-1977.107.1 */
.journey-art.has-image {
  background-image: url('/art/journey.jpg');
  background-size: cover;
  background-position: center;
}
.journey-art.has-image::before,
.journey-art.has-image::after { content: none; }
/* placeholder atmosphere — pure CSS, no file (kept as the no-image fallback) */
.journey-art::before,
.journey-art::after {
  content: '';
  position: absolute;
  width: 90vmax;
  height: 90vmax;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .06;
}
.journey-art::before { top: -30vmax; left: -20vmax; background: var(--focus); }
.journey-art::after { bottom: -30vmax; right: -20vmax; background: var(--meter-effort); }
/* contrast scrim over the art (§9.1) */
.journey-scrim {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(0, 0, 0, .65));
  pointer-events: none;
}

/* ── HUD panels — the menu-over-world glass (§9.1) ──────────────── */
/* every glass surface backdrop-blurs the same way — declared once */
.panel, .bottom-nav, .toast {
  -webkit-backdrop-filter: blur(var(--hud-blur));
  backdrop-filter: blur(var(--hud-blur));
}
.panel {
  background: var(--hud-glass);
  border-top: 1px solid var(--line-dim);
  border-bottom: 1px solid var(--line-dim);
  padding: 1.25rem 1.15rem;
}

/* ── The signature fading rule (§9.2) ───────────────────────────── */
.rule {
  height: 1px;
  border: 0;
  margin: 1.1rem 0;
  background: linear-gradient(90deg, transparent, var(--line) 22%, var(--line) 78%, transparent);
}
.rule--diamond { position: relative; }
.rule--diamond::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  transform: translate(-50%, -50%) rotate(45deg);
  border: 1px solid var(--line);
  background: var(--void);
}

/* ── Type roles ─────────────────────────────────────────────────── */
.wordmark, .quest-title {
  font-family: var(--font-display);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-bright);
  font-weight: 700;
}
.hud-label {
  font-family: var(--font-hud);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-weight: 500;
  color: var(--text);
}

/* ── Buttons ────────────────────────────────────────────────────── */
.btn {
  font-family: var(--font-hud);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .82rem;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--line-dim);
  padding: .6rem 1.1rem;
  border-radius: 2px;
  cursor: pointer;
}
.btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.btn:active { color: var(--text-bright); border-color: var(--line); }

/* ── Bottom-nav skeleton ────────────────────────────────────────── */
.bottom-nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display: flex;
  justify-content: space-around;
  background: var(--panel);
  border-top: 1px solid var(--line-dim);
  padding: .4rem 0 max(.4rem, env(safe-area-inset-bottom));
}
.bottom-nav a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
  padding: .35rem 0;
  text-decoration: none;
  color: var(--text-dim);
  font-family: var(--font-hud);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.bottom-nav a[aria-current='page'] { color: var(--text-bright); }
.bottom-nav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; }

/* ── Parchment world (§9.1) ─────────────────────────────────────── */
.parchment {
  color: var(--ink);
  font-family: var(--font-prose);
  background:
    radial-gradient(ellipse at center, var(--parchment), var(--parchment-mid) 75%, var(--parchment-edge));
  box-shadow: inset 0 0 40px rgba(90, 74, 50, .25);
  padding: 1.6rem 1.4rem;
  border-radius: 3px;
}
.parchment h1, .parchment h2, .parchment h3 {
  font-family: var(--font-header);
  font-weight: 400;
  letter-spacing: .02em;
  margin: 0 0 .5rem;
}
.parchment p { line-height: 1.55; font-size: 1.06rem; }
/* seal-red Fell drop cap on every parchment prose block (§9.1) */
.parchment .prose > p:first-of-type::first-letter {
  font-family: var(--font-header);
  color: var(--seal-red);
  float: left;
  font-size: 3.4rem;
  line-height: .8;
  padding: .1rem .12em 0 0;
}

/* ── Ceremonial letterboxed banner (§9.3) ───────────────────────── */
.banner {
  position: fixed;
  left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  z-index: 100;
  background: var(--void);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 1.6rem 1rem;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  /* fade duration is set inline by the queue so in/out differ (§9.3) */
}
.banner.is-visible { opacity: 1; }
.banner__text {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .3em;
  font-size: clamp(1.1rem, 5vw, 1.9rem);
  color: var(--text-bright);
}

/* ── Toast (transient, corner) ──────────────────────────────────── */
.toast-host {
  position: fixed;
  left: 50%;
  bottom: 5.5rem;
  transform: translateX(-50%);
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  align-items: center;
  pointer-events: none;
}
.toast {
  background: var(--panel);
  border: 1px solid var(--line-dim);
  color: var(--text);
  font-family: var(--font-hud);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .74rem;
  padding: .6rem 1rem;
  border-radius: 2px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .3s ease-out, transform .3s ease-out;
}
.toast.is-visible { opacity: 1; transform: translateY(0); }

/* ── The Companion home (§6.1) ──────────────────────────────────── */
.home { max-width: 640px; margin: 0 auto; padding: 1.4rem 1rem 6rem; }
.home .panel { margin-bottom: 1rem; border-radius: 3px; }
.home .small { font-size: .68rem; }
.home .muted { color: var(--text-dim); }
.home .ok { color: var(--meter-progress); }
.home .danger { color: var(--meter-effort); }

.home-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .8rem; }
.home-head__label { margin: 0; font-size: .68rem; color: var(--text-dim); }
.home-head__profile { background: transparent; border: 1px solid var(--line-dim); color: var(--text);
  border-radius: 2px; padding: .3rem .55rem; font-size: 1rem; cursor: pointer; }

.row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .6rem; }
.quest-desc { font-family: var(--font-prose); font-size: 1.02rem; line-height: 1.5; color: var(--text); margin: 0 0 .6rem; }
.quest-desc a { color: var(--focus); }

/* the compass route strip — a fading line, a fill, diamonds riding toward the destination */
.route { position: relative; height: 2px; margin: 1.2rem .4rem 1.4rem;
  background: linear-gradient(90deg, transparent, var(--line-dim) 10%, var(--line-dim) 90%, transparent); }
.route__fill { position: absolute; left: 0; top: 0; height: 100%; background: var(--meter-progress); opacity: .8; }
.route__diamond, .route__dest { position: absolute; top: 50%; width: 9px; height: 9px;
  transform: translate(-50%, -50%) rotate(45deg); }
.route__diamond { background: var(--text-bright); border: 1px solid var(--void); }
.route__dest { right: 0; left: auto; transform: translate(50%, -50%) rotate(45deg);
  width: 11px; height: 11px; background: transparent; border: 1px solid var(--gold); }
.goal-head { display: flex; justify-content: space-between; gap: .6rem; width: 100%;
  background: transparent; border: 0; color: var(--text); cursor: pointer; text-align: left; padding: 0; }

/* deeds */
.deed { padding: .7rem 0; border-top: 1px solid var(--line-dim); }
.deed:first-of-type { border-top: 0; }
.deed-title { display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap; }
.flavor { font-family: var(--font-hud); text-transform: uppercase; letter-spacing: .14em;
  font-size: .58rem; color: var(--gold); border: 1px solid var(--line-dim); border-radius: 2px; padding: .05rem .3rem; }
.faces { display: flex; gap: .4rem; margin: .5rem 0; flex-wrap: wrap; }
.deed-face { width: 2.4rem; height: 2.4rem; border-radius: 50%; object-fit: cover; background: #222;
  display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-hud);
  font-size: .8rem; color: var(--text); border: 1px solid var(--line-dim); }
.deed-face.sm { width: 1.9rem; height: 1.9rem; font-size: .66rem; cursor: pointer; }
.deed-face.done { border-color: var(--meter-progress); color: var(--meter-progress); }
.nudge:disabled { opacity: .5; cursor: default; }
.add { margin-top: .8rem; }

.contribs { display: flex; flex-direction: column; gap: .4rem; margin: .5rem 0; }
.contrib { display: flex; align-items: center; gap: .5rem; }

/* inline forms — plain controls (§6.6) */
.field { width: 100%; padding: .55rem; margin-top: .4rem; font-size: 1rem; font-family: var(--font-hud);
  background: rgba(20,20,20,.7); border: 1px solid var(--line-dim); border-radius: 3px; color: var(--text); }
.detail, .note { margin-top: .6rem; }
.note-text { font-family: var(--font-prose); font-size: .98rem; line-height: 1.45; color: var(--text);
  margin: .4rem 0 0; white-space: pre-wrap; }
.note-edit { min-height: 3.4rem; resize: vertical; }
.err { color: #e88; min-height: 1em; margin-top: .3rem; }
.journal-link { text-decoration: none; display: inline-block; }
.sidebox { margin-right: .3rem; }

/* ── The Journal tab (§6.2) — a parchment surface inside the home column ─────── */
.journal { margin-top: .4rem; }
.journal-kicker { font-family: var(--font-hud); text-transform: uppercase; letter-spacing: .2em;
  font-size: .66rem; color: var(--ink-faded); margin: 0 0 .2rem; }
.journal h1 { font-family: var(--font-header); color: var(--ink); font-size: 2rem; }
.tale { padding: 1.1rem 0; border-top: 1px solid rgba(90, 74, 50, .3); }
.tale:first-of-type { border-top: 0; }
.tale__title { font-family: var(--font-header); color: var(--ink); font-size: 1.3rem; margin: 0 0 .2rem; }
.tale__mark { color: var(--seal-red); }
.tale__date, .tale__stats { font-family: var(--font-hud); text-transform: uppercase;
  letter-spacing: .12em; font-size: .64rem; color: var(--ink-faded); }
.tale__date { margin: 0 0 .5rem; }
.tale__stats { margin: .5rem 0 0; }
.journal .prose p { color: var(--ink); margin: 0; }
/* failed quests struck through (§6.2) */
.tale--failed .tale__title, .tale--failed .prose { text-decoration: line-through; opacity: .65; }
.tale__reopen { margin-top: .8rem; color: var(--seal-red); border-color: var(--seal-red-soft); }
.tale__reopen:active { color: var(--seal-red); border-color: var(--seal-red); }

/* ── The Constellation tab (§6.3) — the star map over the dark HUD ───────────── */
.constellation { padding-top: .2rem; }
.star-hero { text-align: center; padding: 1.2rem 0 .8rem; }
.star-level { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .2em;
  color: var(--gold); font-size: 1.8rem; margin: .25rem 0 .1rem; }
.constel { margin-bottom: 1rem; border-radius: 3px; }
.constel__name { font-family: var(--font-display); letter-spacing: .16em; color: var(--text-bright); margin: 0; }
.track { padding: .7rem 0; border-top: 1px solid var(--line-dim); }
.track:first-of-type { border-top: 0; }
.track__head { display: flex; justify-content: space-between; gap: .6rem; align-items: baseline; }
.ladder { display: flex; gap: .5rem; margin: .45rem 0 .3rem; }
.star { font-size: 1.15rem; line-height: 1; color: var(--line-dim); }
.star.lit { color: var(--gold); text-shadow: 0 0 6px var(--gold-glow); }
.track__flavor { font-family: var(--font-prose); font-style: italic; color: var(--text-dim);
  font-size: .92rem; margin: .1rem 0 0; }
.moments { display: flex; flex-wrap: wrap; gap: .5rem .9rem; margin-top: .3rem; }
.moment { display: flex; align-items: center; gap: .35rem; opacity: .45; }
.moment.lit { opacity: 1; }
.moment__star { color: var(--line-dim); }
.moment.lit .moment__star { color: var(--gold); text-shadow: 0 0 6px var(--gold-glow); }

/* Motion off for those who ask (§9.4). */
@media (prefers-reduced-motion: reduce) {
  .banner, .toast { transition-duration: .01ms !important; }
}