/* Spiele-App: was NUR diese App braucht.
   Alles Gemeinsame steht in /app/basis.css und wird davor geladen: Farbtokens,
   Raster, Kopfzeile, Knoepfe, Werbestreifen, Begruessung, Toast, Bewegung.

   DER UNTERSCHIED ZU DEN GESCHWISTERN: hier wird gespielt, nicht gelesen.
   Die Buehne ist die einzige Flaeche, die scrollt (Solitaer braucht das in
   der Hoehe), alle Spielflaechen sind fuer EINEN Daumen gebaut, und jede
   Farbe hat ihr Dunkelmodus-Paar. @media erhoeht die Spezifitaet nicht:
   wer nur den Hellwert setzt, hat den Dunkelmodus kaputtgemacht. */

:root {
  /* Spielfarben. Eigene Namen, damit sie nichts aus der Basis ueberschreiben.
     Blau ist der Spieler, Orange der Gegner beziehungsweise der Akzent: dieselbe
     Zweiteilung wie auf der Startseite der Homepage. */
  --sp-blau:    #0091c8;
  --sp-orange:  #ff7d0f;
  --sp-gruen:   #17864a;   /* richtig, gewonnen */
  --sp-gelb:    #e8a800;   /* fast richtig */
  --sp-grau:    #8a93a1;   /* verbraucht, daneben */
  --sp-feld:    #e6eaef;   /* leere Spielfelder auf hellem Grund */
  --sp-tinte:   #1a1a1a;   /* Schrift auf hellen Spielsteinen */
  --sp-rot:     #d32f2f;   /* rote Kartenfarben im Solitaer */
}

@media (prefers-color-scheme: dark) {
  :root {
    /* PAARWEISE mitziehen, sonst leuchten helle Felder nachts wie Scheinwerfer. */
    --sp-blau:    #35b4e0;
    --sp-orange:  #ff9836;
    --sp-gruen:   #3ddc84;
    --sp-gelb:    #f2c14e;
    --sp-grau:    #6b7480;
    --sp-feld:    #232932;
    --sp-tinte:   #10131a;
    --sp-rot:     #f16b6b;
  }
}

/* Kopf (oder Spielleiste), Buehne, Werbung. Ein Element mit display:none belegt
   keine Rasterzeile, deshalb stimmt die Zahl in beiden Zustaenden. */
.app { grid-template-rows: auto minmax(0, 1fr) auto; }

/* Das Hinweiszeichen in der Kopfzeile, wie bei Teste dich. */
.kopf-knopf {
  flex: none;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--linie);
  border-radius: 50%;
  background: var(--karte);
  color: var(--blau);
  font-family: inherit;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}

/* ---------- Die Leiste waehrend eines Spiels ---------- */

/* :not(.hidden) ist Pflicht: die Basis kennt .hidden mit display:none, wird
   aber VOR dieser Datei geladen. Ein schlichtes display:grid haette bei
   gleicher Spezifitaet gewonnen, und die Leiste stuende auch im Menue. */
.spielleiste:not(.hidden) {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 6px;
  padding: 0 2px;
}
.sl-zurueck, .sl-neu {
  min-height: 40px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--leise);
  font-family: inherit;
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.sl-mitte {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  min-width: 0;
}
.sl-name {
  font-size: 17px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sl-stand {
  font-size: 14px;
  font-weight: 700;
  color: var(--leise);
  white-space: nowrap;
}

/* ---------- Die Buehne ---------- */

.buehne {
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 2px 2px 6px;
}

/* ---------- Das Menue ---------- */

.menue { display: grid; gap: 7px; }

.sp-karte {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 68px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-left: 4px solid var(--sp-blau);
  border-radius: 14px;
  background: var(--karte);
  color: var(--text);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform .08s ease;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
.sp-karte:active { transform: scale(.98); }
/* Jedes Spiel traegt seine eigene Kante, so findet man es beim zweiten Besuch
   ohne zu lesen. */
.sp-karte.k-solitaer { border-left-color: var(--sp-gruen); }
.sp-karte.k-2048     { border-left-color: var(--sp-orange); }
.sp-karte.k-wort     { border-left-color: var(--sp-gelb); }
.sp-karte.k-vier     { border-left-color: var(--sp-blau); }
.sp-karte.k-schlange { border-left-color: var(--sp-rot); }
.sp-karte.k-bitcoin  { border-left-color: #f7931a; }
/* Das ₿ ist ein Textzeichen, kein Emoji: ohne Farbe bliebe es unscheinbar.
   Bitcoin-Orange ist eine Motivfarbe und traegt in beiden Modi. */
.sp-karte.k-bitcoin .sp-symbol { color: #f7931a; font-weight: 800; }

.sp-symbol {
  flex: none;
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px;
  line-height: 1;
}
.sp-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sp-name { font-size: 18px; font-weight: 800; }
.sp-kurz { font-size: 13px; color: var(--leise); line-height: 1.3; }
.sp-best { font-size: 12.5px; font-weight: 700; color: var(--sp-blau); }
.sp-best:empty { display: none; }
.sp-pfeil { flex: none; font-size: 22px; font-weight: 700; color: var(--gedimmt); }

/* ---------- Gemeinsames fuer alle Spiele ---------- */

.spielraum { position: relative; display: grid; gap: 10px; }

/* Der Abschluss-Vorhang ueber dem Spielfeld: gewonnen, verloren, Runde vorbei.
   Liegt IM Spielraum, nicht ueber der ganzen App: Kopfzeile und Werbung bleiben
   bedienbar. */
.sp-ende {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(8, 10, 13, .62);
  border-radius: 14px;
  animation: spAuf .2s ease-out;
}
.sp-ende-kasten {
  background: var(--karte);
  border-radius: 16px;
  padding: 18px;
  max-width: 340px;
  width: 100%;
  text-align: center;
  display: grid;
  gap: 10px;
}
.sp-ende-kasten h3 { margin: 0; font-size: 24px; }
.sp-ende-kasten p { margin: 0; font-size: 16px; color: var(--leise); line-height: 1.4; }
.sp-ende-kasten .gross { font-size: 20px; font-weight: 800; color: var(--text); }
/* Die Zaehlzeile unter dem Spruch (02.08.2026). Sie traegt die Zahl, die
   bleibt, und ist deshalb leiser gesetzt als der Satz darueber, der nur einmal
   zum Schmunzeln da ist. */
.sp-ende-kasten .sp-ende-fein {
  font-size: 13px;
  font-weight: 700;
  color: var(--gedimmt);
  letter-spacing: .2px;
}
@keyframes spAuf { from { opacity: 0; } to { opacity: 1; } }

/* Eine Zeile Bedienknoepfe unter dem Spielfeld (Neu, Zuruecknehmen, Modus). */
.sp-zeile {
  display: flex;
  gap: 7px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.sp-knopf {
  min-height: 42px;
  padding: 0 16px;
  border: 2px solid var(--linie);
  border-radius: 12px;
  background: var(--karte);
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  transition: transform .08s ease;
}
.sp-knopf:active { transform: scale(.96); }
.sp-knopf:disabled { opacity: .45; }
.sp-knopf.an { background: var(--sp-blau); border-color: var(--sp-blau); color: #fff; }

.sp-hinweis {
  font-size: 12.5px;
  color: var(--gedimmt);
  text-align: center;
  line-height: 1.35;
}

/* ---------- 2048 ---------- */

.g2048-brett {
  position: relative;
  width: min(100%, 430px);
  margin: 0 auto;
  aspect-ratio: 1 / 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 7px;
  padding: 7px;
  border-radius: 14px;
  background: var(--sp-feld);
  touch-action: none;   /* Wischen gehoert dem Spiel, nicht dem Browser */
}
.g2048-z {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: var(--karte);
  font-weight: 800;
  font-size: clamp(18px, 7.4vw, 34px);
  color: var(--sp-tinte);
}
.g2048-z.neu    { animation: gPop .16s ease-out; }
.g2048-z.frisch { animation: gPuls .18s ease-out; }
@keyframes gPop  { from { transform: scale(.4); } to { transform: none; } }
@keyframes gPuls { 0% { transform: scale(1); } 55% { transform: scale(1.12); } 100% { transform: none; } }

/* Die Wertstufen wandern von Hell ueber Patock-Blau nach Orange. Ab 256 ist
   die Flaeche kraeftig genug, dass die Schrift auf Weiss wechselt. */
.g2048-z.v2    { background: #eef3f7; }
.g2048-z.v4    { background: #dcebf3; }
.g2048-z.v8    { background: #b9dcec; }
.g2048-z.v16   { background: #8ecadf; }
.g2048-z.v32   { background: #5db3d4; color: #fff; }
.g2048-z.v64   { background: #0091c8; color: #fff; }
.g2048-z.v128  { background: #0f7ba7; color: #fff; }
.g2048-z.v256  { background: #ff9836; color: #fff; font-size: clamp(16px, 6.4vw, 30px); }
.g2048-z.v512  { background: #ff7d0f; color: #fff; font-size: clamp(16px, 6.4vw, 30px); }
.g2048-z.v1024 { background: #e05f00; color: #fff; font-size: clamp(14px, 5.6vw, 26px); }
.g2048-z.v2048 { background: #c94f00; color: #fff; font-size: clamp(14px, 5.6vw, 26px);
                 box-shadow: 0 0 14px rgba(255, 125, 15, .55); }
.g2048-z.vmehr { background: #16191c; color: #fff; font-size: clamp(14px, 5.6vw, 26px); }
@media (prefers-color-scheme: dark) {
  .g2048-z.v2  { background: #2a3038; color: #f2f4f7; }
  .g2048-z.v4  { background: #2f3c47; color: #f2f4f7; }
  .g2048-z.v8  { background: #274b60; color: #f2f4f7; }
  .g2048-z.v16 { background: #1f5c7d; color: #fff; }
  .g2048-z.v32 { background: #147098; color: #fff; }
  .g2048-z.vmehr { background: #f2f4f7; color: #10131a; }
}

/* ---------- Wort-Raten ---------- */

.wort-gitter {
  display: grid;
  gap: 5px;
  width: min(100%, 330px);
  margin: 0 auto;
}
.wort-reihe { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.wz {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--linie);
  border-radius: 8px;
  background: var(--karte);
  font-size: clamp(20px, 7vw, 30px);
  font-weight: 800;
  text-transform: uppercase;
  color: var(--text);
}
.wz.voll { border-color: var(--gedimmt); animation: gPop .1s ease-out; }
/* Die drei Antworten des Spiels. Schrift immer auf --sp-tinte gerechnet:
   auf Gelb ist Weiss unlesbar (gemessen 2,1:1 in der Test-App). */
.wz.richtig { background: var(--sp-gruen); border-color: var(--sp-gruen); color: #fff; }
.wz.drin    { background: var(--sp-gelb);  border-color: var(--sp-gelb);  color: var(--sp-tinte); }
.wz.weg     { background: var(--sp-grau);  border-color: var(--sp-grau);  color: #fff; }
@media (prefers-color-scheme: dark) {
  .wz.richtig { color: var(--sp-tinte); }
  .wz.weg     { color: var(--sp-tinte); }
}
.wort-reihe.wackelt { animation: wWackel .3s ease-in-out; }
@keyframes wWackel {
  0%, 100% { transform: none; }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

/* Die Tastatur. QWERTZ, drei Reihen, die dritte mit Enter und Loeschen. */
.wort-tasten { display: grid; gap: 5px; width: min(100%, 460px); margin: 0 auto; }
.wt-reihe { display: flex; gap: 4px; justify-content: center; }
.wt {
  flex: 1;
  min-width: 0;
  max-width: 42px;
  min-height: 46px;
  border: 0;
  border-radius: 7px;
  background: var(--sp-feld);
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
.wt:active { filter: brightness(1.15); transform: scale(.94); }
.wt.breit { max-width: 64px; font-size: 12px; }
.wt.richtig { background: var(--sp-gruen); color: #fff; }
.wt.drin    { background: var(--sp-gelb);  color: var(--sp-tinte); }
.wt.weg     { background: var(--sp-grau);  color: #fff; opacity: .75; }
@media (prefers-color-scheme: dark) {
  .wt.richtig, .wt.weg { color: var(--sp-tinte); }
}

/* ---------- Vier gewinnt ---------- */

.vier-brett {
  width: min(100%, 440px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
  padding: 8px;
  border-radius: 14px;
  background: var(--sp-blau);
  touch-action: manipulation;
}
@media (prefers-color-scheme: dark) {
  /* Das Brett bleibt das dunkle Blau der Marke, nicht das aufgehellte: eine
     leuchtend blaue Vollflaeche waere nachts der hellste Fleck der Seite. */
  .vier-brett { background: #0f5f80; }
}
.vf {
  aspect-ratio: 1 / 1;
  border: 0;
  border-radius: 50%;
  background: var(--bg);
  padding: 0;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
.vf.p1 { background: radial-gradient(circle at 34% 30%, #ffd24d, #e8a800 68%); }
.vf.p2 { background: radial-gradient(circle at 34% 30%, #ff6b6b, var(--sp-rot) 68%); }
.vf.faellt { animation: vFall .22s ease-in; }
@keyframes vFall { from { transform: translateY(-260%); } to { transform: none; } }
.vf.sieg { box-shadow: 0 0 0 3px #fff, 0 0 12px 3px rgba(255, 255, 255, .8); }

.vier-kopf {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  min-height: 24px;
}
.vier-stein {
  display: inline-block;
  width: 18px; height: 18px;
  border-radius: 50%;
  vertical-align: -3px;
}
.vier-stein.s1 { background: #e8a800; }
.vier-stein.s2 { background: var(--sp-rot); }

/* ---------- Schlange ---------- */

.schl-feld {
  position: relative;
  width: min(100%, 430px);
  margin: 0 auto;
  border-radius: 14px;
  overflow: hidden;
  background: var(--sp-feld);
  touch-action: none;   /* Wischen steuert die Schlange */
}
.schl-feld canvas { display: block; width: 100%; height: auto; }

/* Steuerkreuz fuer alle, die nicht wischen moegen. Auf Geraeten mit Maus
   uebernehmen die Pfeiltasten, das Kreuz bleibt trotzdem nutzbar. */
.schl-pad {
  display: grid;
  grid-template-columns: repeat(3, 56px);
  grid-template-rows: repeat(2, 46px);
  gap: 5px;
  justify-content: center;
}
.schl-pad .sp-knopf { min-height: 0; padding: 0; font-size: 20px; }
.schl-pad .p-hoch    { grid-column: 2; grid-row: 1; }
.schl-pad .p-links   { grid-column: 1; grid-row: 2; }
.schl-pad .p-runter  { grid-column: 2; grid-row: 2; }
.schl-pad .p-rechts  { grid-column: 3; grid-row: 2; }

/* ---------- Solitaer ---------- */

/* Die Kartenbreite rechnet app.js aus der Brettbreite und schreibt sie in
   --kb. Alles andere folgt daraus, deshalb gibt es hier kaum feste Pixel. */
.sol { --kb: 44px; display: grid; gap: 8px; }

.sol-oben, .sol-spalten {
  display: grid;
  grid-template-columns: repeat(7, var(--kb));
  gap: 5px;
  justify-content: center;
}

.sol-platz {
  position: relative;
  width: var(--kb);
  height: calc(var(--kb) * 1.42);
  border: 2px dashed var(--linie);
  border-radius: 6px;
}
.sol-platz .sol-leer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--kb) * .45);
  color: var(--linie);
}

/* Eine Spalte waechst nach unten, die Karten liegen versetzt uebereinander.
   Die Hoehe setzt das Spiel selbst, sonst haette die Buehne nichts zu scrollen. */
.sol-stapel { position: relative; width: var(--kb); }

/* Der Halter traegt den Versatz in der Spalte, die Karte selbst bleibt dumm.
   Kein z-index noetig: spaeter im Dokument liegt von selbst obenauf. */
.sk-halter {
  position: absolute;
  left: 0;
  width: var(--kb);
  height: calc(var(--kb) * 1.42);
}

/* Auf den Plaetzen der oberen Reihe deckt die Karte den gestrichelten Rahmen
   exakt ab (der Platz hat 2 px Rand, box-sizing rechnet ihn nach innen). */
.sol-platz > .sk { position: absolute; top: -2px; left: -2px; }

.sk {
  position: relative;
  width: var(--kb);
  height: calc(var(--kb) * 1.42);
  border-radius: 6px;
  border: 1px solid #b9c0ca;
  background: #fff;
  color: #1a1a1a;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 2px 3px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
}
.sk .sk-ecke { align-self: flex-start; font-size: calc(var(--kb) * .30); letter-spacing: -.5px; }
.sk .sk-mitte { font-size: calc(var(--kb) * .48); margin-bottom: calc(var(--kb) * .1); }
.sk.rot { color: var(--sp-rot); }
@media (prefers-color-scheme: dark) {
  .sk { background: #e8ebef; border-color: #3a424c; color: #10131a; }
  .sk.rot { color: #c22525; }
}
/* Die Rueckseite: Patock-Blau mit feinem Muster, sofort als verdeckt lesbar. */
.sk.zu {
  background: repeating-linear-gradient(135deg, #0091c8 0 6px, #0080b1 6px 12px);
  border-color: #006c95;
  cursor: pointer;
}
.sk.zu > * { visibility: hidden; }
.sk.gewaehlt { outline: 3px solid var(--sp-orange); outline-offset: 1px; z-index: 3; }
.sk.frisch { animation: gPop .14s ease-out; }

/* ---------- Englisch ---------- */

.eng { display: grid; gap: 10px; }

.eng-katgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}
.eng-kat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-height: 92px;
  padding: 10px 6px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: var(--karte);
  color: var(--text);
  font-family: inherit;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  transition: transform .08s ease;
}
.eng-kat:active { transform: scale(.97); }
.eng-kat-symbol { font-size: 30px; line-height: 1; }
.eng-kat-name { font-size: 14px; font-weight: 700; text-align: center; }
.eng-kat-sterne { font-size: 13px; color: var(--sp-gelb); letter-spacing: 2px; }

.eng-wege { display: grid; gap: 8px; max-width: 430px; margin: 8px auto 0; width: 100%; }
.eng-weg {
  min-height: 66px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 18px;
}
.eng-weg small { font-size: 12.5px; font-weight: 600; color: var(--leise); }

.eng-karten { display: grid; gap: 6px; }
.eng-karte {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 6px 12px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: var(--karte);
  color: var(--text);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
.eng-karte:active { transform: scale(.98); }
.eng-karte-bild { flex: none; font-size: 28px; line-height: 1; }
.eng-karte-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.eng-karte-text b { font-size: 17px; }
.eng-karte-text small { font-size: 12.5px; color: var(--leise); }
.eng-karte-ton { flex: none; font-size: 18px; opacity: .6; }

.eng-frage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 0 2px;
}
.eng-frage-bild { font-size: clamp(64px, 22vw, 96px); line-height: 1.1; }
.eng-frage-wort {
  border: 0;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: clamp(28px, 9vw, 40px);
  font-weight: 800;
  cursor: pointer;
}
.eng-frage small { font-size: 13px; color: var(--leise); }

.eng-antworten {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: min(100%, 430px);
  margin: 0 auto;
}
.eng-a {
  min-height: 56px;
  border: 2px solid var(--linie);
  border-radius: 14px;
  background: var(--karte);
  color: var(--text);
  font-family: inherit;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  overflow: hidden;
  text-overflow: ellipsis;
}
.eng-antworten.bilder .eng-a { min-height: 84px; font-size: 44px; }
.eng-a:active { transform: scale(.97); }
/* Die Aufloesung: richtig wird gruen, der eigene Fehlgriff rot, der Rest tritt
   zurueck. Schriftfarben wie beim Wort-Raten gerechnet (Gelb-Regel). */
.eng-a.richtig { background: var(--sp-gruen); border-color: var(--sp-gruen); color: #fff; }
.eng-a.falsch  { background: var(--sp-rot); border-color: var(--sp-rot); color: #fff; }
.eng-a.leise   { opacity: .45; }
@media (prefers-color-scheme: dark) {
  .eng-a.richtig, .eng-a.falsch { color: var(--sp-tinte); }
}
.eng-antworten.bilder .eng-a.richtig,
.eng-antworten.bilder .eng-a.falsch { filter: none; }

.eng-info {
  margin: 2px 0 0;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
}
.eng-endsterne { color: var(--sp-gelb); letter-spacing: 6px; }

/* ---------- Bitcoin-Quiz ---------- */

.bq { display: grid; gap: 10px; }

/* Die Startkarte vor der ersten Runde: dort steht auch der Pflichthinweis,
   dass das Quiz Wissen gibt und keine Anlageberatung ist. */
.bq-karte {
  display: grid;
  gap: 10px;
  width: min(100%, 430px);
  margin: 8px auto 0;
  padding: 18px;
  border-radius: 16px;
  background: var(--karte);
  text-align: center;
}
.bq-karte h3 { margin: 0; font-size: 24px; }
.bq-karte p { margin: 0; font-size: 15px; color: var(--leise); line-height: 1.45; }
.bq-symbol {
  font-size: 46px;
  font-weight: 800;
  line-height: 1;
  color: #f7931a;   /* Bitcoin-Orange, Motivfarbe wie die Muenze selbst */
}
@media (prefers-color-scheme: dark) {
  /* Das Orange eine Stufe heller, sonst saeuft es auf dunklem Grund ab. */
  .bq-symbol { color: #f9b23c; }
  .sp-karte.k-bitcoin .sp-symbol { color: #f9b23c; }
}
.bq-best { margin: 0; font-size: 14px; font-weight: 700; color: var(--sp-blau); }
.bq-klein {
  margin: 0;
  font-size: 12px;
  color: var(--gedimmt);
  text-align: center;
  line-height: 1.35;
}

/* Frage und Antworten */
.bq-stufe {
  margin: 0;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--gedimmt);
}
.bq-frage {
  margin: 0;
  text-align: center;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.35;
  padding: 0 2px;
}
.bq-antworten {
  display: grid;
  gap: 8px;
  width: min(100%, 430px);
  margin: 0 auto;
}
.bq-a {
  min-height: 54px;
  padding: 10px 14px;
  border: 2px solid var(--linie);
  border-radius: 14px;
  background: var(--karte);
  color: var(--text);
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  transition: transform .08s ease;
}
.bq-a:active { transform: scale(.97); }
/* Die Aufloesung: richtig wird gruen, der eigene Fehlgriff rot, der Rest
   tritt zurueck. Farben sind die Paar-Variablen, der Dunkelmodus zieht mit. */
.bq-a.richtig { background: var(--sp-gruen); border-color: var(--sp-gruen); color: #fff; }
.bq-a.falsch  { background: var(--sp-rot);   border-color: var(--sp-rot);   color: #fff; }
.bq-a.leise   { opacity: .45; }
@media (prefers-color-scheme: dark) {
  /* Auf den aufgehellten Nachtfarben ist dunkle Schrift lesbarer (Gelb-Regel
     aus dem Wort-Raten, dort gemessen). */
  .bq-a.richtig, .bq-a.falsch { color: var(--sp-tinte); }
}

/* Die Erklaerung nach der Antwort: eigener Kasten, damit sie als Lernstoff
   auffaellt und nicht als Fussnote untergeht. */
.bq-info {
  margin: 0;
  width: min(100%, 430px);
  margin-left: auto;
  margin-right: auto;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--sp-feld);
  font-size: 14.5px;
  line-height: 1.45;
}
.bq-weiter { display: block; width: min(100%, 430px); margin: 0 auto; }

/* ---------- Der Muenzregen bei 10 von 10 ---------- */

/* Liegt ueber dem Spielraum, faengt aber keine Tipps ab: pointer-events none
   ist Pflicht, sonst blockiert die Belohnung die Bedienung. */
.bq-regen {
  position: absolute;
  inset: 0;
  z-index: 6;
  overflow: hidden;
  pointer-events: none;
  border-radius: 14px;
}
.bq-muenze {
  position: absolute;
  top: -70px;
  will-change: transform;
  animation: bqFall 3s linear forwards;
}
/* Der 3D-Muenzflip laeuft auf einer eigenen Huelle: aeusseres Element faellt,
   inneres dreht. Beides auf einem Element wuerde sich gegenseitig ueberschreiben. */
.bq-flip { display: block; animation: bqFlip 1.2s linear infinite; }
.bq-muenze svg { display: block; width: 100%; height: auto; }
@keyframes bqFall {
  from { transform: translateY(-8vh) rotate(-10deg); }
  to   { transform: translateY(112vh) rotate(14deg); }
}
@keyframes bqFlip {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(360deg); }
}

/* ---------- Der Butler mit dem Silbertablett ---------- */

.bq-butler {
  position: absolute;
  inset: 0;
  z-index: 7;   /* ueber dem Regen (6): die Muenzen fallen hinter ihm weiter */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 14px;
  background: radial-gradient(ellipse at 50% 42%, rgba(22, 26, 34, .55), rgba(8, 10, 13, .93));
  animation: spAuf .25s ease-out;
  cursor: pointer;   /* ein Tipp irgendwo ueberspringt die Anfahrt */
}
/* Die Kamerafahrt: der Butler kommt mit leichtem Schritt-Wippen von weitem,
   dann faehrt der Blick auf das Tablett mit der Muenze. Der Drehpunkt liegt
   auf dem Tablett (im SVG bei etwa 24 Prozent Breite, 35 Prozent Hoehe). */
.bq-szene {
  width: min(78%, 270px);
  transform-origin: 24% 35%;
  animation: bqAuftritt 4.6s cubic-bezier(.45, .05, .35, 1) forwards;
}
.bq-szene svg { display: block; width: 100%; height: auto; }
@keyframes bqAuftritt {
  0%   { transform: scale(.25) translateY(10px); }
  10%  { transform: scale(.38) translateY(-4px); }
  20%  { transform: scale(.52) translateY(7px); }
  30%  { transform: scale(.68) translateY(-4px); }
  40%  { transform: scale(.85) translateY(5px); }
  50%  { transform: scale(1) translateY(0); }
  62%  { transform: scale(1) translateY(0); }
  100% { transform: scale(3.4) translateY(0); }
}
/* Der wandernde Glanzstreifen auf der grossen Muenze. */
.bq-wander { animation: bqWander 2.2s ease-in-out infinite; }
@keyframes bqWander {
  0%        { transform: translateX(-45px) skewX(-18deg); }
  60%, 100% { transform: translateX(150px) skewX(-18deg); }
}

/* Das Endbild: Text und Knoepfe erscheinen erst, wenn die Fahrt vorbei ist
   oder uebersprungen wurde (Klasse fertig). */
.bq-endpanel {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  width: min(92%, 340px);
  padding: 16px;
  border-radius: 16px;
  background: var(--karte);
  text-align: center;
  display: none;
  gap: 8px;
  cursor: auto;
}
.bq-endpanel h3 { margin: 0; font-size: 21px; }
.bq-butler.fertig .bq-endpanel { display: grid; animation: spAuf .25s ease-out; }
.bq-butler.fertig .bq-szene { animation: none; transform: scale(3.4); }
/* Ruhemodus (weniger Bewegung): kein Zoom, kein Wippen, kein Glanzlauf.
   Der Butler steht einfach da und ueberreicht die Muenze. Steht NACH der
   fertig-Regel, damit er deren Zoom sicher ueberstimmt. */
.bq-butler.ruhig { animation: none; cursor: auto; }
.bq-butler.ruhig .bq-szene { animation: none; transform: none; }
.bq-butler.ruhig .bq-wander { animation: none; }

/* ---------- Kleine Bildschirme ---------- */

@media (max-height: 640px) {
  .sp-karte { min-height: 56px; padding: 7px 10px; }
  .sp-symbol { width: 36px; height: 36px; font-size: 24px; }
  .sp-name { font-size: 16px; }
  .wt { min-height: 40px; }
  .schl-pad { grid-template-columns: repeat(3, 50px); grid-template-rows: repeat(2, 40px); }
}

@media (prefers-reduced-motion: reduce) {
  .g2048-z.neu, .g2048-z.frisch, .wz.voll, .wort-reihe.wackelt,
  .vf.faellt, .sk.frisch, .sp-ende,
  .bq-muenze, .bq-flip, .bq-szene, .bq-wander, .bq-butler, .bq-endpanel { animation: none; }
}

/* ---------- Bitcoin-Quiz: Bildsprache ----------
   Manni, 01.08.2026: "baue noch icons und bilder ein, damit es nicht so
   trocken wirkt." Jede Frage traegt ein Motiv (oder die Goldmuenze), die
   Antworten bekommen A-B-C-D-Plaketten in Bitcoin-Orange, und die
   Punktreihe oben zeigt die Runde als Muenzenkette. Orange #f7931a ist
   Motivfarbe der Muenze und bleibt in beiden Modi gleich (wie die
   Leinwandfarben der Collagen-App). */
.bq-punkte { display: flex; justify-content: center; gap: 6px; margin: 2px 0 0; }
.bq-punkt {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: transparent;
  border: 2px solid var(--linie);
}
.bq-punkt.gold { background: #f7931a; border-color: #b96a00; }
.bq-punkt.rot { background: var(--sp-rot); border-color: var(--sp-rot); }

.bq-kopfbild { display: flex; justify-content: center; min-height: 54px; align-items: center; }
.bq-motiv { font-size: 46px; line-height: 1; }
.bq-kopfmuenze svg { width: 48px; height: 48px; display: block; }

.bq-a { display: flex; align-items: center; gap: 10px; text-align: left; }
.bq-buchstabe {
  flex: none;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: #f7931a;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
}
.bq-a.richtig .bq-buchstabe { background: #fff; color: var(--sp-gruen); }
.bq-a.falsch .bq-buchstabe { background: #fff; color: var(--sp-rot); }
.bq-atext { flex: 1; min-width: 0; }

.bq-symbol svg, .bq-ende-muenze svg { width: 84px; height: 84px; display: block; margin: 0 auto; }
.bq-ende-muenze { display: block; margin-bottom: 4px; }

/* Die Erklaerung bekommt ihr Licht. */
.bq-info::before { content: '💡 '; }

/* ---------- Muenzen, die durchs Quiz tanzen ----------
   Halbtransparent und HINTER dem Inhalt: Stimmung ja, Ablenkung nein. */
.bq-tanzflaeche {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.bq-tanz {
  position: absolute;
  opacity: .34;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.bq-tanz svg { width: 100%; height: 100%; display: block; }
.bq-tanz.rollt { animation-name: bqRollt; }
.bq-tanz.huepft { animation-name: bqHuepft; animation-timing-function: ease-in-out; }
.bq-tanz.tanzt { animation-name: bqTanzt; animation-timing-function: ease-in-out; }
@keyframes bqRollt {
  from { transform: translateX(-18vw) rotate(0deg); }
  to   { transform: translateX(105vw) rotate(1080deg); }
}
@keyframes bqHuepft {
  0%, 100% { transform: translateY(0) scaleY(1); }
  12%      { transform: translateY(-46px) scaleY(1.04); }
  24%      { transform: translateY(0) scaleY(.88); }
  30%      { transform: translateY(0) scaleY(1); }
  55%      { transform: translateY(-28px) scaleY(1.03); }
  70%      { transform: translateY(0) scaleY(.92); }
  76%      { transform: translateY(0) scaleY(1); }
}
@keyframes bqTanzt {
  0%, 100% { transform: rotate(-13deg) translateY(0); }
  25%      { transform: rotate(11deg) translateY(-9px); }
  50%      { transform: rotate(-9deg) translateY(0); }
  75%      { transform: rotate(13deg) translateY(-7px); }
}
/* Die Buehne braucht einen Bezugsrahmen fuer die Tanzflaeche. */
.buehne { position: relative; }
@media (prefers-reduced-motion: reduce) {
  .bq-tanz { animation: none; display: none; }
}

/* ---------- Jahrzehnte-Quiz ----------
   Zielgruppe Senioren: alles eine Nummer groesser als beim Bitcoin-Quiz,
   Fragen 21px, Antworten 17,5px, hohe Knoepfe. Sepia-Braun als Motivfarbe
   (alte Fotos), traegt in beiden Modi. */

.sp-karte.k-jahrzehnte { border-left-color: #b08968; }

.jz-kopf { text-align: center; display: grid; gap: 6px; margin-top: 4px; }
.jz-kopf h3 { margin: 0; font-size: 24px; }
.jz-kopf p { margin: 0 auto; font-size: 16px; color: var(--leise); line-height: 1.45; max-width: 430px; }

.jz-wahl { display: grid; gap: 8px; width: min(100%, 460px); margin: 4px auto 0; }
.jz-dekade {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 72px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-left: 4px solid #b08968;
  border-radius: 14px;
  background: var(--karte);
  color: var(--text);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform .08s ease;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
.jz-dekade:active { transform: scale(.98); }
.jz-symbol {
  flex: none;
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px;
  line-height: 1;
}
.jz-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.jz-name { font-size: 19px; font-weight: 800; }
.jz-unter { font-size: 14px; color: var(--leise); line-height: 1.3; }
.jz-best { font-size: 12.5px; font-weight: 700; color: #b08968; }
.jz-pfeil { flex: none; font-size: 22px; font-weight: 700; color: var(--gedimmt); }

/* Die Jahreszahl ueber der Frage: kleine Orientierung, wo man gerade ist. */
.jz-jahr {
  text-align: center;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .4px;
  color: var(--gedimmt);
}

/* Die Senioren-Schriftgroessen im Quiz selbst. */
.jz .bq-frage { font-size: 21px; }
.jz .bq-a { min-height: 60px; font-size: 17.5px; }
.jz .bq-info { font-size: 16.5px; }
.jz .bq-buchstabe { background: #b08968; }
.jz-ende-symbol { font-size: 46px; line-height: 1; }

/* ---------- Solitaer: der magische Kartendreh ----------

   Eine einzige Karte, ein echtes Umdrehen. Sie startet rueckwaerts
   (rotateY 180 Grad), traegt die erste Haelfte der Drehung ihre blaue
   Rueckseite als Auflage und zeigt erst ab der Kante ihr Gesicht. Weil die
   Auflage genau bei 90 Grad verschwindet, sieht man nie eine spiegelverkehrte
   Schrift. Dazu hebt sie sich kurz an, der Schatten wandert mit, und am Ende
   federt sie eine Spur nach: das ist der Unterschied zwischen umschalten
   und umdrehen. */

.sk.dreht {
  z-index: 4;
  animation: skDreht 520ms cubic-bezier(.22, .9, .28, 1) both,
             skDrehSchatten 520ms ease-in-out both;
}
@keyframes skDreht {
  0%   { transform: perspective(700px) rotateY(180deg) scale(1.04); }
  50%  { transform: perspective(700px) rotateY(90deg)  scale(1.11); }
  78%  { transform: perspective(700px) rotateY(-8deg)  scale(1.05); }
  100% { transform: perspective(700px) rotateY(0deg)   scale(1); }
}
@keyframes skDrehSchatten {
  0%   { box-shadow: 0 2px 5px rgba(0, 0, 0, .22); }
  50%  { box-shadow: 0 12px 20px rgba(0, 0, 0, .38); }
  100% { box-shadow: 0 1px 3px rgba(0, 0, 0, .18); }
}
/* Die Rueckseite als Auflage. step-end heisst: sie bleibt bis genau zur
   Kante stehen und ist danach schlagartig weg, ohne Ueberblendung. */
.sk.dreht::after {
  content: '';
  position: absolute;
  inset: -1px;
  box-sizing: border-box;
  border: 1px solid #006c95;
  border-radius: 6px;
  background: repeating-linear-gradient(135deg, #0091c8 0 6px, #0080b1 6px 12px);
  animation: skRuecken 520ms step-end both;
}
@keyframes skRuecken {
  0%  { opacity: 1; }
  50% { opacity: 0; }
}

/* Das Austeilen: die Karten kommen reihenweise von oben links hereingeflogen,
   wie von Hand gegeben. Der Versatz je Karte steht im style-Attribut. */
.sk-halter.gibt { animation: skGeben 340ms cubic-bezier(.2, .8, .3, 1) backwards; }
@keyframes skGeben {
  from { transform: translate(-70px, -130px) rotate(-14deg); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* Der Kartenwasserfall nach dem Sieg. Liegt ueber dem Tisch, faengt aber
   keine Tipps ab: der Abbruch haengt am Spielraum darunter. */
.sol-fall {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 4;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .sk.dreht, .sk.dreht::after, .sk-halter.gibt { animation: none; }
}

/* ============================================================
   WELLE 1 (02.08.2026): sechs kleine Spiele

   Alle sechs halten sich an dieselben Regeln wie die aelteren:
   Farben nur aus den Variablen oben (damit der Dunkelmodus von selbst
   stimmt), Spielflaechen auf EINEN Daumen gebaut, und jede Flaeche
   begrenzt sich selbst mit min(100%, ...px), damit auf einem Tablet
   nicht ein einziges Riesenfeld steht.
   ============================================================ */

/* Die Kanten im Menue. Jedes Spiel hat seine Farbe, so findet man es beim
   zweiten Besuch, ohne zu lesen. */
.sp-karte.k-paare      { border-left-color: #8e6bd6; }
.sp-karte.k-blasen     { border-left-color: #35b4e0; }
.sp-karte.k-wortretten { border-left-color: #e05c8a; }
.sp-karte.k-minen      { border-left-color: #6b7480; }
.sp-karte.k-wortsuche  { border-left-color: var(--sp-gruen); }
.sp-karte.k-rechnen    { border-left-color: var(--sp-orange); }

/* ---------- Paare finden ---------- */

.paare-kopf {
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--leise);
}

.paare-brett {
  display: grid;
  grid-template-columns: repeat(var(--paare-spalten, 4), 1fr);
  gap: 7px;
  width: min(100%, 420px);
  margin: 0 auto;
  /* Der Fluchtpunkt fuer den Kartendreh sitzt am BRETT, nicht an der Karte:
     sonst dreht sich jede Karte um ihre eigene Achse und das Bild wirkt flach. */
  perspective: 900px;
}

.paare-karte {
  position: relative;
  aspect-ratio: 3 / 4;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform .4s cubic-bezier(.22, .9, .28, 1);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.paare-karte.auf { transform: rotateY(180deg); }
/* Gefundene Paare bleiben liegen, treten aber zurueck: sie sind erledigt und
   sollen die Aufmerksamkeit nicht mehr binden. */
.paare-karte.weg { opacity: .45; cursor: default; }

.paare-vorn, .paare-hinten {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  /* Ohne das sieht man die Rueckseite durch die Vorderseite hindurch. */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.paare-hinten {
  background: repeating-linear-gradient(135deg, var(--sp-blau) 0 7px, #0080b1 7px 14px);
  border: 1px solid #006c95;
}
.paare-vorn {
  transform: rotateY(180deg);
  background: var(--karte);
  border: 1px solid var(--linie);
  font-size: clamp(24px, 8vw, 40px);
  line-height: 1;
}

/* ---------- Seifenblasen ---------- */

.bl-kopf {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
}
.bl-punkte { font-size: 30px; font-weight: 800; color: var(--sp-blau); line-height: 1; }
.bl-kette { font-size: 13px; font-weight: 700; color: var(--gedimmt); }
.bl-kette.an { color: var(--sp-orange); }

.bl-feld {
  display: block;
  width: 100%;
  /* Feste Hoehe statt aspect-ratio: die Blasen brauchen Steighoehe, und auf
     einem breiten Bildschirm waere ein quadratisches Feld unspielbar hoch. */
  height: min(58vh, 460px);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--karte) 0%, var(--sp-feld) 100%);
  touch-action: none;   /* sonst scrollt die Buehne beim Tippen mit */
  cursor: crosshair;
}

/* ---------- Wort retten ---------- */

.wr-ballon {
  width: min(100%, 260px);
  margin: 0 auto;
}
.wr-svg { width: 100%; height: auto; display: block; }
/* Der Ballon gleitet, er springt nicht: die Hoehe steckt in einem transform
   am <g>, und das laesst sich weich anfahren. */
.wr-svg g { transition: transform .5s cubic-bezier(.3, .7, .3, 1), opacity .5s ease; }
.wr-boden   { fill: var(--sp-gruen); opacity: .3; }
.wr-wolke   { fill: var(--gedimmt); opacity: .22; }
.wr-huelle  { fill: #e05c8a; }
.wr-streifen { fill: #ffd08a; }
.wr-seil    { stroke: var(--gedimmt); stroke-width: 2; fill: none; }
.wr-korb    { fill: #8a5a2b; }
.wr-ballon.unten .wr-huelle { fill: var(--sp-grau); }

.wr-thema {
  text-align: center;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--gedimmt);
}

.wr-wort {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
}
.wr-platz {
  min-width: 22px;
  height: 34px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 2px;
  border-bottom: 3px solid var(--linie);
  font-size: 23px;
  font-weight: 800;
  line-height: 1.15;
}
.wr-platz.voll { border-bottom-color: var(--sp-gruen); }
/* Am Ende einer verlorenen Runde stehen die fehlenden Buchstaben da, aber
   sichtbar anders: man soll sehen, was man NICHT hatte. */
.wr-platz.verpasst { color: var(--sp-rot); border-bottom-color: var(--sp-rot); }

.wr-tasten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(34px, 1fr));
  gap: 5px;
  width: min(100%, 460px);
  margin: 0 auto;
}
.wr-taste {
  min-height: 42px;
  border: 2px solid var(--linie);
  border-radius: 10px;
  background: var(--karte);
  color: var(--text);
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform .08s ease;
}
.wr-taste:active { transform: scale(.94); }
.wr-taste.treffer { background: var(--sp-gruen); border-color: var(--sp-gruen); color: #fff; }
.wr-taste.daneben { opacity: .35; }
.wr-taste:disabled { cursor: default; }

/* ---------- Minenfeld ---------- */

.mf-kopf {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}
.mf-zaehler {
  font-size: 17px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;   /* sonst huepft die Uhr bei jeder Sekunde */
  color: var(--leise);
}

.mf-brett {
  display: grid;
  grid-template-columns: repeat(var(--mf-spalten, 8), 1fr);
  gap: 2px;
  width: min(100%, 430px);
  margin: 0 auto;
}
.mf {
  aspect-ratio: 1 / 1;
  border: 0;
  border-radius: 4px;
  background: var(--sp-blau);
  color: #fff;
  font-family: inherit;
  font-size: clamp(11px, 3.4vw, 17px);
  font-weight: 800;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.mf.auf { background: var(--sp-feld); cursor: default; }
.mf.mark { background: var(--sp-gelb); color: var(--sp-tinte); }
.mf.mine { background: var(--sp-grau); color: #fff; }
.mf.bumm { background: var(--sp-rot); color: #fff; }
/* Die Zahlenfarben des Originals, nur in Toenen, die auch nachts tragen.
   Alle sitzen auf --sp-feld, deshalb muessen sie dunkel genug sein. */
.mf.z1 { color: #1565c0; }
.mf.z2 { color: #2e7d32; }
.mf.z3 { color: #c62828; }
.mf.z4 { color: #4527a0; }
.mf.z5 { color: #8d4e00; }
.mf.z6 { color: #00838f; }
.mf.z7 { color: #37474f; }
.mf.z8 { color: #6d4c41; }
@media (prefers-color-scheme: dark) {
  .mf.z1 { color: #7cb7ff; }
  .mf.z2 { color: #74d68a; }
  .mf.z3 { color: #ff8a80; }
  .mf.z4 { color: #b39ddb; }
  .mf.z5 { color: #ffb74d; }
  .mf.z6 { color: #4dd0e1; }
  .mf.z7 { color: #cfd8dc; }
  .mf.z8 { color: #bcaaa4; }
}

/* ---------- Wortsuche ---------- */

.ws-thema {
  text-align: center;
  font-size: 15px;
  font-weight: 800;
  color: var(--sp-gruen);
}

.ws-gitter {
  display: grid;
  grid-template-columns: repeat(var(--ws-spalten, 10), 1fr);
  gap: 2px;
  width: min(100%, 400px);
  margin: 0 auto;
}
.ws-feld {
  aspect-ratio: 1 / 1;
  border: 0;
  border-radius: 4px;
  background: var(--sp-feld);
  color: var(--text);
  font-family: inherit;
  font-size: clamp(11px, 3.2vw, 16px);
  font-weight: 700;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
/* Vorschau (waehrend der Auswahl) und Fund (endgueltig) muessen klar
   auseinanderzuhalten sein, sonst weiss man nach dem zweiten Tipp nicht, ob
   es gezaehlt hat. */
.ws-feld.vor { background: var(--sp-blau); color: #fff; }
.ws-feld.fund { background: var(--sp-gruen); color: #fff; }

.ws-liste {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}
.ws-wort {
  padding: 4px 9px;
  border: 1px solid var(--linie);
  border-radius: 999px;
  background: var(--karte);
  font-size: 13px;
  font-weight: 700;
}
.ws-wort.weg {
  opacity: .45;
  text-decoration: line-through;
  border-color: var(--sp-gruen);
  color: var(--sp-gruen);
}

/* ---------- Kopfrechnen ---------- */

.kr-kopf {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
}
.kr-punkte { font-size: 30px; font-weight: 800; color: var(--sp-orange); line-height: 1; }
.kr-serie { font-size: 13px; font-weight: 700; color: var(--gedimmt); }
.kr-serie.an { color: var(--sp-gruen); }

.kr-aufgabe {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  min-height: 76px;
  padding: 10px 14px;
  border: 2px solid var(--linie);
  border-radius: 16px;
  background: var(--karte);
  width: min(100%, 420px);
  margin: 0 auto;
  transition: border-color .15s ease, background .15s ease;
}
.kr-frage { font-size: clamp(24px, 7vw, 34px); font-weight: 800; font-variant-numeric: tabular-nums; }
.kr-antwort {
  min-width: 68px;
  font-size: clamp(24px, 7vw, 34px);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--sp-blau);
}
.kr-antwort i { color: var(--gedimmt); font-style: normal; }
.kr-aufgabe.richtig { border-color: var(--sp-gruen); background: color-mix(in srgb, var(--sp-gruen) 14%, var(--karte)); }
.kr-aufgabe.falsch { border-color: var(--sp-rot); }
.kr-aufgabe.falsch .kr-antwort { color: var(--sp-rot); }

.kr-feld {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  width: min(100%, 320px);
  margin: 0 auto;
}
.kr-taste {
  min-height: 54px;
  border: 2px solid var(--linie);
  border-radius: 12px;
  background: var(--karte);
  color: var(--text);
  font-family: inherit;
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform .08s ease;
}
.kr-taste:active { transform: scale(.94); }
.kr-weg { color: var(--leise); font-size: 20px; }
.kr-leer { display: block; }

@media (prefers-reduced-motion: reduce) {
  .paare-karte, .wr-svg g, .kr-aufgabe { transition: none; }
}

/* ============================================================
   WELLE 2 (02.08.2026): die Brettspiele Dame und Mühle

   Beide teilen sich die Formensprache mit Vier gewinnt: helle Steine
   sind du, dunkle das Geraet, das gewaehlte Feld leuchtet, moegliche
   Ziele sind gepunktet. Wer eines der beiden kann, kann auch das andere.
   ============================================================ */

.sp-karte.k-dame   { border-left-color: #b08968; }
.sp-karte.k-muehle { border-left-color: #6b4bd6; }

/* ---------- Dame ---------- */

.dm-kopf, .mu-kopf {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--leise);
}
.dm-stein-mini, .mu-stein-mini {
  display: inline-block;
  width: 15px; height: 15px;
  border-radius: 50%;
  vertical-align: -2px;
}
.dm-stein-mini.s1, .mu-stein-mini.s1 { background: #f2e3c8; border: 2px solid #b08968; }
.dm-stein-mini.s2, .mu-stein-mini.s2 { background: #4a3728; border: 2px solid #2b1f16; }

.dm-brett {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  width: min(100%, 430px);
  margin: 0 auto;
  border: 3px solid #6b4a2f;
  border-radius: 8px;
  overflow: hidden;
}
.dm-feld {
  position: relative;
  aspect-ratio: 1 / 1;
  border: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
/* Die hellen Felder werden nie bespielt: sie bekommen deshalb keinen Zeiger
   und keine Reaktion, sonst tippt man dauernd ins Leere. */
.dm-feld.hell { background: #e8d5b7; cursor: default; }
.dm-feld.dunkel { background: #a8763e; }
@media (prefers-color-scheme: dark) {
  .dm-feld.hell { background: #c9b291; }
  .dm-feld.dunkel { background: #7d5527; }
}
.dm-feld.gewaehlt { box-shadow: inset 0 0 0 3px var(--sp-blau); }
/* Moegliche Ziele als Punkt in der Mitte: ein voller Rahmen wuerde mit dem
   gewaehlten Feld verwechselt. */
.dm-feld.ziel::after {
  content: '';
  position: absolute;
  width: 30%; height: 30%;
  border-radius: 50%;
  background: var(--sp-blau);
  opacity: .65;
}

.dm-stein {
  width: 76%;
  height: 76%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(13px, 4vw, 20px);
  line-height: 1;
  box-shadow: 0 2px 3px rgba(0, 0, 0, .35);
}
.dm-stein.s1 { background: #f2e3c8; border: 2px solid #b08968; color: #8a5a2b; }
.dm-stein.s2 { background: #4a3728; border: 2px solid #241a12; color: #f2c14e; }
.dm-stein.dame { box-shadow: 0 0 0 2px var(--sp-gelb), 0 2px 4px rgba(0, 0, 0, .4); }

/* ---------- Mühle ---------- */

.mu-brett {
  position: relative;
  width: min(100%, 400px);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  box-sizing: border-box;
  background: #e8d5b7;
  border: 3px solid #6b4a2f;
  border-radius: 10px;
}
@media (prefers-color-scheme: dark) {
  .mu-brett { background: #c9b291; }
}
/* KEIN padding am Brett: bei position:absolute ist der Bezugsrahmen die
   Padding-Box, ein Polster wuerde also gar nicht wirken und die Rechnung nur
   verschleiern. Der Rand steckt stattdessen in den Prozentwerten selbst:
   das Raster laeuft von 8 bis 92 Prozent, in JS und hier im SVG gleich. */
.mu-svg {
  position: absolute;
  left: 8%;
  top: 8%;
  width: 84%;
  height: 84%;
  /* Die Linien sind Zierde: jeder Tipp muss zu den Knoepfen durchkommen. */
  pointer-events: none;
}
.mu-linie { fill: none; stroke: #6b4a2f; stroke-width: .07; }

.mu-punkt {
  position: absolute;
  width: 12%;
  height: 12%;
  /* left/top setzen den MITTELPUNKT, deshalb die halbe Groesse zurueck. */
  transform: translate(-50%, -50%);
  border: 2px solid #6b4a2f;
  border-radius: 50%;
  background: #e8d5b7;
  padding: 0;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.mu-punkt.s1 { background: #f2e3c8; border-color: #b08968; }
.mu-punkt.s2 { background: #4a3728; border-color: #241a12; }
.mu-punkt.gewaehlt { box-shadow: 0 0 0 3px var(--sp-blau); }
.mu-punkt.ziel { background: var(--sp-blau); border-color: var(--sp-blau); opacity: .7; }
/* Wegnehmbare Steine blinken nicht, sie bekommen einen roten Ring: Blinken
   waere bei prefers-reduced-motion ohnehin wieder abzuschalten. */
.mu-punkt.offen { box-shadow: 0 0 0 3px var(--sp-rot); }

/* ---------- Welle 3: Action (02.08.2026) ----------
   Drei Spielfelder, dieselbe Bauart wie die Seifenblasen: volle Breite, feste
   Hoehe statt aspect-ratio (ein quadratisches Feld waere auf dem Handy zu
   hoch), und touch-action:none, damit beim Wischen nicht die Bühne mitscrollt.
   Genau das fehlte beim ersten Canvas-Spiel und machte es unbedienbar. */
.st-feld, .aw-feld, .sr-feld {
  display: block;
  width: 100%;
  height: min(60vh, 480px);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--karte) 0%, var(--sp-feld) 100%);
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.st-feld { cursor: pointer; }
.aw-feld, .sr-feld { cursor: crosshair; }
.st-kopf { min-height: 0; }

/* ---------- Welle 4: Würfelspiele (02.08.2026) ---------- */
.kn-wuerfel, .zt-wuerfel {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 7px; margin-bottom: 10px;
}
.kn-w, .zt-w {
  width: 54px; height: 54px;
  border: 2px solid var(--linie); border-radius: 12px;
  background: var(--karte); color: var(--text);
  font-size: 34px; line-height: 1;
  cursor: pointer; touch-action: manipulation;
}
.kn-w.gehalten, .zt-w.gewaehlt { border-color: var(--blau); background: var(--blau); color: #fff; }
/* Fest gelegte Würfel sind KEIN Knopf mehr: das muss man sehen, sonst tippt
   man dagegen und wundert sich. */
.zt-w.fest { opacity: .55; border-style: dashed; cursor: default; }
.kn-w:disabled, .zt-w:disabled { cursor: default; }

.kn-werfen { margin-bottom: 6px; }
.kn-tipp, .zt-tipp, .zt-meldung, .zt-runde {
  margin: 4px 0 10px; font-size: 13px; text-align: center; color: var(--leise); line-height: 1.35;
}
.zt-meldung { color: var(--blau); font-weight: 700; }
.zt-runde { font-size: 15px; }

.kn-block { display: grid; gap: 4px; }
.kn-zeile {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 42px; padding: 0 12px;
  border: 2px solid var(--linie); border-radius: 10px;
  background: var(--karte); color: var(--text);
  font-family: inherit; font-size: 15px; font-weight: 700;
  cursor: pointer; text-align: left;
}
.kn-zeile.voll { border-style: dashed; opacity: .8; cursor: default; }
.kn-zeile:disabled { cursor: default; }
/* Die Vorschau ist blass: sie zeigt, was möglich WÄRE, und darf nicht wie ein
   schon eingetragener Wert aussehen. */
.kn-wert.vorschau { color: var(--blau); opacity: .75; }
.kn-zwischen {
  display: flex; justify-content: space-between; padding: 6px 12px;
  font-size: 14px; font-weight: 700; color: var(--leise);
}
.kn-zwischen.stark { font-size: 16px; color: var(--text); }

.zt-stand { display: flex; gap: 8px; margin-bottom: 10px; }
.zt-stand > span {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px; border: 2px solid var(--linie); border-radius: 12px;
  background: var(--karte); font-size: 13px; color: var(--leise);
}
.zt-stand > span b { font-size: 22px; color: var(--text); }
.zt-stand > span.dran { border-color: var(--blau); }
.zt-knoepfe { display: grid; grid-template-columns: 2fr 1fr; gap: 7px; }

/* ============================================================
   WELLE 3, zweiter Teil (02.08.2026): Sudoku, Woher kommt das?,
   Springen und Laufen, Schach. Dazu die drei Spiele aus Mannis
   Nachtrag ("mehr aktion und erinnerungsspiele", "farben auch"):
   Farbfolge, Farbwort, Was fehlt?
   ============================================================ */

.sp-karte.k-sudoku    { border-left-color: #4527a0; }
.sp-karte.k-woher     { border-left-color: #b08968; }
.sp-karte.k-springen  { border-left-color: var(--sp-gruen); }
.sp-karte.k-schach    { border-left-color: #37474f; }
.sp-karte.k-farbfolge { border-left-color: #e05c8a; }
.sp-karte.k-farbwort  { border-left-color: #6b4bd6; }
.sp-karte.k-wasfehlt  { border-left-color: var(--sp-orange); }

/* ---------- Sudoku ---------- */

.su-kopf { display: flex; justify-content: center; gap: 14px; }
.su-zaehler { font-size: 14.5px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--leise); }
.su-zaehler.su-fehler { color: var(--sp-rot); }

.su-brett {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  width: min(100%, 420px);
  margin: 0 auto;
  border: 2px solid var(--text);
  border-radius: 4px;
  overflow: hidden;
  background: var(--linie);
  gap: 1px;
}
.su-feld {
  position: relative;
  aspect-ratio: 1 / 1;
  border: 0;
  padding: 0;
  background: var(--karte);
  color: var(--sp-blau);
  font-family: inherit;
  font-size: clamp(14px, 4.4vw, 22px);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
/* Vorgaben stehen dunkel und fest, Eigenes in Blau: so sieht man jederzeit,
   was man selbst gesetzt hat und was das Raetsel vorgab. */
.su-feld.fest { color: var(--text); font-weight: 800; }
.su-feld.bahn { background: color-mix(in srgb, var(--sp-blau) 9%, var(--karte)); }
.su-feld.gleich { background: color-mix(in srgb, var(--sp-blau) 20%, var(--karte)); }
.su-feld.gewaehlt { background: color-mix(in srgb, var(--sp-blau) 34%, var(--karte)); }
.su-feld.falsch { color: var(--sp-rot); }
/* Die dicken Linien zwischen den Kaestchen als Innenschatten: so braucht das
   Raster keine zusaetzlichen Elemente. */
.su-feld.kante-l { box-shadow: inset 2px 0 0 var(--text); }
.su-feld.kante-o { box-shadow: inset 0 2px 0 var(--text); }
.su-feld.kante-l.kante-o { box-shadow: inset 2px 0 0 var(--text), inset 0 2px 0 var(--text); }

.su-notiz {
  position: absolute;
  inset: 1px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  font-size: clamp(6px, 1.7vw, 9px);
  font-weight: 700;
  color: var(--gedimmt);
  line-height: 1;
  align-items: center;
  justify-items: center;
}
.su-notiz i { font-style: normal; }

.su-ziffern {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  width: min(100%, 420px);
  margin: 0 auto;
}
.su-ziffer {
  min-height: 46px;
  border: 2px solid var(--linie);
  border-radius: 10px;
  background: var(--karte);
  color: var(--text);
  font-family: inherit;
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform .08s ease;
}
.su-ziffer:active { transform: scale(.94); }
.su-weg { color: var(--leise); }

/* ---------- Woher kommt das? ---------- */

.wo-zaehler { text-align: center; font-size: 13px; font-weight: 800; color: var(--gedimmt); }
.wo-spruch {
  text-align: center;
  font-size: clamp(20px, 6vw, 27px);
  font-weight: 800;
  line-height: 1.25;
  color: #b08968;
  padding: 4px 6px;
}
.wo-frage { text-align: center; font-size: 15px; color: var(--leise); }
.wo-antworten { display: grid; gap: 8px; width: min(100%, 460px); margin: 4px auto 0; }
.wo-a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 10px 12px;
  border: 2px solid var(--linie);
  border-radius: 14px;
  background: var(--karte);
  color: var(--text);
  font-family: inherit;
  font-size: 15.5px;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}
.wo-buchstabe {
  flex: none;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: #b08968;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
}
.wo-text { flex: 1; min-width: 0; }
.wo-a.gut { border-color: var(--sp-gruen); background: color-mix(in srgb, var(--sp-gruen) 15%, var(--karte)); }
.wo-a.schlecht { border-color: var(--sp-rot); background: color-mix(in srgb, var(--sp-rot) 12%, var(--karte)); }
.wo-a:disabled { cursor: default; }

.wo-info { display: none; }
.wo-info.da {
  display: grid;
  gap: 10px;
  width: min(100%, 460px);
  margin: 6px auto 0;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--karte);
  font-size: 15.5px;
  line-height: 1.5;
}
.wo-info p { margin: 0; }
.wo-urteil { font-weight: 800; font-size: 17px; }
.wo-urteil.gut { color: var(--sp-gruen); }
.wo-urteil.schlecht { color: var(--sp-rot); }

.wo-ende { text-align: center; display: grid; gap: 10px; padding: 20px 10px; }
.wo-ende h3 { margin: 0; font-size: 24px; }
.wo-ende p { margin: 0; color: var(--leise); line-height: 1.45; }
.wo-ende .gross { font-size: 30px; font-weight: 800; color: var(--text); }
.wo-ende-symbol { font-size: 46px; line-height: 1; }

/* ---------- Springen und Laufen ---------- */

.sn-kopf { display: flex; justify-content: center; gap: 14px; }
.sn-teil { font-size: 14px; font-weight: 800; color: var(--leise); }

.sn-feld {
  display: block;
  width: 100%;
  height: min(52vh, 420px);
  border-radius: 14px;
  background: #8ecae6;
  touch-action: none;
}

.sn-pad {
  display: grid;
  grid-template-columns: 1fr 1fr 1.3fr;
  gap: 8px;
  width: min(100%, 420px);
  margin: 0 auto;
}
.sn-knopf {
  min-height: 62px;
  border: 2px solid var(--linie);
  border-radius: 14px;
  background: var(--karte);
  color: var(--text);
  font-family: inherit;
  font-size: 26px;
  font-weight: 700;
  cursor: pointer;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.sn-knopf:active { background: var(--sp-blau); border-color: var(--sp-blau); color: #fff; }
.sn-sprung { background: color-mix(in srgb, var(--sp-gruen) 18%, var(--karte)); border-color: var(--sp-gruen); }

/* ---------- Schach ---------- */

.sc-kopf { text-align: center; font-size: 15px; font-weight: 700; color: var(--leise); }

.sc-brett {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  width: min(100%, 430px);
  margin: 0 auto;
  border: 3px solid #6b4a2f;
  border-radius: 6px;
  overflow: hidden;
}
.sc-feld {
  position: relative;
  aspect-ratio: 1 / 1;
  border: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(22px, 7.4vw, 38px);
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.sc-feld.hell { background: #e8d5b7; }
.sc-feld.dunkel { background: #a8763e; }
@media (prefers-color-scheme: dark) {
  .sc-feld.hell { background: #c9b291; }
  .sc-feld.dunkel { background: #7d5527; }
}
/* Die Figurenzeichen sind Schrift, keine Bilder. Weiss braucht deshalb eine
   dunkle Kontur, sonst verschwindet es auf dem hellen Feld. */
.sc-feld[data-seite="weiss"] { color: #fff; text-shadow: 0 0 2px #000, 0 1px 2px rgba(0,0,0,.6); }
.sc-feld[data-seite="schwarz"] { color: #16120d; text-shadow: 0 1px 1px rgba(255,255,255,.35); }
.sc-feld.letzter { box-shadow: inset 0 0 0 3px rgba(232, 168, 0, .55); }
.sc-feld.gewaehlt { box-shadow: inset 0 0 0 3px var(--sp-blau); }
.sc-feld.schach { box-shadow: inset 0 0 0 3px var(--sp-rot); }
.sc-feld.ziel::after {
  content: '';
  position: absolute;
  width: 26%; height: 26%;
  border-radius: 50%;
  background: rgba(0, 145, 200, .6);
}
/* Ein schlagbares Feld bekommt einen Ring statt eines Punktes: der Punkt
   laege unter der Figur und waere nicht zu sehen. */
.sc-feld.schlagbar::after {
  content: '';
  position: absolute;
  inset: 8%;
  border: 3px solid rgba(211, 47, 47, .75);
  border-radius: 50%;
}

/* ---------- Farbfolge ---------- */

.ff-kopf { display: flex; align-items: center; justify-content: center; gap: 12px; }
.ff-runde { font-size: 30px; font-weight: 800; color: var(--sp-blau); line-height: 1; }
.ff-text { font-size: 14px; font-weight: 700; color: var(--leise); }

.ff-brett {
  display: grid;
  gap: 10px;
  width: min(100%, 380px);
  margin: 0 auto;
}
.ff-brett.f4 { grid-template-columns: repeat(2, 1fr); }
.ff-brett.f6 { grid-template-columns: repeat(3, 1fr); }

.ff-feld {
  aspect-ratio: 1 / 1;
  border: 0;
  border-radius: 18px;
  background: var(--ff-dunkel);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  /* Im Ruhezustand gedaempft, beim Aufleuchten voll: der Unterschied muss
     auch bei Sonne auf dem Handy eindeutig sein. */
  opacity: .5;
  transition: opacity .1s ease, transform .1s ease, box-shadow .1s ease;
}
.ff-feld.an {
  background: var(--ff-hell);
  opacity: 1;
  transform: scale(1.04);
  box-shadow: 0 0 22px var(--ff-hell);
}
.ff-feld.falsch { background: var(--sp-rot); opacity: 1; }

/* ---------- Farbwort ---------- */

.fw-kopf { display: flex; align-items: baseline; justify-content: center; gap: 12px; }
.fw-punkte { font-size: 30px; font-weight: 800; color: var(--sp-blau); line-height: 1; }
.fw-serie { font-size: 13px; font-weight: 700; color: var(--gedimmt); }
.fw-serie.an { color: var(--sp-gruen); }

.fw-regel {
  text-align: center;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .3px;
  color: var(--gedimmt);
}
/* Wenn ausnahmsweise das WORT gefragt ist, muss das ins Auge springen. */
.fw-regel.wort { color: var(--sp-orange); }

.fw-wort {
  text-align: center;
  font-size: clamp(42px, 15vw, 76px);
  font-weight: 800;
  letter-spacing: 1px;
  line-height: 1.1;
  padding: 14px 6px;
  transition: transform .1s ease;
}
.fw-wort.gut { transform: scale(1.06); }
.fw-wort.schlecht { animation: fwWackeln .28s ease; }
@keyframes fwWackeln {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-7px); }
  75% { transform: translateX(7px); }
}

.fw-knoepfe {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  width: min(100%, 400px);
  margin: 0 auto;
}
.fw-knopf {
  min-height: 52px;
  border: 2px solid var(--linie);
  border-radius: 12px;
  background: var(--karte);
  color: var(--text);
  font-family: inherit;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform .08s ease;
}
.fw-knopf:active { transform: scale(.96); }

/* ---------- Was fehlt? ---------- */

.wf-kopf { display: flex; align-items: baseline; justify-content: center; gap: 12px; min-height: 30px; }
.wf-runde { font-size: 15px; font-weight: 800; color: var(--sp-orange); }
.wf-text { font-size: 15px; font-weight: 700; color: var(--leise); font-variant-numeric: tabular-nums; }
.wf-urteil { font-size: 19px; font-weight: 800; }
.wf-urteil.gut { color: var(--sp-gruen); }
.wf-urteil.schlecht { color: var(--sp-rot); }

.wf-brett {
  display: grid;
  grid-template-columns: repeat(var(--wf-spalten, 4), 1fr);
  gap: 8px;
  width: min(100%, 400px);
  margin: 0 auto;
}
.wf-feld {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--karte);
  border: 1px solid var(--linie);
  font-size: clamp(24px, 8vw, 38px);
  line-height: 1;
}
.wf-feld.zu { background: var(--sp-blau); border-color: #006c95; }

.wf-wahlen {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  width: min(100%, 400px);
  margin: 0 auto;
  min-height: 52px;
}
.wf-wahl {
  aspect-ratio: 1 / 1;
  border: 2px solid var(--linie);
  border-radius: 12px;
  background: var(--karte);
  font-size: clamp(18px, 5.5vw, 28px);
  line-height: 1;
  padding: 0;
  cursor: pointer;
  touch-action: manipulation;
}
.wf-wahl.gut { border-color: var(--sp-gruen); background: color-mix(in srgb, var(--sp-gruen) 20%, var(--karte)); }
.wf-wahl.schlecht { border-color: var(--sp-rot); background: color-mix(in srgb, var(--sp-rot) 18%, var(--karte)); }

@media (prefers-reduced-motion: reduce) {
  .ff-feld, .fw-wort, .fw-knopf, .su-ziffer { transition: none; }
  .fw-wort.schlecht { animation: none; }
}

/* Würfel, die in dieser Lage nichts einbringen. Sie bleiben sichtbar (man
   muss ja wissen, was liegt), sagen aber durch ihr Aussehen, dass Antippen
   nichts nützt. Vorher sahen alle gleich aus und der Einstecken-Knopf
   verweigerte kommentarlos (Manni, 02.08.2026). */
.zt-w.taub { opacity: .38; border-style: dotted; }

/* Die Kachel, aus der man gerade zurückkommt. Ein kurzer Rahmen, mehr nicht:
   bei einundzwanzig Spielen findet man die Stelle sonst nicht wieder
   (Manni, 02.08.2026). Er verschwindet nach 1,6 Sekunden von selbst. */
.sp-karte.zuletzt {
  outline: 3px solid var(--blau);
  outline-offset: 2px;
  transition: outline-color .4s ease;
}
@media (prefers-reduced-motion: reduce) {
  .sp-karte.zuletzt { transition: none; }
}

/* ---------- Welle 5: Partyspiele (02.08.2026) ----------
   Fünf Spiele, ein Aussehen. Die Karte ist groß und ruhig: sie wird am Tisch
   aus zwei Metern Entfernung vorgelesen, nicht aus dreißig Zentimetern. */
/* .pt-schalter war der Umschalter zwischen Schlücken und Punkten. Er ist am
   02.08.2026 entfallen (Manni: "mach bei den trinkspielen die infos zum
   saufen raus"), die Regeln bleiben aber stehen: PartyBasis.schalter() liefert
   weiterhin ein Element, nur eben ein leeres. Wer die Aufrufe in den fünf
   Spielen entfernt, kann diese drei Regeln mit wegwerfen. */
.pt-schalter {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 12px; padding: 10px 12px;
  border-radius: 12px; background: var(--karte);
}
.pt-schalter-text { flex: 1; min-width: 150px; font-size: 13.5px; color: var(--leise); font-weight: 700; }
.pt-flaeche { display: grid; gap: 10px; }

.pt-karte {
  display: flex; flex-direction: column; justify-content: center;
  min-height: 40vh; padding: 22px 20px;
  border-radius: 16px;
  background: var(--karte);
  border-left: 6px solid var(--blau);
  font-size: clamp(19px, 5.2vw, 26px);
  font-weight: 700; line-height: 1.35; text-align: center;
}
.pt-art {
  display: block; margin-bottom: 12px;
  font-size: 13px; font-weight: 800; letter-spacing: .6px;
  text-transform: uppercase; color: var(--gedimmt);
}
.pt-w { border-left-color: #0091c8; }
.pt-p { border-left-color: #e8a800; }
.pt-n { border-left-color: #17864a; }
.pt-f { border-left-color: #d3457f; }
.pt-r { border-left-color: #6b4bd6; }

.pt-wahl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pt-pflicht { background: #e8a800; border-color: #e8a800; }
.pt-tipp { margin: 0; font-size: 13px; text-align: center; color: var(--leise); line-height: 1.4; }

/* Höher oder tiefer: zwei Spielkarten nebeneinander. */
.ht-tisch { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 34vh; }
.ht-karte {
  width: 92px; height: 130px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border: 2px solid var(--linie); border-radius: 12px;
  background: #fff; color: #1a1a1a;
  font-weight: 800;
}
.ht-karte.rot { color: #d32f2f; }
.ht-karte .ht-wert { font-size: 34px; line-height: 1; }
.ht-karte .ht-farbe { font-size: 26px; line-height: 1; }
.ht-rueck { background: var(--blau); color: #fff; font-size: 40px; }
.ht-pfeil { font-size: 30px; font-weight: 800; }
.ht-knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* Nenne fünf: die Uhr ist das Spiel, deshalb ist sie groß. */
.nf-uhr {
  font-size: 58px; font-weight: 800; text-align: center; line-height: 1.1;
  color: var(--blau); font-variant-numeric: tabular-nums;
}
.nf-uhr.knapp { color: #d32f2f; }
.nf-uhr.aus { font-size: 30px; color: #d32f2f; }

/* Die häufigsten Antworten: fünf Felder, die einzeln aufgedeckt werden.
   Verdeckt sind sie ruhig und gleich, aufgedeckt springen sie ins Auge -
   das ist der Moment, um den es in diesem Spiel geht. */
.hf-liste { display: grid; gap: 6px; }
.hf-zeile {
  display: flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 0 12px;
  border: 2px solid var(--linie); border-radius: 12px;
  background: var(--karte); color: var(--text);
  font-family: inherit; font-size: 17px; font-weight: 700;
  cursor: pointer; text-align: left;
}
.hf-zeile.auf { background: var(--blau); border-color: var(--blau); color: #fff; cursor: default; }
.hf-platz {
  flex: none; width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: rgba(127,127,127,.22);
  font-size: 13px;
}
.hf-zeile.auf .hf-platz { background: rgba(255,255,255,.28); }
.hf-text { flex: 1; min-width: 0; }
.hf-punkte { flex: none; font-size: 19px; font-variant-numeric: tabular-nums; }
/* Zwei Knoepfe nebeneinander: untereinander kostet sie 55 px, und genau die
   fehlten auf dem kleinen Bildschirm. Ist alles aufgedeckt, steht nur noch
   "Naechste Frage" da - dann fuellt der eine Knopf die Zeile allein. */
.hf-knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.hf-knoepfe > :only-child { grid-column: 1 / -1; }

/* Die kleine Fassung der Partykarte, nur fuer "Die haeufigsten Antworten".
   Dort ist die Karte nicht das Spiel, sondern die Ueberschrift ueber fuenf
   Feldern - sie darf ihnen den Platz nicht wegnehmen. */
.pt-karte.pt-klein {
  min-height: 0;
  padding: 12px 14px;
  font-size: clamp(16px, 4.4vw, 21px);
  line-height: 1.3;
}
.pt-karte.pt-klein .pt-art { margin-bottom: 5px; font-size: 11.5px; }

/* ---------- Wie viele spielen mit? ----------
   Die Filterzeile steht ganz oben und ist der erste Griff bei 32 Spielen
   (Manni, 02.08.2026). Sie scrollt bewusst MIT: sie festzukleben würde auf
   dem Handy ein Fünftel der Liste kosten, und gebraucht wird sie einmal. */
.sp-filter {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  margin-bottom: 12px; padding: 10px 12px;
  border-radius: 12px; background: var(--karte);
}
.sp-filter-name { font-size: 13.5px; font-weight: 700; color: var(--leise); margin-right: 2px; }
.sp-filter .vl-chip { min-height: 34px; padding: 0 11px; font-size: 14px; }
/* Für wie viele ist dieses Spiel? Leise, aber immer da. */
.sp-wieviele { display: block; margin-top: 2px; font-size: 12px; color: var(--gedimmt); font-weight: 600; }
.sp-leer { padding: 24px 12px; text-align: center; color: var(--leise); font-size: 15px; line-height: 1.5; }

/* ============================================================
   WELLE 6 (02.08.2026): zwei Suchspiele und die Verfolgungsjagd
   ("baue noch 1-2 Suchspiele ein", "ein spiel verfolgungsjagt")
   ============================================================ */

.sp-karte.k-ausreisser  { border-left-color: #e8a800; }
.sp-karte.k-zahlenjagd  { border-left-color: #00838f; }
.sp-karte.k-verfolgung  { border-left-color: #d32f2f; }

/* ---------- Der Ausreißer ---------- */

.ar-kopf { display: flex; align-items: baseline; justify-content: center; gap: 14px; }
.ar-runde { font-size: 30px; font-weight: 800; color: var(--sp-gruen); line-height: 1; }
.ar-zeit { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--leise); }
/* Die letzten fuenf Sekunden muessen auffallen, ohne zu blinken. */
.ar-zeit.knapp { color: var(--sp-rot); }

.ar-brett {
  display: grid;
  grid-template-columns: repeat(var(--ar-spalten, 4), 1fr);
  gap: 6px;
  width: min(100%, 400px);
  margin: 0 auto;
}
.ar-feld {
  aspect-ratio: 1 / 1;
  border: 0;
  border-radius: 12px;
  padding: 0;
  color: rgba(255, 255, 255, .92);
  font-family: inherit;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  /* Die Hintergrundfarbe setzt das Spiel selbst: sie IST die Aufgabe. */
  transition: transform .12s ease, box-shadow .12s ease;
}
.ar-feld.treffer { box-shadow: 0 0 0 4px var(--sp-gruen); transform: scale(1.06); }
.ar-feld.daneben { box-shadow: 0 0 0 4px var(--sp-rot); }

/* ---------- Zahlenjagd ---------- */

.zj-kopf { display: flex; align-items: baseline; justify-content: center; gap: 16px; }
.zj-suche { font-size: 17px; font-weight: 700; color: var(--leise); }
.zj-suche b { font-size: 26px; color: var(--sp-blau); }
.zj-zeit { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text); }

.zj-brett {
  display: grid;
  grid-template-columns: repeat(var(--zj-spalten, 5), 1fr);
  gap: 5px;
  width: min(100%, 400px);
  margin: 0 auto;
}
.zj-feld {
  aspect-ratio: 1 / 1;
  border: 2px solid var(--linie);
  border-radius: 10px;
  background: var(--karte);
  color: var(--text);
  font-family: inherit;
  font-size: clamp(15px, 5vw, 24px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
/* Erledigte Zahlen bleiben stehen, treten aber zurueck: sie ganz zu
   entfernen wuerde das Raster zerreissen und das Suchen zu leicht machen. */
.zj-feld.weg { opacity: .3; cursor: default; }
.zj-feld.daneben { border-color: var(--sp-rot); background: color-mix(in srgb, var(--sp-rot) 18%, var(--karte)); }

/* ---------- Verfolgungsjagd ---------- */

.vf-kopf { display: flex; align-items: baseline; justify-content: center; gap: 16px; }
.vf-zeit { font-size: 30px; font-weight: 800; color: var(--sp-rot); line-height: 1; font-variant-numeric: tabular-nums; }
.vf-punkte { font-size: 15px; font-weight: 800; color: var(--leise); }

.vf-feld {
  display: block;
  width: 100%;
  height: min(60vh, 500px);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--karte) 0%, var(--sp-feld) 100%);
  /* Ohne none scrollt die Bühne mit, sobald man den Finger bewegt, und das
     Spiel ist unbedienbar. */
  touch-action: none;
  cursor: crosshair;
}

@media (prefers-reduced-motion: reduce) {
  .ar-feld { transition: none; }
}

/* ---------- Die Gruppen-Überschriften im Menü (02.08.2026) ----------
   Sie sollen die Liste gliedern, nicht mit den Kacheln um Aufmerksamkeit
   streiten: klein, in Versalien, mit etwas Luft davor. Die erste bekommt
   keinen Abstand nach oben, sonst klafft eine Lücke unter der Filterzeile. */
.sp-fach { display: grid; gap: 7px; }
.sp-fach-inhalt { display: grid; gap: 7px; }
.sp-fach-inhalt[hidden] { display: none; }

/* Der Kopf ist jetzt ein Knopf und muss sich auch so anfuehlen: volle
   Breite, Kachelhintergrund, ein Pfeil, der sich dreht. Klein und in
   Versalien bleibt er trotzdem - er soll gliedern, nicht mit den Spielen um
   Aufmerksamkeit streiten. */
.sp-gruppe {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 46px;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: var(--karte);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .6px;
  text-align: left;
  text-transform: uppercase;
  color: var(--gedimmt);
  cursor: pointer;
}
.sp-gruppe:active { transform: scale(.99); }
/* Der Kopf des offenen Fachs bleibt beim Scrollen oben kleben.

   Gemessen am 02.08.2026: ein aufgeklapptes Fach ist bis zu 1025 px hoch,
   der Bildschirm eines iPhone SE gut 600. Wer in der Mitte der Liste steht,
   sieht sonst nur Kacheln und weiss nicht mehr, in welcher Kategorie er
   gerade ist - und findet auch den Knopf zum Zumachen nicht wieder. */
.sp-fach.auf .sp-gruppe {
  position: sticky;
  top: 0;
  z-index: 3;
  color: var(--text);
  box-shadow: 0 2px 10px rgba(0,0,0,.16);
}
.sp-gruppe-text { flex: 1; min-width: 0; }
.sp-gruppe-pfeil {
  flex: none;
  font-size: 19px;
  line-height: 1;
  color: var(--gedimmt);
  transform: rotate(90deg);
  transition: transform .18s ease;
}
.sp-fach.auf .sp-gruppe-pfeil { transform: rotate(-90deg); }
@media (prefers-reduced-motion: reduce) {
  .sp-gruppe-pfeil { transition: none; }
}
.sp-gruppe-zeichen { font-size: 15px; letter-spacing: 0; }
/* Die Zahl sagt auf einen Blick, wie viel in der Gruppe steckt. */
.sp-gruppe-zahl {
  flex: none;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--karte);
  font-size: 11.5px;
  letter-spacing: 0;
}