/* ── Snake — Lichtschlange im Terrarium ────────────────────────────────────────────────────────────────────────────
   Dunkles Moosgrün, das Spielfeld als Glaskasten mit Moosboden (Canvas, js/main.js zeichnet Schlange, Früchte, Funken).
   Startbildschirm-Norm sb-*. Schriften aus fonts.hirsing.eu: Lilita One (Titel, Ziffern), Nunito (Bedienung). */
@font-face { font-family: 'Lilita One'; font-display: swap; src: url('https://fonts.hirsing.eu/lilita-one-v17-latin/lilita-one-v17-latin-regular.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-weight: 400; font-display: swap; src: url('https://fonts.hirsing.eu/nunito-v32-latin/nunito-v32-latin-regular.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-weight: 700; font-display: swap; src: url('https://fonts.hirsing.eu/nunito-v32-latin/nunito-v32-latin-700.woff2') format('woff2'); }
:root {
  --moos: #06140d; --moos2: #0e2a1b; --gruen: #5dff9a; --gruen-d: rgba(93, 255, 154, 0.22); --text: #eafff1; --leise: #9dc2ab; --beere: #ff4f7b; --gold: #ffd25a;
  --titel: 'Lilita One', 'Nunito', sans-serif; --sans: 'Nunito', system-ui, sans-serif;
  --oben: max(12px, env(safe-area-inset-top)); --unten: max(12px, env(safe-area-inset-bottom)); --rand: max(12px, env(safe-area-inset-left));
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body { font-family: var(--sans); color: var(--text); user-select: none; -webkit-user-select: none;
  background: radial-gradient(ellipse 70% 60% at 50% 40%, #173d27, var(--moos2) 45%, var(--moos) 80%); }
button { font: inherit; color: inherit; cursor: pointer; }
.versteckt { display: none !important; }
.tisch { position: fixed; inset: var(--oben) var(--rand) var(--unten); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; transition: transform .5s ease; }
.kopf { display: flex; align-items: center; gap: 10px; width: min(640px, 100%); padding-left: 150px; }
.werte { flex: 1; display: flex; gap: 8px; }
.wert { padding: 5px 12px; border-radius: 12px; background: rgba(6, 30, 18, 0.7); border: 1px solid var(--gruen-d); text-align: center; min-width: 76px; }
.wert span { display: block; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--leise); }
.wert b { font-family: var(--titel); font-weight: 400; font-size: 22px; }
.extra-anzeige b { color: #b8a6ff; }
.wert[hidden] { display: none; }
.knoepfe { display: flex; gap: 8px; margin-left: auto; }
.rund { width: 42px; height: 42px; display: grid; place-items: center; padding: 0; border-radius: 50%; border: 1px solid var(--gruen-d); background: rgba(6, 30, 18, 0.75); color: var(--gruen); }
.rund svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rund .strich-aus { display: none; } .rund.aus .strich-aus { display: inline; } .rund.aus .welle { display: none; }
body.im-menue .knoepfe, body.im-menue .werte, body.im-menue .kreuz { visibility: hidden; }
.terrarium { padding: 10px; border-radius: 18px; background: linear-gradient(160deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.02) 40%); border: 1px solid rgba(160, 255, 200, 0.25);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(0, 0, 0, 0.4); }
#leinwand { display: block; border-radius: 10px; touch-action: none; }
.kreuz { display: none; grid-template: 'a b c' 52px 'd e f' 52px 'g h i' 52px / 52px 52px 52px; gap: 4px; }
.kreuz button { border-radius: 14px; border: 1px solid var(--gruen-d); background: rgba(6, 30, 18, 0.75); display: grid; place-items: center; }
.kreuz button:active { background: rgba(93, 255, 154, 0.25); }
.kreuz svg { width: 26px; height: 26px; fill: none; stroke: var(--gruen); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.kreuz [data-r="hoch"] { grid-area: b; } .kreuz [data-r="links"] { grid-area: d; } .kreuz [data-r="rechts"] { grid-area: f; } .kreuz [data-r="runter"] { grid-area: h; }
.meldung { position: fixed; left: 50%; top: 22%; transform: translate(-50%, -10px); padding: 8px 22px; border-radius: 999px; z-index: 30; pointer-events: none; background: rgba(6, 30, 18, 0.9);
  border: 1px solid var(--gruen-d); color: var(--gruen); font-family: var(--titel); font-size: 22px; opacity: 0; transition: opacity .25s, transform .25s; }
.meldung.an { opacity: 1; transform: translate(-50%, 0); }
.ebene { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 20; }
.sb { justify-content: flex-start; padding-left: clamp(16px, 7vw, 110px); background: linear-gradient(90deg, rgba(3, 12, 7, 0.94), rgba(3, 12, 7, 0.72) 38%, rgba(3, 12, 7, 0.08) 72%); }
.sb-karte { width: min(500px, calc(100% + 40px)); max-height: 100%; overflow-y: auto; padding: 8px 24px 24px; margin: 0 -20px; scrollbar-width: none; }
.sb-vortitel { font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gruen); }
.sb-titel { margin: 4px 0 0; font-family: var(--titel); font-weight: 400; font-size: clamp(76px, 10vw, 136px); line-height: 0.95;
  background: linear-gradient(180deg, #e6ffd0, var(--gruen) 55%, #1fb86a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sb-unterzeile { margin: 10px 0 22px; color: var(--leise); font-size: 16px; }
.sb-start { width: 100%; margin: 4px 0 14px; padding: 14px; border: 0; border-radius: 999px; font-family: var(--titel); font-size: 28px; color: #032412;
  background: linear-gradient(180deg, #c8ffdc, var(--gruen)); box-shadow: 0 0 28px rgba(93, 255, 154, 0.35); }
.sb-hilfe { border: 1px solid var(--gruen-d); border-radius: 14px; padding: 10px 14px; font-size: 14px; color: var(--leise); background: rgba(255, 255, 255, 0.03); }
.sb-hilfe summary { color: var(--text); font-weight: 700; cursor: pointer; }
.sb-hilfe p { margin: 8px 0 0; line-height: 1.5; }
.sb-hilfe h2, .sb-hilfe h3, .sb-hilfe h4 { color: var(--text); }
.sb-sprache { margin-top: 12px; background: none; border: 1px solid var(--gruen-d); border-radius: 999px; padding: 6px 14px; color: var(--leise); font-size: 13px; }
#ende, #pause { background: rgba(2, 10, 5, 0.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.karte { width: min(400px, 100%); padding: 26px; text-align: center; border-radius: 20px; background: linear-gradient(170deg, #134229, #071c10); border: 1px solid var(--gruen-d); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); }
.karte h2 { margin: 0 0 8px; font-family: var(--titel); font-weight: 400; font-size: 36px; color: var(--gruen); }
.karte .gross { font-family: var(--titel); font-size: 56px; }
.karte p { margin: 6px 0; color: var(--leise); }
.karte a { color: var(--gruen); }
.knopf-gross { display: block; width: 100%; margin-top: 16px; padding: 12px; border: 0; border-radius: 999px; font-family: var(--titel); font-size: 22px; color: #032412; background: linear-gradient(180deg, #c8ffdc, var(--gruen)); }
.knopf-leise { display: block; width: 100%; margin-top: 8px; padding: 10px; border: 1px solid var(--gruen-d); border-radius: 999px; background: none; color: var(--leise); }
@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  .kopf { padding-left: 0; padding-top: 50px; } .knoepfe { position: fixed; top: var(--oben); right: var(--rand); } .rund { width: 38px; height: 38px; }
  .kreuz { display: grid; } .tisch { gap: 8px; }
  .sb { justify-content: center; align-items: flex-end; padding: 16px; background: linear-gradient(180deg, rgba(3, 12, 7, 0.25), rgba(3, 12, 7, 0.95) 45%); }
  .sb-titel { font-size: 84px; }
}
@media (min-width: 761px) and (min-aspect-ratio: 4/5) { body.im-menue .tisch { transform: translateX(min(18vw, 280px)); } }

/* Hintergrundbild (Micha 30.10.: Startbild nicht leer, echte Illustration; Krea 2, ~/neo/werkzeug/gamezone/gpu/hg-bilder.py).
   Eigene Ebene hinter allem: im Menü kräftig, im Spiel abgedunkelt und leicht unscharf, damit das Feld vorn bleibt.
   Hochformat-Fenster bekommen hg-hoch. 3D-Spiele machen das in der Szene (_spiel/hintergrund.js). */
body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(3, 12, 7, 0.15), rgba(3, 12, 7, 0.5)), url('../img/hg-quer.webp') center / cover no-repeat;
  transition: opacity .6s ease, filter .6s ease; }
body:not(.im-menue)::before { opacity: 0.4; filter: blur(3px) saturate(0.85); }
@media (max-aspect-ratio: 9/10) { body::before { background-image: linear-gradient(180deg, rgba(3, 12, 7, 0.2), rgba(3, 12, 7, 0.6)), url('../img/hg-hoch.webp'); } }