/* ==========================================================================
   Y1 Game — Legal pages (privacy policy, terms)
     01 · Layout with sticky contents rail
     02 · Contents list
     03 · Meta strip
   ========================================================================== */


/* ==========================================================================
   01 · LAYOUT
   ========================================================================== */

.legal {
  display: grid;
  gap: clamp(2rem, 1rem + 3vw, 3.5rem);
  align-items: start;
}
@media (min-width: 1000px) {
  .legal { grid-template-columns: 250px minmax(0, 1fr); }
}

.legal__body { min-width: 0; }

/* Anchored sections land clear of the fixed header */
.legal__body section { scroll-margin-top: 110px; }

/* The prose rhythm lives on .prose's own children; these clauses are wrapped
   in <section>, so restate the spacing and the divider one level down. */
.legal__body section > * + * { margin-top: var(--sp-4); }

.legal__body section + section {
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line-gold-faint);
}

.legal__body section h2 {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}


/* ==========================================================================
   02 · CONTENTS LIST
   ========================================================================== */

.toc {
  padding: 1.4rem;
  border-radius: var(--r-lg);
  background: var(--surface-lift);
  box-shadow: inset 0 0 0 1px var(--line-gold-faint);
}
@media (min-width: 1000px) {
  .toc { position: sticky; top: 104px; }
}

.toc h2 {
  font-family: var(--font-label);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--sp-4);
}
.toc ol {
  display: grid;
  gap: 0.15rem;
  list-style: none;
  counter-reset: toc;
}
.toc a {
  display: flex;
  gap: 0.6rem;
  padding: 0.42rem 0;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--ink-muted);
  border-bottom: 1px solid transparent;
  transition: color var(--t-fast) linear, padding-left var(--t-fast) var(--ease-out);
}
.toc a::before {
  counter-increment: toc;
  content: counter(toc, decimal-leading-zero);
  font-size: 0.62rem;
  font-weight: 800;
  color: var(--gold);
  padding-top: 0.16rem;
}
.toc a:hover { color: var(--gold); padding-left: 0.25rem; }


/* ==========================================================================
   03 · META STRIP
   ========================================================================== */

.legal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
  align-items: center;
  padding: 0.9rem 1.15rem;
  margin-bottom: var(--sp-6);
  border-radius: var(--r-md);
  background: var(--surface-lift);
  box-shadow: inset 0 0 0 1px var(--line-gold-faint);
  font-size: var(--fs-xs);
  color: var(--ink-soft);
}
.legal-meta b { color: var(--ink); font-weight: 700; }
.legal-meta span { display: inline-flex; align-items: center; gap: 0.45rem; }
.legal-meta svg { width: 15px; height: 15px; color: var(--gold); }