:root{
--sky-top: #BFE8F5;
--sky-bottom: #DFF3D6;
--ink: #3A3358;
--ink-soft: #6B6486;
--card: #FFFDF8;
--water-top: #7FD4E6;
--water-bottom: #1C6E8C;
--sun: #FFC93C;
--coral: #FF8966;
--line: rgba(58,51,88,0.12);
--shadow: 0 10px 24px rgba(58,51,88,0.14);
--acc-soft: #E7F6F2;
}
*{ box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html,body{ margin:0; padding:0; }
body{
min-height:100vh; min-height:100dvh; font-family:'Quicksand', sans-serif; color: var(--ink);
background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-top) 55%, var(--sky-bottom) 100%);
overflow-x:hidden;
}
h1,h2,h3,.display{ font-family:'Baloo 2', sans-serif; margin:0; }
html, body{ height:100%; }
#app{ width:100%; min-height:100vh; margin:0; padding: 16px 22px; box-sizing:border-box; }
#app.fill-screen{ height:100vh; height:100dvh; min-height:0; display:flex; flex-direction:column; overflow:hidden; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
button:active{ transform: scale(0.96); }
/* Wartungsmodus: nur die Warte-Nachricht, keine Spiel-Elemente drumherum */
body.maintenance #fs-btn, body.maintenance #rotate-hint,
body.maintenance #minigame-test-btn, body.maintenance #quiz-test-row{ display:none !important; }
body.maintenance{ overflow:hidden; }
body.maintenance #app{ padding:0; height:100vh; height:100dvh; overflow:hidden; }
.maintenance-wrap{ height:100vh; height:100dvh; overflow:hidden; display:flex; flex-direction:column; align-items:center;
justify-content:center; text-align:center; padding: clamp(8px, 3vh, 40px) 24px; gap: clamp(4px, 1.6vh, 18px); box-sizing:border-box; }
.maintenance-perli{ width:min(28vw, 20vh, 170px); height:auto; filter: drop-shadow(0 10px 20px rgba(58,51,88,0.25)); flex-shrink:0; }
.maintenance-title{ font-family:'Baloo 2', sans-serif; font-weight:800; font-size: clamp(1.2rem, min(5vw, 5.5vh), 2.8rem);
color: var(--ink); text-wrap:balance; margin:0; }
.maintenance-text{ font-family:'Baloo 2', sans-serif; font-weight:600; font-size: clamp(0.9rem, min(3.4vw, 3.6vh), 1.7rem);
color: var(--ink); line-height:1.5; max-width:34ch; text-wrap:balance; margin:0; }
.maintenance-sign{ font-family:'Baloo 2', sans-serif; font-weight:700; font-size: clamp(1rem, min(3.6vw, 3.8vh), 1.9rem);
color: var(--coral); line-height:1.4; margin:0; }
/* Nur Querformat – im Hochformat Dreh-Hinweis */
#rotate-hint{ display:none; }
@media (orientation: portrait){
#rotate-hint{ display:flex; position:fixed; inset:0; z-index:200; align-items:center; justify-content:center;
text-align:center; padding:24px; background: var(--sky-top); color: var(--ink);
font-family:'Baloo 2', sans-serif; font-weight:700; font-size:1.4rem; line-height:1.7; }
#app{ display:none; }
#fs-btn, #unlock-btn, #minigame-test-btn{ display:none; }
/* Wartungsseite ist auch im Hochformat einfach lesbar -> Dreh-Hinweis bleibt aus */
body.maintenance #app{ display:block; }
}
/* Vollbild-Schalter oben rechts */
#fs-btn, #unlock-btn, #minigame-test-btn{ position:fixed; top:8px; z-index:150; width:34px; height:34px; border-radius:10px;
background: rgba(255,255,255,0.55); color: var(--ink); font-size:1rem; line-height:1;
display:flex; align-items:center; justify-content:center; opacity:0.55; transition: opacity .2s; }
#fs-btn{ right:10px; }
#unlock-btn{ right:52px; }
#minigame-test-btn{ right:94px; }
#fs-btn:hover, #unlock-btn:hover, #minigame-test-btn:hover{ opacity:1; }
#unlock-btn.on{ opacity:1; background:#FFD54A; }
/* Test-Buttons oben Mitte (Worträtsel / Hör-Quiz) – nur nach Tannen-Geheimtipp */
#quiz-test-row{ position:fixed; top:8px; left:50%; transform:translateX(-50%); z-index:150; display:flex; gap:8px; }
#quiz-test-row button{ font-family:'Baloo 2', sans-serif; font-weight:800; font-size:0.9rem; color:#fff; border:none; cursor:pointer;
padding:8px 16px; border-radius:999px; background: var(--coral); box-shadow: 0 3px 0 rgba(58,51,88,0.18); }
#quiz-test-row button:active{ transform: translateY(2px); box-shadow: 0 1px 0 rgba(58,51,88,0.18); }
/* ---------- Worträtsel & Hör-Quiz Popup ---------- */
.q-overlay{ position:fixed; inset:0; z-index:420; display:flex; align-items:center; justify-content:center; padding:14px;
background: rgba(14,42,56,0.45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.q-card{ position:relative; width:100%; max-width:min(94vw, 560px); max-height:96vh; overflow:auto;
background: linear-gradient(180deg, #FFFDF8, #FFF1DC); border-radius:26px; padding:22px 22px 20px;
box-shadow: 0 24px 60px rgba(10,40,55,0.5); text-align:center;
display:flex; flex-direction:column; align-items:center; gap:12px; }
/* Feste Fenstergröße: Opening-Bild und Spielfenster sind exakt gleich groß (560 x 640).
overflow:hidden statt scrollen -> der Inhalt muss reinpassen, darum sind alle Größen
unten zusätzlich an vh gekoppelt, damit auf niedrigen/queren Bildschirmen nichts abgeschnitten wird. */
.q-card.q-fixed{ width:min(94vw, 560px); height:min(94vh, 640px); justify-content:flex-start;
overflow:hidden; padding: clamp(10px, 2.6vh, 22px) clamp(12px, 3vw, 22px) clamp(8px, 2.2vh, 20px);
gap: clamp(4px, 1.4vh, 12px); box-sizing:border-box; }
.q-close{ position:absolute; top:12px; right:12px; width:34px; height:34px; border-radius:50%;
background:#fff; border:2px solid var(--line); color:var(--ink-soft); font-weight:800; cursor:pointer; }
.q-dots{ display:flex; gap:8px; margin-top:2px; flex-shrink:0; }
.q-dot{ width:10px; height:10px; border-radius:50%; background: rgba(58,51,88,0.18); }
.q-dot.done{ background: var(--sun); }
.q-dot.now{ background: var(--coral); transform: scale(1.25); }
.q-pic{ font-size: clamp(1.8rem, 7vh, 4.2rem); line-height:1; flex-shrink:0; }
.q-pic svg{ width: clamp(1.8rem, 7vh, 4.2rem); height: clamp(1.8rem, 7vh, 4.2rem); }
.q-sentence{ font-family:'Baloo 2', sans-serif; font-weight:800; font-size: clamp(0.9rem, 3.4vh, 1.35rem);
color:var(--ink); line-height:1.35; flex-shrink:0; }
.q-gap{ color:var(--coral); letter-spacing:2px; }
.q-replay{ font-family:'Baloo 2', sans-serif; font-weight:700; font-size: clamp(0.75rem, 2.2vh, 0.9rem);
color:#1C6E8C; background: rgba(127,212,230,0.25); border:none; border-radius:999px;
padding: clamp(4px, 1.2vh, 7px) 16px; cursor:pointer; flex-shrink:0; }
.q-opts{ display:grid; grid-template-columns:1fr 1fr; gap: clamp(6px, 1.6vh, 12px); width:100%;
max-width: min(360px, 90vw, 46vh); margin-top:4px; }
.q-opt{ aspect-ratio:1/1; border-radius:20px; border:3px solid rgba(58,51,88,0.12); background:#fff; cursor:pointer;
display:flex; align-items:center; justify-content:center; transition: transform .1s, border-color .15s, background .15s; }
.q-opt:active{ transform: scale(0.96); }
.q-opt-pic{ font-size: clamp(1.6rem, 5vh, 3rem); line-height:1; }
.q-opt-pic svg{ width: clamp(1.6rem, 5vh, 3rem); height: clamp(1.6rem, 5vh, 3rem); }
.q-opt.correct{ border-color:#5EBE78; background:#EBF9EE; }
.q-opt.wrong{ border-color:#E2784F; background:#FBEDE6; }
.q-feedback{ min-height:1.4em; font-family:'Baloo 2', sans-serif; font-weight:800;
font-size: clamp(0.85rem, 2.6vh, 1.05rem); flex-shrink:0; }
.q-feedback.ok{ color:#3E9E63; }
.q-feedback.hint{ color:var(--coral); }
.q-end .q-end-title{ font-family:'Baloo 2', sans-serif; font-weight:800; font-size:1.7rem; color:var(--coral); }
.q-end .q-end-sub{ font-family:'Baloo 2', sans-serif; font-weight:700; color:var(--ink-soft); }
.q-again{ font-family:'Baloo 2', sans-serif; font-weight:800; font-size:1.05rem; color:#fff; border:none; cursor:pointer;
padding:12px 30px; border-radius:999px; background: var(--coral); box-shadow: 0 4px 0 rgba(58,51,88,0.18); margin-top:4px; }
/* Opening-Fenster: NUR das Bild, exakt so groß wie das Spielfenster. Text + "Los geht's" stehen auf dem Bild. */
.q-introcard{ position:relative; padding:0; background:transparent; overflow:visible; gap:0; box-shadow:none; }
.q-intro-img{ display:block; width:100%; height:100%; object-fit:cover; border-radius:26px; cursor:pointer;
box-shadow: 0 24px 60px rgba(10,40,55,0.5); }
.q-intro-img.missing{ display:none; }
.q-intro-fallback{ display:none; width:100%; height:100%; border-radius:26px; cursor:pointer;
align-items:center; justify-content:center; text-align:center; font-family:'Baloo 2', sans-serif; font-weight:800;
font-size:1.2rem; color:var(--ink-soft); background: linear-gradient(180deg, #FFFDF8, #FFE9C7);
box-shadow: 0 24px 60px rgba(10,40,55,0.5); }
.q-intro-img.missing ~ .q-intro-fallback{ display:flex; }
.q-close-float{ position:absolute; top:-6px; right:-6px; z-index:3; box-shadow:0 3px 8px rgba(10,50,70,0.35); }
/* großes Wort + Lob nach richtiger Antwort */
.q-reveal{ cursor:pointer; }
.q-reveal-praise{ font-family:'Baloo 2', sans-serif; font-weight:800; font-size:1.2rem; color:#3E9E63; }
.q-reveal-pic{ font-size:4.6rem; line-height:1; }
.q-reveal-pic svg{ width:4.6rem; height:4.6rem; }
.q-reveal-word{ font-family:'Baloo 2', sans-serif; font-weight:800; font-size:3.4rem; color:var(--coral);
letter-spacing:1px; text-transform:lowercase; }
.quiz-card .level-icon.mix{ background: #7FD4E6; }
/* ---------- Top bar (brand + all status pills in one row) ---------- */
.topbar{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 12px; gap:10px; flex-wrap:wrap; flex-shrink:0; min-height:48px; }
.brand{ display:flex; align-items:center; gap:8px; }
.brand-logo{ display:flex; align-items:center; gap:8px; cursor:pointer; }
.brand .display{ font-size: 1.1rem; color: var(--ink); font-weight:700; }
.brand-perli{ height:40px; width:auto; flex-shrink:0; display:block;
filter: drop-shadow(0 2px 3px rgba(58,51,88,.25)); }
.back-btn.small{ width:32px; height:32px; font-size:0.95rem; }
.badges{ display:flex; gap:8px; flex-wrap:wrap; }
.badge{ display:flex; align-items:center; gap:5px; background: var(--card); border-radius: 999px; padding: 6px 12px; box-shadow: var(--shadow); font-weight:700; font-family:'Baloo 2'; font-size:0.86rem; cursor:pointer; }
.badge.streak span.n{ color:#FF7A45; }
.badge.food span.n{ color: var(--coral); }
.badge.goal span.n{ color: #4E9F5A; }
.badge.goal{ cursor:default; }
/* ---------- Landscape two-column layout, fills remaining height ---------- */
.main-layout{ display:flex; gap: 20px; align-items:stretch; flex:1; min-height:0; }
.left-col{ flex: 1.15; min-width:0; display:flex; flex-direction:column; }
.right-col{ flex: 0.85; min-width:0; overflow-y:auto; padding-right:4px; }
.right-col-wrap{ flex: 0.85; min-width:0; min-height:0; display:flex; flex-direction:column; }
.right-col-wrap > .right-col{ flex: 1 1 auto; }
/* ---------- Playful tap reactions ---------- */
.tap-bounce{ animation: tap-bounce-kf 500ms ease; }
@keyframes tap-bounce-kf{ 0%{ transform: scale(1) rotate(0);} 30%{ transform: scale(1.28) rotate(-9deg);} 60%{ transform: scale(0.9) rotate(7deg);} 100%{ transform: scale(1) rotate(0);} }
.tap-spin{ animation: tap-spin-kf 550ms ease; }
@keyframes tap-spin-kf{ 0%{ transform: rotate(0) scale(1);} 60%{ transform: rotate(320deg) scale(1.15);} 100%{ transform: rotate(360deg) scale(1);} }
.tap-jump{ animation: tap-jump-kf 450ms ease; }
@keyframes tap-jump-kf{ 0%,100%{ transform: translateY(0) scale(1);} 40%{ transform: translateY(-14px) scale(1.08);} 70%{ transform: translateY(2px) scale(0.95);} }
.tap-soft{ animation: tap-soft-kf 320ms ease; }
@keyframes tap-soft-kf{ 0%,100%{ transform: scale(1);} 50%{ transform: scale(1.06);} }
.burst-piece{ position:fixed; font-size:1.25rem; z-index:80; pointer-events:none; animation: burst-out-kf 700ms ease-out forwards; }
@keyframes burst-out-kf{ 0%{ transform: translate(0,0) scale(0.5); opacity:1;} 100%{ transform: translate(var(--dx), var(--dy)) scale(1.15); opacity:0;} }
.confetti-piece{ position:fixed; top:-10px; font-size:1.4rem; z-index:80; animation: fall linear forwards; pointer-events:none; }
@keyframes fall{ to{ transform: translateY(110vh) rotate(360deg); opacity:0.2; } }
/* ---------- Onboarding – bunt & krumm, passt ohne Scrollen ---------- */
#app.fill-screen .onboard-wrap{ flex:1; align-items:center; }
.onboard-wrap{ position:relative; display:flex; justify-content:center; overflow:hidden; }
.onboard-wrap::before, .onboard-wrap::after{ content:''; position:absolute; z-index:0; filter: blur(1px); opacity:.7;
border-radius: 42% 58% 63% 37% / 45% 40% 60% 55%; }
.onboard-wrap::before{ width:110px; height:110px; background:#FFD86B; left:3%; top:8%; transform: rotate(-9deg); }
.onboard-wrap::after{ width:140px; height:140px; background:#FF9EC4; right:1%; bottom:6%; transform: rotate(12deg); }
.onboard-card{ position:relative; z-index:1; width:60%; min-width:280px; max-width:420px; margin:0 auto;
max-height:100%; overflow-y:auto;
background: var(--card); padding: 14px 18px 16px; text-align:center;
border: 3px solid #FFE0C4; box-shadow: 0 12px 28px rgba(58,51,88,.16);
border-radius: 30px 40px 26px 42px / 40px 26px 40px 28px; transform: rotate(-1.1deg); }
.onboard-emojis{ font-size: 1.9rem; }
.onboard-perli{ display:block; width:112px; max-width:38%; height:auto; margin:0 auto 2px;
transform: rotate(-3deg); filter: drop-shadow(0 4px 6px rgba(58,51,88,.2)); }
.onboard-card h2{ font-family:'Baloo 2'; color: var(--coral); transform: rotate(1deg); margin: 2px 0 4px; font-size:1.25rem; line-height:1.2; }
.onboard-greet{ font-family:'Baloo 2'; font-weight:800; font-size:1.4rem; letter-spacing:.5px;
transform: rotate(-1.5deg); margin: 10px 0 6px; }
.onboard-greet .grad{ color:#FF7A45;
background: linear-gradient(92deg,#FF5A7A 0%,#FF9F1C 28%,#33C3A6 52%,#4A8CFF 74%,#C24BE0 100%);
-webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.onboard-greet .greet-emoji{ -webkit-text-fill-color:initial; display:inline-block; transform: rotate(6deg); }
.onboard-divider{ height:12px; margin: 6px -6px; opacity:.75;
background: radial-gradient(circle at 10px -5px, transparent 8px, #8FD9E8 9px) 0 4px / 22px 12px repeat-x; }
.field{ margin: 8px 0; text-align:left; }
.field label{ font-family:'Baloo 2'; font-weight:700; font-size:.9rem; display:block; margin-bottom:3px; transform: rotate(-.6deg); }
.field input{ width:100%; padding: 9px 12px; font-family:'Quicksand'; font-size:1rem; background:#fff; color:var(--ink);
border: 3px solid var(--line); transform: rotate(.5deg);
border-radius: 15px 20px 13px 20px / 20px 13px 20px 15px; }
.field input:focus{ outline:none; border-color: var(--coral); }
.avatar-grid, .color-grid{ display:flex; gap:7px; justify-content:center; flex-wrap:wrap; margin-top:3px; }
.avatar-opt{ width:40px; height:40px; font-size:1.35rem; display:flex; align-items:center; justify-content:center;
background:#FFF6EA; border: 3px solid transparent; cursor:pointer; padding:0;
border-radius: 46% 54% 52% 48% / 52% 48% 54% 46%; }
.color-opt{ width:36px; height:36px; border: 3px solid rgba(0,0,0,0.10); cursor:pointer; padding:0;
border-radius: 48% 52% 46% 54% / 54% 46% 52% 48%; }
.avatar-opt:nth-child(3n){ transform: rotate(-6deg); }
.avatar-opt:nth-child(3n+2){ transform: rotate(5deg); }
.color-opt:nth-child(3n){ transform: rotate(6deg); }
.color-opt:nth-child(3n+2){ transform: rotate(-7deg); }
.avatar-opt.selected{ border-color: var(--ink); background:#FFE7CD; }
.color-opt.selected{ border-color: var(--ink); box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--ink); }
.avatar-opt:active, .color-opt:active{ transform: scale(0.9); }
.cta-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; background: var(--coral); color:#fff; font-family:'Baloo 2'; font-weight:700; font-size:1.05rem; padding: 14px 26px; border-radius:999px; box-shadow: var(--shadow); width:100%; margin-top: 8px; }
.cta-btn.ghost{ background:transparent; color: var(--ink-soft); box-shadow:none; border:2px solid var(--line); }
.onboard-card .cta-btn{ padding: 10px 22px; margin-top: 6px; border-radius: 999px 24px 999px 24px; transform: rotate(-1deg); }
.brand-user{ font-family:'Baloo 2'; font-weight:700; font-size:.9rem; color: var(--ink-soft); margin-left:4px; white-space:nowrap; }
/* ---------- Scene: Himmel oben, dann Waldgrün, dann Wiese, dann Teich ---------- */
.scene{ position:relative; flex:1; min-height:0; width:100%; border-radius: 26px; overflow:hidden;
transition: filter .45s ease;
background: linear-gradient(180deg,
#8CCBEA 0%, #A6D8F0 7%, #C6E7DF 13%,
#A6D888 17%, #97CE77 45%, #89C866 100%); }
.raindrop{ position:fixed; width:2px; background: rgba(105,150,190,0.75); border-radius:1px;
z-index:70; pointer-events:none; animation: rain-fall linear forwards; }
@keyframes rain-fall{ from{ transform: translateY(0); opacity:0.85; } to{ transform: translateY(78vh); opacity:0; } }
.sun-orbit{ position:absolute; top:8px; left:-56px; z-index:2; will-change: transform;
animation: sun-drift 26s linear infinite; }
.sun{ position:relative; width:44px; height:44px; border-radius:50%; background: radial-gradient(circle at 35% 30%, #FFF3C4, var(--sun)); box-shadow: 0 0 18px rgba(255,201,60,0.55); cursor:pointer; }
.sun.winking{ animation: sun-wink 350ms ease; }
@keyframes sun-drift{ from{ transform: translateX(0); } to{ transform: translateX(1120px); } }
@keyframes sun-wink{ 0%,100%{ transform: scaleY(1);} 50%{ transform: scaleY(0.2);} }
.sun-face{ position:absolute; inset:0; }
.sun-eye{ position:absolute; width:4.5px; height:6px; background: var(--ink); border-radius:50%; top:16px; }
.sun-eye.l{ left:12px; } .sun-eye.r{ left:25px; }
.sun-mouth{ position:absolute; left:13px; top:23px; width:16px; height:8px; border-bottom: 3px solid var(--ink); border-radius: 0 0 16px 16px; }
.cloud{ position:absolute; left:-170px; opacity:0.9; cursor:pointer; z-index:2; will-change: transform; }
.cloud.c1{ top:2px; animation: cloud-drift 34s linear infinite; }
.cloud.c2{ top:32px; animation: cloud-drift 46s linear infinite; animation-delay:-18s; }
@keyframes cloud-drift{ from{ transform: translateX(0); } to{ transform: translateX(1240px); } }
/* Regenbogen nach Wolken-Tipp: hinten in der Mitte, sanft ein-/ausgeblendet */
.rainbow{ position:absolute; left:50%; bottom:77%; transform: translateX(-50%);
width:48%; max-width:330px; aspect-ratio: 2.7 / 1; z-index:0; pointer-events:none; opacity:0;
filter: blur(1.2px);
animation: rainbow-life 11s ease forwards; }
.rainbow svg{ display:block; width:100%; height:100%; }
@keyframes rainbow-life{ 0%{ opacity:0; } 27%{ opacity:0.5; } 73%{ opacity:0.5; } 100%{ opacity:0; } }
.meadow-decor{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.secret-key{ pointer-events:auto; cursor:default; }
.secret-key.secret-on{ filter: drop-shadow(0 0 5px #FFD54A) drop-shadow(0 0 10px rgba(255,213,74,0.6)); }
.land-layer{ position:absolute; inset:0; z-index:5; pointer-events:none; }
.land-layer .decor-item{ pointer-events:auto; }
.flower{ position:absolute; font-size:1.15rem; }
.flower.fg{ font-size:1.6rem; filter: drop-shadow(0 2px 2px rgba(0,0,0,0.15)); }
.tree{ position:absolute; }
.bush{ position:absolute; font-size:1.05rem; opacity:0.95; }
.reed{ position:absolute; font-size:1rem; opacity:0.9; }
.blade{ position:absolute; bottom:0; width:3px; height:14px; background:#7BBF6E; border-radius:3px 3px 0 0; transform-origin:bottom center; animation: sway 3s ease-in-out infinite; opacity:0.85; }
@keyframes sway{ 0%,100%{ transform: rotate(-6deg);} 50%{ transform: rotate(6deg);} }
.pond-halo{ position:absolute; z-index:2; border-radius: 46% 54% 58% 42% / 50% 44% 56% 50%;
background: radial-gradient(circle, rgba(46,95,88,0.4), rgba(46,95,88,0) 72%); filter: blur(14px); }
.fish2-outline{ display:inline-flex; align-items:center; margin-left:12px; }
.fish2-outline.ready{ animation: f2pulse 1.2s ease-in-out infinite; }
@keyframes f2pulse{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.14);} }
.bird-fly{ z-index:90; pointer-events:none; animation: bird-fly-kf linear forwards; font-size:1.15rem; }
@keyframes bird-fly-kf{ 0%{ transform: translate(0,0);} 50%{ transform: translate(calc(var(--fly-dist) * 0.5), var(--fly-drift));} 100%{ transform: translate(var(--fly-dist), 0);} }
/* ---------- Pond (sits inside .scene, no card shadow, blends via soft mask fade) ---------- */
.tank{ position:absolute; left:0%; right:0%; top:26%; bottom:5%; overflow:hidden; z-index:3;
background:
linear-gradient(115deg, rgba(255,255,255,0) 38%, rgba(255,255,255,0.07) 50%, rgba(255,255,255,0) 62%),
radial-gradient(ellipse 40% 24% at 28% 18%, rgba(255,255,255,0.16), rgba(255,255,255,0) 70%),
radial-gradient(ellipse 30% 22% at 72% 60%, rgba(255,255,255,0.05), rgba(255,255,255,0) 70%),
radial-gradient(ellipse 26% 30% at 40% 78%, rgba(0,0,0,0.06), rgba(0,0,0,0) 70%),
radial-gradient(ellipse 22% 20% at 84% 26%, rgba(0,0,0,0.05), rgba(0,0,0,0) 70%),
radial-gradient(ellipse 130% 95% at 50% 40%, rgba(255,255,255,0.05), rgba(255,255,255,0) 60%),
radial-gradient(ellipse 100% 100% at 50% 52%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.12) 100%),
linear-gradient(175deg, #86C6BE 0%, #3E7F78 52%, #2B5E58 100%);
-webkit-clip-path: url(#pondClip); clip-path: url(#pondClip); }
.tank-floor{ position:absolute; left:0; right:0; bottom:0; height: 18px; background: #6B5A3E; opacity:0.7; }
.bubble{ position:absolute; bottom:16px; width:7px; height:7px; border-radius:50%; background: rgba(255,255,255,0.4); animation: rise linear infinite; }
@keyframes rise{ 0%{ transform: translateY(0); opacity:0.7;} 100%{ transform: translateY(-190px); opacity:0; } }
.fish-bubble{ position:fixed; border-radius:50%; background: rgba(255,255,255,0.65); border:1px solid rgba(255,255,255,0.85); z-index:80; pointer-events:none; animation: fish-bubble-rise 900ms ease-out forwards; }
@keyframes fish-bubble-rise{ 0%{ transform: translateY(0) scale(0.7); opacity:0.9;} 100%{ transform: translateY(-70px) scale(1.1); opacity:0;} }
.decor-fab{ position:absolute; right:2%; top:40%; display:flex; align-items:center; justify-content:center; padding:4px; font-size:2rem; z-index:5; background:none; box-shadow:none; filter: drop-shadow(0 3px 4px rgba(0,0,0,0.28)); }
.decor-fab .count-badge{ position:absolute; top:-4px; right:-8px; background: var(--coral); color:#fff; font-size:0.66rem; font-weight:700; border-radius:999px; padding: 1px 6px; }
.decor-fab .fab-new{ position:absolute; top:-6px; right:-14px; background: var(--coral); color:#fff;
font-family:'Baloo 2'; font-weight:800; font-size:0.62rem; letter-spacing:.02em; padding:1px 7px;
border-radius:999px; box-shadow:0 2px 5px rgba(0,0,0,0.25); animation: new-pulse 1.3s ease-in-out infinite; }
@keyframes new-pulse{ 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.14); } }
@media (prefers-reduced-motion: reduce){ .decor-fab .fab-new{ animation:none; } }
.feed-house{ position:absolute; left:2%; top:40%; display:flex; align-items:center; justify-content:center; padding:4px; font-size:1.8rem; z-index:5; background:none; box-shadow:none; filter: drop-shadow(0 3px 4px rgba(0,0,0,0.28)); }
.feed-house.disabled{ opacity:0.4; cursor:default; filter:none; }
.feed-house .count-badge{ position:absolute; top:-4px; right:-8px; background: var(--coral); color:#fff; font-size:0.66rem; font-weight:700; border-radius:999px; padding:1px 6px; }
.food-can{ position:absolute; top:36%; left:22%; width:38px; height:38px; border-radius:12px; background: var(--card); box-shadow: var(--shadow); display:flex; align-items:center; justify-content:center; font-size:1.15rem; z-index:5; }
.food-can.disabled{ opacity:0.35; cursor:default; }
.food-can .count-badge{ position:absolute; top:-6px; right:-6px; background: var(--coral); color:#fff; font-size:0.65rem; font-weight:700; border-radius:999px; padding: 1px 5px; }
.food-flake{ position:absolute; font-size:0.9rem; z-index:6; animation: flake-fall 900ms ease-in forwards; pointer-events:none; }
@keyframes flake-fall{ 0%{ transform: translateY(0); opacity:1;} 100%{ transform: translateY(60px); opacity:0; } }
.decor-item{ position:absolute; font-size:1.7rem; transform: translate(-50%,-50%); cursor:grab; text-shadow: 0 2px 2px rgba(0,0,0,0.18); z-index:4; touch-action:none; user-select:none; }
.decor-item.large{ font-size:2.6rem; }
/* Deko-Glyph: trägt die Bewegung (in Szene UND in der Vorschau) */
.dglyph{ display:inline-block; line-height:1; }
.dglyph.m-sway { animation: dsway 4.6s ease-in-out infinite; }
.dglyph.m-bob { animation: dbob 3.2s ease-in-out infinite; }
.dglyph.m-crawl { animation: dcrawl 7.5s ease-in-out infinite; }
@keyframes dsway { 0%,100%{ transform: rotate(-4deg); } 50%{ transform: rotate(4deg); } }
@keyframes dbob { 0%,100%{ transform: translateY(1.5px); } 50%{ transform: translateY(-3px); } }
@keyframes dcrawl{ 0%,100%{ transform: translateX(-3px) rotate(-3deg); } 50%{ transform: translateX(3px) rotate(3deg); } }
@media (prefers-reduced-motion: reduce){
.dglyph.m-sway, .dglyph.m-bob, .dglyph.m-crawl{ animation:none; }
}
.fish-wrap{ position:absolute; transition: left 4s ease-in-out, top 4s ease-in-out; cursor:pointer; }
.fish-wrap.bob{ animation: fish-bob-kf 2.6s ease-in-out infinite; }
@keyframes fish-bob-kf{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-5px);} }
.fish-wrap.flip .fish-svg{ transform: scaleX(-1); }
.fish-pupil{ transition: transform 400ms ease; }
.fish-wrap.looking .fish-pupil{ transform: translate(-2px,0); }
.mouth-closed{ display:block; } .mouth-open{ display:none; }
.fish-wrap.eating .mouth-closed{ display:none; } .fish-wrap.eating .mouth-open{ display:block; }
.decor-item{ position:absolute; font-size:1.9rem; transform: translate(-50%,-50%); cursor:grab; text-shadow: 0 2px 2px rgba(0,0,0,0.18); }
.food-can{ position:absolute; top:10px; right:10px; width:44px; height:44px; border-radius:14px; background: var(--card); box-shadow: var(--shadow); display:flex; align-items:center; justify-content:center; font-size:1.4rem; z-index:3; }
.food-can.disabled{ opacity:0.35; cursor:default; }
.food-can .count-badge{ position:absolute; top:-6px; right:-6px; background: var(--coral); color:#fff; font-size:0.68rem; font-weight:700; border-radius:999px; padding: 1px 6px; }
.food-flake{ position:absolute; font-size:1rem; z-index:4; animation: flake-fall 900ms ease-in forwards; pointer-events:none; }
@keyframes flake-fall{ 0%{ transform: translateY(0); opacity:1;} 100%{ transform: translateY(70px); opacity:0; } }
/* Futterpulver: feine Körnchen, die zum Fisch treiben */
.food-powder{ position:absolute; width:11px; height:11px; margin:-5px 0 0 -5px; border-radius:50%;
background:#FFD98A; box-shadow:0 0 6px rgba(255,224,160,1), 0 1px 2px rgba(80,48,12,0.6);
z-index:6; opacity:1; pointer-events:none;
transition: left 900ms ease-in, top 900ms ease-in, opacity 300ms ease-in 650ms; }
.food-powder:nth-child(odd){ background:#F2A24C; width:8px; height:8px; margin:-4px 0 0 -4px; }
.heart-row{ display:flex; align-items:center; gap:6px; margin: 0 0 0 10px; }
.heart-bar{ width:90px; flex:none; height:12px; background: rgba(255,255,255,0.5); border-radius:999px; overflow:hidden; box-shadow: inset 0 1px 3px rgba(0,0,0,0.08); }
.heart-fill{ height:100%; background: linear-gradient(90deg, #FF8FA3, #FF5C7A); border-radius:999px; transition: width 500ms ease; }
.heart-label{ font-family:'Baloo 2'; font-weight:700; font-size:0.85rem; color: var(--ink-soft); white-space:nowrap; }
.heart-row.heart-full .heart-fill{ animation: heart-pulse 1.1s ease-in-out infinite; }
.heart-row.heart-full .heart-label{ color:#FF5C7A; }
@keyframes heart-pulse{ 0%,100%{ filter:brightness(1); } 50%{ filter:brightness(1.25); } }
/* ---------- Zoohandlung ---------- */
.shop-title{ font-family:'Baloo 2'; font-weight:700; font-size:1.15rem; margin: 2px 2px 8px; }
.shop-tabs{ display:flex; gap:8px; margin-bottom:10px; }
.shop-tab{ flex:1; padding:8px 10px; border-radius:999px; border:2px solid var(--line); background:var(--card);
font-family:'Baloo 2'; font-weight:700; font-size:0.9rem; color:var(--ink-soft); }
.shop-tab.active{ background:var(--ink); color:#fff; border-color:var(--ink); }
.shop-grid{ display:flex; flex-wrap:wrap; gap:8px; }
.shop-item{ position:relative; width:62px; height:62px; border-radius:16px; background:var(--card); box-shadow:var(--shadow);
display:flex; align-items:center; justify-content:center; font-size:0; cursor:grab; touch-action:pan-y; user-select:none; }
.shop-item .dglyph{ font-size:2.3rem; }
.shop-item.large .dglyph{ font-size:2.9rem; }
.shop-item.fish{ font-size:0; }
.shop-item.fish svg{ display:block; }
.shop-item.fish-avail{ border:2px solid var(--coral); background:linear-gradient(160deg,#FFEDE6,#FFF7DC);
cursor:grab; animation: fishpulse 1.5s ease-in-out infinite; }
@keyframes fishpulse{ 0%,100%{ box-shadow:var(--shadow); } 50%{ box-shadow:0 0 0 4px rgba(255,137,102,0.28); } }
.shop-item.locked{ opacity:0.62; filter:grayscale(0.45); cursor:default; box-shadow:none; background:rgba(255,255,255,0.5); }
.shop-item.placed{ opacity:0.5; cursor:default; }
.shop-item.is-new{ border-color: var(--coral); }
.shop-item .shop-new{ position:absolute; top:-7px; right:-7px; background: var(--coral); color:#fff;
font-family:'Baloo 2'; font-weight:800; font-size:0.58rem; letter-spacing:.02em; padding:1px 6px;
border-radius:999px; box-shadow:0 2px 4px rgba(0,0,0,0.25); transform: rotate(6deg); }
.shop-check{ position:absolute; right:-4px; bottom:-4px; width:16px; height:16px; border-radius:999px;
background:#4E9F5A; color:#fff; font-size:0.7rem; display:flex; align-items:center; justify-content:center; }
.shop-count{ margin-top:10px; color:var(--ink-soft); font-size:0.8rem; font-family:'Baloo 2'; font-weight:700; }
/* Rechte Spalte im Shop: Inhalt scrollt, der Zurück-Pfeil sitzt bündig am unteren Teichrand */
.right-col.shop-col{ display:flex; flex-direction:column; overflow:visible; }
.shop-col .shop-scroll{ flex:1 1 auto; min-height:0; overflow-y:auto; padding-right:4px; }
.shop-back{ display:flex; align-items:center; justify-content:center; width:56px; height:56px;
border-radius:50%; background: var(--coral); box-shadow: var(--shadow); border:none; cursor:pointer;
transform: rotate(-3deg); }
.shop-col .shop-back{ margin:12px 0 0; align-self:flex-start; flex-shrink:0; }
.shop-back:active{ transform: rotate(-3deg) scale(0.92); }
/* ---------- Decor tray ---------- */
.tray-title{ font-family:'Baloo 2'; font-weight:700; font-size:0.95rem; margin: 6px 4px 8px; color: var(--ink-soft); }
.tray{ display:flex; gap:10px; overflow-x:auto; padding: 4px 4px 10px; }
.tray-item{ min-width:54px; height:54px; border-radius:16px; background: var(--card); box-shadow: var(--shadow); display:flex; align-items:center; justify-content:center; font-size:1.6rem; cursor:grab; touch-action:none; user-select:none; }
.tray-item.special{ background: linear-gradient(160deg,#FFEDE6,#FFF7DC); border:2px solid var(--coral); }
.tray-empty{ color: var(--ink-soft); font-size:0.85rem; padding: 12px 4px; }
/* ---------- Lektions-Kreise (über den Übungen) ---------- */
.lesson-dots{ display:flex; flex-wrap:nowrap; gap:6px; align-items:center; overflow-x:auto;
margin: 0; padding-bottom:2px; scrollbar-width:none; scroll-behavior:smooth; }
.lesson-dots::-webkit-scrollbar{ display:none; }
/* im Header: linksbündig über der rechten Spalte (gleiche Aufteilung wie .main-layout) */
.topbar.with-dots{ flex-wrap:nowrap; gap:14px; align-items:center; }
.topbar.with-dots .brand{ flex:1.15 1 0; min-width:0; }
.topbar.with-dots .lesson-dots{ flex:0.85 1 0; min-width:0; justify-content:flex-start; padding-bottom:0; }
.lesson-dot{ position:relative; overflow:hidden; width:48px; height:48px; min-width:48px; border-radius:50%; border:2px solid var(--line);
background: var(--card); color: var(--ink-soft); font-family:'Baloo 2'; font-weight:700; font-size:1.15rem;
display:flex; align-items:center; justify-content:center; padding:0; }
.lesson-dot.unlocked{ color: var(--ink); }
.lesson-dot.done{ border-color:#5EAEDD; color:#fff; }
.lesson-dot.current{ border-color: var(--coral); box-shadow: 0 0 0 3px rgba(255,137,102,0.25); }
.lesson-dot.locked{ opacity:0.4; cursor:default; }
.lesson-dot .dot-num{ position:relative; z-index:2; }
/* Wasserfüllung: statisch, steigt mit dem Lektionsfortschritt, Oberkante leicht wellig */
.dot-water{ position:absolute; left:0; right:0; bottom:0; z-index:1;
height: var(--fill, 0%); background:#5BB6E8; transition: height .4s ease; }
.dot-water[style*="--fill:0%"]{ display:none; }
.dot-water::before{ content:''; position:absolute; left:-1px; right:-1px; top:-4px; height:5px;
background:#5BB6E8;
-webkit-mask: url("data:image/svg+xml;utf8,") repeat-x bottom / 18px 5px;
mask: url("data:image/svg+xml;utf8,") repeat-x bottom / 18px 5px; }
.lesson-empty{ color: var(--ink-soft); font-size:0.9rem; padding:18px 6px; text-align:center; }
/* ---------- Lektions-Sterne (feste Reihe unter den Übungen) ---------- */
.star-row{ flex-shrink:0; display:flex; align-items:center; gap:4px; padding: 8px 4px 4px 0; }
.star{ flex:1 1 0; min-width:0; max-width:50px; aspect-ratio:1; }
.star svg{ width:100%; height:100%; display:block; }
.star.on{ filter: drop-shadow(0 2px 3px rgba(224,164,0,0.4)); }
/* ---------- Levels ---------- */
.levels{ display:flex; flex-direction:column; gap:10px; margin-top: 6px; }
.level-card{ display:flex; align-items:center; gap:14px; background: var(--card); border-radius: 20px; padding: 11px 16px; box-shadow: var(--shadow); text-align:left; width:100%; }
.level-icon{ font-size: 1.65rem; width:46px; height:46px; min-width:46px; border-radius:14px; display:flex; align-items:center; justify-content:center; background: var(--acc-soft); }
.level-info{ flex:1; }
.level-name{ font-family:'Baloo 2'; font-weight:700; font-size:1.05rem; }
.level-meta{ color: var(--ink-soft); font-size:0.85rem; margin-top:2px; }
.level-check{ font-size:1.4rem; }
/* "Alles durcheinander" – unter den Themen, gleicher Rhythmus wie die Liste */
.mix-wrap{ margin-top:10px; }
.mix-row{ display:flex; gap:10px; }
.mix-row > .mix-card{ flex:1 1 0; min-width:0; width:auto; }
.mix-card{ display:flex; align-items:center; gap:14px; width:100%; text-align:left;
background: linear-gradient(150deg, #FFF1E8, #FFE7DC); border:2px solid #FFCBB0;
border-radius: 20px; padding: 11px 16px; box-shadow: var(--shadow); }
.mix-card:active{ transform: translateY(2px); }
.level-card.locked{ opacity:0.55; filter:grayscale(0.5); box-shadow:none; cursor:default; }
.mix-card.locked{ opacity:0.5; filter:grayscale(0.4); box-shadow:none; }
.mix-card .level-icon.mix{ background:#FFD8C4; font-size:1.5rem; }
.mix-card .level-name{ color:#E7663F; }
/* Startseite: Themen-Liste + "Alles durcheinander" passen sich der Höhe an -> nie scrollen */
.right-col-wrap > .right-col{ overflow:hidden; display:flex; flex-direction:column; }
.right-col-wrap .levels{ flex:1 1 auto; min-height:0; margin-top:0; gap: clamp(4px, 1.1vh, 10px); }
.right-col-wrap .levels .level-card{ flex:1 1 0; min-height:0; max-height:92px; }
.right-col-wrap .levels{ justify-content:flex-start; }
.right-col-wrap .levels.few{ flex:0 0 auto; }
.right-col-wrap .levels.few .level-card{ flex:0 0 auto; min-height:72px; }
.right-col-wrap .mix-wrap{ flex:0 0 auto; margin-top: clamp(4px, 1.1vh, 10px); }
.right-col-wrap .level-card,
.right-col-wrap .mix-card{ padding: clamp(4px, 1.3vh, 12px) 14px; gap: clamp(8px, 1.6vw, 14px); align-items:center; }
.right-col-wrap .level-icon{ width: clamp(30px, 5.4vh, 46px); height: clamp(30px, 5.4vh, 46px);
min-width: clamp(30px, 5.4vh, 46px); font-size: clamp(1rem, 3.6vh, 1.65rem); border-radius: clamp(9px, 1.6vh, 14px); }
.right-col-wrap .level-name{ font-size: clamp(0.82rem, 2.1vh, 1.05rem); line-height:1.15; }
.right-col-wrap .level-meta{ font-size: clamp(0.68rem, 1.5vh, 0.85rem); }
.right-col-wrap .level-check{ font-size: clamp(1rem, 2.7vh, 1.4rem); }
/* ---------- Übung: Kopfzeile ---------- */
.practice-top{ display:flex; align-items:center; gap:10px; margin-bottom: 12px; }
.back-btn{ background: var(--card); border-radius:999px; width:40px; height:40px; box-shadow: var(--shadow); font-size:1.1rem; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.progress-track{ flex:1; height:12px; background: rgba(255,255,255,0.65); border-radius:999px; overflow:hidden; box-shadow: inset 0 1px 3px rgba(0,0,0,0.08); }
.progress-fill{ height:100%; background: linear-gradient(90deg, var(--sun), var(--coral)); border-radius:999px; transition: width 400ms ease; }
.progress-count{ font-family:'Baloo 2'; font-weight:700; color: var(--ink-soft); font-size:0.9rem; flex-shrink:0; }
/* ---------- Übung: Karte ---------- */
.word-card{ position:relative; background: var(--card); border:3px solid #FFE7D3;
border-radius: 34px 26px 34px 26px / 26px 34px 26px 34px; padding: 20px 18px 18px;
box-shadow: var(--shadow); text-align:center; overflow:hidden; }
/* feste Kartengröße in der Übung: Wort, Satz, Spiel und Rückmeldung bleiben gleich groß, nichts "zuckt" mehr */
.right-col > .word-card{ min-height: min(calc(100dvh - 186px), max(560px, 72vh)); box-sizing:border-box; }
/* feste Zonen in der Karte: Bild oben (immer gleich hoch), Mikrofon/Rückmeldung unten (immer an derselben Stelle) */
.right-col > .word-card{ display:flex; flex-direction:column; }
.right-col > .word-card > .word-emoji{ height:8.6rem; flex:none; margin-bottom:0; }
.right-col > .word-card > .word-emoji svg{ max-height:100%; }
.right-col > .word-card > .try-section{ margin-top:auto; flex:none; min-height: 13.6rem; display:flex; flex-direction:column; justify-content:center; box-sizing:border-box; }
.right-col > .word-card .game-prompt{ min-height:4rem; display:flex; align-items:center; justify-content:center; }
.word-emoji{ font-size: 3.9rem; height: 4.6rem; margin-bottom: 2px; cursor:pointer;
display:flex; align-items:center; justify-content:center; }
.word-emoji svg{ vertical-align:middle; }
.word-emoji .l5img{ width:7.6rem; height:7.6rem; transform:none; }
.game-opt .l5img{ width:5rem; height:5rem; transform:none; }
.word-emoji .numballoon{ width:8.2rem; height:8.2rem; transform:none; }
.game-opt .numballoon{ width:4.6rem; height:4.6rem; transform:none; }
.word-emoji:active{ transform: scale(0.92) rotate(-4deg); }
/* Gezeichnete Bilder 10% größer – teils schwer zu erkennen (Emojis bleiben unverändert) */
.word-emoji svg, .game-opt svg,
.q-pic svg, .q-opt-pic svg, .q-reveal-pic svg{ transform: scale(1.1); transform-origin:center; }
.lang-row{ display:flex; gap:10px; margin-top: 12px; }
.lang-btn{ flex:1; display:flex; flex-direction:column; align-items:center; gap:5px; border-radius:22px 16px 22px 16px; padding: 12px 8px 10px; font-family:'Baloo 2'; font-weight:700; border: 2px solid var(--line); background:#fff; box-shadow: 0 3px 0 rgba(58,51,88,0.07); }
.lang-btn.de{ background: #EAF6EA; }
.lang-btn.en{ background: #F1EAF8; }
.lang-btn .word-text{ font-size:1.15rem; color: var(--ink); margin-top:2px; }
.lang-btn.speaking{ box-shadow: 0 0 0 4px rgba(255,137,102,0.35); }
.lang-btn:active{ transform: translateY(2px); box-shadow:none; }
.flag-svg{ display:block; border-radius:3px; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.round-tag{ display:block; width:fit-content; font-family:'Baloo 2'; font-weight:800; font-size:0.8rem;
color:#B4632E; background:#FFE7D0; padding:3px 13px; border-radius:999px 12px 999px 12px;
transform: rotate(-1.5deg); margin:2px auto 8px; }
/* Zwei Sätze als eigene Pillen – Flagge in einer Reihe mit dem Text, ganze Pille ist antippbar */
.sent-pill{ display:flex; align-items:center; gap:10px; width:100%; margin:7px 0; padding:11px 14px;
border:2px solid var(--line); border-radius: 22px 15px 22px 15px; background:#fff;
font-family:'Baloo 2'; font-weight:700; text-align:left; box-shadow: 0 3px 0 rgba(58,51,88,0.07); }
.sent-pill:active{ transform: translateY(2px); box-shadow:none; }
.sent-pill.de{ background:#EAF6EA; }
.sent-pill.en{ background:#F1EAF8; }
.sent-pill .sent-flag{ flex-shrink:0; display:flex; }
.sent-pill .sent-txt{ font-size:1.12rem; line-height:1.2; color: var(--ink); }
.sent-pill.en .sent-txt{ color:#7A5FB0; }
.sent-txt .new-word{ text-decoration: underline; text-decoration-color: var(--coral); text-decoration-thickness: 3px;
text-underline-offset: 3px; font-weight:800; }
.try-section{ margin-top: 12px; padding-top: 12px; }
.try-label{ font-family:'Baloo 2'; font-weight:800; font-size:1.06rem; color: var(--coral); transform: rotate(-1deg); margin-bottom:10px; }
/* Sprech-Knopf: runder Bonbon-Taster mit Perli (samt Mikro) drauf */
.mic-btn{ width:104px; height:104px; border-radius:50%; color:#fff; position:relative;
display:flex; align-items:center; justify-content:center; margin: 2px auto; padding:0; border:none;
background: radial-gradient(circle at 38% 30%, #FFB59B, var(--coral));
box-shadow: 0 8px 0 #E7663F, 0 14px 22px rgba(255,137,102,0.35);
transition: transform .07s ease, box-shadow .07s ease; }
.mic-btn:active{ transform: translateY(4px); box-shadow: 0 4px 0 #E7663F, 0 8px 14px rgba(255,137,102,0.3); }
.mic-btn .mic-perli{ width:94px; height:auto; display:block; pointer-events:none; }
.mic-btn .mic-fallback{ font-size:2.1rem; }
.mic-btn .mic-perli + .mic-fallback{ display:none; }
.mic-btn.listening{ animation: mic-pulse 1s ease-in-out infinite; }
.mic-btn.listening .mic-perli{ animation: mic-bob .9s ease-in-out infinite; }
@keyframes mic-pulse{ 0%,100%{ box-shadow: 0 8px 0 #E7663F, 0 0 0 0 rgba(255,137,102,0.5);} 50%{ box-shadow: 0 8px 0 #E7663F, 0 0 0 18px rgba(255,137,102,0);} }
@keyframes mic-bob{ 0%,100%{ transform: translateY(0) rotate(-2deg);} 50%{ transform: translateY(-3px) rotate(2deg);} }
@media (prefers-reduced-motion: reduce){ .mic-btn.listening, .mic-btn.listening .mic-perli{ animation:none; } }
.mic-hint{ color: var(--coral); font-size:1.06rem; margin-top:12px; font-family:'Baloo 2'; font-weight:800;
line-height:1.25; transform: rotate(-0.5deg); text-wrap: balance; }
/* ---------- Rückmeldung: bunt, kindgerecht ---------- */
.feedback{ margin-top: 0; padding: 8px 10px 10px; text-align:center;
border-radius: 26px 20px 26px 20px / 20px 26px 20px 26px; }
.feedback.success{ background: #E3F7DB; border:2px solid #B4E6A2; }
.feedback.help{ background: #FFF1DA; border:2px solid #FFDCA6; }
.fb-badge{ font-size:2.5rem; line-height:1; display:inline-block; animation: fb-pop 460ms cubic-bezier(.2,1.5,.4,1) both; }
/* Erfolgs-Rückmeldung: Text links, Papi-Bild rechts daneben */
.feedback.success .fb-row{ display:flex; align-items:center; justify-content:center; gap:12px; text-align:left; }
.feedback.success .fb-col{ min-width:0; }
/* Papi-Erfolgsbild (mit Platzhalter, solange keine Datei da ist) */
.fb-top{ display:inline-block; flex-shrink:0; }
.fb-papi{ display:block; height:118px; width:auto; max-width:216px;
filter: drop-shadow(0 4px 5px rgba(58,51,88,0.22));
animation: fb-pop-papi 460ms cubic-bezier(.2,1.5,.4,1) both; }
.fb-papi + .fb-papi-ph{ display:none; }
.fb-papi-ph{ display:inline-flex; align-items:center; gap:5px; padding:20px 20px;
border:2px dashed #8FCB7E; border-radius:14px; color:#3C8C3C;
font-family:'Baloo 2'; font-weight:800; font-size:0.82rem; }
@keyframes fb-pop-papi{ from{ transform: scale(0.5) rotate(-3deg); opacity:0; } to{ transform: scale(1) rotate(-3deg); opacity:1; } }
@media (prefers-reduced-motion: reduce){ .fb-papi{ animation:none; } }
.fb-perli{ display:inline-block; height:46px; width:auto; margin-bottom:2px; transform: rotate(-4deg);
animation: fb-pop 460ms cubic-bezier(.2,1.5,.4,1) both; }
.feedback .fb-text{ font-family:'Baloo 2'; font-weight:800; font-size:1.42rem; line-height:1.15; transform: rotate(-1.4deg);
animation: fb-pop 360ms cubic-bezier(.2,1.5,.4,1) both; }
.feedback.success .fb-text{ color:#3C8C3C; }
.feedback.help .fb-text{ color:#C9721B; font-size:1.1rem; transform: rotate(-0.6deg); }
.feedback .fb-sub{ color: var(--ink-soft); font-size:0.95rem; margin-top:4px; font-family:'Baloo 2'; font-weight:700; }
.feedback .fb-decor{ margin-top:8px; font-family:'Baloo 2'; font-weight:800; color: var(--coral); }
.feedback-actions{ display:flex; gap:7px; justify-content:center; margin-top:8px; flex-wrap:wrap; }
.feedback.help .feedback-actions .play-btn{ padding:8px 11px 9px; font-size:0.8rem; gap:4px; }
@keyframes fb-pop{ from{ transform: scale(0.55); opacity:0; } to{ opacity:1; } }
/* Bonbon-Buttons statt spröder Textbuttons */
.play-btn{ display:inline-flex; align-items:center; gap:6px; padding: 10px 16px 11px;
font-family:'Baloo 2'; font-weight:800; font-size:0.9rem; color:#fff; border:none;
border-radius: 999px; box-shadow: 0 4px 0 rgba(0,0,0,0.18); transform: none; }
.play-btn:active{ transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,0.18); }
.play-btn.listen{ background:#54B7D0; box-shadow: 0 4px 0 #2E8AA3; }
.play-btn.retry{ background: var(--coral); box-shadow: 0 4px 0 #E7663F; }
.play-btn.go{ background:#5BC46A; box-shadow: 0 4px 0 #3E8E3E; transform: none; }
.play-btn.go:active{ transform: translateY(3px); box-shadow: 0 1px 0 #3E8E3E; }
/* Überspringen als Grafik-Pille */
.skip-row{ text-align:center; margin-top: 12px; }
.right-col .skip-row{ margin-top: 6px; }
.skip-btn{ display:inline-flex; align-items:center; gap:7px; padding: 8px 15px 9px;
font-family:'Baloo 2'; font-weight:700; font-size:0.88rem; color: var(--ink-soft);
background:#fff; border:2px dashed var(--line); border-radius: 999px 16px 999px 16px;
transform: rotate(-1deg); box-shadow: 0 3px 0 rgba(58,51,88,0.06); }
.skip-btn .skip-ic{ font-size:1.2rem; display:inline-block; transform: scaleX(-1) rotate(20deg); }
.skip-btn:active{ transform: rotate(-1deg) translateY(2px); box-shadow:none; }
@media (prefers-reduced-motion: reduce){ .fb-badge, .fb-perli, .feedback .fb-text{ animation:none; } }
.bonus-banner{ position:absolute; inset:0; z-index:5; display:flex; align-items:center; justify-content:center; background: linear-gradient(135deg, var(--sun), var(--coral)); border-radius:28px; animation: bonus-fade 1.5s ease forwards; }
@keyframes bonus-fade{ 0%{opacity:1; transform:scale(1);} 65%{opacity:1; transform:scale(1.03);} 100%{opacity:0; transform:scale(1.12); visibility:hidden;} }
.bonus-banner-text{ font-family:'Baloo 2'; font-weight:800; color:#fff; font-size:1.8rem; text-shadow:0 2px 6px rgba(0,0,0,0.15); text-align:center; }
.game-prompt{ font-family:'Baloo 2'; font-weight:800; color: var(--coral); font-size:1.25rem; margin:6px 0 2px; transform: rotate(-1deg); }
.game-options{ display:grid; grid-template-columns: repeat(3,1fr); gap:12px; margin-top:28px; }
.game-opt{ background:#fff; border:2px solid var(--line); border-radius: 22px 16px 22px 16px; padding: 30px 6px; font-size:3.4rem; box-shadow: 0 4px 0 rgba(58,51,88,0.08);
height: 4.4rem; display:flex; align-items:center; justify-content:center; }
.game-opt svg{ vertical-align:middle; }
.game-opt:active{ transform: translateY(2px); box-shadow: 0 1px 0 rgba(58,51,88,0.08); }
.game-opt.correct{ background: #E3F7DB; border-color: #7DCB6E; box-shadow: 0 4px 0 #7DCB6E; }
.game-opt.wrong{ opacity:0.45; }
/* ---------- Level complete / all done ---------- */
.celebrate-wrap{ text-align:center; padding: 30px 10px; }
.celebrate-title{ font-size: 1.5rem; margin: 10px 0 6px; }
.celebrate-title.big{ font-size: 2rem; line-height: 1.2; }
.celebrate-sub{ color: var(--ink-soft); margin-bottom: 18px; }
.new-decor{ display:inline-flex; align-items:center; gap:10px; background: var(--card); border-radius:16px; padding: 12px 18px; box-shadow: var(--shadow); font-family:'Baloo 2'; font-weight:700; margin-bottom: 18px; }
/* ---------- Baby celebration ---------- */
.baby-emojis{ font-size: 3rem; }
.baby-emojis span{ display:inline-block; animation: pop-in 500ms ease backwards; }
.baby-emojis span:nth-child(2){ animation-delay: 120ms; }
.baby-emojis span:nth-child(3){ animation-delay: 240ms; }
@keyframes pop-in{ from{ transform: scale(0) rotate(-10deg); opacity:0;} to{ transform: scale(1) rotate(0); opacity:1;} }
.footnote{ text-align:center; color: var(--ink-soft); font-size:0.78rem; margin-top: 28px; line-height:1.5; }
/* ---------- Audio-Statusseite (?status) ---------- */
.status-gate{ max-width:280px; margin:60px auto 0; background:var(--card); border-radius:24px; padding:24px; box-shadow:var(--shadow); text-align:center; }
.status-lock{ font-size:2rem; }
.status-gate input{ width:100%; margin:12px 0; padding:12px; font-size:1.4rem; text-align:center; letter-spacing:0.4em; border:2px solid var(--line); border-radius:12px; font-family:'Quicksand'; background:#fff; color:var(--ink); }
.status-gate input:focus{ outline:none; border-color:var(--coral); }
.status-gate-msg{ color:#d00; font-size:0.85rem; min-height:1.1em; margin-bottom:6px; }
.status-wrap{ max-width:760px; margin:0 auto; padding:12px; overflow-x:auto; }
.status-head{ font-family:'Baloo 2'; font-weight:700; font-size:1.2rem; text-align:center; margin-bottom:12px; line-height:1.9; }
.status-counts{ font-size:0.95rem; color:var(--ink-soft); }
.status-table{ width:100%; border-collapse:collapse; font-size:0.9rem; background:var(--card); border-radius:14px; overflow:hidden; box-shadow:var(--shadow); }
.status-table th, .status-table td{ padding:8px 10px; text-align:center; border-bottom:1px solid var(--line); }
.status-table th:first-child, .status-table td:first-child{ text-align:left; }
.status-table thead th{ background:var(--acc-soft); font-family:'Baloo 2'; }
.status-group td{ background:var(--acc-soft); font-family:'Baloo 2'; font-weight:700; text-align:left; }
.status-legend{ text-align:center; color:var(--ink-soft); font-size:0.8rem; margin-top:12px; }
/* ---------- Minispiel "Rette Perli" – kleine Unterwasserwelt ---------- */
.mg-overlay{ position:fixed; inset:0; z-index:400;
background: rgba(14,42,56,0.25);
-webkit-backdrop-filter: blur(8px) saturate(0.9);
backdrop-filter: blur(8px) saturate(0.9);
display:flex; align-items:center; justify-content:center; padding:10px; }
/* Spielansicht: KEIN Live-Weichzeichner hinter dem laufenden Spiel – das ruckelt auf dem Tablet.
Stattdessen ein ruhiger Wasser-Hintergrund. */
.mg-overlay-play{ background: linear-gradient(180deg, rgba(12,58,78,0.92), rgba(8,38,54,0.95));
-webkit-backdrop-filter:none; backdrop-filter:none; }
.mg-card{ background: linear-gradient(180deg, #EAF7FA, #FFF6E8); border-radius:24px;
border:none; box-shadow: 0 24px 60px rgba(10,40,55,0.5); padding:12px 16px 14px;
width:100%; max-width:min(96vw, 940px); max-height:98vh; display:flex; flex-direction:column; }
/* Spielansicht: Karte umschließt das Labyrinth eng – keine weißen Flächen ringsum */
.mg-card-play{ width:auto; max-width:96vw; align-items:stretch;
background: linear-gradient(180deg, #C9ECF7 0%, #E6F5DC 100%);
border-radius:30px; padding:12px 16px 14px;
box-shadow: 0 26px 64px rgba(10,40,55,0.5); }
.mg-head{ position:relative; display:flex; align-items:center; gap:14px; margin-bottom:2px; padding:0 4px; }
.mg-card-play .mg-head{ margin-bottom:10px; min-height:44px; }
.mg-title{ font-family:'Baloo 2'; font-weight:800; font-size:1.3rem; color:#1C6E8C; flex:1; }
.mg-card-play .mg-title{ font-size:1.55rem; color:var(--coral); text-shadow:0 2px 0 rgba(255,255,255,0.6); }
.mg-level{ font-family:'Baloo 2'; font-weight:800; color:#fff; background: var(--coral); border-radius:999px; padding:4px 14px; font-size:0.85rem;
box-shadow: 0 3px 0 rgba(58,51,88,0.14); }
.mg-card-play .mg-level{ background: var(--sun); color:var(--ink); font-size:1rem; padding:5px 18px; box-shadow: 0 4px 0 rgba(58,51,88,0.16); }
.mg-close{ width:32px; height:32px; border-radius:50%; background:#fff; border:2px solid var(--line); color:var(--ink-soft); font-weight:800;
display:flex; align-items:center; justify-content:center; line-height:1; padding:0; }
.mg-card-play .mg-close{ width:40px; height:40px; font-size:1.15rem; border-color:rgba(255,255,255,0.85); box-shadow:0 3px 8px rgba(10,50,70,0.2); }
/* Pause-Knopf: waagerecht mittig in der Kopfzeile, klar getrennt vom Schließen-X */
.mg-pause{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2;
width:44px; height:44px; border-radius:50%; border:none; cursor:pointer;
display:flex; align-items:center; justify-content:center; line-height:1; padding:0;
background: linear-gradient(180deg, #8FDCF0, #2E9BC0); color:#fff; font-size:1.05rem; font-weight:800;
box-shadow: 0 4px 0 #1C6E8C, inset 0 2px 3px rgba(255,255,255,0.4), 0 5px 14px rgba(0,0,0,0.22); }
.mg-pause:active{ transform: translate(-50%,-50%) translateY(2px);
box-shadow: 0 2px 0 #1C6E8C, inset 0 2px 3px rgba(255,255,255,0.4); }
/* Pause-Fläche über dem Labyrinth */
.mg-pause-screen{ position:absolute; inset:0; z-index:12; display:none;
align-items:center; justify-content:center; cursor:pointer;
background: rgba(12,52,70,0.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
border-radius:26px; }
.mg-pause-screen.show{ display:flex; }
.mg-pause-card{ display:flex; flex-direction:column; align-items:center; gap:14px;
background: linear-gradient(180deg, #FFF6E8, #FFE9C7); border-radius:22px; padding:22px 30px;
box-shadow: 0 16px 40px rgba(10,40,55,0.5); }
.mg-pause-title{ font-family:'Baloo 2'; font-weight:800; font-size:1.5rem; color:var(--coral); }
.mg-instruction{ text-align:center; color:#3E7A8C; font-size:0.86rem; font-weight:600; margin-bottom:7px; }
/* Höhe zuerst begrenzen (Ansicht + Kopf/Fußzeile passen so immer ins Fenster,
das Steuerkreuz rutscht nicht mehr nach unten raus), Breite folgt dem Seitenverhältnis. */
.mg-maze{ position:relative; flex:none;
height: min(64vh, calc(92vw * 9 / 13), calc(96vh - 262px));
aspect-ratio: 13 / 9; width:auto; max-width:94vw; margin:0 auto;
border-radius:26px; overflow:hidden; touch-action:none;
box-shadow: inset 0 0 0 6px rgba(255,255,255,0.55), 0 10px 26px rgba(15,60,80,0.35);
transition: box-shadow .35s; }
.mg-maze.mg-panic{ box-shadow: inset 0 0 0 7px rgba(130,200,255,0.95), 0 0 26px rgba(120,190,255,0.5); }
/* Canvas-Fassung: der ganze See wird auf eine Zeichenfläche gemalt (flüssig auf älteren Tablets) */
#mgCanvas{ position:absolute; inset:0; width:100%; height:100%; display:block; border-radius:26px; }
/* Wasser + Licht + Rand */
.mg-water{ position:absolute; inset:0; background:
radial-gradient(120% 80% at 50% 0%, #A8E6F5 0%, #6FCbE2 42%, #2E86A8 100%); }
/* statisch + normales Blending: mix-blend-mode:screen kostet auf dem iPad jeden Frame Rechenzeit. */
.mg-caustics{ position:absolute; inset:0; pointer-events:none; opacity:0.45;
background:
radial-gradient(closest-side at 22% 18%, rgba(255,255,255,0.4), transparent 60%),
radial-gradient(closest-side at 74% 30%, rgba(255,255,255,0.32), transparent 60%),
repeating-linear-gradient(115deg, rgba(255,255,255,0.14) 0 8px, transparent 8px 42px); }
.mg-vignette{ position:absolute; inset:0; pointer-events:none; border-radius:26px;
box-shadow: inset 0 0 40px rgba(10,50,70,0.35), inset 0 -30px 50px rgba(10,50,70,0.28); }
/* Sandflächen + Seegras am Boden */
.mg-sand{ position:absolute; transform:translate(-50%,-50%); border-radius:50%; pointer-events:none;
background: radial-gradient(circle at 45% 40%, rgba(247,232,190,0.9), rgba(232,206,150,0.35) 70%, transparent 100%);
filter: blur(1px); }
.mg-weed{ position:absolute; bottom:-2%; transform:translateX(-50%); width:6%; pointer-events:none;
transform-origin:50% 100%; animation: mg-sway 3.4s ease-in-out infinite alternate; }
.mg-weed-svg{ width:100%; height:100%; display:block; }
@keyframes mg-sway{ from{ transform: translateX(-50%) rotate(-7deg); } to{ transform: translateX(-50%) rotate(7deg); } }
/* Felsen (Wände) – unterschiedlich geformt, unterschiedliches Gestein, moosbewachsen */
.mg-rock{ position:absolute; }
.mg-rock::before{ content:""; position:absolute; inset:var(--ins, 0%);
transform: rotate(var(--rot));
box-shadow: inset 0 -5px 7px rgba(0,0,0,0.2), inset 0 3px 5px rgba(255,255,255,0.22), 0 3px 7px rgba(10,45,40,0.28); }
/* v0 – helles Moos */
.mg-rock.rock-v0::before{ border-radius: 58% 42% 55% 45% / 55% 48% 52% 45%;
background: radial-gradient(circle at 32% 26%, rgba(255,255,255,0.3), transparent 46%),
linear-gradient(155deg, #92CE74 0%, #64A748 55%, #4C8339 100%); }
/* v1 – Graustein mit Moosflecken */
.mg-rock.rock-v1::before{ border-radius: 46% 54% 38% 62% / 50% 50% 44% 56%;
background: radial-gradient(circle at 68% 74%, rgba(90,140,70,0.55), transparent 42%),
radial-gradient(circle at 28% 30%, rgba(255,255,255,0.28), transparent 44%),
linear-gradient(150deg, #A7AEA3 0%, #808A82 55%, #626C64 100%); }
/* v2 – bräunlicher Fels */
.mg-rock.rock-v2::before{ border-radius: 63% 37% 60% 40% / 40% 60% 42% 58%;
background: radial-gradient(circle at 30% 24%, rgba(255,255,255,0.24), transparent 44%),
radial-gradient(circle at 30% 78%, rgba(95,140,70,0.5), transparent 38%),
linear-gradient(150deg, #B79A72 0%, #977C55 55%, #74603F 100%); }
/* v3 – tiefes Algen-Grün */
.mg-rock.rock-v3::before{ border-radius: 40% 60% 55% 45% / 60% 40% 58% 42%;
background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.22), transparent 45%),
linear-gradient(150deg, #6FAE8C 0%, #4C8B72 60%, #356654 100%); }
.mg-rock::after{ content:""; position:absolute; inset:20%; opacity:0.55;
background:
radial-gradient(circle at 25% 32%, rgba(50,95,45,0.6) 0 9%, transparent 10%),
radial-gradient(circle at 70% 24%, rgba(50,95,45,0.5) 0 6%, transparent 7%),
radial-gradient(circle at 66% 72%, rgba(50,95,45,0.5) 0 7%, transparent 8%); }
.mg-rock-plant{ position:absolute; left:52%; bottom:44%; width:46%; height:50%; transform:translateX(-50%);
transform-origin:50% 100%; z-index:1; }
.mg-rock-plant .mg-plant-svg{ width:100%; height:100%; display:block; }
/* Perlen */
.mg-pearl{ position:absolute; display:flex; align-items:center; justify-content:center; pointer-events:none; z-index:4; }
/* Perlen bewusst OHNE Dauer-Animation/Blur – auf dem Tablet liefen sonst ~50 Animationen gleichzeitig. */
.mg-pearl-core{ width:26%; height:26%; border-radius:50%; position:relative;
background: radial-gradient(circle at 34% 30%, #ffffff 0%, #E7F7FF 40%, #B9E4F2 75%, #8FCADF 100%);
box-shadow: 0 0 6px rgba(255,255,255,0.9), inset 0 -2px 3px rgba(120,170,190,0.4); }
.mg-pearl-core::after{ content:""; position:absolute; left:22%; top:16%; width:26%; height:26%; border-radius:50%;
background:#fff; opacity:0.95; }
.mg-pearl-power .mg-pearl-core{ width:62%; height:62%;
background: radial-gradient(circle at 34% 28%, #FFFDF0 0%, #FFE79A 45%, #FFC93C 75%, #F0A81E 100%);
box-shadow: 0 0 14px rgba(255,201,60,0.95), 0 0 4px rgba(255,255,255,0.8);
animation: mg-power-pulse 0.9s ease-in-out infinite; }
@keyframes mg-power-pulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.2); } }
/* Eingesammelt: Perle bleibt im DOM (kein Entfernen -> keine Ruckler), blendet nur kurz aus. */
.mg-pearl-gone{ animation: mg-pearl-collect 0.35s ease-out forwards; }
@keyframes mg-pearl-collect{
0%{ opacity:1; transform:scale(1); }
55%{ opacity:1; transform:scale(1.7); }
100%{ opacity:0; transform:scale(2); visibility:hidden; } }
/* Einsammel-Effekt */
.mg-pop{ position:absolute; transform:translate(-50%,-50%); width:34%; height:34%; border-radius:50%;
border:3px solid rgba(255,255,255,0.95); pointer-events:none; z-index:7;
animation: mg-pop-a 0.5s ease-out forwards; }
.mg-pop-power{ width:70%; height:70%; border-color: rgba(255,201,60,0.95); }
@keyframes mg-pop-a{ 0%{ transform:translate(-50%,-50%) scale(0.4); opacity:1; }
100%{ transform:translate(-50%,-50%) scale(1.9); opacity:0; } }
/* Blasenspur hinter Perli */
.mg-trail{ position:absolute; transform:translate(-50%,-50%); width:var(--tsz); padding-bottom:var(--tsz);
border-radius:50%; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.9), rgba(255,255,255,0.25) 70%, transparent);
pointer-events:none; z-index:3; animation: mg-trail-a 0.7s ease-out forwards; }
@keyframes mg-trail-a{ 0%{ opacity:0.8; transform:translate(-50%,-50%) scale(0.6); }
100%{ opacity:0; transform:translate(-50%,-90%) scale(1.2); } }
/* Perli – groß & gut sichtbar. Ausrichtung über --fx (1/-1 = rechts/links) und --tilt (Nase hoch/runter).
Bewegung über transform:translate3d, sonst so leichtgewichtig wie die Haie (kein Filter/Schatten,
keine Extra-Ebene) -> auf dem iPad flüssig. */
.mg-perli{ position:absolute; left:0; top:0; display:flex; align-items:center; justify-content:center; z-index:8;
will-change:transform; transform: translate3d(var(--mx,0), var(--my,0), 0); }
.mg-perli img{ width:150%; height:150%; object-fit:contain; will-change:transform;
transform: rotate(var(--tilt, 0deg)) scaleX(var(--fx, 1)); }
/* Babyhaie – größer, rundlich, verspielt. Bewegung ebenfalls über transform:translate3d. */
.mg-shark{ position:absolute; left:0; top:0; display:flex; align-items:center; justify-content:center; z-index:6;
will-change:transform; transform: translate3d(var(--mx,0), var(--my,0), 0); }
.mg-shark svg{ width:132%; height:132%; filter: drop-shadow(0 3px 4px rgba(10,50,70,0.3));
animation: mg-shark-bob 1s ease-in-out infinite; }
@keyframes mg-shark-bob{ 0%,100%{ transform: translateY(-6%) rotate(-5deg); } 50%{ transform: translateY(6%) rotate(5deg); } }
.mg-shark.mg-face-left svg{ animation-name: mg-shark-bob-l; }
@keyframes mg-shark-bob-l{ 0%,100%{ transform: scaleX(-1) translateY(-6%) rotate(5deg); } 50%{ transform: scaleX(-1) translateY(6%) rotate(-5deg); } }
.mg-shark.mg-scared svg,
.mg-shark.mg-scared.mg-face-left svg{ filter: grayscale(0.35) brightness(1.25) drop-shadow(0 0 6px rgba(140,205,255,0.95));
animation: mg-shark-dizzy 0.5s linear infinite; }
.mg-shark.mg-eaten{ opacity:0.28; }
.mg-shark.mg-eaten svg{ transform: scale(0.55); animation:none; }
@keyframes mg-shark-dizzy{ 0%{ transform: rotate(-14deg) scale(1.05); } 50%{ transform: rotate(14deg) scale(1.05); } 100%{ transform: rotate(-14deg) scale(1.05); } }
/* Blasen (Deko) */
.mg-bubble{ position:absolute; bottom:-8%; border-radius:50%; pointer-events:none; z-index:5;
background: radial-gradient(circle at 32% 28%, rgba(255,255,255,0.95), rgba(255,255,255,0.2) 68%, transparent);
animation-name: mg-bubble-rise; animation-timing-function: ease-in; animation-iteration-count: infinite; }
@keyframes mg-bubble-rise{ 0%{ transform: translateY(0) translateX(0); opacity:0; }
12%{ opacity:0.85; } 50%{ transform: translateY(-160%) translateX(8%); }
88%{ opacity:0.7; } 100%{ transform: translateY(-320%) translateX(-6%); opacity:0; } }
.mg-banner{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center;
font-family:'Baloo 2'; font-weight:800; font-size:1.2rem; color:#fff; padding:0 18px;
opacity:0; pointer-events:none; transition:opacity 0.2s; z-index:10; }
.mg-banner.show{ opacity:1; background:rgba(28,110,140,0.55); }
.mg-banner.mg-oops{ background:rgba(226,120,80,0.62); }
.mg-banner.mg-win{ background:rgba(90,190,120,0.68); }
/* HUD unter dem Labyrinth: eine bunte Reihe, kein Leerraum */
.mg-footer{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:10px; flex-wrap:wrap; }
.mg-hud-lives{ display:flex; align-items:center; gap:9px;
background: rgba(255,137,102,0.16); border:2px solid rgba(255,137,102,0.5);
border-radius:999px; padding:6px 14px 6px 12px; }
.mg-hud-label{ font-family:'Baloo 2'; font-weight:800; font-size:1rem; color:var(--coral); letter-spacing:.02em; }
.mg-lives{ display:flex; gap:6px; align-items:center; }
.mg-life{ width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; transition: opacity .25s, transform .25s; }
.mg-life img{ width:100%; height:100%; object-fit:contain; filter: drop-shadow(0 2px 3px rgba(10,50,70,0.32)); }
.mg-life.spent{ opacity:0.2; transform: scale(0.75); filter: grayscale(1); }
.mg-hud-pearls{ font-family:'Baloo 2'; font-weight:800; color:#fff; font-size:1.05rem;
display:flex; align-items:center; justify-content:center; gap:9px; padding:8px 18px; border-radius:999px;
min-width:150px; /* feste Breite -> Textwechsel löst kein Neu-Layout der Fußzeile aus */
background: linear-gradient(180deg, #7FD4E6, #2E9BC0);
box-shadow: 0 4px 0 #1C6E8C, inset 0 2px 4px rgba(255,255,255,0.35); }
.mg-hud-pearls::before{ content:""; width:16px; height:16px; border-radius:50%; flex:none;
background: radial-gradient(circle at 34% 30%, #fff, #B9E4F2 75%, #8FCADF); box-shadow: 0 0 5px rgba(255,255,255,0.95); }
/* echtes Steuerkreuz: 3x3-Raster, die vier Knöpfe im Plus, Mitte frei -> liest sich als EIN Kreuz */
.mg-dpad{ display:grid; grid-template-columns:repeat(3, 48px); grid-template-rows:repeat(3, 48px);
gap:4px; margin-left:auto; }
.mg-dbtn{ width:48px; height:48px; border-radius:12px; border:none; color:#fff; font-size:1.1rem; font-weight:700;
display:flex; align-items:center; justify-content:center; line-height:1; padding:0;
background: radial-gradient(circle at 36% 30%, #8FDCF0, #2E9BC0 70%, #1C6E8C 100%);
box-shadow: 0 5px 0 #14566E, inset 0 2px 4px rgba(255,255,255,0.4); }
.mg-dbtn:active{ transform: translateY(3px); box-shadow: 0 2px 0 #14566E, inset 0 2px 4px rgba(255,255,255,0.4); }
.mg-dbtn.mg-up{ grid-column:2; grid-row:1; border-radius:12px 12px 6px 6px; }
.mg-dbtn.mg-left{ grid-column:1; grid-row:2; border-radius:12px 6px 6px 12px; }
.mg-dbtn.mg-right{ grid-column:3; grid-row:2; border-radius:6px 12px 12px 6px; }
.mg-dbtn.mg-down{ grid-column:2; grid-row:3; border-radius:6px 6px 12px 12px; }
/* Start-Popup: nur das Bild, Buttons liegen darauf – kein Rahmen */
.mg-card-intro{ position:relative; padding:0; overflow:hidden; background:transparent; }
.mg-intro-img{ display:block; width:100%; height:auto; max-height:90vh; object-fit:contain; }
.mg-intro-img.missing{ display:none; }
.mg-intro-scrim{ position:absolute; left:0; right:0; bottom:0; height:34%; pointer-events:none;
background: linear-gradient(transparent, rgba(10,40,55,0.5)); }
.mg-intro-img.missing ~ .mg-intro-scrim{ display:none; }
.mg-intro-fallback{ display:none; text-align:center; padding:40px 24px 96px;
background: linear-gradient(180deg, #EAF7FA, #FFF6E8); }
.mg-intro-img.missing ~ .mg-intro-fallback{ display:block; }
.mg-intro-fallback h2{ font-family:'Baloo 2'; font-weight:800; font-size:1.8rem; color:#1C6E8C; }
.mg-intro-fallback p{ color:#3E7A8C; font-weight:600; }
.mg-intro-actions{ position:absolute; left:0; right:0; bottom:6%; z-index:2;
display:flex; gap:14px; justify-content:center; align-items:center; flex-wrap:wrap; padding:0 16px; }
.mg-intro-start{ font-family:'Baloo 2'; font-weight:800; font-size:1.15rem; color:#fff; border:none; cursor:pointer;
padding:14px 40px; border-radius:999px;
background: radial-gradient(circle at 36% 30%, #7FD0E6, #2E9BC0 70%, #1C6E8C 100%);
box-shadow: 0 6px 0 #14566E, 0 10px 26px rgba(0,0,0,0.4); }
.mg-intro-start:active{ transform:translateY(3px); box-shadow: 0 3px 0 #14566E, 0 6px 16px rgba(0,0,0,0.4); }
.mg-intro-skip{ font-family:'Baloo 2'; font-weight:700; font-size:0.95rem; color:#1C6E8C; background:rgba(255,255,255,0.92);
border:none; border-radius:999px; padding:12px 26px; cursor:pointer; box-shadow: 0 5px 16px rgba(0,0,0,0.35); }
/* "Leben leer"-Popup */
.mg-card-over{ align-items:center; text-align:center; padding:26px 24px 24px; gap:8px; }
.mg-over-perli{ width:84px; height:84px; }
.mg-over-perli img{ width:100%; height:100%; object-fit:contain; filter: grayscale(0.5) drop-shadow(0 2px 4px rgba(10,50,70,0.3)); }
.mg-lives-over{ justify-content:center; margin:2px 0 4px; }
.mg-over-title{ font-family:'Baloo 2'; font-weight:800; font-size:1.35rem; color:#1C6E8C; }
.mg-over-text{ color:#3E7A8C; font-weight:600; max-width:420px; line-height:1.5; }
/* "Level geschafft"-Popup – fröhlich, kein Graustich, Weiterspielen nach Klick */
.mg-card-win{ background: linear-gradient(180deg, #FFF6E8, #FFE9C7); }
.mg-card-win .mg-over-perli{ width:96px; height:96px; }
.mg-card-win .mg-over-perli img{ filter: drop-shadow(0 3px 7px rgba(10,50,70,0.35)); }
.mg-card-win .mg-over-title{ color:var(--coral); }
/* "Neue Perlis verdient"-Popup */
.mg-card-le{ max-width:min(94vw, 460px); align-items:center; text-align:center; padding:26px 24px 24px; gap:10px; }
.le-lives{ justify-content:center; margin:2px 0 6px; }
.le-lives .mg-life{ width:34px; height:34px; animation: le-pop 0.5s ease-out backwards; }
.le-lives .mg-life:nth-child(1){ animation-delay:.05s; } .le-lives .mg-life:nth-child(2){ animation-delay:.12s; }
.le-lives .mg-life:nth-child(3){ animation-delay:.19s; } .le-lives .mg-life:nth-child(4){ animation-delay:.26s; }
.le-lives .mg-life:nth-child(5){ animation-delay:.33s; }
@keyframes le-pop{ 0%{ transform:scale(0) rotate(-25deg); opacity:0; } 70%{ transform:scale(1.25) rotate(8deg); } 100%{ transform:scale(1) rotate(0); opacity:1; } }
.le-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:6px; }
/* Niedrige Bildschirme (z. B. Tablet quer mit Browserleisten): Karteninhalt kleiner, damit alles ohne Scrollen und ohne Springen passt */
@media (max-height: 720px){
.right-col > .word-card{ padding:10px 14px 10px; min-height: calc(100dvh - 197px); }
.right-col > .word-card > .word-emoji{ height:5rem; font-size:2.6rem; }
.right-col > .word-card > .word-emoji .numballoon, .right-col > .word-card > .word-emoji .l5img{ width:4.8rem; height:4.8rem; }
.right-col > .word-card > .try-section{ min-height: 10.2rem; margin-top:auto; padding-top:4px; }
.right-col > .word-card .try-label{ margin-bottom:4px; font-size:0.95rem; }
.right-col > .word-card .mic-btn{ width:76px; height:76px; }
.right-col > .word-card .mic-btn .mic-perli{ width:68px; }
.right-col > .word-card .mic-hint{ margin-top:6px; font-size:0.92rem; }
.right-col > .word-card .lang-row{ margin-top:6px; }
.right-col > .word-card .lang-btn{ padding:7px 6px 6px; }
.right-col > .word-card .sent-pill{ margin:4px 0; padding:7px 12px; }
.right-col > .word-card .round-tag{ margin:2px auto; }
.right-col > .word-card .feedback{ padding:6px 8px 8px; }
.right-col > .word-card .feedback .fb-text{ font-size:1.1rem; }
.right-col > .word-card .fb-badge{ font-size:1.8rem; }
.right-col > .word-card .fb-perli{ height:30px; }
.right-col > .word-card .game-prompt{ min-height:3rem; font-size:1.1rem; }
.right-col > .word-card .game-options{ margin-top:12px; }
.right-col > .word-card .game-opt{ padding:16px 6px; font-size:2.6rem; }
.right-col > .word-card .game-opt .l5img{ width:3.6rem; height:3.6rem; }
.right-col > .word-card .fb-papi{ height:64px; }
.right-col > .word-card .fb-papi-ph{ padding:8px 12px; }
.right-col > .word-card .feedback.success .fb-text{ font-size:1.1rem; }
.right-col > .word-card .feedback .fb-sub{ font-size:0.8rem; margin-top:0; }
.right-col > .word-card .feedback-actions{ margin-top:6px; }
.right-col > .word-card .feedback .play-btn{ padding:6px 12px 7px; font-size:0.82rem; }
.practice-top{ margin-bottom:6px; }
}
/* Übungs-Spalte: Scrollbalken nie anzeigen (verhindert kurzes Aufblitzen beim Weiter/Überspringen); scrollen per Wischen geht weiterhin */
.main-layout > .right-col{ scrollbar-width:none; -ms-overflow-style:none; }
.main-layout > .right-col::-webkit-scrollbar{ display:none; width:0; height:0; }
/* Lektion 6: verdeckte Sprech-Runden, Text-Antworten, "Du entscheidest" */
.say-box{ margin-top:12px; min-height:64px; display:flex; align-items:center; justify-content:center; text-align:center;
border:2px dashed #FFD9C2; border-radius:18px; color:var(--coral); font-family:'Baloo 2'; font-weight:800; font-size:1.1rem; padding:8px 12px; }
.say-box.tall{ min-height:104px; }
.game-options.text-opts{ grid-template-columns:1fr; gap:8px; }
.game-opt .opt-text{ font-family:'Baloo 2'; font-weight:800; font-size:1.25rem; color:var(--ink); }
.right-col > .word-card .game-options.text-opts .game-opt{ padding:12px 10px; }
/* Spiele mit Bild oben: etwas kompakter, damit Bild, Antworten und Rückmeldung in die feste Karte passen */
.right-col > .word-card.has-pic > .word-emoji{ height:6.4rem; }
.right-col > .word-card.has-pic > .word-emoji .l5img{ width:5.8rem; height:5.8rem; }
.right-col > .word-card.has-pic .game-prompt{ min-height:3rem; font-size:1.1rem; }
.right-col > .word-card.has-pic .game-options{ margin-top:8px; }
.right-col > .word-card.has-pic .game-options.text-opts .game-opt{ padding:7px 10px; }
.right-col > .word-card.has-pic .feedback{ padding:6px 8px 8px; }
.right-col > .word-card.has-pic .feedback .fb-text{ font-size:1.1rem; }
.right-col > .word-card.has-pic .fb-badge{ font-size:1.8rem; }
.right-col > .word-card.has-pic .fb-perli{ height:28px; }
.right-col > .word-card.has-pic .feedback-actions{ margin-top:6px; }
.right-col > .word-card.has-pic .round-tag{ margin:2px auto; }
/* längere Sätze (z. B. Steckbriefe) etwas kleiner, damit sie in die feste Karte passen */
.sent-pill.long{ padding:6px 12px; }
.sent-pill.long .sent-txt{ font-size:0.92rem; line-height:1.18; }
.game-options.text-opts .game-opt{ font-size:1.1rem; line-height:1.2; }
.right-col > .word-card.has-pic .fb-papi{ height:64px; }
.right-col > .word-card.has-pic .fb-papi-ph{ padding:8px 12px; }
.right-col > .word-card.has-pic .feedback .fb-sub{ font-size:0.8rem; margin-top:0; }
.right-col > .word-card.has-pic .round-tag{ display:none; }
.right-col > .word-card.has-pic .game-prompt{ min-height:2.6rem; margin:4px 0 0; }
.sent-pill.long{ padding:4px 12px; margin:4px 0; }
.sent-pill.long .sent-txt{ font-size:0.85rem; line-height:1.15; }
/* ---------- Die klitzekleinen Wörterchen (Mini-Spiel neben dem Hör-Quiz) ---------- */
.tiny-card .level-icon.mix{ background:#D6C6F7; }
.mix-row > .tiny-card .level-name{ overflow-wrap:anywhere; }
.q-bigword{ font-family:'Baloo 2', sans-serif; font-weight:800; font-size: clamp(2rem, 9vh, 3.6rem); color:var(--coral);
line-height:1.05; flex-shrink:0; }
.q-bigword.de{ color:#1C6E8C; font-size: clamp(1.6rem, 7vh, 2.8rem); }
.q-opts.q-wordopts{ max-width: min(420px, 92vw); }
.q-opt.q-word{ aspect-ratio:auto; min-height: clamp(52px, 11vh, 86px); padding:6px 8px; }
.q-word-txt{ font-family:'Baloo 2', sans-serif; font-weight:800; font-size: clamp(1.05rem, 3.4vh, 1.6rem); color:var(--ink); line-height:1.1; }
.q-intro-fallback span{ font-size:1.5rem; } .q-intro-fallback small{ font-size:1rem; font-weight:700; }
.wq-mic{ flex-shrink:0; }
/* drei Karten nebeneinander (Alles durcheinander · Hör-Quiz · Wörterchen): Symbol oben, Name darunter, ohne Zusatztext */
.mix-row.three{ gap:8px; }
.mix-row.three > .mix-card{ flex-direction:column; justify-content:center; text-align:center; gap:4px; padding: clamp(4px, 1vh, 10px) 6px; }
.mix-row.three .level-info{ flex:0 1 auto; }
.mix-row.three .level-meta, .mix-row.three .level-check{ display:none; }
.mix-row.three .level-name{ font-size: clamp(0.72rem, 1.9vh, 0.95rem); line-height:1.12; overflow-wrap:break-word; hyphens:auto; }
/* Intro-Fenster (Hör-Quiz + Wörterchen): kein Rahmen um das Bild – das Bild füllt das ganze Fenster */
.q-card.q-fixed.q-introcard{ padding:0; gap:0; background:transparent; box-shadow:none; overflow:visible; }
.q-card.q-fixed.q-introcard .q-intro-img,
.q-card.q-fixed.q-introcard .q-intro-fallback{ width:100%; height:100%; }
/* Schließen-Knopf mitten im Bild: bunt, ein bisschen schräg */
.q-introcard .q-close.q-close-float{ top:12px; right:12px; width:50px; height:50px; font-size:1.55rem; font-weight:900; line-height:1; padding:0;
color:#fff; background: linear-gradient(145deg, #FF8FB1, #FF5C7A); border:3px solid #fff; transform: rotate(9deg);
box-shadow: 0 4px 0 rgba(170,40,80,0.45), 0 6px 14px rgba(10,50,70,0.35); text-shadow: 0 1px 0 rgba(150,30,70,0.5); transition: transform .15s; }
.q-introcard .q-close.q-close-float:hover{ transform: rotate(-6deg) scale(1.08); }
.q-introcard .q-close.q-close-float:active{ transform: rotate(9deg) scale(0.94); }
/* Intro-Bild passt sich jeder Bildschirmgröße an: immer das GANZE Bild (Seitenverhältnis 7:8), nie abgeschnitten,
nie höher als der sichtbare Bereich (dvh = ohne Browser-/Tablet-Leisten) – so entsteht nichts zum Scrollen. */
.q-card.q-fixed.q-introcard{
width:min(94vw, 560px, calc(94vh * 0.875));
width:min(94vw, 560px, calc(94dvh * 0.875));
height:auto; max-height:none; aspect-ratio: 7 / 8; }
.q-overlay{ overscroll-behavior:contain; }
.q-overlay:has(.q-introcard){ touch-action:none; }
/* Wörterchen-Spiel: Inhalt verteilt sich auf die ganze Fensterhöhe (Antworten wachsen mit, kein leerer Platz unten) */
.wq-card .q-bigword{ font-size: clamp(2.2rem, 10vh, 4.4rem); margin-top: clamp(2px, 1.5vh, 12px); }
.wq-card .q-bigword.de{ font-size: clamp(1.8rem, 8vh, 3.4rem); }
.wq-card .q-sentence{ font-size: clamp(1rem, 3.6vh, 1.5rem); }
.wq-card .q-pic{ font-size: clamp(2.4rem, 11vh, 5rem); }
.wq-card .q-opts.q-wordopts{ flex:1 1 0; min-height:0; width:100%; max-width:min(440px, 92vw);
grid-template-rows:1fr 1fr; gap: clamp(8px, 2vh, 16px); margin: clamp(4px, 1.5vh, 14px) 0 0; }
.wq-card .q-opt.q-word{ aspect-ratio:auto; min-height:0; border-radius:22px; }
.wq-card .q-word-txt{ font-size: clamp(1.2rem, 4.2vh, 2rem); }
.wq-card .q-feedback{ flex:0 0 auto; min-height:1.6em; }
.wq-saybody{ flex:1 1 0; min-height:0; width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap: clamp(8px, 2.6vh, 22px); }
.wq-saybody .mic-btn{ transform: scale(1.25); }
/* kurzer Hinweis zur Szene (z. B. "Perli macht Quatsch") unter den Satz-Feldern */
.sent-note{ margin:4px 4px 0; padding:4px 10px; border-radius:14px; background:#FFF3C9; border:2px dashed #F5C84C;
font-family:'Baloo 2', sans-serif; font-weight:700; font-size:0.9rem; line-height:1.2; color:#7A5A12; text-align:center; }
/* Buttons in der Übungskarte: gerade, nicht über die ganze Breite gezogen */
.try-section .play-btn{ align-self:center; justify-content:center; min-width:9.5rem; }
/* Gespräch auf EINER Karte: großer Junge oben, große gelbe Frage (Papi), mit Abstand darunter Alenias Antwort als zwei dicke,
fast quadratische Buttons (Deutsch | Englisch). Alle Größen hängen an der Bildschirmhöhe (vh), damit es auf jedem Tablet gut aussieht. */
.right-col > .word-card.has-pre > .word-emoji{ height:clamp(4.2rem, 15vh, 9.2rem); }
.right-col > .word-card.has-pre > .word-emoji .l5img{ width:clamp(4rem, 14vh, 8.8rem); height:clamp(4rem, 14vh, 8.8rem); }
.right-col > .word-card.has-pre > .try-section{ min-height:clamp(8rem, 21vh, 11rem); }
.dlg{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; gap:clamp(6px, 2vh, 22px); margin:clamp(2px, 0.8vh, 10px) 0; }
.dlg-bar{ display:flex; align-items:center; gap:14px; width:100%; flex:0 0 auto; min-height:clamp(48px, 8.8vh, 76px); padding:4px 18px; text-align:left; cursor:pointer;
background:#FFF3C9; border:2px solid #F5C84C; border-radius:22px; box-shadow:0 3px 0 rgba(200,150,20,0.25); font-family:'Baloo 2', sans-serif; }
.dlg-bar:active{ transform:translateY(2px); box-shadow:none; }
.dlg-bar .dlg-ic{ font-size:clamp(1.4rem, 3.6vh, 2.2rem); line-height:1; flex-shrink:0; }
.dlg-bar .dlg-txt{ display:flex; flex-direction:column; flex:1; min-width:0; line-height:1.15; }
.dlg-bar .dlg-txt b{ font-size:clamp(1.05rem, 3vh, 1.6rem); color:#6B4E0E; }
.dlg-bar .dlg-txt span{ font-size:clamp(0.86rem, 2.2vh, 1.2rem); font-weight:700; color:#A07A1E; }
.dlg-bar .dlg-snd{ font-size:clamp(1.2rem, 3vh, 1.7rem); flex-shrink:0; }
.dlg-ans{ flex:1 1 0; min-height:56px; max-height:240px; display:grid; grid-template-columns:repeat(2, minmax(0, 176px)); justify-content:center; gap:clamp(12px, 2.4vw, 22px); align-items:stretch; }
.dlg-btn{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:clamp(4px, 1.4vh, 12px); height:100%; min-height:56px; padding:6px 10px; cursor:pointer;
border:2px solid transparent; border-radius:24px; box-shadow:0 4px 0 rgba(0,0,0,0.1); font-family:'Baloo 2', sans-serif; text-align:center; }
.dlg-btn:active{ transform:translateY(3px); box-shadow:none; }
.dlg-btn.de{ background:#EAF6EA; border-color:#BFE3BF; }
.dlg-btn.en{ background:#F1EAF8; border-color:#D6C6EE; }
.dlg-btn .sent-flag{ display:flex; }
.dlg-btn .sent-flag svg{ width:clamp(1.4rem, 3.9vh, 2.4rem); height:auto; }
.dlg-btn .sent-flag{ flex:0 0 auto; }
.dlg-btn .sent-txt{ font-size:clamp(0.98rem, 2.8vh, 1.4rem); line-height:1.12; font-weight:800; }
.dlg-btn.de .sent-txt{ color:var(--ink); }
.dlg-btn.en .sent-txt{ color:#7A5FB0; }
@media (max-height: 720px){
.right-col > .word-card.has-pre .feedback.help .fb-perli{ height:20px; margin-bottom:0; }
.right-col > .word-card.has-pre .feedback.help{ padding:3px 8px 5px; }
.right-col > .word-card.has-pre .feedback.help .fb-text{ font-size:0.85rem; line-height:1.1; }
.right-col > .word-card.has-pre .feedback.help .feedback-actions{ flex-wrap:nowrap; gap:5px; margin-top:4px; }
.right-col > .word-card.has-pre .feedback.help .feedback-actions .play-btn{ padding:5px 8px 6px; font-size:0.7rem; gap:3px; white-space:nowrap; }
}
/* in der Rückmeldung (Feedback) keine Mindestbreite – sonst brechen die drei Knöpfe auf zwei Zeilen um */
.feedback-actions .play-btn{ min-width:0; }
/* Ja/Nein-Auswahl auf der Frage-Karte: große Daumen mit Satz darunter */
.qa .dlg-ans{ max-height:300px; }
.qa .dlg-btn.choice{ cursor:pointer; gap:clamp(4px, 1.4vh, 12px); }
.qa .ch-emoji{ font-size:clamp(2.4rem, 8vh, 4.6rem); line-height:1; }
.qa .dlg-btn.choice:first-child{ background:#E7F7E4; border-color:#9ED69A; }
.qa .dlg-btn.choice:last-child{ background:#FDEBE3; border-color:#F0B49A; }
.qa .dlg-btn.choice .sent-txt{ color:var(--ink); }
/* =====================================================================================================
EINHEITLICHES KARTENDESIGN (zentral) – Wort-Karten und Satz-Karten aller Lektionen (Klasse .card-std)
Alles hängt an der Bildschirmhöhe (vh): großes Bild, Deutsch | Englisch als zwei große Buttons nebeneinander,
großer Sprech-Knopf, große Sprech-Hilfe. Änderungen am Aussehen dieser Karten bitte NUR hier machen.
===================================================================================================== */
.right-col > .word-card.card-std{ display:flex; flex-direction:column; padding: clamp(8px, 1.8vh, 18px) clamp(10px, 2vw, 18px); }
/* Bild */
.right-col > .word-card.card-std > .word-emoji{ flex:0 0 auto; height:clamp(4.4rem, 18.5vh, 9.6rem); font-size:clamp(3.1rem, 12.5vh, 6.6rem);
display:flex; align-items:center; justify-content:center; margin:0; }
.right-col > .word-card.card-std > .word-emoji .l5img,
.right-col > .word-card.card-std > .word-emoji .numballoon{ width:clamp(4.2rem, 17vh, 8.8rem); height:clamp(4.2rem, 17vh, 8.8rem); }
.right-col > .word-card.card-std > .word-emoji svg{ max-height:100%; }
.right-col > .word-card.card-std > .round-tag{ margin:2px auto; }
/* Deutsch | Englisch: zwei große Buttons nebeneinander (Wörter und Sätze gleich) */
.right-col > .word-card.card-std .lang-row,
.right-col > .word-card.card-std .sent-grid{ flex:1 1 0; min-height:0; max-height:clamp(120px, 28vh, 240px); margin:clamp(6px, 1.4vh, 14px) 0;
display:grid; grid-template-columns:1fr 1fr; grid-template-rows:minmax(0, 1fr); gap:clamp(10px, 2vw, 18px); align-items:stretch; }
.right-col > .word-card.card-std .lang-btn,
.right-col > .word-card.card-std .sent-pill{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
gap:clamp(3px, 0.9vh, 9px); margin:0; min-height:56px; padding:6px 10px; border-radius:24px; border:2px solid var(--line); box-shadow:0 4px 0 rgba(0,0,0,0.08); }
.right-col > .word-card.card-std .lang-btn.de, .right-col > .word-card.card-std .sent-pill.de{ background:#EAF6EA; border-color:#BFE3BF; }
.right-col > .word-card.card-std .lang-btn.en, .right-col > .word-card.card-std .sent-pill.en{ background:#F1EAF8; border-color:#D6C6EE; }
.right-col > .word-card.card-std .lang-btn .sent-flag svg, .right-col > .word-card.card-std .lang-btn > svg.flag-svg,
.right-col > .word-card.card-std .sent-pill .sent-flag svg{ width:clamp(1.5rem, 3.9vh, 2.4rem); height:auto; }
.right-col > .word-card.card-std .sent-pill .sent-flag{ flex:0 0 auto; }
.right-col > .word-card.card-std .lang-btn .word-text{ font-size:clamp(1.25rem, 3.8vh, 2rem); line-height:1.1; margin:0; }
.right-col > .word-card.card-std .sent-pill .sent-txt{ font-size:clamp(1rem, 2.8vh, 1.55rem); line-height:1.13; font-weight:800; min-width:0; overflow-wrap:break-word; }
.right-col > .word-card.card-std .sent-pill.long .sent-txt{ font-size:clamp(0.9rem, 2.35vh, 1.3rem); }
.right-col > .word-card.card-std .say-box{ flex:1 1 0; min-height:0; max-height:clamp(120px, 26vh, 230px); display:flex; align-items:center; justify-content:center;
margin:clamp(6px, 1.6vh, 16px) 0; font-size:clamp(1.2rem, 3.4vh, 1.8rem); text-align:center; }
/* Sprechen: großer Perli-Knopf + große Hilfe */
.right-col > .word-card.card-std > .try-section{ flex:0 0 auto; margin-top:0; min-height:clamp(8.6rem, 26vh, 14.5rem); padding-top:clamp(4px, 1vh, 10px); }
.right-col > .word-card.card-std .try-label{ font-size:clamp(1.05rem, 2.9vh, 1.55rem); margin-bottom:clamp(3px, 0.8vh, 9px); }
.right-col > .word-card.card-std .mic-btn{ width:clamp(80px, 15.5vh, 124px); height:clamp(80px, 15.5vh, 124px); }
.right-col > .word-card.card-std .mic-btn .mic-perli{ width:clamp(72px, 14vh, 112px); }
.right-col > .word-card.card-std .mic-hint{ font-size:clamp(1rem, 2.8vh, 1.55rem); margin-top:clamp(4px, 1.1vh, 12px); line-height:1.12; }
.right-col > .word-card.card-std .try-section .play-btn{ font-size:clamp(1rem, 2.6vh, 1.3rem); }
@media (max-height: 720px){
.right-col > .word-card.card-std .feedback{ padding:3px 8px 5px; }
.right-col > .word-card.card-std .feedback .fb-perli{ height:20px; margin-bottom:0; }
.right-col > .word-card.card-std .feedback .fb-text{ font-size:0.95rem; line-height:1.1; }
.right-col > .word-card.card-std .feedback .fb-sub{ font-size:0.78rem; margin-top:0; }
.right-col > .word-card.card-std .feedback .fb-badge{ font-size:1.5rem; }
.right-col > .word-card.card-std .feedback .fb-papi{ height:52px; }
.right-col > .word-card.card-std .feedback-actions{ flex-wrap:nowrap; gap:5px; margin-top:4px; }
.right-col > .word-card.card-std .feedback-actions .play-btn{ padding:5px 8px 6px; font-size:0.72rem; gap:3px; white-space:nowrap; min-width:0; }
.right-col > .word-card.card-std .try-section{ min-height:clamp(8.6rem, 27vh, 12rem); }
}
/* Frage-/Antwort-Karten (Lektion 7): Daumen/Fragezeichen neben dem Jungen deutlich größer (überschreibt die kleine Standardgröße von duo()) */
.right-col > .word-card.has-pre > .word-emoji > span > span{ font-size:clamp(2.8rem, 12.5vh, 6.2rem) !important; line-height:1; }
.right-col > .word-card.has-pre > .word-emoji > span{ gap:clamp(6px, 1.4vh, 14px) !important; }
/* =====================================================================================================
EINHEITLICHES KARTENDESIGN – SPIELKARTEN ("Mini-Spiel", "Alenia, was hörst du?", "Du entscheidest", Bild → Satz wählen)
Klasse .card-game. Alles hängt an der Bildschirmhöhe (vh). Änderungen am Aussehen dieser Karten bitte NUR hier machen.
===================================================================================================== */
.game-snd{ display:block; margin:6px auto 0; border:none; border-radius:999px; background:var(--coral); color:#fff; font-size:1.5rem; padding:6px 22px; box-shadow:var(--shadow); cursor:pointer; }
.right-col > .word-card.card-game{ display:flex; flex-direction:column; padding: clamp(8px, 1.8vh, 18px) clamp(10px, 2vw, 18px); }
.right-col > .word-card.card-game > .round-tag{ flex:0 0 auto; margin:0 auto clamp(2px, 0.8vh, 8px); }
.right-col > .word-card.card-game > .word-emoji{ flex:0 0 auto; height:clamp(4.6rem, 20vh, 10rem); font-size:clamp(3.2rem, 13vh, 6.8rem);
display:flex; align-items:center; justify-content:center; margin:0; }
.right-col > .word-card.card-game > .word-emoji .l5img,
.right-col > .word-card.card-game > .word-emoji .numballoon{ width:clamp(4.4rem, 18vh, 9rem); height:clamp(4.4rem, 18vh, 9rem); }
.right-col > .word-card.card-game .game-prompt{ flex:0 0 auto; min-height:0; margin:clamp(4px, 1.2vh, 12px) 0; font-size:clamp(1.4rem, 4.6vh, 2.5rem);
line-height:1.15; text-align:center; transform:none; display:block; }
.right-col > .word-card.card-game .game-snd{ flex:0 0 auto; align-self:center; margin:clamp(2px, 0.8vh, 8px) auto 0;
padding:clamp(4px, 1vh, 10px) clamp(30px, 7vh, 54px); font-size:clamp(2rem, 6.4vh, 3.4rem); line-height:1.1; }
.right-col > .word-card.card-game .game-snd-gap{ flex:0 0 auto; height:clamp(6px, 1.5vh, 16px); }
.right-col > .word-card.card-game .game-options{ flex:1 1 0; min-height:0; max-height:clamp(150px, 46vh, 380px); margin:clamp(8px, 2vh, 22px) 0 0;
display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); grid-template-rows:minmax(0, 1fr); gap:clamp(8px, 1.8vw, 18px); align-items:stretch; }
.right-col > .word-card.card-game .game-options.two{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
.right-col > .word-card.card-game .game-options.many{ grid-template-columns:repeat(2, minmax(0, 1fr)); grid-template-rows:repeat(2, minmax(0, 1fr)); }
.right-col > .word-card.card-game .game-options.text-opts{ grid-template-columns:minmax(0, 1fr); grid-template-rows:none; grid-auto-rows:minmax(0, 1fr); gap:clamp(6px, 1.4vh, 14px); }
.right-col > .word-card.card-game .game-opt{ height:100%; min-height:48px; padding:6px; display:flex; align-items:center; justify-content:center; text-align:center;
font-size:clamp(2.6rem, min(14vh, 8.4vw), 7rem); line-height:1; border-radius:24px; min-width:0; overflow:hidden; }
.right-col > .word-card.card-game .game-opt .l5img,
.right-col > .word-card.card-game .game-opt .numballoon{ width:clamp(3rem, min(14vh, 8.4vw), 7rem); height:clamp(3rem, min(14vh, 8.4vw), 7rem); }
.right-col > .word-card.card-game .game-opt .opt-text{ font-size:clamp(1.2rem, 4vh, 2.1rem); line-height:1.12; }
.right-col > .word-card.card-game .feedback{ flex:0 0 auto; margin-top:clamp(6px, 1.4vh, 14px); }
@media (max-height: 720px){
.right-col > .word-card.card-game .feedback{ padding:3px 8px 5px; margin-top:4px; }
.right-col > .word-card.card-game .feedback .fb-perli{ height:20px; margin-bottom:0; }
.right-col > .word-card.card-game .feedback .fb-text{ font-size:0.95rem; line-height:1.1; }
.right-col > .word-card.card-game .feedback .fb-badge{ font-size:1.5rem; }
.right-col > .word-card.card-game .feedback-actions{ margin-top:4px; }
}
/* Spielkarten: Antwortfelder bleiben annähernd quadratisch, schrumpfen bei Platzmangel und der freie Platz verteilt sich gleichmäßig */
.right-col > .word-card.card-game{ justify-content:space-evenly; }
.right-col > .word-card.card-game .game-options:not(.text-opts){ flex:1 1 0; min-height:48px; height:auto; max-height:clamp(120px, min(40vh, 14vw), 320px); margin-top:0; margin-bottom:0; }
.right-col > .word-card.card-game .game-options.two:not(.text-opts){ max-height:clamp(130px, min(40vh, 20vw), 330px); }
.right-col > .word-card.card-game .game-options.many:not(.text-opts){ max-height:clamp(150px, min(44vh, 32vw), 380px); }
.right-col > .word-card.card-game .game-options.text-opts{ margin-top:clamp(8px, 2vh, 22px); }
.right-col > .word-card.card-game .game-prompt.long{ font-size:clamp(1.1rem, 3.3vh, 1.8rem); }
/* =====================================================================================================
LOB-BLOCK (zentral) nach richtiger Antwort – gilt für Wort-, Satz-, Spiel- und Frage-Karten:
links das Lob, in der Mitte der Comic-Papi, rechts der große „Weiter“-Knopf. Größen hängen an der Bildschirmhöhe.
===================================================================================================== */
.right-col > .word-card:is(.card-std, .card-game, .has-pre) .feedback.success{ display:grid; grid-template-columns:minmax(0, 1fr) auto auto; align-items:center;
column-gap:clamp(6px, 1.2vw, 16px); padding:clamp(6px, 1.4vh, 14px) clamp(10px, 1.6vw, 18px); text-align:left; }
.right-col > .word-card:is(.card-std, .card-game, .has-pre) .feedback.success .fb-row{ display:contents; }
.right-col > .word-card:is(.card-std, .card-game, .has-pre) .feedback.success .fb-col{ grid-column:1; min-width:0; }
.right-col > .word-card:is(.card-std, .card-game, .has-pre) .feedback.success .fb-top{ grid-column:2; display:flex; align-items:center; justify-content:center; }
.right-col > .word-card:is(.card-std, .card-game, .has-pre) .feedback.success .feedback-actions{ grid-column:3; margin:0; flex-wrap:nowrap; justify-content:flex-end; }
.right-col > .word-card:is(.card-std, .card-game, .has-pre) .feedback.success .fb-text{ font-size:clamp(1.1rem, 3.2vh, 1.8rem); line-height:1.12; transform:none; }
.right-col > .word-card:is(.card-std, .card-game, .has-pre) .feedback.success .fb-sub{ font-size:clamp(0.82rem, 2.1vh, 1.15rem); margin-top:clamp(2px, 0.6vh, 6px); line-height:1.15; }
.right-col > .word-card:is(.card-std, .card-game, .has-pre) .feedback.success .fb-papi{ height:clamp(48px, 11vh, 108px); max-width:clamp(60px, 8vw, 150px); object-fit:contain; }
.right-col > .word-card:is(.card-std, .card-game, .has-pre) .feedback.success .fb-papi-ph{ padding:clamp(8px, 1.6vh, 18px) clamp(8px, 1.4vw, 16px); font-size:clamp(0.8rem, 2vh, 1rem); }
.right-col > .word-card:is(.card-std, .card-game, .has-pre) .feedback.success .play-btn{ font-size:clamp(1rem, 2.6vh, 1.5rem); padding:clamp(8px, 1.5vh, 14px) clamp(14px, 2.4vh, 26px); white-space:nowrap; }
/* Ja/Nein-Auswahl (Daumen + Wort daneben) auf Spielkarten */
.right-col > .word-card.card-game .game-options.yn-opts:not(.text-opts){ max-height:clamp(150px, 36vh, 300px); }
.right-col > .word-card.card-game .game-opt.yn{ flex-direction:row; gap:clamp(8px, 1.6vw, 18px); }
.right-col > .word-card.card-game .game-opt .opt-emoji{ font-size:clamp(2.8rem, min(12vh, 6.4vw), 5.6rem); line-height:1; }
.right-col > .word-card.card-game .game-opt .opt-label{ font-family:'Baloo 2', sans-serif; font-weight:800; font-size:clamp(1.5rem, 4.8vh, 2.8rem); color:var(--ink); line-height:1; }
.right-col > .word-card.card-game .game-opt.yes{ background:#E7F7E4; border-color:#9ED69A; }
.right-col > .word-card.card-game .game-opt.no{ background:#FDEBE3; border-color:#F0B49A; }
/* Feinschliff Spielkarten: Emojis/Bilder passen sicher in ihr Feld, Ja/Nein hat Platz */
.right-col > .word-card.card-game .game-opt{ font-size:clamp(2.6rem, min(14vh, 7vw), 7rem); }
.right-col > .word-card.card-game .game-opt .opt-emoji{ font-size:clamp(2.6rem, min(10.5vh, 4.8vw), 5rem); }
.right-col > .word-card.card-game .game-opt .opt-label{ font-size:clamp(1.3rem, 4.2vh, 2.4rem); }
.right-col > .word-card.card-game .game-opt.yn{ gap:clamp(6px, 1vw, 14px); padding:6px 4px; }
.right-col > .word-card.card-game .game-opt .opt-multi{ font-size:0.6em; white-space:nowrap; line-height:1; }
.right-col > .word-card.card-game .game-opt{ font-size:clamp(2.4rem, min(14vh, 6.2vw), 7rem); }
.right-col > .word-card.card-game .game-opt .opt-multi{ font-size:0.58em; }
.right-col > .word-card.card-game .game-opt .opt-multi{ font-size:calc(1.12em / var(--n, 2)); white-space:nowrap; line-height:1; }
.right-col > .word-card.card-game .game-opt .opt-multi{ font-size:calc(0.92em / var(--n, 2)); }
.right-col > .word-card.card-game .game-options:not(.two) .game-opt.yn{ flex-direction:column; gap:clamp(2px, 0.8vh, 8px); }
/* „Ja/Nein“-Beschriftung nur bei den Zwei-Knopf-Fragen; in der Dreier-Reihe (Wörter-Spiel) bleibt nur der Daumen */
.right-col > .word-card.card-game .game-options:not(.two) .game-opt .opt-label{ display:none; }
.right-col > .word-card.card-game .game-options:not(.two) .game-opt .opt-emoji{ font-size:clamp(2.4rem, min(14vh, 6.2vw), 7rem); }
/* Spielkarten: kleinere Rahmen um die Bilder (die Bilder haben selbst viel Weiß) -> mehr Luft oben und unten, gleichmäßig verteilt */
.right-col > .word-card.card-game .game-options:not(.text-opts){ max-height:clamp(110px, min(30vh, 10vw), 240px); }
.right-col > .word-card.card-game .game-options.two:not(.text-opts){ max-height:clamp(120px, min(33vh, 16vw), 270px); }
.right-col > .word-card.card-game .game-options.many:not(.text-opts){ max-height:clamp(140px, min(40vh, 26vw), 330px); }
.right-col > .word-card.card-game .game-options.yn-opts:not(.text-opts){ max-height:clamp(130px, min(33vh, 16vw), 260px); }
.right-col > .word-card.card-game .game-snd{ margin-bottom:clamp(2px, 0.8vh, 10px); }
.right-col > .word-card.card-game .feedback{ margin-top:0; }
/* Bild für "Nein, ich kann nicht": die Bewegung ist blass und mit einem roten Kreuz durchgestrichen */
.no-pic{ position:relative; display:inline-block; line-height:0; }
.no-pic svg{ filter:grayscale(0.75); opacity:0.5; }
.no-pic::before, .no-pic::after{ content:''; position:absolute; left:8%; right:8%; top:50%; height:7%; min-height:5px; background:#E03A3A; border-radius:999px; box-shadow:0 0 0 2px rgba(255,255,255,0.8); }
.no-pic::before{ transform:translateY(-50%) rotate(38deg); }
.no-pic::after{ transform:translateY(-50%) rotate(-38deg); }
/* =====================================================================================================
HILFE-BLOCK (zentral) bei "nicht erkannt": gleich groß und gleich aufgebaut wie der Lob-Block –
links Perli + Satz, rechts die drei Knöpfe untereinander. Größen hängen an der Bildschirmhöhe.
===================================================================================================== */
.right-col > .word-card:is(.card-std, .card-game, .has-pre) .feedback:is(.success, .help){ min-height:clamp(92px, 18vh, 150px); box-sizing:border-box; }
.right-col > .word-card:is(.card-std, .card-game, .has-pre) .feedback.help{ display:grid; grid-template-columns:auto minmax(0, 1fr) auto; align-items:center;
column-gap:clamp(8px, 1.4vw, 18px); padding:clamp(6px, 1.4vh, 14px) clamp(10px, 1.6vw, 18px); text-align:left; }
.right-col > .word-card:is(.card-std, .card-game, .has-pre) .feedback.help .fb-perli{ grid-column:1; height:clamp(44px, 10vh, 92px); margin:0; transform:none; }
.right-col > .word-card:is(.card-std, .card-game, .has-pre) .feedback.help .fb-text{ grid-column:2; font-size:clamp(1rem, 3vh, 1.7rem); line-height:1.15; transform:none; margin:0; }
.right-col > .word-card:is(.card-std, .card-game, .has-pre) .feedback.help .feedback-actions{ grid-column:3; margin:0; display:flex; flex-direction:column; flex-wrap:nowrap; gap:clamp(4px, 0.9vh, 8px); align-items:stretch; }
.right-col > .word-card:is(.card-std, .card-game, .has-pre) .feedback.help .feedback-actions .play-btn{ font-size:clamp(0.82rem, 2.2vh, 1.25rem); padding:clamp(5px, 1vh, 9px) clamp(12px, 1.8vw, 22px); white-space:nowrap; justify-content:center; min-width:0; }
/* Hilfe-Block, endgültige Aufteilung: oben Perli + Satz, darunter die drei Knöpfe in einer Reihe; gleiche Mindesthöhe wie der Lob-Block */
.right-col > .word-card:is(.card-std, .card-game, .has-pre) .feedback:is(.success, .help){ min-height:clamp(110px, 19vh, 160px); }
.right-col > .word-card:is(.card-std, .card-game, .has-pre) .feedback.help{ grid-template-columns:auto minmax(0, 1fr); grid-template-rows:auto auto; row-gap:clamp(4px, 1vh, 10px); align-content:center; }
.right-col > .word-card:is(.card-std, .card-game, .has-pre) .feedback.help .fb-perli{ grid-column:1; grid-row:1; height:clamp(38px, 8vh, 70px); }
.right-col > .word-card:is(.card-std, .card-game, .has-pre) .feedback.help .fb-text{ grid-column:2; grid-row:1; }
.right-col > .word-card:is(.card-std, .card-game, .has-pre) .feedback.help .feedback-actions{ grid-column:1 / -1; grid-row:2; flex-direction:row; justify-content:center; gap:clamp(5px, 0.9vw, 10px); }
.right-col > .word-card:is(.card-std, .card-game, .has-pre) .feedback.help .feedback-actions .play-btn{ font-size:clamp(0.72rem, 1.9vh, 1.05rem); padding:clamp(6px, 1.2vh, 11px) clamp(8px, 1.1vw, 16px); }
.right-col > .word-card:is(.card-std, .card-game, .has-pre) .feedback.help .feedback-actions{ align-items:stretch; }
.right-col > .word-card:is(.card-std, .card-game, .has-pre) .feedback.help .feedback-actions .play-btn{ flex:1 1 0; min-width:0; white-space:normal; text-align:center; line-height:1.1; padding-left:6px; padding-right:6px; }
/* =====================================================================================================
ABSCHLUSSFENSTER der Mini-Spiele (Hör-Quiz + klitzekleine Wörterchen) – zentral, gleiches Design wie die Lob-Leiste
===================================================================================================== */
.q-card.q-end{ gap:clamp(8px, 1.8vh, 16px); padding:clamp(16px, 3vh, 30px) clamp(18px, 3vw, 34px); max-width:min(94vw, 560px); }
.q-end .q-end-top{ display:flex; align-items:center; justify-content:center; gap:clamp(8px, 2vw, 22px); }
.q-end .q-end-top .q-pic{ font-size:clamp(3rem, 12vh, 6rem); }
.q-end .q-papi{ height:clamp(110px, 24vh, 210px); width:auto; max-width:46%; object-fit:contain; filter:drop-shadow(0 6px 10px rgba(0,0,0,0.18)); }
.q-end .q-end-title{ font-size:clamp(2rem, 6vh, 3.2rem); line-height:1.1; }
.q-end .q-end-sub{ font-size:clamp(1.2rem, 3.4vh, 1.9rem); }
.q-end .q-hearts{ display:flex; align-items:center; justify-content:center; gap:clamp(8px, 1.4vw, 16px); width:100%; box-sizing:border-box; padding:clamp(8px, 1.6vh, 16px) clamp(12px, 2vw, 22px);
background:#FFE9EE; border:2px solid #FFB3C4; border-radius:22px; box-shadow:0 3px 0 rgba(220,90,120,0.2);
font-family:'Baloo 2', sans-serif; font-weight:700; font-size:clamp(1.05rem, 3vh, 1.6rem); color:#9A3050; line-height:1.15; text-align:left; }
.q-end .q-hearts b{ color:#E0364F; font-size:1.15em; }
.q-end .q-heart{ font-size:clamp(2rem, 6vh, 3.4rem); line-height:1; flex-shrink:0; animation: fb-pop 460ms cubic-bezier(.2,1.5,.4,1) both; }
.q-end .q-again{ font-size:clamp(1.2rem, 3.4vh, 1.8rem); padding:clamp(10px, 2vh, 18px) clamp(34px, 6vw, 60px); }
/* "Alles durcheinander" im Popup: dieselben Karten wie in den Übungen, mittig über der Startseite */
.mix-overlay{ overflow:auto; }
.mix-pop{ width:min(96vw, 640px); max-height:100dvh; box-sizing:border-box; }
.mix-pop > .right-col{ flex:none; overflow:visible; padding:0; display:block; }
.mix-pop .practice-top{ margin-bottom:6px; }
.mix-pop .right-col > .word-card{ min-height:min(calc(100dvh - 150px), max(560px, 72vh)); }
@media (max-height: 720px){ .mix-pop .right-col > .word-card{ min-height:calc(100dvh - 160px); } }
/* Hör-Quiz: Bilder in den vier Feldern deutlich größer (Feld ist ~150–200 px, Bild vorher nur ~50 px) */
.q-opt-pic{ font-size:clamp(2.6rem, min(10.5vh, 8vw), 5.6rem); line-height:1; }
.q-opt-pic svg{ width:clamp(2.6rem, min(10.5vh, 8vw), 5.6rem); height:clamp(2.6rem, min(10.5vh, 8vw), 5.6rem); transform:none; }
.q-opts{ max-width:min(440px, 90vw, 52vh); }
.q-opt-pic{ font-size:clamp(2.6rem, min(12vh, 9vw), 6.4rem); }
.q-opt-pic svg{ width:clamp(2.6rem, min(12vh, 9vw), 6.4rem); height:clamp(2.6rem, min(12vh, 9vw), 6.4rem); }
.q-opt-pic .opt-multi{ font-size:calc(0.9em / var(--n, 2)); white-space:nowrap; line-height:1; }
.q-opts{ max-width:min(380px, 90vw, 52vh); }
.skip-ghost{ visibility:hidden; pointer-events:none; }
/* neuer Fisch im Regal: kurz hervorgehoben, nachdem Alenia auf den pulsierenden Umriss getippt hat */
.shop-item.fish-new{ box-shadow:0 0 0 4px #FFC93C, 0 0 18px 6px rgba(255,201,60,0.7); animation: f2pulse 1.2s ease-in-out infinite; position:relative; z-index:1; }
/* Doppeldecker-Flugzeug (js/flugzeug.js): leichtes Auf und Ab, drehender Propeller, flatternder Schal */
.plane-bob{ width:100%; height:100%; animation: plane-bob 2.6s ease-in-out infinite; }
.plane-loop{ width:100%; height:100%; transform-origin:50% 50%; filter:drop-shadow(0 4px 4px rgba(0,0,0,0.18)); }
@keyframes plane-bob{ 0%,100%{ transform:translateY(-6px) rotate(-1.6deg); } 50%{ transform:translateY(6px) rotate(1.6deg); } }
.plane-prop{ transform-box:fill-box; transform-origin:center; animation: plane-prop 0.09s linear infinite; }
@keyframes plane-prop{ 0%{ transform:scaleY(1); } 50%{ transform:scaleY(0.55); } 100%{ transform:scaleY(1); } }
.plane-scarf{ transform-box:fill-box; transform-origin:right center; animation: plane-scarf 0.5s ease-in-out infinite; }
@keyframes plane-scarf{ 0%,100%{ transform:skewY(-6deg); } 50%{ transform:skewY(6deg); } }
/* =====================================================================================================
EINHEITLICHE BILDGRÖSSE IN DEN AUSWAHL-FELDERN (Spielkarten)
Gezeichnete Bilder (alle Arten) und Emojis bekommen dieselbe sichtbare Größe (--pic), egal wie das Bild gebaut ist.
Größe ändern: NUR --pic hier. Nur echte Emoji-Reihen (z. B. 🌳🌲🌳, .opt-multi) werden kleiner gesetzt.
===================================================================================================== */
.right-col > .word-card.card-game .game-options{ --pic:clamp(3rem, min(12.5vh, 7.4vw), 6.4rem); }
.right-col > .word-card.card-game .game-options.two{ --pic:clamp(3rem, min(12.5vh, 9vw), 6.4rem); }
.right-col > .word-card.card-game .game-opt svg:not(.flag-svg){ width:var(--pic); height:var(--pic); transform:scale(1.08); }
.right-col > .word-card.card-game .game-opt:not(.yn){ font-size:calc(var(--pic) * 0.9); }