/* Antwortraster, Abspielleiste und Rückmeldungs-Animationen – gemeinsam für alle Hörtrainer. */

.answer-grid {
  --cols: 5;
  --cell-h: 58px;
  display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 8px;
}
.answer-grid--wide { --cols: 2; --cell-h: 62px; }
@media (min-width: 560px) { .answer-grid--wide { --cols: 3; } }
@media (min-width: 900px) { .answer-grid--wide { --cols: 4; } }
@media (max-width: 380px) { .answer-grid { gap: 6px; --cell-h: 54px; } }

.answer-block + .answer-block { margin-top: 22px; }
.answer-block__title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-size: var(--fs-sm); font-weight: 750; color: var(--text-2); }

.cell {
  position: relative; min-width: 0; height: var(--cell-h); border-radius: var(--r-md);
  background: var(--field); border: 1.5px solid var(--line-strong);
  transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast) var(--ease-out);
}
.cell__index {
  position: absolute; top: 5px; left: 8px; font-size: 0.62rem; font-weight: 750; color: var(--text-3);
  font-family: var(--font-mono); pointer-events: none; letter-spacing: 0.02em;
}
.cell__input {
  display: block; width: 100%; min-width: 0; height: 100%; padding: 12px 4px 0; border: 0; border-radius: inherit; background: transparent;
  text-align: center; font-family: var(--font-mono); font-size: 1.22rem; font-weight: 700; color: var(--text);
  caret-color: var(--accent-strong); outline: none;
}
.answer-grid--wide .cell__input { font-size: 1.3rem; letter-spacing: 0.04em; }
.cell__input::placeholder { color: var(--surface-3); }
.cell__input[readonly] { cursor: default; }

/* aktive Zelle – deutlich hervorgehoben */
.cell.is-active {
  border-color: var(--accent); background: #15142a;
  box-shadow: 0 0 0 4px rgba(139, 124, 255, 0.22), 0 10px 26px -12px rgba(139, 124, 255, 0.6);
  transform: translateY(-1px);
}
.cell.is-active .cell__index { color: var(--accent-strong); }
.cell.is-filled:not(.is-active):not(.is-correct):not(.is-wrong) { border-color: #3d4560; background: var(--surface-2); }

/* Markierung der gerade gesprochenen Ansage (Durchlauf-Modus) */
.cell.is-playing::before {
  content: ""; position: absolute; top: 7px; right: 8px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--teal); box-shadow: 0 0 0 0 rgba(45, 212, 191, 0.6);
  animation: ping 1.1s var(--ease-out) infinite;
}
@keyframes ping { 70%, 100% { box-shadow: 0 0 0 7px rgba(45, 212, 191, 0); } }

/* Richtig: Aufploppen + Häkchen + kurzer Glow (≈320 ms) */
.cell.is-correct { border-color: var(--ok); background: #0f1f1a; }
.cell.is-correct .cell__input { color: var(--ok); }
.cell.is-correct.animate { animation: pop var(--t-feedback) var(--ease-spring), glow 420ms var(--ease-out); }
.cell__mark {
  position: absolute; top: 5px; right: 6px; width: 16px; height: 16px; pointer-events: none;
}
.cell__mark path { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.cell.is-correct .cell__mark path { stroke: var(--ok); stroke-dasharray: 24; stroke-dashoffset: 0; }
.cell.is-correct.animate .cell__mark path { animation: draw 300ms 60ms var(--ease-out) both; }
.cell.is-wrong .cell__mark path { stroke: var(--bad); }

/* Falsch: klares Rot + sehr dezenter Shake (≈280 ms) */
.cell.is-wrong { border-color: var(--bad); background: #22121a; }
.cell.is-wrong .cell__input { color: var(--bad); }
.cell.is-wrong.animate { animation: shake 280ms ease-in-out; }
.cell__solution {
  position: absolute; left: 0; right: 0; bottom: -1px; transform: translateY(100%);
  text-align: center; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 750; color: var(--ok);
  padding-top: 2px; pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.answer-grid.has-solutions { row-gap: 26px; }

@keyframes pop { 0% { transform: scale(1); } 45% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes glow { 0% { box-shadow: 0 0 0 0 var(--ok-glow); } 100% { box-shadow: 0 0 0 10px rgba(52, 211, 153, 0); } }
@keyframes draw { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 50% { transform: translateX(3px); } 75% { transform: translateX(-2px); } }

@media (prefers-reduced-motion: reduce) {
  .cell.is-correct.animate, .cell.is-wrong.animate, .cell.is-correct.animate .cell__mark path { animation: none; }
  .cell.is-active { transform: none; }
  .cell.is-playing::before { animation: none; }
  .progress__bar::after { animation: none; }
  .btn.is-attention { animation: none; box-shadow: 0 0 0 3px rgba(139, 124, 255, .45); }
}

/* ---------- Abspielleiste ---------- */
.player {
  position: sticky; top: calc(var(--topbar-h, 0px) + 10px); z-index: 20;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 14px;
  background: rgba(18, 21, 29, 0.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--line-strong); border-radius: var(--r-lg);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.8);
}
.player__row { display: flex; align-items: center; gap: 10px; }
.player__status { flex: 1; min-width: 0; }
.player__status b { display: block; font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player__status span { display: block; font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player__counts { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-2); white-space: nowrap; }
.player .btn--icon { width: 48px; min-height: 48px; border-radius: 14px; }
.player .play-btn { width: 54px; min-height: 54px; border-radius: 50%; }
.player__transcript { font-size: var(--fs-lg); font-weight: 750; text-align: center; padding: 6px; border-radius: var(--r-md); background: var(--surface-2); }

.eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; margin-right: 6px; vertical-align: -1px; }
.eq i { width: 3px; border-radius: 2px; background: var(--teal); height: 30%; }
.is-speaking .eq i { animation: eq 0.9s ease-in-out infinite; }
.is-speaking .eq i:nth-child(2) { animation-delay: -0.3s; }
.is-speaking .eq i:nth-child(3) { animation-delay: -0.6s; }
@keyframes eq { 0%, 100% { height: 25%; } 50% { height: 100%; } }
@media (prefers-reduced-motion: reduce) { .is-speaking .eq i { animation: none; height: 70%; } }

/* Mobile Aktionsleiste: bleibt über der Bildschirmtastatur */
.action-bar {
  position: fixed; left: 0; right: 0; bottom: var(--kb); z-index: 40;
  display: none; gap: 8px; align-items: center;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background: rgba(10, 12, 17, 0.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line-strong);
}
.action-bar { flex-wrap: wrap; }
.action-bar .chips { flex: 1 1 0; }
.action-bar .chips:not(:empty) { flex: 1 0 100%; order: -1; }
.action-bar .chips .chip { flex: 1 1 0; min-width: 0; }
.action-bar .btn { min-height: 44px; }
.action-bar .btn--primary { flex: 1 1 auto; }
body.is-training .action-bar { display: flex; }
body.is-training.kb-open .tabbar { display: none; }
@media (min-width: 900px) and (hover: hover) { body.is-training .action-bar { display: none; } }

.session { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.session > * { min-width: 0; }
.session-help { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--text-3); font-size: var(--fs-xs); }
.session-help span { display: inline-flex; align-items: center; gap: 6px; }

/* Ergebnis */
.result-hero { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.result-hero__text { flex: 1; min-width: 200px; display: grid; gap: 8px; }
.result-hero.animate .ring { animation: pop 380ms var(--ease-spring); }
@media (prefers-reduced-motion: reduce) { .result-hero.animate .ring { animation: none; } }