/* snaken.com – Portal. Keine externen Schriften/Skripte (DSGVO, Tempo). */
:root{
  --bg:#0b1118; --panel:#111a24; --line:#223243; --text:#e8eef4; --muted:#8fa2b4;
  --accent:#7CFFB2; --accent-ink:#06210f; --hot:#ff5d8f;
  color-scheme:dark;
}
*{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
body{
  margin:0; background:var(--bg); color:var(--text); line-height:1.55;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  background-image:radial-gradient(900px 480px at 85% -10%,rgba(124,255,178,.10),transparent 60%),
                   radial-gradient(700px 420px at 0% 0%,rgba(255,93,143,.08),transparent 60%);
  background-repeat:no-repeat;
}
a{ color:var(--accent) } a:hover{ text-decoration:none }
:focus-visible{ outline:2px solid #fff; outline-offset:3px; border-radius:4px }
.skip{ position:absolute; left:-999px } .skip:focus{ left:12px; top:12px; background:#fff; color:#000; padding:8px 12px; z-index:9 }
.muted{ color:var(--muted) } .small{ font-size:.85rem }

.top,main,.foot{ width:min(1080px,100% - 32px); margin-inline:auto }
.top{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 0 }
.logo{ display:flex; align-items:center; gap:10px; color:var(--accent); text-decoration:none; font-weight:800; font-size:1.35rem; letter-spacing:-.01em }
.logo span{ color:var(--text) } .logo small{ color:var(--muted); font-weight:600; font-size:.8em }
.me{ font-size:.9rem; color:var(--muted) } .me b{ color:var(--accent) }

.hero{ padding:40px 0 28px }
.hero h1{ font-size:clamp(2.1rem,6vw,3.6rem); line-height:1.05; margin:0 0 14px; letter-spacing:-.02em }
.hero h1 em{ font-style:normal; color:var(--hot) }
.hero p{ max-width:60ch; font-size:1.1rem; color:#c5d3df; margin:0 0 22px }
.how{ list-style:none; display:flex; flex-wrap:wrap; gap:10px; padding:0; margin:0 }
.how li{ display:flex; align-items:center; gap:10px; padding:8px 14px 8px 8px; border:1px solid var(--line); border-radius:99px; background:var(--panel); font-size:.95rem }
.how b{ display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--accent); color:var(--accent-ink); font-size:.85rem }

h2{ font-size:1.5rem; margin:34px 0 16px }
.games{ display:grid; gap:20px }
.game{ display:grid; grid-template-columns:240px 1fr 300px; background:var(--panel); border:1px solid var(--line); border-radius:16px; overflow:hidden }
.cover{ background:#0d1620 center/cover no-repeat; min-height:180px }
.body{ padding:20px 22px } .body h3{ margin:0 0 6px; font-size:1.35rem } .body p{ margin:0 0 10px }
.play{ display:inline-block; margin-top:6px; padding:12px 22px; border-radius:10px; background:var(--accent); color:var(--accent-ink);
  font-weight:800; text-decoration:none; transition:transform .12s ease }
.play:hover{ transform:translateY(-2px) }
.ranks{ padding:18px 20px; border-left:1px solid var(--line); background:#0e161f }
.ranks label{ display:block; color:var(--muted); margin-bottom:6px; text-transform:uppercase; letter-spacing:.08em; font-size:.72rem; font-weight:700 }
select{ width:100%; min-height:44px; padding:9px 10px; border-radius:8px; border:1px solid var(--line); background:var(--bg); color:var(--text); font-size:.9rem }
table{ width:100%; border-collapse:collapse; margin-top:10px; font-size:.92rem; font-variant-numeric:tabular-nums }
td{ padding:5px 2px; border-bottom:1px solid #1a2633 } td:first-child{ width:30px; color:var(--muted) } td:last-child{ text-align:right; white-space:nowrap }
tr.me td{ color:var(--accent); font-weight:700 } tr.gap td{ border-top:2px dotted var(--line) }

.duel-box{ margin:8px 0 0; padding:22px 24px; border:1px solid var(--hot); border-radius:16px; background:linear-gradient(135deg,rgba(255,93,143,.14),rgba(255,93,143,.03)) }
.duel-box h2{ margin:0 0 8px } .duel-box ul{ margin:8px 0 12px; padding:0; list-style:none; color:#c5d3df }

.foot{ margin-top:56px; padding:22px 0 40px; border-top:1px solid var(--line); color:var(--muted); font-size:.9rem;
  display:flex; flex-wrap:wrap; gap:12px 24px; justify-content:space-between }
.foot p{ margin:0; max-width:70ch }
.foot nav a{ display:inline-block; padding:12px 6px }

/* Rechtstexte */
.legal{ max-width:72ch; padding-bottom:20px } .legal h1{ font-size:2rem; margin:24px 0 8px } .legal h2{ font-size:1.15rem; margin:26px 0 6px }
.todo{ background:#3a2a00; color:#ffd479; border:1px dashed #ffd479; border-radius:6px; padding:1px 6px; font-weight:700 }

@media (max-width:900px){
  .game{ grid-template-columns:1fr 1fr } .cover{ grid-column:1 / -1; min-height:150px }
  .ranks{ border-left:0; border-top:1px solid var(--line); grid-column:1 / -1 } .body{ grid-column:1 / -1 }
}
@media (prefers-reduced-motion:reduce){ .play{ transition:none } }