/* =========================================================
   Fach Englisch: Bild/Wort-Aufgabe, Antwort-Knoepfe, Lernkarten
   Alle Klassen mit Praefix en-, damit nichts mit math.css kollidiert.
   ========================================================= */

/* ---------- Aufgabe (Stage) ---------- */
.en-prompt {
    min-height: 186px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 12px;
    margin: 10px 0 2px;
    text-align: center;
}
.en-prompt.enter { animation: taskIn .28s ease-out; }
.en-ask { margin: 0; font-weight: 800; font-size: 1.1rem; line-height: 1.25; opacity: .75; }
.en-row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; max-width: 100%; }

/* englisches Wort als Aufkleber */
.en-word {
    display: inline-block; max-width: 100%;
    font-weight: 900; font-size: clamp(2.2rem, 12vw, 3.2rem); line-height: 1.1;
    background: #fff;
    border: var(--line) solid var(--tinte); border-radius: 20px;
    box-shadow: 0 5px 0 var(--tinte);
    padding: 4px 20px 10px;
    overflow-wrap: anywhere;
}
.en-word.long { font-size: clamp(1.7rem, 9vw, 2.5rem); }

/* deutsches Wort */
.en-de {
    display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
    max-width: 100%;
    background: var(--pistazie);
    border: var(--line) solid var(--tinte); border-radius: 20px;
    box-shadow: 0 5px 0 var(--tinte);
    padding: 6px 22px 10px;
}
.en-de-label {
    font-weight: 900; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
    color: var(--himbeere-dunkel);
}
.en-de-word { font-weight: 900; font-size: clamp(2rem, 11vw, 2.9rem); line-height: 1.1; overflow-wrap: anywhere; }

/* Lautsprecher */
.en-say, .en-big-say {
    padding: 0; line-height: 1; cursor: pointer;
    color: var(--tinte); background: var(--zitrone);
    border: 3px solid var(--tinte); border-radius: 50%;
    box-shadow: 0 4px 0 var(--tinte);
    transition: background-color .15s;
}
.en-say { flex: none; width: 56px; height: 56px; font-size: 1.6rem; }
.en-big-say {
    width: 124px; height: 124px; font-size: 3.6rem;
    border-width: var(--line); box-shadow: var(--shadow);
}
.en-say:active, .en-big-say:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--tinte); }
.en-say.is-speaking, .en-big-say.is-speaking { background: var(--minze); animation: pulse .5s ease-in-out infinite alternate; }
.en-reveal { font-weight: 900; font-size: clamp(1.8rem, 9vw, 2.4rem); line-height: 1.1; animation: praise .4s cubic-bezier(.3, 1.6, .5, 1); }

/* ---------- Bilder: Emoji, Farbklecks, Zahl ---------- */
.en-pic { line-height: 1; }
.en-emoji { display: inline-block; line-height: 1.1; }
.en-emoji.sz-xl { font-size: 5.4rem; }
.en-emoji.sz-md { font-size: 3.8rem; }
.en-emoji.sz-opt { font-size: clamp(2.3rem, 11vw, 2.9rem); }
.en-emoji.sz-card { font-size: 2.6rem; }

.en-swatch {
    display: inline-block; vertical-align: middle;
    width: 1em; height: 1em;
    background: var(--sw, #fff);
    border: var(--line) solid var(--tinte);
    border-radius: 42% 50% 46% 54% / 50% 44% 56% 48%;
    box-shadow: inset 0 -.09em 0 rgba(43, 35, 80, .16), 0 .05em 0 var(--tinte);
}
.en-swatch.sz-xl { font-size: 6.2rem; }
.en-swatch.sz-md { font-size: 4rem; }
.en-swatch.sz-opt { font-size: 3.3rem; }
.en-swatch.sz-card { font-size: 2.6rem; border-width: 3px; }

.en-digit {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.4em; height: 1.4em; padding: 0 .14em;
    font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums;
    color: var(--tinte); background: var(--zitrone);
    border: var(--line) solid var(--tinte); border-radius: .32em;
}
.en-digit.sz-xl { font-size: 4.4rem; }
.en-digit.sz-md { font-size: 2.8rem; }
.en-digit.sz-opt { font-size: 2.1rem; border-width: 3px; }
.en-digit.sz-card { font-size: 1.8rem; border-width: 3px; }

/* ---------- Wort mit Luecke ---------- */
.en-spell {
    display: flex; align-items: center; justify-content: center; flex-wrap: nowrap;
    max-width: 100%;
    font-weight: 900; font-size: clamp(2rem, 10vw, 2.9rem); line-height: 1.2;
}
.en-spell.long { font-size: clamp(1.5rem, 7.4vw, 2.3rem); }
.en-spell .ltr { display: inline-block; margin: 0 .02em; }
.en-spell .gap {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.15em; height: 1.35em; margin: 0 .08em;
    color: rgba(43, 35, 80, .3); background: #fff;
    border: 4px dashed var(--tinte); border-radius: .26em;
    transition: background-color .15s;
}
.en-spell .gap.ok { border-style: solid; background: var(--minze); color: var(--tinte); animation: bump .35s cubic-bezier(.3, 1.8, .5, 1); }
.en-spell .gap.reveal { border-style: solid; background: var(--zitrone); color: var(--tinte); }

/* ---------- Antwort-Knoepfe ---------- */
.en-answers { display: grid; gap: 12px; margin-top: 6px; }
.en-answers.pics.n3, .en-answers.letters { grid-template-columns: repeat(3, 1fr); }
.en-answers.pics.n4, .en-answers.words.n4 { grid-template-columns: repeat(2, 1fr); }
.en-answers.words.n3 { grid-template-columns: 1fr; }

.en-opt {
    position: relative;
    min-width: 0; min-height: 72px; padding: 8px 10px;
    display: flex; align-items: center; justify-content: center;
    font-weight: 900; font-size: clamp(1.25rem, 6vw, 1.6rem); line-height: 1.1;
    color: var(--tinte); background: #fff;
    border: 3px solid var(--tinte); border-radius: 18px;
    box-shadow: 0 5px 0 var(--tinte);
    cursor: pointer;
    overflow-wrap: anywhere;
    transition: opacity .2s, background-color .15s;
}
.en-opt.long { font-size: clamp(1rem, 4.9vw, 1.35rem); }
.en-answers.pics .en-opt { min-height: 92px; }
.en-answers.words.n3 .en-opt { min-height: 64px; }
.en-answers.letters .en-opt { min-height: 78px; font-size: 2.4rem; }
.en-opt:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--tinte); }

.en-answers.done .en-opt { cursor: default; }
.en-answers.done .en-opt:not(.is-correct):not(.is-wrong) { opacity: .4; }
.en-opt.is-correct { background: var(--minze); animation: bump .35s cubic-bezier(.3, 1.8, .5, 1); }
.en-opt.is-wrong { background: var(--himbeere); color: #fff; animation: shake .42s; }
.en-opt.is-correct::after, .en-opt.is-wrong::after {
    content: "✓";
    position: absolute; top: -11px; right: -9px;
    width: 30px; height: 30px;
    display: grid; place-items: center;
    font-size: 1rem; font-weight: 900; line-height: 1; color: #fff;
    background: var(--minze-dunkel);
    border: 3px solid var(--tinte); border-radius: 50%;
}
.en-opt.is-wrong::after { content: "✕"; background: var(--himbeere-dunkel); }

/* ---------- Lernkarten im Einstieg ---------- */
.en-flash-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 14px 0 4px; }
.en-flash {
    flex: 0 1 calc(50% - 5px); min-width: 0;
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: 108px; padding: 10px 6px 8px;
    color: var(--tinte); background: #fff;
    border: 3px solid var(--tinte); border-radius: 18px;
    box-shadow: 0 4px 0 var(--tinte);
    cursor: pointer;
    transition: background-color .15s;
    animation: scoopPop .5s cubic-bezier(.3, 1.8, .5, 1) backwards;
    animation-delay: calc(var(--i) * 90ms + 250ms);
}
.en-flash:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--tinte); }
.en-flash.tap { animation: bump .35s cubic-bezier(.3, 1.8, .5, 1); }
.en-flash.is-speaking { background: var(--zitrone); }
.en-flash-cards.mini .en-flash { min-height: 96px; }
.fc-pic { display: flex; align-items: center; justify-content: center; min-height: 3rem; line-height: 1; }
.fc-en { font-weight: 900; font-size: clamp(1.15rem, 5.4vw, 1.45rem); line-height: 1.1; overflow-wrap: anywhere; }
.en-flash.long .fc-en { font-size: clamp(.95rem, 4.3vw, 1.2rem); }
.fc-de { font-weight: 700; font-size: .9rem; line-height: 1.2; opacity: .7; }
.fc-say { position: absolute; top: 6px; right: 8px; font-size: .85rem; line-height: 1; opacity: .7; }

/* ---------- kleine Bildschirme ---------- */
@media (max-width: 360px) {
    .en-answers { gap: 10px; }
    .en-opt { padding: 6px; }
    .en-answers.pics .en-opt { min-height: 84px; }
    .en-say { width: 50px; height: 50px; font-size: 1.4rem; }
    .en-flash { padding: 8px 4px 6px; }
}

@media (max-height: 700px) {
    .en-prompt { min-height: 150px; gap: 8px; margin-top: 6px; }
    .en-emoji.sz-xl { font-size: 4.4rem; }
    .en-swatch.sz-xl { font-size: 5rem; }
    .en-digit.sz-xl { font-size: 3.6rem; }
    .en-big-say { width: 104px; height: 104px; font-size: 3rem; }
    .en-answers.pics .en-opt { min-height: 80px; }
    .en-opt { min-height: 64px; }
}