/* Secondary pages: archive, about, results, empty state.
   These read as terminal output — the game show is the board, not the index. */

.page-title {
  font-family: var(--font-display);
  font-size: clamp(22px, 5.4vw, 32px);
  letter-spacing: 0.04em;
  color: var(--gold);
  text-shadow: var(--glow-gold);
  margin: var(--gap-lg) 0 var(--gap-xs);
}

.page-sub {
  color: var(--ink-dim);
  font-size: 14px;
  margin: 0 0 var(--gap-lg);
}

.prose {
  max-width: 62ch;
  color: var(--ink-dim);
  font-size: 15px;
  line-height: 1.66;
}

.prose h2 {
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green);
  margin: var(--gap-lg) 0 var(--gap-sm);
}

.prose strong { color: var(--ink); }
.prose code {
  color: var(--gold);
  background: #05091a;
  border: 1px solid var(--stage-edge);
  border-radius: 3px;
  padding: 1px 5px;
  font-size: 13px;
}

/* --- Archive listing ---------------------------------------------------- */

.dir-listing {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--stage-edge);
}

.dir-row {
  border-bottom: 1px solid var(--stage-edge);
}

.dir-row__link {
  display: flex;
  align-items: baseline;
  gap: var(--gap);
  padding: 12px var(--gap-sm);
  text-decoration: none;
  color: var(--ink-dim);
  transition: background 120ms ease, color 120ms ease;
}

.dir-row__link:hover {
  background: rgba(74, 255, 160, 0.06);
  color: var(--ink);
}

/* Wide enough for the longest label the sequences can produce —
   "PERSONALITY #12" — because the mode word travels with the number and a
   4ch column silently wrapped it on top of the date. */
.dir-row__num {
  flex: none;
  width: 15ch;
  color: var(--gold);
  font-weight: 600;
  white-space: nowrap;
}

.dir-row__date {
  flex: none;
  width: 8ch;
  color: var(--ink-faint);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.dir-row__q {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dir-row__status {
  flex: none;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--green-dim);
  text-transform: uppercase;
}

.dir-row__status--unplayed { color: var(--ink-faint); }

/* Narrow screens: the label, date and status keep one line and the question
   takes the next. A row is terminal output, and two lines of it still is. */
@media (max-width: 640px) {
  .dir-row__link {
    flex-wrap: wrap;
    gap: 4px var(--gap);
  }
  .dir-row__num { order: 1; width: auto; }
  .dir-row__date { order: 2; width: auto; }
  .dir-row__status { order: 3; margin-left: auto; }
  .dir-row__q {
    order: 4;
    flex-basis: 100%;
    white-space: normal;
  }
}

/* --- Results / empty ---------------------------------------------------- */

.result-board {
  list-style: none;
  margin: var(--gap-lg) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.result-row {
  display: flex;
  align-items: center;
  gap: var(--gap);
  padding: 10px var(--gap);
  border: 2px solid var(--stage-line);
  border-radius: var(--radius);
  background: #0a1130;
}

.result-row--found {
  border-color: var(--gold-deep);
  box-shadow: inset 0 0 18px rgba(255, 181, 46, 0.12);
}

.result-row__rank { width: 2ch; color: var(--ink-faint); }

.result-row__label {
  flex: 1;
  font-family: var(--font-display);
  font-size: 16px;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.result-row--found .result-row__label { color: var(--gold-bright); }

.result-row__points {
  font-family: var(--font-display);
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

.result-row--found .result-row__points { color: var(--gold); }

.empty-stage {
  text-align: center;
  padding: 18vh var(--gap);
}

.empty-stage__mark {
  font-family: var(--font-display);
  font-size: clamp(34px, 10vw, 62px);
  color: var(--gold);
  text-shadow: var(--glow-gold-strong);
  margin: 0 0 var(--gap);
}

/* --- Under the Hood ----------------------------------------------------- */

/* Categorical series slots. Eight fixed hues in a fixed order — that order is
   the colourblind-safety mechanism, so it is never reordered and never cycled.
   Validated against this stage's surface (#060a18) in dark mode: lightness
   band, chroma floor, adjacent CVD separation (worst ΔE 8.4), normal-vision
   floor (19.3) and 3:1 contrast all pass. A ninth model is not a ninth hue —
   it folds into `--series-other`. */
.hood {
  --series-1: #3987e5;
  --series-2: #d95926;
  --series-3: #199e70;
  --series-4: #c98500;
  --series-5: #d55181;
  --series-6: #008300;
  --series-7: #9085e9;
  --series-8: #e66767;
  --series-other: #6d80ab;
}

.hood-answer {
  padding: var(--gap) 0 var(--gap-lg);
  border-bottom: 1px solid var(--stage-edge);
}

.hood-answer__head {
  display: flex;
  align-items: baseline;
  gap: var(--gap);
}

.hood-answer__rank {
  width: 2ch;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

.hood-answer__label {
  flex: 1;
  font-family: var(--font-display);
  font-size: clamp(15px, 3.6vw, 19px);
  color: var(--gold-bright);
  text-transform: uppercase;
}

.hood-answer__points {
  font-family: var(--font-display);
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

.hood-answer__share {
  margin: var(--gap-xs) 0 var(--gap-sm) calc(2ch + var(--gap));
  font-size: 13px;
  color: var(--ink-dim);
}

/* The bar. 2px surface gaps between segments and 4px rounded data-ends
   anchored to the baseline, per the mark spec. */
.hood-bar {
  display: flex;
  gap: 2px;
  height: 22px;
  margin-left: calc(2ch + var(--gap));
  background: #05091a;
  border-radius: 4px;
}

.hood-bar__segment {
  min-width: 3px;
  border-radius: 1px;
  background: var(--segment-color, var(--series-other));
  transition: filter 120ms ease;
}

.hood-bar__segment:first-child { border-radius: 4px 1px 1px 4px; }
.hood-bar__segment:last-child { border-radius: 1px 4px 4px 1px; }
.hood-bar__segment:only-child { border-radius: 4px; }
.hood-bar__segment:hover { filter: brightness(1.25); }

/* Identity is never colour alone: every segment is named here in text, which
   doubles as the table view the contrast-relief rule asks for. */
.hood-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px var(--gap);
  margin: var(--gap-sm) 0 0 calc(2ch + var(--gap));
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-dim);
}

.hood-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.hood-legend__swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--segment-color, var(--series-other));
  flex: none;
}

.hood-legend__count {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.hood-variants {
  list-style: none;
  margin: var(--gap) 0 0 calc(2ch + var(--gap));
  padding: 0;
  font-size: 13px;
  color: var(--ink-faint);
}

.hood-variants li {
  padding: 2px 0;
}

.hood-variants li::before {
  content: '> ';
  color: var(--green-dim);
}

.hood-panel {
  margin: var(--gap-lg) 0;
  padding: var(--gap);
  border: 1px solid var(--stage-edge);
  border-radius: var(--radius);
  background: #070c1e;
  font-size: 13px;
  color: var(--ink-dim);
  line-height: 1.6;
}

.hood-panel strong { color: var(--ink); }

@media (forced-colors: active) {
  .hood-bar__segment,
  .hood-legend__swatch {
    forced-color-adjust: none;
    border: 1px solid CanvasText;
  }
}

/* --- The daily hub ------------------------------------------------------ */
/* Two boards, one marquee. Classic is the hero: full width, gold, board-row
   chrome and a breathing PLAY. Personality is the same anatomy at ~2/3 scale
   with the mode tag tinted terminal-green — the only thing that distinguishes
   the modes anywhere, since no methodology copy is allowed on this page. */

.hub-head {
  text-align: center;
  padding: var(--gap-lg) 0 var(--gap);
}

.hub-wordmark {
  font-family: var(--font-display);
  font-size: clamp(38px, 12vw, 76px);
  line-height: 0.92;
  letter-spacing: 0.02em;
  color: var(--gold);
  text-shadow: var(--glow-gold-strong);
  margin: 0 0 var(--gap);
}

.hub-asked {
  font-size: clamp(11px, 2.8vw, 13px);
  letter-spacing: 0.28em;
  color: var(--green);
  text-shadow: var(--glow-green);
  margin: 0;
}

.hub {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  margin: var(--gap-lg) 0 0;
}

.hub-card {
  display: block;
  padding: var(--gap) var(--gap-lg);
  border: var(--border-chunky) solid var(--stage-line);
  border-radius: 6px;
  background: linear-gradient(180deg, var(--stage-raised) 0%, #0a1130 100%);
  text-decoration: none;
  color: inherit;
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.hub-card:hover {
  transform: translateY(-2px);
}

.hub-card__tag {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--gap-sm);
  margin: 0 0 var(--gap-sm);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.hub-card__mode { color: var(--gold-dim); }
.hub-card__when { color: var(--ink-faint); }

.hub-card__question {
  font-family: var(--font-display);
  font-size: clamp(17px, 4vw, 22px);
  line-height: 1.2;
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
}

.hub-card__foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--gap);
  margin: var(--gap) 0 0;
}

.hub-card__cta {
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.16em;
  padding: 8px 22px;
  border-radius: 5px;
  color: var(--stage-deep);
  background: linear-gradient(180deg, var(--gold-bright) 0%, var(--gold) 100%);
  border: 2px solid var(--gold-deep);
}

/* A board you already finished is a receipt, not an invitation. Same slot,
   terminal styling instead of the gold block — and no breathing. */
.hub-card__cta--done,
.hub-card--hero .hub-card__cta--done {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  padding: 7px 14px;
  color: var(--green-dim);
  background: none;
  border: 1px solid var(--stage-line);
  box-shadow: none;
  animation: none;
}

.hub-card__meta {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* Hero: the primary board of the day. */
.hub-card--hero {
  padding: var(--gap-lg);
  border-color: var(--gold-deep);
  box-shadow: var(--glow-gold), inset 0 0 26px rgba(255, 181, 46, 0.1);
}

.hub-card--hero:hover { border-color: var(--gold); }

.hub-card--hero .hub-card__question { font-size: clamp(21px, 5.2vw, 32px); }

.hub-card--hero .hub-card__cta {
  font-size: 18px;
  padding: 12px 40px;
  box-shadow: var(--glow-gold);
  animation: play-breathe 2.4s ease-in-out infinite;
}

/* Personality: one token of difference, and it is the mode tag. */
.hub-card--personality .hub-card__mode {
  color: var(--green);
  text-shadow: var(--glow-green);
}

.hub-card--personality:hover { border-color: var(--green-dim); }

/* A slot with no board ever. Reads as the empty stage, in-card. */
.hub-card--empty {
  border-style: dashed;
  border-color: var(--stage-edge);
  background: none;
}

.hub-card--empty .hub-card__question {
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--ink-faint);
}

.hub-card--empty.hub-card--hero {
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .hub-card--hero .hub-card__cta { animation: none; }
  .hub-card:hover { transform: none; }
}