/* ============================================================
   x666 Game — Legal document pages (privacy / terms)
   ============================================================ */
.legal-layout {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
@media (min-width: 992px) {
  .legal-layout { grid-template-columns: 260px 1fr; }
}

.legal-toc {
  position: static;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--grad-surface);
  border: 1px solid var(--color-hairline-soft);
  box-shadow: var(--shadow-sm);
}
.legal-toc h2 {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-gold-bright);
  margin-bottom: var(--space-4);
}
.legal-toc ol { display: grid; gap: var(--space-2); counter-reset: toc; }
.legal-toc a {
  display: block;
  font-size: 0.9rem;
  color: var(--color-text-muted);
  padding: 0.35rem 0;
  transition: color var(--dur-fast);
}
.legal-toc a:hover { color: var(--color-gold-bright); }
@media (min-width: 992px) {
  .legal-toc { position: sticky; top: 100px; }
}

.legal-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.84rem;
  color: var(--color-text-muted);
  margin-bottom: var(--space-5);
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-pill);
  background: var(--color-surface-glass);
  border: 1px solid var(--color-hairline-soft);
}
.legal-meta svg { width: 16px; height: 16px; color: var(--color-gold-bright); }

.legal-body h2 { counter-increment: none; }
.legal-body .prose { max-width: none; }