/* ==========================================================================
   Páginas legais (Política de Privacidade e Termos de Serviço).
   Fase 4 do redesign: design system (tokens --gm-*), tema claro ou escuro, sem CSS legado.
   Só a apresentação mudou; o texto legal é o mesmo.
   ========================================================================== */

.legal-page {
  width: min(var(--gm-container-max), 100% - 2 * var(--gm-gutter));
  margin-inline: auto;
  padding-block: var(--gm-space-7) var(--gm-space-8);
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* a coluna encolhe até a tela: nada passa da borda em 320 px */
  gap: var(--gm-space-6);
}
.legal-page h2, .legal-page h3, .legal-page p { margin-top: 0; }

/* Cabeçalho da página */
.legal-page .game-hero { display: grid; justify-items: center; gap: var(--gm-space-3); text-align: center; }
.legal-page .game-hero > * { margin: 0; }
.legal-page .game-hero-medal {
  display: grid;
  place-items: center;
  width: var(--gm-seal-size);
  height: var(--gm-seal-size);
  border-radius: var(--gm-radius-round);
  background: var(--gm-color-primary-soft);
  color: var(--gm-color-primary);
}
.legal-page .game-hero-medal .gm-ico { width: var(--gm-icon-xl); height: var(--gm-icon-xl); }
.legal-page .game-hero-kicker {
  font-size: var(--gm-font-size-sm);
  font-weight: var(--gm-font-weight-semibold);
  letter-spacing: var(--gm-tracking-wide);
  text-transform: uppercase;
  color: var(--gm-color-text-muted);
}
.legal-page .game-hero-title { font-size: var(--gm-font-size-3xl); }
.legal-page .game-hero-subtitle { max-width: var(--gm-measure); color: var(--gm-color-text-muted); font-size: var(--gm-font-size-md); }
.legal-page .game-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gm-space-2); }
.legal-page .game-chip {
  display: inline-flex;
  align-items: center;
  min-height: var(--gm-target-compact);
  padding: 0 var(--gm-space-3);
  border-radius: var(--gm-radius-pill);
  background: var(--gm-color-surface-2);
  color: var(--gm-color-text);
  font-size: var(--gm-font-size-sm);
  font-weight: var(--gm-font-weight-semibold);
}

/* Resumo e sumário */
.legal-summary, .legal-toc, .legal-content {
  padding: var(--gm-space-5);
  border-radius: var(--gm-radius-lg);
  background: var(--gm-color-surface);
  border: var(--gm-border-width) solid var(--gm-color-border);
}
@media (min-width: 768px) {
  .legal-summary, .legal-toc { padding: var(--gm-space-6); }
  .legal-content { padding: var(--gm-space-2) var(--gm-space-7); }
}
.legal-summary h2, .legal-toc h2 { font-size: var(--gm-font-size-lg); margin-bottom: var(--gm-space-4); }
.legal-summary-list { display: grid; gap: var(--gm-space-4); margin: 0; padding: 0; list-style: none; }
.legal-summary-item { display: flex; gap: var(--gm-space-3); align-items: flex-start; }
.legal-summary-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--gm-target-min);
  height: var(--gm-target-min);
  border-radius: var(--gm-radius-md);
  background: var(--gm-color-primary-soft);
  color: var(--gm-color-primary);
}
.legal-summary-item strong { display: block; color: var(--gm-color-text); }
.legal-summary-item span { color: var(--gm-color-text-muted); }

.legal-toc ol { margin: 0; padding-left: var(--gm-space-5); columns: 1; }
@media (min-width: 768px) {
  .legal-toc ol { columns: 2; column-gap: var(--gm-space-7); }
}
.legal-toc li { break-inside: avoid; }
.legal-toc a { display: inline-flex; align-items: center; min-height: var(--gm-target-min); }

/* Conteúdo */
.legal-section {
  padding-block: var(--gm-space-6);
  border-bottom: var(--gm-border-width) solid var(--gm-color-border);
}
.legal-section:last-child { border-bottom: 0; }
.legal-section h2 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gm-space-2) var(--gm-space-3); font-size: var(--gm-font-size-xl); margin-bottom: var(--gm-space-4); } /* em 320 px o número sobe quando a palavra não cabe */
.legal-num {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--gm-target-min);
  height: var(--gm-target-min);
  border-radius: var(--gm-radius-md);
  background: var(--gm-color-xp-soft);
  color: var(--gm-color-xp-text);
  font-family: var(--gm-font-text);
  font-size: var(--gm-font-size-sm);
  font-weight: var(--gm-font-weight-bold);
  font-variant-numeric: tabular-nums;
}
.legal-section p, .legal-section li { color: var(--gm-color-text); max-width: var(--gm-measure-wide); overflow-wrap: anywhere; } /* URLs longas quebram em 320 px */
.legal-section ul { margin: 0 0 var(--gm-space-4); padding-left: var(--gm-space-5); }
.legal-section li + li { margin-top: var(--gm-space-2); }
.legal-section a { overflow-wrap: anywhere; }
.legal-section code {
  padding: 0 var(--gm-space-1);
  border-radius: var(--gm-radius-xs);
  background: var(--gm-color-surface-2);
  color: var(--gm-color-secondary-text);
  font-size: var(--gm-font-size-sm);
  overflow-wrap: anywhere;
}

/* Permissões do Google */
.legal-scopes { display: grid; gap: var(--gm-space-4); margin-block: var(--gm-space-4); }
@media (min-width: 768px) {
  .legal-summary-list, .legal-scopes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.legal-scope {
  min-width: 0;
  padding: var(--gm-space-4);
  border-radius: var(--gm-radius-md);
  background: var(--gm-color-bg);
  border: var(--gm-border-width) solid var(--gm-color-border);
}
.legal-scope h3 { font-size: var(--gm-font-size-base); margin-bottom: var(--gm-space-2); }
.legal-scope-codes { display: flex; flex-wrap: wrap; gap: var(--gm-space-1); margin-bottom: var(--gm-space-2); }
.legal-scope dl { margin: 0; }
.legal-scope dt {
  margin-top: var(--gm-space-3);
  font-size: var(--gm-font-size-sm);
  font-weight: var(--gm-font-weight-semibold);
  color: var(--gm-color-text-muted);
}
.legal-scope dd { margin: 0; color: var(--gm-color-text); }

/* Destaques */
.legal-callout {
  margin-block: var(--gm-space-4);
  padding: var(--gm-space-4);
  border-left: var(--gm-border-width-heavy) solid var(--gm-color-success-text);
  border-radius: 0 var(--gm-radius-md) var(--gm-radius-md) 0;
  background: var(--gm-color-success-soft);
}
.legal-callout p:last-child { margin-bottom: 0; }
.legal-callout--limited { border-left-color: var(--gm-color-secondary); background: var(--gm-color-secondary-soft); }
.legal-quote-en { margin-top: var(--gm-space-2); font-style: italic; }
.legal-section .legal-quote-en { color: var(--gm-color-text-muted); }

.legal-contact { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gm-space-3); }
.legal-section a.legal-contact-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--gm-space-2);
  min-height: var(--gm-control-height);
  padding: 0 var(--gm-space-5);
  border-radius: var(--gm-radius-pill);
  background: var(--gm-color-primary);
  color: var(--gm-color-on-primary);
  font-weight: var(--gm-font-weight-semibold);
  text-decoration: none;
}
.legal-section a.legal-contact-btn:hover { background: var(--gm-color-primary-hover); color: var(--gm-color-on-primary); }