/*
 * Taach's Lernwelt – Kinderbereich, Gestaltung ab Version 8.3.0
 * Leitidee: eine freundliche Spielwelt (Landschaft, Begleitfiguren),
 * kräftige, klare Farben, große Flächen und runde Kinderschrift.
 * Alle Regeln sind auf body.lw beschränkt; Eltern- und Entwicklerbereich bleiben unverändert.
 */

@font-face {
  font-family: "Fredoka";
  src: url("/assets/fonts/fredoka.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

body.lw {
  --lw-ink: #1f2d4d;
  --lw-ink-soft: #4a5878;
  --lw-card: #fffdf8;
  --lw-line: #e8dcc4;
  --lw-sun: #ffcf3f;
  --lw-sun-dark: #e0a800;
  --lw-sky: #3aa7f0;
  --lw-sky-dark: #1f7fc4;
  --lw-leaf: #5fbf3f;
  --lw-leaf-dark: #3f9427;
  --lw-coral: #ff6f4f;
  --lw-coral-dark: #d94b2c;
  --lw-berry: #ef5b93;
  --lw-berry-dark: #c93a72;
  --lw-radius: 26px;
  --lw-font: "Fredoka", ui-rounded, "Arial Rounded MT Bold", "Segoe UI", sans-serif;
  color: var(--lw-ink);
  background: #cdeeff url("/assets/world-bg.svg") center bottom / cover no-repeat fixed;
}
body.lw .modal-kids,
body.lw .maintenance-screen {
  font-family: var(--lw-font);
}
/* iOS rendert „fixed“-Hintergründe unzuverlässig */
@supports (-webkit-touch-callout: none) {
  body.lw {
    background-attachment: scroll;
  }
}
body.lw .app {
  font-family: var(--lw-font);
  max-width: 1080px;
}
body.lw .app button,
body.lw .modal-kids button {
  font-family: var(--lw-font);
}

/* ---------------- Kopfzeile ---------------- */
body.lw header {
  padding: 8px 10px 8px 12px;
  border-radius: 999px;
  background: #ffffffe6;
  box-shadow: 0 6px 0 #1f2d4d14, 0 10px 30px #1f7fc41f;
  backdrop-filter: blur(6px);
}
body.lw .brand {
  color: var(--lw-ink);
  font-size: clamp(19px, 2.6vw, 28px);
  font-weight: 700;
  letter-spacing: -0.01em;
}
body.lw .brand-icon {
  width: 1.7em;
  height: 1.7em;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 3px var(--lw-sun);
  overflow: hidden;
}
body.lw .brand-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
body.lw .brand-copy small {
  margin-top: 2px;
  color: var(--lw-ink-soft);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
body.lw .status {
  gap: 8px;
}
body.lw .pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px 7px 10px;
  border-radius: 999px;
  box-shadow: inset 0 -3px 0 #0000001a;
  font-size: 17px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
body.lw #stars {
  background: #fff1b8;
  color: #6b4a00;
}
body.lw #level {
  background: #dcf5cf;
  color: #245a12;
}
body.lw #timer {
  background: #d9efff;
  color: #134a78;
}
body.lw .public-version {
  min-height: 34px;
  padding: 6px 12px;
  background: #f3efe6;
  color: var(--lw-ink-soft);
  box-shadow: none;
  font-size: 12px;
  font-weight: 600;
}
body.lw .parent-btn {
  width: 46px;
  height: 46px;
  background: #f3efe6;
  box-shadow: inset 0 -3px 0 #0000001a;
  font-size: 20px;
}

/* ---------------- Kategorie & Abenteuer ---------------- */
body.lw .category {
  margin: 18px auto 0;
  padding: 7px 18px;
  border-radius: 999px 999px 999px 999px;
  background: var(--lw-ink);
  color: #fff;
  box-shadow: 0 4px 0 #0f1a33;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  position: relative;
  z-index: 2;
}
body.lw .adventure-progress {
  border-radius: 20px;
  background: #ffffffe6;
  box-shadow: 0 6px 0 #1f2d4d14;
}

/* ---------------- Spielkarte ---------------- */
body.lw .card {
  position: relative;
  margin-top: -14px;
  padding: clamp(34px, 4.4vw, 50px) clamp(16px, 3.4vw, 40px) clamp(20px, 3vw, 34px);
  border: 0;
  border-radius: 34px;
  background: var(--lw-card);
  box-shadow:
    0 0 0 4px #fff,
    0 10px 0 #e6d7b8,
    0 24px 50px #1f5f8a33;
  min-height: 440px;
}
body.lw #question {
  max-width: 820px;
  margin-bottom: 10px;
  color: var(--lw-ink);
  font-size: clamp(26px, 4vw, 44px);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
body.lw #visual:empty {
  display: none;
}
body.lw #visual {
  margin: 6px 0 14px;
}
body.lw #hint {
  color: var(--lw-ink-soft);
  font-size: 17px;
  font-weight: 500;
}
body.lw #hint:empty {
  min-height: 0;
  margin: 0;
}
body.lw #feedback {
  color: var(--lw-ink);
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 600;
}
body.lw #feedback:empty {
  min-height: 0;
  margin-top: 8px;
}
body.lw .puzzle-image {
  border-radius: 24px;
  box-shadow: 0 6px 0 #e6d7b8;
}

/* ---------------- Antwortkacheln ---------------- */
body.lw #answers {
  gap: 16px;
}
body.lw .answer {
  --tile: var(--lw-sky);
  --tile-dark: var(--lw-sky-dark);
  --tile-soft: #e3f3ff;
  min-height: 92px;
  padding: 18px 20px 16px 22px;
  border: 3px solid var(--tile-soft);
  border-radius: 24px;
  background: #fff;
  color: var(--lw-ink);
  box-shadow: 0 7px 0 var(--tile-soft), 0 12px 22px #1f2d4d14;
  font-weight: 600;
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease,
    border-color 0.12s ease;
}
body.lw #answers > .answer:nth-child(4n + 1) {
  --tile: var(--lw-sun);
  --tile-dark: var(--lw-sun-dark);
  --tile-soft: #ffecb0;
}
body.lw #answers > .answer:nth-child(4n + 2) {
  --tile: var(--lw-sky);
  --tile-dark: var(--lw-sky-dark);
  --tile-soft: #cde9ff;
}
body.lw #answers > .answer:nth-child(4n + 3) {
  --tile: var(--lw-leaf);
  --tile-dark: var(--lw-leaf-dark);
  --tile-soft: #d3f1c4;
}
body.lw #answers > .answer:nth-child(4n + 4) {
  --tile: var(--lw-berry);
  --tile-dark: var(--lw-berry-dark);
  --tile-soft: #ffd3e4;
}
@media (hover: hover) {
  body.lw .answer:hover {
    transform: translateY(-3px);
    border-color: var(--tile);
    box-shadow: 0 10px 0 var(--tile-soft), 0 16px 26px #1f2d4d1f;
  }
}
body.lw .answer:active {
  transform: translateY(5px);
  box-shadow: 0 2px 0 var(--tile-soft), 0 4px 10px #1f2d4d14;
}
body.lw .answer-number {
  left: 10px;
  top: 10px;
  width: 30px;
  height: 30px;
  background: var(--tile);
  color: #fff;
  box-shadow: inset 0 -3px 0 var(--tile-dark);
  font-size: 16px;
  font-weight: 700;
  text-shadow: 0 1px 0 #00000026;
}
body.lw #answers > .answer:nth-child(4n + 1) .answer-number {
  color: #5a3d00;
  text-shadow: none;
}
body.lw .answer.long {
  padding-left: 50px;
  font-size: clamp(18px, 2.6vw, 26px);
  line-height: 1.2;
}
body.lw .answer.long .answer-content {
  hyphens: manual;
  overflow-wrap: normal;
  word-break: keep-all;
}
body.lw .answer.color {
  border-color: #ffffff;
  box-shadow: 0 7px 0 #00000026, 0 12px 22px #1f2d4d1f;
}
body.lw .answer.color .answer-number {
  background: #fff;
  color: var(--lw-ink);
  box-shadow: 0 2px 0 #00000026;
  text-shadow: none;
}
body.lw .answer.good {
  border-color: var(--lw-leaf) !important;
  background: #e6f9dc !important;
  box-shadow: 0 7px 0 #b6e79f, 0 0 0 6px #5fbf3f33 !important;
  animation: lw-pop 0.42s cubic-bezier(0.2, 1.6, 0.4, 1);
}
body.lw .answer.good .answer-number {
  background: var(--lw-leaf);
  color: #fff;
  box-shadow: inset 0 -3px 0 var(--lw-leaf-dark);
}
body.lw .answer.nope {
  border-color: var(--lw-coral) !important;
  background: #ffe9e3 !important;
  box-shadow: 0 7px 0 #ffc7b8 !important;
}
@keyframes lw-pop {
  40% {
    transform: scale(1.08);
  }
}

/* ---------------- Aktionsleiste ---------------- */
body.lw .actions {
  gap: 10px;
  margin-top: 6px;
}
body.lw .action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 52px;
  padding: 10px 18px;
  border-radius: 18px;
  background: #fff;
  color: var(--lw-ink);
  box-shadow: 0 5px 0 #d9ccb2, 0 10px 20px #1f2d4d14;
  font-size: 17px;
  font-weight: 600;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
body.lw .action:active {
  transform: translateY(4px);
  box-shadow: 0 1px 0 #d9ccb2;
}
body.lw .action.primary {
  background: var(--lw-sun);
  color: #4d3500;
  box-shadow: 0 5px 0 var(--lw-sun-dark), 0 10px 20px #e0a80033;
}
body.lw .action.primary:active {
  box-shadow: 0 1px 0 var(--lw-sun-dark);
}
body.lw .action.pause {
  background: #d9efff;
  color: #134a78;
  box-shadow: 0 5px 0 #a9d4f5;
}
body.lw .action.end {
  background: #ffe3dc;
  color: #9b2c12;
  box-shadow: 0 5px 0 #f5b9a8;
}

/* ---------------- Fortschritt ---------------- */
body.lw .progress {
  position: relative;
  height: 18px;
  max-width: 560px;
  margin-top: 22px;
  overflow: visible;
  border-radius: 999px;
  background: #ffffffcc;
  box-shadow: inset 0 2px 0 #0000000f, 0 3px 0 #1f2d4d14;
}
body.lw .progress > div {
  border-radius: 999px;
  background: linear-gradient(90deg, #ffcf3f, #ff9f2e);
  box-shadow: inset 0 -4px 0 #0000001f;
}
body.lw .progress::after {
  content: "⭐";
  position: absolute;
  right: -14px;
  top: 50%;
  font-size: 26px;
  line-height: 1;
  transform: translateY(-52%);
  filter: drop-shadow(0 2px 0 #0000001f);
}
body.lw .speech-status {
  color: #8a3413;
  font-weight: 600;
}
body.lw .bug-launch {
  font-family: var(--lw-font);
  font-weight: 600;
  background: #ffffffd9;
  border-color: transparent;
  box-shadow: 0 3px 0 #1f2d4d14;
  color: var(--lw-ink-soft);
}
body.lw .copyright {
  color: #1f4a1a;
  font-weight: 500;
  text-shadow: 0 1px 0 #ffffff80;
}

/* ---------------- Vorleser (Lian, Iva oder beide) ---------------- */
.lw-guide {
  position: absolute;
  left: -30px;
  top: -52px;
  z-index: 3;
  width: 112px;
  height: 118px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  filter: drop-shadow(0 6px 0 #1f2d4d1f);
  -webkit-tap-highlight-color: transparent;
}
.lw-guide svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform-origin: 50% 100%;
  animation: lw-bob 3.6s ease-in-out infinite;
}
.lw-guide .lw-lids {
  transform-origin: 60px 52px;
  animation: lw-blink 5.5s infinite;
}
.lw-guide .lw-eyes-happy {
  display: none;
}
.lw-guide.happy .lw-eyes-open {
  display: none;
}
.lw-guide.happy .lw-eyes-happy {
  display: inline;
}
.lw-guide.happy svg {
  animation: lw-jump 0.7s cubic-bezier(0.3, 1.5, 0.5, 1) 2;
}
.lw-guide.happy .lw-wing-l {
  animation: lw-flap-l 0.35s ease-in-out 4;
}
.lw-guide.happy .lw-wing-r {
  animation: lw-flap-r 0.35s ease-in-out 4;
}
.lw-guide.oops svg {
  animation: lw-tilt 0.9s ease-in-out;
}
.lw-guide.talking .lw-beak-low {
  animation: lw-talk 0.28s ease-in-out infinite;
}
.lw-wing-l {
  transform-origin: 26px 70px;
}
.lw-wing-r {
  transform-origin: 94px 70px;
}
.lw-beak-low {
  transform-origin: 60px 64px;
}
.lw-guide-bubble {
  position: absolute;
  left: 92px;
  top: 6px;
  width: max-content;
  max-width: 190px;
  padding: 7px 12px;
  border-radius: 16px 16px 16px 4px;
  background: #fff;
  color: var(--lw-ink, #1f2d4d);
  box-shadow: 0 4px 0 #1f2d4d1a, 0 8px 18px #1f2d4d1f;
  font-family: var(--lw-font);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  text-align: left;
  opacity: 0;
  transform: translateY(4px) scale(0.96);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}
.lw-guide.show-bubble .lw-guide-bubble,
.lw-guide:focus-visible .lw-guide-bubble {
  opacity: 1;
  transform: none;
}
@media (hover: hover) {
  .lw-guide:hover .lw-guide-bubble {
    opacity: 1;
    transform: none;
  }
}
@keyframes lw-bob {
  50% {
    transform: translateY(-4px) rotate(-1.5deg);
  }
}
@keyframes lw-blink {
  0%,
  94%,
  100% {
    transform: scaleY(0);
  }
  96% {
    transform: scaleY(1);
  }
}
@keyframes lw-jump {
  40% {
    transform: translateY(-18px) rotate(-4deg);
  }
}
@keyframes lw-flap-l {
  50% {
    transform: rotate(28deg);
  }
}
@keyframes lw-flap-r {
  50% {
    transform: rotate(-28deg);
  }
}
@keyframes lw-tilt {
  30% {
    transform: rotate(-10deg);
  }
  65% {
    transform: rotate(7deg);
  }
}
@keyframes lw-talk {
  50% {
    transform: translateY(2px);
  }
}

/* Konfetti bei richtigen Antworten */
.lw-confetti {
  position: fixed;
  z-index: 15;
  width: 10px;
  height: 14px;
  border-radius: 3px;
  pointer-events: none;
  animation: lw-confetti 1.1s cubic-bezier(0.2, 0.7, 0.4, 1) forwards;
}
@keyframes lw-confetti {
  0% {
    opacity: 1;
    transform: translate(0, 0) rotate(0);
  }
  100% {
    opacity: 0;
    transform: translate(var(--dx), var(--dy)) rotate(var(--rot));
  }
}

@media (prefers-reduced-motion: reduce) {
  .lw-guide svg,
  .lw-guide .lw-lids,
  .lw-guide.happy svg,
  .lw-guide.happy .lw-wing-l,
  .lw-guide.happy .lw-wing-r,
  .lw-guide.oops svg,
  .lw-guide.talking .lw-beak-low,
  body.lw .answer.good {
    animation: none !important;
  }
  .lw-confetti {
    display: none;
  }
}

/* ---------------- Dialoge im Kinderbereich ---------------- */
body.lw .modal-kids {
  background: #1f4a7acc;
}
body.lw .modal-kids .modal-box {
  border: 0;
  border-radius: 32px;
  background: var(--lw-card);
  box-shadow: 0 0 0 4px #fff, 0 10px 0 #e6d7b8, 0 30px 60px #0f264533;
  color: var(--lw-ink);
  font-family: var(--lw-font);
}
body.lw .modal-kids h2 {
  font-weight: 600;
  letter-spacing: -0.01em;
}
body.lw .modal-kids p {
  color: var(--lw-ink-soft);
}
body.lw .player-card {
  border: 3px solid #cde9ff;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 6px 0 #cde9ff;
  font-weight: 600;
}
body.lw .player-card:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 #cde9ff;
}
body.lw .play-mode-card {
  border: 3px solid #cde9ff;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 7px 0 #cde9ff;
}
body.lw .play-mode-card.adventure {
  border-color: var(--lw-sun);
  background: #fff8dc;
  box-shadow: 0 7px 0 var(--lw-sun-dark);
}
body.lw .play-mode-card b {
  font-weight: 600;
}
body.lw .play-mode-card em {
  background: var(--lw-coral);
  box-shadow: inset 0 -2px 0 var(--lw-coral-dark);
}
body.lw .play-mode-icon {
  background: #f3efe6;
  box-shadow: none;
}
body.lw .modal-kids .big-btn {
  border-radius: 18px;
  background: var(--lw-sky);
  color: #fff;
  box-shadow: 0 5px 0 var(--lw-sky-dark);
  font-weight: 600;
}
body.lw .modal-kids .big-btn.secondary {
  background: #f3efe6;
  color: var(--lw-ink);
  box-shadow: 0 5px 0 #d9ccb2;
}

/* ---------------- Tablet ---------------- */
@media (max-width: 900px) {
  body.lw header {
    border-radius: 26px;
  }
  .lw-guide {
    left: -8px;
    top: -54px;
    width: 92px;
    height: 98px;
  }
  .lw-guide-bubble {
    left: 80px;
  }
}

/* ---------------- Handy ---------------- */
@media (max-width: 600px) {
  body.lw header {
    padding: 8px 10px;
    border-radius: 22px;
  }
  body.lw .pill {
    padding: 5px 10px 5px 8px;
    font-size: 15px;
  }
  body.lw .card {
    padding: 44px 14px 18px;
    border-radius: 28px;
    min-height: 0;
  }
  body.lw #question {
    font-size: clamp(23px, 6.6vw, 30px);
  }
  body.lw #answers {
    gap: 12px;
  }
  body.lw .answer {
    min-height: 78px;
    padding: 14px 14px 12px 18px;
    border-radius: 20px;
  }
  body.lw .answer.long {
    padding-left: 44px;
  }
  body.lw .action {
    min-height: 48px;
    padding: 8px 12px;
    font-size: 15px;
    border-radius: 16px;
  }
  .lw-guide {
    left: 6px;
    top: -42px;
    width: 70px;
    height: 74px;
  }
  .lw-guide-bubble {
    display: none;
  }
}

/* ---------------- Aktionsknöpfe: Symbol + Text ---------------- */
body.lw .action .a-ico {
  font-size: 1.15em;
  line-height: 1;
}
body.lw .action .a-short {
  display: none;
}

/* Handy: kompakte Leiste mit fünf Symbolen */
@media (max-width: 600px) {
  body.lw .actions {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px !important;
    padding: 8px !important;
    border-radius: 22px !important;
    background: #ffffffeb !important;
    box-shadow: 0 -2px 0 #1f2d4d0d, 0 10px 30px #1f2d4d33 !important;
    backdrop-filter: blur(8px);
  }
  body.lw .action {
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    min-height: 58px !important;
    padding: 6px 2px !important;
    border-radius: 14px !important;
    font-size: 12px !important;
    line-height: 1.1;
  }
  body.lw .action .a-ico {
    font-size: 22px;
  }
  body.lw .action .a-long {
    display: none;
  }
  body.lw .action .a-short {
    display: block;
  }
}

/* Vorleser im Startdialog */
.lw-guide-static {
  width: 92px;
  height: 96px;
  margin: -70px auto 0;
  filter: drop-shadow(0 6px 0 #1f2d4d1f);
}
.lw-guide-static svg {
  width: 100%;
  height: 100%;
  animation: lw-bob 3.6s ease-in-out infinite;
}
.lw-guide-static .lw-lids {
  transform-origin: 60px 52px;
  animation: lw-blink 5.5s infinite;
}
.lw-guide-static .lw-eyes-happy {
  display: none;
}
body.lw #welcomeModal .modal-box {
  overflow: visible;
  margin-top: 56px;
}

/* ---------------- Antworten: Feinschliff ---------------- */
body.lw .answer {
  overflow: visible;
  padding-left: 22px;
  padding-right: 22px;
}
body.lw .answer-number {
  left: -9px;
  top: -9px;
  width: 32px;
  height: 32px;
  border: 3px solid #fff;
  box-shadow: 0 2px 0 #1f2d4d26;
}
body.lw .answer.long {
  padding-left: 22px;
}
/* alle Antworten gleich groß, sobald eine davon länger ist */
body.lw #answers.lw-uniform-long > .answer:not(.image-choice):not(.color) {
  flex: 1 1 180px;
  max-width: 300px;
  font-size: clamp(18px, 2.4vw, 25px);
  line-height: 1.2;
}
body.lw #answers.lw-uniform-long > .answer:not(.image-choice):not(.color) .answer-content {
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: manual;
}
/* Themen-Schild statt riesiger Schrift */
body.lw #visual.lw-visual-text {
  display: flex;
  width: max-content;
  max-width: 100%;
  min-height: 0;
  margin: 4px auto 16px;
  padding: 10px 24px 12px;
  border-radius: 999px;
  background: #fff1c2;
  box-shadow: inset 0 -4px 0 #f3d77a;
  color: #5a3d00;
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  white-space: normal;
}

/* Handy: Themenschild rechts neben dem Vorleser, damit nichts überlappt */
@media (max-width: 600px) {
  body.lw .category {
    width: max-content;
    max-width: calc(100% - 92px);
    margin: 16px auto 0 82px;
    padding: 6px 14px;
    font-size: 13px;
    line-height: 1.25;
    text-align: center;
    white-space: normal;
  }
  .lw-guide {
    top: -64px;
    left: 4px;
  }
}

/* Tablet: Kopfzeile in einer Zeile halten */
@media (max-width: 900px) {
  body.lw #publicVersion {
    display: none;
  }
  body.lw .header-tools {
    flex-wrap: nowrap;
  }
}

/* ---------------- Fehlerbehebungen ab 8.5.3 ---------------- */
/* Englisch-Farbspiel: Farbfelder behalten ihre Farbe (Fehlermeldung #2) */
body.lw .answer.bilingual-color {
  border-color: #fff;
  background: var(--choice-color);
  box-shadow: 0 7px 0 color-mix(in srgb, var(--choice-color) 70%, #111 30%), 0 12px 22px #1f2d4d1f;
}
body.lw .answer.bilingual-color:hover {
  border-color: #fff;
}
body.lw .answer.bilingual-color .answer-number {
  background: #fff;
  color: var(--lw-ink);
  box-shadow: 0 2px 0 #00000026;
  text-shadow: none;
}
/* Bauwerkstatt: Plätze so groß wie das Bauteil (Fehlermeldung #3) */
.shape-builder .build-slot {
  width: var(--slot-w, 90px) !important;
  height: var(--slot-h, 90px) !important;
  border-radius: 14px;
}
.shape-builder .build-slot .build-shape {
  transform-origin: center;
}

/* ================================================================== */
/* Weltenreise und Sticker-Album (ab 8.7.0)                             */
/* ================================================================== */
body.lw .lw-journey-bar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 22px;
  background: #ffffffeb;
  box-shadow: 0 5px 0 #1f2d4d14, 0 10px 24px #1f5f8a1f;
}
body.lw .lw-journey-bar .adventure-progress-copy {
  display: grid;
  gap: 2px;
}
body.lw .lw-journey-bar .adventure-progress-copy b {
  color: var(--world-color, #1f2d4d);
  font-size: 18px;
  font-weight: 700;
}
body.lw .lw-journey-bar .adventure-progress-copy span {
  color: #4a5878;
  font-size: 13px;
  font-weight: 500;
}
body.lw .lw-journey-bar .adventure-steps {
  display: grid;
  gap: 5px;
  align-items: center;
}
body.lw .lw-journey-bar .adventure-step {
  display: grid;
  place-items: center;
  height: 12px;
  border-radius: 999px;
  background: #e8edf4;
  font-size: 0;
}
body.lw .lw-journey-bar .adventure-step.done {
  background: var(--world-color, #3aa7f0);
}
body.lw .lw-journey-bar .adventure-step.current {
  background: #ffcf3f;
  box-shadow: 0 0 0 3px #ffcf3f55;
}
body.lw .lw-journey-bar .adventure-step.sticker-step {
  height: 26px;
  border-radius: 50%;
  aspect-ratio: 1;
  justify-self: center;
  background: #fff;
  border: 2px dashed #c8d3e2;
  font-size: 15px;
}
body.lw .lw-journey-bar .adventure-step.sticker-step.done {
  border: 2px solid var(--world-color, #3aa7f0);
  background: #fff;
}
.lw-journey-tools {
  display: flex;
  gap: 6px;
}
.lw-journey-tools button {
  min-height: 40px;
  padding: 6px 12px;
  border: 0;
  border-radius: 14px;
  background: #f3efe6;
  color: #1f2d4d;
  box-shadow: 0 3px 0 #d9ccb2;
  font-family: var(--lw-font);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.lw-journey-tools button:active {
  transform: translateY(3px);
  box-shadow: none;
}

/* Karte */
body.lw .lw-map-box,
body.lw .lw-album-box {
  width: min(980px, 100%);
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  text-align: center;
}
body.lw .lw-map-box h2,
body.lw .lw-album-box h2 {
  margin: 0 0 6px;
  font-size: clamp(24px, 3.4vw, 34px);
}
body.lw .lw-map-box p {
  margin: 0 auto 12px;
  max-width: 640px;
  font-size: 17px;
}
.lw-map {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 24px;
  box-shadow: inset 0 0 0 4px #ffffff99;
}
.lw-node {
  cursor: pointer;
}
.lw-node:focus-visible circle:nth-of-type(2) {
  stroke: #ffcf3f;
}
.lw-node.current circle:nth-of-type(2) {
  animation: lw-node-pulse 1.6s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes lw-node-pulse {
  50% {
    transform: scale(1.08);
  }
}
.lw-node-label {
  fill: #1f2d4d;
  font-family: var(--lw-font);
  font-size: 22px;
  font-weight: 700;
  paint-order: stroke;
  stroke: #fffdf8;
  stroke-width: 6px;
}
.lw-node-count {
  fill: #4a5878;
  font-family: var(--lw-font);
  font-size: 17px;
  font-weight: 600;
  paint-order: stroke;
  stroke: #fffdf8;
  stroke-width: 5px;
}
.lw-map-guide {
  filter: drop-shadow(0 3px 0 #1f2d4d22);
}
.lw-map-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
}
.lw-btn {
  min-height: 54px;
  padding: 10px 22px;
  border: 0;
  border-radius: 18px;
  font-family: var(--lw-font);
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
}
.lw-btn.primary {
  background: #ffcf3f;
  color: #4d3500;
  box-shadow: 0 5px 0 #e0a800;
}
.lw-btn.secondary {
  background: #f3efe6;
  color: #1f2d4d;
  box-shadow: 0 5px 0 #d9ccb2;
}
.lw-btn:active {
  transform: translateY(4px);
  box-shadow: none;
}

/* Sticker-Belohnung */
.lw-sticker-pop {
  position: fixed;
  left: 50%;
  bottom: max(110px, calc(env(safe-area-inset-bottom) + 110px));
  z-index: 18; /* unter Karte und Album */
  display: grid;
  justify-items: center;
  gap: 2px;
  min-width: 220px;
  padding: 16px 22px 14px;
  border-radius: 26px;
  background: #fffdf8;
  box-shadow: 0 0 0 4px #ffcf3f, 0 8px 0 #e0a800, 0 20px 40px #1f2d4d33;
  color: #1f2d4d;
  font-family: var(--lw-font);
  text-align: center;
  transform: translateX(-50%);
  animation: lw-sticker-in 0.5s cubic-bezier(0.2, 1.5, 0.4, 1);
  pointer-events: none;
}
.lw-sticker-pop.leave {
  animation: lw-sticker-out 0.5s ease-in forwards;
}
.lw-sticker-big {
  font-size: 64px;
  line-height: 1.1;
  filter: drop-shadow(0 4px 0 #1f2d4d22);
  animation: lw-sticker-wiggle 1s ease-in-out 0.4s 2;
}
.lw-sticker-pop b {
  font-size: 20px;
  font-weight: 700;
}
.lw-sticker-pop small {
  color: #4a5878;
  font-size: 14px;
}
@keyframes lw-sticker-in {
  from {
    opacity: 0;
    transform: translate(-50%, 40px) scale(0.6);
  }
}
@keyframes lw-sticker-out {
  to {
    opacity: 0;
    transform: translate(-50%, -30px) scale(0.8);
  }
}
@keyframes lw-sticker-wiggle {
  25% {
    transform: rotate(-10deg) scale(1.1);
  }
  75% {
    transform: rotate(8deg) scale(1.05);
  }
}

/* Album */
.lw-album-tabs {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  margin: 10px 0;
}
.lw-album-tab {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 8px 4px;
  border: 3px solid transparent;
  border-radius: 16px;
  background: #f3efe6;
  font-family: var(--lw-font);
  cursor: pointer;
}
.lw-album-tab span {
  font-size: 26px;
  line-height: 1.1;
}
.lw-album-tab small {
  color: #4a5878;
  font-size: 12px;
  font-weight: 600;
}
.lw-album-tab[aria-selected="true"] {
  border-color: var(--world-color);
  background: #fff;
}
.lw-album-page {
  margin-bottom: 14px;
  padding: 16px;
  border-radius: 24px;
  background: linear-gradient(180deg, var(--world-soft) 0%, #fffdf8 100%);
  box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--world-color) 30%, transparent);
}
.lw-album-head {
  margin-bottom: 12px;
  color: var(--world-color);
  font-size: 24px;
  font-weight: 700;
}
.lw-album-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  max-width: 480px;
  margin: 0 auto;
}
.lw-album-slot {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border: 3px dashed #c8d3e2;
  border-radius: 50%;
  background: #ffffffaa;
  color: #b3bfd0;
  font-size: 32px;
  font-weight: 700;
}
.lw-album-slot.owned {
  border: 4px solid #fff;
  background: #fff;
  box-shadow: 0 5px 0 #1f2d4d1a, 0 0 0 3px var(--world-color);
  color: inherit;
  font-size: clamp(40px, 7vw, 58px);
  transform: rotate(-4deg);
}
.lw-album-slot.owned:nth-child(even) {
  transform: rotate(5deg);
}
.lw-album-slot.glitter {
  background: radial-gradient(circle at 30% 25%, #fff 0 20%, #fff6c9 60%, #ffe27a 100%);
}
.lw-album-count {
  position: absolute;
  right: -4px;
  bottom: -4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #ffcf3f;
  color: #4d3500;
  font-size: 14px;
  font-weight: 700;
}
.lw-album-note {
  margin: 12px 0 0;
  color: #4a5878;
  font-size: 15px;
}

@media (max-width: 600px) {
  body.lw .lw-journey-bar {
    grid-template-columns: 1fr auto;
    gap: 8px;
  }
  body.lw .lw-journey-bar .adventure-steps {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .lw-journey-tools button {
    min-height: 36px;
    padding: 4px 10px;
    font-size: 14px;
  }
  .lw-album-tabs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .lw-node-label {
    font-size: 26px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .lw-node.current circle:nth-of-type(2),
  .lw-sticker-pop,
  .lw-sticker-big {
    animation: none !important;
  }
  .lw-map-guide {
    transition: none !important;
  }
}

.lw-map.portrait {
  max-height: calc(100dvh - 230px);
  width: auto;
  max-width: 100%;
  margin: 0 auto;
}
@media (max-width: 640px) {
  body.lw .lw-map-box {
    padding: 16px 12px;
  }
  body.lw .lw-map-box p {
    font-size: 15px;
  }
  .lw-map.portrait .lw-node-label {
    font-size: 30px;
    stroke-width: 7px;
  }
  .lw-map.portrait .lw-node-count {
    font-size: 24px;
  }
}

/* ---------- Nachspuren (ab 8.8.0) ---------- */
body.lw .lw-trace .lw-trace-canvas {
  border: 4px solid #d9ecfb;
  border-radius: 26px;
  box-shadow: 0 6px 0 #cfe3f5;
  cursor: crosshair;
}
body.lw .lw-trace-steps {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 0 0 10px;
}
body.lw .lw-trace-steps span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #eef3f8;
  color: #7f8ea6;
  font-weight: 700;
  font-size: 17px;
  transition: transform 0.2s, background 0.2s;
}
body.lw .lw-trace-steps span.now {
  background: #5fbf3f;
  color: #fff;
  transform: scale(1.12);
  box-shadow: 0 3px 0 #469a2c;
}
body.lw .lw-trace-steps span.done {
  background: #d9f1cf;
  color: #3f8a25;
}
body.lw .lw-trace .draw-tools button {
  background: #fff;
  border: 3px solid #d9ecfb;
  color: #1f2d4d;
  border-radius: 18px;
  min-height: 52px;
}
body.lw .lw-trace .draw-tools .lw-trace-demo {
  background: #ffcf3f;
  border-color: #f0b920;
  box-shadow: 0 4px 0 #d9a514;
}
body.lw .lw-trace.done .draw-tools {
  display: none;
}
body.lw .lw-trace-stars {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 12px;
  font-size: 44px;
  line-height: 1;
}
body.lw .lw-trace-stars span {
  color: #e3e9f0;
  animation: lw-trace-star 0.5s both;
}
body.lw .lw-trace-stars span.on {
  color: #ffcf3f;
  text-shadow: 0 3px 0 #e0a800;
}
body.lw .lw-trace-stars span:nth-child(2) {
  animation-delay: 0.15s;
}
body.lw .lw-trace-stars span:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes lw-trace-star {
  from {
    transform: scale(0.2) rotate(-40deg);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.lw .lw-trace-stars span {
    animation: none;
  }
}
/* Beim Nachspuren ist die Vorlage selbst das Bild – kein doppeltes Symbol darüber */
body.lw .card:has(.lw-trace) #visual {
  display: none;
}

/* ---------- Katze Soja (ab 8.9.0): sitzt rechts oben auf der Karte und gibt Tipps ---------- */
.lw-soja {
  position: absolute;
  right: -26px;
  top: -50px;
  z-index: 3;
  width: 104px;
  height: 110px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  filter: drop-shadow(0 6px 0 #1f2d4d1f);
  -webkit-tap-highlight-color: transparent;
}
.lw-soja svg,
.lw-soja-static svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform-origin: 50% 100%;
  animation: lw-bob 4.2s ease-in-out -1.3s infinite;
}
.lw-soja .lw-lids,
.lw-soja-static .lw-lids {
  transform-origin: 60px 46px;
  animation: lw-blink 6.3s -2s infinite;
}
.lw-soja .lw-eyes-happy,
.lw-soja-static .lw-eyes-happy,
.lw-soja.happy .lw-eyes-open {
  display: none;
}
.lw-soja.happy .lw-eyes-happy {
  display: inline;
}
.lw-soja .lw-tail,
.lw-soja-static .lw-tail {
  transform-origin: 88px 110px;
  animation: lw-tail 3s ease-in-out infinite;
}
.lw-soja.happy .lw-tail {
  animation: lw-tail 0.35s ease-in-out 5;
}
.lw-soja.happy svg {
  animation: lw-jump 0.7s cubic-bezier(0.3, 1.5, 0.5, 1) 2;
}
.lw-soja.oops svg {
  animation: lw-tilt 0.9s ease-in-out reverse;
}
.lw-soja .lw-beak-low {
  transform-origin: 60px 67px;
  transform: scaleY(0);
}
.lw-soja.talking .lw-beak-low {
  animation: lw-meow 0.3s ease-in-out infinite alternate;
}
.lw-soja .lw-guide-bubble {
  left: auto;
  right: 88px;
  border-radius: 16px 16px 4px 16px;
}
.lw-soja.show-bubble .lw-guide-bubble,
.lw-soja:focus-visible .lw-guide-bubble {
  opacity: 1;
  transform: none;
}
@media (hover: hover) {
  .lw-soja:hover .lw-guide-bubble {
    opacity: 1;
    transform: none;
  }
}
@keyframes lw-tail {
  50% {
    transform: rotate(-9deg);
  }
}
@keyframes lw-meow {
  from {
    transform: scaleY(0.2);
  }
  to {
    transform: scaleY(1);
  }
}
.lw-guide-duo {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 4px;
  margin: -70px auto 0;
}
.lw-guide-duo .lw-guide-static {
  margin: 0;
}
.lw-guide-duo .lw-soja-static {
  width: 84px;
  height: 88px;
  filter: drop-shadow(0 6px 0 #1f2d4d1f);
}
@media (max-width: 900px) {
  .lw-soja {
    right: -6px;
    top: -52px;
    width: 86px;
    height: 92px;
  }
}
@media (max-width: 600px) {
  .lw-soja {
    right: 4px;
    top: -40px;
    width: 64px;
    height: 68px;
  }
  .lw-soja .lw-guide-bubble {
    display: block;
    right: 62px;
    top: 8px;
    max-width: 170px;
    font-size: 13px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .lw-soja svg,
  .lw-soja-static svg,
  .lw-soja .lw-lids,
  .lw-soja-static .lw-lids,
  .lw-soja .lw-tail,
  .lw-soja-static .lw-tail,
  .lw-soja.happy svg,
  .lw-soja.oops svg {
    animation: none !important;
  }
}

/* Begleitfiguren ein-/ausblenden (Entwicklung → System, ab 8.10.0) */
body.lw-no-guide .lw-guide,
body.lw-no-guide .lw-guide-duo .lw-guide-static:not(.lw-soja-static),
body.lw-no-guide .lw-map-reader,
body.lw-no-soja .lw-soja,
body.lw-no-soja .lw-soja-static,
body.lw-no-soja .lw-map-cat {
  display: none;
}
/* nur Soja: etwas größer im Startdialog und mittig auf der Karte */
body.lw-no-guide .lw-guide-duo .lw-soja-static {
  width: 96px;
  height: 100px;
}
body.lw-no-guide .lw-map-cat {
  transform: translate(0px, 6px) scale(0.95);
}
/* Sojas Zunge nur beim Sprechen */
.lw-tongue {
  transform-origin: 60px 67px;
  transform: scaleY(0);
}

/* Handy: Themenschild zwischen Vorleser (links) und Soja (rechts) halten */
@media (max-width: 600px) {
  body.lw:not(.lw-no-soja) .category {
    max-width: calc(100% - 164px);
  }
  body.lw.lw-no-guide .category {
    margin-left: 12px;
    max-width: calc(100% - 92px);
  }
}

/* ---------- Uhr mit ziehbaren Zeigern (ab 8.13.0) ---------- */
body.lw .lw-clock-game {
  display: grid;
  justify-items: center;
  gap: 12px;
  width: 100%;
}
body.lw .lw-clock {
  width: min(300px, 76vw);
  height: auto;
  aspect-ratio: 1;
  overflow: visible;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
body.lw .lw-clock.interactive {
  cursor: grab;
}
body.lw .lw-clock.interactive.drag-hour,
body.lw .lw-clock.interactive.drag-minute {
  cursor: grabbing;
}
.lw-clock-rim {
  fill: #3aa7f0;
  stroke: #1f7fc4;
  stroke-width: 4;
}
.lw-clock-face {
  fill: #fffdf8;
}
.lw-clock-tick {
  stroke: #b9c7d8;
  stroke-width: 2;
  stroke-linecap: round;
}
.lw-clock-tick.big {
  stroke: #1f2d4d;
  stroke-width: 3.5;
}
.lw-clock-num {
  fill: #1f2d4d;
  font-family: var(--lw-font, Fredoka, sans-serif);
  font-size: 19px;
  font-weight: 600;
  text-anchor: middle;
  dominant-baseline: middle;
}
.lw-clock-num.main {
  font-size: 23px;
  font-weight: 700;
}
.lw-hand line {
  stroke-linecap: round;
}
.lw-hand.hour line {
  stroke: #ff6f4f;
  stroke-width: 11;
}
.lw-hand.minute line {
  stroke: #3aa7f0;
  stroke-width: 7;
}
.lw-hand .knob {
  stroke: #fff;
  stroke-width: 3;
}
.lw-hand.hour .knob {
  fill: #ff6f4f;
}
.lw-hand.minute .knob {
  fill: #3aa7f0;
}
.lw-clock.drag-hour .lw-hand.hour line,
.lw-clock.drag-minute .lw-hand.minute line {
  filter: drop-shadow(0 0 4px #ffcf3f);
}
.lw-clock-cap {
  fill: #ffcf3f;
  stroke: #1f2d4d;
  stroke-width: 2;
}
body.lw .lw-clock-readout {
  min-width: 96px;
  padding: 4px 16px;
  border-radius: 14px;
  background: #1f2d4d;
  color: #fff;
  font-family: var(--lw-font, Fredoka, sans-serif);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: center;
}
body.lw .lw-clock-readout[hidden] {
  display: none;
}
body.lw .lw-clock-game.solved .lw-clock-rim {
  fill: #5fbf3f;
  stroke: #3f9427;
}
body.lw .lw-clock-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: min(560px, 100%);
}
body.lw .lw-clock-game.read .lw-clock {
  width: min(280px, 64vw);
}
@media (min-width: 900px) {
  body.lw .lw-clock-game.read {
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 28px;
  }
  body.lw .lw-clock-game.read .lw-clock-choices {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------- Prüfen-Knopf: überall gleich, grün mit Haken (ab 8.13.1) ---------- */
body.lw #answers button.lw-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 62px;
  min-width: 150px;
  padding: 10px 22px 10px 12px;
  border: 0 !important;
  border-radius: 20px !important;
  background: #5fbf3f !important;
  color: #fff !important;
  box-shadow: 0 5px 0 #3f9427 !important;
  font-family: var(--lw-font, Fredoka, sans-serif);
  font-size: 20px;
  font-weight: 600;
  position: relative;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
body.lw #answers button.lw-check:active {
  transform: translateY(3px);
  box-shadow: 0 2px 0 #3f9427 !important;
}
body.lw #answers button.lw-check .lw-check-ico {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #fff;
  color: #3f9427;
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
}
body.lw #answers button.lw-check.go .lw-check-ico {
  font-size: 20px;
  padding-left: 3px;
}
body.lw #answers button.lw-check:disabled {
  opacity: 0.55;
}
/* Hinweis: Knopf wippt, eine Hand zeigt darauf */
body.lw #answers button.lw-check.lw-nudge {
  animation: lw-check-nudge 1.1s ease-in-out infinite;
  box-shadow: 0 5px 0 #3f9427, 0 0 0 6px #ffcf3f99 !important;
}
body.lw #answers button.lw-check.lw-nudge::after {
  content: "👆";
  position: absolute;
  right: -8px;
  bottom: -34px;
  font-size: 36px;
  animation: lw-check-hand 1.1s ease-in-out infinite;
  pointer-events: none;
  filter: drop-shadow(0 2px 2px #1f2d4d33);
}
@keyframes lw-check-nudge {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.07);
  }
}
@keyframes lw-check-hand {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}
@media (prefers-reduced-motion: reduce) {
  body.lw #answers button.lw-check.lw-nudge,
  body.lw #answers button.lw-check.lw-nudge::after {
    animation: none;
  }
}
@media (max-width: 600px) {
  body.lw #answers button.lw-check {
    min-height: 58px;
    font-size: 18px;
  }
}

/* ---------- Soja lebendiger: Bewegungen, müde, schlafen, Leckerlis (ab 8.14.0) ---------- */
.lw-lids-half,
.lw-eyes-sleep,
.lw-yawn {
  display: none;
}
.lw-soja .lw-ear-l {
  transform-origin: 38px 28px;
  transition: transform 0.4s ease;
}
.lw-soja .lw-ear-r {
  transform-origin: 82px 28px;
  transition: transform 0.4s ease;
}
.lw-soja .lw-head {
  transform-origin: 60px 82px;
  transition: transform 0.5s ease;
}
.lw-soja .lw-pupils {
  transition: transform 0.35s ease;
}
.lw-soja .lw-body {
  transform-origin: 60px 118px;
}
/* kleine Bewegungen zwischendurch */
.lw-soja.look-l .lw-pupils {
  transform: translateX(-4px);
}
.lw-soja.look-r .lw-pupils {
  transform: translateX(4px);
}
.lw-soja.look-l .lw-head {
  transform: rotate(-6deg);
}
.lw-soja.look-r .lw-head {
  transform: rotate(6deg);
}
.lw-soja.ear .lw-ear-r {
  animation: lw-ear-twitch 0.5s ease-in-out 2;
}
.lw-soja.stretch svg,
.lw-soja.wake svg {
  animation: lw-cat-stretch 1.3s ease-in-out;
}
.lw-soja.tail .lw-tail {
  animation: lw-tail 0.3s ease-in-out 4;
}
@keyframes lw-ear-twitch {
  50% {
    transform: rotate(14deg);
  }
}
@keyframes lw-cat-stretch {
  30% {
    transform: scale(1.08, 0.9);
  }
  60% {
    transform: scale(0.95, 1.07) translateY(-3px);
  }
}
/* Laune niedrig: Ohren hängen */
.lw-soja.sad .lw-ear-l {
  transform: rotate(-22deg);
}
.lw-soja.sad .lw-ear-r {
  transform: rotate(22deg);
}
.lw-soja.sad .lw-cheek {
  opacity: 0.3;
}
/* müde: halbe Augen, langsames Wippen, gähnen */
.lw-soja.sleepy .lw-lids-half {
  display: inline;
}
.lw-soja.sleepy .lw-lids {
  animation: none;
}
.lw-soja.sleepy svg {
  animation: lw-bob 6s ease-in-out infinite;
}
.lw-soja.sleepy .lw-head {
  transform: rotate(-4deg) translateY(2px);
}
.lw-soja.yawn .lw-yawn {
  display: inline;
}
.lw-soja.yawn .lw-mouth {
  display: none;
}
/* schläft: Augen zu, atmet, Zzz */
.lw-soja.asleep .lw-eyes-open,
.lw-soja.asleep .lw-eyes-happy {
  display: none;
}
.lw-soja.asleep .lw-eyes-sleep {
  display: inline;
}
.lw-soja.asleep svg {
  animation: lw-cat-breathe 3.2s ease-in-out infinite;
}
.lw-soja.asleep .lw-head {
  transform: rotate(-9deg) translateY(5px);
}
.lw-soja.asleep .lw-tail {
  animation: none;
}
@keyframes lw-cat-breathe {
  50% {
    transform: scale(1.03, 0.97);
  }
}
.lw-soja-zzz {
  display: none;
  position: absolute;
  right: -2px;
  top: -8px;
  color: #1f2d4d;
  font-family: var(--lw-font, Fredoka, sans-serif);
  font-weight: 700;
  pointer-events: none;
}
.lw-soja.asleep .lw-soja-zzz {
  display: block;
}
.lw-soja-zzz i {
  position: absolute;
  font-style: normal;
  opacity: 0;
  animation: lw-zzz 3s ease-in-out infinite;
}
.lw-soja-zzz i:nth-child(1) {
  font-size: 14px;
}
.lw-soja-zzz i:nth-child(2) {
  font-size: 18px;
  animation-delay: 1s;
}
.lw-soja-zzz i:nth-child(3) {
  font-size: 24px;
  animation-delay: 2s;
}
@keyframes lw-zzz {
  0% {
    opacity: 0;
    transform: translate(0, 10px);
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(16px, -26px);
  }
}
/* fressen */
.lw-soja.eat .lw-tongue {
  animation: lw-meow 0.18s ease-in-out 8 alternate;
}
.lw-soja.eat .lw-eyes-open {
  display: none;
}
.lw-soja.eat .lw-eyes-happy {
  display: inline;
}
/* Leckerli-Napf und Laune */
.lw-soja-treat {
  position: absolute;
  right: 74px;
  top: 16px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #ffcf3f;
  box-shadow: 0 4px 0 #e0a800, 0 6px 14px #1f2d4d26;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.lw-soja-treat .lw-treat-ico {
  font-size: 24px;
  line-height: 1;
}
.lw-soja-treat .lw-treat-count {
  position: absolute;
  right: -8px;
  top: -8px;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border: 2px solid #fff;
  border-radius: 11px;
  background: #ef5b93;
  color: #fff;
  font-family: var(--lw-font, Fredoka, sans-serif);
  font-size: 13px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}
.lw-soja-treat.empty {
  background: #eef3f8;
  box-shadow: 0 4px 0 #cfd9e4;
}
.lw-soja-treat.empty .lw-treat-ico {
  opacity: 0.45;
  filter: grayscale(1);
}
.lw-soja-treat.empty .lw-treat-count {
  background: #9aa7b8;
}
.lw-soja-treat.earned {
  animation: lw-treat-pop 0.6s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.lw-soja-treat.shake {
  animation: shake 0.35s;
}
@keyframes lw-treat-pop {
  40% {
    transform: scale(1.35) rotate(-10deg);
  }
}
.lw-soja-mood {
  position: absolute;
  right: 2px;
  top: 64px;
  z-index: 3;
  display: flex;
  gap: 2px;
  font-size: 14px;
  line-height: 1;
  pointer-events: none;
}
.lw-soja-mood span {
  color: #d5dde7;
}
.lw-soja-mood span.on {
  color: #ef5b93;
}
.lw-flying-treat {
  position: fixed;
  z-index: 40;
  margin: -14px 0 0 -14px;
  font-size: 28px;
  pointer-events: none;
  transition: transform 0.6s cubic-bezier(0.35, -0.3, 0.6, 1), opacity 0.6s ease;
}
.lw-soja-heart {
  position: fixed;
  z-index: 40;
  color: #ef5b93;
  font-size: 20px;
  pointer-events: none;
  animation: lw-heart-up 1.6s ease-out both;
}
@keyframes lw-heart-up {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0.6);
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-60px) scale(1.2);
  }
}
body.lw-no-soja .lw-soja-treat,
body.lw-no-soja .lw-soja-mood {
  display: none;
}
/* ab 8.31.1: Kleiderschrank-Knopf unter dem Napf */
.lw-soja-wardrobe {
  position: absolute;
  right: 74px;
  top: 72px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #ef5b93;
  box-shadow: 0 4px 0 #c43d73, 0 6px 14px #1f2d4d26;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.lw-soja-wardrobe:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #c43d73;
}
.lw-soja-wardrobe:focus-visible {
  outline: 4px solid #3aa7f0;
  outline-offset: 2px;
}
body.lw-no-soja .lw-soja-wardrobe,
body:has(.lw-craft) .lw-soja-wardrobe {
  display: none;
}
.lw-wardrobe-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 16px;
  background: #1f2d4d99;
}
.lw-wardrobe-modal[hidden] {
  display: none;
}
.lw-wardrobe-modal .lw-craft-panel {
  max-height: calc(100dvh - 32px);
  box-shadow: 0 20px 60px #1f2d4d55;
}
.lw-craft-hint {
  margin: 0;
  max-width: 420px;
  text-align: center;
  font: 500 14px/1.3 var(--lw-font, Fredoka, sans-serif);
  color: #5d4a2a;
}
@media (max-width: 900px) {
  .lw-soja-treat {
    right: 64px;
    top: 4px;
  }
  .lw-soja-mood {
    right: 8px;
    top: 44px;
  }
  .lw-soja-wardrobe {
    right: 66px;
    top: 58px;
    width: 40px;
    height: 40px;
    font-size: 20px;
  }
}
@media (max-width: 600px) {
  .lw-soja-treat {
    right: 64px;
    top: -30px;
    width: 38px;
    height: 38px;
  }
  .lw-soja-wardrobe {
    right: 108px;
    top: -30px;
    width: 36px;
    height: 36px;
    font-size: 18px;
  }
  .lw-soja-treat .lw-treat-ico {
    font-size: 19px;
  }
  .lw-soja-mood {
    right: 12px;
    top: 30px;
    font-size: 11px;
  }
  body.lw:not(.lw-no-soja) .category {
    max-width: calc(100% - 196px);
  }
  .lw-soja-zzz {
    right: -6px;
    top: -14px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .lw-soja.asleep svg,
  .lw-soja.sleepy svg,
  .lw-soja-zzz i,
  .lw-soja.stretch svg,
  .lw-soja.wake svg {
    animation: none !important;
  }
  .lw-soja-zzz i {
    opacity: 1;
  }
}

/* ---------- Tierwelten mit gezeichneten Lebensräumen (ab 8.14.0) ---------- */
body.lw .lw-habitat {
  display: grid;
  gap: 16px;
  width: 100%;
}
body.lw .lw-scenes {
  display: grid;
  grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
  gap: 12px;
}
body.lw .lw-scenes.n3 {
  --cols: 3;
}
body.lw .lw-scenes.n4 {
  --cols: 4;
}
.lw-scene {
  position: relative;
  min-height: 170px;
  padding: 40px 8px 10px;
  overflow: hidden;
  border: 4px solid #fff;
  border-radius: 24px;
  /* zwei flache Flächen: Himmel und Boden bzw. Wasser */
  background: linear-gradient(to bottom, var(--sky) 0 var(--horizon), var(--ground) var(--horizon) 100%);
  box-shadow: 0 5px 0 #1f2d4d1f, 0 10px 22px #1f2d4d14;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.lw-scene-eis {
  border-color: #cfe6f7;
}
.lw-scene-label {
  position: absolute;
  left: 10px;
  top: 8px;
  z-index: 2;
  padding: 3px 10px;
  border-radius: 999px;
  background: #ffffffe0;
  color: #1f2d4d;
  font-family: var(--lw-font, Fredoka, sans-serif);
  font-size: 14px;
  font-weight: 600;
}
.lw-scene-deco span {
  position: absolute;
  z-index: 0;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}
.lw-scene-deco .d0 {
  right: 8px;
  bottom: 8px;
  font-size: 40px;
  opacity: 0.9;
}
.lw-scene-deco .d1 {
  left: 10px;
  bottom: 6px;
  font-size: 26px;
  opacity: 0.8;
}
.lw-scene-deco .d2 {
  right: 12px;
  top: 8px;
  font-size: 22px;
  opacity: 0.75;
}
.lw-scene-deco .d3 {
  left: 38%;
  top: 6px;
  font-size: 22px;
  opacity: 0.7;
}
.lw-scene-deco .d4 {
  left: 30%;
  bottom: 4px;
  font-size: 20px;
  opacity: 0.7;
}
/* sanft geschwungene Horizontlinie statt gerader Kante */
.lw-scene::before {
  content: "";
  position: absolute;
  left: -10%;
  right: -10%;
  top: calc(var(--horizon) - 12px);
  height: 26px;
  border-radius: 50%;
  background: var(--ground);
  z-index: 0;
}
.lw-scene-animals {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: 6px;
  min-height: 110px;
}
/* Tiere */
body.lw .lw-animal {
  display: grid;
  justify-items: center;
  gap: 2px;
  width: 92px;
  padding: 8px 6px 7px;
  border: 3px solid #fff;
  border-radius: 20px;
  background: #fffdf8;
  color: #1f2d4d;
  box-shadow: 0 4px 0 #d9ccb2;
  font-family: var(--lw-font, Fredoka, sans-serif);
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.lw-animal-ico {
  font-size: 44px;
  line-height: 1.05;
}
.lw-animal-name {
  font-size: 14px;
  font-weight: 600;
}
body.lw .lw-animal.selected {
  transform: translateY(-6px) scale(1.06);
  border-color: #ffcf3f;
  box-shadow: 0 8px 0 #e0a800, 0 0 0 4px #ffcf3f66;
}
body.lw .lw-animal.dragging {
  opacity: 0.35;
}
body.lw .lw-animal.placed {
  width: auto;
  padding: 0 2px;
  border: 0;
  background: none;
  box-shadow: none;
  cursor: default;
  animation: lw-animal-land 0.5s cubic-bezier(0.3, 1.6, 0.5, 1);
}
body.lw .lw-animal.placed .lw-animal-name {
  display: none;
}
body.lw .lw-animal.placed .lw-animal-ico {
  font-size: 46px;
  filter: drop-shadow(0 3px 0 #1f2d4d22);
}
body.lw .lw-animal.nope {
  animation: shake 0.4s;
}
.lw-animal-ghost {
  position: fixed;
  z-index: 60;
  margin: -44px 0 0 -46px;
  pointer-events: none;
  transform: rotate(-6deg) scale(1.08);
  box-shadow: 0 14px 26px #1f2d4d40 !important;
}
.lw-animal-tray {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  padding: 12px;
  border: 3px dashed #d7e7f4;
  border-radius: 22px;
  background: #fafcfe;
}
.lw-animal-tray:empty {
  display: none;
}
/* Rückmeldungen */
.lw-habitat.choosing .lw-scene {
  box-shadow: 0 5px 0 #1f2d4d1f, 0 0 0 4px #ffcf3f99;
}
.lw-scene.over {
  transform: scale(1.03);
  box-shadow: 0 5px 0 #1f2d4d1f, 0 0 0 5px #ffcf3f !important;
}
.lw-scene.yay {
  animation: lw-scene-yay 0.5s ease;
}
.lw-scene.nope {
  animation: shake 0.4s;
}
@keyframes lw-scene-yay {
  40% {
    transform: scale(1.04);
    box-shadow: 0 5px 0 #3f9427, 0 0 0 5px #5fbf3f;
  }
}
@keyframes lw-animal-land {
  0% {
    transform: translateY(-24px) scale(0.6);
  }
}
/* „Wer wohnt nicht hier?“ – eine große Welt */
.lw-habitat.odd .lw-scene.big {
  min-height: 250px;
  padding-top: 54px;
  cursor: default;
}
.lw-habitat.odd .lw-scene.big .lw-scene-label {
  font-size: 17px;
}
.lw-habitat.odd .lw-scene.big .d0 {
  font-size: 64px;
}
.lw-habitat.odd .lw-scene-animals {
  gap: 12px;
}
body.lw .lw-animal.belongs {
  opacity: 0.55;
}
body.lw .lw-animal.hop-away {
  animation: lw-hop-away 0.9s ease-in forwards;
}
@keyframes lw-hop-away {
  30% {
    transform: translateY(-30px) rotate(-8deg);
  }
  100% {
    transform: translate(160px, -120px) rotate(20deg) scale(0.4);
    opacity: 0;
  }
}
/* „Wo wohnt …?“ */
.lw-habitat.pick .lw-scene {
  min-height: 150px;
}
.lw-habitat.pick .lw-scene:hover {
  transform: translateY(-3px);
}
@media (max-width: 700px) {
  body.lw .lw-scenes.n3,
  body.lw .lw-scenes.n4 {
    --cols: 2;
  }
  .lw-scene {
    min-height: 140px;
    padding-top: 36px;
  }
  .lw-scene-animals {
    min-height: 90px;
  }
  body.lw .lw-animal {
    width: 78px;
  }
  .lw-animal-ico {
    font-size: 36px;
  }
  body.lw .lw-animal.placed .lw-animal-ico {
    font-size: 36px;
  }
  .lw-scene-label {
    font-size: 12px;
  }
  .lw-scene-deco .d0 {
    font-size: 30px;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.lw .lw-animal.placed,
  .lw-scene.yay,
  body.lw .lw-animal.hop-away {
    animation: none;
  }
}
/* Sprechblase der Katze liegt über dem Napf */
.lw-soja {
  z-index: 4;
}

/* ---------- Soja satt, überfüttert und kurz auf der Wiese (ab 8.14.1) ---------- */
.lw-soja.full .lw-body,
.lw-soja.overfed .lw-body {
  transform: scale(1.1, 1.04);
}
.lw-soja.overfed .lw-cheek {
  opacity: 1;
  transform: scale(1.18);
  transform-box: fill-box;
  transform-origin: center;
}
.lw-soja.overfed svg {
  animation: lw-cat-uff 0.7s ease-in-out 2;
}
@keyframes lw-cat-uff {
  50% {
    transform: scale(1.06, 0.95);
  }
}
.lw-soja.away {
  visibility: hidden;
}
.lw-soja-walker {
  position: fixed;
  z-index: 30;
  pointer-events: none;
  transform-origin: 50% 100%;
  transition: transform 2.6s ease-in-out;
}
.lw-soja-walker svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.lw-soja-walker .lw-lids,
.lw-soja-walker .lw-lids-half,
.lw-soja-walker .lw-eyes-happy,
.lw-soja-walker .lw-eyes-sleep,
.lw-soja-walker .lw-yawn,
.lw-soja-walker .lw-tongue {
  display: none;
}
.lw-soja-walker.walking svg {
  animation: lw-cat-walk 0.32s ease-in-out infinite;
}
.lw-soja-walker.walking .lw-tail {
  transform-origin: 88px 110px;
  animation: lw-tail 0.32s ease-in-out infinite;
}
@keyframes lw-cat-walk {
  50% {
    transform: translateY(-5px) rotate(3deg);
  }
}
/* ab 8.31.1: Unter Wasser schwimmt Soja – nach vorn geneigt, sanftes Auf und Ab, kräftiger Schwanzschlag */
.lw-soja-walker.swimming.walking svg {
  transform-origin: 50% 55%;
  animation: lw-cat-swim 1.15s ease-in-out infinite;
}
.lw-soja-walker.swimming.walking .lw-tail {
  transform-origin: 88px 110px;
  animation: lw-tail-swim 0.58s ease-in-out infinite;
}
.lw-soja-walker.swimming.walking .lw-ear-l,
.lw-soja-walker.swimming.walking .lw-ear-r {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: lw-ear-swim 1.15s ease-in-out infinite;
}
.lw-soja-walker.swimming.hiding svg {
  animation: lw-cat-tread 1.6s ease-in-out infinite;
}
@keyframes lw-cat-swim {
  0%,
  100% {
    transform: translate(0, 4px) rotate(calc(var(--swim-dir, 1) * 12deg)) scaleX(1);
  }
  30% {
    transform: translate(calc(var(--swim-dir, 1) * 3px), -8px) rotate(calc(var(--swim-dir, 1) * 20deg)) scaleX(1.04);
  }
  60% {
    transform: translate(0, -12px) rotate(calc(var(--swim-dir, 1) * 15deg)) scaleX(0.97);
  }
}
@keyframes lw-tail-swim {
  0%,
  100% {
    transform: rotate(-26deg);
  }
  50% {
    transform: rotate(22deg);
  }
}
@keyframes lw-ear-swim {
  50% {
    transform: rotate(-10deg);
  }
}
@keyframes lw-cat-tread {
  50% {
    transform: translateY(-6px);
  }
}
.lw-swim-bubble {
  position: fixed;
  z-index: 29;
  pointer-events: none;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #ffffff40;
  animation: lw-swim-bubble 1.8s ease-out forwards;
}
@keyframes lw-swim-bubble {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.6);
  }
  15% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
    transform: translate(10px, -90px) scale(1.15);
  }
}
/* Unter Wasser schwebt Soja auch in Ruhe sanft auf und ab */
body.lw-gear-dive .lw-soja:not(.away):not(.stroll) {
  animation: lw-soja-float 3.4s ease-in-out infinite;
}
body.lw-gear-dive .lw-soja.stroll svg {
  transform-origin: 50% 55%;
  animation: lw-cat-swim 1.15s ease-in-out 3;
}
body.lw-gear-dive .lw-soja.stroll .lw-tail {
  animation: lw-tail-swim 0.58s ease-in-out 6;
}
@keyframes lw-soja-float {
  0%,
  100% {
    translate: 0 0;
    rotate: 0deg;
  }
  50% {
    translate: 0 -7px;
    rotate: -3deg;
  }
}
.lw-soja-bush {
  position: fixed;
  z-index: 31;
  pointer-events: none;
  font-size: 58px;
  line-height: 1;
}
.lw-soja-bush .dots {
  position: absolute;
  left: 50%;
  top: -18px;
  padding: 0 8px;
  border-radius: 12px;
  background: #fff;
  color: #1f2d4d;
  font-family: var(--lw-font, Fredoka, sans-serif);
  font-size: 20px;
  font-weight: 700;
  opacity: 0;
  transform: translateX(-50%);
  transition: opacity 0.3s ease;
}
.lw-soja-bush.busy .dots {
  opacity: 1;
}
.lw-soja-bush.busy .b {
  display: inline-block;
  animation: lw-bush-wiggle 0.6s ease-in-out infinite;
}
.lw-soja-bush.done .b {
  display: inline-block;
  animation: lw-bush-scratch 0.25s ease-in-out 4;
}
@keyframes lw-bush-wiggle {
  50% {
    transform: rotate(-4deg) scale(1.03);
  }
}
@keyframes lw-bush-scratch {
  50% {
    transform: translateX(4px);
  }
}
.lw-soja-treat:disabled {
  opacity: 0.5;
  cursor: default;
}
@media (prefers-reduced-motion: reduce) {
  .lw-soja-walker,
  .lw-soja-walker.walking svg,
  .lw-soja-walker.swimming svg,
  .lw-soja-walker .lw-tail,
  body.lw-gear-dive .lw-soja,
  .lw-swim-bubble,
  .lw-soja-bush .b {
    transition: none;
    animation: none !important;
  }
}

/* ---------- Farbenmischen (ab 8.14.1) ---------- */
body.lw .lw-colormix {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "goal bowl" "pots pots" "empty empty";
  align-items: center;
  justify-items: center;
  gap: 16px 22px;
  width: min(640px, 100%);
  margin: 0 auto;
}
.lw-mix-goal {
  grid-area: goal;
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 10px 14px;
  border: 3px dashed #d7e7f4;
  border-radius: 22px;
  background: #fff;
}
.lw-mix-splash svg {
  display: block;
  width: 84px;
  height: 84px;
}
.lw-mix-goal-label {
  font-family: var(--lw-font, Fredoka, sans-serif);
  font-weight: 700;
  color: #1f2d4d;
}
.lw-mix-bowl {
  grid-area: bowl;
  position: relative;
  width: min(260px, 60vw);
  height: 120px;
  border: 5px solid #1f2d4d;
  border-top-width: 3px;
  border-radius: 20px 20px 130px 130px;
  background: #f4f7fb;
  overflow: hidden;
  box-shadow: 0 6px 0 #1f2d4d22;
}
.lw-mix-paint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0;
  transition: height 0.6s ease, background 0.6s ease;
}
.lw-mix-paint.fill1 {
  height: 45%;
}
.lw-mix-paint.swirl {
  left: -30%;
  right: -30%;
  height: 170%;
  bottom: -60%;
  border-radius: 50%;
  animation: lw-swirl 0.9s linear;
}
.lw-mix-paint.fill2 {
  height: 80%;
}
@keyframes lw-swirl {
  to {
    transform: rotate(360deg);
  }
}
.lw-mix-bowl-label {
  position: absolute;
  left: 50%;
  top: 8px;
  transform: translateX(-50%);
  padding: 2px 10px;
  border-radius: 999px;
  background: #ffffffd9;
  color: #1f2d4d;
  font-family: var(--lw-font, Fredoka, sans-serif);
  font-weight: 700;
  font-size: 15px;
}
.lw-mix-pots {
  grid-area: pots;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
body.lw .lw-mix-pot {
  display: grid;
  justify-items: center;
  width: 100px;
  padding: 8px 6px;
  border: 3px solid #fff;
  border-radius: 20px;
  background: #fffdf8;
  box-shadow: 0 4px 0 #d9ccb2;
  font-family: var(--lw-font, Fredoka, sans-serif);
  font-weight: 600;
  color: #1f2d4d;
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.2s ease;
}
.lw-mix-pot svg {
  width: 70px;
  height: 70px;
}
body.lw .lw-mix-pot.used {
  opacity: 0.45;
}
body.lw .lw-mix-pot.pour {
  animation: lw-pour 0.7s ease;
}
@keyframes lw-pour {
  40% {
    transform: translateY(-14px) rotate(-28deg);
  }
}
body.lw .lw-mix-empty {
  grid-area: empty;
  padding: 10px 16px;
  border: 0;
  border-radius: 14px;
  background: #ecf6fd;
  color: #1f2d4d;
  font-weight: 700;
}
.lw-colormix.done .lw-mix-bowl {
  border-color: #3f9427;
  box-shadow: 0 6px 0 #3f9427, 0 0 0 6px #5fbf3f55;
}
/* Vorhersage */
body.lw .lw-colormix.predict {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: none;
}
.lw-mix-equation {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--lw-font, Fredoka, sans-serif);
  font-size: 36px;
  color: #1f2d4d;
}
.lw-mix-q {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border: 3px dashed #b9c7d8;
  border-radius: 50%;
  font-size: 40px;
  font-weight: 700;
}
.lw-mix-choices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
}
body.lw .lw-mix-choice {
  display: grid;
  justify-items: center;
  gap: 4px;
}
.lw-mix-choice-label {
  font-weight: 700;
}
@media (max-width: 600px) {
  body.lw .lw-colormix {
    grid-template-columns: 1fr;
    grid-template-areas: "goal" "bowl" "pots" "empty";
  }
  .lw-mix-splash svg {
    width: 64px;
    height: 64px;
  }
  body.lw .lw-mix-pot {
    width: 76px;
  }
  .lw-mix-pot svg {
    width: 54px;
    height: 54px;
  }
  .lw-mix-q {
    width: 64px;
    height: 64px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .lw-mix-paint.swirl,
  body.lw .lw-mix-pot.pour {
    animation: none;
  }
}

/* ---------- Vorlese-Knopf in Karte, Album und Kinder-Dialogen (ab 8.14.1) ---------- */
.lw-say-btn {
  position: absolute;
  right: 14px;
  top: 14px;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #ffcf3f;
  box-shadow: 0 4px 0 #e0a800, 0 6px 14px #1f2d4d26;
  font-size: 24px;
  cursor: pointer;
}
.lw-say-btn:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #e0a800;
}
.modal-box:has(> .lw-say-btn) {
  position: relative;
}
.modal-box:has(> .lw-say-btn) > h2 {
  padding-right: 56px;
  padding-left: 56px;
}
@media (max-width: 600px) {
  .lw-say-btn {
    width: 44px;
    height: 44px;
    right: 10px;
    top: 10px;
    font-size: 20px;
  }
}

/* ======================= Neue Spiele (ab 8.15.0) ======================= */
/* Silben-Trommel */
body.lw .lw-drum-game {
  display: grid;
  justify-items: center;
  gap: 14px;
}
body.lw .lw-drum-listen {
  padding: 10px 22px;
  border: 3px solid #fff;
  border-radius: 999px;
  background: #3aa7f0;
  color: #fff;
  box-shadow: 0 4px 0 #1f7fc4;
  font-family: var(--lw-font, Fredoka, sans-serif);
  font-size: 22px;
  font-weight: 600;
}
body.lw .lw-drum {
  width: min(240px, 62vw);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.lw-drum svg {
  display: block;
  width: 100%;
  height: auto;
}
.lw-drum.hit svg {
  animation: lw-drum-hit 0.22s ease;
}
@keyframes lw-drum-hit {
  40% {
    transform: scale(0.94, 0.88) translateY(6px);
  }
}
.lw-drum-dots {
  display: flex;
  gap: 10px;
  min-height: 30px;
}
.lw-drum-dots span {
  width: 26px;
  height: 26px;
  border: 3px dashed #c7d4e3;
  border-radius: 50%;
}
.lw-drum-dots span.on {
  border: 3px solid #fff;
  background: #ffcf3f;
  box-shadow: 0 3px 0 #e0a800;
  animation: lw-animal-land 0.3s ease;
}
.lw-drum-tools {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
body.lw .lw-drum-undo {
  padding: 10px 16px;
  border: 0;
  border-radius: 14px;
  background: #ecf6fd;
  font-weight: 700;
}
.lw-drum-split {
  display: flex;
  gap: 8px;
}
.lw-drum-split span {
  padding: 6px 14px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 3px 0 #d9ccb2;
  font-family: var(--lw-font, Fredoka, sans-serif);
  font-size: 26px;
  font-weight: 600;
  animation: lw-animal-land 0.4s ease both;
}
.lw-drum-split span:nth-child(2) {
  animation-delay: 0.15s;
}
.lw-drum-split span:nth-child(3) {
  animation-delay: 0.3s;
}
.lw-drum-split span:nth-child(4) {
  animation-delay: 0.45s;
}
.lw-drum-split span:nth-child(5) {
  animation-delay: 0.6s;
}
/* Gesichter-Werkstatt */
body.lw .lw-face-game {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "face pick" "check check";
  gap: 16px 22px;
  align-items: center;
  justify-items: center;
  width: min(640px, 100%);
  margin: 0 auto;
}
.lw-face {
  grid-area: face;
  width: min(210px, 50vw);
}
.lw-face svg {
  display: block;
  width: 100%;
  height: auto;
}
.lw-face.done svg {
  animation: lw-jump 0.7s cubic-bezier(0.3, 1.5, 0.5, 1) 2;
}
.lw-face-pickers {
  grid-area: pick;
  display: grid;
  gap: 12px;
}
.lw-face-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.lw-face-row-label {
  width: 100%;
  font-weight: 700;
  color: #1f2d4d;
}
body.lw .lw-face-part {
  width: 76px;
  height: 52px;
  padding: 6px;
  border: 3px solid #fff;
  border-radius: 16px;
  background: #fffdf8;
  box-shadow: 0 4px 0 #d9ccb2;
}
body.lw .lw-face-part.on {
  border-color: #ffcf3f;
  box-shadow: 0 4px 0 #e0a800, 0 0 0 4px #ffcf3f55;
}
.lw-face-part svg {
  width: 100%;
  height: 100%;
}
body.lw .lw-face-game > .lw-check,
body.lw .lw-face-game > button:last-child {
  grid-area: check;
}
/* Schattenrätsel */
body.lw .lw-shadow-game {
  display: grid;
  justify-items: center;
  gap: 16px;
  width: 100%;
}
.lw-shadow-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: min(260px, 70vw);
  height: 180px;
  border: 4px solid #fff;
  border-radius: 26px;
  background: #fff4c7;
  box-shadow: 0 5px 0 #e8d79a, inset 0 -30px 0 #f5e3a0;
  overflow: hidden;
}
.lw-shadow {
  font-size: 120px;
  line-height: 1;
  filter: brightness(0) opacity(0.82);
  transition: filter 0.6s ease;
}
.lw-shadow-stage.revealed .lw-shadow {
  filter: none;
}
.lw-shadow-lamp {
  position: absolute;
  left: 10px;
  top: 8px;
  font-size: 28px;
  transform: rotate(-30deg);
}
.lw-shadow-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 12px;
  justify-self: stretch;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}
.lw-shadow-pic {
  font-size: 56px;
  line-height: 1.1;
}
/* Fische für Soja */
body.lw .lw-feed-game {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-areas: "cat bowl" "pond pond" "check check";
  gap: 14px 24px;
  justify-content: center;
  align-items: end;
  justify-items: center;
}
.lw-feed-cat {
  grid-area: cat;
  position: relative;
  width: 130px;
}
.lw-feed-cat svg {
  width: 100%;
  height: auto;
  overflow: visible;
}
.lw-feed-cat .lw-eyes-happy,
.lw-feed-cat .lw-lids {
  display: none;
}
.lw-feed-cat.munch .lw-eyes-open {
  display: none;
}
.lw-feed-cat.munch .lw-eyes-happy {
  display: inline;
}
.lw-feed-cat.munch svg {
  animation: lw-jump 0.7s cubic-bezier(0.3, 1.5, 0.5, 1) 2;
}
.lw-feed-bubble {
  z-index: 3;
  position: absolute;
  left: 70%;
  top: -18px;
  padding: 6px 10px;
  border-radius: 16px 16px 16px 4px;
  background: #fff;
  box-shadow: 0 3px 0 #1f2d4d1a;
  font-size: 18px;
  white-space: nowrap;
}
.lw-feed-bowl-wrap {
  grid-area: bowl;
  position: relative;
}
.lw-feed-bowl {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-end;
  justify-content: center;
  gap: 2px;
  width: 230px;
  min-height: 86px;
  padding: 10px 14px 14px;
  border: 5px solid #1f2d4d;
  border-top: 0;
  border-radius: 0 0 90px 90px;
  background: #ffcf3f;
  box-shadow: 0 6px 0 #1f2d4d22;
}
.lw-feed-bowl.eaten .lw-feed-fish {
  animation: lw-hop-away 0.8s ease-in forwards;
}
.lw-feed-count {
  position: absolute;
  right: -14px;
  top: -14px;
  display: grid;
  place-items: center;
  min-width: 42px;
  height: 42px;
  border: 3px solid #fff;
  border-radius: 21px;
  background: #ef5b93;
  color: #fff;
  font-family: var(--lw-font, Fredoka, sans-serif);
  font-size: 22px;
  font-weight: 700;
}
.lw-feed-pond-wrap {
  grid-area: pond;
  width: min(560px, 100%);
}
.lw-feed-pond {
  position: relative;
  height: 170px;
  border: 4px solid #fff;
  border-radius: 50% / 38%;
  background: #3aa7f0;
  box-shadow: inset 0 -18px 0 #2f93d6, 0 5px 0 #1f2d4d1f;
}
body.lw .lw-feed-fish {
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 38px;
  line-height: 1;
  cursor: pointer;
}
.lw-feed-pond .lw-feed-fish {
  position: absolute;
  left: var(--x);
  top: var(--y);
  margin-left: -26px;
  animation: lw-fish-swim 5s ease-in-out var(--d) infinite;
}
body.lw .lw-feed-bowl .lw-feed-fish {
  width: 34px;
  height: 34px;
  font-size: 27px;
  animation: lw-animal-land 0.35s cubic-bezier(0.3, 1.6, 0.5, 1);
}
/* Fisch schaut nach links: erst nach links schwimmen, umdrehen, zurück nach rechts (ab 8.19.0) */
@keyframes lw-fish-swim {
  0% {
    transform: translate(0, 0) scaleX(1);
  }
  22% {
    transform: translate(-9px, -3px) scaleX(1) rotate(-4deg);
  }
  44% {
    transform: translate(-16px, 0) scaleX(1);
  }
  50% {
    transform: translate(-16px, 0) scaleX(-1);
  }
  72% {
    transform: translate(-7px, -3px) scaleX(-1) rotate(-4deg);
  }
  94% {
    transform: translate(0, 0) scaleX(-1);
  }
  100% {
    transform: translate(0, 0) scaleX(1);
  }
}
body.lw .lw-feed-game > button:last-child {
  grid-area: check;
}
/* Antworten erscheinen nacheinander (lebendiger); Klasse wird nach der Animation wieder entfernt */
body.lw #answers > .answer.lw-in {
  animation: lw-answer-in 0.38s cubic-bezier(0.3, 1.4, 0.5, 1) both;
  animation-delay: var(--in-delay, 0s);
}
@keyframes lw-answer-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.94);
  }
}
/* Serien-Feier */
.lw-streak {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: grid;
  place-items: center;
  pointer-events: none;
  overflow: hidden;
}
.lw-streak-card {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 18px 34px;
  border: 5px solid #fff;
  border-radius: 30px;
  background: #1f2d4d;
  color: #fff;
  box-shadow: 0 10px 0 #0f1a33, 0 20px 40px #1f2d4d55;
  font-family: var(--lw-font, Fredoka, sans-serif);
  animation: lw-streak-in 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) both;
}
.lw-streak-num {
  font-size: 72px;
  font-weight: 700;
  line-height: 1;
  color: #ffcf3f;
}
.lw-streak-card b {
  font-size: 24px;
  font-weight: 600;
}
.lw-streak-stars {
  font-size: 28px;
}
.lw-streak.leave .lw-streak-card {
  transition: opacity 0.5s ease, transform 0.5s ease;
  opacity: 0;
  transform: scale(0.8);
}
.lw-streak-bit {
  position: absolute;
  left: var(--x);
  top: -20px;
  width: 12px;
  height: 18px;
  border-radius: 3px;
  animation: lw-streak-fall 2.2s ease-in var(--d) forwards;
}
@keyframes lw-streak-in {
  from {
    opacity: 0;
    transform: scale(0.4) rotate(-8deg);
  }
}
@keyframes lw-streak-fall {
  to {
    transform: translateY(110vh) rotate(var(--r));
  }
}
@media (max-width: 600px) {
  body.lw .lw-face-game {
    grid-template-columns: 1fr;
    grid-template-areas: "face" "pick" "check";
  }
  body.lw .lw-feed-game {
    grid-template-columns: auto auto;
    gap: 10px 14px;
  }
  .lw-feed-cat {
    width: 100px;
  }
  .lw-feed-bowl {
    width: 190px;
  }
  body.lw .lw-feed-bowl .lw-feed-fish {
    width: 29px;
    height: 29px;
    font-size: 23px;
  }
  .lw-feed-pond {
    height: 150px;
  }
  .lw-shadow {
    font-size: 96px;
  }
  .lw-streak-num {
    font-size: 56px;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.lw #answers > .answer.lw-in,
  .lw-feed-pond .lw-feed-fish,
  .lw-drum.hit svg {
    animation: none;
  }
}

/* ---------- Soja: Streicheln, Wollknäuel, Kunststück (ab 8.16.0) ---------- */
.lw-soja {
  touch-action: none;
}
.lw-soja.petted .lw-eyes-open {
  display: none;
}
.lw-soja.petted .lw-eyes-happy {
  display: inline;
}
.lw-soja.petted svg {
  animation: lw-purr 0.12s linear infinite;
}
.lw-soja.petted .lw-head {
  transform: rotate(8deg);
}
@keyframes lw-purr {
  50% {
    transform: translateX(0.6px) scaleY(0.995);
  }
}
.lw-soja.pounce svg {
  animation: lw-pounce 1.2s cubic-bezier(0.3, 1.4, 0.5, 1);
}
.lw-soja.spin svg {
  animation: lw-spin 1.1s ease-in-out;
}
@keyframes lw-pounce {
  30% {
    transform: translate(-30px, -28px) rotate(-18deg);
  }
  60% {
    transform: translate(-40px, 4px) rotate(8deg) scale(1.05, 0.92);
  }
}
@keyframes lw-spin {
  50% {
    transform: translateY(-16px) rotate(180deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.lw-yarn {
  position: absolute;
  right: 130px;
  top: -18px;
  z-index: 4;
  width: 50px;
  height: 50px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 40px;
  line-height: 1;
  cursor: pointer;
  animation: lw-yarn-bounce 1s ease-in-out infinite;
}
.lw-yarn.roll {
  animation: lw-yarn-roll 0.9s ease-in forwards;
}
@keyframes lw-yarn-bounce {
  50% {
    transform: translateY(-8px) rotate(20deg);
  }
}
@keyframes lw-yarn-roll {
  to {
    transform: translateX(90px) rotate(540deg) scale(0.6);
    opacity: 0;
  }
}
@media (max-width: 600px) {
  .lw-yarn {
    right: 108px;
    top: -34px;
    font-size: 32px;
  }
}

/* ---------- Memory mit Wendekarten (ab 8.16.0) ---------- */
body.lw .lw-memory {
  display: grid;
  justify-items: center;
  gap: 12px;
  width: 100%;
}
.lw-mem-status {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--lw-font, Fredoka, sans-serif);
}
.lw-mem-pairs i {
  font-style: normal;
  font-size: 22px;
  color: #d5dde7;
  transition: color 0.3s ease, transform 0.3s ease;
}
.lw-mem-pairs i.on {
  color: #ffcf3f;
  text-shadow: 0 2px 0 #e0a800;
  display: inline-block;
  transform: scale(1.15);
}
.lw-mem-moves {
  padding: 3px 12px;
  border-radius: 999px;
  background: #eef3f8;
  color: #4a5878;
  font-weight: 600;
}
.lw-mem-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
  gap: 12px;
  width: min(620px, 100%);
}
.lw-mem-grid.n6 {
  --cols: 3;
  width: min(460px, 100%);
}
body.lw .lw-mem-card {
  aspect-ratio: 3 / 4;
  padding: 0;
  border: 0;
  background: none;
  perspective: 700px;
  cursor: pointer;
  animation: lw-mem-deal 0.45s cubic-bezier(0.3, 1.4, 0.5, 1) both;
  animation-delay: calc(var(--i) * 45ms);
  -webkit-tap-highlight-color: transparent;
}
@keyframes lw-mem-deal {
  from {
    opacity: 0;
    transform: translateY(-30px) rotate(-8deg) scale(0.8);
  }
}
.lw-mem-inner {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.45s cubic-bezier(0.3, 1.3, 0.5, 1);
}
.lw-mem-card.open .lw-mem-inner,
.lw-mem-card.found .lw-mem-inner {
  transform: rotateY(180deg);
}
.lw-mem-back,
.lw-mem-front {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 4px solid #fff;
  border-radius: 18px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: 0 5px 0 #1f2d4d26, 0 8px 16px #1f2d4d1a;
}
.lw-mem-back {
  background:
    radial-gradient(circle at 25% 25%, #ffffff38 0 12%, transparent 13%),
    radial-gradient(circle at 75% 70%, #ffffff2e 0 10%, transparent 11%),
    radial-gradient(circle at 70% 20%, #ffffff24 0 7%, transparent 8%),
    var(--back);
}
.lw-mem-motif {
  display: grid;
  place-items: center;
  width: 46%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #ffffffd9;
  font-size: clamp(18px, 4.5vw, 30px);
}
.lw-mem-front {
  transform: rotateY(180deg);
  background: #fffdf8;
}
.lw-mem-pic {
  font-size: clamp(34px, 8vw, 58px);
  line-height: 1;
}
.lw-mem-pic.shadow {
  filter: brightness(0) opacity(0.85);
}
.lw-mem-number {
  font-family: var(--lw-font, Fredoka, sans-serif);
  font-size: clamp(38px, 9vw, 64px);
  color: #1f2d4d;
}
.lw-mem-dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
  width: 78%;
}
.lw-mem-dots i {
  width: clamp(10px, 2.6vw, 16px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #ef5b93;
}
.lw-mem-card:hover:not(.open):not(.found) .lw-mem-inner {
  transform: translateY(-3px) rotate(-1deg);
}
.lw-mem-card.found .lw-mem-front {
  border-color: #5fbf3f;
  box-shadow: 0 5px 0 #3f9427, 0 0 0 4px #5fbf3f55;
  animation: lw-mem-found 0.6s ease;
}
@keyframes lw-mem-found {
  40% {
    transform: rotateY(180deg) scale(1.1);
  }
}
.lw-mem-card.miss .lw-mem-front {
  animation: lw-mem-miss 0.4s ease;
  border-color: #ff6f4f;
}
@keyframes lw-mem-miss {
  25% {
    transform: rotateY(180deg) translateX(-5px);
  }
  75% {
    transform: rotateY(180deg) translateX(5px);
  }
}
.lw-memory.done .lw-mem-card {
  animation: lw-mem-wave 0.6s ease both;
  animation-delay: calc(var(--i) * 60ms);
}
@keyframes lw-mem-wave {
  50% {
    transform: translateY(-14px) rotate(4deg);
  }
}
@media (max-width: 600px) {
  .lw-mem-grid {
    gap: 8px;
  }
  .lw-mem-back,
  .lw-mem-front {
    border-width: 3px;
    border-radius: 14px;
  }
}

/* ---------- Rätsel-Rallye (ab 8.16.0) ---------- */
body.lw .lw-rally {
  display: grid;
  gap: 16px;
  width: 100%;
}
.lw-rally-track {
  position: relative;
  height: 120px;
  margin: 0 8px;
  border-radius: 24px;
  background: linear-gradient(to bottom, #cdeeff 0 55%, #9fdc7c 55% 100%);
  border: 4px solid #fff;
  box-shadow: 0 5px 0 #1f2d4d1f;
  overflow: hidden;
}
.lw-rally-track::after {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  top: 74%;
  border-top: 6px dotted #fff;
}
.lw-rally-flag {
  position: absolute;
  top: 44%;
  z-index: 1;
  transform: translateX(-50%);
}
.lw-rally-flag b {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #b9c7d8;
  color: #fff;
  font-family: var(--lw-font, Fredoka, sans-serif);
}
.lw-rally-flag.done b {
  background: #5fbf3f;
  animation: lw-animal-land 0.4s ease;
}
.lw-rally-chest {
  position: absolute;
  right: 3%;
  top: 34%;
  font-size: 44px;
  z-index: 1;
}
.lw-rally-chest.open {
  animation: lw-streak-in 0.6s cubic-bezier(0.3, 1.6, 0.5, 1);
  font-size: 54px;
}
.lw-rally-runner {
  position: absolute;
  left: 0;
  top: 12%;
  z-index: 2;
  width: 76px;
  margin-left: -8px;
  transition: left 0.9s cubic-bezier(0.45, 0.05, 0.3, 1);
}
.lw-rally-runner svg {
  width: 100%;
  height: auto;
  overflow: visible;
}
.lw-rally-runner .lw-eyes-happy,
.lw-rally-runner .lw-lids {
  display: none;
}
.lw-rally-runner.hop svg {
  animation: lw-cat-walk 0.3s ease-in-out 3;
}
.lw-rally-card {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 16px;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 5px 0 #d9ccb2;
}
.lw-rally-card.in {
  animation: lw-answer-in 0.45s cubic-bezier(0.3, 1.4, 0.5, 1);
}
.lw-rally-card h3 {
  margin: 0;
  font-family: var(--lw-font, Fredoka, sans-serif);
  font-size: clamp(22px, 5vw, 30px);
  color: #1f2d4d;
  text-align: center;
}
.lw-rally-station {
  padding: 3px 12px;
  border-radius: 999px;
  background: #ffcf3f;
  color: #1f2d4d;
  font-weight: 700;
  font-size: 14px;
}
.lw-rally-visual {
  font-size: 42px;
  letter-spacing: 6px;
}
.lw-rally-visual.big {
  font-size: 70px;
  animation: lw-streak-in 0.6s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.lw-rally-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
}
.lw-rally-card.win {
  background: #fff8dc;
}
@media (max-width: 600px) {
  .lw-rally-options {
    grid-template-columns: 1fr;
  }
  .lw-rally-runner {
    width: 58px;
  }
  .lw-rally-track {
    height: 100px;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.lw .lw-mem-card,
  .lw-memory.done .lw-mem-card,
  .lw-soja.petted svg {
    animation: none;
  }
  .lw-mem-inner {
    transition: none;
  }
}
/* Memory: bei vielen Karten quadratisch und kompakter */
.lw-mem-grid.n12,
.lw-mem-grid.n16 {
  width: min(520px, 100%);
}
.lw-mem-grid.n12 .lw-mem-card,
.lw-mem-grid.n16 .lw-mem-card {
  aspect-ratio: 1;
}
/* Rätsel-Rallye: Antworten kompakter, keine zerrissenen Wörter */
body.lw .lw-rally-option {
  min-height: 64px;
  padding: 10px 12px 10px 16px;
}
body.lw .lw-rally-option .answer-content {
  font-size: clamp(17px, 2.1vw, 22px);
  line-height: 1.2;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: manual;
}

/* ======================= Mehr Bewegung (ab 8.17.0) ======================= */
body.lw #question.lw-fx-in {
  animation: lw-fx-in 0.55s cubic-bezier(0.3, 1.5, 0.5, 1);
}
body.lw #visual.lw-fx-pop {
  animation: lw-fx-pop 0.7s cubic-bezier(0.3, 1.6, 0.5, 1);
}
body.lw #hint.lw-fx-fade {
  animation: lw-fx-fade 0.6s ease both;
  animation-delay: 0.15s;
}
@keyframes lw-fx-in {
  from {
    opacity: 0;
    transform: translateY(-14px) scale(0.96);
  }
}
@keyframes lw-fx-pop {
  0% {
    opacity: 0;
    transform: scale(0.3) rotate(-12deg);
  }
  70% {
    transform: scale(1.12) rotate(3deg);
  }
}
@keyframes lw-fx-fade {
  from {
    opacity: 0;
  }
}
/* Aufgabenbild schwebt sanft (nur Bilder, keine Themen-Schilder) */
body.lw #visual:not(.lw-visual-text):not(:empty):not(.lw-fx-pop):not(.lw-fx-wobble) {
  animation: lw-fx-float 4s ease-in-out infinite;
}
@keyframes lw-fx-float {
  50% {
    transform: translateY(-6px);
  }
}
body.lw #visual.lw-fx-wobble {
  animation: lw-fx-wobble 0.55s ease;
}
@keyframes lw-fx-wobble {
  20% {
    transform: rotate(-8deg);
  }
  45% {
    transform: rotate(7deg);
  }
  70% {
    transform: rotate(-4deg);
  }
}
.lw-fx-spark {
  position: fixed;
  z-index: 50;
  width: 9px;
  height: 9px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  pointer-events: none;
  animation: lw-fx-spark 0.65s ease-out forwards;
}
@keyframes lw-fx-spark {
  to {
    opacity: 0;
    transform: translate(var(--dx), var(--dy)) scale(0.4);
  }
}
.lw-fx-star {
  position: fixed;
  z-index: 50;
  margin: -16px 0 0 -16px;
  font-size: 32px;
  pointer-events: none;
  transition: transform 0.8s cubic-bezier(0.5, -0.4, 0.4, 1);
}
body.lw #stars.lw-fx-bump {
  animation: lw-fx-bump 0.55s cubic-bezier(0.3, 1.8, 0.5, 1);
}
@keyframes lw-fx-bump {
  40% {
    transform: scale(1.3);
    box-shadow: 0 0 0 6px #ffcf3f66;
  }
}
/* Himmel: ziehende Wolken und Besucher */
.lw-fx-sky {
  position: fixed;
  inset: 0 0 auto 0;
  height: 60vh;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
body.lw .app {
  position: relative;
  z-index: 1;
}
.lw-fx-cloud {
  position: absolute;
  width: 150px;
  height: 46px;
  border-radius: 40px;
  background: #ffffffcc;
  animation: lw-fx-drift linear infinite;
}
.lw-fx-cloud::before,
.lw-fx-cloud::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: inherit;
}
.lw-fx-cloud::before {
  left: 24px;
  top: -26px;
  width: 58px;
  height: 58px;
}
.lw-fx-cloud::after {
  left: 66px;
  top: -18px;
  width: 46px;
  height: 46px;
}
.lw-fx-cloud.c1 {
  top: 14vh;
  animation-duration: 90s;
  animation-delay: -20s;
}
.lw-fx-cloud.c2 {
  top: 30vh;
  transform: scale(0.7);
  animation-duration: 120s;
  animation-delay: -70s;
  opacity: 0.8;
}
.lw-fx-cloud.c3 {
  top: 6vh;
  transform: scale(0.5);
  animation-duration: 150s;
  animation-delay: -110s;
  opacity: 0.7;
}
@keyframes lw-fx-drift {
  from {
    left: -200px;
  }
  to {
    left: 110vw;
  }
}
/* Gezeichnete Flieger (ab 8.19.0): Bahn per Web-Animation, hier nur Flügelschlag */
.lw-critter {
  position: absolute;
  left: 0;
  display: block;
  will-change: transform;
  filter: drop-shadow(0 3px 2px #1f2d4d22);
}
.lw-critter svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.lw-wing {
  transform-box: view-box;
}
.w-bee {
  transform-origin: 30px 20px;
  animation: lw-wing-bee 0.09s linear infinite alternate;
}
@keyframes lw-wing-bee {
  from {
    transform: scaleY(1);
  }
  to {
    transform: scaleY(0.25);
  }
}
.w-fly,
.w-fly-back {
  transform-origin: 30px 30px;
  animation: lw-wing-fly 0.32s ease-in-out infinite alternate;
}
.w-fly-back {
  animation-delay: -0.05s;
}
@keyframes lw-wing-fly {
  from {
    transform: scaleY(1);
  }
  to {
    transform: scaleY(0.2);
  }
}
.w-bird {
  transform-origin: 34px 24px;
  animation: lw-wing-bird 1.6s ease-in-out infinite;
}
/* Vogel: ein paar kräftige Flügelschläge, dann kurz gleiten */
@keyframes lw-wing-bird {
  0%, 30%, 60% {
    transform: rotate(0deg) scaleY(1);
  }
  15%, 45% {
    transform: rotate(60deg) scaleY(-0.7);
  }
  75%, 100% {
    transform: rotate(18deg) scaleY(0.55);
  }
}
@media (prefers-reduced-motion: reduce) {
  body.lw #visual,
  .lw-fx-cloud,
  .lw-critter,
  .lw-wing {
    animation: none !important;
  }
}

/* ---------- Soja legt sich hin und läuft ein paar Schritte (ab 8.17.0) ---------- */
.lw-soja.liedown svg {
  animation: lw-cat-liedown 7s ease-in-out;
}
.lw-soja.liedown .lw-head {
  animation: lw-cat-liedown-head 7s ease-in-out;
}
.lw-soja.liedown .lw-lids-half {
  display: inline;
}
.lw-soja.liedown .lw-lids {
  animation: none;
}
@keyframes lw-cat-liedown {
  0%,
  100% {
    transform: none;
  }
  12%,
  88% {
    transform: translateY(16%) scale(1.14, 0.76);
  }
}
@keyframes lw-cat-liedown-head {
  0%,
  100% {
    transform: none;
  }
  12%,
  88% {
    transform: translateY(8px) rotate(-6deg) scale(0.9, 1.12);
  }
}
.lw-soja.stroll {
  animation: lw-cat-stroll 3.2s ease-in-out;
}
.lw-soja.stroll svg {
  animation: lw-cat-walk 0.32s ease-in-out 10;
}
.lw-soja.stroll .lw-tail {
  animation: lw-tail 0.32s ease-in-out 10;
}
@keyframes lw-cat-stroll {
  0%,
  100% {
    translate: 0 0;
  }
  35%,
  45% {
    translate: -38px 0;
  }
  75% {
    translate: 16px 0;
  }
}
@media (max-width: 600px) {
  @keyframes lw-cat-stroll {
    0%,
    100% {
      translate: 0 0;
    }
    35%,
    45% {
      translate: -22px 0;
    }
    75% {
      translate: 8px 0;
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  .lw-soja.liedown svg,
  .lw-soja.liedown .lw-head,
  .lw-soja.stroll,
  .lw-soja.stroll svg {
    animation: none !important;
  }
}

/* Dialog offen (8.17.0): Spielfeld dahinter ausblenden, damit Safari keine Bauteile über das Fenster legt */
body.lw-modal-open #answers,
body.lw-modal-open .build-drag-ghost,
body.lw-modal-open .pointer-drag-ghost {
  visibility: hidden !important;
}
body.lw-modal-open #answers * {
  animation: none !important;
  filter: none !important;
}
.modal {
  isolation: isolate;
}

/* ================================================================== */
/* Bauwerkstatt 2.0 (ab 8.18.0)                                          */
/* ================================================================== */
body.lw .lw-bw {
  display: grid;
  gap: 12px;
  width: min(660px, 100%);
  margin: 0 auto;
}
.lw-bw-board {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 4px solid #fff;
  border-radius: 26px;
  box-shadow: 0 6px 0 #1f2d4d1f, 0 12px 28px #1f2d4d1a;
  touch-action: none;
  cursor: pointer;
  --sky: linear-gradient(#8fd3ff, #d9f1ff 70%);
}
.lw-bw-scenery,
.lw-bw-build,
.lw-bw-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.lw-bw-fx {
  z-index: 60;
}
/* Szenen */
.scene-meadow .lw-bw-scenery {
  background:
    radial-gradient(circle at 15% 22%, #fff 0 5%, transparent 5.3%),
    radial-gradient(circle at 21% 20%, #fff 0 6%, transparent 6.3%),
    radial-gradient(circle at 27% 23%, #fff 0 4.5%, transparent 4.8%),
    radial-gradient(ellipse 60% 22% at 20% 100%, #4fae33 0 99%, transparent 100%),
    radial-gradient(ellipse 70% 26% at 85% 100%, #5fbf3f 0 99%, transparent 100%),
    linear-gradient(transparent 0 78%, #7fd35a 78% 100%),
    var(--sky);
}
.scene-space .lw-bw-scenery {
  background:
    radial-gradient(circle at 12% 30%, #fff 0 0.5%, transparent 0.8%),
    radial-gradient(circle at 30% 12%, #ffcf3f 0 0.6%, transparent 0.9%),
    radial-gradient(circle at 70% 40%, #fff 0 0.5%, transparent 0.8%),
    radial-gradient(circle at 90% 60%, #fff 0 0.6%, transparent 0.9%),
    radial-gradient(circle at 20% 70%, #fff 0 0.4%, transparent 0.7%),
    radial-gradient(circle at 60% 10%, #fff 0 0.4%, transparent 0.7%),
    radial-gradient(circle at 80% 85%, #ffcf3f 0 0.5%, transparent 0.8%),
    radial-gradient(ellipse 80% 16% at 50% 104%, #9aa6b8 0 99%, transparent 100%),
    linear-gradient(#16213a, #2c4474);
}
.scene-workshop .lw-bw-scenery {
  background:
    radial-gradient(circle, #e8c98f 0 1.5px, transparent 2px) 0 0 / 22px 22px,
    linear-gradient(transparent 0 84%, #b5793f 84% 86%, #d9a868 86%),
    #fff3d6;
}
.scene-road .lw-bw-scenery {
  background:
    radial-gradient(circle at 80% 18%, #ffcf3f 0 7%, transparent 7.3%),
    linear-gradient(transparent 0 87%, #fff 87% 88.5%, transparent 88.5%) 0 0 / 14% 100%,
    linear-gradient(transparent 0 70%, #5fbf3f 70% 74%, #6b7489 74% 100%),
    var(--sky);
}
.scene-sea .lw-bw-scenery {
  background:
    radial-gradient(ellipse 9% 5% at 8% 74%, #fff 0 99%, transparent 100%) 0 0 / 25% 100%,
    linear-gradient(transparent 0 70%, #3aa7f0 70% 100%),
    var(--sky);
}
.scene-sea .lw-bw-scenery::after {
  content: "";
  position: absolute;
  inset: 70% 0 0;
  background: radial-gradient(ellipse 50% 22% at 50% 0, #8fd3ff 0 99%, transparent 100%) 0 0 / 14% 100%;
  animation: lw-bw-waves 3s linear infinite;
}
.scene-snow .lw-bw-scenery {
  background:
    radial-gradient(circle at 20% 30%, #fff 0 0.8%, transparent 1%),
    radial-gradient(circle at 75% 20%, #fff 0 0.8%, transparent 1%),
    radial-gradient(circle at 88% 50%, #fff 0 0.7%, transparent 1%),
    radial-gradient(circle at 10% 60%, #fff 0 0.8%, transparent 1%),
    radial-gradient(ellipse 70% 30% at 50% 100%, #fff 0 99%, transparent 100%),
    linear-gradient(transparent 0 76%, #eef6ff 76%),
    linear-gradient(#a9dbff, #e8f6ff);
}
.scene-rails .lw-bw-scenery {
  background:
    linear-gradient(90deg, #b5793f 0 20%, transparent 20%) 0 88% / 9% 5% repeat-x,
    linear-gradient(transparent 0 85%, #6b7489 85% 86.5%, transparent 86.5%),
    linear-gradient(transparent 0 76%, #7fd35a 76% 100%),
    radial-gradient(ellipse 30% 20% at 80% 76%, #5fbf3f 0 99%, transparent 100%),
    var(--sky);
}
@keyframes lw-bw-waves {
  to {
    background-position: 14% 0;
  }
}
/* Plätze und Teile */
.lw-bw-slot {
  position: absolute;
  transform: rotate(var(--r, 0deg));
}
.lw-bw-slot svg,
.lw-bw-piece svg,
.lw-bw-ghost svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.lw-bw-slot.filled svg {
  filter: drop-shadow(0 3px 0 #1f2d4d26);
}
.lw-bw-slot.pop {
  animation: lw-bw-pop 0.4s cubic-bezier(0.3, 1.7, 0.5, 1);
}
@keyframes lw-bw-pop {
  from {
    transform: rotate(var(--r, 0deg)) scale(1.35);
  }
  to {
    transform: rotate(var(--r, 0deg)) scale(1);
  }
}
.lw-bw-slot.hint svg {
  animation: lw-bw-hint 0.9s ease-in-out infinite;
}
@keyframes lw-bw-hint {
  50% {
    transform: scale(1.12);
    filter: drop-shadow(0 0 6px #ffcf3f) drop-shadow(0 0 3px #ffcf3f);
  }
}
.lw-bw-slot.nope {
  animation: lw-bw-nope 0.4s;
}
@keyframes lw-bw-nope {
  25% {
    transform: rotate(var(--r, 0deg)) translateX(-5px);
  }
  75% {
    transform: rotate(var(--r, 0deg)) translateX(5px);
  }
}
.lw-bw-bar {
  display: flex;
  align-items: center;
  gap: 10px;
}
.lw-bw-meter {
  flex: 1;
  height: 16px;
  border-radius: 10px;
  background: #e6eef7;
  overflow: hidden;
  box-shadow: inset 0 2px 0 #1f2d4d14;
}
.lw-bw-meter i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 10px;
  background: linear-gradient(90deg, #5fbf3f, #ffcf3f);
  transition: width 0.35s cubic-bezier(0.3, 1.4, 0.5, 1);
}
body.lw .lw-bw-reset {
  width: 52px;
  height: 52px;
  min-height: 0;
  padding: 0;
  border-radius: 16px;
  background: #ecf6fd;
  font-size: 24px;
  box-shadow: 0 4px 0 #cbe2f4;
}
.lw-bw-tray {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-radius: 22px;
  background:
    radial-gradient(circle, #ffffff 0 1.5px, transparent 2px) 0 0 / 16px 16px,
    #ffe9a8;
  box-shadow: inset 0 -5px 0 #f3cf6b;
}
body.lw .lw-bw-piece {
  display: grid;
  place-items: center;
  min-width: 66px;
  min-height: 66px;
  padding: 8px;
  border: 3px solid #fff;
  border-radius: 18px;
  background: #fffdf6;
  box-shadow: 0 4px 0 #e0bf63;
  touch-action: none;
  cursor: grab;
  transition: transform 0.15s;
}
body.lw .lw-bw-piece[hidden] {
  display: none;
}
.lw-bw-piece svg {
  width: var(--pw);
  height: var(--ph);
  transform: rotate(var(--r, 0deg));
}
body.lw .lw-bw-piece.selected {
  border-color: #ffcf3f;
  background: #fff4c2;
  transform: translateY(-5px) scale(1.06);
  box-shadow: 0 0 0 4px #ffcf3f88, 0 6px 0 #e0bf63;
}
body.lw .lw-bw-piece.lifting {
  opacity: 0.35;
}
.lw-bw-ghost {
  position: fixed;
  z-index: 99999;
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(var(--r, 0deg)) scale(1.08);
  filter: drop-shadow(0 8px 6px #1f2d4d40);
}
/* Abschluss-Animationen */
.lw-bw.done .lw-bw-board {
  border-color: #ffcf3f;
}
.fin-rocket .lw-bw-build {
  animation: lw-bw-launch 2.4s cubic-bezier(0.6, 0, 0.9, 0.4) 0.3s forwards;
}
.fin-rocket .p-flame svg {
  animation: lw-bw-flicker 0.15s steps(2) infinite;
  transform-origin: 50% 0;
}
@keyframes lw-bw-launch {
  15% {
    transform: translate(1px, 0);
  }
  20% {
    transform: translate(-1px, 0);
  }
  to {
    transform: translateY(-120%);
  }
}
@keyframes lw-bw-flicker {
  to {
    transform: scaleY(1.35);
  }
}
.fin-car .lw-bw-build,
.fin-train .lw-bw-build {
  animation: lw-bw-drive 2.4s cubic-bezier(0.5, 0, 0.9, 0.5) 0.4s forwards;
}
.fin-train .lw-bw-build {
  animation-name: lw-bw-drive-left;
}
.fin-car .p-wheel svg,
.fin-train .p-wheel svg {
  animation: lw-bw-spin 0.5s linear infinite;
}
@keyframes lw-bw-drive {
  10% {
    transform: translate(-3%, 0);
  }
  to {
    transform: translateX(130%);
  }
}
@keyframes lw-bw-drive-left {
  10% {
    transform: translate(3%, 0);
  }
  to {
    transform: translateX(-130%);
  }
}
@keyframes lw-bw-spin {
  to {
    transform: rotate(360deg);
  }
}
.fin-ship .lw-bw-build {
  animation: lw-bw-sail 2.6s ease-in-out forwards;
}
@keyframes lw-bw-sail {
  25% {
    transform: translate(3%, -1%) rotate(-3deg);
  }
  50% {
    transform: translate(10%, 1%) rotate(3deg);
  }
  to {
    transform: translate(90%, 0) rotate(-2deg);
  }
}
.fin-house .p-window svg,
.fin-castle .p-porthole svg {
  animation: lw-bw-light 0.6s ease-out 0.3s forwards;
}
@keyframes lw-bw-light {
  to {
    filter: brightness(1.25) sepia(1) saturate(4) hue-rotate(5deg) drop-shadow(0 0 8px #ffcf3f);
  }
}
.fin-house .lw-bw-build,
.fin-castle .lw-bw-build,
.fin-flower .lw-bw-build {
  animation: lw-bw-cheer 0.7s cubic-bezier(0.3, 1.6, 0.5, 1) 2;
  transform-origin: 50% 100%;
}
@keyframes lw-bw-cheer {
  50% {
    transform: scale(1.04, 0.97);
  }
}
.fin-robot .lw-bw-build {
  animation: lw-bw-dance 0.5s ease-in-out 4 alternate;
  transform-origin: 50% 90%;
}
.fin-robot .p-eye svg {
  animation: lw-bw-blink 0.8s steps(1) 2;
}
@keyframes lw-bw-dance {
  from {
    transform: rotate(-5deg);
  }
  to {
    transform: rotate(5deg) translateY(-2%);
  }
}
@keyframes lw-bw-blink {
  50% {
    transform: scaleY(0.1);
  }
}
.fin-snow .lw-bw-build {
  animation: lw-bw-cheer 1s ease-in-out 2;
  transform-origin: 50% 100%;
}
.lw-bw-bit {
  position: absolute;
  left: var(--x);
  font-style: normal;
  font-size: calc(26px * var(--s, 1));
  opacity: 0;
}
.b-rocket,
.b-car,
.b-train {
  bottom: 6%;
  animation: lw-bw-puff 1.4s ease-out var(--d) forwards;
}
.b-train {
  bottom: 50%;
  left: calc(var(--x) - 20%);
}
@keyframes lw-bw-puff {
  15% {
    opacity: 0.9;
  }
  to {
    opacity: 0;
    transform: translate(-20px, -30px) scale(2);
  }
}
.b-house,
.b-castle,
.b-robot,
.b-ship {
  top: 30%;
  animation: lw-bw-rise 1.6s ease-out var(--d) forwards;
}
@keyframes lw-bw-rise {
  20% {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translateY(-120px) scale(1.4);
  }
}
.b-snow {
  top: -8%;
  animation: lw-bw-fall 2.4s linear var(--d) forwards;
}
@keyframes lw-bw-fall {
  10% {
    opacity: 1;
  }
  to {
    opacity: 0.8;
    transform: translate(12px, 420px) rotate(180deg);
  }
}
.b-flower {
  top: 20%;
  animation: lw-bw-rise 1.6s ease-out var(--d) forwards;
}
@media (max-width: 600px) {
  .lw-bw-board {
    border-radius: 20px;
  }
  body.lw .lw-bw-piece {
    min-width: 56px;
    min-height: 56px;
    padding: 6px;
  }
  .lw-bw-piece svg {
    width: calc(var(--pw) * 0.8);
    height: calc(var(--ph) * 0.8);
  }
}

/* ================================================================== */
/* Pizzeria Soja (ab 8.18.0)                                             */
/* ================================================================== */
body.lw .lw-pz {
  display: grid;
  grid-template-columns: minmax(150px, 210px) minmax(0, 1fr);
  grid-template-areas: "ticket stage" "bins bins" "bake bake";
  gap: 14px 18px;
  width: min(680px, 100%);
  margin: 0 auto;
  align-items: center;
}
.lw-pz-ticket {
  grid-area: ticket;
  position: relative;
  display: grid;
  gap: 8px;
  padding: 14px 12px 16px;
  border-radius: 6px 6px 18px 18px;
  background: repeating-linear-gradient(#fff 0 26px, #e9f3fb 26px 27px);
  box-shadow: 0 5px 0 #1f2d4d1f;
  transform: rotate(-2deg);
}
.lw-pz-ticket::before {
  content: "";
  position: absolute;
  inset: -8px 0 auto;
  height: 10px;
  background: radial-gradient(circle at 50% 100%, #fff 0 5px, transparent 5.5px) 0 0 / 14px 10px;
}
.lw-pz-ticket-title {
  font-family: var(--lw-font, Fredoka, sans-serif);
  color: #1f2d4d;
  font-size: 18px;
}
body.lw .lw-pz-say {
  position: absolute;
  right: 8px;
  top: 6px;
  width: 38px;
  height: 38px;
  min-height: 0;
  padding: 0;
  border-radius: 12px;
  background: #ffcf3f;
  font-size: 18px;
}
.lw-pz-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 6px 8px;
  border: 3px solid transparent;
  border-radius: 14px;
  background: #fff8e2;
  transition: background 0.2s, border-color 0.2s;
}
.lw-pz-want {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  font-size: 22px;
  line-height: 1.1;
}
.lw-pz-want i {
  font-style: normal;
}
.lw-pz-have {
  flex: none;
  min-width: 42px;
  padding: 2px 6px;
  border-radius: 10px;
  background: #1f2d4d;
  color: #fff;
  font-family: var(--lw-font, Fredoka, sans-serif);
  font-size: 16px;
  text-align: center;
}
.lw-pz-row.ok {
  border-color: #5fbf3f;
  background: #e8f8df;
}
.lw-pz-row.ok .lw-pz-have {
  background: #5fbf3f;
}
.lw-pz-row.over .lw-pz-have {
  background: #ff6f4f;
}
.lw-pz-row.nudge {
  animation: lw-bw-nope 0.35s 2;
}
.lw-pz-stage {
  grid-area: stage;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 250px;
}
.lw-pz-cat {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 92px;
  z-index: 3;
}
.lw-pz-cat svg {
  width: 100%;
  height: auto;
}
.lw-pz-pizza {
  position: relative;
  width: min(250px, 62vw);
  aspect-ratio: 1;
  z-index: 2;
  transition: transform 1s cubic-bezier(0.5, 0, 0.5, 1), filter 0.6s;
}
.lw-pz-pizza > svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 6px 0 #1f2d4d22);
}
body.lw .lw-pz-top {
  position: absolute;
  width: 36px;
  height: 36px;
  min-height: 0;
  margin: -18px 0 0 -18px;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  font-size: 28px;
  line-height: 1;
  transform: rotate(var(--rot, 0deg));
  animation: lw-pz-drop 0.35s cubic-bezier(0.3, 1.6, 0.5, 1);
}
body.lw .lw-pz-top.away {
  animation: lw-pz-away 0.25s ease-in forwards;
}
@keyframes lw-pz-drop {
  from {
    transform: translateY(-60px) scale(1.5) rotate(var(--rot, 0deg));
    opacity: 0;
  }
}
@keyframes lw-pz-away {
  to {
    transform: translateY(40px) scale(0.3);
    opacity: 0;
  }
}
.lw-pz-oven {
  position: absolute;
  right: -6px;
  bottom: 10px;
  z-index: 1;
  display: grid;
  place-items: end center;
  width: 110px;
  height: 96px;
  padding-bottom: 6px;
  border-radius: 40px 40px 12px 12px;
  background: radial-gradient(ellipse 36% 30% at 50% 62%, #2b1b10 0 99%, transparent 100%), #c9664a;
  box-shadow: inset 0 -8px 0 #a4503a, 0 5px 0 #1f2d4d22;
  font-size: 22px;
}
.lw-pz-fire {
  opacity: 0.4;
}
.lw-pz.baking .lw-pz-fire {
  opacity: 1;
  animation: lw-bw-flicker 0.2s steps(2) infinite alternate;
}
.lw-pz.baking .lw-pz-pizza {
  transform: translate(38%, 10%) scale(0.45);
  filter: brightness(0.9);
}
.lw-pz.served .lw-pz-pizza {
  transform: translate(-22%, 0) scale(0.8);
  filter: brightness(1.05) saturate(1.2);
}
.lw-pz.served .lw-pz-cat svg {
  animation: lw-jump 0.6s cubic-bezier(0.3, 1.5, 0.5, 1) 2;
}
.lw-pz-bins {
  grid-area: bins;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
body.lw .lw-pz-bin {
  display: grid;
  place-items: center;
  width: 80px;
  height: 80px;
  min-height: 0;
  padding: 0;
  border: 4px solid #fff;
  border-radius: 50% 50% 22px 22px;
  background: linear-gradient(#fff 0 30%, #ffe9a8 30%);
  box-shadow: 0 5px 0 #e0bf63;
  font-size: 40px;
}
body.lw .lw-pz-bin.tap span {
  display: inline-block;
  animation: lw-pz-tap 0.3s ease-out;
}
@keyframes lw-pz-tap {
  50% {
    transform: translateY(-14px) scale(1.2);
  }
}
body.lw .lw-pz-bake {
  grid-area: bake;
  justify-self: center;
  padding: 14px 26px;
  border-radius: 20px;
  background: #ff6f4f;
  color: #fff;
  font-size: 20px;
  box-shadow: 0 5px 0 #c9502f;
}
@media (max-width: 600px) {
  body.lw .lw-pz {
    grid-template-columns: 1fr;
    grid-template-areas: "ticket" "stage" "bins" "bake";
  }
  .lw-pz-ticket {
    transform: none;
  }
  .lw-pz-cat {
    width: 70px;
  }
  .lw-pz-oven {
    width: 84px;
    height: 76px;
  }
  body.lw .lw-pz-bin {
    width: 66px;
    height: 66px;
    font-size: 32px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .lw-bw-build,
  .lw-bw-slot,
  .lw-bw-slot svg,
  .scene-sea .lw-bw-scenery::after,
  .lw-pz-top,
  .lw-pz-pizza {
    animation: none !important;
    transition: none !important;
  }
}
.lw-bw-board .lw-bw-deco {
  animation: none !important;
}

/* ================================================================== */
/* Bühnen für Frage-Spiele (ab 8.19.0)                                   */
/* ================================================================== */
body.lw #answers.lw-skinned {
  position: relative;
  gap: 18px 22px;
  padding: 18px 12px 22px;
  border-radius: 26px;
}
body.lw #answers.lw-skinned > .answer {
  --sk-color: #3aa7f0;
  --sk-dark: #2f86c8;
  box-shadow: none;
  border: 0;
  font-family: var(--lw-font, Fredoka, sans-serif);
  font-size: 24px;
  font-weight: 600;
  animation: lw-sk-in 0.5s cubic-bezier(0.3, 1.5, 0.5, 1) both;
  animation-delay: calc(var(--sk-i) * 0.08s);
}
body.lw #answers.lw-skinned > .answer:nth-child(4n + 1) {
  --sk-color: #ffcf3f;
  --sk-dark: #e0a800;
}
body.lw #answers.lw-skinned > .answer:nth-child(4n + 2) {
  --sk-color: #3aa7f0;
  --sk-dark: #2f86c8;
}
body.lw #answers.lw-skinned > .answer:nth-child(4n + 3) {
  --sk-color: #5fbf3f;
  --sk-dark: #3f962a;
}
body.lw #answers.lw-skinned > .answer:nth-child(4n + 4) {
  --sk-color: #ef5b93;
  --sk-dark: #c93d74;
}
body.lw #answers.lw-skinned > .answer i {
  pointer-events: none;
}
@keyframes lw-sk-in {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.7);
  }
}
body.lw #answers.lw-skinned > .answer .answer-content {
  position: relative;
  z-index: 2;
}

/* --- Luftballons: schweben, der richtige fliegt davon --- */
body.lw #answers.lw-skin-balloons {
  background: linear-gradient(#bfe6ff, #e8f6ff);
  padding-bottom: 60px;
}
body.lw #answers.lw-skin-balloons > .answer {
  min-width: 118px;
  min-height: 132px;
  padding: 16px 18px 26px;
  border-radius: 50% 50% 48% 48% / 56% 56% 44% 44%;
  background: radial-gradient(circle at 32% 28%, #ffffffaa 0 10%, transparent 11%), var(--sk-color);
  color: #1f2d4d;
  animation:
    lw-sk-in 0.5s cubic-bezier(0.3, 1.5, 0.5, 1) both,
    lw-sk-bob 2.6s ease-in-out calc(var(--sk-i) * -0.7s) infinite;
  animation-delay: calc(var(--sk-i) * 0.08s), calc(var(--sk-i) * -0.7s);
}
body.lw #answers.lw-skin-balloons > .answer::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -9px;
  width: 16px;
  height: 12px;
  margin-left: -8px;
  background: var(--sk-dark);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.lw-sk-string {
  position: absolute;
  left: 50%;
  top: 100%;
  width: 2px;
  height: 48px;
  margin-top: 2px;
  background: #1f2d4d66;
  transform-origin: top;
  transform: rotate(var(--sk-tilt));
}
@keyframes lw-sk-bob {
  50% {
    transform: translateY(-9px) rotate(var(--sk-tilt));
  }
}
body.lw #answers.lw-skin-balloons > .answer.good {
  animation: lw-sk-flyaway 1.3s ease-in forwards;
}
body.lw #answers.lw-skin-balloons > .answer.nope {
  animation: lw-sk-shake 0.4s;
}
@keyframes lw-sk-flyaway {
  20% {
    transform: translateY(8px) scale(1.08);
  }
  to {
    transform: translateY(-420px) rotate(8deg) scale(0.9);
    opacity: 0;
  }
}
@keyframes lw-sk-shake {
  25% {
    transform: translateX(-8px) rotate(-4deg) scale(0.95);
  }
  75% {
    transform: translateX(8px) rotate(4deg) scale(0.95);
  }
}

/* --- Schatzkisten: die richtige springt auf --- */
body.lw #answers.lw-skin-chests {
  background:
    radial-gradient(ellipse 60% 30% at 50% 100%, #f3d58c 0 99%, transparent 100%),
    linear-gradient(#bfe6ff 0 55%, #ffe7a3 55%);
  padding-top: 34px;
}
body.lw #answers.lw-skin-chests > .answer {
  min-width: 130px;
  min-height: 96px;
  padding: 26px 18px 16px;
  border-radius: 10px 10px 16px 16px;
  background:
    linear-gradient(90deg, transparent 0 14%, #ffcf3f 14% 20%, transparent 20% 80%, #ffcf3f 80% 86%, transparent 86%),
    linear-gradient(#c98a4b, #a4683a);
  color: #fff;
  text-shadow: 0 2px 0 #5a3514;
  box-shadow: 0 6px 0 #6e4524;
}
.lw-sk-lid {
  position: absolute;
  left: -4px;
  right: -4px;
  top: -22px;
  height: 30px;
  border-radius: 40px 40px 6px 6px;
  background:
    linear-gradient(90deg, transparent 0 14%, #ffcf3f 14% 20%, transparent 20% 80%, #ffcf3f 80% 86%, transparent 86%),
    linear-gradient(#d99a58, #b77440);
  box-shadow: inset 0 -4px 0 #8a5528;
  transform-origin: 10% 100%;
  transition: transform 0.5s cubic-bezier(0.3, 1.6, 0.5, 1);
  z-index: 3;
}
body.lw #answers.lw-skin-chests > .answer.good .lw-sk-lid {
  transform: rotate(-55deg) translate(-6px, -10px);
}
body.lw #answers.lw-skin-chests > .answer.good {
  animation: lw-sk-hop 0.6s cubic-bezier(0.3, 1.6, 0.5, 1);
  box-shadow: 0 6px 0 #6e4524, 0 0 30px 8px #ffcf3f;
}
body.lw #answers.lw-skin-chests > .answer.nope {
  animation: lw-sk-shake 0.4s;
}
@keyframes lw-sk-hop {
  40% {
    transform: translateY(-16px);
  }
}

/* --- Blumen: die richtige blüht auf --- */
body.lw #answers.lw-skin-flowers {
  background: linear-gradient(#e8f6ff 0 62%, #8fd36a 62%);
  padding-bottom: 54px;
}
body.lw #answers.lw-skin-flowers > .answer {
  min-width: 112px;
  min-height: 112px;
  padding: 14px;
  border-radius: 50%;
  background: #fffdf5;
  color: #1f2d4d;
  box-shadow:
    0 -34px 0 -10px var(--sk-color),
    0 34px 0 -10px var(--sk-color),
    34px 0 0 -10px var(--sk-color),
    -34px 0 0 -10px var(--sk-color),
    24px 24px 0 -10px var(--sk-color),
    -24px 24px 0 -10px var(--sk-color),
    24px -24px 0 -10px var(--sk-color),
    -24px -24px 0 -10px var(--sk-color);
  margin: 24px 26px 30px;
  animation:
    lw-sk-grow 0.6s cubic-bezier(0.3, 1.5, 0.5, 1) both,
    lw-sk-sway 3s ease-in-out infinite;
  animation-delay: calc(var(--sk-i) * 0.1s), calc(var(--sk-i) * -0.8s);
}
.lw-sk-stem {
  position: absolute;
  left: 50%;
  top: 100%;
  width: 6px;
  height: 46px;
  margin-left: -3px;
  border-radius: 3px;
  background: #3f962a;
  z-index: -1;
}
.lw-sk-stem::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 16px;
  width: 20px;
  height: 11px;
  border-radius: 0 20px 0 20px;
  background: #5fbf3f;
}
@keyframes lw-sk-grow {
  from {
    opacity: 0;
    transform: scale(0.2) translateY(60px);
  }
}
@keyframes lw-sk-sway {
  50% {
    transform: rotate(var(--sk-tilt));
  }
}
body.lw #answers.lw-skin-flowers > .answer.good {
  animation: lw-sk-bloom 0.9s cubic-bezier(0.3, 1.6, 0.5, 1) forwards;
  background: #ffcf3f;
}
body.lw #answers.lw-skin-flowers > .answer.nope {
  animation: lw-sk-droop 0.5s;
}
@keyframes lw-sk-bloom {
  50% {
    transform: scale(1.25) rotate(20deg);
  }
  to {
    transform: scale(1.15) rotate(0);
  }
}
@keyframes lw-sk-droop {
  40% {
    transform: rotate(-14deg) translateY(6px);
  }
}

/* --- Wolken: die richtige wird zur Sonnenwolke --- */
body.lw #answers.lw-skin-clouds {
  background: linear-gradient(#6fc2f7, #bfe6ff);
}
body.lw #answers.lw-skin-clouds > .answer {
  min-width: 130px;
  min-height: 84px;
  padding: 22px 22px 16px;
  border-radius: 60px;
  background: #fff;
  color: #1f2d4d;
  box-shadow:
    -26px 6px 0 -6px #fff,
    26px 8px 0 -8px #fff,
    0 7px 0 #1f2d4d14;
  margin: 18px 30px 12px;
  animation:
    lw-sk-in 0.5s cubic-bezier(0.3, 1.5, 0.5, 1) both,
    lw-sk-drift 4s ease-in-out infinite;
  animation-delay: calc(var(--sk-i) * 0.08s), calc(var(--sk-i) * -1.1s);
}
body.lw #answers.lw-skin-clouds > .answer::before {
  content: "";
  position: absolute;
  left: 18%;
  top: -24px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: inherit;
  z-index: 0;
}
body.lw #answers.lw-skin-clouds > .answer::after {
  content: "";
  position: absolute;
  right: 16%;
  top: -14px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: inherit;
  z-index: 0;
}
@keyframes lw-sk-drift {
  50% {
    transform: translateX(8px) translateY(-3px);
  }
}
body.lw #answers.lw-skin-clouds > .answer.good {
  background: #ffcf3f;
  box-shadow:
    -26px 6px 0 -6px #ffcf3f,
    26px 8px 0 -8px #ffcf3f,
    0 0 40px 10px #fff3b0;
  animation: lw-sk-hop 0.6s cubic-bezier(0.3, 1.6, 0.5, 1);
}
body.lw #answers.lw-skin-clouds > .answer.nope {
  animation: lw-sk-rain 0.5s;
  background: #b7c3d4;
  box-shadow:
    -26px 6px 0 -6px #b7c3d4,
    26px 8px 0 -8px #b7c3d4;
}
@keyframes lw-sk-rain {
  30% {
    transform: translateY(6px);
  }
}
body.lw #answers.lw-skinned > .answer .answer-number {
  z-index: 5;
}
@media (max-width: 600px) {
  body.lw #answers.lw-skinned {
    gap: 12px 10px;
    padding: 14px 6px 18px;
  }
  body.lw #answers.lw-skinned > .answer {
    font-size: 20px;
  }
  body.lw #answers.lw-skin-balloons > .answer {
    min-width: 96px;
    min-height: 112px;
  }
  body.lw #answers.lw-skin-flowers > .answer {
    min-width: 88px;
    min-height: 88px;
    margin: 22px 22px 28px;
  }
  body.lw #answers.lw-skin-clouds > .answer {
    min-width: 104px;
    margin: 16px 20px 10px;
  }
  body.lw #answers.lw-skin-chests > .answer {
    min-width: 108px;
  }
}
/* Bühnen behalten ihr Aussehen auch bei richtig/falsch (Grundregeln setzen sonst Karten-Farben mit !important) */
body.lw #answers.lw-skinned > .answer.good,
body.lw #answers.lw-skinned > .answer.nope {
  border-color: transparent !important;
}
body.lw #answers.lw-skin-balloons > .answer.good,
body.lw #answers.lw-skin-balloons > .answer.nope {
  background: radial-gradient(circle at 32% 28%, #ffffffaa 0 10%, transparent 11%), var(--sk-color) !important;
  box-shadow: none !important;
}
body.lw #answers.lw-skin-balloons > .answer.good {
  box-shadow: 0 0 26px 6px #fff8 !important;
}
body.lw #answers.lw-skin-chests > .answer.good,
body.lw #answers.lw-skin-chests > .answer.nope {
  background:
    linear-gradient(90deg, transparent 0 14%, #ffcf3f 14% 20%, transparent 20% 80%, #ffcf3f 80% 86%, transparent 86%),
    linear-gradient(#c98a4b, #a4683a) !important;
  box-shadow: 0 6px 0 #6e4524 !important;
}
body.lw #answers.lw-skin-chests > .answer.good {
  box-shadow: 0 6px 0 #6e4524, 0 -10px 34px 10px #ffcf3f !important;
}
body.lw #answers.lw-skin-flowers > .answer.good,
body.lw #answers.lw-skin-flowers > .answer.nope {
  box-shadow:
    0 -34px 0 -10px var(--sk-color),
    0 34px 0 -10px var(--sk-color),
    34px 0 0 -10px var(--sk-color),
    -34px 0 0 -10px var(--sk-color),
    24px 24px 0 -10px var(--sk-color),
    -24px 24px 0 -10px var(--sk-color),
    24px -24px 0 -10px var(--sk-color),
    -24px -24px 0 -10px var(--sk-color) !important;
}
body.lw #answers.lw-skin-flowers > .answer.good {
  background: #ffcf3f !important;
}
body.lw #answers.lw-skin-flowers > .answer.nope {
  background: #e6e6e6 !important;
}
body.lw #answers.lw-skin-clouds > .answer.good {
  background: #ffcf3f !important;
  box-shadow:
    -26px 6px 0 -6px #ffcf3f,
    26px 8px 0 -8px #ffcf3f,
    0 0 40px 10px #fff3b0 !important;
}
body.lw #answers.lw-skin-clouds > .answer.nope {
  background: #b7c3d4 !important;
  box-shadow:
    -26px 6px 0 -6px #b7c3d4,
    26px 8px 0 -8px #b7c3d4 !important;
}
/* Bühnen: feste Formgrößen, auch wenn das Handy-Raster sonst Karten auf volle Breite zieht */
body.lw #answers.lw-skinned {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
body.lw #answers.lw-skinned > .answer {
  flex: 0 0 auto;
  max-width: 46%;
}
body.lw #answers.lw-skin-flowers > .answer {
  width: 112px;
  height: 112px;
  max-width: none;
}
body.lw #answers.lw-skin-balloons > .answer {
  width: auto;
  max-width: 180px;
}
@media (max-width: 600px) {
  body.lw #answers.lw-skin-balloons > .answer {
    min-width: 0;
    width: 104px;
    min-height: 118px;
  }
  body.lw #answers.lw-skin-chests > .answer {
    min-width: 0;
    width: 124px;
    min-height: 84px;
    margin-top: 16px;
  }
  body.lw #answers.lw-skin-flowers > .answer {
    min-width: 0;
    min-height: 0;
    width: 82px;
    height: 82px;
    margin: 30px 28px 40px;
  }
  body.lw #answers.lw-skin-clouds > .answer {
    min-width: 0;
    width: 118px;
    min-height: 70px;
    margin: 20px 22px 8px;
  }
}

/* Erschrecktes Tier (ab 8.20.0): schnellere Flügel und ein Ausrufezeichen */
.lw-critter.scared .lw-wing {
  animation-duration: 0.05s;
}
.lw-critter.scared .w-bird {
  animation: lw-wing-bird-fast 0.16s linear infinite alternate;
}
@keyframes lw-wing-bird-fast {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(60deg) scaleY(-0.7);
  }
}
.lw-critter-bang {
  position: absolute;
  left: 50%;
  top: -26px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-radius: 50%;
  background: #ff6f4f;
  color: #fff;
  font: 700 17px/1 var(--lw-font, Fredoka, sans-serif);
  box-shadow: 0 2px 0 #1f2d4d33;
  animation: lw-bang 0.9s ease-out forwards;
}
@keyframes lw-bang {
  0% {
    transform: scale(0);
  }
  20% {
    transform: scale(1.3);
  }
  35%,
  70% {
    transform: scale(1);
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* Bühnen mit Geschichte (ab 8.20.0) */
body.lw #answers.lw-skinned > .lw-sk-caption {
  flex: 0 0 100%;
  order: -1;
  margin: -4px 0 4px;
  text-align: center;
}
.lw-sk-pill {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  background: #ffffffd9;
  color: #1f2d4d;
  font-family: var(--lw-font, Fredoka, sans-serif);
  font-size: 17px;
  font-weight: 600;
  box-shadow: 0 3px 0 #1f2d4d14;
}
body.lw #answers.lw-skinned > .answer.lw-sk-long {
  font-size: 18px;
}
/* Schatzkiste: die Antwort steht auf einem Zahlenschloss */
body.lw #answers.lw-skin-chests > .answer {
  padding-top: 30px;
}
body.lw #answers.lw-skin-chests > .answer .answer-content {
  display: inline-grid;
  place-items: center;
  min-width: 46px;
  padding: 4px 10px 3px;
  border-radius: 10px;
  background: #ffcf3f;
  color: #1f2d4d;
  text-shadow: none;
  box-shadow: 0 3px 0 #b48a00;
}
body.lw #answers.lw-skin-chests > .answer .answer-content::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -16px;
  width: 24px;
  height: 20px;
  margin-left: -12px;
  border: 5px solid #9aa6b8;
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
  transition: transform 0.35s cubic-bezier(0.3, 1.6, 0.5, 1);
}
body.lw #answers.lw-skin-chests > .answer.good .answer-content::before {
  transform: translateY(-8px) rotate(-18deg);
}
body.lw #answers.lw-skin-chests > .answer.nope .answer-content {
  animation: lw-sk-shake 0.35s;
}
/* Münzen, Sterne, Regentropfen, Sonne */
.lw-sk-bit {
  position: absolute;
  left: 50%;
  top: 20%;
  z-index: 6;
  font-style: normal;
  font-size: 26px;
  opacity: 0;
  animation: lw-sk-bit 1.2s cubic-bezier(0.2, 0.8, 0.4, 1) var(--bd) forwards;
}
@keyframes lw-sk-bit {
  15% {
    opacity: 1;
  }
  60% {
    opacity: 1;
    transform: translate(var(--bx), var(--by)) rotate(20deg);
  }
  to {
    opacity: 0;
    transform: translate(var(--bx), calc(var(--by) + 30px)) rotate(40deg);
  }
}
.lw-sk-drop {
  position: absolute;
  left: var(--dx);
  top: 80%;
  z-index: 6;
  width: 7px;
  height: 12px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: #3aa7f0;
  opacity: 0;
  animation: lw-sk-drop 0.8s ease-in var(--dd) forwards;
}
@keyframes lw-sk-drop {
  10% {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translateY(60px);
  }
}
.lw-sk-sun {
  position: absolute;
  right: -22px;
  top: -30px;
  z-index: 1;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffe98a 0 45%, #ffcf3f 46% 60%, transparent 61%),
    repeating-conic-gradient(#ffcf3f 0 12deg, transparent 12deg 30deg);
  animation: lw-sk-sunrise 1.4s cubic-bezier(0.3, 1.4, 0.5, 1) forwards;
}
@keyframes lw-sk-sunrise {
  from {
    transform: translateY(30px) scale(0.2) rotate(-60deg);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
.lw-sk-visitor.landed .lw-wing {
  animation-duration: 0.9s;
}

/* ================================================================== */
/* Hütchenspiel mit Soja (ab 8.21.0)                                     */
/* ================================================================== */
body.lw .lw-cups {
  display: grid;
  gap: 12px;
  width: min(600px, 100%);
  margin: 0 auto;
}
.lw-cups-status,
.lw-post-status {
  justify-self: center;
  padding: 6px 16px;
  border-radius: 999px;
  background: #fff8dc;
  color: #1f2d4d;
  font-family: var(--lw-font, Fredoka, sans-serif);
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  box-shadow: 0 3px 0 #1f2d4d14;
}
.lw-cups-table {
  position: relative;
  height: 210px;
  border-radius: 26px;
  background:
    radial-gradient(ellipse 46% 16% at 50% 84%, #1f2d4d1f 0 99%, transparent 100%),
    linear-gradient(#e8f6ff 0 58%, #c98a4b 58% 61%, #e0a868 61%);
  box-shadow: inset 0 -8px 0 #b77440, 0 6px 0 #1f2d4d14;
  overflow: hidden;
}
body.lw .lw-cup {
  position: absolute;
  bottom: 26px;
  width: 104px;
  height: 116px;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  transform: translate(-50%, 0);
  transition: bottom 0.45s cubic-bezier(0.3, 1.4, 0.5, 1), filter 0.2s;
  z-index: 2;
  cursor: pointer;
}
body.lw .lw-cup svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 6px 3px #1f2d4d33);
}
body.lw .lw-cup.up {
  bottom: 118px;
}
body.lw .lw-cup:not(:disabled):hover {
  filter: brightness(1.07);
}
.lw-cups-fish {
  position: absolute;
  bottom: 34px;
  z-index: 1;
  font-size: 52px;
  transform: translateX(-50%) scaleX(-1);
}
.lw-cups-fish.found {
  animation: lw-cups-found 0.9s cubic-bezier(0.3, 1.6, 0.5, 1);
}
@keyframes lw-cups-found {
  40% {
    transform: translateX(-50%) scaleX(-1) translateY(-26px) scale(1.3);
  }
}

/* ================================================================== */
/* Post für die Tiere (ab 8.21.0)                                        */
/* ================================================================== */
body.lw .lw-post {
  display: grid;
  gap: 14px;
  width: min(680px, 100%);
  margin: 0 auto;
}
.lw-post-street {
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  gap: 8px;
  padding: 16px 10px 20px;
  border-radius: 24px;
  background: linear-gradient(#bfe6ff 0 70%, #7fd35a 70% 84%, #b7c3d4 84%);
}
body.lw .lw-post-house {
  position: relative;
  display: grid;
  justify-items: center;
  width: 118px;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  cursor: pointer;
}
.lw-post-roof {
  width: 0;
  height: 0;
  border-left: 62px solid transparent;
  border-right: 62px solid transparent;
  border-bottom: 44px solid var(--roof);
  filter: drop-shadow(0 -2px 0 #1f2d4d);
}
.lw-post-wall {
  position: relative;
  display: block;
  width: 100px;
  height: 92px;
  border: 3px solid #1f2d4d;
  border-top: 0;
  background: #fff4d6;
}
.lw-post-window {
  position: absolute;
  left: 10px;
  top: 12px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 34px;
  border: 3px solid #1f2d4d;
  border-radius: 6px;
  background: #bfe6ff;
  overflow: hidden;
}
.lw-post-animal {
  font-size: 26px;
  transform: translateY(6px);
  transition: transform 0.4s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.lw-post-door {
  position: absolute;
  right: 12px;
  bottom: 0;
  width: 28px;
  height: 46px;
  border: 3px solid #1f2d4d;
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
  background: #b5793f;
}
.lw-post-box {
  position: absolute;
  left: 16px;
  bottom: 8px;
  width: 22px;
  height: 16px;
  border: 2px solid #1f2d4d;
  border-radius: 4px 4px 2px 2px;
  background: #ffcf3f;
}
.lw-post-plate {
  position: absolute;
  top: 26px;
  display: grid;
  place-items: center;
  min-width: 36px;
  height: 30px;
  padding: 0 6px;
  border: 3px solid #fff;
  border-radius: 10px;
  background: #1f2d4d;
  color: #fff;
  font: 700 20px/1 var(--lw-font, Fredoka, sans-serif);
  box-shadow: 0 2px 0 #1f2d4d44;
}
body.lw .lw-post-house.happy .lw-post-animal {
  transform: translateY(-2px) scale(1.25);
}
body.lw .lw-post-house.nope {
  animation: lw-sk-shake 0.4s;
}
.lw-post-thanks {
  position: absolute;
  top: -8px;
  padding: 3px 8px;
  border-radius: 12px;
  background: #fff;
  color: #1f2d4d;
  font: 600 14px/1.2 var(--lw-font, Fredoka, sans-serif);
  box-shadow: 0 2px 0 #1f2d4d22;
  animation: lw-post-thanks 1.8s ease-out forwards;
}
@keyframes lw-post-thanks {
  15% {
    transform: translateY(-10px) scale(1.1);
  }
  80% {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translateY(-22px);
  }
}
.lw-post-van {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 10px;
  border-radius: 20px;
  background: #ffe9a8;
  box-shadow: inset 0 -5px 0 #f3cf6b;
}
.lw-post-bike {
  font-size: 40px;
}
body.lw .lw-post-parcel {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 86px;
  min-height: 70px;
  padding: 10px;
  border: 3px solid #8a5528;
  border-radius: 10px;
  background: #d9a868;
  color: #1f2d4d;
  font: 700 24px/1 var(--lw-font, Fredoka, sans-serif);
  box-shadow: 0 5px 0 #8a5528;
  transition: transform 0.15s;
}
.lw-post-tape {
  position: absolute;
  inset: 0 auto 0 50%;
  width: 12px;
  margin-left: -6px;
  background: #ffcf3f99;
}
.lw-post-parcel b {
  position: relative;
  padding: 2px 8px;
  border-radius: 8px;
  background: #fff;
}
.lw-post-dots {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  max-width: 70px;
  padding: 5px;
  border-radius: 8px;
  background: #fff;
}
.lw-post-dots i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ef5b93;
}
body.lw .lw-post-parcel.selected {
  transform: translateY(-8px) scale(1.08);
  box-shadow: 0 0 0 5px #ffcf3f, 0 8px 0 #8a5528;
}
body.lw .lw-post-parcel.sent {
  pointer-events: none;
}
@media (max-width: 600px) {
  .lw-cups-table {
    height: 180px;
  }
  body.lw .lw-cup {
    width: 78px;
    height: 88px;
  }
  body.lw .lw-cup.up {
    bottom: 100px;
  }
  .lw-cups-fish {
    font-size: 40px;
  }
  .lw-post-street {
    flex-wrap: wrap;
    row-gap: 14px;
  }
  body.lw .lw-post-house {
    width: 44%;
  }
}

/* ================================================================== */
/* Spiele mit eigenen Klängen (ab 8.22.0)                                */
/* ================================================================== */
.lw-g5-status {
  justify-self: center;
  padding: 6px 16px;
  border-radius: 999px;
  background: #fff8dc;
  color: #1f2d4d;
  font-family: var(--lw-font, Fredoka, sans-serif);
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  box-shadow: 0 3px 0 #1f2d4d14;
}
.lw-g5-progress {
  display: flex;
  justify-content: center;
  gap: 8px;
}
.lw-g5-progress i {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #e6eef7;
  box-shadow: inset 0 2px 0 #1f2d4d14;
  transition: background 0.3s, transform 0.3s;
}
.lw-g5-progress i.on {
  background: #ffcf3f;
  transform: scale(1.2);
  box-shadow: 0 0 10px #ffcf3f;
}
.lw-g5-bit {
  position: absolute;
  z-index: 30;
  width: 9px;
  height: 9px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  pointer-events: none;
  animation: lw-g5-bit 0.6s ease-out forwards;
}
@keyframes lw-g5-bit {
  to {
    transform: translate(var(--bx), var(--by)) scale(0.2);
    opacity: 0;
  }
}
body.lw .lw-sfx-toggle {
  display: block;
  margin: 14px auto 0;
  padding: 10px 18px;
  border: 0;
  border-radius: 999px;
  background: #e8f6ff;
  color: #1f2d4d;
  font: 600 17px/1 var(--lw-font, Fredoka, sans-serif);
  box-shadow: 0 4px 0 #bcdcf3;
  cursor: pointer;
}
body.lw .lw-sfx-toggle[aria-pressed="false"] {
  background: #f1f1f1;
  box-shadow: 0 4px 0 #d6d6d6;
}

/* Seifenblasen */
body.lw .lw-bubbles {
  display: grid;
  gap: 10px;
  width: min(680px, 100%);
  margin: 0 auto;
}
.lw-bubble-field {
  position: relative;
  height: 380px;
  overflow: hidden;
  border-radius: 26px;
  background:
    radial-gradient(circle at 80% 18%, #fff7 0 8%, transparent 9%),
    linear-gradient(#8fd3ff, #d9f1ff 75%, #b8e39a 75%);
  box-shadow: inset 0 -8px 0 #8fcf6a;
  touch-action: none;
}
.lw-bubble-wand {
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 16px;
  height: 60px;
  margin-left: -8px;
  border-radius: 8px;
  background: #ef5b93;
  box-shadow: 0 -34px 0 -2px transparent;
}
.lw-bubble-wand::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -34px;
  width: 38px;
  height: 38px;
  margin-left: -19px;
  border: 6px solid #ef5b93;
  border-radius: 50%;
}
body.lw .lw-bubble {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  min-height: 0;
  padding: 0;
  border: 2px solid #ffffffcc;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 28%, #fff 0 9%, transparent 10%),
    radial-gradient(circle at 68% 74%, #ffffff66 0 7%, transparent 8%),
    radial-gradient(circle at 50% 50%, transparent 0 55%, color-mix(in srgb, var(--tint) 55%, transparent) 72%, #fff9 100%),
    color-mix(in srgb, var(--tint) 38%, transparent);
  box-shadow: inset 0 0 18px #ffffffaa, 0 4px 10px #1f2d4d1a;
  color: #1f2d4d;
  font: 700 30px/1 var(--lw-font, Fredoka, sans-serif);
  text-shadow: 0 1px 0 #fff;
  will-change: transform;
  cursor: pointer;
}
body.lw .lw-bubble.popped {
  animation: lw-bubble-pop 0.25s ease-out forwards;
}
@keyframes lw-bubble-pop {
  to {
    opacity: 0;
    filter: blur(2px);
    scale: 1.6;
  }
}
body.lw .lw-bubble.wobble span {
  display: inline-block;
  animation: lw-sk-shake 0.4s;
}

/* Tierchor */
body.lw .lw-choir {
  display: grid;
  gap: 10px;
  width: min(640px, 100%);
  margin: 0 auto;
}
.lw-choir-stage {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 14px;
  padding: 26px 12px 18px;
  border-radius: 26px;
  background:
    radial-gradient(ellipse 60% 24% at 50% 100%, #b5793f 0 99%, transparent 100%),
    linear-gradient(#1f2d4d, #2c4474 70%, #b5793f 70%);
  box-shadow: inset 0 -8px 0 #8a5528;
}
.lw-choir-stage.oops {
  animation: lw-sk-shake 0.4s;
}
body.lw .lw-singer {
  position: relative;
  display: grid;
  place-items: center;
  width: 118px;
  height: 128px;
  min-height: 0;
  padding: 0;
  border: 4px solid color-mix(in srgb, var(--c) 70%, #fff);
  border-radius: 30px 30px 20px 20px;
  background: color-mix(in srgb, var(--c) 30%, #fffdf5);
  box-shadow: 0 6px 0 color-mix(in srgb, var(--c) 60%, #1f2d4d);
  overflow: visible;
}
body.lw .lw-singer:disabled {
  opacity: 1;
  cursor: default;
}
.lw-singer-face {
  font-size: 62px;
  transition: transform 0.15s;
}
.lw-singer-light {
  position: absolute;
  left: 50%;
  bottom: 30%;
  width: 160px;
  height: 230px;
  margin-left: -80px;
  background: radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--c) 60%, #fff) 0, transparent 70%);
  opacity: 0;
  pointer-events: none;
  clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%);
  transform-origin: bottom;
}
.lw-singer-note {
  position: absolute;
  top: -10px;
  right: 8px;
  color: var(--c);
  font-size: 30px;
  font-weight: 700;
  text-shadow: 0 2px 0 #1f2d4d;
  opacity: 0;
}
.lw-singer.sing .lw-singer-face {
  animation: lw-sing 0.5s ease-out;
}
.lw-singer.sing .lw-singer-light {
  animation: lw-spot 0.6s ease-out;
}
.lw-singer.sing .lw-singer-note {
  animation: lw-note 0.8s ease-out;
}
.lw-singer.sing {
  animation: lw-singer-glow 0.6s ease-out;
}
@keyframes lw-sing {
  30% {
    transform: scale(1.25) translateY(-8px) rotate(-6deg);
  }
  60% {
    transform: scale(1.1) rotate(4deg);
  }
}
@keyframes lw-spot {
  20% {
    opacity: 0.85;
  }
  to {
    opacity: 0;
  }
}
@keyframes lw-note {
  20% {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate(16px, -40px) rotate(20deg);
  }
}
@keyframes lw-singer-glow {
  30% {
    box-shadow: 0 6px 0 color-mix(in srgb, var(--c) 60%, #1f2d4d), 0 0 30px 6px var(--c);
  }
}
.lw-choir-stage.cheer .lw-singer-face {
  animation: lw-sing 0.5s ease-out 2;
}

/* Blumen gießen */
body.lw .lw-garden {
  position: relative;
  display: grid;
  gap: 12px;
  width: min(640px, 100%);
  margin: 0 auto;
  padding-top: 16px;
}
.lw-garden-bed {
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  gap: 10px;
  padding: 20px 10px 14px;
  border-radius: 26px;
  background: linear-gradient(#d9f1ff 0 70%, #8fd36a 70%);
  transition: background 0.8s;
}
.lw-garden.sunny .lw-garden-bed {
  background: linear-gradient(#fff4c2 0 70%, #8fd36a 70%);
}
.lw-garden-pot {
  position: relative;
  display: grid;
  justify-items: center;
  width: 140px;
}
.lw-garden-plant {
  width: 90px;
  height: 135px;
  cursor: pointer;
}
.lw-garden-plant svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.lw-garden-plant g {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transition: transform 0.5s cubic-bezier(0.3, 1.6, 0.5, 1), opacity 0.3s;
}
.lw-garden-plant .lw-plant-bloom {
  transform-origin: 50% 50%;
}
.lw-garden-plant.stage-0 .lw-plant-stem {
  transform: scaleY(0.05);
}
.lw-garden-plant.stage-0 g:not(.lw-plant-stem),
.lw-garden-plant.stage-1 .lw-plant-leaf,
.lw-garden-plant.stage-1 .lw-plant-bud,
.lw-garden-plant.stage-1 .lw-plant-bloom,
.lw-garden-plant.stage-2 .lw-plant-bud,
.lw-garden-plant.stage-2 .lw-plant-bloom,
.lw-garden-plant.stage-3 .lw-plant-bloom {
  transform: scale(0);
  opacity: 0;
}
.lw-garden-plant.stage-1 .lw-plant-stem {
  transform: scaleY(0.35);
}
.lw-garden-plant.stage-2 .lw-plant-stem {
  transform: scaleY(0.7);
}
.lw-garden-plant.stage-4 .lw-plant-bud {
  opacity: 0;
}
.lw-garden-pot.bloom .lw-plant-bloom {
  animation: lw-bloom-spin 1.2s cubic-bezier(0.3, 1.5, 0.5, 1);
}
@keyframes lw-bloom-spin {
  from {
    transform: scale(0) rotate(-90deg);
  }
}
.lw-garden-pot.small .lw-garden-plant {
  filter: saturate(0.6);
  animation: lw-sk-shake 0.4s;
}
.lw-garden-pot.droop .lw-garden-plant svg {
  transform: rotate(18deg) translateY(6px);
  transform-origin: 50% 100%;
  filter: saturate(0.5) brightness(0.9);
  transition: transform 0.6s;
}
.lw-garden-pot.wet .lw-garden-soil {
  animation: lw-soil 0.5s ease-out;
}
@keyframes lw-soil {
  40% {
    background: #6b4424;
  }
}
body.lw .lw-garden-soil {
  position: relative;
  width: 110px;
  height: 64px;
  min-height: 0;
  margin-top: -6px;
  padding: 0;
  border: 0;
  border-radius: 6px 6px 26px 26px;
  background: linear-gradient(#8a5528 0 22%, #ff9a3c 22%);
  box-shadow: inset 0 -8px 0 #e0772a, 0 5px 0 #1f2d4d22;
}
.lw-garden-count {
  position: absolute;
  right: -6px;
  top: -12px;
  display: grid;
  place-items: center;
  min-width: 30px;
  height: 30px;
  border: 3px solid #fff;
  border-radius: 15px;
  background: #3aa7f0;
  color: #fff;
  font: 700 16px/1 var(--lw-font, Fredoka, sans-serif);
}
.lw-garden-sign {
  position: absolute;
  left: -8px;
  bottom: 70px;
  display: grid;
  place-items: center;
  min-width: 44px;
  min-height: 34px;
  padding: 3px 6px;
  border: 3px solid #8a5528;
  border-radius: 8px;
  background: #fff4d6;
  color: #1f2d4d;
  font: 700 22px/1 var(--lw-font, Fredoka, sans-serif);
  transform: rotate(-6deg);
}
.lw-garden-drops {
  max-width: 64px;
  font-size: 13px;
  line-height: 1.1;
  text-align: center;
}
body.lw .lw-garden-reset {
  position: absolute;
  right: 0;
  bottom: 70px;
  width: 34px;
  height: 34px;
  min-height: 0;
  padding: 0;
  border-radius: 50%;
  background: #fff;
  color: #1f2d4d;
  font-size: 18px;
  box-shadow: 0 2px 0 #1f2d4d22;
}
body.lw .lw-garden-sun {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: 999px;
  background: #ffcf3f;
  color: #1f2d4d;
  font-size: 20px;
  box-shadow: 0 5px 0 #e0a800;
}
.lw-sun-face {
  display: inline-block;
  font-size: 30px;
  animation: lw-sun-turn 6s linear infinite;
}
@keyframes lw-sun-turn {
  to {
    transform: rotate(360deg);
  }
}
.lw-garden-can {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 5;
  font-size: 40px;
  opacity: 0;
  pointer-events: none;
  transform: translate(-10%, -60%);
}
.lw-garden-can.pour {
  animation: lw-can-pour 0.8s ease-out;
}
@keyframes lw-can-pour {
  0% {
    opacity: 0;
    transform: translate(10%, -90%) rotate(0);
  }
  25%,
  70% {
    opacity: 1;
    transform: translate(-10%, -60%) rotate(-30deg);
  }
  to {
    opacity: 0;
    transform: translate(-10%, -80%) rotate(0);
  }
}
.lw-garden-drop {
  position: absolute;
  z-index: 4;
  width: 8px;
  height: 12px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: #3aa7f0;
  opacity: 0;
  pointer-events: none;
  animation: lw-garden-drop 0.6s ease-in forwards;
}
@keyframes lw-garden-drop {
  15% {
    opacity: 1;
  }
  to {
    opacity: 0.2;
    transform: translateY(110px);
  }
}

/* Taschenlampe */
body.lw .lw-flash {
  display: grid;
  gap: 10px;
  width: min(680px, 100%);
  margin: 0 auto;
}
.lw-flash-room {
  --x: 50%;
  --y: 50%;
  --r: 100px;
  position: relative;
  height: 400px;
  overflow: hidden;
  border-radius: 26px;
  background:
    repeating-linear-gradient(90deg, #ffe9c2 0 44px, #ffe1ad 44px 88px) 0 0 / 100% 72%,
    linear-gradient(#ffe9c2 0 72%, #c98a4b 72%);
  background-repeat: no-repeat;
  touch-action: none;
  cursor: crosshair;
}
.lw-flash-window {
  position: absolute;
  left: 8%;
  top: 8%;
  width: 90px;
  height: 80px;
  border: 6px solid #fff;
  border-radius: 8px;
  background: radial-gradient(circle at 70% 30%, #fff5b8 0 12%, transparent 13%), #1f2d4d;
}
.lw-flash-bed {
  position: absolute;
  right: 6%;
  bottom: 18%;
  width: 36%;
  height: 22%;
  border-radius: 18px 18px 8px 8px;
  background: linear-gradient(#3aa7f0 0 55%, #2f86c8 55%);
}
.lw-flash-shelf {
  position: absolute;
  left: 34%;
  top: 30%;
  width: 30%;
  height: 10px;
  border-radius: 4px;
  background: #b5793f;
}
.lw-flash-rug {
  position: absolute;
  left: 12%;
  bottom: 4%;
  width: 40%;
  height: 16%;
  border-radius: 50%;
  background: repeating-radial-gradient(#ef5b93 0 10px, #ff9fb4 10px 20px);
}
body.lw .lw-flash-thing {
  position: absolute;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  min-height: 0;
  margin: -32px 0 0 -32px;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  font-size: 46px;
  transform: rotate(var(--rot));
}
body.lw .lw-flash-thing.found {
  animation: lw-flash-found 0.8s cubic-bezier(0.3, 1.6, 0.5, 1) forwards;
  filter: drop-shadow(0 0 12px #ffcf3f);
}
@keyframes lw-flash-found {
  50% {
    transform: scale(1.5) rotate(0);
  }
  to {
    transform: scale(1.2) rotate(0);
  }
}
body.lw .lw-flash-thing.nope {
  animation: lw-sk-shake 0.4s;
}
.lw-flash-dark {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(circle var(--r) at var(--x) var(--y), transparent 0 70%, #0b1226cc 88%, #0b1226f2 100%);
  transition: opacity 0.8s;
}
.lw-flash-room.lights-on .lw-flash-dark {
  opacity: 0;
}
@media (max-width: 600px) {
  .lw-bubble-field {
    height: 340px;
  }
  body.lw .lw-singer {
    width: 74px;
    height: 96px;
    border-radius: 22px 22px 16px 16px;
  }
  .lw-singer-face {
    font-size: 40px;
  }
  .lw-choir-stage {
    gap: 8px;
  }
  .lw-garden-pot {
    width: 104px;
  }
  body.lw .lw-garden-soil {
    width: 84px;
  }
  .lw-flash-room {
    height: 360px;
  }
  body.lw .lw-flash-thing {
    font-size: 36px;
    width: 52px;
    height: 52px;
    margin: -26px 0 0 -26px;
  }
}
/* Farb-Blasen (Stufe 1): kräftiger, damit Rot, Pink und Gelb gut zu unterscheiden sind */
body.lw .lw-bubble.color-only {
  background:
    radial-gradient(circle at 30% 28%, #fff 0 9%, transparent 10%),
    radial-gradient(circle at 68% 74%, #ffffff66 0 7%, transparent 8%),
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--tint) 55%, transparent) 0 60%, var(--tint) 85%, #fff9 100%);
}

/* Schattenrätsel (8.22.2, Fehlermeldungen #12/#13): Schatten als gezeichnetes Bild, Antworten 2×2 auf dem Handy */
.lw-shadow-img {
  grid-area: 1 / 1;
  width: 150px;
  height: 150px;
  opacity: 0.85;
  transition: opacity 0.6s ease;
}
.lw-shadow-stage > .lw-shadow {
  grid-area: 1 / 1;
}
.lw-shadow.lw-shadow-color {
  filter: none;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.lw-shadow-stage.revealed .lw-shadow-img {
  opacity: 0;
}
.lw-shadow-stage.revealed .lw-shadow.lw-shadow-color {
  opacity: 1;
}
.lw-shadow-options.n3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.lw-shadow-options.n4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 600px) {
  .lw-shadow-img {
    width: 120px;
    height: 120px;
  }
  .lw-shadow-options.n4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lw-shadow-options.n3 .lw-shadow-pic {
    font-size: 44px;
  }
}

/* Reihe merken (8.22.2, Fehlermeldung #14): Zeitbalken, bis sich ein Bild versteckt */
body.lw .lw-memo-timer {
  width: min(360px, 80%);
  height: 16px;
  margin: 10px auto;
  border-radius: 10px;
  background: #e6eef7;
  overflow: hidden;
  box-shadow: inset 0 2px 0 #1f2d4d14;
}
.lw-memo-timer i {
  display: block;
  height: 100%;
  border-radius: 10px;
  background: linear-gradient(90deg, #ffcf3f, #ff9a3c);
  animation: lw-memo-run var(--memo-time, 4s) linear forwards;
}
@keyframes lw-memo-run {
  from {
    width: 100%;
  }
  to {
    width: 0;
  }
}

/* ================================================================== */
/* Sojas Bastelwelt (ab 8.23.0)                                          */
/* ================================================================== */
body.lw .lw-craft {
  position: relative;
  display: grid;
  gap: 10px;
  width: min(760px, 100%);
  margin: 0 auto;
}
.lw-craft-canvas {
  display: block;
  width: 100%;
  border: 5px solid #fff;
  border-radius: 24px;
  box-shadow: 0 6px 0 #1f2d4d1f, 0 12px 26px #1f2d4d1a;
  outline: 3px dashed #c98a4b66;
  outline-offset: -12px;
  touch-action: none;
  cursor: pointer;
}
.lw-craft-hud {
  position: absolute;
  left: 16px;
  top: 12px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border: 2px dashed #c98a4b;
  border-radius: 999px;
  background: #fff8e6;
  color: #1f2d4d;
  font: 600 16px/1 var(--lw-font, Fredoka, sans-serif);
  pointer-events: none;
}
.lw-craft-count {
  display: grid;
  place-items: center;
  min-width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #ffcf3f;
  font-size: 18px;
}
.lw-craft-count.bump {
  animation: lw-bw-pop 0.4s cubic-bezier(0.3, 1.7, 0.5, 1);
}
body.lw .lw-craft-jump {
  justify-self: center;
  min-width: 200px;
  padding: 16px 30px;
  border-radius: 999px;
  background: #5fbf3f;
  color: #fff;
  font: 700 24px/1 var(--lw-font, Fredoka, sans-serif);
  box-shadow: 0 6px 0 #3f962a;
  touch-action: none;
}
body.lw .lw-craft-jump:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 #3f962a;
}

/* Bastelwelt: Karte, Welten, Kleiderschrank (ab 8.24.0) */
.lw-craft-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
body.lw .lw-craft-map,
body.lw .lw-craft-wardrobe {
  min-height: 0;
  padding: 8px 14px;
  border: 2px dashed #c98a4b;
  border-radius: 999px;
  background: #fff8e6;
  color: #1f2d4d;
  font: 600 16px/1 var(--lw-font, Fredoka, sans-serif);
  box-shadow: 0 3px 0 #e0bf63;
}
.lw-craft-world {
  padding: 6px 14px;
  border-radius: 999px;
  background: #1f2d4d;
  color: #fff;
  font: 600 16px/1 var(--lw-font, Fredoka, sans-serif);
}
.lw-craft-stage {
  position: relative;
}
.lw-craft-stage .lw-craft-hud {
  left: 16px;
  top: 12px;
}
.lw-craft-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  padding: 10px;
  border-radius: 24px;
  background: #1f2d4d99;
}
.lw-craft-overlay[hidden] {
  display: none;
}
.lw-craft-panel {
  display: grid;
  gap: 10px;
  justify-items: center;
  width: min(560px, 100%);
  max-height: 100%;
  overflow: auto;
  padding: 14px;
  border: 4px dashed #c98a4b;
  border-radius: 22px;
  background:
    radial-gradient(circle, #ffffff 0 1.5px, transparent 2px) 0 0 / 16px 16px,
    #fff4d6;
  color: #1f2d4d;
}
.lw-craft-panel h3 {
  margin: 0;
  font: 700 20px/1.1 var(--lw-font, Fredoka, sans-serif);
}
.lw-craft-mapline {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  position: relative;
}
body.lw .lw-craft-node {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 2px;
  width: 92px;
  min-height: 0;
  padding: 8px 4px;
  border: 3px solid #fff;
  border-radius: 18px;
  background: #fffdf5;
  color: #1f2d4d;
  font: 600 13px/1.1 var(--lw-font, Fredoka, sans-serif);
  box-shadow: 0 4px 0 #e0bf63;
}
.lw-craft-node .ic {
  font-size: 32px;
}
body.lw .lw-craft-node.here {
  border-color: #ffcf3f;
  box-shadow: 0 0 0 4px #ffcf3f88, 0 4px 0 #e0bf63;
}
body.lw .lw-craft-node.locked {
  background: #eee;
  opacity: 0.75;
}
.lw-craft-node .ok {
  position: absolute;
  top: -8px;
  right: -6px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #5fbf3f;
  color: #fff;
  font-style: normal;
  font-weight: 700;
}
body.lw .lw-craft-close {
  min-height: 0;
  padding: 10px 22px;
  border-radius: 999px;
  background: #5fbf3f;
  color: #fff;
  font: 700 17px/1 var(--lw-font, Fredoka, sans-serif);
  box-shadow: 0 4px 0 #3f962a;
}
/* 8.46.0: Knopf „Als Nächstes: Sojas Bastelwelt“ im Kleiderschrank */
body.lw .lw-craft-go {
  min-height: 0;
  padding: 10px 20px;
  border-radius: 999px;
  background: #ef5b93;
  color: #fff;
  font: 700 16px/1.1 var(--lw-font, Fredoka, sans-serif);
  box-shadow: 0 4px 0 #c13d71;
}
body.lw .lw-craft-go:disabled {
  background: #5fbf3f;
  box-shadow: 0 4px 0 #3f962a;
  opacity: 1;
}
.lw-craft-bankline {
  margin: 0;
  font: 600 15px/1.2 var(--lw-font, Fredoka, sans-serif);
}
.lw-craft-preview canvas {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: #bfe6ff;
  border: 3px dashed #3aa7f0;
}
.lw-craft-clothes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
body.lw .lw-craft-cloth {
  display: grid;
  justify-items: center;
  gap: 2px;
  width: 78px;
  min-height: 0;
  padding: 6px 4px;
  border: 3px solid #fff;
  border-radius: 16px;
  background: #fffdf5;
  color: #1f2d4d;
  font: 600 12px/1.1 var(--lw-font, Fredoka, sans-serif);
  box-shadow: 0 3px 0 #e0bf63;
}
.lw-craft-cloth .ic {
  font-size: 26px;
}
.lw-craft-cloth small {
  font-size: 11px;
  color: #5d6679;
}
body.lw .lw-craft-cloth.worn {
  border-color: #5fbf3f;
  background: #e8f8df;
}
body.lw .lw-craft-cloth.poor {
  opacity: 0.6;
}
@media (max-width: 600px) {
  body.lw .lw-craft-map,
  body.lw .lw-craft-wardrobe,
  .lw-craft-world {
    font-size: 14px;
    padding: 6px 10px;
  }
  body.lw .lw-craft-node {
    width: 74px;
  }
  .lw-craft-node .ic {
    font-size: 26px;
  }
}

/* Große Weltenkarte zum Verschieben (ab 8.24.0) */
.lw-map-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  border-radius: 24px;
  box-shadow: inset 0 0 0 4px #ffffff99;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  touch-action: pan-x pan-y;
}
.lw-map-scroll .lw-map.lw-map-big {
  width: auto;
  height: min(440px, 52dvh);
  max-width: none;
  border-radius: 0;
  box-shadow: none;
}
.lw-map-scroll.portrait {
  overflow-x: hidden;
  overflow-y: auto;
  max-height: calc(100dvh - 260px);
}
.lw-map-scroll.portrait .lw-map.lw-map-big {
  width: 100%;
  height: auto;
  max-height: none;
}
.lw-node.locked {
  opacity: 0.55;
  filter: grayscale(0.6);
}
.lw-node-label.light,
.lw-node-count.light {
  fill: #fffdf8;
  stroke: #1f2d4d;
}
.lw-realm-text {
  fill: #1f2d4d;
  font-family: var(--lw-font);
  font-size: 20px;
  font-weight: 700;
}
.lw-realm-text.light {
  fill: #fffdf8;
}
.lw-album-tabs {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
@media (max-width: 640px) {
  .lw-album-tabs {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* ---------- Fehlermeldungen #15/#16 (ab 8.25.0): Müllsortierung und Fische auf schmalen Handys ---------- */
body.lw .recycle-game-modern .recycle-items {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
}
body.lw .recycle-game-modern .recycle-item {
  min-width: 0;
  grid-template-columns: auto minmax(0, 1fr) auto;
}
body.lw .recycle-game-modern .recycle-item strong {
  overflow-wrap: break-word;
  hyphens: auto;
}
body.lw .recycle-game-modern .recycle-bins {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
body.lw .recycle-game-modern .recycle-bin {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
  text-align: center;
}
body.lw .recycle-game-modern .recycle-bin > em {
  align-self: center;
  height: auto;
}
body.lw .recycle-game-modern .recycle-bin-items {
  grid-column: auto;
  justify-content: center;
  width: 100%;
}
@media (max-width: 560px) {
  body.lw .recycle-game-modern .recycle-items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 8px;
  }
  body.lw .recycle-game-modern .recycle-item {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 2px;
    min-height: 64px;
    padding: 6px 6px 8px;
    text-align: center;
  }
  body.lw .recycle-game-modern .recycle-item span {
    font-size: 26px;
  }
  body.lw .recycle-game-modern .recycle-item strong {
    font-size: 13px;
    line-height: 1.15;
  }
  body.lw .recycle-game-modern .recycle-grip,
  body.lw .recycle-game-modern .recycle-bin > em {
    display: none;
  }
  body.lw .recycle-game-modern .recycle-bins {
    gap: 8px;
  }
  body.lw .recycle-game-modern .recycle-bin {
    min-height: 150px;
    padding: 18px 4px 8px;
    border-width: 3px;
    border-radius: 18px;
  }
  body.lw .recycle-game-modern .recycle-bin-symbol {
    width: 42px;
    height: 42px;
    margin: 8px 0 2px;
  }
  body.lw .recycle-game-modern .recycle-bin-lid {
    width: 52px;
  }
  body.lw .recycle-game-modern .recycle-bin-symbol::after {
    left: 13px;
  }
  body.lw .recycle-game-modern .recycle-bin strong {
    font-size: 15px;
  }
  body.lw .recycle-game-modern .recycle-bin small {
    font-size: 10px;
    line-height: 1.2;
  }
  body.lw .recycle-game-modern .recycle-sorted-item > small {
    display: none;
  }
}
/* Fische für Soja: Sprechblase über Soja, Teich mit 2–3 Reihen, schmal ohne Überlauf */
body.lw .lw-feed-bubble {
  left: 50%;
  top: -30px;
  transform: translateX(-50%);
  border-radius: 16px;
  font-family: var(--lw-font, Fredoka, sans-serif);
  font-weight: 700;
  color: #1f2d4d;
}
body.lw .lw-feed-bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -7px;
  margin-left: -7px;
  border: 7px solid transparent;
  border-top-color: #fff;
  border-bottom: 0;
}
body.lw .lw-feed-cat {
  margin-top: 26px;
}
body.lw .lw-feed-pond {
  height: calc(90px + var(--rows, 2) * 40px);
}
@media (max-width: 600px) {
  body.lw .lw-feed-pond {
    height: calc(70px + var(--rows, 2) * 40px);
  }
}
@media (max-width: 440px) {
  body.lw .lw-feed-game {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    width: 100%;
  }
  body.lw .lw-feed-cat {
    width: 84px;
  }
  body.lw .lw-feed-bowl-wrap {
    width: 100%;
    max-width: 200px;
    justify-self: center;
  }
  body.lw .lw-feed-bowl {
    width: 100%;
    min-height: 70px;
    padding: 8px 10px 10px;
  }
  body.lw .lw-feed-count {
    right: -6px;
  }
  body.lw .lw-feed-pond .lw-feed-fish {
    width: 44px;
    height: 44px;
    margin-left: -22px;
    font-size: 32px;
  }
  body.lw .lw-feed-bowl .lw-feed-fish {
    width: 26px;
    height: 26px;
    font-size: 21px;
  }
}
/* Sehr niedrige Fenster (z. B. Handy quer): Spielleiste nicht über das Spiel legen */
@media (max-height: 560px) {
  body.lw .actions {
    position: static;
  }
}
/* Kein seitliches Wackeln auf dem Handy durch Deko, die über den Rand ragt */
html:has(body.lw),
body.lw {
  overflow-x: clip;
}

/* ================================================================== */
/* Spielwelten zum Aussuchen (ab 8.25.0) – lernwelt-scenes.js         */
/* ================================================================== */
.lw-scene-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.lw-scene-layer[hidden] {
  display: none;
}
.lw-scene-layer > svg {
  display: block;
  width: 100%;
  height: 100%;
}
body.lw.lw-scene-strand {
  background: #8fd3ff;
}
body.lw.lw-scene-meer {
  background: #2f93d6;
}
body.lw.lw-scene-winter {
  background: #d6ecff;
}
body.lw.lw-scene-dschungel {
  background: #bff0ff;
}
body.lw.lw-scene-mond {
  background: #0b1633;
}
body.lw.lw-scene-mars {
  background: #e8a86a;
}
body.lw-scene-meer .lw-fx-cloud,
body.lw-scene-mond .lw-fx-cloud,
body.lw-scene-mars .lw-fx-cloud,
body.lw-scene-dschungel .lw-fx-cloud {
  display: none;
}
/* Schrift direkt auf dunklem Hintergrund */
body.lw.lw-scene-dark footer,
body.lw.lw-scene-dark .copyright,
body.lw.lw-scene-meer footer {
  color: #fff;
  text-shadow: 0 1px 2px #1f2d4d;
}

/* Ausrüstung für Soja und die Vorleser */
.lw-gear {
  display: none;
}
body.lw-gear-space .lw-gear-space,
body.lw-gear-dive .lw-gear-dive,
body.lw-gear-beach .lw-gear-beach,
body.lw-gear-winter .lw-gear-winter,
body.lw-gear-jungle .lw-gear-jungle {
  display: inline;
}
.lw-scene-card .lw-gear {
  display: none !important;
}
/* ab 8.31.1: Sojas Kostüme aus dem Kleiderschrank trägt sie überall (body.lw-wear-<id>).
   Kostüme und Ausrüstung sind nur Schmuck – sie dürfen nie Knöpfe wie das Elternbereich-Schloss verdecken. */
.lw-cos {
  display: none;
}
.lw-soja .lw-cos,
.lw-soja .lw-gear,
.lw-guide .lw-gear {
  pointer-events: none;
}
body.lw-wear-hut .lw-cos-hut,
body.lw-wear-krone .lw-cos-krone,
body.lw-wear-zauberhut .lw-cos-zauberhut,
body.lw-wear-helm .lw-cos-helm,
body.lw-wear-schal .lw-cos-schal,
body.lw-wear-schleife .lw-cos-schleife,
body.lw-wear-brille .lw-cos-brille {
  display: inline;
}
/* Ausrüstung des gewählten Ortes geht vor: Raum- und Taucheranzug decken alles ab, Mütze/Hut den Kopf,
   Winterschal den Hals, Sonnenbrille das Gesicht. Im Wetter-Anziehspiel und in der Ortswahl ohne Kostüm. */
body.lw-gear-space .lw-cos,
body.lw-gear-dive .lw-cos,
body.lw-gear-winter .lw-cos-head,
body.lw-gear-winter .lw-cos-neck,
body.lw-gear-jungle .lw-cos-head,
body.lw-gear-beach .lw-cos-face,
.lw-scene-card .lw-cos,
.lw-g7-dress .lw-cos {
  display: none !important;
}
.lw-scene-card[data-gear="space"] .lw-gear-space,
.lw-scene-card[data-gear="dive"] .lw-gear-dive,
.lw-scene-card[data-gear="beach"] .lw-gear-beach,
.lw-scene-card[data-gear="winter"] .lw-gear-winter,
.lw-scene-card[data-gear="jungle"] .lw-gear-jungle {
  display: inline !important;
}

/* Bewegung in den Welten */
.sc-wave {
  animation: sc-wave 7s linear infinite;
}
@keyframes sc-wave {
  to {
    transform: translateX(-100px);
  }
}
.sc-boat {
  animation: sc-boat 70s linear infinite;
}
@keyframes sc-boat {
  to {
    transform: translateX(1980px);
  }
}
.sc-foam {
  animation: sc-foam 4s ease-in-out infinite alternate;
}
@keyframes sc-foam {
  from {
    transform: translateY(0);
    opacity: 0.95;
  }
  to {
    transform: translateY(8px);
    opacity: 0.45;
  }
}
.sc-crab {
  animation: sc-crab 9s ease-in-out infinite alternate;
}
@keyframes sc-crab {
  from {
    transform: translateX(-120px);
  }
  to {
    transform: translateX(140px);
  }
}
.sc-legs {
  transform-box: fill-box;
  transform-origin: center;
  animation: sc-legs 0.25s linear infinite alternate;
}
@keyframes sc-legs {
  to {
    transform: scaleY(0.55);
  }
}
.sc-flag {
  transform-box: fill-box;
  transform-origin: 0 50%;
  animation: sc-flag 1.2s ease-in-out infinite alternate;
}
@keyframes sc-flag {
  to {
    transform: scaleX(0.8) skewY(6deg);
  }
}
.sc-sway,
.sc-sway-c,
.sc-vine {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: sc-sway 5s ease-in-out infinite alternate;
}
.sc-sway-c {
  transform-origin: 50% 85%;
  animation-duration: 6s;
}
.sc-vine {
  transform-origin: 50% 0;
  animation-duration: 7s;
}
@keyframes sc-sway {
  from {
    transform: rotate(-4deg);
  }
  to {
    transform: rotate(4deg);
  }
}
.sc-ray {
  opacity: 0.07;
  animation: sc-ray 6s ease-in-out infinite alternate;
}
@keyframes sc-ray {
  to {
    opacity: 0.2;
  }
}
.sc-bubble {
  animation: sc-rise 12s linear infinite;
}
@keyframes sc-rise {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  50% {
    transform: translate(var(--dx, 10px), -470px);
  }
  90% {
    opacity: 0.9;
  }
  100% {
    transform: translate(0, -950px);
    opacity: 0;
  }
}
.sc-snow {
  animation: sc-snow 12s linear infinite;
}
@keyframes sc-snow {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(var(--dx, 20px), 475px);
  }
  100% {
    transform: translate(0, 950px);
  }
}
.sc-smoke {
  transform-box: fill-box;
  transform-origin: center;
  animation: sc-smoke 3.9s ease-out infinite;
}
@keyframes sc-smoke {
  0% {
    transform: translate(0, 0) scale(0.5);
    opacity: 0.9;
  }
  100% {
    transform: translate(34px, -130px) scale(1.9);
    opacity: 0;
  }
}
.sc-float {
  animation: sc-float 6s ease-in-out infinite alternate;
}
@keyframes sc-float {
  from {
    transform: translateY(-6px);
  }
  to {
    transform: translateY(8px);
  }
}
.sc-hop {
  animation: sc-hop 7s ease-in-out infinite;
}
@keyframes sc-hop {
  0%,
  84%,
  100% {
    transform: translateY(0);
  }
  90% {
    transform: translateY(-34px);
  }
  95% {
    transform: translateY(0);
  }
}
.sc-fall {
  animation: sc-fall 0.7s linear infinite;
}
@keyframes sc-fall {
  to {
    transform: translateY(40px);
  }
}
.sc-twinkle {
  animation: sc-twinkle 3s ease-in-out infinite alternate;
}
@keyframes sc-twinkle {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.15;
  }
}
.sc-shoot {
  opacity: 0;
  animation: sc-shoot 11s ease-in 3s infinite;
}
@keyframes sc-shoot {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  2% {
    opacity: 1;
  }
  9%,
  100% {
    transform: translate(-620px, 300px);
    opacity: 0;
  }
}
.sc-blink {
  animation: sc-blink 1.6s steps(1) infinite;
}
@keyframes sc-blink {
  50% {
    opacity: 0.25;
  }
}
.sc-rover {
  animation: sc-rover 48s ease-in-out infinite;
}
@keyframes sc-rover {
  0%,
  100% {
    transform: translateX(-280px);
  }
  50% {
    transform: translateX(280px);
  }
}
.sc-wheel {
  transform-box: fill-box;
  transform-origin: center;
  animation: sc-wheel 48s ease-in-out infinite;
}
@keyframes sc-wheel {
  0%,
  100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(2290deg);
  }
}
.sc-dust {
  animation: sc-dust 34s linear infinite;
}
@keyframes sc-dust {
  0% {
    transform: translateX(200px);
    opacity: 0;
  }
  10%,
  90% {
    opacity: 1;
  }
  100% {
    transform: translateX(-1100px);
    opacity: 0;
  }
}
/* neue Besucher: Flossen, Quallen, Raketenflamme */
.w-tail {
  transform-origin: 18px 22px;
  animation: sc-tail 0.45s ease-in-out infinite alternate;
}
@keyframes sc-tail {
  from {
    transform: rotate(-14deg);
  }
  to {
    transform: rotate(14deg);
  }
}
.w-jelly {
  transform-origin: 25px 14px;
  animation: sc-jelly 1.6s ease-in-out infinite;
}
@keyframes sc-jelly {
  0%,
  100% {
    transform: scale(1, 1);
  }
  40% {
    transform: scale(1.12, 0.84);
  }
}
.w-flip,
.w-flip2 {
  transform-origin: 32px 32px;
  animation: sc-flip 1.2s ease-in-out infinite alternate;
}
.w-flip2 {
  transform-origin: 50px 30px;
  animation-direction: alternate-reverse;
}
@keyframes sc-flip {
  from {
    transform: rotate(-18deg);
  }
  to {
    transform: rotate(22deg);
  }
}
.w-flame {
  transform-origin: 18px 21px;
  animation: sc-flame 0.12s linear infinite alternate;
}
@keyframes sc-flame {
  from {
    transform: scaleX(0.65);
  }
  to {
    transform: scaleX(1.15);
  }
}

/* Auswahl-Dialog */
body.lw #sceneModal .modal-box.lw-scene-box {
  width: min(1000px, 96vw);
  max-width: none;
  max-height: 94vh;
  overflow: auto;
  text-align: center;
}
.lw-scene-box h2 {
  margin: 0 0 4px;
}
.lw-scene-box > p {
  margin: 0 0 6px;
  color: var(--lw-ink-soft, #4a5878);
}
.lw-scene-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
  margin: 14px 0 18px;
}
body.lw .lw-scene-card {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border: 4px solid #fff;
  border-radius: 22px;
  background: #cdeeff;
  box-shadow: 0 6px 0 #1f2d4d22;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
body.lw .lw-scene-card:hover {
  transform: translateY(-3px);
}
body.lw .lw-scene-card.sel {
  border-color: var(--lw-sun, #ffcf3f);
  box-shadow: 0 0 0 4px #ffcf3f88, 0 8px 0 var(--lw-sun-dark, #e0a800);
  transform: translateY(-3px);
}
.lw-scene-prev {
  position: absolute;
  inset: 0;
}
.lw-scene-prev svg,
.lw-scene-prev img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}
.lw-scene-card:not(.sel) .lw-scene-prev * {
  animation-play-state: paused !important;
}
.lw-scene-fig {
  position: absolute;
  left: 50%;
  bottom: 34px;
  width: 40%;
  transform: translateX(-50%);
}
.lw-scene-fig svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.lw-scene-fig .lw-eyes-happy,
.lw-scene-fig .lw-eyes-sleep,
.lw-scene-fig .lw-lids,
.lw-scene-fig .lw-lids-half,
.lw-scene-fig .lw-yawn,
.lw-scene-fig .lw-tongue {
  display: none;
}
.lw-scene-card.sel .lw-scene-fig .lw-eyes-open {
  display: none;
}
.lw-scene-card.sel .lw-scene-fig .lw-eyes-happy {
  display: inline;
}
.lw-scene-hop svg {
  animation: lw-jump 0.7s cubic-bezier(0.3, 1.5, 0.5, 1);
}
.lw-scene-name {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  background: #ffffffeb;
  color: var(--lw-ink, #1f2d4d);
  font: 700 17px/1.2 var(--lw-font, Fredoka, sans-serif);
}
.lw-scene-name i {
  font-style: normal;
}
body.lw #sceneGo {
  min-width: min(360px, 100%);
}
/* Hinweis im Begrüßungsdialog */
body.lw .lw-scene-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 4px 0 12px;
  padding: 8px 12px;
  border: 3px dashed var(--lw-sky, #3aa7f0);
  border-radius: 18px;
  background: #eaf6ff;
  color: var(--lw-ink, #1f2d4d);
  font: 600 16px/1.2 var(--lw-font, Fredoka, sans-serif);
  cursor: pointer;
}
.lw-scene-chip[hidden] {
  display: none !important;
}
.lw-scene-chip i {
  font-size: 28px;
  font-style: normal;
}
.lw-scene-chip span {
  flex: 1;
  text-align: left;
}
.lw-scene-chip em {
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--lw-sky, #3aa7f0);
  color: #fff;
  font-style: normal;
  font-weight: 700;
  white-space: nowrap;
}
@media (max-width: 560px) {
  .lw-scene-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .lw-scene-name {
    left: 4px;
    right: 4px;
    bottom: 5px;
    padding: 3px 6px;
    font-size: 13px;
  }
  .lw-scene-fig {
    bottom: 26px;
    width: 44%;
  }
  body.lw .lw-scene-chip {
    font-size: 14px;
  }
  .lw-scene-chip em {
    padding: 5px 8px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .lw-scene-layer *,
  .lw-scene-card *,
  .lw-critter .lw-wing {
    animation: none !important;
  }
}

/* Fehlermeldung #18 (ab 8.25.1): Bild-Antworten in Ballons, Wolken, Blumen und Kisten groß zeigen */
body.lw #answers.lw-skinned > .answer.lw-sk-pic .answer-content {
  font-size: 50px;
  line-height: 1;
  text-shadow: none;
}
body.lw #answers.lw-skin-chests > .answer.lw-sk-pic .answer-content {
  filter: drop-shadow(0 2px 0 #5a3514);
}
@media (max-width: 600px) {
  body.lw #answers.lw-skinned > .answer.lw-sk-pic .answer-content {
    font-size: 42px;
  }
  body.lw #answers.lw-skin-flowers > .answer.lw-sk-pic .answer-content {
    font-size: 36px;
  }
}

/* ================================================================== */
/* Sternbilder und Schneemann bauen (ab 8.26.0) – lernwelt-games6.js  */
/* ================================================================== */
body.lw .lw-g6-sky,
body.lw .lw-g6-snow {
  display: grid;
  gap: 10px;
  width: min(680px, 100%);
  margin: 0 auto;
}
.lw-g6-status {
  justify-self: center;
  padding: 6px 16px;
  border-radius: 999px;
  background: #fff8dc;
  color: #1f2d4d;
  font-family: var(--lw-font, Fredoka, sans-serif);
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  box-shadow: 0 3px 0 #1f2d4d14;
}
.lw-g6-bit {
  position: absolute;
  z-index: 30;
  width: 9px;
  height: 9px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  pointer-events: none;
  animation: lw-g5-bit 0.6s ease-out forwards;
}
.lw-g6-panel {
  position: relative;
  aspect-ratio: 10 / 7;
  border: 4px solid #fff;
  border-radius: 24px;
  background:
    radial-gradient(circle at 12% 18%, #fff 0 1px, transparent 2px),
    radial-gradient(circle at 78% 12%, #fff 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 30% 80%, #fff 0 1px, transparent 2px),
    radial-gradient(circle at 88% 70%, #fff 0 1px, transparent 2px),
    radial-gradient(circle at 55% 8%, #ffffffaa 0 1px, transparent 2px),
    radial-gradient(circle at 8% 60%, #ffffffaa 0 1px, transparent 2px),
    radial-gradient(circle at 64% 90%, #ffffffaa 0 1px, transparent 2px),
    linear-gradient(#0b1633, #23355c);
  box-shadow: 0 6px 0 #1f2d4d22;
  overflow: hidden;
  touch-action: manipulation;
}
.lw-g6-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.lw-g6-drawn line {
  stroke: #ffcf3f;
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: lw-g6-draw 0.35s ease-out forwards;
}
@keyframes lw-g6-draw {
  to {
    stroke-dashoffset: 0;
  }
}
.lw-g6-fill,
.lw-g6-deco {
  opacity: 0;
  transition: opacity 0.9s ease;
}
.lw-g6-panel.done .lw-g6-fill {
  opacity: 0.9;
}
.lw-g6-panel.done .lw-g6-deco {
  opacity: 1;
}
.lw-g6-panel.done .lw-g6-drawn line {
  stroke: #fff;
}
.lw-g6-panel.done .lw-g6-lines {
  animation: lw-g6-glow 1.6s ease-in-out infinite alternate;
}
@keyframes lw-g6-glow {
  to {
    filter: drop-shadow(0 0 8px #ffcf3f);
  }
}
body.lw .lw-g6-dot {
  position: absolute;
  z-index: 2;
  width: 46px;
  height: 46px;
  min-height: 0;
  margin: -23px 0 0 -23px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  box-shadow: none;
  cursor: pointer;
}
.lw-g6-dot i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px 2px #ffffffaa;
  transition: transform 0.2s, background 0.2s;
}
.lw-g6-dot b {
  position: absolute;
  left: 50%;
  top: 50%;
  min-width: 26px;
  padding: 1px 6px;
  border-radius: 999px;
  background: #ffffffe6;
  color: #1f2d4d;
  font: 700 16px/1.2 var(--lw-font, Fredoka, sans-serif);
  transform: translate(calc(-50% + var(--lx, 0px)), calc(-50% + var(--ly, 0px)));
  pointer-events: none;
}
.lw-g6-dot.on i {
  background: #ffcf3f;
  transform: scale(1.35);
  box-shadow: 0 0 12px 4px #ffcf3faa;
}
.lw-g6-dot.on b {
  background: #ffcf3f;
}
.lw-g6-dot.hint i {
  animation: lw-g6-pulse 0.9s ease-in-out infinite;
}
@keyframes lw-g6-pulse {
  50% {
    transform: scale(1.7);
    box-shadow: 0 0 16px 8px #ffcf3f88;
  }
}
.lw-g6-dot.nope {
  animation: lw-g6-shake 0.35s;
}
@keyframes lw-g6-shake {
  25% {
    transform: translateX(-5px);
  }
  75% {
    transform: translateX(5px);
  }
}
.lw-g6-panel.done .lw-g6-dot b {
  opacity: 0;
  transition: opacity 0.6s;
}
.lw-g6-stage {
  position: relative;
  height: 330px;
  border: 4px solid #fff;
  border-radius: 24px;
  background: linear-gradient(#bfe3ff 0 62%, #fff 62%);
  box-shadow: 0 6px 0 #1f2d4d22;
  overflow: hidden;
}
.lw-g6-man {
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: min(300px, 90%);
  height: calc(100% - 12px);
  transform: translateX(-50%);
  overflow: visible;
}
.lw-g6-drop {
  animation: lw-g6-drop 0.45s cubic-bezier(0.3, 1.4, 0.5, 1) both;
}
@keyframes lw-g6-drop {
  from {
    transform: translateY(-120px);
    opacity: 0;
  }
}
.lw-g6-pop {
  transform-box: fill-box;
  transform-origin: center;
  animation: lw-g6-pop 0.45s cubic-bezier(0.3, 1.6, 0.5, 1) both;
}
@keyframes lw-g6-pop {
  from {
    transform: scale(0);
  }
}
.lw-g6-stage.done .lw-g6-man {
  transform-origin: 50% 100%;
  animation: lw-g6-wave 0.9s ease-in-out 3;
}
@keyframes lw-g6-wave {
  25% {
    transform: translateX(-50%) rotate(-4deg);
  }
  75% {
    transform: translateX(-50%) rotate(4deg);
  }
}
.lw-g6-flakes i {
  position: absolute;
  top: -10px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 1px #c9d9ea;
  animation: lw-g6-flake 6s linear infinite;
}
@keyframes lw-g6-flake {
  to {
    transform: translate(18px, 350px);
  }
}
body.lw .lw-g6-side {
  position: absolute;
  top: 40%;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 0;
  padding: 10px 14px;
  border: 4px dashed #3aa7f0;
  border-radius: 20px;
  background: #ffffffe6;
  color: #1f2d4d;
  font: 700 18px/1 var(--lw-font, Fredoka, sans-serif);
  animation: lw-g6-pulse-box 1.2s ease-in-out infinite;
}
.lw-g6-side[hidden] {
  display: none !important;
}
.lw-g6-side.l {
  left: 10px;
}
.lw-g6-side.r {
  right: 10px;
}
.lw-g6-side b {
  font-size: 26px;
}
body.lw .lw-g6-side.nope {
  animation: lw-g6-shake 0.35s;
}
@keyframes lw-g6-pulse-box {
  50% {
    transform: scale(1.06);
  }
}
.lw-g6-tray {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: 16px;
  min-height: 100px;
  padding: 12px;
  border: 3px dashed #c9d9ea;
  border-radius: 20px;
  background: #f4f9ff;
}
body.lw .lw-g6-ball {
  width: var(--s);
  height: var(--s);
  min-height: 0;
  padding: 0;
  border: 3px solid #c9d9ea;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff 0 30%, #eef5fc 70%, #dbe9f7);
  box-shadow: 0 5px 0 #c9d9ea;
  cursor: pointer;
}
body.lw .lw-g6-item {
  width: 78px;
  height: 78px;
  min-height: 0;
  padding: 8px;
  border: 3px solid #dbe9f7;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 5px 0 #c9d9ea;
  cursor: pointer;
}
.lw-g6-item svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
body.lw .lw-g6-item.used {
  opacity: 0.25;
  cursor: default;
}
body.lw .lw-g6-ball.nope,
body.lw .lw-g6-item.nope {
  animation: lw-g6-shake 0.35s;
}
@media (max-width: 560px) {
  .lw-g6-stage {
    height: 280px;
  }
  .lw-g6-dot b {
    font-size: 14px;
  }
  body.lw .lw-g6-item {
    width: 64px;
    height: 64px;
  }
  body.lw .lw-g6-side {
    padding: 8px 10px;
    font-size: 15px;
  }
  .lw-g6-status {
    font-size: 16px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .lw-g6-sky *,
  .lw-g6-snow * {
    animation: none !important;
  }
  .lw-g6-drawn line {
    stroke-dashoffset: 0;
  }
}

/* ================================================================== */
/* Spiegelbild, Mondlandung, Wetter-Garderobe, Schatzkarte (ab 8.27.0) */
/* ================================================================== */
body.lw .lw-g7 {
  display: grid;
  gap: 10px;
  width: min(680px, 100%);
  margin: 0 auto;
}
body.lw .lw-g7 .nope {
  animation: lw-g6-shake 0.35s;
}
/* Spiegelbild */
.lw-g7-board {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: 8px;
  width: min(100%, calc(var(--cols) * 78px));
  margin: 0 auto;
  padding: 14px;
  border: 4px solid #fff;
  border-radius: 24px;
  background: linear-gradient(135deg, #23355c, #1f2d4d);
  box-shadow: 0 6px 0 #1f2d4d33;
}
.lw-g7-cell {
  aspect-ratio: 1;
  border-radius: 14px;
  background: #ffffff1f;
}
body.lw .lw-g7-cell.right {
  min-height: 0;
  padding: 0;
  border: 3px dashed #ffffff55;
  background: #ffffff14;
  box-shadow: none;
  cursor: pointer;
}
.lw-g7-cell svg {
  display: block;
  width: 86%;
  height: 86%;
  margin: 7%;
}
body.lw .lw-g7-cell.full {
  border-style: solid;
  border-color: transparent;
  background: #ffffff2e;
}
.lw-g7-cell.right.full svg {
  animation: lw-g6-pop 0.4s cubic-bezier(0.3, 1.6, 0.5, 1) both;
}
.lw-g7-cell.hint,
body.lw .lw-g7-cell.right.hint {
  box-shadow: 0 0 0 4px #ffcf3f;
  animation: lw-g6-pulse-box 1s ease-in-out infinite;
}
/* 8.34.0 (Fehlermeldung #23): das gesuchte Feld rechts war als Tipp nicht zu sehen */
body.lw .lw-g7-cell.right.hint {
  border: 3px solid #ffcf3f;
  background: #ffcf3f33;
}
.lw-g7-mirrorline {
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 50%;
  width: 6px;
  margin-left: -3px;
  border-radius: 3px;
  background: linear-gradient(#dff3ff, #bfe6ff);
  box-shadow: 0 0 12px #bfe6ff;
}
.lw-g7-board.done .lw-g7-cell.full svg {
  animation: lw-g7-shine 1s ease-in-out 2;
}
@keyframes lw-g7-shine {
  50% {
    transform: scale(1.12) rotate(6deg);
    filter: drop-shadow(0 0 8px #fff);
  }
}
.lw-g7-palette {
  display: flex;
  justify-content: center;
  gap: 14px;
}
body.lw .lw-g7-color {
  width: 70px;
  height: 70px;
  min-height: 0;
  padding: 6px;
  border: 4px solid #fff;
  border-radius: 18px;
  background: #1f2d4d;
  box-shadow: 0 5px 0 #1f2d4d33;
}
body.lw .lw-g7-color.on {
  border-color: #ffcf3f;
  box-shadow: 0 0 0 4px #ffcf3f88, 0 5px 0 #e0a800;
}
.lw-g7-color svg {
  width: 100%;
  height: 100%;
}
/* Mondlandung */
.lw-g7-space {
  position: relative;
  height: 330px;
  overflow: hidden;
  border: 4px solid #fff;
  border-radius: 24px;
  background: linear-gradient(#0b1633, #23355c);
  box-shadow: 0 6px 0 #1f2d4d22;
  touch-action: none;
  cursor: pointer;
}
.lw-g7-stars {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 10% 20%, #fff 0 1px, transparent 2px),
    radial-gradient(circle at 30% 10%, #fff 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 70% 25%, #fff 0 1px, transparent 2px),
    radial-gradient(circle at 88% 12%, #ffffffaa 0 1px, transparent 2px),
    radial-gradient(circle at 55% 40%, #ffffffaa 0 1px, transparent 2px),
    radial-gradient(circle at 18% 45%, #ffffffaa 0 1px, transparent 2px);
}
.lw-g7-ground {
  position: absolute;
  left: -5%;
  right: -5%;
  bottom: 0;
  height: 70px;
  border-radius: 50% 50% 0 0 / 30px 30px 0 0;
  background:
    radial-gradient(ellipse at 20% 60%, #a3aebd 0 16px, transparent 17px),
    radial-gradient(ellipse at 75% 75%, #a3aebd 0 12px, transparent 13px),
    #c9d1dc;
}
.lw-g7-pad {
  position: absolute;
  bottom: 44px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 23%;
  height: 20px;
  border: 3px solid #1f2d4d;
  border-radius: 8px;
  background: repeating-linear-gradient(90deg, #ffcf3f 0 12px, #1f2d4d 12px 20px);
  translate: -50% 0; /* 8.34.1: eigene Eigenschaft, damit Wackeln/Pulsieren die Mitte nicht verschiebt */
}
.lw-g7-pad span {
  position: absolute;
  bottom: 24px;
  left: 50%;
  translate: -50% 0; /* 8.34.1 (Fehlermeldung #21): Schild mittig über dem Landeplatz */
  padding: 4px 10px;
  border-radius: 12px;
  background: #fff;
  color: #1f2d4d;
  font: 700 22px/1 var(--lw-font, Fredoka, sans-serif);
  box-shadow: 0 3px 0 #1f2d4d33;
  white-space: nowrap;
}
.lw-g7-dots {
  display: inline-block;
  color: #ff6f4f;
  font-size: 18px;
  line-height: 0.95;
  letter-spacing: 1px;
  text-align: center;
}
/* 8.34.1 (Fehlermeldung #21): Lenkknöpfe reagieren auf dem iPhone zuverlässig (kein Scrollen, kein Markieren) */
body.lw .lw-g7-steer {
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.lw-g7-pad.good span {
  background: #5fbf3f;
  color: #fff;
}
.lw-g7-pad.good .lw-g7-dots {
  color: #fff;
}
.lw-g7-pad.hint span {
  animation: lw-g6-pulse-box 1s ease-in-out infinite;
  box-shadow: 0 0 0 4px #ffcf3f;
}
.lw-g7-ship {
  position: absolute;
  top: 0;
  z-index: 2;
  width: 76px;
  height: 86px;
  pointer-events: none;
  will-change: transform, left;
}
.lw-g7-ship svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.lw-g7-flame {
  transform-box: fill-box;
  transform-origin: 50% 0;
  animation: sc-flame 0.12s linear infinite alternate;
}
.lw-g7-ship.boost .lw-g7-flame {
  transform: scale(1.4, 1.8);
  animation: none;
}
.lw-g7-ship.landed .lw-g7-flame {
  display: none;
}
.lw-g7-controls {
  display: flex;
  justify-content: center;
  gap: 24px;
}
body.lw .lw-g7-steer {
  width: 96px;
  min-height: 56px;
  border-radius: 18px;
  background: #3aa7f0;
  color: #fff;
  font-size: 26px;
  box-shadow: 0 5px 0 #1f7fc4;
  touch-action: none;
}
/* Wetter-Garderobe */
.lw-g7-wstage {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  align-items: center;
  height: 290px;
  padding: 10px 16px;
  border: 4px solid #fff;
  border-radius: 24px;
  background: linear-gradient(#cfeaff, #eef8ff 70%, #bfe39a 70%);
  box-shadow: 0 6px 0 #1f2d4d22;
  overflow: hidden;
}
.lw-g7-wstage.w-regen {
  background: linear-gradient(#a9bdd1, #d8e4ef 70%, #8fc47a 70%);
}
.lw-g7-wstage.w-schnee {
  background: linear-gradient(#cfe0f2, #eef5fc 70%, #fff 70%);
}
.lw-g7-wstage.w-sonne {
  background: linear-gradient(#8fd3ff, #d8f1ff 70%, #9fe07a 70%);
}
.lw-g7-wsky svg {
  width: 100%;
  max-width: 190px;
  height: auto;
  overflow: visible;
}
.lw-g7-rain {
  animation: lw-g7-rain 0.6s linear infinite;
}
@keyframes lw-g7-rain {
  from {
    transform: translate(2px, -6px);
    opacity: 1;
  }
  to {
    transform: translate(-3px, 14px);
    opacity: 0.2;
  }
}
.lw-g7-snowfall {
  animation: lw-g7-snow 2.2s linear infinite;
}
@keyframes lw-g7-snow {
  from {
    transform: translate(0, -8px);
  }
  to {
    transform: translate(4px, 22px);
    opacity: 0.2;
  }
}
.lw-g7-rays {
  transform-box: fill-box;
  transform-origin: center;
  animation: lw-g7-spin 12s linear infinite;
}
@keyframes lw-g7-spin {
  to {
    transform: rotate(360deg);
  }
}
.lw-g7-dress {
  position: relative;
  justify-self: center;
  width: min(210px, 100%);
}
.lw-g7-dress > svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.lw-g7-dress .lw-wear,
.lw-g7-dress svg.lw-g7-wear {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.lw-g7-dress .lw-gear,
.lw-g7-dress .lw-eyes-happy,
.lw-g7-dress .lw-lids,
.lw-g7-dress .lw-lids-half,
.lw-g7-dress .lw-eyes-sleep,
.lw-g7-dress .lw-yawn,
.lw-g7-dress .lw-tongue {
  display: none !important;
}
.lw-g7-wstage.done .lw-g7-dress .lw-eyes-open {
  display: none;
}
.lw-g7-wstage.done .lw-g7-dress .lw-eyes-happy {
  display: inline !important;
}
.lw-g7-wstage.done .lw-g7-dress {
  animation: lw-jump 0.7s cubic-bezier(0.3, 1.5, 0.5, 1) 3;
}
.lw-g7-dress.no {
  animation: lw-g7-no 0.5s ease-in-out;
}
@keyframes lw-g7-no {
  25% {
    transform: rotate(-6deg);
  }
  75% {
    transform: rotate(6deg);
  }
}
.lw-g7-on {
  animation: lw-g6-pop 0.4s cubic-bezier(0.3, 1.6, 0.5, 1) both;
  transform-box: fill-box;
  transform-origin: center;
}
.lw-g7-shelf {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  padding: 12px;
  border: 3px dashed #dbe9f7;
  border-radius: 20px;
  background: #f4f9ff;
}
body.lw .lw-g7-cloth {
  display: grid;
  justify-items: center;
  gap: 2px;
  width: 96px;
  min-height: 0;
  padding: 8px 6px 6px;
  border: 3px solid #dbe9f7;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 5px 0 #c9d9ea;
}
.lw-g7-cloth svg {
  width: 64px;
  height: 52px;
  overflow: visible;
}
.lw-g7-cloth span {
  color: #1f2d4d;
  font: 600 13px/1.1 var(--lw-font, Fredoka, sans-serif);
}
body.lw .lw-g7-cloth.used {
  opacity: 0.3;
}
/* Schatzkarte */
.lw-g7-route {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.lw-g7-step {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #1f2d4d;
  font: 700 24px/1 var(--lw-font, Fredoka, sans-serif);
}
.lw-g7-step b {
  padding: 6px 10px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 3px 0 #1f2d4d1f;
  font-size: 26px;
}
.lw-g7-step em {
  display: grid;
  place-items: center;
  min-width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ffcf3f;
  font-style: normal;
}
.lw-g7-step i {
  color: #4a5878;
  font-size: 16px;
  font-style: normal;
}
.lw-g7-map {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  gap: 5px;
  width: min(100%, 440px);
  margin: 0 auto;
  padding: 10px;
  border: 5px solid #b07a45;
  border-radius: 20px;
  background: #3aa7f0;
  box-shadow: 0 6px 0 #8a5a32;
}
body.lw .lw-g7-spot {
  position: relative;
  aspect-ratio: 1;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: radial-gradient(circle at 40% 35%, #ffe9b8, #f3cf85);
  box-shadow: inset 0 -4px 0 #e0b566;
  cursor: pointer;
}
.lw-g7-spot .deco {
  position: absolute;
  inset: 12%;
  width: 76%;
  height: 76%;
  opacity: 0.85;
}
.lw-g7-spot.trail::after {
  content: "🐾";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 18px;
  opacity: 0.6;
}
.lw-g7-spot.empty {
  background: radial-gradient(circle, #d9b36a 0 30%, #f3cf85 32%);
}
.lw-g7-spot.found {
  background: radial-gradient(circle, #fff3b0, #ffcf3f);
}
.lw-g7-spot .chest {
  position: absolute;
  inset: 8%;
  width: 84%;
  height: 84%;
  animation: lw-g6-pop 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) both;
}
.lw-g7-pirate {
  position: absolute;
  z-index: 2;
  width: calc((100% - 20px) / var(--n) * 0.9);
  transform: translate(-50%, -58%);
  transition: left 0.28s ease, top 0.28s ease;
  pointer-events: none;
}
.lw-g7-pirate svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.lw-g7-pirate .lw-eyes-happy,
.lw-g7-pirate .lw-lids,
.lw-g7-pirate .lw-lids-half,
.lw-g7-pirate .lw-eyes-sleep,
.lw-g7-pirate .lw-yawn,
.lw-g7-pirate .lw-tongue {
  display: none;
}
@media (max-width: 560px) {
  .lw-g7-space {
    height: 300px;
  }
  .lw-g7-pad span {
    padding: 3px 7px;
  }
  .lw-g7-pad span {
    font-size: 18px;
  }
  .lw-g7-dots {
    font-size: 13px;
  }
  .lw-g7-wstage {
    height: 240px;
    padding: 8px;
  }
  body.lw .lw-g7-cloth {
    width: 82px;
  }
  .lw-g7-cloth svg {
    width: 54px;
    height: 44px;
  }
  .lw-g7-step {
    font-size: 20px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .lw-g7 * {
    animation: none !important;
    transition: none !important;
  }
}

/* ================================================================== */
/* Perlentaucher, Affenbrücke, Unterschiede, Boote (ab 8.28.0)        */
/* ================================================================== */
/* Perlentaucher */
.lw-g8-sea {
  position: relative;
  height: 320px;
  overflow: hidden;
  border: 4px solid #fff;
  border-radius: 24px;
  background: linear-gradient(#7fd3f7, #2f93d6 70%, #1f5f9e);
  box-shadow: 0 6px 0 #1f2d4d22;
}
.lw-g8-sand {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 60px;
  border-radius: 50% 50% 0 0 / 22px 22px 0 0;
  background: #f3d9a0;
}
.lw-g8-weed {
  position: absolute;
  bottom: 30px;
  width: 14px;
  height: 120px;
  border-radius: 7px;
  background: #3f9427;
  transform-origin: 50% 100%;
  animation: sc-sway 4s ease-in-out infinite alternate;
}
.lw-g8-weed.a {
  left: 6%;
}
.lw-g8-weed.b {
  right: 7%;
  height: 90px;
  background: #5fbf3f;
  animation-delay: -2s;
}
body.lw .lw-g8-shell {
  position: absolute;
  width: 26%;
  max-width: 128px;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  transform: translate(-50%, -50%);
  cursor: pointer;
}
.lw-g8-shell svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.lw-g8-shell .lid {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transition: transform 0.28s cubic-bezier(0.3, 1.4, 0.5, 1);
}
.lw-g8-shell .pearls {
  opacity: 0;
  transition: opacity 0.2s;
}
.lw-g8-shell.open .lid {
  transform: translate(-6%, -52%) rotate(-20deg) scale(0.8);
}
.lw-g8-shell.open .pearls {
  opacity: 1;
}
.lw-g8-jar {
  position: absolute;
  top: 10px;
  right: 12px;
  display: flex;
  align-items: baseline;
  gap: 4px;
  padding: 6px 12px;
  border: 3px solid #fff;
  border-radius: 16px 16px 20px 20px;
  background: #dff3ffd9;
  color: #1f2d4d;
  font: 700 22px/1 var(--lw-font, Fredoka, sans-serif);
}
.lw-g8-jar span {
  font-size: 15px;
}
.lw-g8-jar.bump {
  animation: lw-fx-bump 0.55s cubic-bezier(0.3, 1.8, 0.5, 1);
}
/* Affenbrücke */
.lw-g8-jungle {
  position: relative;
  height: 250px;
  overflow: hidden;
  border: 4px solid #fff;
  border-radius: 24px;
  background: linear-gradient(#bff0ff, #d9f7c8);
  box-shadow: 0 6px 0 #1f2d4d22;
}
.lw-g8-river {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 70px;
  background: repeating-linear-gradient(90deg, #3aa7f0 0 30px, #4fb3f3 30px 60px);
  animation: lw-g8-flow 3s linear infinite;
}
@keyframes lw-g8-flow {
  to {
    background-position: 60px 0;
  }
}
.lw-g8-cliff {
  position: absolute;
  bottom: 0;
  z-index: 1;
  width: 9%;
  height: 58%;
  background: #5fbf3f;
  box-shadow: inset 0 -80px 0 #8a5a32;
}
.lw-g8-cliff.l {
  left: 0;
  border-radius: 0 20px 0 0;
}
.lw-g8-cliff.r {
  right: 0;
  border-radius: 20px 0 0 0;
}
.lw-g8-rope {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 34%;
  height: 30px;
  border-bottom: 4px solid #8a5a32;
  border-radius: 0 0 50% 50%;
}
.lw-g8-deck {
  --w: calc(100% / var(--total));
  position: absolute;
  left: 9%;
  right: 9%;
  top: 42%;
  z-index: 1;
  display: flex;
  height: 30px;
}
.lw-g8-deck .slot {
  position: relative;
  flex: 1;
  margin: 0 1px;
  border: 2px solid #6e4524;
  border-radius: 4px;
  background: #b07a45;
}
.lw-g8-deck .slot.gap {
  border: 2px dashed #6e452499;
  background: transparent;
}
.lw-g8-deck .slot i {
  position: absolute;
  left: 0;
  right: 0;
  top: 34px;
  color: #1f2d4d;
  font: 600 12px/1 var(--lw-font, Fredoka, sans-serif);
  font-style: normal;
  text-align: center;
}
.lw-g8-gapbox {
  position: absolute;
  top: 0;
  height: 30px;
  display: flex;
  outline: 3px dashed #ff6f4f;
  outline-offset: 2px;
  border-radius: 4px;
}
.lw-g8-gapbox.fixed {
  outline-color: #5fbf3f;
}
.lw-g8-gapbox.drop .lw-g8-plank {
  transform: translateY(160px) rotate(24deg);
  opacity: 0;
  transition: transform 0.6s ease-in, opacity 0.6s ease-in;
}
.lw-g8-plank {
  display: flex;
  height: 30px;
  width: calc(var(--len) * 30px);
}
.lw-g8-gapbox .lw-g8-plank {
  width: auto;
  flex: var(--len);
  animation: lw-g6-pop 0.3s ease-out both;
}
.lw-g8-plank i {
  flex: 1;
  margin: 0 1px;
  border: 2px solid #6e4524;
  border-radius: 4px;
  background: #d9a066;
}
.lw-g8-monkey {
  position: absolute;
  left: 1%;
  top: calc(42% - 62px);
  z-index: 2;
  width: 56px;
}
.lw-g8-monkey.cross {
  left: calc(99% - 56px);
  transition: left 2.2s linear;
  animation: lw-g8-hop 0.3s ease-in-out infinite alternate;
}
@keyframes lw-g8-hop {
  to {
    transform: translateY(-8px);
  }
}
.lw-g8-planks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  padding: 12px;
  border: 3px dashed #dbe9f7;
  border-radius: 20px;
  background: #f4f9ff;
}
body.lw .lw-g8-pick {
  display: grid;
  justify-items: center;
  gap: 4px;
  min-height: 0;
  padding: 10px 12px;
  border: 3px solid #dbe9f7;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 5px 0 #c9d9ea;
}
.lw-g8-pick b {
  color: #1f2d4d;
  font: 700 20px/1 var(--lw-font, Fredoka, sans-serif);
}
body.lw .lw-g8-pick.used {
  opacity: 0.3;
}
/* Unterschiede finden */
.lw-g8-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.lw-g8-pic {
  overflow: hidden;
  border: 4px solid #fff;
  border-radius: 18px;
  box-shadow: 0 5px 0 #1f2d4d22;
  cursor: crosshair;
}
.lw-g8-pic.right {
  border-color: #ffcf3f;
}
.lw-g8-pic svg {
  display: block;
  width: 100%;
  height: auto;
}
.lw-g8-ring {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: lw-g6-draw 0.4s ease-out forwards;
}
.lw-g8-pic .lw-g8-ring {
  stroke-dasharray: none;
  stroke-dashoffset: 0;
  animation: lw-g6-pop 0.35s cubic-bezier(0.3, 1.6, 0.5, 1) both;
  transform-box: fill-box;
  transform-origin: center;
}
.lw-g8-miss {
  fill: #ff6f4f;
  font: 700 22px/1 sans-serif;
  text-anchor: middle;
  dominant-baseline: middle;
  animation: lw-g8-fade 0.7s ease-out forwards;
}
@keyframes lw-g8-fade {
  to {
    opacity: 0;
  }
}
@media (max-width: 560px) {
  .lw-g8-pair {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}
/* Boote anlegen */
.lw-g8-water {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 16px 12px;
  border: 4px solid #fff;
  border-radius: 24px;
  background: repeating-linear-gradient(170deg, #3aa7f0 0 22px, #45adf1 22px 44px);
  box-shadow: 0 6px 0 #1f2d4d22;
}
.lw-g8-boats,
.lw-g8-docks {
  display: grid;
  gap: 12px;
  align-content: center;
}
body.lw .lw-g8-boat {
  position: relative;
  display: grid;
  grid-template-columns: 62px 1fr;
  align-items: center;
  gap: 6px;
  min-height: 0;
  padding: 4px 8px;
  border: 3px solid transparent;
  border-radius: 18px;
  background: #ffffffcc;
  box-shadow: 0 4px 0 #1f7fc4;
  transition: transform 1.1s cubic-bezier(0.4, 0, 0.3, 1), border-color 0.2s;
  animation: lw-g8-bob 2.4s ease-in-out infinite alternate;
}
.lw-g8-boat svg {
  width: 62px;
  height: 48px;
  grid-row: 1 / 3;
}
.lw-g8-boat .pic,
.lw-g8-dock .pic {
  font-size: 30px;
  line-height: 1;
}
.lw-g8-boat .word,
.lw-g8-dock .word {
  color: #1f2d4d;
  font: 700 16px/1.1 var(--lw-font, Fredoka, sans-serif);
}
body.lw .lw-g8-boat.sel {
  border-color: #ffcf3f;
  box-shadow: 0 0 0 4px #ffcf3f88, 0 4px 0 #e0a800;
  animation: none;
  transform: scale(1.05);
}
body.lw .lw-g8-boat.home {
  z-index: 2;
  animation: none;
  transform: translate(var(--tx), var(--ty)) scale(0.9);
  border-color: #5fbf3f;
}
@keyframes lw-g8-bob {
  to {
    transform: translateY(-4px) rotate(-1deg);
  }
}
body.lw .lw-g8-dock {
  display: grid;
  justify-items: center;
  min-height: 0;
  padding: 8px;
  border: 0;
  border-left: 10px solid #8a5a32;
  border-radius: 6px 16px 16px 6px;
  background: #e8c98a;
  box-shadow: 0 4px 0 #b07a45;
}
body.lw .lw-g8-dock.taken {
  background: #c8ecb4;
  box-shadow: 0 4px 0 #5fbf3f;
}
@media (max-width: 560px) {
  .lw-g8-water {
    gap: 10px;
    padding: 12px 8px;
  }
  body.lw .lw-g8-boat {
    grid-template-columns: 44px 1fr;
    padding: 4px;
  }
  .lw-g8-boat svg {
    width: 44px;
    height: 36px;
  }
  .lw-g8-boat .pic,
  .lw-g8-dock .pic {
    font-size: 24px;
  }
  .lw-g8-boat .word,
  .lw-g8-dock .word {
    font-size: 13px;
  }
  .lw-g8-sea {
    height: 280px;
  }
  .lw-g8-jungle {
    height: 220px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .lw-g8-weed,
  .lw-g8-river,
  .lw-g8-boat {
    animation: none !important;
  }
}
body.lw .lw-g7 .lw-g8-shell.nope {
  animation: lw-g8-shellshake 0.35s;
}
@keyframes lw-g8-shellshake {
  0%,
  100% {
    transform: translate(-50%, -50%);
  }
  25% {
    transform: translate(calc(-50% - 6px), -50%);
  }
  75% {
    transform: translate(calc(-50% + 6px), -50%);
  }
}
body.lw .lw-g8-boat.home {
  pointer-events: none;
}
body.lw .lw-g8-boat.gone {
  visibility: hidden;
}
.lw-g8-dock .moored svg {
  width: 40px;
  height: 30px;
  animation: lw-g6-pop 0.35s ease-out both;
}
body.lw .lw-g8-dock.taken {
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 6px;
}
body.lw .lw-g8-dock.taken::after {
  content: "";
}
.lw-g8-dock .moored {
  display: grid;
  justify-items: center;
  grid-row: 1 / 3;
}
.lw-g8-dock .moored .word {
  font-size: 13px;
}
.lw-g8-dock .moored svg {
  width: 34px;
  height: 26px;
}

/* Fehlermeldung #19 (ab 8.29.0): Bastelwelt-Leiste bricht auf dem iPhone nicht mehr um */
html:has(body.lw) {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
.lw-craft-top > * {
  min-width: 0;
  white-space: nowrap;
}
body.lw .lw-craft-map,
body.lw .lw-craft-wardrobe {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
}
.lw-craft-world {
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}
.lw-craft-stage .lw-craft-hud {
  white-space: nowrap;
}

/* ===== 8.32.0: Vorleser Lian (Junge, 5 Jahre) ===== */
svg[data-figure="lian"] .lw-wing-l {
  transform-origin: 40px 81px;
}
svg[data-figure="lian"] .lw-wing-r {
  transform-origin: 80px 81px;
}
svg[data-figure="lian"] .lw-beak-low {
  transform-origin: 60px 66px;
}
.lw-guide.talking svg[data-figure="lian"] .lw-beak-low {
  animation: lw-talk-mouth 0.28s ease-in-out infinite;
}
@keyframes lw-talk-mouth {
  50% {
    transform: scaleY(1.55);
  }
}
/* Auswahl „Wer liest dir vor?“ in der Ortswahl (wenn Kinder selbst wählen dürfen) */
.lw-guide-pick {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
  flex-wrap: wrap;
}
.lw-guide-pick[hidden] {
  display: none;
}
.lw-guide-pick > span {
  font: 600 18px/1.2 var(--lw-font, Fredoka, sans-serif);
  color: var(--lw-ink, #1f2d4d);
}
.lw-guide-pick button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 6px;
  border: 3px solid #dbe7f3;
  border-radius: 999px;
  background: #fff;
  font: 600 18px/1 var(--lw-font, Fredoka, sans-serif);
  color: var(--lw-ink, #1f2d4d);
  cursor: pointer;
}
.lw-guide-pick button[aria-pressed="true"] {
  border-color: #5fbf3f;
  background: #effae9;
  box-shadow: 0 4px 0 #3f9427;
}
.lw-guide-pick button svg {
  width: 52px;
  height: 55px;
  overflow: visible;
}
.lw-guide-pick .lw-gear {
  display: none !important;
}
.lw-guide-pick .lw-lids,
.lw-guide-pick .lw-eyes-happy,
.lw-guide-pick .lw-cos {
  display: none;
}

/* ===== 8.33.0: Schneeballrennen mit Lian und Soja (lernwelt-games9.js) ===== */
.lw-g9 {
  display: grid;
  gap: 10px;
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
}
.lw-g9-stage {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  border: 4px solid #fff;
  box-shadow: 0 8px 0 #c9dbee, 0 16px 30px #1f5f8a26;
  background: #e6f5ff;
  touch-action: none;
}
.lw-g9-stage.lw-g9-bump {
  animation: lw-g9-bump 0.35s ease;
}
@keyframes lw-g9-bump {
  30% {
    transform: translateX(-6px);
  }
  60% {
    transform: translateX(5px);
  }
}
.lw-g9-canvas {
  display: block;
  width: 100%;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.lw-g9-hud {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 10px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  pointer-events: none;
}
.lw-g9-hud span {
  padding: 5px 12px;
  border-radius: 999px;
  background: #ffffffe6;
  box-shadow: 0 3px 0 #c9dbee;
  font: 600 17px/1.2 var(--lw-font, Fredoka, sans-serif);
  color: var(--lw-ink, #1f2d4d);
}
.lw-g9-task:empty {
  display: none;
}
.lw-g9-msg {
  position: absolute;
  left: 50%;
  top: 22%;
  transform: translateX(-50%);
  max-width: 86%;
  padding: 8px 16px;
  border-radius: 16px;
  background: #1f2d4de6;
  color: #fff;
  text-align: center;
  font: 600 18px/1.25 var(--lw-font, Fredoka, sans-serif);
  pointer-events: none;
  animation: lw-g9-pop 0.3s cubic-bezier(0.3, 1.5, 0.5, 1);
}
.lw-g9-msg[hidden] {
  display: none;
}
@keyframes lw-g9-pop {
  from {
    transform: translateX(-50%) scale(0.7);
    opacity: 0;
  }
}
.lw-g9-controls {
  display: flex;
  justify-content: center;
  gap: 18px;
}
.lw-g9-controls button {
  min-width: 96px;
  min-height: 60px;
  padding: 8px 18px;
  border: 0;
  border-radius: 20px;
  background: #3aa7f0;
  box-shadow: 0 6px 0 #2b86c9;
  color: #fff;
  font: 700 26px/1 var(--lw-font, Fredoka, sans-serif);
  cursor: pointer;
  touch-action: manipulation;
}
.lw-g9-controls button:active {
  transform: translateY(3px);
  box-shadow: 0 3px 0 #2b86c9;
}
.lw-g9-controls .lw-g9-throw {
  background: #5fbf3f;
  box-shadow: 0 6px 0 #3f9427;
  font-size: 22px;
}
.lw-g9-controls [hidden] {
  display: none;
}
@media (max-width: 600px) {
  .lw-g9-hud span {
    font-size: 14px;
  }
  .lw-g9-msg {
    font-size: 15px;
  }
  .lw-g9-controls button {
    min-width: 84px;
    min-height: 54px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .lw-g9-stage.lw-g9-bump,
  .lw-g9-msg {
    animation: none;
  }
}
/* 8.40.1 (Fehlermeldung #32): drei große Wahl-Knöpfe statt ◀ ▶ – die Haufen warten, kein Zeitdruck */
.lw-g9-picks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  width: min(100%, 560px);
}
.lw-g9-picks[hidden] {
  display: none;
}
.lw-g9-controls .lw-g9-pick {
  min-width: 0;
  min-height: 64px;
  padding: 6px 8px;
  background: #fffdf5;
  color: #1f2d4d;
  border: 3px solid #1f2d4d;
  box-shadow: 0 6px 0 #c9dbee;
  font: 700 28px/1.1 var(--lw-font, Fredoka, sans-serif);
  letter-spacing: 0.02em;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.25s ease, transform 0.15s ease;
}
.lw-g9-controls .lw-g9-pick.lw-g9-long {
  font-size: 22px;
  letter-spacing: -0.04em;
}
.lw-g9-controls .lw-g9-pick:disabled {
  cursor: default;
  opacity: 0.55;
}
.lw-g9-controls .lw-g9-pick:not(:disabled) {
  animation: lw-g9-ready 0.35s ease;
}
@keyframes lw-g9-ready {
  from {
    transform: scale(0.9);
  }
}
.lw-g9-controls .lw-g9-pick.lw-g9-melted {
  opacity: 0.25;
  text-decoration: line-through;
  box-shadow: none;
}
.lw-g9-controls .lw-g9-pick.lw-g9-correct {
  opacity: 1;
  background: #5fbf3f;
  border-color: #3f9427;
  color: #fff;
  box-shadow: 0 6px 0 #3f9427;
}
.lw-g9-controls .lw-g9-pick:focus-visible {
  outline: 4px solid #ffcf3f;
  outline-offset: 2px;
}
@media (max-width: 600px) {
  .lw-g9-controls {
    gap: 10px;
  }
  .lw-g9-picks {
    gap: 8px;
  }
  .lw-g9-controls .lw-g9-pick {
    min-height: 56px;
    font-size: 22px;
    padding: 4px;
  }
  .lw-g9-controls .lw-g9-pick.lw-g9-long {
    font-size: 17px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .lw-g9-controls .lw-g9-pick:not(:disabled) {
    animation: none;
  }
}

/* ===== 8.33.1: Zurück-Knöpfe in Ortswahl und Startdialog ===== */
.lw-back-nav {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin: -6px 0 8px;
}
.lw-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 6px 14px;
  border: 2px solid #dbe7f3;
  border-radius: 999px;
  background: #fff;
  color: var(--lw-ink, #1f2d4d);
  font: 600 16px/1 var(--lw-font, Fredoka, sans-serif);
  cursor: pointer;
  box-shadow: 0 3px 0 #dbe7f3;
}
.lw-back-btn span {
  font-size: 20px;
  line-height: 0.8;
}
.lw-back-btn.subtle {
  color: #64748b;
  font-size: 14px;
}
.lw-back-btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #dbe7f3;
}
.lw-back-btn:focus-visible {
  outline: 3px solid #3aa7f0;
  outline-offset: 2px;
}
#welcomeModal .lw-back-nav { padding-right: 58px; }

/* ================================================================== */
/* „Bug melden“ überall (ab 8.34.0)                                    */
/* ================================================================== */
#bugModal {
  z-index: 1300;
}
body.lw-bug-standard-off .bug-launch-row,
body.lw-bug-standard-off #bugOpen {
  display: none !important;
}
.lw-bug-fab {
  position: fixed;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 1250;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 46px;
  padding: 6px 16px 6px 10px;
  border: 3px solid #fff;
  border-radius: 999px;
  background: #1f2d4d;
  color: #fff;
  font-family: var(--lw-font, Fredoka, system-ui, sans-serif);
  font-size: 16px;
  font-weight: 600;
  box-shadow: 0 4px 0 #1f2d4d40, 0 8px 18px #1f2d4d33;
  cursor: pointer;
  opacity: 0.92;
}
.lw-bug-fab[hidden] {
  display: none;
}
.lw-bug-fab span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #ffcf3f;
  font-size: 18px;
}
.lw-bug-fab:hover,
.lw-bug-fab:focus-visible {
  opacity: 1;
  outline: 3px solid #ffcf3f;
  outline-offset: 2px;
}
.lw-bug-fab:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #1f2d4d40;
}
.lw-bug-fab:disabled {
  opacity: 0.7;
  cursor: progress;
}
@media (max-width: 640px) {
  .lw-bug-fab {
    width: 48px;
    height: 48px;
    min-height: 0;
    padding: 0;
    justify-content: center;
    right: max(10px, env(safe-area-inset-right));
    bottom: max(10px, env(safe-area-inset-bottom));
  }
  .lw-bug-fab b {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
}
/* Hinweise unten links sollen den 🐞-Knopf unten rechts nicht verdecken */
body:has(.lw-bug-fab:not([hidden])) .toast-region {
  width: min(380px, calc(100vw - 32px - 64px));
}
/* 8.34.1 (Fehlermeldung #24): Bei „Bewegung reduzieren“ (iPhone-Einstellung) lief das Blinzeln nicht – die Lider
   blieben dann ganz geschlossen und die Figuren hatten scheinbar keine Augen. */
@media (prefers-reduced-motion: reduce) {
  .lw-lids {
    transform: scaleY(0);
  }
  .lw-soja.sleepy .lw-lids,
  .lw-soja.liedown .lw-lids {
    transform: none;
  }
}
@media (max-width: 340px) {
  .lw-g7-ship {
    width: 58px;
    height: 66px;
  }
  .lw-g7-pad {
    width: 26%;
  }
}
/* Spracheingabe bei „Wunsch oder Idee“ (ab 8.34.1) */
.lw-dictate {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: -4px 0 12px;
  padding: 10px 12px;
  border-radius: 18px;
  background: #eef8ff;
  text-align: left;
}
.lw-dictate[hidden] {
  display: none;
}
.lw-dictate-btn {
  flex: none;
  display: grid;
  justify-items: center;
  gap: 2px;
  min-width: 86px;
  padding: 8px 12px;
  border: 3px solid #fff;
  border-radius: 18px;
  background: #3aa7f0;
  color: #fff;
  font: 600 15px/1.1 var(--lw-font, Fredoka, system-ui, sans-serif);
  box-shadow: 0 4px 0 #1f7fc4;
  cursor: pointer;
}
.lw-dictate-ico {
  font-size: 26px;
  line-height: 1;
}
.lw-dictate[data-state="rec"] .lw-dictate-btn {
  background: #ff6f4f;
  box-shadow: 0 4px 0 #c8482c;
  animation: lw-dictate-pulse 1.2s ease-in-out infinite;
}
.lw-dictate[data-state="busy"] .lw-dictate-btn {
  background: #8fa3b8;
  box-shadow: 0 4px 0 #6d8196;
  cursor: progress;
}
.lw-dictate-btn:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #1f7fc4;
}
@keyframes lw-dictate-pulse {
  50% {
    box-shadow: 0 4px 0 #c8482c, 0 0 0 8px #ff6f4f33;
  }
}
.lw-dictate-side {
  display: grid;
  gap: 5px;
  min-width: 0;
}
.lw-dictate-level {
  display: block;
  height: 6px;
  overflow: hidden;
  border-radius: 3px;
  background: #d5e9f7;
}
.lw-dictate-level i {
  display: block;
  height: 100%;
  background: #5fbf3f;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.1s;
}
.lw-dictate:not([data-state="rec"]) .lw-dictate-level {
  display: none;
}
.lw-dictate-msg {
  color: #1f2d4d;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}
.lw-dictate-note {
  color: #52607a;
  font-size: 12px;
  line-height: 1.3;
}
@media (prefers-reduced-motion: reduce) {
  .lw-dictate[data-state="rec"] .lw-dictate-btn {
    animation: none;
  }
}

/* ================================================================== */
/* Heimatspiele 10 (ab 8.35.0)                                          */
/* ================================================================== */
body.lw .lw-g10 .nope {
  animation: lw-g6-shake 0.35s;
}
.lw-g10 button {
  font-family: var(--lw-font, Fredoka, sans-serif);
  -webkit-tap-highlight-color: transparent;
}
/* Kuckucksuhr */
.lw-g10-cuckoo-stage {
  position: relative;
  display: grid;
  justify-items: center;
  padding: 10px 0 6px;
  border-radius: 24px;
  background: linear-gradient(#fff4d6, #ffe7b0);
}
.lw-g10-cuckoo-house {
  width: min(190px, 52vw);
  height: auto;
  overflow: visible;
}
.lw-g10-door {
  transform-origin: 44px 39px;
  transition: transform 0.15s;
}
.lw-g10-bird {
  transform-origin: 60px 46px;
  transition: transform 0.15s;
}
.lw-g10-cuckoo-stage.call .lw-g10-door {
  transform: scaleX(0.12);
}
.lw-g10-cuckoo-stage.call .lw-g10-bird {
  transform: translateY(-3px) scale(1.3);
}
.lw-g10-cuckoo-dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  min-height: 18px;
}
.lw-g10-cuckoo-dots i {
  width: 16px;
  height: 16px;
  border: 2px solid #1f2d4d;
  border-radius: 50%;
  background: #3aa7f0;
  animation: lw-g6-pop 0.3s both;
}
body.lw .lw-g10-again {
  justify-self: center;
  padding: 8px 16px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: #1f2d4d;
  font-size: 16px;
  font-weight: 600;
  box-shadow: 0 3px 0 #1f2d4d22;
}
body.lw .lw-g10-again:disabled {
  opacity: 0.5;
}
.lw-g10-bells {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
body.lw .lw-g10-bell {
  display: grid;
  justify-items: center;
  min-width: 76px;
  padding: 8px 10px 10px;
  border: 3px solid #fff;
  border-radius: 20px;
  background: #ffcf3f;
  color: #1f2d4d;
  box-shadow: 0 5px 0 #d9a91c;
}
.lw-g10-bell span {
  font-size: 22px;
}
.lw-g10-bell b {
  font-size: 30px;
  line-height: 1;
}
body.lw .lw-g10-bell.good {
  background: #5fbf3f;
  color: #fff;
  box-shadow: 0 5px 0 #3f8f28;
}
body.lw .lw-g10-bell:disabled:not(.good) {
  opacity: 0.45;
}
/* Roboter-Bauplan */
.lw-g10-robot-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.lw-g10-blueprint,
.lw-g10-bench {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 170px;
  padding: 18px 10px 8px;
  border: 4px solid #fff;
  border-radius: 22px;
  box-shadow: 0 5px 0 #1f2d4d22;
}
.lw-g10-blueprint {
  background-color: #2a5ea8;
  background-image: repeating-linear-gradient(0deg, transparent 0 17px, #ffffff22 17px 18px), repeating-linear-gradient(90deg, transparent 0 17px, #ffffff22 17px 18px);
}
.lw-g10-blueprint span {
  position: absolute;
  top: 6px;
  left: 12px;
  color: #dff3ff;
  font: 600 13px/1 var(--lw-font, Fredoka, sans-serif);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.lw-g10-bench {
  background: #eef2f7;
}
.lw-g10-blueprint svg,
.lw-g10-bench svg {
  width: min(150px, 100%);
  height: auto;
  overflow: visible;
}
.lw-g10-bench.alive svg {
  animation: lw-jump 0.6s cubic-bezier(0.3, 1.5, 0.5, 1) 2;
}
.lw-g10-shelves {
  display: grid;
  gap: 8px;
}
.lw-g10-shelf {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 16px;
  background: #fff8dc;
}
.lw-g10-shelf > b {
  flex: 0 0 72px;
  color: #1f2d4d;
  font: 600 15px/1.1 var(--lw-font, Fredoka, sans-serif);
}
.lw-g10-shelf.wrong {
  box-shadow: inset 0 0 0 3px #ff6f4f;
}
body.lw .lw-g10-part {
  display: grid;
  place-items: center;
  width: 64px;
  height: 56px;
  padding: 4px;
  border: 3px solid #fff;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 3px 0 #1f2d4d22;
}
.lw-g10-part svg {
  width: 100%;
  height: 100%;
}
.lw-g10-part i {
  width: 34px;
  height: 34px;
  border: 3px solid #1f2d4d;
  border-radius: 10px;
}
body.lw .lw-g10-part.on {
  border-color: #3aa7f0;
  background: #e5f4ff;
  box-shadow: 0 0 0 3px #3aa7f055;
}
body.lw .lw-g10-done {
  justify-self: center;
  padding: 10px 26px;
  border: 3px solid #fff;
  border-radius: 999px;
  background: #5fbf3f;
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  box-shadow: 0 5px 0 #3f8f28;
}
/* Atem-Blume */
.lw-g10-breath-garden {
  position: relative;
  display: grid;
  place-items: center;
  height: 260px;
  border-radius: 24px;
  background: linear-gradient(#bfe6ff, #e8f7ff 70%, #b8e39a 70%);
  overflow: hidden;
}
.lw-g10-flower {
  --open: 0;
  width: 150px;
}
.lw-g10-flower svg {
  width: 100%;
  height: auto;
  overflow: visible;
}
.lw-g10-bloom {
  transform-origin: 60px 60px;
  transform: scale(calc(0.45 + var(--open) * 0.6)) rotate(calc(var(--open) * 25deg));
}
.lw-g10-petal {
  opacity: calc(0.55 + var(--open) * 0.45);
}
.lw-g10-breath-ring {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 54px;
  height: 54px;
}
.lw-g10-breath-count {
  display: flex;
  justify-content: center;
  gap: 8px;
}
.lw-g10-breath-count i {
  width: 22px;
  height: 22px;
  border: 3px solid #ef5b93;
  border-radius: 50%;
  background: #fff;
}
.lw-g10-breath-count i.on {
  background: #ef5b93;
  animation: lw-g6-pop 0.35s both;
}
body.lw .lw-g10-hold {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 250px;
  justify-content: center;
  padding: 14px 22px;
  border: 3px solid #fff;
  border-radius: 999px;
  background: #3aa7f0;
  color: #fff;
  font-size: 19px;
  font-weight: 600;
  box-shadow: 0 5px 0 #1f7fc4;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.lw-g10-hold span {
  font-size: 26px;
}
body.lw .lw-g10-hold.on {
  background: #ef5b93;
  box-shadow: 0 5px 0 #c23d73, 0 0 0 8px #ef5b9333;
}
/* Malen nach Zahlen */
.lw-g10-canvas {
  justify-self: center;
  width: min(330px, 100%);
  padding: 10px;
  border: 4px solid #fff;
  border-radius: 22px;
  background: #fffdf5;
  box-shadow: 0 5px 0 #1f2d4d22;
}
.lw-g10-canvas svg {
  display: block;
  width: 100%;
  height: auto;
}
.lw-g10-field {
  cursor: pointer;
}
.lw-g10-field path {
  transition: fill 0.25s;
}
.lw-g10-field:focus-visible path {
  stroke: #3aa7f0;
  stroke-width: 4;
}
.lw-g10-field.done text {
  fill: #1f2d4d99;
}
.lw-g10-canvas.won svg {
  animation: lw-g6-pulse-box 0.6s ease-in-out 2;
}
.lw-g10-pots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
body.lw .lw-g10-pot {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 6px 8px;
  border: 3px solid #fff;
  border-radius: 16px;
  background: #fff;
  color: #1f2d4d;
  box-shadow: 0 4px 0 #1f2d4d22;
}
.lw-g10-pot i {
  width: 40px;
  height: 34px;
  border: 3px solid #1f2d4d;
  border-radius: 6px 6px 16px 16px;
}
.lw-g10-pot b {
  font-size: 20px;
  line-height: 1;
}
body.lw .lw-g10-pot.on {
  border-color: #1f2d4d;
  transform: translateY(-4px);
}
body.lw .lw-g10-pot.hint {
  animation: lw-g6-pulse-box 1s ease-in-out infinite;
  box-shadow: 0 0 0 4px #ffcf3f;
}
/* Tierkinder */
.lw-g10-meadow {
  display: grid;
  gap: 12px;
  padding: 12px;
  border-radius: 24px;
  background: linear-gradient(#bfe6ff, #dff3ff 38%, #9fdc7a 38%, #7fcf5a);
}
.lw-g10-moms,
.lw-g10-kids {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
body.lw .lw-g10-mom,
body.lw .lw-g10-kid {
  position: relative;
  display: grid;
  justify-items: center;
  padding: 6px 8px 8px;
  border: 3px solid #fff;
  border-radius: 20px;
  background: #ffffffcc;
  color: #1f2d4d;
  box-shadow: 0 4px 0 #1f2d4d22;
}
body.lw .lw-g10-mom {
  width: 128px;
}
body.lw .lw-g10-kid {
  width: 96px;
}
.lw-g10-mom svg,
.lw-g10-kid svg {
  width: 100%;
  height: auto;
}
.lw-g10-mom b,
.lw-g10-kid b {
  font-size: 15px;
  font-weight: 600;
}
.lw-g10-nest {
  position: absolute;
  right: -10px;
  bottom: 18px;
  width: 58px;
  pointer-events: none;
}
.lw-g10-nest svg {
  width: 100%;
  animation: lw-g6-pop 0.4s both;
}
body.lw .lw-g10-kid.on {
  border-color: #ffcf3f;
  box-shadow: 0 0 0 4px #ffcf3f88;
  transform: translateY(-4px);
}
body.lw .lw-g10-mom.found {
  border-color: #5fbf3f;
}
body.lw .lw-g10-mom.hint {
  animation: lw-g6-pulse-box 1s ease-in-out infinite;
  box-shadow: 0 0 0 4px #ffcf3f;
}
@media (max-width: 560px) {
  .lw-g10-blueprint,
  .lw-g10-bench {
    min-height: 140px;
  }
  body.lw .lw-g10-part {
    width: 54px;
    height: 48px;
  }
  .lw-g10-shelf > b {
    flex-basis: 58px;
    font-size: 13px;
  }
  body.lw .lw-g10-mom {
    width: 104px;
  }
  body.lw .lw-g10-kid {
    width: 86px;
  }
  .lw-g10-mom b,
  .lw-g10-kid b {
    font-size: 13px;
    overflow-wrap: anywhere;
    hyphens: auto;
  }
  .lw-g10-pots {
    gap: 6px;
  }
  body.lw .lw-g10-pot {
    padding: 5px 6px;
  }
  .lw-g10-pot i {
    width: 34px;
    height: 30px;
  }
  .lw-g10-breath-garden {
    height: 220px;
  }
  body.lw .lw-g10-hold {
    min-width: 0;
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .lw-g10-cuckoo-dots i,
  .lw-g10-breath-count i.on,
  .lw-g10-nest svg,
  .lw-g10-bench.alive svg,
  .lw-g10-canvas.won svg {
    animation: none;
  }
}
.lw-g10-tag {
  pointer-events: none;
}

/* ================================================================== */
/* Heimatspiele 11 (ab 8.35.0)                                          */
/* ================================================================== */
body.lw .lw-g11 .nope {
  animation: lw-g6-shake 0.35s;
}
.lw-g11 button {
  font-family: var(--lw-font, Fredoka, sans-serif);
  -webkit-tap-highlight-color: transparent;
}
/* Farbenfolge */
.lw-g11-sky {
  position: relative;
  padding: 18px 10px 14px;
  border-radius: 24px;
  background: linear-gradient(#bfe6ff, #eaf7ff);
  overflow: hidden;
}
.lw-g11-rainbow {
  position: absolute;
  left: 50%;
  top: 8px;
  width: min(440px, 96%);
  translate: -50% 0;
  opacity: 0.35;
}
.lw-g11-drops {
  position: relative;
  display: flex;
  justify-content: center;
  gap: clamp(8px, 3vw, 22px);
  padding-top: 36px;
}
body.lw .lw-g11-drop {
  width: clamp(62px, 18vw, 96px);
  padding: 4px;
  border: 0;
  border-radius: 24px;
  background: transparent;
  transition: transform 0.12s, filter 0.12s;
  filter: saturate(0.55) brightness(0.95);
}
.lw-g11-drop svg {
  width: 100%;
  height: auto;
  display: block;
}
body.lw .lw-g11-drop.lit {
  filter: none;
  transform: translateY(-10px) scale(1.12);
}
body.lw .lw-g11-drop:disabled {
  cursor: default;
}
.lw-g11-progress {
  display: flex;
  justify-content: center;
  gap: 8px;
}
.lw-g11-progress i {
  width: 20px;
  height: 20px;
  border: 3px solid #3aa7f0;
  border-radius: 50%;
  background: #fff;
}
.lw-g11-progress i.on {
  background: #3aa7f0;
}
/* Raketen-Countdown */
.lw-g11-space {
  --charge: 0;
  position: relative;
  height: 330px;
  overflow: hidden;
  border: 4px solid #fff;
  border-radius: 24px;
  background: radial-gradient(circle at 20% 20%, #ffffff22 0 1px, transparent 2px) 0 0 / 40px 40px, linear-gradient(#0b1633, #23355c);
  box-shadow: 0 6px 0 #1f2d4d22;
}
.lw-g11-rocket {
  position: absolute;
  right: 4%;
  bottom: 10px;
  width: 60px;
  transition: transform 1.6s cubic-bezier(0.5, 0, 0.8, 0.3);
}
.lw-g11-rocket svg {
  width: 100%;
  height: auto;
}
.lw-g11-flame {
  opacity: var(--charge);
  transform-origin: 30px 88px;
  transform: scaleY(calc(0.3 + var(--charge) * 0.7));
}
.lw-g11-space.launch .lw-g11-rocket {
  transform: translateY(-420px);
}
.lw-g11-display {
  position: absolute;
  right: 4%;
  top: 10px;
  min-width: 60px;
  padding: 4px 10px;
  border-radius: 12px;
  background: #1f2d4d;
  color: #ffcf3f;
  font: 700 28px/1 var(--lw-font, Fredoka, sans-serif);
  text-align: center;
  box-shadow: inset 0 0 0 2px #ffcf3f55;
}
body.lw .lw-g11-star {
  position: absolute;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  padding: 0;
  border: 0;
  background: transparent;
}
.lw-g11-star svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 6px #ffcf3f88);
}
.lw-g11-star b {
  position: relative;
  margin-top: 4px;
  color: #1f2d4d;
  font-size: 20px;
  font-weight: 700;
}
body.lw .lw-g11-star.done {
  opacity: 0.25;
  transform: scale(0.8);
}
body.lw .lw-g11-star.hint {
  animation: lw-g6-pulse-box 1s ease-in-out infinite;
}
/* Ringturm */
.lw-g11-ringstage {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) 1.2fr;
  align-items: end;
  gap: 12px;
  padding: 14px;
  border-radius: 24px;
  background: linear-gradient(#2b2350, #23355c 60%, #3a4a74);
}
.lw-g11-tower {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: 240px;
  padding-bottom: 14px;
}
.lw-g11-pole {
  position: absolute;
  bottom: 14px;
  width: 12px;
  height: 90%;
  border: 3px solid #1f2d4d;
  border-radius: 8px 8px 0 0;
  background: #c98a4b;
}
.lw-g11-tower::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 92%;
  height: 16px;
  border: 3px solid #1f2d4d;
  border-radius: 8px;
  background: #b07a45;
}
.lw-g11-stack {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.lw-g11-placed {
  display: block;
  width: calc(var(--w) * 0.88%);
  height: 30px;
  margin-top: -2px;
  border: 3px solid #1f2d4d;
  border-radius: 16px;
  background: var(--c);
  box-shadow: inset 0 -6px 0 #0000001f, inset 0 5px 0 #ffffff55;
  animation: lw-g6-drop 0.35s cubic-bezier(0.3, 1.4, 0.5, 1) both;
}
.lw-g11-tower.done .lw-g11-stack {
  animation: lw-jump 0.6s cubic-bezier(0.3, 1.5, 0.5, 1) 2;
}
.lw-g11-pile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
body.lw .lw-g11-ring {
  width: calc(var(--w) * 1%);
  height: 34px;
  padding: 0;
  border: 3px solid #1f2d4d;
  border-radius: 18px;
  background: var(--c);
  box-shadow: inset 0 -6px 0 #0000001f, inset 0 5px 0 #ffffff55;
}
body.lw .lw-g11-ring.hint {
  animation: lw-g6-pulse-box 1s ease-in-out infinite;
  outline: 4px solid #ffcf3f;
}
/* Kekse teilen */
.lw-g11-jar {
  justify-self: center;
  display: grid;
  justify-items: center;
  gap: 4px;
  min-width: 200px;
  max-width: 100%;
  padding: 8px 14px 12px;
  border: 4px solid #fff;
  border-radius: 20px 20px 28px 28px;
  background: #dff3ff;
  box-shadow: 0 5px 0 #1f2d4d22;
}
.lw-g11-jar-label {
  color: #1f2d4d;
  font: 600 14px/1 var(--lw-font, Fredoka, sans-serif);
}
.lw-g11-jar-cookies {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px;
  min-height: 34px;
  max-width: 260px;
}
.lw-g11-jar-cookies svg {
  width: 32px;
  height: 32px;
}
.lw-g11-plates {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.lw-g11-plate {
  width: min(160px, 46%);
}
body.lw .lw-g11-plate-btn {
  display: grid;
  justify-items: center;
  width: 100%;
  min-height: 150px;
  padding: 8px;
  border: 3px solid #fff;
  border-radius: 22px;
  background: #fff8dc;
  color: #1f2d4d;
  box-shadow: 0 4px 0 #1f2d4d22;
}
.lw-g11-plate-btn > svg {
  width: 40px;
  height: 40px;
}
.lw-g11-plate-btn > b {
  font-size: 15px;
}
.lw-g11-dish {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  gap: 2px;
  width: 100%;
  min-height: 64px;
  margin-top: 4px;
  padding: 6px;
  border: 3px solid #d7dee8;
  border-radius: 50%;
  background: #fff;
}
body.lw .lw-g11-cookie {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  background: transparent;
  animation: lw-g6-pop 0.25s both;
}
.lw-g11-cookie svg {
  width: 100%;
  height: 100%;
}
.lw-g11-plate.wrong .lw-g11-plate-btn {
  border-color: #ff6f4f;
}
.lw-g11-plates.won .lw-g11-plate-btn {
  border-color: #5fbf3f;
}
/* Wie wächst das? */
.lw-g11-path {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.lw-g11-slot {
  display: grid;
  place-items: center;
  width: clamp(62px, 19vw, 110px);
  aspect-ratio: 1;
  border: 3px dashed #1f2d4d44;
  border-radius: 18px;
  background: #ffffffaa;
  color: #1f2d4d66;
  font-size: 24px;
}
.lw-g11-slot.filled {
  grid-template-rows: 1fr auto;
  padding: 4px;
  border: 3px solid #5fbf3f;
  background: #fff;
  color: #1f2d4d;
  animation: lw-g6-pop 0.35s both;
}
.lw-g11-slot svg,
.lw-g11-card svg {
  width: 100%;
  height: auto;
}
.lw-g11-slot.filled b {
  font-size: 11px;
  line-height: 1.1;
  text-align: center;
}
.lw-g11-arrow {
  color: #1f2d4d66;
  font-size: 18px;
}
.lw-g11-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
body.lw .lw-g11-card {
  display: grid;
  justify-items: center;
  width: clamp(92px, 26vw, 130px);
  padding: 6px 6px 8px;
  border: 3px solid #fff;
  border-radius: 18px;
  background: #fff8dc;
  color: #1f2d4d;
  box-shadow: 0 4px 0 #1f2d4d22;
}
.lw-g11-card b {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.15;
}
body.lw .lw-g11-card.used {
  opacity: 0.3;
}
body.lw .lw-g11-card.hint {
  animation: lw-g6-pulse-box 1s ease-in-out infinite;
  box-shadow: 0 0 0 4px #ffcf3f;
}
@media (max-width: 560px) {
  .lw-g11-space {
    height: 300px;
  }
  body.lw .lw-g11-star {
    width: 50px;
    height: 50px;
  }
  .lw-g11-star b {
    font-size: 17px;
  }
  .lw-g11-ringstage {
    grid-template-columns: 1fr 1fr;
    padding: 10px;
  }
  .lw-g11-tower {
    height: 210px;
  }
  body.lw .lw-g11-plate-btn {
    min-height: 130px;
  }
  .lw-g11-arrow {
    display: none;
  }
  .lw-g11-path {
    gap: 6px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .lw-g11-placed,
  .lw-g11-cookie,
  .lw-g11-slot.filled,
  .lw-g11-tower.done .lw-g11-stack {
    animation: none;
  }
  .lw-g11-rocket {
    transition: none;
  }
}
/* Als App gestartet (ab 8.36.0): kein Hochziehen zum Neuladen mitten im Spiel */
body.lw-standalone {
  overscroll-behavior-y: none;
}
/* Hütchenspiel (8.37.3): Fisch zeigen, dann mit „Los“ starten */
.lw-cups-fish.show {
  animation: lw-cups-found 0.9s cubic-bezier(0.3, 1.6, 0.5, 1) 3;
}
body.lw .lw-cups-go {
  justify-self: center;
  margin-top: 4px;
  padding: 12px 24px;
  border: 3px solid #fff;
  border-radius: 999px;
  background: #5fbf3f;
  color: #fff;
  font: 600 19px/1.1 var(--lw-font, Fredoka, sans-serif);
  box-shadow: 0 5px 0 #3f8f28;
}
@media (prefers-reduced-motion: reduce) {
  .lw-cups-fish.show {
    animation: none;
  }
}

/* ================================================================== */
/* Heimatspiele 12 (ab 8.38.0)                                          */
/* ================================================================== */
body.lw .lw-g12 .nope {
  animation: lw-g6-shake 0.35s;
}
.lw-g12 button {
  font-family: var(--lw-font, Fredoka, sans-serif);
  -webkit-tap-highlight-color: transparent;
}
.lw-g12-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
body.lw .lw-g12-card {
  display: grid;
  justify-items: center;
  gap: 2px;
  width: clamp(92px, 27vw, 130px);
  padding: 10px 6px 8px;
  border: 3px solid #fff;
  border-radius: 20px;
  background: #fff8dc;
  color: #1f2d4d;
  box-shadow: 0 4px 0 #1f2d4d22;
}
.lw-g12-ico {
  font-size: clamp(36px, 10vw, 50px);
  line-height: 1.1;
}
.lw-g12-card b {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.15;
}
body.lw .lw-g12-card.good {
  border-color: #5fbf3f;
  background: #e9f8e2;
}
body.lw .lw-g12-card.no {
  opacity: 0.45;
}
body.lw .lw-g12-say {
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  font-size: 20px;
  box-shadow: 0 3px 0 #1f2d4d22;
}
/* Reimwald */
.lw-g12-forest {
  display: grid;
  gap: 14px;
  padding: 14px 10px;
  border-radius: 24px;
  background: linear-gradient(#dff3ff, #c6ecb4 55%, #8fd46f);
}
.lw-g12-target {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border: 3px solid #fff;
  border-radius: 999px;
  background: #ffcf3f;
  color: #1f2d4d;
  box-shadow: 0 4px 0 #d9a91c;
}
.lw-g12-target span {
  font-size: 40px;
}
.lw-g12-target b {
  font-size: 22px;
}
/* Koffer packen */
.lw-g12-suitcase {
  position: relative;
  justify-self: center;
  width: min(300px, 90%);
  min-height: 110px;
  margin-top: 16px;
  padding: 12px;
  border: 4px solid #1f2d4d;
  border-radius: 18px;
  background: #3aa7f0;
  box-shadow: inset 0 -8px 0 #1f7fc4, 0 5px 0 #1f2d4d22;
}
.lw-g12-handle {
  position: absolute;
  top: -20px;
  left: 50%;
  width: 70px;
  height: 22px;
  translate: -50% 0;
  border: 4px solid #1f2d4d;
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
}
.lw-g12-inside {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  min-height: 70px;
  padding: 6px;
  border-radius: 12px;
  background: #ffffffcc;
}
.lw-g12-packed {
  font-size: 34px;
  animation: lw-g6-pop 0.35s both;
}
.lw-g12-suitcase.closed {
  animation: lw-jump 0.6s cubic-bezier(0.3, 1.5, 0.5, 1) 2;
}
body.lw .lw-g12-card.packed {
  visibility: hidden;
}
/* Freundlich sein */
.lw-g12-scene {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 14px;
  border-radius: 24px;
  background: linear-gradient(#ffe7f0, #fff8dc);
  text-align: center;
}
.lw-g12-scene-ico {
  font-size: 52px;
}
.lw-g12-scene p {
  margin: 0;
  color: #1f2d4d;
  font: 600 20px/1.3 var(--lw-font, Fredoka, sans-serif);
}
.lw-g12-choices {
  display: grid;
  gap: 10px;
}
body.lw .lw-g12-choice {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 3px solid #fff;
  border-radius: 18px;
  background: #fff;
  color: #1f2d4d;
  text-align: left;
  box-shadow: 0 4px 0 #1f2d4d22;
}
.lw-g12-choice span {
  font-size: 32px;
}
.lw-g12-choice b {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.25;
}
body.lw .lw-g12-choice.good {
  border-color: #5fbf3f;
  background: #e9f8e2;
}
body.lw .lw-g12-choice.no {
  opacity: 0.45;
}
.lw-g12-heart {
  justify-self: center;
  font-size: 44px;
}
.lw-g12-heart.grow span {
  display: inline-block;
  animation: lw-g6-pop 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) both;
}
/* Vorsicht, heiß! */
.lw-g12-hotstage {
  display: grid;
  place-items: center;
  min-height: 170px;
  border-radius: 24px;
  background: linear-gradient(90deg, #ffe0d6 0 50%, #dff3ff 50%);
}
.lw-g12-hotitem {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 12px 22px;
  border: 4px solid #fff;
  border-radius: 24px;
  background: #fff;
  color: #1f2d4d;
  box-shadow: 0 6px 0 #1f2d4d22;
}
.lw-g12-hotitem span {
  font-size: 64px;
  line-height: 1.1;
}
.lw-g12-hotitem b {
  font-size: 19px;
}
.lw-g12-hotitem.pop {
  animation: lw-g6-pop 0.35s both;
}
.lw-g12-hotbtns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
body.lw .lw-g12-hotbtn {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 12px 8px;
  border: 3px solid #fff;
  border-radius: 20px;
  color: #fff;
  font-size: 17px;
  font-weight: 600;
}
.lw-g12-hotbtn span {
  font-size: 30px;
}
body.lw .lw-g12-hotbtn.hot {
  background: #ff6f4f;
  box-shadow: 0 5px 0 #c8482c;
}
body.lw .lw-g12-hotbtn.ok {
  background: #3aa7f0;
  box-shadow: 0 5px 0 #1f7fc4;
}
.lw-g12-track {
  display: flex;
  justify-content: center;
  gap: 6px;
}
.lw-g12-track i {
  width: 18px;
  height: 18px;
  border: 3px solid #1f2d4d33;
  border-radius: 50%;
  background: #fff;
}
.lw-g12-track i.hot {
  border-color: #c8482c;
  background: #ff6f4f;
}
.lw-g12-track i.ok {
  border-color: #1f7fc4;
  background: #3aa7f0;
}
/* Flaschenpost */
.lw-g12-sea {
  position: relative;
  display: grid;
  place-items: center;
  height: 170px;
  overflow: hidden;
  border-radius: 24px;
  background: linear-gradient(#bfe6ff 45%, #3aa7f0 45%, #2a8fd6);
}
body.lw .lw-g12-bottlebtn {
  width: 70px;
  padding: 0;
  border: 0;
  background: transparent;
  transform: rotate(-20deg);
  animation: lw-g12-bob 2.4s ease-in-out infinite;
}
.lw-g12-bottlebtn svg {
  width: 100%;
  height: auto;
}
.lw-g12-sea.opened .lw-g12-bottlebtn {
  animation: none;
  transform: rotate(0) scale(0.8);
  opacity: 0.6;
}
@keyframes lw-g12-bob {
  50% {
    transform: rotate(-10deg) translateY(-8px);
  }
}
.lw-g12-letter {
  position: relative;
  padding: 14px 54px 14px 16px;
  border: 3px solid #e8d7ad;
  border-radius: 18px;
  background: #fff8dc;
  color: #1f2d4d;
}
.lw-g12-letter p {
  margin: 0 0 8px;
  font: 500 19px/1.4 var(--lw-font, Fredoka, sans-serif);
}
.lw-g12-letter b {
  font-size: 19px;
}
.lw-g12-letter .lw-g12-say {
  position: absolute;
  top: 10px;
  right: 10px;
}
.lw-g12-letter[hidden],
.lw-g12-cards[hidden] {
  display: none;
}
@media (max-width: 560px) {
  .lw-g12-scene p,
  .lw-g12-letter p,
  .lw-g12-letter b {
    font-size: 17px;
  }
  .lw-g12-choice b {
    font-size: 15px;
  }
  .lw-g12-hotstage,
  .lw-g12-sea {
    height: auto;
    min-height: 150px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .lw-g12-packed,
  .lw-g12-suitcase.closed,
  .lw-g12-heart.grow span,
  .lw-g12-hotitem.pop,
  body.lw .lw-g12-bottlebtn {
    animation: none;
  }
}

/* ================================================================== */
/* Heimatspiele 13 (ab 8.39.0)                                          */
/* ================================================================== */
body.lw .lw-g13 .nope {
  animation: lw-g6-shake 0.35s;
}
.lw-g13 button {
  font-family: var(--lw-font, Fredoka, sans-serif);
  -webkit-tap-highlight-color: transparent;
}
/* Mehr oder weniger? */
.lw-g13-tanks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
body.lw .lw-g13-bowl {
  position: relative;
  aspect-ratio: 1;
  padding: 10px;
  border: 4px solid #fff;
  border-radius: 40% 40% 46% 46% / 30% 30% 52% 52%;
  background: #eaf6ff;
  box-shadow: 0 6px 0 #1f2d4d22;
}
.lw-g13-water {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 38% 38% 44% 44% / 24% 24% 50% 50%;
  background: linear-gradient(#8fd3f7, #3aa7f0);
}
.lw-g13-fish {
  position: absolute;
  width: 22%;
  animation: lw-g13-swim 2.6s ease-in-out var(--d, 0s) infinite alternate;
}
.lw-g13-fish svg {
  width: 100%;
  height: auto;
}
@keyframes lw-g13-swim {
  to {
    translate: 6px -3px;
  }
}
.lw-g13-bowlnum {
  position: absolute;
  left: 50%;
  bottom: -14px;
  translate: -50% 0;
  min-width: 42px;
  padding: 2px 10px;
  border-radius: 999px;
  background: #1f2d4d;
  color: #ffcf3f;
  font-size: 22px;
}
body.lw .lw-g13-bowl.good {
  border-color: #5fbf3f;
  box-shadow: 0 0 0 4px #5fbf3f66, 0 6px 0 #1f2d4d22;
}
/* Spuren im Schnee */
.lw-g13-snow {
  position: relative;
  padding: 20px 10px;
  overflow: hidden;
  border-radius: 24px;
  background: radial-gradient(circle at 20% 30%, #fff 0 2px, transparent 3px) 0 0 / 26px 26px, linear-gradient(#eef7ff, #dcecfa);
  box-shadow: inset 0 -8px 0 #c6dcef;
}
.lw-g13-snow svg {
  display: block;
  width: 100%;
  height: auto;
}
.lw-g13-walker {
  position: absolute;
  right: 12px;
  top: 50%;
  translate: 0 -50%;
  font-size: 46px;
  animation: lw-g6-pop 0.45s both;
}
/* Wer bin ich? */
.lw-g13-jungle {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 24px;
  background: linear-gradient(#bff0c9, #7fcf5a);
}
.lw-g13-mystery {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border: 4px solid #fff;
  border-radius: 50%;
  background: #1f2d4d;
  color: #ffcf3f;
  font-size: 46px;
}
.lw-g13-jungle.solved .lw-g13-mystery {
  background: #fff;
  animation: lw-g6-pop 0.45s both;
}
.lw-g13-clues {
  display: grid;
  gap: 6px;
}
.lw-g13-clue {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 12px;
  border-radius: 14px;
  background: #fff;
  color: #1f2d4d;
  font: 600 17px/1.3 var(--lw-font, Fredoka, sans-serif);
  animation: lw-g6-pop 0.35s both;
}
.lw-g13-clue span {
  display: grid;
  flex: none;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #ffcf3f;
  font-size: 14px;
}
.lw-g10-again[hidden] {
  display: none;
}
/* Meine Rakete */
.lw-g13-pad {
  position: relative;
  display: grid;
  place-items: end center;
  height: 240px;
  overflow: hidden;
  border-radius: 24px;
  background: radial-gradient(circle at 80% 18%, #f4f6fa 0 16px, transparent 17px), radial-gradient(circle at 20% 30%, #ffffff66 0 1px, transparent 2px) 0 0 / 36px 36px, linear-gradient(#0b1633, #23355c);
}
.lw-g13-rocketart {
  width: clamp(110px, 18vw, 150px);
  margin-bottom: 6px;
  transition: transform 1.8s cubic-bezier(0.5, 0, 0.8, 0.3);
}
.lw-g13-rocketart svg {
  width: 100%;
  height: auto;
}
.lw-g13-pad.launch .lw-g13-rocketart {
  transform: translateY(-360px);
}
.lw-g13-tools {
  display: grid;
  gap: 8px;
}
.lw-g13-tool {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 16px;
  background: #fff8dc;
}
.lw-g13-tool > b {
  flex: 0 0 76px;
  color: #1f2d4d;
  font-size: 15px;
}
body.lw .lw-g13-opt {
  display: grid;
  place-items: center;
  min-width: 44px;
  height: 44px;
  padding: 4px;
  border: 3px solid #fff;
  border-radius: 12px;
  background: #fff;
  font-size: 20px;
  box-shadow: 0 3px 0 #1f2d4d22;
}
.lw-g13-opt i {
  width: 28px;
  height: 28px;
  border: 3px solid #1f2d4d;
  border-radius: 8px;
}
body.lw .lw-g13-opt.on {
  border-color: #3aa7f0;
  box-shadow: 0 0 0 3px #3aa7f055;
}
/* Sicher über die Straße */
.lw-g13-road {
  position: relative;
  height: 230px;
  overflow: hidden;
  border-radius: 24px;
  background: linear-gradient(#bfe6ff 0 26%, #9fdc7a 26% 34%, #c9d1dc 34% 38%, #5a6272 38% 82%, #c9d1dc 82% 86%, #9fdc7a 86%);
}
.lw-g13-zebra {
  position: absolute;
  left: 40%;
  top: 38%;
  width: 20%;
  height: 44%;
  background: repeating-linear-gradient(0deg, #f4f6fa 0 12px, transparent 12px 24px);
}
.lw-g13-lian {
  position: absolute;
  left: 50%;
  bottom: 1%;
  width: 46px;
  translate: -50% 0;
  font-size: 48px;
  line-height: 1;
  transition: bottom 1.6s ease-in-out, transform 0.3s;
  z-index: 2;
}
.lw-g13-lian svg {
  width: 100%;
  height: auto;
}
.lw-g13-lian[data-look="left"] {
  transform: scaleX(-1);
}
.lw-g13-lian.walk {
  bottom: 64%;
}
.lw-g13-car {
  position: absolute;
  top: 48%;
  left: -130px;
  width: 110px;
  z-index: 3;
}
.lw-g13-car.drive-left {
  animation: lw-g13-drive-lr 2.6s linear both;
}
.lw-g13-car.drive-right {
  top: 58%;
  animation: lw-g13-drive-rl 2.6s linear both;
}
.lw-g13-car.drive-right svg {
  transform: scaleX(-1);
}
@keyframes lw-g13-drive-lr {
  to {
    left: calc(100% + 20px);
  }
}
@keyframes lw-g13-drive-rl {
  from {
    left: calc(100% + 20px);
  }
  to {
    left: -130px;
  }
}
.lw-g13-light {
  position: absolute;
  right: 14%;
  top: 8%;
  display: grid;
  gap: 4px;
  padding: 6px;
  border-radius: 10px;
  background: #1f2d4d;
}
.lw-g13-light i {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #5a6272;
}
.lw-g13-light:not(.go) i.red {
  background: #ff6f4f;
  box-shadow: 0 0 10px #ff6f4f;
}
.lw-g13-light.go i.green {
  background: #5fbf3f;
  box-shadow: 0 0 10px #5fbf3f;
}
.lw-g13-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
body.lw .lw-g13-look,
body.lw .lw-g13-go {
  padding: 12px 18px;
  border: 3px solid #fff;
  border-radius: 999px;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
}
body.lw .lw-g13-look {
  background: #3aa7f0;
  box-shadow: 0 5px 0 #1f7fc4;
}
body.lw .lw-g13-go {
  background: #5fbf3f;
  box-shadow: 0 5px 0 #3f8f28;
}
@media (max-width: 560px) {
  .lw-g13-mystery {
    width: 64px;
    height: 64px;
    font-size: 36px;
  }
  .lw-g13-clue {
    font-size: 15px;
  }
  .lw-g13-tool > b {
    flex-basis: 100%;
  }
  .lw-g13-road {
    height: 200px;
  }
  .lw-g13-car {
    width: 90px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .lw-g13-fish,
  .lw-g13-clue,
  .lw-g13-walker,
  .lw-g13-jungle.solved .lw-g13-mystery {
    animation: none;
  }
  .lw-g13-rocketart,
  .lw-g13-lian {
    transition: none;
  }
}

/* ===== 8.51.0: Sojas Bastelwelt größer, Kleiderschrank mit vielen Sachen ===== */
body.lw .lw-craft {
  width: min(980px, 100%);
}
.lw-craft-stars {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #1f2d4d;
  color: #ffcf3f;
  font-size: 15px;
}
.lw-craft-stars b {
  color: #fff;
}
.lw-craft-stars[hidden] {
  display: none;
}
.lw-craft-subhead {
  margin: 6px 0 0;
  font: 700 16px/1.1 var(--lw-font, Fredoka, sans-serif);
  color: #1f2d4d;
}
.lw-craft-subhead small {
  font-weight: 500;
  font-size: 13px;
  color: #5d4a2a;
}
body.lw .lw-craft-node.game {
  background: #fff;
  border-color: #ef5b93;
}
/* Kleiderschrank */
.lw-wardrobe-modal .lw-craft-panel.wardrobe {
  width: min(720px, 100%);
  gap: 8px;
}
.lw-craft-bankline span {
  color: #5d6679;
  font-weight: 500;
}
.lw-wd-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
}
.lw-wd-stage {
  flex: none;
  width: 150px;
  height: 150px;
  padding: 14px 10px 4px;
  border: 3px dashed #3aa7f0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 80%, #ffffff 0 30%, #bfe6ff 70%);
}
.lw-wd-stage > svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.lw-wd-stage.cheer > svg {
  animation: lw-wd-cheer 0.6s cubic-bezier(0.3, 1.6, 0.5, 1);
}
@keyframes lw-wd-cheer {
  40% {
    transform: translateY(-14px) scale(1.06);
  }
}
.lw-wd-tip {
  max-width: 260px;
  margin: 0;
  font: 500 14px/1.35 var(--lw-font, Fredoka, sans-serif);
  color: #5d4a2a;
}
.lw-wd-buybar {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 8px;
  min-width: 190px;
  padding: 12px 16px;
  border: 3px solid #ffcf3f;
  border-radius: 18px;
  background: #fffdf5;
}
.lw-wd-tryname {
  display: grid;
  justify-items: center;
  gap: 2px;
  font: 600 16px/1.1 var(--lw-font, Fredoka, sans-serif);
}
.lw-wd-tryname .lw-wd-ico {
  width: 46px;
  height: 46px;
}
.lw-wd-tryname small {
  color: #5d6679;
}
body.lw .lw-wd-buy {
  min-height: 0;
  padding: 10px 18px;
  border-radius: 999px;
  background: #ef5b93;
  color: #fff;
  font: 700 17px/1 var(--lw-font, Fredoka, sans-serif);
  box-shadow: 0 4px 0 #c13d71;
}
.lw-wd-need {
  font: 600 14px/1.2 var(--lw-font, Fredoka, sans-serif);
  color: #b4532a;
}
body.lw .lw-wd-untry {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 30px;
  height: 30px;
  min-height: 0;
  padding: 0;
  border-radius: 50%;
  background: #1f2d4d;
  color: #fff;
  font: 700 14px/1 sans-serif;
}
.lw-wd-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}
body.lw .lw-wd-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 0;
  padding: 7px 12px;
  border: 2px solid #e0bf63;
  border-radius: 999px;
  background: #fffdf5;
  color: #1f2d4d;
  font: 600 14px/1 var(--lw-font, Fredoka, sans-serif);
}
body.lw .lw-wd-tab.on {
  border-color: #1f2d4d;
  background: #1f2d4d;
  color: #fff;
}
.lw-wd-tab i {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 11px;
  height: 11px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #5fbf3f;
}
.lw-craft-panel.wardrobe .lw-craft-clothes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  width: 100%;
  max-height: 300px;
  overflow-y: auto;
  padding: 4px;
}
.lw-craft-panel.wardrobe .lw-craft-cloth {
  width: auto;
}
.lw-craft-cloth .lw-wd-ico {
  width: 44px;
  height: 44px;
}
body.lw .lw-craft-cloth.trying {
  border-color: #ffcf3f;
  box-shadow: 0 0 0 3px #ffcf3f88, 0 3px 0 #e0bf63;
}
.lw-wd-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.lw-wd-actions:empty {
  display: none;
}
body.lw .lw-wd-random,
body.lw .lw-wd-undress {
  min-height: 0;
  padding: 8px 14px;
  border: 2px dashed #c98a4b;
  border-radius: 999px;
  background: #fff8e6;
  color: #1f2d4d;
  font: 600 14px/1 var(--lw-font, Fredoka, sans-serif);
}
@media (max-width: 600px) {
  .lw-wd-top {
    flex-direction: column;
    gap: 8px;
  }
  .lw-wd-stage {
    width: 120px;
    height: 120px;
  }
  .lw-craft-panel.wardrobe .lw-craft-clothes {
    grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
    max-height: 38dvh;
  }
  body.lw .lw-wd-tab {
    padding: 6px 9px;
    font-size: 13px;
  }
}

/* ===== 8.51.0: Bastelspiele (Nähstube, Modenschau, Perlenkette) ===== */
body.lw .lw-cg {
  width: min(760px, 100%);
}
.lw-cg-btn {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 7px);
  place-content: center;
  gap: 6px;
  width: 52px;
  height: 52px;
  border: 3px solid #1f2d4d;
  border-radius: 50%;
  background: var(--c);
  box-shadow: inset 0 0 0 5px var(--c), inset 0 0 0 7px #ffffffaa, 0 3px 0 #1f2d4d22;
}
.lw-cg-btn i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #1f2d4d;
}
.lw-cg-btn b {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fffdf5;
  color: #1f2d4d;
  font: 700 22px/1 var(--lw-font, Fredoka, sans-serif);
  grid-column: 1 / -1;
}
.lw-cg-btn.pop {
  animation: lw-bw-pop 0.45s cubic-bezier(0.3, 1.7, 0.5, 1);
}
.lw-cg-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  padding: 16px 14px;
  border: 4px dashed #ffffffcc;
  border-radius: 20px;
  background: linear-gradient(#5fbf3f, #4aa832);
  box-shadow: 0 6px 0 #3f962a, inset 0 0 0 6px #4aa832;
}
.lw-cg-slot {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
}
.lw-cg-slot.empty {
  border: 3px dashed #ffffff;
  border-radius: 50%;
  background: #ffffff33;
}
.lw-cg-slot.next {
  animation: lw-cg-glow 1.2s ease-in-out infinite;
}
@keyframes lw-cg-glow {
  50% {
    box-shadow: 0 0 0 6px #ffcf3f88;
  }
}
.lw-cg-tinlabel {
  justify-self: center;
  font: 600 15px/1 var(--lw-font, Fredoka, sans-serif);
  color: #5d4a2a;
}
.lw-cg-tin,
.lw-cg-bowl {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  padding: 14px;
  border-radius: 24px;
  background: #fff4d6;
  border: 3px dashed #c98a4b;
}
body.lw .lw-cg-pick,
body.lw .lw-cg-take {
  min-height: 0;
  padding: 8px;
  border: 3px solid #fff;
  border-radius: 20px;
  background: #fffdf5;
  box-shadow: 0 4px 0 #e0bf63;
}
body.lw .lw-cg-pick:active,
body.lw .lw-cg-take:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #e0bf63;
}
body.lw .lw-cg-back {
  justify-self: center;
  min-height: 0;
  padding: 8px 16px;
  border: 2px dashed #c98a4b;
  border-radius: 999px;
  background: #fff8e6;
  color: #1f2d4d;
  font: 600 14px/1 var(--lw-font, Fredoka, sans-serif);
}
/* Modenschau */
.lw-cg-runway {
  position: relative;
  display: grid;
  place-items: end center;
  height: 260px;
  overflow: hidden;
  border-radius: 24px;
  background: radial-gradient(ellipse at 50% 100%, #ef5b9355 0 30%, transparent 60%), linear-gradient(#1f2d4d, #3a4e7a);
  box-shadow: inset 0 -40px 0 #c98a4b, inset 0 -44px 0 #8a5528;
}
.lw-cg-lights {
  position: absolute;
  inset: 10px 20px auto;
  display: flex;
  justify-content: space-between;
}
.lw-cg-lights i {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ffcf3f;
  box-shadow: 0 0 14px #ffcf3f;
  animation: lw-cg-blink 1.4s ease-in-out infinite;
}
.lw-cg-lights i:nth-child(2n) {
  animation-delay: 0.7s;
  background: #ef5b93;
  box-shadow: 0 0 14px #ef5b93;
}
@keyframes lw-cg-blink {
  50% {
    opacity: 0.4;
  }
}
.lw-cg-soja {
  width: 170px;
  height: 180px;
  margin-bottom: 26px;
  padding-top: 20px;
}
.lw-cg-soja > svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.lw-cg-soja.cheer > svg {
  animation: lw-wd-cheer 0.7s cubic-bezier(0.3, 1.6, 0.5, 1) 2;
}
.lw-cg-curtain {
  position: absolute;
  inset: 0;
  display: flex;
  pointer-events: none;
}
.lw-cg-curtain span {
  flex: 1;
  background: repeating-linear-gradient(90deg, #c13d71 0 18px, #ef5b93 18px 36px);
  transition: transform 0.7s cubic-bezier(0.5, 0, 0.3, 1);
}
.lw-cg-curtain span:first-child {
  transform: translateX(-102%);
}
.lw-cg-curtain span:last-child {
  transform: translateX(102%);
}
.lw-cg-runway.closed .lw-cg-curtain span {
  transform: none;
}
body.lw .lw-cg-ready {
  justify-self: center;
  min-height: 0;
  padding: 12px 24px;
  border-radius: 999px;
  background: #5fbf3f;
  color: #fff;
  font: 700 18px/1 var(--lw-font, Fredoka, sans-serif);
  box-shadow: 0 4px 0 #3f962a;
}
.lw-cg-options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px;
}
.lw-cg-options:empty {
  display: none;
}
body.lw .lw-cg-item {
  display: grid;
  justify-items: center;
  gap: 4px;
  min-height: 0;
  padding: 10px 6px;
  border: 3px solid #fff;
  border-radius: 18px;
  background: #fffdf5;
  color: #1f2d4d;
  font: 600 13px/1.1 var(--lw-font, Fredoka, sans-serif);
  box-shadow: 0 4px 0 #e0bf63;
}
.lw-cg-item .lw-wd-ico {
  width: 52px;
  height: 52px;
}
body.lw .lw-cg-item.good {
  border-color: #5fbf3f;
  background: #e8f8df;
}
/* Perlenkette */
.lw-cg-plan {
  justify-self: center;
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 10px 18px 14px;
  border: 3px solid #1f2d4d;
  border-radius: 16px;
  background: #fff radial-gradient(circle, #dfe6ef 1px, transparent 1.5px) 0 0 / 14px 14px;
  transform: rotate(-1.5deg);
}
.lw-cg-plantitle {
  font: 700 13px/1 var(--lw-font, Fredoka, sans-serif);
  letter-spacing: 0.08em;
  color: #5d6679;
  text-transform: uppercase;
}
.lw-cg-planrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 700 22px/1 var(--lw-font, Fredoka, sans-serif);
  color: #1f2d4d;
}
.lw-cg-count {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.lw-cg-then {
  font-size: 15px;
  font-weight: 600;
  color: #5d6679;
}
.lw-cg-emoji {
  font-size: 34px;
}
.lw-cg-word {
  letter-spacing: 0.18em;
  font-size: 28px;
}
.lw-cg-bead {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 2.5px solid #1f2d4d;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffffffcc 0 18%, transparent 22%), var(--c);
}
.lw-cg-bead.big {
  width: 54px;
  height: 54px;
}
.lw-cg-bead b {
  color: #1f2d4d;
  font: 700 22px/1 var(--lw-font, Fredoka, sans-serif);
  text-shadow: 0 0 3px #fff, 0 0 6px #fff;
}
.lw-cg-thread {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  min-height: 70px;
  padding: 0 40px 0 24px;
  border-radius: 20px;
  background: linear-gradient(#ef5b93, #ef5b93) 12px 50% / calc(100% - 24px) 3px no-repeat, #fff8e6;
  border: 3px dashed #c98a4b;
}
.lw-cg-thread .lw-cg-bead.on {
  width: 46px;
  height: 46px;
  animation: lw-cg-slide 0.35s cubic-bezier(0.3, 1.5, 0.5, 1);
}
@keyframes lw-cg-slide {
  from {
    transform: translate(60px, -40px) scale(0.6);
    opacity: 0;
  }
}
.lw-cg-needle {
  position: absolute;
  right: 10px;
  width: 26px;
  height: 6px;
  border-radius: 3px;
  background: #9aa6b8;
}
.lw-cg-thread.done {
  border-style: solid;
  border-color: #5fbf3f;
  background-color: #e8f8df;
}
@media (max-width: 600px) {
  .lw-cg-btn {
    width: 42px;
    height: 42px;
  }
  .lw-cg-slot {
    width: 46px;
    height: 46px;
  }
  .lw-cg-btn b {
    width: 28px;
    height: 28px;
    font-size: 18px;
  }
  .lw-cg-runway {
    height: 220px;
  }
  .lw-cg-soja {
    width: 140px;
    height: 150px;
  }
  .lw-cg-thread {
    flex-wrap: wrap;
    padding: 8px 34px 8px 14px;
  }
  .lw-cg-thread .lw-cg-bead.on {
    width: 38px;
    height: 38px;
  }
}

/* Fehlermeldung #37 (8.51.0): Müllsortierung auf breiten Bildschirmen – Wörter wurden in Buchstabenstücke zerteilt,
   weil Bild, Name und „ziehen“ nebeneinander in zu schmalen Kacheln standen. Jetzt breitere Kacheln, „ziehen“ unter dem Namen. */
@media (min-width: 561px) {
  body.lw .recycle-game-modern .recycle-items {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr));
  }
  body.lw .recycle-game-modern .recycle-item {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 10px;
    row-gap: 3px;
    text-align: left;
  }
  body.lw .recycle-game-modern .recycle-item > span {
    grid-row: 1 / 3;
  }
  body.lw .recycle-game-modern .recycle-item strong {
    overflow-wrap: normal;
    word-break: normal;
    hyphens: auto;
    line-height: 1.15;
  }
  body.lw .recycle-game-modern .recycle-grip {
    justify-self: start;
  }
}
/* Fehlermeldung #38 (8.51.0): Auf schmalen iPhones schob Safari die Zeilen des Kleiderschranks übereinander –
   Zeilen dürfen nie kleiner als ihr Inhalt werden */
.lw-craft-panel {
  grid-auto-rows: max-content;
  align-content: start;
}
.lw-craft-panel h3 {
  line-height: 1.2;
  text-align: center;
}
.lw-craft-panel.wardrobe .lw-craft-clothes,
.lw-cg-options {
  grid-auto-rows: max-content;
  align-content: start;
}
/* Platz über der Vorschau für hohe Hüte, Horn und Ballon */
.lw-wd-top {
  margin-top: 26px;
}

/* ===== 8.52.0: Iva (Baby mit langen blonden Haaren) – allein oder mit Lian an der Hand ===== */
svg[data-figure="iva"] .lw-wing-l {
  transform-origin: 43px 89px;
}
svg[data-figure="iva"] .lw-wing-r {
  transform-origin: 77px 89px;
}
svg[data-figure="iva"] .lw-beak-low {
  transform-origin: 60px 67px;
}
svg[data-figure="iva"] .lw-lids {
  transform-origin: 60px 54px;
}
.lw-guide.talking svg[data-figure="iva"] .lw-beak-low {
  animation: lw-talk-mouth 0.28s ease-in-out infinite;
}
/* Lian und Iva zusammen sind breiter (Seitenverhältnis 160 : 126) */
.lw-guide:has(> svg[data-figure="duo"]) {
  left: -46px;
  width: 150px;
}
.lw-guide:has(> svg[data-figure="duo"]) .lw-guide-bubble {
  left: 128px;
}
.lw-guide-static:has(> svg[data-figure="duo"]) {
  width: 122px;
}
.lw-guide-pick button svg[data-figure="duo"] {
  width: 70px;
}
/* in der Doppelfigur hält Lian Iva an der Hand – beim Hüpfen vor Freude winkt nur Iva */
.lw-guide.happy svg[data-figure="duo"] .lw-fig > svg[data-figure="lian"] .lw-wing-r {
  animation: none;
}
@media (max-width: 600px) {
  .lw-guide:has(> svg[data-figure="duo"]) {
    left: 0;
    width: 104px;
    height: 82px;
    top: -36px;
  }
  body.lw:has(.lw-guide > svg[data-figure="duo"]) .category {
    margin-left: 104px;
    max-width: calc(100% - 112px);
  }
  body.lw:has(.lw-guide > svg[data-figure="duo"]):not(.lw-no-soja) .category {
    max-width: calc(100% - 184px);
  }
}
/* Weltenkarte: mit Lian und Iva zusammen läuft Soja etwas weiter rechts */
body:not(.lw-no-guide) .lw-map-guide:has(.lw-map-duo) .lw-map-cat {
  transform: translate(50px, 16px) scale(0.74);
}
/* Größenregeln wie „.xyz svg { width: 52px }“ dürfen die beiden eingebetteten Figuren nicht verkleinern */
svg[data-figure="duo"] .lw-fig > svg[data-figure="lian"] {
  width: 120px !important;
  height: 126px !important;
}
svg[data-figure="duo"] .lw-fig > svg[data-figure="iva"] {
  width: 78px !important;
  height: 82px !important;
}
.lw-companion-figs > svg[data-figure="duo"] {
  width: 82px;
}

/* ===== 8.53.0: Soja müde/hingelegt – die halb geschlossenen Augen bleiben sichtbar (vorher deckten die vollen Lider
   alles ab und Soja hatte scheinbar keine Augen) ===== */
.lw-soja.sleepy .lw-lids,
.lw-soja.liedown .lw-lids {
  display: none !important;
}
.lw-soja .lw-lids-half > path:last-child {
  stroke: #1f2d4d;
  stroke-width: 3.2px;
}

/* ===== 8.53.0: Lian und Iva lebendiger – eigener Rhythmus, getrennt blinzeln, kleine Bewegungen ===== */
/* Doppelfigur: nicht als Ganzes wippen, sondern jede Figur für sich */
:is(.lw-guide, .lw-guide-static) svg[data-figure="duo"],
:is(.lw-guide, .lw-guide-static) svg[data-figure="duo"] svg {
  animation: none;
}
:is(.lw-guide, .lw-guide-static) .lw-fig {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
:is(.lw-guide, .lw-guide-static) .lw-fig-lian {
  animation: lw-bob 3.6s ease-in-out infinite;
}
:is(.lw-guide, .lw-guide-static) .lw-fig-iva {
  animation: lw-baby-sway 2.7s ease-in-out -1.1s infinite;
}
@keyframes lw-baby-sway {
  25% {
    transform: rotate(-3deg) translateY(-1px);
  }
  75% {
    transform: rotate(3deg) translateY(-2px);
  }
}
.lw-guide.happy svg[data-figure="duo"] {
  animation: none;
}
.lw-guide.happy .lw-fig-lian {
  animation: lw-jump 0.7s cubic-bezier(0.3, 1.5, 0.5, 1) 2;
}
.lw-guide.happy .lw-fig-iva {
  animation: lw-jump 0.6s cubic-bezier(0.3, 1.5, 0.5, 1) 0.18s 3;
}
.lw-guide.oops .lw-fig-iva {
  animation: lw-tilt 0.9s ease-in-out 0.15s;
}
/* getrennt blinzeln: Iva anderer Takt, Lian blinzelt manchmal doppelt */
:is(.lw-guide, .lw-guide-static) svg[data-figure="lian"] .lw-lids {
  animation: lw-blink-double 6.1s infinite;
}
:is(.lw-guide, .lw-guide-static) svg[data-figure="iva"] .lw-lids {
  animation: lw-blink 4.3s -2.2s infinite;
}
@keyframes lw-blink-double {
  0%,
  86%,
  89%,
  92%,
  100% {
    transform: scaleY(0);
  }
  87.5%,
  90.5% {
    transform: scaleY(1);
  }
}
/* beim Sprechen: Iva brabbelt in anderem Takt */
.lw-guide.talking svg[data-figure="iva"] .lw-beak-low {
  animation: lw-talk-mouth 0.36s ease-in-out infinite;
}
/* in der Doppelfigur hält Lian Iva an der Hand: Ivas linker Arm bleibt beim Freuen unten */
.lw-guide.happy svg[data-figure="duo"] svg[data-figure="iva"] .lw-wing-l {
  animation: none;
}
/* Köpfe, Pupillen, Beine: Drehpunkte */
svg[data-figure="lian"] .lw-head {
  transform-origin: 60px 78px;
  transition: transform 0.45s ease;
}
svg[data-figure="iva"] .lw-head {
  transform-origin: 60px 80px;
  transition: transform 0.45s ease;
}
:is(svg[data-figure="lian"], svg[data-figure="iva"]) .lw-pupils {
  transition: transform 0.3s ease;
}
svg[data-figure="iva"] .lw-leg-l {
  transform-origin: 44px 105px;
}
svg[data-figure="iva"] .lw-leg-r {
  transform-origin: 76px 105px;
}
svg[data-figure="lian"] .lw-ball {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}
/* umschauen */
svg.idle-look-l .lw-head {
  transform: rotate(-9deg);
}
svg.idle-look-r .lw-head {
  transform: rotate(9deg);
}
svg.idle-look-l .lw-pupils {
  transform: translateX(-2.5px);
}
svg.idle-look-r .lw-pupils {
  transform: translateX(2.5px);
}
svg.idle-nod .lw-head {
  animation: lw-nod 0.6s ease-in-out 2;
}
@keyframes lw-nod {
  50% {
    transform: rotate(4deg) translateY(2px);
  }
}
/* winken: Lian mit links, Iva mit rechts (die andere Hand hält in der Doppelfigur) */
svg[data-figure="lian"].idle-wave .lw-wing-l {
  animation: lw-wave-lian 1.8s ease-in-out;
}
@keyframes lw-wave-lian {
  25%,
  55% {
    transform: rotate(125deg);
  }
  40%,
  70% {
    transform: rotate(100deg);
  }
}
svg[data-figure="iva"].idle-wave .lw-wing-r {
  animation: lw-wave-iva 1.8s ease-in-out;
}
@keyframes lw-wave-iva {
  25%,
  55% {
    transform: rotate(-72deg);
  }
  40%,
  70% {
    transform: rotate(-48deg);
  }
}
/* klatschen (nur Iva allein) */
svg[data-figure="iva"].idle-clap .lw-wing-l {
  animation: lw-clap-l 0.5s ease-in-out 3;
}
svg[data-figure="iva"].idle-clap .lw-wing-r {
  animation: lw-clap-r 0.5s ease-in-out 3;
}
@keyframes lw-clap-l {
  50% {
    transform: rotate(-88deg);
  }
}
@keyframes lw-clap-r {
  50% {
    transform: rotate(88deg);
  }
}
/* strampeln */
svg[data-figure="iva"].idle-kick .lw-leg-l {
  animation: lw-kick-l 0.35s ease-in-out 4;
}
svg[data-figure="iva"].idle-kick .lw-leg-r {
  animation: lw-kick-r 0.35s ease-in-out 0.17s 4;
}
@keyframes lw-kick-l {
  50% {
    transform: rotate(14deg);
  }
}
@keyframes lw-kick-r {
  50% {
    transform: rotate(-14deg);
  }
}
/* kichern: Augen zu, Kopf wackelt */
svg[data-figure="iva"].idle-giggle .lw-eyes-open {
  display: none;
}
svg[data-figure="iva"].idle-giggle .lw-eyes-happy {
  display: inline;
}
svg[data-figure="iva"].idle-giggle .lw-head {
  animation: lw-giggle 0.28s ease-in-out 5;
}
@keyframes lw-giggle {
  50% {
    transform: rotate(5deg);
  }
}
/* schaukeln */
.lw-fig-iva:has(> svg.idle-rock),
svg[data-figure="iva"].idle-rock:not(svg[data-figure="duo"] svg) {
  animation: lw-rock 1s ease-in-out 2 !important;
}
@keyframes lw-rock {
  25% {
    transform: rotate(-8deg);
  }
  75% {
    transform: rotate(8deg);
  }
}
/* Lian hüpft / lässt den Ball kreisen */
.lw-fig-lian:has(> svg.idle-hop),
.lw-guide > svg[data-figure="lian"].idle-hop,
.lw-guide-static > svg[data-figure="lian"].idle-hop {
  animation: lw-jump 0.9s cubic-bezier(0.3, 1.5, 0.5, 1) !important;
}
svg[data-figure="lian"].idle-ball .lw-ball {
  animation: lw-ball-spin 1.4s ease-in-out;
}
@keyframes lw-ball-spin {
  30% {
    transform: translateY(-5px) rotate(180deg) scale(1.15);
  }
  70% {
    transform: translateY(-2px) rotate(330deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  :is(.lw-guide, .lw-guide-static) .lw-fig {
    animation: none !important;
  }
}
.lw-guide.oops .lw-fig-lian {
  animation: lw-tilt 0.9s ease-in-out;
}
.lw-guide > svg[data-figure="iva"],
.lw-guide-static > svg[data-figure="iva"] {
  animation: lw-baby-sway 2.7s ease-in-out infinite;
}

/* ===== 8.54.0: Weltenkarte neu – Lagune mit Inseln, Wege je Reich, kleine Bewegungen ===== */
.lw-node .lw-node-disc {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transition: transform 0.2s ease;
}
.lw-node:hover .lw-node-disc,
.lw-node:focus-visible .lw-node-disc {
  transform: scale(1.06);
}
.lw-node:focus-visible .lw-node-disc circle:nth-of-type(2) {
  stroke: #ffcf3f;
}
.lw-node.current circle:nth-of-type(2) {
  animation: none;
}
.lw-node.current .lw-node-disc {
  animation: lw-node-pulse 1.6s ease-in-out infinite;
}
.lw-node .lw-node-pill {
  filter: drop-shadow(0 2px 0 #1f2d4d1a);
}
.lw-node-label {
  stroke-width: 0;
}
.lw-node-count {
  stroke-width: 0;
}
.lw-node.locked {
  opacity: 0.8;
  filter: saturate(0.35);
}
.lw-node-foam {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: lw-foam 3.4s ease-in-out infinite;
}
@keyframes lw-foam {
  50% {
    transform: scale(1.05, 1.1);
    opacity: 0.35;
  }
}
.lw-map-wave {
  animation: lw-map-wave 4s ease-in-out infinite;
}
.lw-map-wave:nth-of-type(3n) {
  animation-delay: -1.3s;
}
.lw-map-wave:nth-of-type(3n + 1) {
  animation-delay: -2.6s;
}
@keyframes lw-map-wave {
  50% {
    transform: translateX(6px);
    opacity: 0.45;
  }
}
.lw-map-cloud {
  animation: lw-map-drift 14s ease-in-out infinite alternate;
}
@keyframes lw-map-drift {
  to {
    translate: 26px 0;
  }
}
.lw-map-boat {
  animation: lw-map-rock 3s ease-in-out infinite;
  transform-box: fill-box;
}
@keyframes lw-map-rock {
  50% {
    translate: 0 4px;
    rotate: 3deg;
  }
}
.lw-map-gull {
  animation: lw-map-gull 2.4s ease-in-out infinite;
}
@keyframes lw-map-gull {
  50% {
    translate: 4px -6px;
  }
}
.lw-map-spout {
  animation: lw-map-spout 3.2s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
@keyframes lw-map-spout {
  0%,
  60%,
  100% {
    opacity: 0;
    scale: 0.4;
  }
  75% {
    opacity: 1;
    scale: 1;
  }
}
.lw-map-twinkle {
  animation: lw-map-twinkle 2.2s ease-in-out infinite;
}
@keyframes lw-map-twinkle {
  50% {
    opacity: 0.25;
  }
}
.lw-map-sun {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: lw-map-sun 5s ease-in-out infinite;
}
@keyframes lw-map-sun {
  50% {
    scale: 1.08;
  }
}
@media (prefers-reduced-motion: reduce) {
  .lw-map-wave,
  .lw-map-cloud,
  .lw-map-boat,
  .lw-map-gull,
  .lw-map-spout,
  .lw-map-twinkle,
  .lw-map-sun,
  .lw-node-foam,
  .lw-node.current .lw-node-disc {
    animation: none !important;
  }
}

/* ===== 8.54.0: Handy – Themenschild endet vor Sojas Kleiderschrank- und Leckerli-Knopf (vorher lagen die Knöpfe
   darüber); Lian und Iva bleiben wieder in ihrem Rahmen (Größenregel griff seit 8.53.0 nicht mehr) ===== */
@media (max-width: 600px) {
  body.lw:not(.lw-no-soja) .category {
    max-width: calc(100% - 232px);
  }
  body.lw:has(.lw-guide > svg[data-figure="duo"]):not(.lw-no-soja) .category {
    max-width: calc(100% - 252px);
    padding: 5px 10px;
    font-size: 12px;
  }
}

/* ===== 8.55.0: Erdkunde – Landschaft, Flaggen, Kontinente, Europa, Rätsel ===== */
.lw-g14 {
  display: grid;
  justify-items: center;
  gap: 12px;
  width: 100%;
}
.lw-g14-pic,
.lw-g14-map {
  position: relative;
  width: min(100%, 620px);
  border: 4px solid #fff;
  border-radius: 22px;
  overflow: hidden;
  background: #bfe6ff;
  box-shadow: 0 6px 0 #1f2d4d22;
}
.lw-g14-emap {
  width: min(100%, 460px);
}
.lw-g14-pic svg,
.lw-g14-map svg {
  display: block;
  width: 100%;
  height: auto;
}
.lw-g14 [data-part],
.lw-g14 [data-c],
.lw-g14 [data-land][role="button"] {
  cursor: pointer;
  outline: none;
  transition: filter 0.2s;
}
.lw-g14 [data-part]:hover,
.lw-g14 [data-part]:focus-visible,
.lw-g14 [data-c]:hover,
.lw-g14 [data-c]:focus-visible,
.lw-g14 [data-land][role="button"]:hover,
.lw-g14 [data-land][role="button"]:focus-visible {
  filter: brightness(1.08) drop-shadow(0 0 3px #fff);
}
.lw-g14 .lw-g14-found {
  filter: drop-shadow(0 0 4px #ffcf3f) drop-shadow(0 0 2px #fff);
}
.lw-g14 [data-land].lw-g14-found {
  fill: #5fbf3f;
}
.lw-g14 .lw-g14-glow {
  animation: lw-g14-glow 1.1s ease-in-out infinite;
}
@keyframes lw-g14-glow {
  50% {
    filter: brightness(1.25) drop-shadow(0 0 6px #ffcf3f);
  }
}
.lw-g14 .lw-g14-flash {
  animation: lw-g14-flash 0.5s;
}
@keyframes lw-g14-flash {
  40% {
    filter: brightness(0.7);
  }
}
.lw-g14 .lw-g14-dim {
  filter: grayscale(1) opacity(0.45);
  pointer-events: none;
}
.lw-g14-maplabel {
  font: 600 26px var(--lw-font, Fredoka, sans-serif);
  fill: #1f2d4d;
  stroke: #fff;
  stroke-width: 6px;
  paint-order: stroke;
  text-anchor: middle;
  pointer-events: none;
}
.lw-g14-dots {
  display: flex;
  gap: 8px;
}
.lw-g14-dots i {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 3px #1f2d4d22;
}
.lw-g14-dots i.on {
  background: #5fbf3f;
}
/* Flaggen */
.lw-g14-flag {
  display: block;
  width: 96px;
  height: 64px;
  border-radius: 4px;
  box-shadow: 0 0 0 2px #1f2d4d, 0 3px 0 2px #1f2d4d22;
}
.lw-g14-flag.mini {
  width: 54px;
  height: 36px;
}
.lw-g14-flag.big {
  width: min(70vw, 300px);
  height: auto;
  aspect-ratio: 3 / 2;
}
.lw-g14 .lw-g12-ico .lw-g14-flag.mini {
  margin: 4px auto;
}
.lw-g14-hideflag {
  display: none;
}
.lw-g14-pole {
  display: flex;
  align-items: flex-start;
  padding: 6px 0 2px;
}
.lw-g14-mast {
  width: 8px;
  height: 170px;
  border-radius: 4px;
  background: linear-gradient(90deg, #8a8f9c, #d7dbe3, #8a8f9c);
  box-shadow: 0 0 0 2px #1f2d4d;
}
.lw-g14-pole .lw-g14-flag {
  width: min(56vw, 220px);
  height: auto;
  aspect-ratio: 3 / 2;
  margin-top: 6px;
  border-radius: 0 6px 6px 0;
  transform-origin: left center;
  animation: lw-g14-wave 3s ease-in-out infinite;
}
@keyframes lw-g14-wave {
  50% {
    transform: skewY(-3deg) scaleX(0.97);
  }
}
body.lw .lw-g14-flagbtn {
  width: clamp(120px, 38vw, 170px);
  padding: 12px 10px 8px;
}
.lw-g14-flagbtn .lw-g14-flag {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
}
/* Flaggen malen */
.lw-g14-paintrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.lw-g14-model {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 10px;
  border-radius: 18px;
  background: #fff;
  transition: opacity 0.4s;
}
.lw-g14-model.hidden-model {
  opacity: 0;
  pointer-events: none;
}
.lw-g14-region {
  cursor: pointer;
  outline: none;
}
.lw-g14-region.lw-g14-wrong {
  stroke: #ef5b93;
  stroke-width: 1.4px;
  animation: lw-g14-flash 0.6s 2;
}
.lw-g14-palette {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
body.lw .lw-g14-swatch {
  display: grid;
  justify-items: center;
  gap: 2px;
  min-width: 64px;
  padding: 6px 8px;
  border: 3px solid #fff;
  border-radius: 16px;
  background: #fff8dc;
  color: #1f2d4d;
  font: 600 14px var(--lw-font, Fredoka, sans-serif);
  box-shadow: 0 3px 0 #1f2d4d22;
}
.lw-g14-swatch i {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px #1f2d4d55;
}
body.lw .lw-g14-swatch[aria-pressed="true"] {
  border-color: #1f2d4d;
  transform: translateY(-3px);
}
.lw-g14-tools {
  display: flex;
  gap: 10px;
}
body.lw .lw-g14-done {
  padding: 12px 26px;
  border: 0;
  border-radius: 999px;
  background: #5fbf3f;
  color: #fff;
  font: 600 18px var(--lw-font, Fredoka, sans-serif);
  box-shadow: 0 4px 0 #3f8f27;
}
/* Europa: Namensschild am gefundenen Land */
.lw-g14-tag {
  position: absolute;
  transform: translate(-50%, calc(-100% - 6px));
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #fff;
  color: #1f2d4d;
  font: 600 15px var(--lw-font, Fredoka, sans-serif);
  box-shadow: 0 3px 0 #1f2d4d33;
  white-space: nowrap;
  pointer-events: none;
}
.lw-g14-tag .lw-g14-flag.mini {
  width: 30px;
  height: 20px;
}
/* Rätsel */
.lw-g14-quizicon {
  font-size: clamp(54px, 15vw, 80px);
  line-height: 1;
}
.lw-g14-answers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  width: min(100%, 560px);
}
body.lw .lw-g14-answer {
  min-height: 60px;
  padding: 10px 14px;
  border: 3px solid #fff;
  border-radius: 18px;
  background: #fff8dc;
  color: #1f2d4d;
  font: 600 17px var(--lw-font, Fredoka, sans-serif);
  box-shadow: 0 4px 0 #1f2d4d22;
}
body.lw .lw-g14-answer.good {
  border-color: #5fbf3f;
  background: #e9f8e2;
}
body.lw .lw-g14-answer.no {
  opacity: 0.45;
}
@media (prefers-reduced-motion: reduce) {
  .lw-g14 .lw-g14-glow,
  .lw-g14-pole .lw-g14-flag {
    animation: none;
  }
  .lw-g14 .lw-g14-glow {
    filter: brightness(1.2) drop-shadow(0 0 6px #ffcf3f);
  }
}

/* ===== 8.55.0: Bastelwelt aus dem Kleiderschrank – „Zurück“ zum vorherigen Spiel ===== */
body.lw .lw-craft-back {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
  min-height: 0;
  padding: 8px 14px;
  border: 0;
  border-radius: 999px;
  background: #1f2d4d;
  color: #fff;
  font: 600 16px/1 var(--lw-font, Fredoka, sans-serif);
  box-shadow: 0 3px 0 #0f1a30;
  white-space: nowrap;
}
.lw-craft-top:has(.lw-craft-back) {
  flex-wrap: wrap;
  justify-content: center;
}
@media (max-width: 480px) {
  body.lw .lw-craft-back {
    padding: 8px 11px;
  }
  body.lw .lw-craft-back span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
}
@media (max-width: 480px) {
  .lw-g14-palette {
    gap: 5px;
  }
  body.lw .lw-g14-swatch {
    min-width: 0;
    width: 60px;
    padding: 5px 2px;
    font-size: 12.5px;
  }
  .lw-g14-swatch i {
    width: 28px;
    height: 28px;
  }
  .lw-g14-paintrow {
    gap: 8px;
  }
}

/* ===== 8.57.0: Sojas-Lernwelt-Logo (Sechseck) ohne runden Rahmen und etwas größer – eigene hochgeladene Logos
   behalten den Kreis ===== */
body.lw .brand-icon:has(img[src*="sojas-lernwelt-logo"]) {
  width: 2.15em;
  height: 2.15em;
  border-radius: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
}
body.lw .brand-icon img[src*="sojas-lernwelt-logo"] {
  object-fit: contain;
  filter: drop-shadow(0 2px 3px #1f2d4d33);
}

/* ===== 8.58.0: Weltenkarte – runder Zurück-Knopf oben links (Fehlermeldungen #39/#40) ===== */
.lw-map-back {
  position: absolute;
  left: 14px;
  top: 14px;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #1f2d4d;
  box-shadow: 0 4px 0 #0f1a30, 0 6px 14px #1f2d4d26;
  font-size: 22px;
  cursor: pointer;
}
.lw-map-back:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #0f1a30;
}
@media (max-width: 600px) {
  .lw-map-back {
    width: 44px;
    height: 44px;
    left: 10px;
    top: 10px;
    font-size: 18px;
  }
}

/* ===== 8.59.0: 🐞-Knopf in der mobilen Ansicht verschiebbar ===== */
@media (max-width: 900px), (pointer: coarse) {
  .lw-bug-fab {
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }
  .lw-bug-fab.dragging {
    opacity: 1;
    transform: scale(1.12);
    box-shadow: 0 10px 24px #1f2d4d55;
    cursor: grabbing;
    transition: none;
  }
}