/*
 * cc-genre.css — long-tail genre landing pages (/achtung-die-kurve/,
 * /curve-game-multiplayer/, /snake-multiplayer/, /local-multiplayer/).
 *
 * Loaded AFTER /_shared/cc-landing.css, which supplies the shell
 * (page-bg, site-header, hero, site-footer, cta-primary). This file only
 * adds the prose/card/table blocks those event pages never needed.
 */

.prose { max-width: 780px; margin: 0 auto; padding: 0 24px; }
.prose h2 {
  font-size: clamp(1.4rem, 3.4vw, 2rem);
  margin: 48px 0 14px;
  color: #fff;
}
.prose h3 { font-size: 1.05rem; margin: 26px 0 8px; color: var(--accent); }
.prose p { color: var(--text-mid); line-height: 1.7; margin-bottom: 14px; }
.prose ul { color: var(--text-mid); line-height: 1.7; margin: 0 0 14px 20px; }
.prose li { margin-bottom: 6px; }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.prose strong { color: #fff; font-weight: 600; }

.mode-table { width: 100%; border-collapse: collapse; margin: 18px 0 8px; font-size: 0.94rem; }
.mode-table th,
.mode-table td {
  text-align: left;
  padding: 11px 10px;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: top;
}
.mode-table th { color: var(--text-dim); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; }
.mode-table td:first-child { color: #fff; font-weight: 600; white-space: nowrap; }
.mode-table td a { color: var(--accent); }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.keys { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 18px; }
.key {
  border: 1px solid var(--border-soft);
  border-radius: 7px;
  padding: 7px 12px;
  font-size: 0.85rem;
  color: var(--text-mid);
  background: rgba(255, 255, 255, 0.03);
}
.key strong { color: var(--accent); }

.callout {
  border: 1px solid var(--accent-dim);
  background: var(--accent-glow);
  border-radius: 12px;
  padding: 18px 20px;
  margin: 24px 0;
}
.callout p { margin: 0; color: #fff; }

.cta-row { text-align: center; margin: 40px 0 8px; }
.cta-row .cta-secondary {
  display: inline-block;
  margin-left: 10px;
  padding: 12px 20px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  color: var(--text-mid);
  font-size: 0.9rem;
}
.cta-row .cta-secondary:hover { color: #fff; border-color: var(--accent-dim); }

.related { max-width: 780px; margin: 56px auto 0; padding: 0 24px; }
.related h2 { font-size: 1.05rem; color: var(--text-dim); margin-bottom: 14px; font-family: Inter, sans-serif; font-weight: 600; }
.related-links { display: flex; flex-wrap: wrap; gap: 10px; }
.related-links a {
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 0.88rem;
  color: var(--text-mid);
}
.related-links a:hover { color: #fff; border-color: var(--accent-dim); }

@media (max-width: 640px) {
  .cta-row .cta-secondary { display: block; margin: 12px auto 0; max-width: 260px; }
}