/* Wer wird Millionär: Akzent Indigo; die Bühne ist in beiden Designs dunkel wie im Fernsehstudio */
:root{--accent:#3d45c2;--accent-dunkel:#2b318f;--on-accent:#ffffff;
  --mio-linie:#8f9dff;--mio-feld:#101a52;--mio-feld2:#1d2b7c;--mio-orange:#f5a01a;--mio-gruen:#2fa84f;--mio-rot:#c7402f}
@media (prefers-color-scheme: dark){:root:not([data-theme="hell"]){--accent:#8f97ff;--on-accent:#0f1233}}
:root[data-theme="dunkel"]{--accent:#8f97ff;--on-accent:#0f1233}

.mio-buehne{width:min(100%,720px);display:flex;flex-direction:column;gap:12px;padding:16px 14px 18px;border-radius:20px;color:#fff;
  background:radial-gradient(ellipse 90% 70% at 50% 0%,#2c3ba6 0%,#141d5c 55%,#0a0f30 100%);box-shadow:0 10px 30px rgba(10,15,48,.25)}
.mio-kopf{display:flex;align-items:center;justify-content:space-between;gap:10px;font-weight:700;font-size:14px}
.mio-stufe{padding:3px 10px;border-radius:999px;background:rgba(255,255,255,.12);letter-spacing:.06em;text-transform:uppercase;font-size:12px}
.mio-stufe.s2{background:rgba(245,160,26,.22)}
.mio-stufe.s3{background:rgba(199,64,47,.4)}
.mio-betrag{color:#ffd27a;font-family:var(--f-display);font-size:17px}

.mio-zeit{display:flex;align-items:center;gap:10px}
.mio-zeit .uhrbar{flex:1;height:8px;border-radius:999px;background:rgba(255,255,255,.15);overflow:hidden}
.mio-zeit .uhrbar i{display:block;height:100%;width:100%;background:var(--mio-orange);border-radius:999px;transition:width .2s linear}
.mio-zeit .uhr{font-family:var(--f-mono);font-size:18px;min-width:44px;text-align:right}
.mio-zeit .uhr.knapp{color:#ff8a7a}
.mio-joker{flex:none;width:58px;height:38px;border-radius:50%;border:2px solid var(--mio-linie);background:var(--mio-feld2);color:#fff;font-weight:800;font-size:14px;cursor:pointer;touch-action:manipulation}
.mio-joker:hover:not(:disabled){background:#2c3ba6}
.mio-joker:disabled{cursor:default}
.mio-joker.aktiv{border-color:var(--mio-orange);color:#ffd27a}
.mio-joker.verbraucht{opacity:.35;text-decoration:line-through}

/* Balken mit spitzen Enden: außen die Linienfarbe, innen die Füllung (2 px kleiner) */
.mio-balken{--spitze:16px;position:relative;display:block;width:100%;padding:2px;border:0;margin:0;background:var(--mio-linie);color:#fff;font:inherit;text-align:left;
  clip-path:polygon(var(--spitze) 0,calc(100% - var(--spitze)) 0,100% 50%,calc(100% - var(--spitze)) 100%,var(--spitze) 100%,0 50%)}
.mio-in{display:flex;align-items:center;gap:8px;min-height:100%;padding:10px calc(var(--spitze) + 6px);background:linear-gradient(180deg,var(--mio-feld2),var(--mio-feld));
  clip-path:polygon(calc(var(--spitze) - 1px) 0,calc(100% - var(--spitze) + 1px) 0,100% 50%,calc(100% - var(--spitze) + 1px) 100%,calc(var(--spitze) - 1px) 100%,0 50%)}
.mio-frage .mio-in{justify-content:center;text-align:center;min-height:76px;font-family:var(--f-display);font-weight:700;font-size:clamp(17px,4.3vw,22px);line-height:1.25;text-wrap:balance}
.mio-antworten{display:grid;grid-template-columns:1fr;gap:8px}
@media (min-width:560px){.mio-antworten{grid-template-columns:1fr 1fr;gap:10px 12px}}
.mio-antw{--spitze:14px;font-size:16px;font-weight:700;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.mio-antw .mio-in{min-height:52px}
.mio-antw b{color:var(--mio-orange);flex:none}
.mio-text{flex:1;min-width:0;overflow-wrap:anywhere}
button.mio-antw{cursor:pointer}
button.mio-antw:disabled{cursor:default}
.mio-buehne.aktiv button.mio-antw:not(:disabled):hover .mio-in{background:linear-gradient(180deg,#34449e,#1d2b7c)}
button.mio-antw:focus-visible{outline:none;background:#fff}
.mio-antw.gewaehlt{background:#ffd27a}
.mio-antw.gewaehlt .mio-in{background:linear-gradient(180deg,#f7b13e,#d97a00);color:#1d1404}
.mio-antw.gewaehlt b{color:#1d1404}
.mio-antw.weg{opacity:.3}
.mio-antw.richtig{background:#9ff0b4}
.mio-antw.richtig .mio-in{background:linear-gradient(180deg,#3cc061,#21843c)}
.mio-antw.richtig b{color:#fff}
.mio-antw.falsch{background:#ffb0a4}
.mio-antw.falsch .mio-in{background:linear-gradient(180deg,#d9573f,#9e2c1e)}
.mio-antw.falsch b{color:#fff}
.mio-wer{display:flex;align-items:center;gap:2px;flex:none}
.mio-wer .av{box-shadow:0 0 0 2px var(--mio-feld)}
.mio-wer small{font-size:12px;margin-left:2px}

.mio-satz{font-weight:700;font-size:17px;text-align:center;margin:0;color:var(--danger)}
.mio-satz.gut{color:var(--gut,#2f8a4c)}
.mio-weiter{margin:0;color:var(--muted);text-align:center}
.tabelle td.gut{color:var(--gut,#2f8a4c);font-weight:700}
.tabelle td.schlecht{color:var(--danger);font-weight:700}

/* Countdown vor der Frage: Betrag und Leiter */
.mio-vor{display:flex;flex-direction:column;align-items:center;gap:2px}
.mio-vor small{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700}
.mio-vor b{font-family:var(--f-display);font-weight:800;font-size:clamp(26px,7vw,40px);color:var(--accent)}
.mio-leiter{list-style:none;margin:0;padding:8px 10px;border-radius:14px;background:#0f1640;color:#ffd27a;width:min(100%,260px);display:flex;flex-direction:column;gap:2px;font-family:var(--f-mono);font-size:14px}
.mio-leiter li{display:flex;justify-content:space-between;gap:12px;padding:2px 10px;border-radius:999px}
.mio-leiter li span{color:#8f9dff}
.mio-leiter li.sicher{color:#fff}
.mio-leiter li.vorbei{opacity:.45}
.mio-leiter li.jetzt{background:var(--mio-orange);color:#1d1404}
.mio-leiter li.jetzt span{color:#1d1404}

/* Bilderfragen: Bild, Eingabe mit Vorschlägen */
.mio-bild{margin:0;display:flex;flex-direction:column;align-items:center;gap:4px}
.mio-bild img{display:block;max-width:100%;max-height:min(34vh,300px);border-radius:10px;background:#0a0f30}
.mio-bild.flagge img{height:min(26vh,200px);width:auto;aspect-ratio:4/3;object-fit:contain;border-radius:4px;box-shadow:0 0 0 1px rgba(255,255,255,.35),0 6px 18px rgba(0,0,0,.35);background:transparent}
.mio-bild figcaption{font-size:11px;color:#aab4ef;text-align:center}
.mio-bild figcaption a{color:inherit}
.mio-antworten.einspaltig{grid-template-columns:1fr}
.mio-antw small{font-weight:400;opacity:.85}
.mio-land{position:relative}
.mio-eingabe{width:100%;box-sizing:border-box;font:inherit;font-size:18px;font-weight:700;padding:12px 16px;border-radius:999px;border:2px solid var(--mio-linie);background:#0a0f30;color:#fff;outline:none}
.mio-eingabe::placeholder{color:#8f9dff;font-weight:400}
.mio-eingabe:focus{border-color:var(--mio-orange)}
.mio-vorschlag{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}
.mio-vorschlag button{width:100%;text-align:left;font:inherit;font-weight:700;font-size:16px;padding:10px 16px;border-radius:12px;border:1px solid rgba(143,157,255,.45);background:var(--mio-feld2);color:#fff;cursor:pointer;touch-action:manipulation}
.mio-vorschlag li:first-child button{border-color:var(--mio-orange)}
.mio-vorschlag button:hover{background:#2c3ba6}
.mio-vorschlag .leer{color:#aab4ef;font-size:14px;padding:4px 16px}
.mio-tabelle td:nth-child(2){white-space:normal;overflow-wrap:anywhere}