/* =========================================================================
   Systemchen · Modul wasser · Level 1 "Die Pfütze"
   Material: Holz, Papier, Natur – passend zu app/css/landing.css
   ========================================================================= */
:root {
  --green-dark: #2d5016;
  --green: #4a7c23;
  --green-light: #7ab648;
  --brown: #6b4226;
  --brown-light: #a67c52;
  --cream: #faf6ee;
  --cream-dark: #f0e8d8;
  --paper: #f8f1e2;
  --paper-edge: #e4d5b7;
  --ink: #3b3026;
  --ink-soft: #6d5d4c;
  --wood-light: #c08b57;
  --wood: #9a6738;
  --wood-dark: #5e3c20;
  --water: #4d8b9c;
  --water-dark: #2f6474;
  --sun: #f2c14e;
  --focus: #f6d77a;
  --radius: 18px;
  --shadow: 0 10px 30px rgba(30, 22, 10, .28), 0 2px 6px rgba(30, 22, 10, .2);
  --font: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-title: 'Lora', Georgia, serif;
  --tap: 64px;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: #22301c; color: var(--ink);
  font-family: var(--font);
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; user-select: none;
  touch-action: none;
}
#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; cursor: default; }
#scene.can-grab { cursor: grab; }
#scene.can-tap { cursor: pointer; }
#scene.grabbing { cursor: grabbing; }

button { font-family: inherit; color: inherit; }
button:focus-visible { outline: 4px solid var(--focus); outline-offset: 3px; }
.hidden { display: none !important; }
svg { display: block; }

/* ---------- Holz-Elemente ---------- */
.wood {
  background:
    repeating-linear-gradient(92deg, rgba(255,255,255,.05) 0 2px, rgba(0,0,0,0) 2px 9px),
    repeating-linear-gradient(88deg, rgba(60,30,10,.10) 0 1px, rgba(0,0,0,0) 1px 23px),
    linear-gradient(180deg, var(--wood-light), var(--wood) 55%, #855730);
  border: 2px solid var(--wood-dark);
  box-shadow: inset 0 2px 0 rgba(255,235,200,.35), inset 0 -3px 0 rgba(40,20,5,.25), 0 4px 10px rgba(20,12,4,.35);
  color: #fff8ea;
}
.btn {
  min-width: var(--tap); min-height: var(--tap);
  border-radius: 16px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-size: 1.15rem; font-weight: 800; padding: .4rem 1.1rem;
  transition: transform .12s ease, filter .12s ease;
}
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(2px) scale(.98); }
.btn.round { border-radius: 50%; padding: 0; width: var(--tap); height: var(--tap); }
.btn.small { --tap: 52px; font-size: 1rem; }
.btn .ico { width: 34px; height: 34px; }
.btn.round .ico { width: 36px; height: 36px; }
.btn[disabled] { opacity: .45; cursor: default; filter: grayscale(.6); }
.btn.green {
  background: linear-gradient(180deg, #8cbf5a, var(--green) 60%, #3d6a1c);
  border: 2px solid #2f5414; color: #fff;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.35), inset 0 -3px 0 rgba(0,0,0,.18), 0 4px 10px rgba(20,30,5,.35);
}
.btn.paper {
  background: var(--paper); color: var(--ink); border: 2px solid var(--paper-edge);
  box-shadow: 0 3px 8px rgba(40,30,10,.2);
}

/* ---------- Papier-Karten (Dialoge) ---------- */
.overlay {
  position: fixed; inset: 0; z-index: 40;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  background: radial-gradient(ellipse at center, rgba(20,25,10,.15), rgba(15,18,8,.5));
  animation: fadeIn .35s ease both;
}
.overlay.soft { background: rgba(15,18,8,.18); }
.card {
  position: relative;
  width: min(760px, 100%); max-height: calc(100% - 8px); overflow: auto;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(255,255,255,.6), rgba(255,255,255,0) 60%),
    radial-gradient(ellipse at 90% 100%, rgba(190,160,110,.18), rgba(0,0,0,0) 60%),
    var(--paper);
  border-radius: 22px 26px 20px 24px;
  border: 1px solid var(--paper-edge);
  box-shadow: var(--shadow), inset 0 0 0 6px rgba(255,255,255,.35);
  padding: 26px 28px 24px;
  animation: cardIn .45s cubic-bezier(.2,.9,.25,1.15) both;
}
.card::before { /* Klebeband */
  content: ''; position: absolute; top: -12px; left: 50%; width: 120px; height: 26px;
  transform: translateX(-50%) rotate(-2deg);
  background: rgba(236, 222, 180, .85); box-shadow: 0 1px 3px rgba(0,0,0,.15);
  border-left: 2px dashed rgba(255,255,255,.5); border-right: 2px dashed rgba(255,255,255,.5);
}
.card h2 {
  font-family: var(--font-title); font-weight: 600; font-size: clamp(1.4rem, 3.2vw, 2rem);
  margin: 0 56px .4rem 0; color: var(--green-dark); line-height: 1.2;
}
.card p.say { font-size: clamp(1.1rem, 2.4vw, 1.35rem); line-height: 1.45; margin: .2rem 56px .9rem 0; color: var(--ink); }
.card .speak { position: absolute; top: 18px; right: 18px; }
.card .row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 10px; }
.card .actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 18px; }
.card .hero { display: flex; justify-content: center; margin: 4px 0 10px; }
.card .hero svg { width: min(340px, 70vw); height: auto; }

/* große Bild-Auswahl */
.choice {
  flex: 1 1 180px; max-width: 220px; min-height: 180px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px;
  padding: 12px 10px 14px; cursor: pointer;
  background: #fffaf0; border: 3px solid var(--paper-edge); border-radius: 20px;
  box-shadow: 0 4px 0 #dccaa4, 0 6px 14px rgba(50,35,10,.15);
  font-size: 1.1rem; font-weight: 800; color: var(--ink); text-align: center; line-height: 1.2;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.choice svg { width: 128px; height: 104px; }
.choice:hover { transform: translateY(-3px); border-color: var(--green-light); }
.choice.selected { border-color: var(--green); background: #f3f9e8; box-shadow: 0 4px 0 #9fc27a, 0 6px 14px rgba(50,35,10,.15); }
.choice.right { border-color: var(--green); background: #eef7e2; }
.choice.dim { opacity: .5; }

/* Ursache -> Wirkung Kette */
.chain { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px; margin: 10px 0 4px; }
.chain .link {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: .95rem; font-weight: 700; color: var(--ink-soft); text-align: center; width: 92px;
  opacity: 0; animation: chainIn .5s ease forwards;
}
.chain .link svg { width: 70px; height: 70px; background: #fffaf0; border-radius: 50%; border: 2px solid var(--paper-edge); padding: 6px; }
.chain .arrow { width: 30px; height: 30px; opacity: 0; animation: chainIn .4s ease forwards; }

/* ---------- HUD ---------- */
.hud { position: fixed; z-index: 20; display: flex; gap: 10px; align-items: center; }
.hud.tl { top: 14px; left: 14px; }
.hud.tr { top: 14px; right: 14px; }
.hud.bl { bottom: 14px; left: 14px; }
.hud.br { bottom: 14px; right: 14px; }
.sign {
  border-radius: 14px; padding: 6px 16px 6px 10px; min-height: 56px;
  display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.2rem;
  text-shadow: 0 1px 0 rgba(60,30,5,.6);
}
.sign .ico { width: 40px; height: 40px; }
.sign .day-dots { display: flex; gap: 4px; }
.sign .day-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,248,230,.35); box-shadow: inset 0 1px 1px rgba(0,0,0,.3); }
.sign .day-dots i.done { background: #f6e3b0; }
.sign .day-dots i.now { background: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.4); }

/* Zeitleiste unten */
.timeline {
  position: fixed; z-index: 20; left: 50%; bottom: 12px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 40px;
  background: rgba(248, 241, 226, .88); border: 1px solid var(--paper-edge);
  box-shadow: 0 6px 18px rgba(20,15,5,.25);
  backdrop-filter: blur(3px);
}
.timeline .stage { position: relative; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; transition: background .4s, transform .4s; }
.timeline .stage svg { width: 44px; height: 44px; opacity: .45; filter: grayscale(.7); transition: opacity .4s, filter .4s; }
.timeline .stage.reached svg { opacity: 1; filter: none; }
.timeline .stage.now { background: #e9f3d9; transform: scale(1.08); box-shadow: 0 0 0 3px var(--green-light); }
.timeline .stage .n {
  position: absolute; right: -3px; bottom: -2px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px;
  background: var(--green); color: #fff; font-size: .8rem; font-weight: 800; display: grid; place-items: center;
}
.timeline .vine { width: 34px; height: 6px; border-radius: 3px; background: #e2d6bd; overflow: hidden; }
.timeline .vine b { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #8cbf5a, var(--green)); transition: width .5s; }
.timeline .sep { width: 2px; height: 36px; background: var(--paper-edge); margin: 0 6px; }
.timeline .drop { width: 46px; height: 54px; }

/* Ursache-Wirkung live (klein, oben Mitte) */
.live-chain {
  position: fixed; z-index: 19; top: 14px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 2px; padding: 4px 10px; border-radius: 30px;
  background: rgba(248,241,226,.82); border: 1px solid var(--paper-edge);
  box-shadow: 0 4px 12px rgba(20,15,5,.2); transition: opacity .6s;
}
.live-chain svg { width: 38px; height: 38px; transition: transform .5s, opacity .5s; }
.live-chain .arr { width: 18px; height: 18px; opacity: .5; }
.live-chain .on { animation: pulse 1.6s ease-in-out infinite; }
.live-chain .off { opacity: .3; }

/* Untertitel (audio.js R13): ein Ort für Text – in der Szene unter der Aufgabe, im Minispiel unten; nie zwei auf einmal */
.wa-sub {
  position: fixed; z-index: 60; left: 50%; top: var(--wa-sub-top, 156px); transform: translate(-50%, -8px);
  width: max-content; max-width: min(46rem, calc(100vw - 32px)); pointer-events: none; opacity: 0; transition: opacity .25s, transform .25s;
}
.wa-sub.on { opacity: 1; transform: translate(-50%, 0); }
.wa-sub-in {
  display: block; padding: 8px 18px; border-radius: 24px; text-align: center; text-wrap: balance;
  background: var(--paper); border: 1px solid var(--paper-edge); box-shadow: var(--shadow);
  font-size: 1.15rem; font-weight: 800; line-height: 1.3; color: var(--ink);
}
body:has(#mg-root:not(.hidden)) .wa-sub { top: auto; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 8px); }
body:has(#mg-root:not(.hidden)) .wa-sub.on { transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .wa-sub { transition: none; } }

/* Hinweis-Hand (Ziehen) */
.hint-hand { position: fixed; z-index: 25; width: 70px; height: 70px; pointer-events: none; animation: handMove 2.2s ease-in-out infinite; }

/* Forscherheft */
.book { width: min(860px, 100%); }
.book .pages { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-top: 10px; }
.entry {
  background: #fffaf0; border: 2px solid var(--paper-edge); border-radius: 16px; padding: 10px 12px;
  display: flex; gap: 10px; align-items: center; font-weight: 700; font-size: 1.02rem; line-height: 1.3;
}
.entry svg { width: 56px; height: 56px; flex: 0 0 56px; }
.entry.new { border-color: var(--green-light); animation: glow 1.6s ease 2; }
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 4px; }
.tabs .btn { min-height: 52px; font-size: 1rem; }
.tabs .btn.on { background: var(--green); color: #fff; border-color: #2f5414; }
.empty-note { color: var(--ink-soft); font-size: 1.05rem; text-align: center; padding: 10px; }

/* Infografik */
.info-figure { display: flex; justify-content: center; }
.info-figure svg { width: 100%; max-width: 640px; height: auto; }

/* Rückmeldung */
.feedback-btn {
  position: fixed; z-index: 21; right: 14px; bottom: 14px;
  min-height: 44px; padding: 6px 14px; border-radius: 22px; font-size: .95rem; font-weight: 700;
  background: rgba(248,241,226,.85); border: 1px solid var(--paper-edge); color: var(--ink-soft); cursor: pointer;
}
.stars { display: flex; gap: 8px; justify-content: center; margin: 6px 0 10px; }
.stars button { width: 56px; height: 56px; border: none; background: none; cursor: pointer; padding: 0; }
.stars button svg { width: 52px; height: 52px; }
textarea.comment {
  width: 100%; min-height: 110px; border-radius: 14px; border: 2px solid var(--paper-edge);
  background: #fffaf0; padding: 10px 12px; font: inherit; font-size: 1.05rem; color: var(--ink); resize: vertical;
  -webkit-user-select: text; user-select: text;
}

/* Startbildschirm */
.start .title { font-family: var(--font-title); font-size: clamp(2rem, 6vw, 3.2rem); color: var(--green-dark); margin: 0; }
.start .level { font-weight: 800; color: var(--brown-light); letter-spacing: .08em; text-transform: uppercase; font-size: .9rem; }

/* Animationen */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes cardIn { from { opacity: 0; transform: translateY(24px) scale(.96) rotate(-.6deg); } to { opacity: 1; transform: none; } }
@keyframes chainIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } }
@keyframes glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(122,182,72,0); } 50% { box-shadow: 0 0 0 6px rgba(122,182,72,.35); } }
@keyframes handMove { 0% { transform: translate(0,0); opacity: 0; } 15% { opacity: 1; } 70% { transform: translate(var(--dx, 120px), var(--dy, 60px)); opacity: 1; } 100% { transform: translate(var(--dx, 120px), var(--dy, 60px)); opacity: 0; } }

@media (max-width: 640px) {
  :root { --tap: 56px; }
  .card { padding: 22px 16px 18px; }
  .choice { min-height: 150px; flex-basis: 140px; }
  .choice svg { width: 100px; height: 80px; }
  .timeline .stage { width: 44px; height: 44px; }
  .timeline .stage svg { width: 36px; height: 36px; }
  .timeline .vine { width: 16px; }
  .live-chain { top: auto; bottom: 86px; }
  .sign { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .chain .link, .chain .arrow { opacity: 1; }
}

/* ---------- Minispiel-Blasen in der Szene ---------- */
#bubbles { position: fixed; inset: 0; z-index: 15; pointer-events: none; }
.bubble {
  position: absolute; transform: translate(-50%, -50%); pointer-events: auto; cursor: pointer;
  width: 72px; height: 72px; border-radius: 50%; padding: 10px;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.95), rgba(240,248,240,.7) 45%, rgba(200,225,210,.45) 70%, rgba(255,255,255,.25));
  border: 2px solid rgba(255,255,255,.85);
  box-shadow: 0 6px 16px rgba(20,30,10,.3), inset 0 -6px 12px rgba(120,160,140,.25);
  animation: bob 3.2s ease-in-out infinite;
}
.bubble svg { width: 100%; height: 100%; }
.bubble:hover { filter: brightness(1.08); }
.bubble.new { box-shadow: 0 0 0 0 rgba(246,215,122,.8), 0 6px 16px rgba(20,30,10,.3); animation: bob 3.2s ease-in-out infinite, ring 1.6s ease-out infinite; }
@keyframes bob { 0%, 100% { transform: translate(-50%, -50%); } 50% { transform: translate(-50%, calc(-50% - 7px)); } }
@keyframes ring { 0% { box-shadow: 0 0 0 0 rgba(246,215,122,.85), 0 6px 16px rgba(20,30,10,.3); } 100% { box-shadow: 0 0 0 22px rgba(246,215,122,0), 0 6px 16px rgba(20,30,10,.3); } }
#mg-root { position: fixed; inset: 0; z-index: 50; }
#btn-book.new { box-shadow: 0 0 0 4px var(--focus), 0 4px 10px rgba(20,12,4,.35); }
#btn-voice.off { opacity: .55; }
.btn.small .ico { width: 30px; height: 30px; }
.overlay.out { opacity: 0; }

/* Startbildschirm */
.start .card { width: min(640px, 100%); text-align: center; }
.start .card p.say { margin-right: 40px; margin-left: 40px; }
.start .note { color: var(--ink-soft); font-size: .95rem; margin: 0 0 6px; }
.levels { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 10px 0 2px; }
.lvl {
  position: relative; width: 150px; min-height: 140px; padding: 10px; border-radius: 18px; cursor: pointer;
  background: #fffaf0; border: 3px solid var(--paper-edge); box-shadow: 0 4px 0 #dccaa4;
  display: flex; flex-direction: column; align-items: center; gap: 4px; font-weight: 800; font-size: 1.05rem; color: var(--ink);
}
.lvl svg { width: 74px; height: 64px; }
.lvl b { position: absolute; top: 6px; left: 10px; color: var(--brown-light); }
.lvl.on { border-color: var(--green); background: #f3f9e8; }
.lvl.locked { opacity: .55; filter: grayscale(.7); }
.lvl .lock { position: absolute; top: 6px; right: 8px; font-style: normal; }
.start .btn.go { min-width: 140px; }
.entry { cursor: pointer; text-align: left; font-family: inherit; color: var(--ink); }
.entry.dim { opacity: .55; cursor: default; }
.chain .link svg { margin: 0 auto; }
.card .hero-img { max-width: min(300px, 60vw); max-height: 190px; width: auto; height: auto; filter: drop-shadow(0 8px 10px rgba(40,30,10,.25)); }
.card .hero-heron { max-height: 230px; }
.card .hero-tadpole, .card .hero-tadpoleLegs, .card .hero-tadpoleArms { max-width: min(260px, 60vw); }
.lvl em { font-style: normal; font-size: .85rem; color: var(--brown-light); font-weight: 800; }
.lvl .lock svg { width: 22px; height: 22px; }
.card .hero svg { width: min(220px, 50vw); }
body.talking .card .speak { animation: pulse 1.2s ease-in-out infinite; box-shadow: 0 0 0 4px var(--focus), 0 4px 10px rgba(20,12,4,.35); }
@media (max-width: 640px) {
  .sign .day-dots { display: none; }
  .sign { min-height: 52px; padding: 4px 10px; }
  .hud.bl { bottom: 92px; }
  .live-chain { top: 76px; bottom: auto; }
  .live-chain svg { width: 30px; height: 30px; }
  .timeline { left: 8px; right: 8px; transform: none; justify-content: center; }
  .bubble { width: 60px; height: 60px; }
}
.sign .day-n { display: none; }
@media (max-width: 640px) { .sign .day-n { display: inline; } }
/* gesperrte / noch nicht gebaute Level: Abzeichen immer sichtbar */
.lvl.locked { opacity: 1; filter: none; background: #f4efe4; }
.lvl.locked > svg, .lvl.locked > span, .lvl.locked > b { opacity: .5; filter: grayscale(.7); }
.lvl em {
  position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%) rotate(-2deg);
  background: var(--sun); color: var(--ink); border: 2px solid #fff; box-shadow: 0 2px 6px rgba(40,30,10,.25);
  padding: 2px 12px; border-radius: 14px; white-space: nowrap; font-size: .9rem; font-weight: 800; font-style: normal;
}
.lvl .lock { opacity: 1; }
.levels { margin-bottom: 14px; }
.start .btn.go span { font-size: 1.3rem; }
/* Aufgabe (immer sichtbar, oben Mitte) */
.task {
  position: fixed; z-index: 22; top: 12px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px; max-width: min(640px, calc(100vw - 420px));
  padding: 8px 22px 8px 10px; border-radius: 40px; cursor: pointer;
  background: var(--paper); border: 3px solid var(--green-light);
  box-shadow: 0 8px 22px rgba(20,15,5,.3); font-size: clamp(1.05rem, 2.2vw, 1.35rem); font-weight: 800; color: var(--ink); line-height: 1.2;
}
.task .t-ico svg { width: 52px; height: 52px; }
.task.pop { animation: taskPop .5s cubic-bezier(.2,.9,.25,1.3); }
@keyframes taskPop { from { transform: translateX(-50%) scale(.85); } to { transform: translateX(-50%) scale(1); } }
.live-chain { top: auto; bottom: 92px; left: auto; right: 14px; transform: none; }
.btn.speed, .btn.evening-btn { min-width: 76px; height: 64px; padding: 0 12px; border-radius: 32px; gap: 4px; }
.btn.speed b, .btn.evening-btn b { font-size: 1.25rem; }
.btn.evening-btn.on { box-shadow: 0 0 0 4px var(--focus), 0 4px 10px rgba(20,12,4,.35); }
.real-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin-top: 6px; }
.real-list .entry.game { border-color: #e9c46a; }
.real-list .entry.true { border-color: var(--green-light); }
@media (max-width: 900px) { .task { max-width: calc(100vw - 32px); top: 76px; } }
@media (max-width: 640px) {
  .task { top: 70px; font-size: 1rem; padding: 6px 14px 6px 8px; }
  .task .t-ico svg { width: 40px; height: 40px; }
  .live-chain { bottom: 160px; right: 8px; }
  .btn.speed, .btn.evening-btn { min-width: 60px; height: 54px; }
}
/* Knöpfe einer Karte bleiben immer sichtbar (auch wenn die Karte scrollt) */
.card .actions { position: sticky; bottom: -24px; margin: 14px -28px -24px; padding: 14px 28px 18px; z-index: 2;
  background: linear-gradient(rgba(248,241,226,0), var(--paper) 35%); border-radius: 0 0 20px 24px; }
.pred-said { display: inline-flex; align-items: center; gap: 10px; padding: 6px 16px 6px 8px; margin: 0 0 8px; border-radius: 16px;
  background: #fffaf0; border: 3px solid var(--paper-edge); font-weight: 800; font-size: 1.1rem; }
.pred-said svg { width: 64px; height: 52px; }
.pred-result.ok { color: var(--green-dark); font-weight: 800; }
.pred-result.other { color: var(--brown); font-weight: 800; }
.card .chain .link svg { width: 58px; height: 58px; }
@media (max-width: 640px) { .card .actions { margin: 10px -16px -18px; padding: 12px 16px 14px; } }
.sign .sunmoon { width: 74px; height: 42px; display: block; }
.sign .dayclock { width: 74px; height: 40px; }
.sign .day-n { display: inline; font-size: 1.05rem; white-space: nowrap; }
.sign { flex-wrap: wrap; row-gap: 0; }
.sign .day-dots { width: 100%; justify-content: flex-start; margin: -2px 0 2px 84px; }
@media (max-width: 640px) { .sign .day-n { font-size: .9rem; } .sign .sunmoon, .sign .dayclock { width: 56px; height: 32px; } }
.sign .day-dots { display: none !important; }
.task { top: 84px; max-width: min(720px, calc(100vw - 32px)); }
@media (max-width: 900px) { .task { top: 80px; } }
@media (max-width: 640px) { .task { top: 72px; } .wa-sub-in { font-size: 1rem; padding: 7px 14px; } }
/* Schmale Handys: vier Knöpfe oben rechts (Stimme, Musik, Waldgeräusche, Heft) + Tagesschild passen nebeneinander */
@media (max-width: 480px) {
  .hud.tl, .hud.tr { gap: 6px; top: 10px; }
  .hud.tl { left: 10px; } .hud.tr { right: 10px; }
  .hud.tl .btn.small, .hud.tr .btn.small { --tap: 44px; }
  .hud.tl .btn.small .ico, .hud.tr .btn.small .ico { width: 26px; height: 26px; }
  .sign .day-n { display: none; }
}

/* ---------- Hinweise (Tooltips, ../../js/tooltip.js) ---------- */
:root { --tip-bg: #5e3c20; --tip-fg: #fff8ea; --tip-border: #3f2812; --tip-font: var(--font); --tip-size: 16px; --tip-radius: 12px; }

/* Antwortmöglichkeit: Bild + Text (antippen = antworten) und daneben ein kleiner Lautsprecher (nur vorlesen) */
.opt { position: relative; flex: 1 1 180px; max-width: 220px; display: flex; }
.opt > .choice { flex: 1 1 auto; max-width: none; width: 100%; }
.opt-say.btn.round { position: absolute; top: -10px; right: -10px; --tap: 44px; width: 44px; height: 44px; min-width: 44px; min-height: 44px; z-index: 1; }
.opt-say.btn.round .ico { width: 26px; height: 26px; }
.mg-choices .opt { max-width: 230px; }
@media (max-width: 640px) {
  .opt { flex-basis: 140px; }
  .opt-say.btn.round { top: -8px; right: -6px; --tap: 40px; width: 40px; height: 40px; min-width: 40px; min-height: 40px; }
  .hud.tr { gap: 6px; right: 8px; }
  .hud.tr .btn.small { --tap: 44px; }
  .hud.tr .btn.small .ico { width: 26px; height: 26px; }
  .hud.tl { left: 8px; gap: 6px; }
}

/* Spielstand */
.lvl-wrap { position: relative; display: inline-flex; }
.lvl-reset.btn.round { position: absolute; top: -12px; right: -12px; --tap: 40px; width: 40px; height: 40px; min-width: 40px; min-height: 40px; z-index: 2; }
.lvl-reset.btn.round .ico { width: 22px; height: 22px; }
.btn .ico[viewBox="0 0 24 24"] { width: 28px; height: 28px; }
.save-when { text-align: center; font-size: 1.3rem; color: var(--green-dark); margin: 0 0 4px; }
.save-dots { display: flex; gap: 6px; justify-content: center; margin: 0 0 6px; }
.save-dots i { width: 14px; height: 14px; border-radius: 50%; background: var(--paper-edge); }
.save-dots i.done { background: var(--green-light); }
.save-dots i.now { background: var(--sun); box-shadow: 0 0 0 3px rgba(242,193,78,.35); }
.card .actions .btn span { white-space: nowrap; }

/* ---------- Schluss: So ist es ausgegangen / Warum? ---------- */
.end-dots { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; max-width: 360px; margin: 8px auto 10px; }
.end-dots i { aspect-ratio: 1; border-radius: 50%; display: block; }
.end-dots i.frog { background: var(--green, #5b8f2e); }
.end-dots i.legs { border: 3px solid var(--green, #5b8f2e); background: rgba(91,143,46,.15); }
.end-dots i.young { border: 2px dashed #6a7f8f; }
.end-dots i.away { background: #b9b2a6; }
.end-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; font-size: .9rem; margin: 0 0 6px; }
.end-legend span { display: inline-flex; align-items: center; gap: 5px; }
.end-legend i { width: 14px; height: 14px; border-radius: 50%; display: inline-block; }
.end-legend i.frog { background: var(--green, #5b8f2e); }
.end-legend i.legs { border: 3px solid var(--green, #5b8f2e); }
.end-legend i.young { border: 2px dashed #6a7f8f; }
.end-legend i.away { background: #b9b2a6; }
.end-strip { display: grid; grid-template-columns: repeat(var(--n, 10), 1fr); gap: 4px; margin: 6px 0 4px; align-items: end; }
.end-strip .d { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: .78rem; min-width: 0; }
.end-strip .d.key { outline: 3px solid var(--sun, #f2c14e); outline-offset: 2px; border-radius: 8px; }
.end-strip .t { font-weight: 800; border-radius: 6px; padding: 1px 3px; color: #fff; }
.end-strip .w { width: 70%; height: 46px; background: rgba(120,160,200,.18); border-radius: 4px; position: relative; overflow: hidden; }
.end-strip .w b { position: absolute; left: 0; right: 0; bottom: 0; background: #5b9bd5; }
.end-strip .s { height: 10px; width: 80%; border-radius: 3px; background: #ece4d2; }
.end-strip .s.some { background: #9fb98a; }
.end-strip .s.lots { background: #3d6a1c; }
.end-strip .n { color: var(--ink-soft, #6b5a44); }
.end-key { font-size: .8rem; color: var(--ink-soft, #6b5a44); text-align: center; margin: 0 0 6px; }
@media (max-width: 480px) { .end-strip .d { font-size: .68rem; } .end-strip .w { height: 34px; } }

/* Libelle als Begleiterin; ihre Sprechblase ist die Aufgabe */
.guide { position: fixed; left: 0; top: 0; z-index: 21; pointer-events: none; transition: opacity .35s; will-change: transform; }
.guide.hidden { opacity: 0; }
.guide .g-fly { position: absolute; left: 0; top: 0; width: clamp(87px, 9.4vw, 127px); aspect-ratio: 380 / 224;   /* Thomas 1.11.: ein Drittel kleiner */ pointer-events: auto; cursor: pointer; filter: drop-shadow(0 10px 8px rgba(20, 30, 10, .28)); }
.guide.hidden .g-fly { pointer-events: none; }
.guide .g-fly img { position: absolute; inset: 0; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; }
.guide .g-wings { transform-origin: 37% 64.8%; animation: gWings 1.8s ease-in-out infinite; }
.guide.flying .g-wings { animation: gFlutter .07s linear infinite alternate; opacity: .85; }
@keyframes gWings { 50% { transform: rotate(-6deg) scaleY(.94); } }
@keyframes gFlutter { from { transform: rotate(-16deg) scaleY(.82); } to { transform: rotate(10deg) scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .guide .g-wings, .guide.flying .g-wings { animation: none; } }
.book .entry.word span { text-align: left; }

/* Ergebnis der Vermutung: ein ganzer Satz, darunter ein klares Ergebnis */
.pred-verdict { display: flex; align-items: center; gap: 10px; margin: 6px 0 4px; padding: 10px 14px; border-radius: 14px; font-weight: 800; font-size: 1.1rem; }
.pred-verdict svg { width: 30px; height: 30px; flex: none; }
.pred-verdict.ok { background: #e6f2dc; color: var(--green-dark); }
.pred-verdict.other { background: #fbefd9; color: var(--brown); }

/* Antwort mit gezeichnetem Bild und Markierungsring */
.choice.with-img .choice-img { position: relative; display: block; width: min(230px, 38vw); }
.choice.with-img .choice-img img { display: block; width: 100%; height: auto; }
.choice-ring { position: absolute; width: 22%; aspect-ratio: 1; transform: translate(-50%, -50%); border: 4px solid #e8a33a; border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .7); animation: ringPulse 1.6s ease-in-out infinite; }
@keyframes ringPulse { 50% { transform: translate(-50%, -50%) scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .choice-ring { animation: none; } }

/* ---------- Story-Modus (2.11.): Fertig, Eimer, Pegelstab groß, Rückblick ---------- */
.st-done { position: fixed; z-index: 24; left: 50%; bottom: 88px; transform: translateX(-50%); min-height: 64px; padding: .4rem 1.6rem; border-radius: 34px; font-size: 1.3rem; animation: taskPop .5s cubic-bezier(.2,.9,.25,1.3); }
.st-done .ico { width: 34px; height: 34px; }
.st-bucket { position: fixed; z-index: 24; right: 14px; bottom: 150px; min-width: 86px; height: 72px; border-radius: 36px; padding: 0 14px; gap: 6px; }
.st-bucket .ico { width: 46px; height: 46px; }
.st-bucket b { font-size: 1.3rem; }
.st-pegel { position: fixed; z-index: 23; right: 14px; top: 50%; transform: translateY(-50%); width: 176px; padding: 8px 10px 10px; border-radius: 20px; cursor: pointer;
  background: var(--paper); border: 3px solid var(--green-light); box-shadow: 0 8px 22px rgba(20,15,5,.3); animation: fadeIn .3s ease both; }
.st-pegel-h { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0 0 4px; font-weight: 800; font-size: 1.15rem; color: var(--ink); }
.st-pegel-h svg { width: 30px; height: 30px; }
.st-pegel .pegel-svg { display: block; width: 100%; height: auto; }
@keyframes stBlink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.pegel-target { animation: stBlink 1.1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .pegel-target { animation: none; } }
.card .pegel-svg { display: block; width: min(150px, 40vw); height: auto; margin: 4px auto 8px; }
.card .pegel-chart { display: block; width: 100%; max-width: 560px; height: auto; margin: 6px auto 2px; }
.rb-list { display: grid; gap: 8px; margin: 4px 0 6px; }
.rb-h { margin: 8px 0 0; font-weight: 800; color: var(--ink); font-size: 1.05rem; }
.rb-line { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 14px; background: #f6f0e1; border: 1px solid var(--paper-edge); font-size: 1rem; line-height: 1.35; }
.rb-line svg { width: 40px; height: 40px; }
.rb-line b { font-size: 1.15rem; color: #6c6453; white-space: nowrap; }
.rb-line.mis { background: #fbeee2; border-color: #e6c3a3; }
.rb-line.mis b { color: #b5561a; }
.rb-line.ok { grid-template-columns: 44px 1fr; background: #eef6e4; border-color: #c5ddb0; }
.end-dots i.mis { background: #e39a5a; }
.end-legend i.mis { background: #e39a5a; }
@media (max-width: 640px) {
  .st-pegel { width: 128px; right: 8px; padding: 6px; }
  .st-pegel-h { font-size: 1rem; }
  .st-done { bottom: 200px; font-size: 1.15rem; min-height: 58px; }
  .st-bucket { right: 8px; bottom: 200px; height: 58px; min-width: 74px; }
  .st-bucket .ico { width: 38px; height: 38px; }
  .rb-line { grid-template-columns: 34px 1fr auto; font-size: .95rem; padding: 7px 9px; }
  .rb-line svg { width: 32px; height: 32px; }
}

/* Ausreden lassen (audio.js R4, Thomas 7.11.): während ein Satz läuft, sind Knöpfe blasser und nehmen nichts an */
body.wa-lock .overlay .card .actions .btn, body.wa-lock .overlay .card .choice, body.wa-lock .overlay .card .opt-say,
body.wa-lock .hud.bl .btn, body.wa-lock #btn-book, body.wa-lock #btn-reset, body.wa-lock .task, body.wa-lock .st-done, body.wa-lock .st-bucket,
body.wa-lock .tray, body.wa-lock #mg-root .btn:not(.speak), body.wa-lock #mg-root .choice {
  opacity: .5; filter: saturate(.55); transition: opacity .25s, filter .25s;
}
.overlay .card .actions .btn, .overlay .card .choice, .hud.bl .btn, .task, #mg-root .btn { transition: opacity .25s, filter .25s; }
.wa-wait { animation: wa-wait .6s ease-in-out 1; }
@keyframes wa-wait { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.12); } }
.wa-sub.wa-wait { animation: wa-wait-sub .6s ease-in-out 1; }
@keyframes wa-wait-sub { 0%, 100% { filter: none; } 40% { filter: brightness(1.15) drop-shadow(0 0 8px #f2c14e); } }
@media (prefers-reduced-motion: reduce) { .wa-wait, .wa-sub.wa-wait { animation: none; } }

/* ---------- Messstation rechts (Thomas 7.11.: Wettlauf-Variante, schmal, Hintergrund halb durchsichtig, echte Bilder) ---------- */
.ms { position: fixed; z-index: 19; right: 12px; top: 50%; transform: translateY(-58%); display: flex; gap: 2px; padding: 8px 5px 6px; border-radius: 18px;
  background: rgba(248, 241, 226, .5); border: 1px solid rgba(228, 213, 183, .75); box-shadow: 0 4px 14px rgba(20, 15, 5, .18);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: opacity .4s; }
.ms-col { all: unset; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; width: 46px; padding: 2px 0; border-radius: 12px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ms-col:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.ms-water:not(.ms-on) { display: none; }
.ms-pic { position: relative; display: block; width: 38px; height: 38px; }
.ms-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(30, 20, 8, .3)); user-select: none; -webkit-user-drag: none; }
.ms-grow .ms-pic { width: 44px; }
.ms-n { position: absolute; right: -6px; top: -7px; min-width: 20px; height: 20px; padding: 0 4px; border-radius: 10px; background: var(--green); color: #fff; font-size: .72rem; font-weight: 800; display: grid; place-items: center; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
.ms-bar { position: relative; width: 14px; height: clamp(100px, 24vh, 190px); margin: 5px 0 4px; border-radius: 7px; background: rgba(255, 250, 240, .78); box-shadow: inset 0 1px 3px rgba(60, 40, 10, .35); }
.ms-fill { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 7px; transition: height .6s; }
.ms-water .ms-fill { background: linear-gradient(180deg, #7fc0d6, #2f6f86); }
.ms-temp .ms-fill { background: linear-gradient(180deg, #f2a35a, #d4532d); }
.ms-temp.ms-cold .ms-fill { background: linear-gradient(180deg, #a9cde4, #4f86b8); }
.ms-grow .ms-fill { background: linear-gradient(180deg, #9fd36b, #4a7c23); }
.ms-low { position: absolute; left: 0; right: 0; bottom: 0; height: 20%; border-radius: 0 0 7px 7px; z-index: 1;
  background: repeating-linear-gradient(135deg, rgba(200, 70, 50, .5) 0 4px, rgba(200, 70, 50, .14) 4px 8px); }
.ms-morning { position: absolute; left: -5px; right: -5px; height: 0; border-top: 2px dashed #5f5c6a; z-index: 2; transition: bottom .6s; }
.ms-goal { position: absolute; left: -5px; right: -5px; top: 0; border-top: 2px solid var(--green-dark); z-index: 2; }
.ms-hint { position: absolute; left: 50%; width: 28px; height: 28px; margin-left: -14px; transform: translateY(-2px); display: grid; place-items: center; border-radius: 50%;
  background: rgba(255, 255, 255, .92); box-shadow: 0 1px 4px rgba(0, 0, 0, .3); opacity: 0; transition: opacity .4s, bottom .6s; z-index: 3; pointer-events: none; }
.ms-hint.on { opacity: 1; }
.ms-hint img { width: 22px; height: 22px; object-fit: contain; }
.ms-lbl { font-size: .72rem; font-weight: 800; line-height: 1.1; color: var(--ink); white-space: nowrap; text-shadow: 0 1px 0 rgba(255, 255, 255, .7); }
.ms-water.ms-few .ms-lbl { color: #a8361f; }
.ms-ping .ms-bar { animation: msPing 1.3s ease-out; }
@keyframes msPing { 0% { box-shadow: inset 0 1px 3px rgba(60, 40, 10, .35), 0 0 0 0 rgba(242, 193, 78, .95); } 100% { box-shadow: inset 0 1px 3px rgba(60, 40, 10, .35), 0 0 0 12px rgba(242, 193, 78, 0); } }
.ms-new { animation: msIn .7s cubic-bezier(.2, .9, .25, 1.3); }
@keyframes msIn { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
.ms-fly { position: fixed; z-index: 30; width: 64px; height: 0; margin-left: -32px; border-top: 5px solid #1f4f8f; border-radius: 3px; box-shadow: 0 0 0 2px rgba(255, 255, 255, .85);
  transition: transform 1.2s cubic-bezier(.5, 0, .3, 1); pointer-events: none; }
body.wa-lock .ms { opacity: .55; }
@media (max-width: 640px) {
  .ms { right: 6px; top: 200px; transform: none; padding: 6px 3px 4px; }
  .ms-col { width: 40px; }
  .ms-pic { width: 32px; height: 32px; } .ms-grow .ms-pic { width: 38px; }
  .ms-bar { width: 12px; height: 110px; }
  .ms-lbl { font-size: .64rem; }
  .hud.bl { bottom: 14px; }
  .st-done, .st-bucket { bottom: 96px; }
}
@media (max-height: 520px) and (min-width: 641px) { .ms-bar { height: 90px; } .ms { top: 56%; } }

/* echte Bilder statt Piktogrammen in Karten, Antworten, Ketten und Rückblick */
img.pic { display: block; object-fit: contain; user-select: none; -webkit-user-drag: none; filter: drop-shadow(0 4px 5px rgba(40, 30, 10, .22)); }
img.pic-cool { filter: hue-rotate(180deg) saturate(.8) drop-shadow(0 4px 5px rgba(40, 30, 10, .22)); }
.choice img.pic { width: 128px; height: 104px; margin: 0 auto; }
.chain .link img.pic { width: 70px; height: 70px; margin: 0 auto; padding: 6px; box-sizing: border-box; background: #fffaf0; border-radius: 50%; border: 2px solid var(--paper-edge); }
.card .chain .link img.pic { width: 58px; height: 58px; }
.rb-line img.pic { width: 40px; height: 40px; flex: none; }
@media (max-width: 640px) { .choice img.pic { width: 100px; height: 80px; } .rb-line img.pic { width: 32px; height: 32px; } }

/* Startbildschirm: echte Filzbilder auf den Level-Karten (8.11.) */
.lvl { width: 168px; }
.lvl .lvl-pic { width: 136px; height: 88px; object-fit: contain; filter: drop-shadow(0 4px 5px rgba(40,30,10,.22)); }
.lvl .lvl-pic + svg { display: none; }
.lvl.locked > .lvl-pic { opacity: .8; filter: saturate(.75) drop-shadow(0 4px 5px rgba(40,30,10,.18)); }
@media (max-width: 640px) { .lvl { width: 148px; } .lvl .lvl-pic { width: 118px; height: 76px; } }

/* Warten aufs Satzende sichtbar machen (Thomas 8.11.) */
.wa-listen { position: fixed; z-index: 60; left: 50%; bottom: 18px; transform: translate(-50%, 140%); display: flex; align-items: center; gap: 10px;
  padding: 8px 16px 8px 10px; border-radius: 26px; background: #fffaf0; border: 3px solid var(--sun, #f2c14e); box-shadow: 0 4px 14px rgba(20, 15, 5, .3);
  font-weight: 800; font-size: 1.05rem; color: var(--ink); opacity: 0; transition: transform .3s, opacity .3s; pointer-events: none; }
.wa-listen.on { transform: translate(-50%, 0); opacity: 1; }
.wa-listen i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #f6d77a; font-style: normal; }
.wa-listen i .ico, .wa-listen i svg { width: 22px; height: 22px; }
.wa-listen.on i { animation: wa-ear 1s ease-in-out infinite; }
@keyframes wa-ear { 50% { transform: scale(1.12); } }
.wa-listen b { position: relative; display: block; width: 90px; height: 8px; border-radius: 4px; background: rgba(110, 90, 60, .2); overflow: hidden; }
.wa-listen u { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: var(--green, #4a7c23); border-radius: 4px; transition: width .12s linear; }
.wa-listen.wa-wait { animation: wa-shake .45s; }
@keyframes wa-shake { 0%, 100% { transform: translate(-50%, 0); } 25%, 75% { transform: translate(calc(-50% - 7px), 0); } 50% { transform: translate(calc(-50% + 7px), 0); } }
body.wa-ready .overlay .card .actions .btn, body.wa-ready .overlay .card .choice, body.wa-ready #mg-root .choice { animation: wa-ready .7s ease-out 1; }
@keyframes wa-ready { 0% { transform: scale(1); } 35% { transform: scale(1.08); box-shadow: 0 0 0 6px rgba(242, 193, 78, .7); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .wa-listen.on i, .wa-listen.wa-wait, body.wa-ready .overlay .card .choice, body.wa-ready .overlay .card .actions .btn { animation: none; } }
@media (max-width: 640px) { .wa-listen { font-size: .92rem; bottom: 10px; } .wa-listen b { width: 60px; } }
body.wa-lock .mg-early .btn:not(.speak), body.wa-lock .mg-early .choice { opacity: 1; filter: none; }
.card .hero-sim_metamorphose, .card .hero-sim_kroete { max-width: min(460px, 80vw); max-height: 170px; }
.lvl.soon { padding-bottom: 22px; }