:root { --bg:#f4b565; --bg2:#f7c985; --paper:#fffaf0; --ink:#2a1d14; --muted:#6d5646; --pink:#f08a8a; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); min-height:100vh;
       background:radial-gradient(circle at 20% 10%,var(--bg2) 0 18%,transparent 19%),
                  radial-gradient(circle at 85% 80%,var(--bg2) 0 14%,transparent 15%), var(--bg);
       font-family:"Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,Roboto,sans-serif; line-height:1.55;
       padding:clamp(140px,17vw,210px) 16px 40px; }
a { color:inherit; }

.sheet { position:relative; max-width:860px; margin:0 auto; background:var(--paper); border:3px solid var(--ink);
         border-radius:28px; box-shadow:10px 10px 0 var(--ink); padding:clamp(28px,5vw,56px); }
/* the icon is drawn peeking in, so it sits on the sheet's top edge with its cut-off side hidden */
.peek { position:absolute; width:clamp(150px,22vw,230px); right:clamp(12px,5vw,48px); top:0; transform:translateY(-78%);
        height:auto; clip-path:inset(0 0 22% 0); }
h1 { font-size:clamp(2.6rem,7vw,4.8rem); line-height:1; margin:0 0 6px; letter-spacing:-.03em; font-weight:900; }
.hi { font-size:clamp(1.05rem,2vw,1.3rem); color:var(--muted); margin:0 0 26px; max-width:40ch; }
.hi b { color:var(--ink); }

.shot { transform:rotate(-1.5deg); border:3px solid var(--ink); border-radius:14px; overflow:hidden;
        box-shadow:6px 6px 0 var(--ink); margin:30px 0 34px; background:#000; }
.shot img { width:100%; height:auto; display:block; }
.caption { display:inline-block; background:var(--pink); border:3px solid var(--ink); border-radius:999px; padding:4px 14px;
           font-weight:800; transform:rotate(2deg); margin:-22px 0 0 18px; position:relative; cursor:default; }
.caption:hover { animation:shake .45s ease-in-out infinite; }
@keyframes shake {
  0%, 100% { transform:rotate(2deg) translate(0, 0); }
  20%      { transform:rotate(-3deg) translate(-2px, 1px); }
  40%      { transform:rotate(5deg) translate(2px, -1px); }
  60%      { transform:rotate(-2deg) translate(-1px, 0); }
  80%      { transform:rotate(4deg) translate(1px, 1px); }
}

/* the unannounced game: the file itself is pre-blurred, the stamp sits on top */
.shot.secret { position:relative; }
.stamp { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) rotate(-12deg);
         font-weight:900; font-size:clamp(1.6rem,5vw,3rem); letter-spacing:.08em; color:#e0453a;
         border:5px solid #e0453a; border-radius:10px; padding:6px 18px; white-space:nowrap; }
.follow { margin-top:30px; }

.row { display:flex; flex-wrap:wrap; gap:12px; margin-top:16px; }
.chip { padding:11px 18px; border:3px solid var(--ink); border-radius:14px; background:#fff; font-weight:800;
        text-decoration:none; box-shadow:4px 4px 0 var(--ink); transition:transform .1s, box-shadow .1s; }
.chip:hover, .chip:focus-visible { transform:translate(2px,2px) rotate(-1deg); box-shadow:2px 2px 0 var(--ink); outline:none; }
.chip.discord { background:#8f98ff; }
.chip.yt { background:#ff8a8a; }
.chip.tt { background:#8ff0ea; }
.chip.ig { background:#f7a8cf; }

h2 { font-size:1.35rem; margin:34px 0 8px; }
p { margin:0; }
.muted { color:var(--muted); }

footer { max-width:860px; margin:26px auto 0; display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px;
         font-weight:700; font-size:.9rem; }
footer a { text-decoration:none; } footer a:hover { text-decoration:underline; }
footer .links { display:flex; flex-wrap:wrap; gap:6px 16px; }

/* language switch + translation note on the legal pages */
.lang { font-size:.9rem; font-weight:700; margin:0 0 10px !important; }
.lang a { color:var(--muted); }
.legal .note { font-size:.9rem; font-style:italic; margin:6px 0 4px; }

@media (prefers-reduced-motion: reduce) { .chip { transition:none; } .caption:hover { animation:none; } }

/* Impressum / Datenschutz */
.legal h1 { font-size:clamp(2rem,5vw,3rem); }
.legal h2 { font-size:1.1rem; margin:26px 0 6px; }
.legal p { color:var(--muted); margin:4px 0; }
.legal h3 { font-size:1rem; margin:20px 0 4px; }
.legal h4 { font-size:.95rem; margin:14px 0 2px; color:var(--ink); }
.legal ul { color:var(--muted); margin:6px 0; padding-left:22px; }
.legal li { margin:3px 0; }
.legal .source { margin-top:26px; font-size:.85rem; }
.todo { display:inline-block; padding:8px 14px; border:3px solid var(--ink); border-radius:12px; background:#ffe08a;
        color:var(--ink) !important; font-weight:800; margin:6px 0 10px !important; }
.back { display:inline-block; margin-top:30px; }