/* Datenschutz, Support, Impressum: the haul card from the game as a reading page, on deep water. */
body.legal {
  background:
    radial-gradient(50% 600px at 80% 0, rgba(180, 255, 230, .10), transparent 70%),
    linear-gradient(to bottom, var(--water-2), var(--water-4) 900px, var(--abyss));
  min-height: 100vh;
}
html[data-lang="de"] .l-en, html[data-lang="en"] .l-de { display: none; }

.legal-top {
  display: flex; align-items: center; gap: 12px;
  max-width: 46rem; margin: 0 auto;
  padding: max(14px, env(safe-area-inset-top)) 16px 0;
}
.legal-top .home { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.legal-top .home img { width: 44px; height: 44px; border-radius: 12px; box-shadow: 0 2px 0 rgba(0, 0, 0, .4); }
.legal-top .home span { font: 400 1.5rem/1 var(--display); color: var(--paper); }
.legal-top nav { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.legal-top nav a {
  font-weight: 800; font-size: .9rem; text-decoration: none; color: var(--foam-soft);
  padding: 6px 10px; border-radius: 999px;
}
@media (max-width: 420px) { .legal-top .home span { display: none; } }
.legal-top nav a[aria-current="page"] { color: var(--paper); background: rgba(0, 0, 0, .3); }

.paper {
  max-width: 46rem; margin: 22px auto 0;
  background: var(--paper); color: var(--ink);
  border: 3px solid var(--paper-edge); border-radius: 28px;
  box-shadow: 0 10px 0 rgba(0, 0, 0, .35);
  padding: clamp(24px, 5vw, 48px) clamp(20px, 5vw, 52px) clamp(28px, 5vw, 52px);
  font-weight: 600; line-height: 1.6;
}
@media (max-width: 760px) { .paper { margin-left: 12px; margin-right: 12px; } }
.paper h1 {
  font-size: clamp(2.2rem, 6vw, 3rem); line-height: 1.02; color: var(--ink);
  -webkit-text-stroke: 0; text-shadow: none; margin: 0;
}
.paper .stand { color: var(--ink-soft); font-size: .95rem; margin: .4rem 0 0; }
.paper .summary {
  margin: 1.4rem 0 0; padding: 14px 18px; border-radius: 16px;
  background: #f6e7c4; font-weight: 700;
}
.paper h2 {
  font-size: 1.55rem; color: var(--ink); text-shadow: none; max-width: none;
  margin: 2.2rem 0 .4rem;
}
.paper p, .paper ul { margin: .55rem 0 0; max-width: 62ch; }
.paper ul { padding-left: 1.2rem; }
.paper li { margin-top: .35rem; }
.paper a { color: #9b3f12; text-decoration-thickness: 2px; text-underline-offset: 2px; }
.paper strong { font-weight: 900; }

/* support: one find per question */
.faq { display: grid; gap: 4px; margin-top: 1.6rem; }
.faq details {
  border-bottom: 2px solid var(--paper-edge);
  padding: 10px 0;
}
.faq summary {
  display: grid; grid-template-columns: 52px 1fr auto; gap: 14px; align-items: center;
  cursor: pointer; list-style: none;
  font: 400 1.3rem/1.15 var(--display);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary img { width: 52px; height: 52px; object-fit: contain; }
.faq summary::after { content: "+"; font-size: 1.6rem; color: var(--rust); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > p, .faq details > ul { margin-left: 66px; }
@media (max-width: 520px) { .faq details > p, .faq details > ul { margin-left: 0; } }

.contact {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  margin-top: 2rem; padding: 18px; border-radius: 18px; background: var(--hud); color: var(--paper);
}
.contact img { width: 56px; height: 56px; object-fit: contain; }
.contact p { margin: 0; flex: 1 1 16rem; color: var(--foam); }
.contact a.mail {
  background: var(--slime); color: #173006; text-decoration: none;
  border-radius: 14px; padding: 10px 18px; font: 400 1.15rem/1 var(--display);
  box-shadow: 0 4px 0 #4f7a1c;
}

.legal-foot { text-align: center; color: rgba(223, 244, 238, .55); font-size: .9rem; padding: 34px 16px max(34px, env(safe-area-inset-bottom)); }
.legal-foot a { color: inherit; }