/* ===========================================================================
   heirloom.css — Direction A "Heirloom" refinements
   ---------------------------------------------------------------------------
   Loaded AFTER styles.css so these rules win on equal specificity. Adds the
   gold "eyebrow" label system and a few card / type refinements on top of the
   existing warm-cream + terracotta base. Nothing here changes layout
   structure, so it is safe to add and revert wholesale.
   =========================================================================== */

/* --- Token: warm gold, used for eyebrow labels and small accents ---------- */
:root {
  --gold: #c2a05a;
}

/* --- Eyebrow label --------------------------------------------------------
   A small, tracked, gold kicker that sits above a heading. Pair with a
   <span class="eyebrow"> added in the maud view. Harmless if unused. */
.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 0.4rem;
}

/* On the projector the kicker should breathe with the big type. */
body.projector-mode .eyebrow {
  font-size: 0.32em;
  letter-spacing: 0.2em;
  color: var(--gold);
}

/* --- Cards: slightly softer radius, calmer hairline ----------------------- */
section,
article {
  border-radius: 12px;
}

/* --- Home-screen game option cards ("Icebreaker", "Cat Hunt") ------------- */
.g1-cta {
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.g1-cta:hover,
.g1-cta:focus-within {
  border-color: var(--accent-soft);
  box-shadow: 0 4px 16px rgba(42, 37, 32, 0.06);
}
.g1-cta h2 {
  margin-top: 0;
}
.g1-cta p a {
  font-weight: 600;
  color: var(--link);
}

/* --- The Heirloom detail: a short gold rule under guest card headings ------
   Scoped away from the projector, whose headings are display-scale. */
body:not(.projector-mode) .g1-cta h2::after,
body:not(.projector-mode) .agenda h2::after,
body:not(.projector-mode) .game2-info h2::after,
body:not(.projector-mode) .finale h2::after {
  content: "";
  display: block;
  width: 2rem;
  height: 2px;
  border-radius: 2px;
  background: var(--gold);
  opacity: 0.85;
  margin-top: 0.5rem;
}

/* --- Agenda timeline: a touch more weight on the time column -------------- */
.agenda-time {
  font-feature-settings: "tnum" 1;
}

/* --- Cat gallery captions: serif, to match the heirloom card titles ------- */
.cat-figure figcaption {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
}

/* --- Finale guest leaderboard: rank numerals in gold ---------------------- */
.finale-list {
  font-feature-settings: "tnum" 1;
}
.finale-list li::marker {
  color: var(--gold);
  font-weight: 700;
}

/* --- Projector finale: warm the "Top Guessers" section label -------------- */
body.projector-mode .projector-finale-section h3 {
  color: var(--gold);
}

/* ===========================================================================
   HEAD-TO-HEAD · bride vs. groom  (added to match the Heirloom mockup)
   ---------------------------------------------------------------------------
   The base rules in styles.css paint every duel cue in the same saturated gold
   gradient. Heirloom softens the guest turn states into warm-amber cards and
   tints the projector couple-pick chips green/red so right vs. wrong reads at a
   glance. The gold "whose turn" pill and duel score line already match, so they
   are left untouched. No template changes — these target existing classes.
   =========================================================================== */

/* Guest, on-turn: 🎤 "Your turn" — calmer amber card instead of solid gold. */
.g3-turn-you {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  background: #f4ecd9;
  color: #8a6a1e;
  border: 1px solid #e7d4a6;
  border-radius: 0.6rem;
  padding: 0.7rem 0.85rem;
  text-align: left;
  font-weight: 600;
}

/* Guest, off-turn: 👀 "Not your turn" — a quiet bordered card, not bare text. */
.g3-turn-watch {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  background: #f1ece4;
  color: var(--muted, #786a5c);
  border: 1px solid #e2dace;
  border-radius: 0.6rem;
  padding: 0.7rem 0.85rem;
  font-style: normal;
  text-align: left;
}

/* Projector reveal couple chips: soft green (right) / red (wrong) tints so the
   pick reads correct-vs-wrong, rather than every chip being gold. */
.g3-couple-pick {
  background: #f1ece4;
  color: #6b6055;
  font-weight: 600;
}
.g3-couple-right {
  background: #eaf2e4;
  color: #4f6b41;
  box-shadow: 0 0 0 1px #c4d9b5 inset;
}
.g3-couple-wrong {
  background: #f6e7e2;
  color: #b04438;
  box-shadow: 0 0 0 1px #e7c4ba inset;
}

/* ===========================================================================
   PHOTO MATCH · score + result polish
   (Pairs with the maud `.g3-score` / `.g3-result` / `.g3-placement` classes.)
   =========================================================================== */

/* The guest's running score: a hairline-topped footer with a Cormorant numeral. */
.g3-score {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 0.9rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--border);
}
.g3-score-label {
  color: var(--muted);
  font-size: 0.95rem;
}
.g3-score-value {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.7rem;
  color: var(--fg);
  font-feature-settings: "tnum" 1;
}

/* The per-round reveal verdict, as a soft tinted card. */
.g3-result {
  border-radius: 12px;
  padding: 0.75rem 0.9rem;
  font-weight: 600;
  margin: 0.6rem 0;
}
.g3-result-hit {
  background: #eef4e9;
  color: var(--success);
  border: 1px solid #cfe0c2;
}
.g3-result-miss {
  background: #fbeeea;
  color: var(--danger);
  border: 1px solid #efd6ce;
}

/* Final-round placement line ("You're #4 of 26") — quiet, tabular. */
.g3-placement {
  color: var(--muted);
  font-feature-settings: "tnum" 1;
}