/* ══════════ Handy-Seiten (Kandidatin, Publikum, Regie) ══════════ */
html, body { margin: 0; min-height: 100%; }
body {
  font-family: var(--schrift);
  color: #fff;
  background: radial-gradient(ellipse at 50% 0%, #1a2a9a 0%, #070c45 45%, #01021a 100%) fixed;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}
main { max-width: 560px; margin: 0 auto; padding: 16px 16px calc(24px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 16px; min-height: 100dvh; }

.kopf { display: flex; align-items: center; gap: 12px; }
.kopf .logo { --logo: 58px; flex: none; }
.kopf .logo .oben { font-size: 5px; }
.kopf .logo .unten { font-size: 8px; }
.kopf .titel { font-weight: 800; font-size: 18px; line-height: 1.2; }
.kopf .unter { color: var(--gold); font-weight: 700; font-size: 15px; }
.kopf .punkt { margin-left: auto; width: 12px; height: 12px; border-radius: 50%; background: #e0261b; box-shadow: 0 0 8px currentColor; flex: none; }
.kopf .punkt.ok { background: #36d24a; }

.status { text-align: center; font-size: 22px; font-weight: 700; line-height: 1.3; min-height: 1.3em; }
.status small { display: block; font-size: 15px; font-weight: 500; opacity: 0.8; margin-top: 6px; }

.frage-karte { --cut: 22px; min-height: 96px; display: flex; }
.frage-karte > .fill { flex: 1; height: auto; }
.frage-karte .fill { justify-content: center; text-align: center; font-size: 18px; line-height: 1.3; padding: 14px calc(var(--cut) + 6px); font-weight: 600; }

.antworten { display: flex; flex-direction: column; gap: 12px; }
.antworten .antwort { --cut: 22px; height: 64px; font: 600 19px/1.15 var(--schrift-schmal); border: 0; width: 100%; cursor: pointer; font-family: var(--schrift-schmal); }
.antworten .antwort .fill { padding: 0 calc(var(--cut) + 4px); }
.antworten .antwort .text { white-space: normal; overflow: visible; }
.antworten .antwort:disabled { cursor: default; }
.antworten .antwort.vorwahl > .fill { outline: none; background: linear-gradient(180deg, #5a6ee0, #2c3fb5 50%, #1a2a8f); }
.antworten.gesperrt .antwort:not(.gewaehlt):not(.richtig) { filter: saturate(0.6) brightness(0.8); }

.joker-zeile { display: flex; justify-content: center; gap: 18px; }
.joker-zeile .joker { width: 84px; height: 54px; font-size: 18px; cursor: pointer; padding: 0; }
.joker-zeile .joker:disabled:not(.benutzt) { opacity: 0.35; cursor: default; }

.knopf {
  display: block; width: 100%;
  padding: 18px; border-radius: 999px; border: 3px solid var(--gold);
  font: 800 20px/1.2 var(--schrift); color: #000; cursor: pointer;
  background: linear-gradient(180deg, var(--gold-hell), var(--orange-dunkel));
}
.knopf.zweit { background: transparent; color: #fff; border-color: #8fa0e8; }
.knopf:active { transform: scale(0.98); }
[hidden] { display: none !important; }

/* Bestätigungs-Leiste unten */
.bestaetigen {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5;
  padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(4, 8, 56, 0.97), #01021a);
  border-top: 2px solid #8fa0e8;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.6);
  transform: translateY(110%);
  transition: transform 0.25s ease-out;
}
.bestaetigen.an { transform: none; }
.bestaetigen .frage { text-align: center; font-size: 20px; font-weight: 700; margin-bottom: 14px; }
.bestaetigen .knoepfe { display: flex; gap: 12px; max-width: 528px; margin: 0 auto; }

.countdown-klein { text-align: center; font-size: 44px; font-weight: 800; color: var(--gold); }
.fuss { margin-top: auto; text-align: center; opacity: 0.5; font-size: 13px; }