.hra-tydenni-kviz .panel-tyden { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.hra-tydenni-kviz .odpocet { margin: 6px 0 0; color: var(--tlumeny); font-weight: 700; font-size: .92rem; }
.hra-tydenni-kviz .serie-tydnu { margin: 0; font-weight: 700; color: var(--zelena); text-align: right; }
.pruh-otazek { display: flex; gap: 5px; margin-bottom: 16px; }
.pruh-otazek span { flex: 1; height: 6px; border-radius: 99px; background: var(--linka); }
.pruh-otazek span.hotovo { background: var(--zelena); }
.pruh-otazek span.hotovo.chyba { background: var(--cervena); }
.otazka-karta { padding: 26px 22px; }
.cislo-otazky { color: var(--tlumeny); font-weight: 700; margin: 0 0 6px; }
.zneni-otazky { margin: 0 0 18px; font-size: clamp(1.15rem, 3vw, 1.4rem); }
.moznosti { display: grid; gap: 10px; }
.moznosti button { display: block; width: 100%; text-align: left; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--linka); background: var(--karta); color: var(--text); font: inherit; font-weight: 700; cursor: pointer; min-height: 44px; }
.moznosti button:hover:not(:disabled) { border-color: var(--zelena); }
.moznosti button:disabled { cursor: default; }
.moznosti button.spravna { background: color-mix(in srgb, var(--zelena) 16%, var(--karta)); border-color: var(--zelena); }
.moznosti button.chybna { background: color-mix(in srgb, var(--cervena) 14%, var(--karta)); border-color: var(--cervena); }
.vysvetleni { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--linka); }
.vysvetleni p:first-of-type { font-weight: 700; margin: 0 0 8px; }
.prehled-odpovedi { display: grid; gap: 12px; }
.prehled-odpovedi .radek-otazky { border-bottom: 1px solid var(--linka); padding-bottom: 10px; }
.prehled-odpovedi .radek-otazky:last-child { border-bottom: 0; padding-bottom: 0; }
.prehled-odpovedi .stav { font-weight: 800; margin-right: 6px; }
.prehled-odpovedi .stav.ok { color: var(--zelena); }
.prehled-odpovedi .stav.chyba { color: var(--cervena); }

@media (max-width: 520px) {
  .panel-tyden { flex-direction: column; align-items: flex-start; }
  .serie-tydnu { text-align: left; }
}