/* Erzeugt von scripts/build-edition.mjs aus editions/vocab-grundschule/ – nicht von Hand bearbeiten. */
/* Math Cup Grundschule · helles, kindgerechtes Theme über dem gemeinsamen Motor.
   @{schlüssel} ersetzt build-edition.mjs durch den Pfad aus edition.json → extraImages. */

/* Tipps: die Zahleneule überlegt mit */
body.edition-grundschule .math-hint:not([hidden]) {
  padding-left: 76px;
  position: relative;
}

body.edition-grundschule .math-hint:not([hidden])::before {
  content: "";
  position: absolute;
  left: 8px;
  bottom: 4px;
  width: 64px;
  height: 64px;
  background: url("assets/kids/begleiter/kids_guide_eule_ueberlegt.png") center / contain no-repeat;
  pointer-events: none;
}

/* Aufgabenkarte: so groß wie die Aufgabe statt Balken über das halbe Feld.
   Halbtransparent, damit Stadion und Zuschauer sichtbar bleiben; Level nur als Randfarbe. */
body.edition-grundschule .field .word-display,
body.edition-grundschule .field .word-display.answer-visible,
body.edition-grundschule.level-challenge .field .word-display,
body.edition-grundschule.level-elite .field .word-display,
body.edition-grundschule.possession-rush-active .field .word-display {
  /* Feste Maße: die Schriftanpassung (fitPromptText) braucht einen Kasten mit Spielraum.
     Etwa halbe Feldbreite statt 84 %, damit Tore und Zuschauer sichtbar bleiben. */
  width: min(56%, 700px);
  height: clamp(124px, 26%, 180px);
  padding: 30px clamp(24px, 2.6vw, 40px) 14px;
  border: 3px solid rgba(255, 255, 255, 0.55);
  border-radius: 26px;
  background: rgba(14, 42, 58, 0.5);
  -webkit-backdrop-filter: blur(6px) saturate(1.1);
  backdrop-filter: blur(6px) saturate(1.1);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}

body.edition-grundschule.level-challenge .field .word-display { border-color: rgba(255, 196, 70, 0.85); }
body.edition-grundschule.level-elite .field .word-display { border-color: rgba(255, 96, 110, 0.85); }
body.edition-grundschule .field .word-display.answer-visible { background: rgba(40, 52, 20, 0.55); border-color: rgba(255, 226, 120, 0.9); }

body.edition-grundschule .field .word-display::before { opacity: 0.35; border-radius: 23px; }

body.edition-grundschule .field .word-display strong {
  font-size: clamp(52px, 6vw, 110px);
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.35), 0 0 18px rgba(0, 0, 0, 0.25);
}

/* Steuerleiste: „Nächste Aufgabe“ groß in der Mitte, damit man sie sofort trifft.
   Links: Andere Aufgabe, Lösung, Tipp · rechts: Einstellungen, Rückgängig, Neustart. */
body.edition-grundschule .controls .middle-panel {
  grid-template-columns: 1fr 1.3fr 1fr;
  grid-auto-rows: minmax(0, auto);
  grid-auto-flow: row dense;
  align-items: stretch;
  gap: 5px;
}

body.edition-grundschule .controls .middle-panel > .tool {
  grid-column: 1;
  grid-row: auto;
  min-height: 0;
  padding: 4px 8px;
  font-size: clamp(10px, 0.8vw, 12px);
  line-height: 1.15;
}

body.edition-grundschule .controls .middle-panel > [data-action="edit-prompts"],
body.edition-grundschule .controls .middle-panel > [data-action="undo"],
body.edition-grundschule .controls .middle-panel > [data-action="reset"] {
  grid-column: 3;
}

body.edition-grundschule .controls .middle-panel > [data-action="next-round"] {
  grid-column: 2;
  grid-row: 1 / span 3;
  padding: 8px 12px;
  border-radius: 14px;
  font-size: clamp(15px, 1.35vw, 21px);
  line-height: 1.1;
}

/* Keine Meta-Angaben („Normal 2“) auf der Aufgabenkarte – die Kinder sehen nur die Aufgabe. */
body.edition-grundschule #mathTaskBadge { display: none !important; }

/* Aufgabennummer für die Lehrkraft (passt zur Zeile auf dem Lösungsblatt): im Duel Mode klein auf dem
   Knopf „Lösung zeigen“, in Possession Rush (ohne diesen Knopf) klein und blass unten rechts in der Karte
   (die Karte schneidet Überstehendes ab, ihr Glanzlicht läuft über den Rand). */
body.edition-grundschule .math-task-number:not([hidden]) {
  display: block;
  margin-top: 2px;
  font-size: 0.85em;
  font-weight: 800;
  color: var(--mc-gold, #f7d84a);
  opacity: 0.9;
  white-space: nowrap;
}

body.edition-grundschule.possession-rush-active .field .word-display #mathTaskBadge:not([hidden]) {
  display: block !important;
  top: auto;
  left: auto;
  bottom: 6px;
  right: 10px;
  font-size: 11px;
  padding: 1px 8px;
  opacity: 0.75;
  white-space: nowrap;
}
body.edition-grundschule .field .word-display { padding-top: 16px; }

/* Setup Grundschule: feste Teamfarben und Standards, weniger Stellschrauben. */
body.edition-grundschule #setup .team-name-settings .color-setting,
body.edition-grundschule #setup .season-color-field,
body.edition-grundschule #setup .countdown-length-setting:has(#countdownLengthSelect),
body.edition-grundschule #setup .pressure-advanced,
body.edition-grundschule #setup .quick-possession-rush-advanced,
body.edition-grundschule #setup .setup-section-title:has(+ .timer-helper + .shot-animation-settings),
body.edition-grundschule #setup .timer-helper:has(+ .shot-animation-settings),
body.edition-grundschule #setup .shot-animation-settings {
  display: none !important;
}

@media (min-width: 761px) {
  body.edition-grundschule #setup .team-name-settings {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Steuerleiste Grundschule: normale Schreibweise, breitere Mitte, Knöpfe mindestens 32 px hoch. */
body.edition-grundschule .controls .middle-panel {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr);
}

body.edition-grundschule .controls .middle-panel > .tool {
  min-height: 32px;
  text-transform: none;
  letter-spacing: 0;
  font-size: clamp(11px, 0.95vw, 13px);
}

body.edition-grundschule .controls .middle-panel > [data-action="next-round"] {
  font-size: clamp(16px, 1.45vw, 22px);
  text-transform: none;
  letter-spacing: 0;
}

/* Mit Tipp-Knopf (ab Klasse 2): Das Zwölfer-Raster aus math-hints.css würde „Nächste Aufgabe“ in eine
   schmale Spalte drücken. In der Grundschul-Edition bleiben drei Spalten: links Andere Aufgabe,
   Lösung zeigen, Tipp; Mitte „Nächste Aufgabe“ über alle Zeilen; rechts Einstellungen, Rückgängig, Neustart. */
@media (min-width: 981px) and (min-height: 501px) {
  body.edition-grundschule:not(.possession-rush-active) .controls .middle-panel:has(> .math-hint-tool:not([hidden])) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr);
  }

  body.edition-grundschule:not(.possession-rush-active) .controls .middle-panel:has(> .math-hint-tool:not([hidden])) > .tool,
  body.edition-grundschule:not(.possession-rush-active) .controls .middle-panel:has(> .math-hint-tool:not([hidden])) > .math-hint-tool {
    grid-column: 1;
  }

  body.edition-grundschule:not(.possession-rush-active) .controls .middle-panel:has(> .math-hint-tool:not([hidden])) > [data-action="edit-prompts"],
  body.edition-grundschule:not(.possession-rush-active) .controls .middle-panel:has(> .math-hint-tool:not([hidden])) > [data-action="undo"],
  body.edition-grundschule:not(.possession-rush-active) .controls .middle-panel:has(> .math-hint-tool:not([hidden])) > [data-action="reset"] {
    grid-column: 3;
  }

  body.edition-grundschule:not(.possession-rush-active) .controls .middle-panel:has(> .math-hint-tool:not([hidden])) > [data-action="next-round"] {
    grid-column: 2;
    grid-row: 1 / span 3;
  }
}

/* Rechenaufgaben stehen immer in einer Zeile wie im Heft (Rückmeldung 27.09.2026, Klasse 4:
   „□ + 420.000 = 510.000“ brach um). Passt die Zeile nicht, verkleinert fitPromptText die Schrift. */
body.edition-grundschule .word-display strong.mc-task:not(.mc-task-visual),
body.edition-grundschule .penalty-prompt-card strong.mc-task:not(.mc-task-visual) {
  flex-wrap: nowrap;
}

/* Bildkarte: Bei Bildaufgaben ist das helle Bildfeld selbst die Karte (kein Kasten im Kasten).
   Etwa 60 % breit und gut ein Drittel hoch – groß genug für die letzte Reihe, das Spielfeld bleibt sichtbar. */
body.edition-grundschule .field .word-display:has(strong.mc-task-visual) {
  width: min(60%, 780px);
  height: clamp(160px, 36%, 280px);
  padding: 0;
  border: 0;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}

body.edition-grundschule .field .word-display:has(strong.mc-task-visual)::before {
  display: none;
}

body.edition-grundschule .word-display strong.mc-task-visual .mc-visual-wrap svg {
  max-height: 100%;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.3));
}

body.edition-grundschule .word-display.answer-visible strong.mc-task-visual .mc-visual-wrap svg {
  max-height: 82%;
}

/* Lebendige Zuschauer (Code-Lösung): Die vordere Reihe wippt, jubelt bei richtigen Antworten
   und springt bei Toren. Statt der langsamen Kamerafahrt, damit Bild und Reihe deckungsgleich bleiben. */
body.edition-grundschule.fx-ready .field-bg-image {
  animation: none;
}

body.edition-grundschule .field-bg .crowd-band {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 76%, #000 81%);
  mask-image: linear-gradient(to bottom, transparent 0, transparent 76%, #000 81%);
  transform-origin: 50% 100%;
  animation: crowdBob 2.6s ease-in-out infinite;
}

body.edition-grundschule .field-bg.crowd-cheer .crowd-band {
  animation: crowdCheer 0.8s ease-out 1;
}

body.edition-grundschule .field-bg.crowd-jump .crowd-band {
  animation: crowdJump 1.5s ease-out 1;
}

@keyframes crowdBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

@keyframes crowdCheer {
  0% { transform: translateY(0); }
  35% { transform: translateY(-7px); }
  100% { transform: translateY(0); }
}

@keyframes crowdJump {
  0% { transform: translateY(0); }
  14% { transform: translateY(-12px); }
  28% { transform: translateY(0); }
  44% { transform: translateY(-9px); }
  58% { transform: translateY(0); }
  74% { transform: translateY(-5px); }
  100% { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  body.edition-grundschule .field-bg .crowd-band { animation: none !important; }
}

body.edition-grundschule.performance-mode .field-bg .crowd-band {
  animation: none !important;
}

/* Vocab Cup Grundschul-Edition – Ergänzungen zum Grundschul-Look (theme.css der Grundschule davor).
   Englische Bildkarten, Bildkarten-Druck, Bausteine nach Themenfeldern. */

/* Emoji-Bilder nicht als Text markierbar. */
svg[data-en-card] .en-emoji {
  user-select: none;
}

/* Keep the English edition's main and tool controls easy to touch on tablets. */
@media (min-width: 760px) and (min-height: 621px) and (orientation: landscape) {
  body.edition-vocab-grundschule.possession-rush-active .controls .action,
  body.edition-vocab-grundschule.possession-rush-active .controls > .middle-panel > .tool {
    min-height: 44px;
  }
}

/* „Deine Aufgaben sind fertig“: Bildkarten und Vorlese-Schalter. */
.en-ready {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.en-ready .en-ready-actions {
  margin: 0;
}

/* Bausteine nach Themenfeldern. */
.mc-block-group + .mc-block-group {
  margin-top: 14px;
}

.mc-block-group-title {
  margin: 0 0 8px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.75;
}

/* Bild aufdecken: Kacheln verschwinden nacheinander (Verzögerung je Kachel steht im SVG). */
@keyframes en-peek-off { to { opacity: 0; } }
.en-peek-cover { animation: en-peek-off 0.45s ease-out forwards; }

/* Was fehlt? Erst alle Bilder, dann die Reihe mit Lücke. */
@keyframes en-kim-hide { to { opacity: 0; visibility: hidden; } }
@keyframes en-kim-show { from { opacity: 0; } to { opacity: 1; } }
.en-kim-first { animation: en-kim-hide 0.35s ease-in forwards; }
.en-kim-then { animation: en-kim-show 0.35s ease-out forwards; }

/* Weniger Bewegung: ohne Ausblenden wechseln; Merkzeit und Kacheltakt bleiben erhalten. */
@media (prefers-reduced-motion: reduce) {
  .en-peek-cover, .en-kim-first, .en-kim-then { animation-duration: 0.01s; }
}

/* Größere Bildkarte (28.09.2026): Die Bilder sind der Kern der Aufgabe und müssen auch aus der letzten
   Reihe erkennbar sein. Die Antwort steht in der Sprechblase der Karte, deshalb schrumpft die Karte beim
   Aufdecken nicht (im Math Cup steht das Lösungsschild daneben). */
body.edition-vocab-grundschule .field .word-display:has(strong.mc-task-visual) {
  width: min(66%, 900px);
  height: clamp(220px, 50%, 440px);
}

body.edition-vocab-grundschule .word-display.answer-visible strong.mc-task-visual .mc-visual-wrap svg {
  max-height: 100%;
}

/* --- Tour „So geht's“ (english-tour.js, Dokument 24/25) ------------------------------------------ */
body.edition-vocab-grundschule .setup-card { position: relative; }
.en-tour-open {
  position: absolute; top: 18px; right: 22px; z-index: 2;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 20px 8px 8px; border-radius: 999px; border: 2px solid rgba(255, 226, 120, 0.9);
  background: #ffd34d; color: #1d2433; font: 800 1.05rem/1 "Arial Rounded MT Bold", Arial, sans-serif;
  cursor: pointer; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
}
.en-tour-open img { width: 42px; height: 42px; object-fit: contain; }
.en-tour-open:hover, .en-tour-open:focus-visible { transform: translateY(-1px); outline: 3px solid #fff; outline-offset: 2px; }

.en-tour {
  position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center;
  padding: 2vh 2vw; background: rgba(12, 22, 34, 0.72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  font-family: "Arial Rounded MT Bold", Arial, sans-serif; color: #1d2433;
}
.en-tour[hidden] { display: none; }
.en-tour-card {
  width: min(1320px, 96vw); height: min(840px, 94vh); display: flex; flex-direction: column;
  background: #fffaf0; border-radius: 28px; border: 3px solid #e6dcc3; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); overflow: hidden;
}
.en-tour-head { display: flex; align-items: center; gap: 14px; padding: 12px 18px; background: #2f7d4f; color: #fff; }
.en-tour-head-owl { width: 46px; height: 46px; object-fit: contain; }
.en-tour-head h2 { margin: 0 8px 0 0; font-size: 1.5rem; white-space: nowrap; }
.en-tour-nav { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.en-tour-nav button {
  border: 2px solid rgba(255, 255, 255, 0.5); background: transparent; color: #fff; border-radius: 999px;
  padding: 6px 12px; font: 700 0.9rem "Arial Rounded MT Bold", Arial, sans-serif; cursor: pointer;
}
.en-tour-nav button[aria-current="step"] { background: #ffd34d; color: #1d2433; border-color: #ffd34d; }
.en-tour-close { border: 0; background: rgba(255, 255, 255, 0.18); color: #fff; width: 42px; height: 42px; border-radius: 50%; font-size: 1.7rem; cursor: pointer; }
.en-tour-body { flex: 1; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr); gap: 24px; padding: 22px; min-height: 0; }
.en-tour-scene { position: relative; display: flex; align-items: center; justify-content: center; min-height: 0; overflow: hidden; border-radius: 20px; background: #eef3f7; }
.en-tour-text { display: flex; flex-direction: column; justify-content: center; gap: 12px; padding-right: 8px; }
.en-tour-kicker { margin: 0; font-size: 0.95rem; font-weight: 800; letter-spacing: 0.04em; color: #2f7d4f; text-transform: uppercase; }
.en-tour-step-title { margin: 0; font-size: clamp(1.6rem, 2.6vw, 2.3rem); line-height: 1.15; }
.en-tour-step-text { margin: 0; font-size: clamp(1.15rem, 1.6vw, 1.45rem); line-height: 1.45; }
.en-tour-step-text em, .en-tour-scene em { font-style: italic; color: #1f5fbf; }
.en-tour-dots { display: flex; gap: 8px; margin-top: 6px; }
.en-tour-dots span { width: 12px; height: 12px; border-radius: 50%; background: #d5dbe5; }
.en-tour-dots span.on { background: #2f7d4f; }
.en-tour-actions { display: flex; gap: 12px; margin-top: 10px; }
.en-tour-actions button { flex: 1; padding: 14px 18px; border-radius: 16px; font: 800 1.15rem "Arial Rounded MT Bold", Arial, sans-serif; cursor: pointer; }
.en-tour-back { border: 2px solid #c9c1ad; background: #fff; color: #1d2433; }
.en-tour-back:disabled { opacity: 0.45; cursor: default; }
.en-tour-next { border: 2px solid #1d2433; background: #ffd34d; color: #1d2433; }
.en-tour-actions button:focus-visible, .en-tour-nav button:focus-visible, .en-tour-close:focus-visible { outline: 3px solid #2e5bd9; outline-offset: 2px; }

/* Szenen */
.en-tour-scene.en-tour-enter > * { animation: en-tour-in 0.45s ease-out both; }
@keyframes en-tour-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes en-tour-pop { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: none; } }
.en-tour-scene svg.mc-visual { width: 100%; height: auto; max-height: 100%; }
.en-tour-bubble {
  margin: 0; padding: 12px 22px; border-radius: 26px; background: #fff; border: 4px solid #1d2433;
  font-size: 1.35rem; font-weight: 800; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18); animation: en-tour-pop 0.4s ease-out both;
}
.en-tour-pitch { position: absolute; inset: 0; background-size: cover; background-position: center; }
.en-tour-team { position: absolute; top: 8%; width: 17%; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.35)); }
.en-tour-team-a { left: 4%; }
.en-tour-team-b { right: 4%; }
.en-tour-ball { position: absolute; top: 44%; left: 50%; font-size: 3rem; transform: translate(-50%, -50%); filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.4)); }
.en-tour-ball[data-ball="goal"] { animation: en-tour-roll 2.4s ease-in-out 0.6s both; }
.en-tour-ball[data-ball="spot"] { left: 78%; }
@keyframes en-tour-roll { 0% { left: 50%; } 45% { left: 64%; } 55% { left: 64%; } 100% { left: 89%; } }
.en-tour-goal { position: absolute; top: 34%; right: 7%; font-size: 3.4rem; font-weight: 900; color: #ffd34d; -webkit-text-stroke: 3px #1d2433; animation: en-tour-pop 0.4s ease-out 2.9s both; }
.en-tour-press { position: absolute; bottom: 6%; left: 6%; padding: 14px 30px; border-radius: 16px; color: #fff; font-size: 1.5rem; font-weight: 900; animation: en-tour-pulse 1.2s ease-in-out 3; }
.en-tour-press-green { background: #1f8a5a; }
.en-tour-press-red { background: #b0303e; left: auto; right: 6%; }
@keyframes en-tour-pulse { 50% { transform: scale(1.08); box-shadow: 0 0 0 8px rgba(255, 211, 77, 0.6); } }
.en-tour-bubble-pitch { position: absolute; bottom: 8%; left: 50%; transform: translateX(-50%); white-space: nowrap; }
.en-tour-owl-pitch { position: absolute; bottom: 2%; right: 2%; width: 22%; }
.en-tour-cards, .en-tour-forms { display: flex; gap: 18px; align-items: center; justify-content: center; width: 100%; padding: 16px; }
.en-tour-cards figure, .en-tour-forms figure { margin: 0; flex: 1; max-width: 520px; text-align: center; }
.en-tour-forms figure { animation: en-tour-pop 0.45s ease-out both; }
/* Gleiche Höhe für alle drei Stufen, auch wenn die Elite-Karte breiter ist. */
.en-tour-forms { flex-wrap: wrap; }
.en-tour-forms figure { flex: 0 0 auto; max-width: none; }
.en-tour-forms svg.mc-visual { width: auto; height: min(24vh, 200px); max-width: none; }
.en-tour-cards figcaption, .en-tour-forms figcaption { margin-top: 8px; font-weight: 800; font-size: 1.1rem; }
.en-tour-pair { display: flex; gap: 18px; width: 100%; }
.en-tour-pair figure { flex: 1; margin: 0; text-align: center; }
.en-tour-blocks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; padding: 18px; width: 100%; }
.en-tour-block-group p { margin: 0 0 6px; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: #5a6272; }
.en-tour-block-group div { display: flex; flex-wrap: wrap; gap: 6px; }
.en-tour-chip { padding: 6px 10px; border-radius: 12px; background: #fff; border: 2px solid #d5dbe5; font-size: 0.95rem; font-weight: 700; }
.en-tour-chip-on { background: #ffd34d; border-color: #1d2433; animation: en-tour-pulse 1.2s ease-in-out 0.8s 2; }
.en-tour-chip-more { color: #8a93a3; }
.en-tour-formats { width: min(560px, 92%); background: #fff; border-radius: 20px; border: 2px solid #d5dbe5; padding: 16px 20px; }
.en-tour-formats-head { margin: 0 0 10px; font-weight: 900; font-size: 1.2rem; }
.en-tour-formats ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.en-tour-formats li { display: flex; align-items: center; gap: 10px; font-size: 1rem; }
.en-tour-formats li.off { color: #6b7385; }
.en-tour-switch { width: 38px; height: 22px; border-radius: 999px; background: #c9ced8; position: relative; flex: none; }
.en-tour-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; }
.en-tour-formats li.on .en-tour-switch { background: #2f9d57; }
.en-tour-formats li.on .en-tour-switch::after { left: 19px; }
.en-tour-buttons { display: flex; flex-direction: column; gap: 16px; align-items: center; }
.en-tour-button { padding: 16px 34px; border-radius: 18px; background: #1f8a5a; color: #fff; font-size: 1.4rem; font-weight: 900; animation: en-tour-pop 0.4s ease-out both; }
.en-tour-owl-scene { display: flex; align-items: center; gap: 12px; padding: 16px; }
.en-tour-owl-scene .en-tour-owl { width: min(300px, 45%); }
.en-tour-dialog { display: flex; flex-direction: column; gap: 16px; align-items: stretch; width: min(560px, 90%); position: relative; }
.en-tour-bubble-child { align-self: flex-start; background: #e4ecfb; }
.en-tour-bubble-teacher { align-self: flex-end; background: #ffd34d; }
.en-tour-dialog .en-tour-owl { width: 120px; align-self: flex-end; }
.en-tour-ladder { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; padding: 20px; }
.en-tour-rung { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 22px; border-radius: 18px; background: var(--rung); border: 3px solid #1d2433; animation: en-tour-pop 0.45s ease-out both; }
.en-tour-rung strong { font-size: 1.4rem; }
.en-tour-arrow { font-size: 2rem; font-weight: 900; }
.en-tour-bubble-ladder { flex-basis: 100%; text-align: center; max-width: 360px; margin-top: 10px; animation-delay: 1.6s; }
.en-tour-table { width: calc(100% - 24px); margin: 12px; border-collapse: collapse; background: #fff; border-radius: 14px; overflow: hidden; font-size: clamp(0.8rem, 1.05vw, 1rem); }
.en-tour-table th { background: #2f7d4f; color: #fff; text-align: left; padding: 8px 10px; }
.en-tour-table td { padding: 7px 10px; border-top: 1px solid #e6e9ef; vertical-align: top; }
.en-tour-table tr:nth-child(even) td { background: #f6f8fb; }
.en-tour-symbols { list-style: none; margin: 0; padding: 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; width: 100%; max-height: 100%; overflow: auto; }
.en-tour-symbols li { display: flex; align-items: center; gap: 10px; font-size: 0.95rem; }
.en-tour-symbols svg { width: 40px; height: 40px; flex: none; }
.en-tour-symbols strong { display: block; }
.en-tour-sheet { width: min(640px, 92%); background: #fff; border-radius: 12px; padding: 18px 20px; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15); }
.en-tour-sheet p { margin: 0 0 10px; font-weight: 900; font-size: 1.2rem; }
.en-tour-sheet table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.en-tour-sheet th { text-align: left; border-bottom: 2px solid #1d2433; padding: 6px; }
.en-tour-sheet td { border-bottom: 1px solid #e6e9ef; padding: 6px; }
.en-tour-keys { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 28px; }
.en-tour-keys li { display: flex; align-items: center; gap: 14px; font-size: 1.2rem; font-weight: 700; animation: en-tour-pop 0.4s ease-out both; }
.en-tour-keys kbd { min-width: 64px; padding: 12px 14px; border-radius: 12px; background: #fff; border: 3px solid #1d2433; box-shadow: 0 5px 0 #1d2433; font: 900 1.5rem "Arial Rounded MT Bold", Arial, sans-serif; text-align: center; }

@media (max-width: 900px) {
  .en-tour-body { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1.2fr) auto; }
  .en-tour-open span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .en-tour *, .en-tour *::before, .en-tour *::after { animation-duration: 0.01s !important; animation-delay: 0s !important; }
}

.field .ball.ball-style-mathe { --ball-image: url("assets/kids/baelle/kids_ball_mathe.png"); }
.ball-style-preview-mathe { --ball-preview-image: url("assets/kids/baelle/kids_ball_mathe.png"); }
.field .ball.ball-style-stars { --ball-image: url("assets/kids/baelle/kids_ball_stars.png"); }
.ball-style-preview-stars { --ball-preview-image: url("assets/kids/baelle/kids_ball_stars.png"); }
.field .ball.ball-style-dots { --ball-image: url("assets/kids/baelle/kids_ball_dots.png"); }
.ball-style-preview-dots { --ball-preview-image: url("assets/kids/baelle/kids_ball_dots.png"); }