/* ustni.css — Trénink ústní zkoušky (časovač + formulář běží současně,
   po vyhodnocení barevné skóre podle shody s referenčním řešením).
   Vnitřek modalu (.kviz-dialog, .kviz-close...) sdílí vzhled s kviz.css,
   ale vnější obal #ustniModal potřebuje vlastní pravidlo pro fullscreen
   pozicování a zobrazení – #kvizModal{...} v kviz.css platí jen pro to ID. */

#ustniModal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  font-family: "Source Sans Pro", Arial, sans-serif;
}

#ustniModal.is-open {
  display: block;
}

/* ---- kompaktní časovač (běží nahoře, formulář je hned pod ním) ---- */

.ustni-timer-compact {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgb(11, 27, 61);
  color: #fff;
  border-radius: 10px;
  padding: 10px 18px;
  margin: 14px auto 0;
  max-width: 260px;
}

.ustni-timer-compact-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgb(252, 134, 0);
}

.ustni-timer-compact-cas {
  font-size: 22px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.ustni-timer-compact-cas.je-kriticky {
  color: rgb(255, 138, 110);
}

/* ---- otázky / formulář ---- */

.ustni-otazky {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 18px;
}

.ustni-otazka {
  background: #f9f9fb;
  border: 2px solid #e4e6eb;
  border-radius: 10px;
  padding: 14px 16px;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.ustni-otazka-hlavicka {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.ustni-otazka label {
  display: block;
  font-weight: 700;
  color: rgb(11, 27, 61);
  font-size: 15px;
}

.ustni-otazka textarea {
  width: 100%;
  min-height: 64px;
  border: 1px solid #d7dae1;
  border-radius: 8px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 14px;
  resize: vertical;
  box-sizing: border-box;
}

.ustni-otazka textarea:focus {
  outline: none;
  border-color: rgb(11, 27, 61);
}

.ustni-reference {
  display: none;
  margin-top: 12px;
  background: #f4f5f8;
  border: 1px solid #e4e6eb;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 14px;
  color: #3a3f4b;
}

.ustni-reference.je-zobrazene {
  display: block;
}

.ustni-reference strong {
  display: block;
  color: rgb(11, 27, 61);
  margin-bottom: 4px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* ---- skóre shody (červená/oranžová/žlutá/zelená) ---- */

.ustni-skore-badge {
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.ustni-skore-badge:empty {
  display: none;
}

.skore-cervena {
  background: #fdeeee;
  border-color: #f2b8b8 !important;
  color: #b3261e;
}

.skore-oranzova {
  background: #fff1e6;
  border-color: #ffcfa3 !important;
  color: rgb(178, 90, 20);
}

.skore-zluta {
  background: #fff9e0;
  border-color: #f2e18c !important;
  color: #8a6d00;
}

.skore-zelena {
  background: #eafaf0;
  border-color: #b7e4c7 !important;
  color: #1e7e34;
}

.ustni-otazka.skore-cervena .ustni-skore-badge,
.ustni-otazka.skore-oranzova .ustni-skore-badge,
.ustni-otazka.skore-zluta .ustni-skore-badge,
.ustni-otazka.skore-zelena .ustni-skore-badge {
  background: rgba(255, 255, 255, 0.6);
}

/* ---- celkové skóre (souhrn na konci) ---- */

.ustni-celkove-skore {
  text-align: center;
  border-radius: 12px;
  padding: 20px;
  margin-top: 22px;
  border: 2px solid;
}

.ustni-celkove-cislo {
  font-size: 42px;
  font-weight: 800;
}

.ustni-celkove-text {
  font-size: 14px;
  font-weight: 700;
  margin-top: 4px;
}

@media (max-width: 480px) {
  .ustni-otazka-hlavicka {
    flex-direction: column;
    align-items: flex-start;
  }
}