/* ── 2048 — Glas auf Obsidian ─────────────────────────────────────────────────────────────────────────────────────
   Eigene Optik (Memo „Spiele-Optik mit Wow“): dunkler Obsidian-Tisch, langsam ziehende Polarlicht-Schleier, das Feld als
   Glasschale, die Kacheln als leuchtende Glassteine — je höher die Zahl, desto wärmer die Farbe und stärker das Leuchten,
   2048 in Gold. Reines CSS (transform/opacity), leicht für jedes Gerät; „Bewegung reduzieren“ schaltet die Schleier ab.
   Kachelfarben: Abschnitt „Kacheln“ (.k[data-v]). Raster: --zelle/--luecke (unten je Bildschirm). Startbildschirm-Norm sb-*.
   Schriften aus fonts.hirsing.eu: Space Grotesk 700 (Zahlen, Titel), Nunito (Bedienung). */
@font-face { font-family: 'Space Grotesk'; font-weight: 700; font-display: swap; src: url('https://fonts.hirsing.eu/space-grotesk-v22-latin/space-grotesk-v22-latin-700.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 {
  --nacht: #0b0a1a; --nacht2: #15122c; --glas: rgba(255, 255, 255, 0.06); --kante: rgba(190, 200, 255, 0.18);
  --text: #eef0ff; --leise: #9aa0c8; --akzent: #8fd3ff; --gold: #ffd36b; --gold2: #ff9f3a;
  --zahl: 'Space Grotesk', 'Segoe UI', sans-serif; --sans: 'Nunito', system-ui, sans-serif;
  --zelle: min(19vmin, 108px); --luecke: calc(var(--zelle) * 0.12); --rund: calc(var(--zelle) * 0.16);
  --rand: max(14px, env(safe-area-inset-left)); --oben: max(12px, env(safe-area-inset-top)); --unten: max(12px, env(safe-area-inset-bottom));
}
* { 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 80% 70% at 50% 45%, var(--nacht2), var(--nacht) 70%, #050410); }
button { font: inherit; color: inherit; cursor: pointer; }
.versteckt { display: none !important; }

/* Polarlicht-Schleier: drei weiche Farbflächen, die langsam wandern (nur transform → billig) */
.licht { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.licht i { position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; filter: blur(60px); opacity: 0.32; }
.licht i:nth-child(1) { background: radial-gradient(circle, #3b5bff, transparent 65%); left: -20vmax; top: -25vmax; animation: zieh1 26s ease-in-out infinite alternate; }
.licht i:nth-child(2) { background: radial-gradient(circle, #b13bff, transparent 65%); right: -25vmax; top: 10vmax; animation: zieh2 31s ease-in-out infinite alternate; }
.licht i:nth-child(3) { background: radial-gradient(circle, #00d0b0, transparent 65%); left: 10vmax; bottom: -35vmax; opacity: 0.2; animation: zieh1 37s ease-in-out infinite alternate-reverse; }
@keyframes zieh1 { to { transform: translate(18vmax, 12vmax) scale(1.15); } }
@keyframes zieh2 { to { transform: translate(-16vmax, 8vmax) scale(0.9); } }

/* ── Tisch: Kopf (Werte + Knöpfe), Feld, Joker — mittig gestapelt ───────── */
.tisch { position: fixed; inset: var(--oben) var(--rand) var(--unten); transition: transform 0.5s ease; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(10px, 2.2vh, 22px); }
.kopf { width: calc(var(--zelle) * 4 + var(--luecke) * 5); display: flex; align-items: center; gap: 10px; }
.werte { display: flex; gap: 8px; flex: 1; min-width: 0; }
.wert { position: relative; flex: 1; min-width: 0; padding: 6px 10px 7px; border-radius: 12px; background: var(--glas); border: 1px solid var(--kante); text-align: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.wert span { display: block; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--leise); }
.wert b { display: block; font-family: var(--zahl); font-size: clamp(17px, 2.6vmin, 24px); line-height: 1.15; font-variant-numeric: tabular-nums; }
.plus { position: absolute; left: 50%; top: -18px; transform: translateX(-50%); font-style: normal; font-family: var(--zahl); font-weight: 700; color: var(--gold); opacity: 0; pointer-events: none; }
.plus.an { animation: plus 0.8s ease-out; }
@keyframes plus { 0% { opacity: 1; transform: translate(-50%, 6px); } 100% { opacity: 0; transform: translate(-50%, -26px); } }
.knoepfe { display: flex; gap: 8px; }
.rund { width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border-radius: 50%; border: 1px solid var(--kante); background: rgba(20, 18, 44, 0.75); color: var(--akzent); }
.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 { visibility: hidden; }

/* ── Feld: Glasschale mit 16 Mulden ─────────────────────────────────────── */
.feld-rahmen { position: relative; }
.feld { position: relative; width: calc(var(--zelle) * 4 + var(--luecke) * 5); aspect-ratio: 1; border-radius: calc(var(--rund) * 1.6); outline: none;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.02) 40%, rgba(120, 130, 255, 0.05));
  border: 1px solid var(--kante); touch-action: none;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.1), inset 0 -18px 40px rgba(0, 0, 0, 0.35), 0 30px 70px rgba(0, 0, 0, 0.55), 0 0 0 6px rgba(255, 255, 255, 0.02); }
.feld:focus-visible { box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.1), 0 0 0 2px rgba(143, 211, 255, 0.35), 0 30px 70px rgba(0, 0, 0, 0.55); }
.mulden { position: absolute; inset: var(--luecke); display: grid; grid-template: repeat(4, 1fr) / repeat(4, 1fr); gap: var(--luecke); }
.mulden i { border-radius: var(--rund); background: rgba(0, 0, 0, 0.28); box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.45), inset 0 -1px 0 rgba(255, 255, 255, 0.05); }
.kacheln { position: absolute; inset: 0; }

/* ── Kacheln ────────────────────────────────────────────────────────────── */
/* Lage über --z/--s (Zeile/Spalte) — Gleiten = Übergang auf transform. Farbe je Wert über --f (Grundfarbe) und --g (Leuchten). */
.k { position: absolute; left: 0; top: 0; width: var(--zelle); height: var(--zelle); border-radius: var(--rund);
  transform: translate(calc(var(--luecke) + var(--s) * (var(--zelle) + var(--luecke))), calc(var(--luecke) + var(--z) * (var(--zelle) + var(--luecke))));
  transition: transform 0.11s ease-in-out; z-index: 1; display: grid; place-items: center; cursor: default;
  font-family: var(--zahl); font-weight: 700; font-size: calc(var(--zelle) * 0.42); line-height: 1; color: #fff; letter-spacing: -0.02em;
  background: linear-gradient(170deg, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0.08) 38%, transparent 39%), var(--f);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -6px 14px rgba(0, 0, 0, 0.28), 0 6px 14px rgba(0, 0, 0, 0.35), 0 0 var(--gr, 0px) var(--g, transparent);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); }
.k > span { position: relative; }
.k[data-v="2"]    { --f: linear-gradient(160deg, #6f86d6, #4a5fb0); }
.k[data-v="4"]    { --f: linear-gradient(160deg, #5aa0e6, #2f74c0); }
.k[data-v="8"]    { --f: linear-gradient(160deg, #31c4d8, #1188a8); --g: rgba(49, 196, 216, 0.35); --gr: 10px; }
.k[data-v="16"]   { --f: linear-gradient(160deg, #2fd6a6, #10a07a); --g: rgba(47, 214, 166, 0.4); --gr: 12px; }
.k[data-v="32"]   { --f: linear-gradient(160deg, #7ad94a, #3f9f1e); --g: rgba(122, 217, 74, 0.4); --gr: 14px; }
.k[data-v="64"]   { --f: linear-gradient(160deg, #c6d93a, #8fa312); --g: rgba(198, 217, 58, 0.45); --gr: 16px; }
.k[data-v="128"]  { --f: linear-gradient(160deg, #ffb84a, #e07a14); --g: rgba(255, 184, 74, 0.5); --gr: 18px; font-size: calc(var(--zelle) * 0.36); }
.k[data-v="256"]  { --f: linear-gradient(160deg, #ff8a4a, #d9481a); --g: rgba(255, 138, 74, 0.55); --gr: 20px; font-size: calc(var(--zelle) * 0.36); }
.k[data-v="512"]  { --f: linear-gradient(160deg, #ff5a7a, #c81e52); --g: rgba(255, 90, 122, 0.6); --gr: 22px; font-size: calc(var(--zelle) * 0.36); }
.k[data-v="1024"] { --f: linear-gradient(160deg, #d55aff, #8a1ed0); --g: rgba(213, 90, 255, 0.65); --gr: 26px; font-size: calc(var(--zelle) * 0.3); }
.k[data-v="2048"] { --f: linear-gradient(160deg, #fff1a8, var(--gold) 35%, var(--gold2)); --g: rgba(255, 211, 107, 0.85); --gr: 34px; font-size: calc(var(--zelle) * 0.3);
  color: #4a2800; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6); animation: gold 2.4s ease-in-out infinite; }
.k.hoch { --f: linear-gradient(160deg, #ffffff, #c9d6ff 40%, #8f9cff); --g: rgba(200, 210, 255, 0.9); --gr: 36px; font-size: calc(var(--zelle) * 0.26); color: #1c1f5a; text-shadow: none; }
@keyframes gold { 50% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -6px 14px rgba(0, 0, 0, 0.2), 0 6px 14px rgba(0, 0, 0, 0.35), 0 0 48px rgba(255, 211, 107, 0.95); } }
/* Erscheinen und Verschmelzen: die Kachel selbst gleitet (transform am .k), der Effekt sitzt am Inhalt (span + ::after) */
.k.neu > span, .k.neu::before { animation: auf 0.2s ease-out 0.08s backwards; }
.k.neu { animation: einblend 0.2s ease-out 0.08s backwards; }
@keyframes einblend { from { opacity: 0; } }
@keyframes auf { from { transform: scale(0.3); } }
.k.zusammen { z-index: 2; animation: pop 0.24s ease-out 0.1s; }
@keyframes pop { 40% { filter: brightness(1.5); } }
.k.zusammen > span { animation: zahlpop 0.24s ease-out 0.1s; }
@keyframes zahlpop { 40% { transform: scale(1.25); } }
.k.zusammen::after { content: ''; position: absolute; inset: -4px; border-radius: inherit; border: 2px solid var(--g, rgba(255, 255, 255, 0.6)); opacity: 0; animation: ring 0.45s ease-out 0.1s; }
@keyframes ring { 0% { opacity: 0.9; transform: scale(0.9); } 100% { opacity: 0; transform: scale(1.35); } }
.k.weg { opacity: 0; transform: translate(calc(var(--luecke) + var(--s) * (var(--zelle) + var(--luecke))), calc(var(--luecke) + var(--z) * (var(--zelle) + var(--luecke)))) scale(0.4); transition: transform 0.25s ease-in, opacity 0.25s ease-in; }
/* Auswahl für Tausch/Löschen */
.feld.waehlen .k { cursor: pointer; }
.feld.waehlen .k:hover { filter: brightness(1.2); }
.k.gewaehlt { outline: 3px solid #fff; outline-offset: 3px; }
.feld.loeschmodus .k:hover { outline: 3px solid #ff6b6b; outline-offset: 3px; }
.auswahl-hinweis { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); display: flex; align-items: center; gap: 10px; white-space: nowrap;
  padding: 7px 8px 7px 14px; border-radius: 999px; background: rgba(20, 18, 44, 0.92); border: 1px solid var(--kante); font-size: 14px; z-index: 5; }
.auswahl-hinweis[hidden] { display: none; }
.auswahl-hinweis button { padding: 4px 12px; border-radius: 999px; border: 1px solid var(--kante); background: none; color: var(--leise); }

/* ── Joker ──────────────────────────────────────────────────────────────── */
.joker { display: flex; gap: 8px; width: calc(var(--zelle) * 4 + var(--luecke) * 5); }
.joker-knopf { flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 6px 10px; border-radius: 14px;
  border: 1px solid var(--kante); background: var(--glas); font-weight: 700; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); transition: background .15s, opacity .15s; }
.joker-knopf svg { width: 18px; height: 18px; fill: none; stroke: var(--akzent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.joker-knopf b { min-width: 22px; padding: 1px 6px; border-radius: 999px; background: rgba(143, 211, 255, 0.18); color: var(--akzent); font-family: var(--zahl); font-size: 13px; }
.joker-knopf:hover:not(:disabled) { background: rgba(255, 255, 255, 0.1); }
.joker-knopf:disabled { opacity: 0.38; cursor: default; }
.joker-knopf.aktiv { background: rgba(143, 211, 255, 0.2); border-color: var(--akzent); }
.joker-knopf.blitz { animation: blitz 0.9s ease-out; }
@keyframes blitz { 0% { box-shadow: 0 0 0 0 rgba(255, 211, 107, 0.9); } 100% { box-shadow: 0 0 0 16px rgba(255, 211, 107, 0); } }

/* ── Meldung ────────────────────────────────────────────────────────────── */
.meldung { position: fixed; left: 50%; top: 16%; transform: translate(-50%, -10px); padding: 9px 20px; border-radius: 999px; z-index: 30; pointer-events: none;
  background: rgba(20, 18, 44, 0.92); border: 1px solid rgba(255, 211, 107, 0.5); color: var(--gold); font-family: var(--zahl); font-size: 20px; opacity: 0; transition: opacity .25s, transform .25s; }
.meldung.an { opacity: 1; transform: translate(-50%, 0); }

/* ── Startbildschirm (Norm sb-*) ───────────────────────────────────────── */
.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(8, 7, 22, 0.94) 0%, rgba(8, 7, 22, 0.75) 38%, rgba(8, 7, 22, 0.1) 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; }   /* Polster: overflow schneidet sonst den Leuchtschatten des Knopfs eckig ab */
.sb-titel { margin: 0; font-family: var(--zahl); font-weight: 700; font-size: clamp(76px, 11vw, 150px); line-height: 0.9; letter-spacing: -0.04em;
  background: linear-gradient(180deg, #fff6c8 0%, var(--gold) 45%, var(--gold2) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* kein filter: drop-shadow am Verlaufstext — erzeugte in Chrome einen sichtbaren dunklen Kasten hinter dem Titel */
.sb-unterzeile { margin: 12px 0 26px; color: var(--leise); font-size: clamp(15px, 1.5vw, 18px); }
.sb-start { width: 100%; margin: 0 0 14px; padding: 15px; border: 0; border-radius: 999px; font-family: var(--zahl); font-weight: 700; font-size: 26px; color: #3a2000;
  background: linear-gradient(180deg, #fff1a8, var(--gold) 50%, var(--gold2)); box-shadow: 0 10px 30px rgba(255, 170, 60, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.7); }
.sb-start:hover { filter: brightness(1.06); }
.sb-hilfe { border: 1px solid var(--kante); 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(--kante); border-radius: 999px; padding: 6px 14px; color: var(--leise); font-size: 13px; }

/* ── Ende / Pause ──────────────────────────────────────────────────────── */
#ende, #pause { background: rgba(5, 4, 16, 0.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.karte { width: min(400px, 100%); max-height: 100%; overflow-y: auto; padding: 26px; text-align: center; border-radius: 22px;
  background: linear-gradient(170deg, rgba(40, 36, 80, 0.97), rgba(16, 14, 36, 0.97)); border: 1px solid var(--kante); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); }
.karte h2 { margin: 0 0 10px; font-family: var(--zahl); font-size: 34px; }
.karte.sieg h2 { color: var(--gold); text-shadow: 0 0 24px rgba(255, 211, 107, 0.6); }
.karte p { margin: 6px 0; color: var(--leise); line-height: 1.45; }
.karte .gross { font-family: var(--zahl); font-size: 44px; color: var(--text); margin: 4px 0 2px; }
.karte a { color: var(--akzent); }
.knopf-gross { display: block; width: 100%; margin-top: 16px; padding: 12px; border: 0; border-radius: 999px; font-family: var(--zahl); font-weight: 700; font-size: 20px; color: #3a2000;
  background: linear-gradient(180deg, #fff1a8, var(--gold) 50%, var(--gold2)); }
.knopf-leise { display: block; width: 100%; margin-top: 8px; padding: 10px; border: 1px solid var(--kante); border-radius: 999px; background: none; color: var(--leise); }

/* ── Handy hochkant ────────────────────────────────────────────────────── */
@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  :root { --zelle: min(20.5vw, 13vh, 96px); }
  .tisch { padding-top: 52px; }   /* oben Platz für die Pille; Inhalt bleibt senkrecht mittig */
  .kopf { flex-wrap: wrap; }
  .knoepfe { position: fixed; top: var(--oben); right: var(--rand); }
  .rund { width: 36px; height: 36px; }
  .wert { padding: 5px 6px; } .wert span { font-size: 10px; }
  .joker-knopf { font-size: 13px; gap: 5px; padding: 6px; } .joker-knopf span { display: none; }   /* nur Symbol + Zähler */
  .sb { justify-content: center; align-items: flex-end; padding: 16px; background: linear-gradient(180deg, rgba(8, 7, 22, 0.25) 0%, rgba(8, 7, 22, 0.95) 48%); }
  .sb-titel { font-size: 84px; }
}
@media (min-width: 761px) and (min-aspect-ratio: 4/5) {
  .tisch { padding-top: 0; }
  body.im-menue .tisch { transform: translateX(min(20vw, 300px)); }   /* Demo rechts neben der Startkarte */
  .kopf { padding-left: 0; }
}
@media (max-height: 560px) and (min-aspect-ratio: 4/5) {   /* Handy quer: Feld links, Kopf und Joker rechts daneben */
  :root { --zelle: min(19vh, 90px); }
  .tisch { flex-direction: row; flex-wrap: wrap; align-content: center; padding-left: 70px; }
  .sb-karte { width: min(520px, 100%); }
  .sb-titel { font-size: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .licht i { animation: none; }
  .k { transition-duration: 0.01s; }
  .k[data-v="2048"] { animation: none; }
}

/* 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(6, 5, 20, 0.15), rgba(6, 5, 20, 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(6, 5, 20, 0.2), rgba(6, 5, 20, 0.6)), url('../img/hg-hoch.webp'); } }