/* frontend/guide/ancient-hub.css — the "Ancient games you can still play" hub (/ancient-games) only.
   The page wears guide.css + the cluster's Ember tokens (from ur-board.css); this adds the hub's own
   pieces: one card per row (each card carries a paragraph), the comparison table's first column,
   and the timeline. */
.an-cards { grid-template-columns: 1fr; }
.an-cards .cg-card > p { margin: 0; line-height: 1.6; }
.an-compare td:first-child a { color: var(--pgr-gold); font-weight: 700; text-decoration: none; white-space: nowrap; }
.an-compare td:first-child a:hover { text-decoration: underline; }

.an-timeline { list-style: none; margin: 8px 0 18px; padding: 0 0 0 18px; position: relative; }
.an-timeline::before { content: ''; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px; background: var(--pgr-line); }
.an-timeline li { position: relative; display: grid; grid-template-columns: 9.5em 1fr; gap: 4px 14px; padding: 8px 0; }
.an-timeline li::before {
  content: ''; position: absolute; left: -18px; top: 13px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--pgr-gold); box-shadow: 0 0 0 3px var(--cg-base, #221D23);
}
.an-timeline .an-when { font-weight: 800; color: var(--pgr-gold); white-space: nowrap; }
.an-timeline .an-unknown::before { background: transparent; border: 2px dashed var(--pgr-gold); width: 8px; height: 8px; }
.an-timeline .an-unknown .an-when { color: var(--pgr-dim); font-style: italic; }
@media (max-width: 520px) {
  .an-timeline li { grid-template-columns: 1fr; }
}