/* 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-family:inherit; font-size:.9rem; color:var(--muted); background:none; border:1px solid transparent; border-radius:99px; min-height:44px; padding:6px 12px; cursor:pointer; text-align:right }
.me:hover,.me:focus-visible{ border-color:var(--line); color:var(--text) } .me b{ color:var(--accent) }

.hero{ padding:28px 0 8px }
.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.4rem; margin:26px 0 14px }
/* Spielkacheln: ganze Kachel ist der Link; Raster wächst mit der Zahl der Spiele */
.games{ display:grid; gap:18px; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)) }
.tile{ position:relative; display:flex; flex-direction:column; background:var(--panel); border:1px solid var(--line); border-radius:14px; overflow:hidden;
  transition:transform .14s ease, border-color .14s ease }
.tile:hover,.tile:focus-within{ transform:translateY(-3px); border-color:var(--accent) }
.tile-link{ display:flex; flex-direction:column; flex:1; color:inherit; text-decoration:none }
.shot{ display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; background:#0d1620 }
.shot.missing{ background:linear-gradient(135deg,#16324a,#2a1a3a) }
.tile-body{ display:flex; flex-direction:column; gap:6px; flex:1; padding:14px 16px 16px }
.tile-body h3{ margin:0; font-size:1.12rem; line-height:1.2 }
.tagline{ font-size:.92rem; color:#c5d3df }
.controls{ font-size:.78rem }
.play{ display:inline-block; align-self:flex-start; margin-top:auto; padding:10px 20px; border-radius:10px; background:var(--accent); color:var(--accent-ink);
  font-weight:800; text-decoration:none }
.controls{ margin-bottom:10px }
.tile-body .play{ margin-top:auto }
.tile-rank{ position:absolute; top:8px; right:8px; min-height:36px; padding:6px 10px; border-radius:99px; border:1px solid rgba(255,255,255,.25);
  background:rgba(8,12,18,.78); color:#fff; font-family:inherit; font-weight:600; font-size:.78rem; line-height:1; cursor:pointer; backdrop-filter:blur(4px) }
.tile-rank:hover{ border-color:var(--accent); color:var(--accent) }

/* Zuletzt gespielt */
.resume{ display:flex; align-items:center; gap:12px; min-height:52px; margin:0 0 14px; padding:8px 14px 8px 8px; border:1px solid var(--line); border-radius:12px;
  background:var(--panel); color:var(--text); text-decoration:none }
.resume[hidden]{ display:none }
.resume:hover{ border-color:var(--accent) }
.resume img{ width:64px; height:36px; object-fit:cover; border-radius:6px; flex:none; background:#0d1620 }
.resume span{ display:flex; flex-direction:column; line-height:1.2; min-width:0 } .resume b{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.resume .go{ margin-left:auto; flex:none; color:var(--accent); font-weight:700; font-size:.9rem }

/* Bestenlisten: EIN Bereich, Spiel + Disziplin als Chips */
.ranks{ margin-top:8px; scroll-margin-top:12px }
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 10px }
.chip{ min-height:40px; padding:8px 14px; border-radius:99px; border:1px solid var(--line); background:var(--panel); color:var(--text); font-family:inherit; font-weight:600; font-size:.88rem; line-height:1.1; cursor:pointer }
.chips.sub .chip{ min-height:36px; padding:6px 12px; font-weight:500; font-size:.82rem; color:#c5d3df }
.chip:hover{ border-color:var(--accent) }
.chip[aria-pressed="true"],.chips.sub .chip[aria-pressed="true"]{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-weight:700 }
.board{ max-width:560px; padding:14px 18px 16px; background:var(--panel); border:1px solid var(--line); border-radius:14px }
.board .empty{ margin:4px 0 12px; color:#c5d3df }
table{ width:100%; border-collapse:collapse; font-size:.95rem; font-variant-numeric:tabular-nums }
td{ padding:7px 2px; border-bottom:1px solid #1a2633 } td:first-child{ width:34px; 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) }
.sr-only{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0 }

.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:560px){
  /* Handy: zwei Kacheln nebeneinander -> alle Spiele ohne langes Scrollen erreichbar */
  .top{ padding:14px 0 }
  .hero{ padding:14px 0 4px } .hero h1{ font-size:2rem; margin-bottom:8px } .hero p{ font-size:1rem; margin-bottom:12px }
  .how{ flex-wrap:nowrap; gap:6px } .how li{ flex:1 1 0; min-width:0; padding:6px 8px 6px 6px; gap:6px; font-size:.75rem; line-height:1.15 } .how b{ flex:none; width:20px; height:20px; font-size:.75rem }
  h2{ margin:20px 0 10px }
  .games{ grid-template-columns:1fr 1fr; gap:12px }
  .tile-body{ padding:10px 10px 12px; gap:4px } .tile-body h3{ font-size:.98rem } .tagline,.controls{ display:none }
  .tile-body .play{ align-self:stretch; text-align:center; padding:9px 8px }
  .tile-rank{ top:6px; right:6px; min-width:40px; min-height:40px; padding:6px; font-size:1rem } .tile-rank .lbl{ display:none }
  .board{ padding:12px 14px }
}
@media (prefers-reduced-motion:reduce){ .tile{ transition:none } .tile:hover{ transform:none } }