/* ══════════════════════════════════════════════════════════════════════
   Zwei aufwendige Kachel-Szenen, die zeigen, was das Programm kann.
   ZauberPinsel: eine Leinwand, zehn Sekunden Malen in einer Schleife.
   Spiele: ein Bildschirm, in dem sechs Spiele ineinander übergehen.
   ══════════════════════════════════════════════════════════════════════ */

/* ── ZauberPinsel ─────────────────────────────────────────────────────────
   Ablauf in einem gemeinsamen 10-s-Takt (alle Zeiten in %):
     4–28  Regenbogenpinsel malt einen Bogen, Glitzer blitzt hinterher
    32–40  Farbe Pink, Tippen → Farbspritzer
    42–53  Werkzeug Stempel: Stern, dann Herz
    75–88  Radierer wischt alles weg
    98     alles zurück auf Anfang                                            */
.szene-zp {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: radial-gradient(120% 110% at 50% 0%, color-mix(in srgb, var(--f) 22%, #161a30) 0%, #0d1022 70%);
}
.zp-leinwand {
  position: relative; width: 204px; height: 112px; border-radius: 10px; overflow: hidden;
  background: #fdfdfb; scale: 1.12;
  box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .25);
}

/* Werkzeugsäule links und Farbleiste unten — wie in der echten App */
.zp-werkzeuge {
  position: absolute; left: 5px; top: 6px; z-index: 6;
  display: grid; gap: 3px; padding: 3px; border-radius: 7px; background: #2b3043;
}
.zw { position: relative; width: 14px; height: 14px; border-radius: 4px; background: #454b61; animation: 10s linear infinite; }
.zw::after { position: absolute; inset: 0; display: grid; place-items: center; font-size: 9px; line-height: 1; color: #fff; font-style: normal; }
.zw-pinsel::after { content: "✎"; }
.zw-stempel::after { content: "★"; font-size: 8px; }
.zw-radierer::after { content: ""; inset: 4px 3px; border-radius: 1.5px; background: #ff9cc2; rotate: -24deg; }
.zw-pinsel   { animation-name: zw-pinsel; }
.zw-stempel  { animation-name: zw-stempel; }
.zw-radierer { animation-name: zw-radierer; }
@keyframes zw-pinsel   { 0%, 40% { background: #9b5cff; } 41%, 100% { background: #454b61; } }
@keyframes zw-stempel  { 0%, 40% { background: #454b61; } 41%, 71% { background: #9b5cff; } 72%, 100% { background: #454b61; } }
@keyframes zw-radierer { 0%, 71% { background: #454b61; } 72%, 94% { background: #9b5cff; } 95%, 100% { background: #454b61; } }

.zp-farben {
  position: absolute; left: 50%; bottom: 5px; translate: -50% 0; z-index: 6;
  display: flex; gap: 4px; padding: 3px 6px; border-radius: 8px; background: #2b3043;
}
.zf { width: 9px; height: 9px; border-radius: 50%; animation: 10s linear infinite; }
.zf-regen { background: conic-gradient(#ff3b5c, #ff9f1c, #ffe14d, #3ee07a, #3fa9ff, #b65cff, #ff3b5c); animation-name: zf-regen; }
.zf-pink  { background: #ff5fa2; animation-name: zf-pink; }
.zf-gelb  { background: #ffd23f; animation-name: zf-gelb; }
.zf-rot   { background: #ff4d5e; animation-name: zf-rot; }
.zf-blau  { background: #3fa9ff; }
.zf-gruen { background: #3ee07a; }
@keyframes zf-regen { 0%, 31% { box-shadow: 0 0 0 1.5px #fff; } 32%, 89% { box-shadow: none; } 90%, 100% { box-shadow: 0 0 0 1.5px #fff; } }
@keyframes zf-pink  { 0%, 31% { box-shadow: none; } 32%, 41% { box-shadow: 0 0 0 1.5px #fff; } 42%, 100% { box-shadow: none; } }
@keyframes zf-gelb  { 0%, 41% { box-shadow: none; } 42%, 48% { box-shadow: 0 0 0 1.5px #fff; } 49%, 100% { box-shadow: none; } }
@keyframes zf-rot   { 0%, 48% { box-shadow: none; } 49%, 71% { box-shadow: 0 0 0 1.5px #fff; } 72%, 100% { box-shadow: none; } }

/* Alles Gemalte liegt in einem Behälter, den der Radierer von links her abdeckt. */
.zp-gemalt { position: absolute; inset: 0; animation: zp-radieren 10s linear infinite; }
@keyframes zp-radieren {
  0%, 75% { clip-path: inset(0 0 0 0); }
  88%, 98.5% { clip-path: inset(0 0 0 204px); }
  99%, 100% { clip-path: inset(0 0 0 0); }
}

/* Der Regenbogenstrich: malt sich mit konstantem Tempo und schimmert durch die Farben. */
.zp-strich { position: absolute; left: 0; top: 0; animation: zp-schimmer 2.6s linear infinite; }
.zp-strich path {
  fill: none; stroke: url(#zpRegenbogen); stroke-width: 6.5; stroke-linecap: round;
  stroke-dasharray: 100; stroke-dashoffset: 100;
  animation: zp-malen 10s linear infinite;
}
@keyframes zp-malen { 0%, 4% { stroke-dashoffset: 100; } 28%, 97% { stroke-dashoffset: 0; } 98%, 100% { stroke-dashoffset: 100; } }
@keyframes zp-schimmer { from { filter: hue-rotate(0deg) drop-shadow(0 0 2px rgba(255,255,255,.7)); } to { filter: hue-rotate(360deg) drop-shadow(0 0 2px rgba(255,255,255,.7)); } }

/* Der Pinsel folgt exakt dem Strich (gleicher Pfad, gleiche Zeit). */
.zp-pinsel {
  position: absolute; left: 0; top: 0; width: 22px; height: 22px; z-index: 5;
  offset-path: path('M40 70 C 70 20, 110 80, 140 40 S 180 30, 188 50');
  offset-rotate: 0deg; offset-anchor: 3px 19px;
  opacity: 0; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .35));
  animation: zp-pinsel 10s linear infinite;
}
.zp-pinsel svg { display: block; }
@keyframes zp-pinsel {
  0%, 2% { offset-distance: 0%; opacity: 0; }
  4% { offset-distance: 0%; opacity: 1; }
  28% { offset-distance: 100%; opacity: 1; }
  31%, 100% { offset-distance: 100%; opacity: 0; }
}

/* Glitzer: ein vierzackiger Stern mit weichem Schein */
.zp-glitzer {
  position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; z-index: 3;
  opacity: 0; animation-duration: 10s; animation-timing-function: linear; animation-iteration-count: infinite;
}
.zp-glitzer::before {
  content: ""; position: absolute; inset: 0; background: #fff6c8;
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}
.zp-glitzer::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 230, 120, .75), transparent 65%);
}
@keyframes zp-glitz-1 {
  0%, 6.4% { opacity: 0; transform: scale(.2) rotate(0deg); }
  7.6% { opacity: 1; transform: scale(2) rotate(45deg); }
  10.6% { opacity: 1; transform: scale(1) rotate(90deg); }
  50% { transform: scale(.75) rotate(90deg); }
  62% { transform: scale(1.2) rotate(90deg); }
  97% { opacity: 1; transform: scale(1) rotate(90deg); }
  98%, 100% { opacity: 0; }
}
.zp-glitzer:nth-of-type(1) { animation-name: zp-glitz-1; }
@keyframes zp-glitz-2 {
  0%, 11.2% { opacity: 0; transform: scale(.2) rotate(0deg); }
  12.4% { opacity: 1; transform: scale(2) rotate(45deg); }
  15.4% { opacity: 1; transform: scale(1) rotate(90deg); }
  50% { transform: scale(.75) rotate(90deg); }
  62% { transform: scale(1.2) rotate(90deg); }
  97% { opacity: 1; transform: scale(1) rotate(90deg); }
  98%, 100% { opacity: 0; }
}
.zp-glitzer:nth-of-type(2) { animation-name: zp-glitz-2; }
@keyframes zp-glitz-3 {
  0%, 16.0% { opacity: 0; transform: scale(.2) rotate(0deg); }
  17.2% { opacity: 1; transform: scale(2) rotate(45deg); }
  20.2% { opacity: 1; transform: scale(1) rotate(90deg); }
  50% { transform: scale(.75) rotate(90deg); }
  62% { transform: scale(1.2) rotate(90deg); }
  97% { opacity: 1; transform: scale(1) rotate(90deg); }
  98%, 100% { opacity: 0; }
}
.zp-glitzer:nth-of-type(3) { animation-name: zp-glitz-3; }
@keyframes zp-glitz-4 {
  0%, 20.8% { opacity: 0; transform: scale(.2) rotate(0deg); }
  22.0% { opacity: 1; transform: scale(2) rotate(45deg); }
  25.0% { opacity: 1; transform: scale(1) rotate(90deg); }
  50% { transform: scale(.75) rotate(90deg); }
  62% { transform: scale(1.2) rotate(90deg); }
  97% { opacity: 1; transform: scale(1) rotate(90deg); }
  98%, 100% { opacity: 0; }
}
.zp-glitzer:nth-of-type(4) { animation-name: zp-glitz-4; }
@keyframes zp-glitz-5 {
  0%, 25.6% { opacity: 0; transform: scale(.2) rotate(0deg); }
  26.8% { opacity: 1; transform: scale(2) rotate(45deg); }
  29.8% { opacity: 1; transform: scale(1) rotate(90deg); }
  50% { transform: scale(.75) rotate(90deg); }
  62% { transform: scale(1.2) rotate(90deg); }
  97% { opacity: 1; transform: scale(1) rotate(90deg); }
  98%, 100% { opacity: 0; }
}
.zp-glitzer:nth-of-type(5) { animation-name: zp-glitz-5; }


/* Farbspritzer: ein Klecks und vier Tropfen, die auseinanderfliegen */
.zp-klecks { position: absolute; left: 72px; top: 80px; width: 0; height: 0; z-index: 2; }
.zp-klecks i { position: absolute; border-radius: 50%; background: #ff5fa2; opacity: 0; animation: 10s cubic-bezier(.2,.8,.2,1) infinite; }
.zp-klecks i:nth-child(1) { width: 15px; height: 12px; left: -7.5px; top: -6px; border-radius: 52% 48% 55% 45% / 58% 50% 50% 42%; animation-name: zp-klecks; }
.zp-klecks i:nth-child(2) { width: 5px; height: 5px; left: -2.5px; top: -2.5px; --dx: -13px; --dy: -7px; animation-name: zp-tropfen; }
.zp-klecks i:nth-child(3) { width: 4px; height: 4px; left: -2px; top: -2px; --dx: 12px; --dy: -9px; animation-name: zp-tropfen; }
.zp-klecks i:nth-child(4) { width: 3px; height: 3px; left: -1.5px; top: -1.5px; --dx: 14px; --dy: 5px; animation-name: zp-tropfen; }
.zp-klecks i:nth-child(5) { width: 4px; height: 4px; left: -2px; top: -2px; --dx: -10px; --dy: 7px; animation-name: zp-tropfen; }
@keyframes zp-klecks {
  0%, 35.5% { opacity: 0; transform: scale(0); }
  37% { opacity: 1; transform: scale(1.35); }
  39.5% { transform: scale(1); }
  97% { opacity: 1; transform: scale(1); }
  98%, 100% { opacity: 0; }
}
@keyframes zp-tropfen {
  0%, 35.5% { opacity: 0; transform: translate(0, 0) scale(0); }
  37% { opacity: 1; transform: translate(0, 0) scale(1); }
  41% { transform: translate(var(--dx), var(--dy)) scale(1); }
  97% { opacity: 1; transform: translate(var(--dx), var(--dy)) scale(1); }
  98%, 100% { opacity: 0; }
}

/* Stempel: Stern und Herz ploppen auf */
.zp-stempel { position: absolute; z-index: 2; line-height: 1; opacity: 0; animation: 10s cubic-bezier(.3,1.6,.5,1) infinite; }
.zp-stern { left: 104px; top: 6px; font-size: 19px; color: #ffcf2e; text-shadow: 0 0 6px rgba(255, 207, 46, .8), 0 1px 0 #d9a400; animation-name: zp-stern; }
.zp-herz  { left: 158px; top: 62px; font-size: 18px; color: #ff4d5e; text-shadow: 0 0 6px rgba(255, 77, 94, .7); animation-name: zp-herz; }
@keyframes zp-stern {
  0%, 44% { opacity: 0; transform: scale(0) rotate(-40deg); }
  47% { opacity: 1; transform: scale(1) rotate(0deg); }
  97% { opacity: 1; transform: scale(1) rotate(0deg); }
  98%, 100% { opacity: 0; }
}
@keyframes zp-herz {
  0%, 50% { opacity: 0; transform: scale(0); }
  53% { opacity: 1; transform: scale(1); }
  60% { transform: scale(1.12); } 64% { transform: scale(1); }
  97% { opacity: 1; transform: scale(1); }
  98%, 100% { opacity: 0; }
}

/* Tipp-Ringe: zeigen, wo gerade getippt wurde */
.zp-tipp { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; border: 1.5px solid rgba(155, 92, 255, .85); opacity: 0; z-index: 4; animation: 10s ease-out infinite; }
.zp-tipp-klecks { left: 72px; top: 80px; animation-name: zp-tipp-1; }
.zp-tipp-stern  { left: 113px; top: 16px; animation-name: zp-tipp-2; }
.zp-tipp-herz   { left: 167px; top: 71px; animation-name: zp-tipp-3; }
@keyframes zp-tipp-1 { 0%, 35% { opacity: 0; transform: scale(.3); } 35.5% { opacity: 1; } 40%, 100% { opacity: 0; transform: scale(2.2); } }
@keyframes zp-tipp-2 { 0%, 43.5% { opacity: 0; transform: scale(.3); } 44% { opacity: 1; } 48.5%, 100% { opacity: 0; transform: scale(2.2); } }
@keyframes zp-tipp-3 { 0%, 49.5% { opacity: 0; transform: scale(.3); } 50% { opacity: 1; } 54.5%, 100% { opacity: 0; transform: scale(2.2); } }

/* Der Radierer fährt an der Kante des Abdeckens mit */
.zp-radierer {
  position: absolute; left: 0; top: 40px; width: 16px; height: 10px; z-index: 5;
  border-radius: 3px; background: linear-gradient(180deg, #ffb3d1 0 62%, #5b7cff 62%);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .3); opacity: 0;
  animation: zp-radierer 10s linear infinite;
}
@keyframes zp-radierer {
  0%, 73% { opacity: 0; transform: translate(22px, 0) rotate(-22deg); }
  75% { opacity: 1; transform: translate(26px, 0) rotate(-22deg); }
  78% { transform: translate(66px, 16px) rotate(-12deg); }
  81% { transform: translate(106px, -10px) rotate(-26deg); }
  84% { transform: translate(146px, 14px) rotate(-12deg); }
  88% { opacity: 1; transform: translate(196px, -4px) rotate(-22deg); }
  90%, 100% { opacity: 0; transform: translate(206px, -4px) rotate(-22deg); }
}

/* ── Spiele ───────────────────────────────────────────────────────────────
   Ein kleiner Bildschirm; reise.js reicht alle drei Sekunden die Klasse
   .aktiv an das nächste Spiel weiter. Das alte zieht sich unscharf zusammen,
   das neue wächst aus der Unschärfe heraus — ein Morph durch einen Lichtblitz.
   Jede innere Animation dauert genau diese drei Sekunden.                  */
.szene-sp {
  --sp-farbe: #46cdf2;
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: radial-gradient(120% 110% at 50% 0%, color-mix(in srgb, var(--sp-farbe) 20%, #141830) 0%, #0b0e20 72%);
  transition: background .8s;
}
.sp-bildschirm {
  position: relative; width: 172px; height: 96px; border-radius: 12px; overflow: hidden;
  background: radial-gradient(120% 120% at 50% 0%, #121733, #080a17);
  border: 1.5px solid color-mix(in srgb, var(--sp-farbe) 70%, transparent);
  box-shadow: 0 0 22px -6px var(--sp-farbe), inset 0 0 18px rgba(0, 0, 0, .65);
  transition: border-color .7s, box-shadow .7s;
}
/* feines Zeilenraster über allem — ein Hauch Konsole */
.sp-bildschirm::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 8;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .16) 0 1px, transparent 1px 3px);
}

.sp-v {
  position: absolute; inset: 0; display: grid; place-items: center;
  opacity: 0; transform: scale(1.5); filter: blur(8px);
  transition: opacity .5s ease, transform .8s cubic-bezier(.2,.8,.2,1), filter .55s ease;
}
.sp-v.aktiv { opacity: 1; transform: scale(1); filter: blur(0); }
.sp-v.weg { opacity: 0; transform: scale(.5) rotate(-9deg); filter: blur(8px); }

.sp-blitz {
  position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px; z-index: 7;
  border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, #fff 0%, var(--sp-farbe) 30%, transparent 68%);
}
.sp-blitz.blitzt { animation: sp-blitz .7s ease-out; }
@keyframes sp-blitz { 0% { opacity: 0; transform: scale(.2); } 25% { opacity: .9; } 100% { opacity: 0; transform: scale(3); } }

.sp-titel { display: flex; align-items: baseline; gap: 7px; height: 17px; transition: opacity .25s, transform .25s; }
.sp-titel.wechsel { opacity: 0; transform: translateY(4px); }
.sp-name { font-family: var(--display); font-weight: 700; font-size: 13.5px; letter-spacing: -.01em; color: var(--text); }
.sp-aufgabe { font-size: 11.5px; color: var(--sp-farbe); transition: color .6s; }
.sp-punkte-leiste { display: flex; gap: 4px; }
.sp-punkte-leiste i { width: 5px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .22); transition: width .4s, background .4s; }
.sp-punkte-leiste i.an { width: 14px; background: var(--sp-farbe); }

/* Punkte, die nach einem Erfolg aufsteigen */
.sp-punkte {
  position: absolute; right: 9px; top: 7px; z-index: 6;
  font-family: var(--display); font-weight: 700; font-size: 11px; color: var(--sp-farbe);
  text-shadow: 0 0 8px var(--sp-farbe); opacity: 0;
}

/* Laufen die Animationen auch während des Wegmorphens weiter, springt nichts zurück. */
.sp-v.aktiv *, .sp-v.weg * { animation-duration: 3s; animation-fill-mode: forwards; animation-iteration-count: 1; }

/* — Tetris: ein Stück fällt in die Lücke, die Reihe löst sich auf — */
.t-brett {
  position: relative; width: 77px; height: 55px; margin-top: 8px;
  border: 1.5px solid rgba(255, 255, 255, .2); border-top: 0; border-radius: 0 0 3px 3px;
}
.t-brett i { position: absolute; width: 10px; height: 10px; border-radius: 2px; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .4); }
.t-reihe { position: absolute; left: 0; top: 44px; width: 77px; height: 11px; transform-origin: center; }
.t-ueber { position: absolute; inset: 0; }
.t-stueck { position: absolute; left: 33px; top: 33px; width: 10px; height: 21px; }
.t-stueck i { left: 0; background: #46cdf2; }
.t-stueck i:first-child { top: 0; } .t-stueck i:last-child { top: 11px; }
.sp-v.aktiv .t-stueck, .sp-v.weg .t-stueck { animation-name: t-fallen; }
.sp-v.aktiv .t-reihe, .sp-v.weg .t-reihe, .sp-v.aktiv .t-stueck i:last-child, .sp-v.weg .t-stueck i:last-child { animation-name: t-loeschen; }
.sp-v.aktiv .t-ueber, .sp-v.weg .t-ueber { animation-name: t-rutschen; }
.sp-tetris.aktiv .sp-punkte, .sp-tetris.weg .sp-punkte { animation-name: sp-punkte-t; }
@keyframes t-fallen {
  0% { transform: translateY(-44px); animation-timing-function: step-end; }
  7% { transform: translateY(-33px); animation-timing-function: step-end; }
  14% { transform: translateY(-22px); animation-timing-function: step-end; }
  21% { transform: translateY(-11px); animation-timing-function: step-end; }
  28%, 56% { transform: translateY(0); }
  66%, 100% { transform: translateY(11px); }
}
@keyframes t-loeschen {
  0%, 30% { filter: brightness(1); transform: scaleY(1); opacity: 1; }
  34%, 44% { filter: brightness(2.6) saturate(.3); }
  38% { filter: brightness(1.4); }
  48% { filter: brightness(2.6) saturate(.3); transform: scaleY(1); opacity: 1; }
  56%, 100% { transform: scaleY(0); opacity: 0; }
}
@keyframes t-rutschen { 0%, 56% { transform: translateY(0); } 66%, 100% { transform: translateY(11px); } }
@keyframes sp-punkte-t { 0%, 46% { opacity: 0; transform: translateY(6px); } 54% { opacity: 1; transform: translateY(0); } 85% { opacity: 1; transform: translateY(-8px); } 100% { opacity: 0; transform: translateY(-12px); } }

/* — 2048: zusammenschieben, Gleiches verschmilzt — */
.z-feld { position: relative; display: grid; grid-template-columns: repeat(4, 19px); gap: 3px; }
.z-feld > i { width: 19px; height: 19px; border-radius: 3px; background: rgba(255, 255, 255, .08); }
.z { position: absolute; width: 19px; height: 19px; border-radius: 3px; display: grid; place-items: center; font: 800 10.5px/1 var(--display); }
.z2 { background: #eee4da; color: #776e65; }
.z4 { background: #ede0c8; color: #776e65; }
.z8 { background: #f2b179; color: #fff; }
.za-ziel { left: 0; top: 0; }   .za-gleit { left: 44px; top: 0; }  .za-neu { left: 0; top: 0; opacity: 0; }
.zb-ziel { left: 22px; top: 22px; } .zb-gleit { left: 66px; top: 22px; } .zb-neu { left: 0; top: 22px; opacity: 0; }
.z-neu { left: 66px; top: 0; transform: scale(0); }
.sp-2048.aktiv .za-gleit, .sp-2048.weg .za-gleit { animation-name: z-gleit-44; }
.sp-2048.aktiv .zb-ziel, .sp-2048.weg .zb-ziel { animation-name: z-gleit-22; }
.sp-2048.aktiv .zb-gleit, .sp-2048.weg .zb-gleit { animation-name: z-gleit-66; }
.sp-2048.aktiv .za-ziel, .sp-2048.weg .za-ziel { animation-name: z-weg; }
.sp-2048.aktiv .za-neu, .sp-2048.weg .za-neu, .sp-2048.aktiv .zb-neu, .sp-2048.weg .zb-neu { animation-name: z-pop; }
.sp-2048.aktiv .z-neu, .sp-2048.weg .z-neu { animation-name: z-erscheinen; }
.sp-2048.aktiv .sp-punkte, .sp-2048.weg .sp-punkte { animation-name: sp-punkte-z; }
@keyframes z-gleit-44 { 0%, 22% { transform: translateX(0); opacity: 1; } 40% { transform: translateX(-44px); opacity: 1; } 41%, 100% { transform: translateX(-44px); opacity: 0; } }
@keyframes z-gleit-22 { 0%, 22% { transform: translateX(0); opacity: 1; } 40% { transform: translateX(-22px); opacity: 1; } 41%, 100% { transform: translateX(-22px); opacity: 0; } }
@keyframes z-gleit-66 { 0%, 22% { transform: translateX(0); opacity: 1; } 40% { transform: translateX(-66px); opacity: 1; } 41%, 100% { transform: translateX(-66px); opacity: 0; } }
@keyframes z-weg { 0%, 40% { opacity: 1; } 41%, 100% { opacity: 0; } }
@keyframes z-pop { 0%, 40% { opacity: 0; transform: scale(.5); } 46% { opacity: 1; transform: scale(1.3); } 54%, 100% { opacity: 1; transform: scale(1); } }
@keyframes z-erscheinen { 0%, 60% { transform: scale(0); } 68% { transform: scale(1.15); } 74%, 100% { transform: scale(1); } }
@keyframes sp-punkte-z { 0%, 42% { opacity: 0; transform: translateY(6px); } 50% { opacity: 1; transform: translateY(0); } 85% { opacity: 1; transform: translateY(-8px); } 100% { opacity: 0; transform: translateY(-12px); } }

/* — Memory: zwei aufdecken, falsch, zudecken — dann das Paar — */
.m-feld { display: grid; grid-template-columns: repeat(4, 17px); gap: 4px; perspective: 260px; }
.m { position: relative; width: 17px; height: 22px; transform-style: preserve-3d; }
.m-rueck, .m-vorn { position: absolute; inset: 0; border-radius: 3px; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: grid; place-items: center; font-style: normal; }
.m-rueck {
  background: linear-gradient(135deg, #8b6bff, #5536c9);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
}
.m-rueck::after { content: ""; width: 6px; height: 6px; border-radius: 1.5px; rotate: 45deg; border: 1px solid rgba(255, 255, 255, .45); }
.m-vorn { background: #fbfaff; transform: rotateY(180deg); font-size: 11px; }
.sp-memory.aktiv .m-a, .sp-memory.weg .m-a { animation-name: m-flip-a; }
.sp-memory.aktiv .m-b, .sp-memory.weg .m-b { animation-name: m-flip-b; }
.sp-memory.aktiv .m-c, .sp-memory.weg .m-c { animation-name: m-flip-c; }
.sp-memory.aktiv .m-a .m-vorn, .sp-memory.weg .m-a .m-vorn { animation-name: m-ton-a; }
.sp-memory.aktiv .m-b .m-vorn, .sp-memory.weg .m-b .m-vorn { animation-name: m-ton-b; }
.sp-memory.aktiv .m-c .m-vorn, .sp-memory.weg .m-c .m-vorn { animation-name: m-ton-c; }
.sp-memory.aktiv .m-haken, .sp-memory.weg .m-haken { animation-name: m-haken; }
@keyframes m-flip-a { 0%, 6% { transform: rotateY(0); } 14%, 44% { transform: rotateY(180deg); } 52%, 58% { transform: rotateY(0); } 66%, 100% { transform: rotateY(180deg); } }
@keyframes m-flip-b { 0%, 20% { transform: rotateY(0); } 28%, 44% { transform: rotateY(180deg); } 52%, 100% { transform: rotateY(0); } }
@keyframes m-flip-c { 0%, 70% { transform: rotateY(0); } 78%, 100% { transform: rotateY(180deg); } }
@keyframes m-ton-a { 0%, 32% { box-shadow: none; } 36%, 44% { box-shadow: 0 0 0 1.5px #ff5d6c; } 48%, 80% { box-shadow: none; } 84%, 100% { box-shadow: 0 0 0 1.5px #3fe0a8, 0 0 8px #3fe0a8; } }
@keyframes m-ton-b { 0%, 32% { box-shadow: none; } 36%, 44% { box-shadow: 0 0 0 1.5px #ff5d6c; } 48%, 100% { box-shadow: none; } }
@keyframes m-ton-c { 0%, 80% { box-shadow: none; } 84%, 100% { box-shadow: 0 0 0 1.5px #3fe0a8, 0 0 8px #3fe0a8; } }
.m-haken {
  position: absolute; right: 12px; top: 8px; z-index: 6;
  width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center;
  background: #3fe0a8; color: #06281c; font: 800 11px/1 var(--display);
  box-shadow: 0 0 12px #3fe0a8; opacity: 0;
}
@keyframes m-haken { 0%, 82% { opacity: 0; transform: scale(0); } 88% { opacity: 1; transform: scale(1.3); } 94%, 100% { opacity: 1; transform: scale(1); } }

/* — Mahjong: zwei gleiche freie Steine antippen, beide verschwinden — */
.mj-feld { position: relative; width: 72px; height: 52px; margin-top: 4px; }
.mj {
  position: absolute; width: 22px; height: 28px; border-radius: 3px;
  display: grid; place-items: center;
  background: linear-gradient(158deg, #fffbf2, #ebe2cd);
  box-shadow: 2px 2px 0 #c7b892, 3px 3px 0 #7b6b48, 0 5px 9px rgba(0, 0, 0, .45);
}
.mj i { width: 14px; height: 18px; display: block; }
.mj .p1 { background: radial-gradient(circle at 50% 50%, #e63946 0 3.5px, #fff 3.6px 4.6px, #2a9d8f 4.7px 6px, transparent 6.1px); }
.mj .p2 { background: radial-gradient(circle at 50% 28%, #2a9d8f 0 3.6px, transparent 3.7px), radial-gradient(circle at 50% 72%, #e63946 0 3.6px, transparent 3.7px); }
.mj .p3 { background: radial-gradient(circle at 22% 22%, #2a9d8f 0 3px, transparent 3.1px), radial-gradient(circle at 50% 50%, #e63946 0 3px, transparent 3.1px), radial-gradient(circle at 78% 78%, #2a9d8f 0 3px, transparent 3.1px); }
.mj-a, .mj-b { z-index: 2; }
.sp-mahjong.aktiv .mj-a, .sp-mahjong.weg .mj-a { animation-name: mj-a; }
.sp-mahjong.aktiv .mj-b, .sp-mahjong.weg .mj-b { animation-name: mj-b; }
.sp-mahjong.aktiv .mj-unten, .sp-mahjong.weg .mj-unten { animation-name: mj-frei; }
@keyframes mj-a {
  0%, 14% { transform: translate(0, 0); opacity: 1; box-shadow: 2px 2px 0 #c7b892, 3px 3px 0 #7b6b48, 0 5px 9px rgba(0,0,0,.45); }
  20%, 48% { transform: translate(0, -3px); opacity: 1; box-shadow: 0 0 0 2px #ffd23f, 2px 2px 0 #c7b892, 0 0 14px #ffd23f; }
  70%, 100% { transform: translate(12px, -20px) scale(.3) rotate(25deg); opacity: 0; }
}
@keyframes mj-b {
  0%, 32% { transform: translate(0, 0); opacity: 1; box-shadow: 2px 2px 0 #c7b892, 3px 3px 0 #7b6b48, 0 5px 9px rgba(0,0,0,.45); }
  38%, 48% { transform: translate(0, -3px); opacity: 1; box-shadow: 0 0 0 2px #ffd23f, 2px 2px 0 #c7b892, 0 0 14px #ffd23f; }
  70%, 100% { transform: translate(-12px, -20px) scale(.3) rotate(-25deg); opacity: 0; }
}
@keyframes mj-frei { 0%, 66% { filter: brightness(1); } 76% { filter: brightness(1.25) drop-shadow(0 0 6px #ffd23f); } 92%, 100% { filter: brightness(1.08); } }

/* — Wasser-Sortierung: die oberste Farbe hinübergießen — */
.w-feld { position: relative; width: 86px; height: 60px; }
.w {
  position: absolute; bottom: 2px; width: 15px; height: 46px; padding: 1.5px;
  display: flex; flex-direction: column-reverse; gap: 1px;
  border: 1.5px solid rgba(255, 255, 255, .6); border-top: 0; border-radius: 0 0 8px 8px;
  background: rgba(255, 255, 255, .05); overflow: hidden;
}
.w i { flex: none; height: 10px; }
.w i:first-child { border-radius: 0 0 6px 6px; }
.w-giesser { left: 6px; transform-origin: 50% 0%; }
.w:nth-of-type(2) { left: 35px; }
.w-ziel { left: 64px; }
.w-neu { height: 0 !important; }
.w-strahl { position: absolute; left: 69px; top: 4px; width: 3px; height: 0; border-radius: 2px; background: #3fa9ff; box-shadow: 0 0 6px #3fa9ff; }
.sp-wasser.aktiv .w-giesser, .sp-wasser.weg .w-giesser { animation-name: w-kippen; }
.sp-wasser.aktiv .w-oben, .sp-wasser.weg .w-oben { animation-name: w-leeren; }
.sp-wasser.aktiv .w-neu, .sp-wasser.weg .w-neu { animation-name: w-fuellen; }
.sp-wasser.aktiv .w-strahl, .sp-wasser.weg .w-strahl { animation-name: w-strahl; }
.sp-wasser.aktiv .w-ziel, .sp-wasser.weg .w-ziel { animation-name: w-fertig; }
@keyframes w-kippen {
  0%, 8% { transform: translate(0, 0) rotate(0); }
  28%, 60% { transform: translate(52px, -10px) rotate(108deg); }
  78%, 100% { transform: translate(0, 0) rotate(0); }
}
@keyframes w-leeren { 0%, 32% { height: 10px; } 56%, 100% { height: 0; } }
@keyframes w-fuellen { 0%, 34% { height: 0; } 58%, 100% { height: 10px; } }
@keyframes w-strahl { 0%, 30% { height: 0; top: 4px; } 34%, 54% { height: 9px; top: 4px; } 58%, 100% { height: 0; top: 13px; } }
@keyframes w-fertig { 0%, 78% { border-color: rgba(255,255,255,.6); box-shadow: none; } 86%, 100% { border-color: #8fd0ff; box-shadow: 0 0 12px #3fa9ff; } }

/* — Breakout: der Ball prallt ab, Ziegel fallen weg — */
.b-feld { position: relative; width: 150px; height: 82px; }
.b-mauer { position: absolute; left: 3px; top: 5px; display: grid; grid-template-columns: repeat(6, 22px); gap: 2px; }
.b-mauer i { height: 6px; border-radius: 1.5px; }
.b-mauer i:nth-child(-n+6) { background: #ff6ab0; }
.b-mauer i:nth-child(n+7):nth-child(-n+12) { background: #ff9a4d; }
.b-mauer i:nth-child(n+13) { background: #ffd23f; }
.b-ball { position: absolute; left: 0; top: 0; width: 5px; height: 5px; border-radius: 50%; background: #fff; box-shadow: 0 0 7px #fff; transform: translate(72px, 68px); }
.b-schlaeger { position: absolute; left: 0; bottom: 5px; width: 30px; height: 4px; border-radius: 2px; background: var(--sp-farbe); box-shadow: 0 0 8px var(--sp-farbe); transform: translateX(60px); }
.sp-breakout.aktiv .b-ball, .sp-breakout.weg .b-ball { animation-name: b-ball; animation-timing-function: linear; }
.sp-breakout.aktiv .b-schlaeger, .sp-breakout.weg .b-schlaeger { animation-name: b-schlaeger; }
.sp-breakout.aktiv .b-treffer1, .sp-breakout.weg .b-treffer1 { animation-name: b-treffer-1; }
.sp-breakout.aktiv .b-treffer2, .sp-breakout.weg .b-treffer2 { animation-name: b-treffer-2; }
@keyframes b-ball {
  0% { transform: translate(72px, 68px); }
  25% { transform: translate(12px, 28px); }
  50% { transform: translate(97px, 68px); }
  75% { transform: translate(60px, 28px); }
  100% { transform: translate(110px, 68px); }
}
@keyframes b-schlaeger { 0% { transform: translateX(60px); } 50% { transform: translateX(85px); } 100% { transform: translateX(98px); } }
@keyframes b-treffer-1 { 0%, 24% { opacity: 1; transform: scale(1); filter: none; } 26% { filter: brightness(2.4); transform: scale(1.25); } 34%, 100% { opacity: 0; transform: scale(0) translateY(6px); } }
@keyframes b-treffer-2 { 0%, 74% { opacity: 1; transform: scale(1); filter: none; } 76% { filter: brightness(2.4); transform: scale(1.25); } 84%, 100% { opacity: 0; transform: scale(0) translateY(6px); } }

/* Ohne Bewegung (Systemeinstellung): erstes Spiel ruhig stehen lassen. */
@media (prefers-reduced-motion: reduce) {
  .sp-v { transition: none; }
}