/* Legal pages (EN at /, DE at /de/): the game's P1 look from the one-pager —
   plum night, gold ink headings in Fredoka, cream text, gold rope dividers —
   around a calm reading column. URLs here resolve relative to this file, so
   they work from both / and /de/. */
@font-face { font-family: "Fredoka"; font-weight: 500; font-display: swap; src: url("fonts/fredoka-500.ttf") format("truetype"); }
@font-face { font-family: "Fredoka"; font-weight: 600; font-display: swap; src: url("fonts/fredoka-600.ttf") format("truetype"); }
@font-face { font-family: "Fredoka"; font-weight: 700; font-display: swap; src: url("fonts/fredoka-700.ttf") format("truetype"); }
:root {
  --night: #1c0a16;
  --plum-glow: #3a1226;
  --ink-gold: #f6d27a;
  --gold: #e0a93a;
  --cream: #f6e8c6;
  --muted: #e6cfae;
  --font: "Fredoka", "Avenir Next Rounded", "Nunito", system-ui, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; padding-inline: 16px; color: var(--cream); font: 500 1.04rem/1.6 var(--font);
  background: radial-gradient(ellipse at 50% 0%, var(--plum-glow) 0%, var(--night) 70%) fixed, var(--night);
  overflow-wrap: break-word; hyphens: auto;
}
a { color: var(--ink-gold); text-underline-offset: 2px; }
a:focus-visible { outline: 2px solid var(--ink-gold); outline-offset: 3px; border-radius: 6px; }

.top { position: relative; max-width: 68ch; margin-inline: auto; display: flex; justify-content: center; padding-block: 24px 4px; }
.top .home img { display: block; width: 200px; height: auto; filter: drop-shadow(0 8px 22px rgba(0,0,0,.55)); }
.top .lang {
  position: absolute; top: 20px; right: 0; padding: 5px 14px; border: 1.5px solid rgba(246,210,122,.55); border-radius: 999px;
  color: var(--ink-gold); text-decoration: none; font-weight: 600; font-size: .88rem; background: rgba(28,10,22,.45);
}
.top .lang:hover { background: rgba(246,210,122,.12); }

.doc { max-width: 68ch; margin-inline: auto; padding-block: 8px 48px; }
h1, h2, h3 { font-weight: 700; text-wrap: balance; line-height: 1.2; }
h1 { color: var(--ink-gold); font-size: clamp(1.8rem, 5vw, 2.5rem); margin: 0 0 4px; text-shadow: 0 2px 0 #3a1306, 0 4px 18px rgba(0,0,0,.55); }
h2 {
  color: var(--ink-gold); font-size: 1.3rem; margin: 2.2em 0 .5em; padding-top: 34px;
  background: url("img/p1/rope.webp") top center / min(100%, 420px) auto no-repeat;
  text-shadow: 0 2px 0 #3a1306;
}
h3 { color: var(--cream); font-weight: 600; font-size: 1.06rem; margin: 1.6em 0 .3em; }
p, ul { margin: 0 0 .9em; }
ul { padding-left: 1.2em; }
li { margin-bottom: .35em; }
li::marker { color: var(--gold); }
strong { font-weight: 600; color: var(--ink-gold); }
.updated { color: var(--muted); font-size: .92rem; }

footer {
  max-width: 68ch; margin-inline: auto; padding-block: 44px 40px; display: flex; flex-wrap: wrap; gap: 10px 24px;
  justify-content: space-between; align-items: center; color: var(--muted); font-size: .9rem;
  background: url("img/p1/rope.webp") top center / min(100%, 420px) auto no-repeat;
}
footer nav { display: flex; gap: 8px 20px; flex-wrap: wrap; }
footer a { color: var(--cream); text-decoration: none; font-weight: 600; }
footer a:hover { color: var(--ink-gold); }
footer a[aria-current] { color: var(--ink-gold); }
footer p { margin: 0; }

@media (max-width: 480px) {
  .top { padding-top: 52px; }
  .top .lang { top: 12px; }
  .top .home img { width: 170px; }
}