/* KidsLearningPro — die Spiele aus D-022: Karten-Quiz, Lückentext-Rennen, Zeitstrahl-Puzzle, Kettenrechnen */

:root {
    --kt-wasser: #BFDCF2;
    --kt-land: #F3EACB;
    --kt-nachbar: #E1E4EC;
    --kt-rand: #FFFFFF;
    --kt-landschaft: rgba(158, 102, 46, .40);
    --kt-landschaft-rand: rgba(120, 72, 28, .75);
    --kt-fluss: #2C6BD1;
    --kt-stadt: #1D2433;
    --kt-schild-rand: rgba(255, 255, 255, .92);
}
html[data-welt="nacht"] {
    --kt-wasser: #17324F;
    --kt-land: #4B5274;
    --kt-nachbar: #2A2F4A;
    --kt-rand: #1A1E36;
    --kt-landschaft: rgba(222, 168, 96, .45);
    --kt-landschaft-rand: rgba(240, 196, 130, .85);
    --kt-fluss: #7FB2FF;
    --kt-stadt: #F4F6FB;
    --kt-schild-rand: rgba(15, 18, 34, .92);
}

/* ---------- Karten-Quiz ---------- */
.kt-gruppe { margin: 22px 0 10px; font-size: 1.15rem; }
.kt-rahmen { padding: 14px; }
.kt-frage { font-family: var(--schrift-titel); font-size: 1.35rem; font-weight: 650; margin: 0 0 10px; text-wrap: balance; }
.kt-antwort { min-height: 2.6em; margin: 10px 0 0; font-weight: 600; }
.kt-flaeche { overflow: hidden; border-radius: var(--radius-klein); }
.kt-svg { display: block; width: 100%; height: auto; max-height: 72vh; touch-action: manipulation; cursor: crosshair; }
.kt-svg path, .kt-svg circle { vector-effect: non-scaling-stroke; }
.kt-wasser { fill: var(--kt-wasser); }
.kt-land { fill: var(--kt-land); stroke: var(--kt-rand); stroke-width: .9; }
.kt-nachbar { fill: var(--kt-nachbar); stroke: var(--kt-rand); stroke-width: .8; }
.kt-ohne-rand { stroke: none; }
.kt-grenze { fill: none; stroke: var(--kt-rand); stroke-width: .9; pointer-events: none; }
.kt-landschaft { fill: var(--kt-landschaft); stroke: var(--kt-landschaft-rand); stroke-width: 1.2; }
.kt-fluss { fill: none; stroke: var(--kt-fluss); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.kt-stadt { fill: var(--kt-stadt); stroke: var(--kt-rand); stroke-width: 1.5; }
.kt-klein { fill: none; stroke: var(--kt-stadt); stroke-width: 1.5; stroke-dasharray: 3 2; }
.kt-k-afrika { fill: #F2C46B; }
.kt-k-asien { fill: #E8907F; }
.kt-k-europa { fill: #8FB1E8; }
.kt-k-nordamerika { fill: #93CF93; }
.kt-k-suedamerika { fill: #C9A2DD; }
.kt-k-australien { fill: #F2A3C8; }
.kt-k-antarktis { fill: #E9EDF2; }
.kt-svg .kt-ziel { fill: var(--gut); stroke: var(--gut); }
.kt-svg .kt-fluss.kt-ziel { fill: none; stroke-width: 5; }
.kt-svg .kt-falsch { fill: var(--falsch); stroke: var(--falsch); }
.kt-svg .kt-fluss.kt-falsch { fill: none; stroke-width: 5; }
.kt-svg .kt-ziel, .kt-svg .kt-falsch { animation: kt-blinken 900ms ease-in-out 2; }
.kt-schild {
    fill: var(--tinte); font-family: var(--schrift-titel); font-weight: 700; paint-order: stroke;
    stroke: var(--kt-schild-rand); stroke-width: 5px; stroke-linejoin: round; pointer-events: none;
}
@keyframes kt-blinken { 50% { opacity: .55; } }

/* ---------- Lückentext-Rennen ---------- */
.rn-bahn {
    position: relative; height: 56px; margin: 0 0 16px; border-radius: var(--radius);
    background: repeating-linear-gradient(90deg, var(--flaeche-tief) 0 22px, var(--flaeche) 22px 44px);
    border: 2px solid var(--rand);
}
.rn-laeufer {
    position: absolute; left: 0; top: 50%; font-size: 2rem; transform: translateY(-50%) scaleX(-1);
    transition: left 500ms ease-out;
}
.rn-ziel { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 1.8rem; }
.rn-satz { font-family: var(--schrift-titel); font-size: 1.4rem; font-weight: 600; line-height: 1.5; margin: 6px 0 20px; }
.rn-luecke {
    display: inline-block; min-width: 4.5em; margin: 0 .25em; padding: 0 .4em; text-align: center;
    border-bottom: 3px solid var(--akzent); color: var(--akzent);
}
.rn-luecke.rn-gut { border-color: var(--gut); color: var(--gut); background: var(--gut-hell); border-radius: 8px 8px 0 0; }
.rn-luecke.rn-falsch { border-color: var(--falsch); color: var(--falsch); background: var(--falsch-hell); border-radius: 8px 8px 0 0; }

/* ---------- Zeitstrahl-Puzzle ---------- */
.zs-auftrag { margin: 0 0 14px; }
.zs-strahl {
    list-style: none; margin: 0 0 8px; padding: 18px 0 0; display: grid; gap: 10px;
    grid-template-columns: repeat(5, 1fr); position: relative;
}
.zs-strahl::before {
    content: ""; position: absolute; left: 4px; right: 4px; top: 8px; height: 4px; border-radius: 2px;
    background: linear-gradient(90deg, var(--rand), var(--akzent));
}
.zs-platz {
    min-height: 92px; padding: 10px; border: 2px dashed var(--rand); border-radius: var(--radius-klein);
    background: var(--flaeche); display: flex; flex-direction: column; gap: 4px; font-size: .85rem;
}
.zs-jahr { font-family: var(--schrift-titel); font-weight: 700; font-size: 1.05rem; color: var(--tinte-leise); }
.zs-platz.zs-fertig { border-style: solid; border-color: var(--gut); background: var(--gut-hell); animation: hops 450ms ease-out; }
.zs-platz.zs-geholfen { border-style: solid; border-color: var(--gold); background: var(--gold-hell); }
.zs-fertig .zs-jahr, .zs-geholfen .zs-jahr { color: var(--tinte); }
.zs-hinweis { min-height: 1.6em; margin: 6px 0; font-weight: 600; color: var(--falsch); }
.zs-karten { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.zs-karte {
    min-height: var(--ziel); padding: 14px 16px; border: 2px solid var(--rand); border-radius: var(--radius);
    background: var(--flaeche); color: var(--tinte); font: inherit; font-weight: 600; text-align: left; cursor: pointer;
    box-shadow: var(--sockel); transition: transform var(--bewegung);
}
.zs-karte:active { transform: translateY(2px); }
.zs-karte.zs-wackeln { border-color: var(--falsch); animation: wackeln 420ms ease-in-out; }
/* 🔊 am Ereignis (D-042): Nachbar der Karte, über ihrem rechten Rand */
.zs-karte-platz { position: relative; display: grid; }
.zs-karte-platz .zs-karte { padding-right: calc(var(--ziel) + 20px); }
.knopf.knopf-rund.zs-ton { position: absolute; right: 8px; top: calc(50% - var(--ziel) / 2); }
/* Frage und 🔊 nebeneinander: der Text nimmt den Platz, den Abstand gibt die Zeile */
.frage-zeile > .kt-frage, .frage-zeile > .rn-satz, .frage-zeile > .zs-auftrag, .frage-zeile > .kr-kette { flex: 1; margin: 0; }
.kt-rahmen .frage-zeile { margin-bottom: 10px; }
@media (max-width: 700px) {
    .zs-strahl { grid-template-columns: 1fr; padding: 0 0 0 18px; }
    .zs-strahl::before { left: 6px; right: auto; top: 4px; bottom: 4px; width: 4px; height: auto;
                         background: linear-gradient(180deg, var(--rand), var(--akzent)); }
    .zs-platz { min-height: 0; }
}

/* ---------- Kettenrechnen ---------- */
.kr-kette { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 8px; margin-bottom: 20px; }
.kr-zahl {
    min-width: 72px; padding: 10px 12px; text-align: center; border-radius: var(--radius-klein);
    border: 2px solid var(--rand); background: var(--flaeche); font-family: var(--schrift-titel);
    font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.kr-start { background: var(--akzent-hell); border-color: var(--akzent); }
.kr-zahl.kr-jetzt { border-color: var(--akzent); box-shadow: 0 0 0 4px var(--akzent-hell); }
.kr-zahl.kr-gut { border-color: var(--gut); background: var(--gut-hell); }
.kr-zahl.kr-falsch { border-color: var(--falsch); background: var(--falsch-hell); }
.kr-op { font-weight: 700; color: var(--tinte-leise); white-space: nowrap; font-size: 1.15rem; }
.kr-op::before { content: "→ "; color: var(--rand); }
.kr-eingabe { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.kr-eingabe .mathe-eingabe { max-width: 220px; margin: 0; }
.kr-rueck { min-height: 1.6em; margin: 12px 0 0; font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
    .kt-svg .kt-ziel, .kt-svg .kt-falsch, .zs-platz.zs-fertig, .zs-karte.zs-wackeln { animation: none; }
    .rn-laeufer { transition: none; }
}