/* =========================================================
   Fach Mathe: Waffel-Timer, Aufgabe, Ziffernblock
   ========================================================= */

/* Waffel-Timer */
.timer { display: flex; align-items: center; gap: 10px; }
.timer-track {
    flex: 1; height: 26px;
    border: 3px solid var(--tinte); border-radius: 999px;
    background: #fff; overflow: hidden;
}
.timer-fill {
    height: 100%; width: 100%;
    background-color: var(--waffel);
    background-image:
        repeating-linear-gradient(45deg, rgba(110, 55, 10, .35) 0 2px, transparent 2px 12px),
        repeating-linear-gradient(-45deg, rgba(110, 55, 10, .35) 0 2px, transparent 2px 12px);
    border-radius: 999px;
}
.timer-sec {
    min-width: 3.4ch; text-align: right;
    font-weight: 900; font-size: 1.2rem; font-variant-numeric: tabular-nums;
}
.timer-bonus {
    font-weight: 900; font-size: .95rem; white-space: nowrap;
    background: var(--zitrone); border: 3px solid var(--tinte); border-radius: 999px;
    padding: 1px 8px;
}
.timer-bonus.pop { animation: scoopPop .5s cubic-bezier(.3, 1.8, .5, 1); }
.timer.low .timer-fill { background-color: var(--himbeere); }
.timer.low .timer-sec { color: var(--himbeere-dunkel); animation: pulse .45s ease-in-out infinite alternate; }
.timer.frozen .timer-fill { background-color: #cfc9dc; }

/* Aufgabe */
.task {
    min-height: 150px;
    display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
    gap: .15em .28em;
    margin: 14px 0 4px;
    font-weight: 900; line-height: 1.15;
    font-size: clamp(2.3rem, 11vw, 3.9rem);
    font-variant-numeric: tabular-nums;
}
.task.seq { font-size: clamp(1.7rem, 8.2vw, 2.8rem); gap: .15em .2em; }
.task .op { color: var(--himbeere); }
.task .comma { color: var(--tinte); opacity: .4; margin-left: -.22em; }
.task.enter { animation: taskIn .28s ease-out; }
.slot {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.75em; height: 1.35em; padding: 0 .15em;
    border: 4px dashed var(--tinte); border-radius: .3em;
    background: #fff;
    transition: background-color .15s, border-color .15s;
}
.slot.empty { color: rgba(43, 35, 80, .3); }
.slot.filled { border-style: solid; border-color: var(--himbeere); }
.slot.ok { background: var(--minze); border: 4px solid var(--tinte); color: #fff; animation: bump .35s cubic-bezier(.3, 1.8, .5, 1); }
.slot.reveal { background: var(--zitrone); border: 4px solid var(--tinte); color: var(--tinte); }

/* Ziffernblock */
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 6px; }
.key {
    height: 62px;
    font-weight: 900; font-size: 1.9rem; color: var(--tinte);
    background: #fff;
    border: 3px solid var(--tinte); border-radius: 18px;
    box-shadow: 0 5px 0 var(--tinte);
    cursor: pointer; padding: 0;
}
.key.pressed, .key:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--tinte); }
.key.del { background: var(--vanille); font-size: 1.6rem; }
.key.ok { background: var(--minze); color: #fff; }

@media (max-height: 700px) {
    .task { min-height: 110px; margin-top: 8px; }
    .key { height: 54px; }
}