/* ==========================================================================
   YY GAME — pages/legal.css
   Privacy policy and terms. Calm on purpose: generous whitespace, clear
   hierarchy, minimal motion.
   ========================================================================== */

.legal-head__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin: var(--space-lg) 0 0;
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-obsidian-border);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

.legal-head__meta strong {
  color: var(--color-gold-coin);
  font-weight: 700;
}

/* ==========================================================================
   LEGAL BODY
   ========================================================================== */

.legal {
  max-width: 72ch;
}

.legal h2 {
  position: relative;
  margin-top: var(--space-3xl);
  margin-bottom: var(--space-md);
  padding-top: var(--space-lg);
  padding-left: 0;
  font-size: var(--fs-h3);
  letter-spacing: 0.035em;
  text-transform: uppercase;
  color: var(--color-gold-coin);
  border-top: 1px solid var(--color-obsidian-border);
  scroll-margin-top: calc(var(--nav-height) + 1.5rem);
}

.legal h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* Gold coin marker on each section heading */
.legal h2::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 0;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--grad-gold);
  box-shadow: 0 0 0 4px var(--color-obsidian), 0 0 12px var(--color-gold-faint-a);
}

.legal h3 {
  margin-top: var(--space-xl);
  margin-bottom: var(--space-xs);
  font-size: var(--fs-h4);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-primary);
}

.legal p {
  margin-bottom: var(--space-md);
  line-height: 1.82;
}

.legal .coin-list {
  margin-block: var(--space-md) var(--space-lg);
}

.legal .coin-list li {
  line-height: 1.74;
}

.legal .notice {
  margin-block: var(--space-lg);
}

.legal .table-wrap {
  margin-block: var(--space-lg);
}

.legal code {
  padding: 0.1rem 0.36rem;
  border: 1px solid var(--color-obsidian-border);
  border-radius: var(--radius-xs);
  background: rgba(11, 7, 8, 0.7);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.86em;
  color: var(--color-gold-coin);
}

.legal__related {
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-obsidian-border);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

/* Anchor targets shouldn't hide behind the sticky nav */
.legal [id] {
  scroll-margin-top: calc(var(--nav-height) + 1.5rem);
}