/* Impressum, Datenschutz and 404: plain pages next to the game, no external requests. */
:root { --deep: #3a1760; --purple: #5b2a92; --gold: #ffd34d; --soft: #4d3a66; }
* { box-sizing: border-box; }
html { background: #fbf6ec; }
body { margin: 0; font-family: 'Trebuchet MS', Verdana, sans-serif; color: var(--deep); line-height: 1.6; font-size: 17px; }
a { color: var(--purple); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--purple); outline-offset: 3px; border-radius: 4px; }
.skip { position: absolute; left: -9999px; top: 8px; background: #fff; padding: 8px 12px; border-radius: 8px; }
.skip:focus { left: 16px; }
header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; background: var(--deep); }
header .brand { display: flex; align-items: center; gap: 10px; color: #fff6d0; font-weight: bold; font-size: 20px; text-decoration: none; }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 999px; background: var(--gold); color: var(--deep); font-weight: bold; text-decoration: none; box-shadow: 0 4px 0 #c99a1a; }
.btn.ghost { background: transparent; box-shadow: inset 0 0 0 3px #fff6d0; color: #fff6d0; }
main.legal { max-width: 760px; margin: 0 auto; padding: 32px 16px 48px; }
.legal h1 { font-size: 34px; line-height: 1.2; }
.legal h2 { font-size: 21px; margin-top: 1.6em; }
.fill { background: #fff3c4; padding: 0 4px; border-radius: 4px; }
.todo { background: #fff3c4; padding: 10px 14px; border-radius: 10px; }
footer { padding: 20px 16px 28px; text-align: center; font-size: 15px; background: #f0e6d6; }
footer p { margin: 4px 0; }
.lost { min-height: calc(100vh - 160px); display: grid; place-items: center; padding: 40px 16px; text-align: center;
  background: radial-gradient(circle at 75% 20%, #fff6d0 0 3%, transparent 3.5%), linear-gradient(#1d0f3a, #3a1760 60%, #2b5a3a); color: #fff6d0; }
.lost .code { margin: 0; font-size: clamp(64px, 16vw, 120px); font-weight: bold; line-height: 1; color: var(--gold); text-shadow: 0 5px 0 var(--purple); }
.lost h1 { font-size: clamp(26px, 5vw, 36px); margin: 12px 0 8px; }
.lost p { max-width: 520px; margin: 0 auto 20px; }
.lost .tracks { display: flex; justify-content: center; gap: 14px; margin-bottom: 12px; }
.lost .tracks svg { width: 34px; height: 34px; }
.lost .tracks svg:nth-child(2) { transform: translateY(-10px) rotate(12deg); }
.lost .tracks svg:nth-child(3) { transform: rotate(-8deg); }
.lost .cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
@media (prefers-reduced-motion: no-preference) {
  .lost .tracks svg { animation: step 2.4s ease-in-out infinite; }
  .lost .tracks svg:nth-child(2) { animation-delay: 0.4s; }
  .lost .tracks svg:nth-child(3) { animation-delay: 0.8s; }
}
@keyframes step { 0%, 100% { opacity: 0.35; } 40% { opacity: 1; } }