/* ============================================================================
   JTSL Theme "Spielstein" — Auflage fuer die Quiz-Seite (quiz.php / quiz.html)
   Zieht die Spielansicht auf dieselbe Buehne wie die neue Startseite.
   Bewusst als Overlay: quiz.html traegt sein CSS an neun Stellen, teilweise
   per JS nachgeladen. Diese Datei kommt zuletzt und ueberschreibt gezielt.
   Rueckbau = die eine <link>-Zeile in quiz.php entfernen.
   ============================================================================ */

:root {
    --jt-stage:    #0a0e1c;
    --jt-stage-2:  #101733;
    --jt-panel:    #17203f;
    --jt-line:     rgba(255,255,255,.10);
    --jt-line-2:   rgba(255,255,255,.18);
    --jt-gold:     #f0b73f;
    --jt-ink:      #f4f7ff;
    --jt-ink-soft: rgba(244,247,255,.70);
    --jt-ink-mute: rgba(244,247,255,.55);
}

/* ---------- Buehne ----------
   html und body beide setzen: der body ist im Flex-Layout 0px hoch,
   die Flaeche kommt vom Wurzelelement. */
html, body, body.bg-gray-50 {
    background-color: var(--jt-stage) !important;
    color: var(--jt-ink);
}
html {
    background-image:
        radial-gradient(900px 520px at 50% 0%, rgba(240,183,63,.10), transparent 62%),
        radial-gradient(720px 460px at 10% 12%, rgba(59,130,214,.10), transparent 60%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
}
#quizView, #quizView.bg-gray-50,
main.pt-14, main { background-color: transparent !important; }

/* ---------- Kopfzeile ---------- */
.quiz-header {
    background: rgba(10,14,28,.86) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--jt-line) !important;
    box-shadow: none !important;
}
.quiz-header a,
.quiz-header button,
.quiz-header i,
.quiz-header span:not(.difficulty-badge) { color: var(--jt-ink-soft) !important; }
.quiz-header a:hover, .quiz-header button:hover { color: var(--jt-ink) !important; }


/* ---------- Fusszeile / Navigation ---------- */
#mainFooter {
    background: rgba(10,14,28,.94) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--jt-line) !important;
}
#mainFooter a, #mainFooter button { color: var(--jt-ink-mute) !important; }
#mainFooter a:hover, #mainFooter button:hover,
#mainFooter a:hover i, #mainFooter button:hover i,
#mainFooter a:hover span, #mainFooter button:hover span { color: var(--jt-gold) !important; }
#mainFooter i, #mainFooter span { color: inherit !important; }

/* ---------- Spielkarte: mehr Hoehe, mehr Praesenz ----------
   Vorher endete die Karte nach knapp der halben Bildschirmhoehe, darunter
   klaffte Leere. Statt sie zu zentrieren (rutscht beim Antworten) bekommt
   sie Hoehe: die Karte fuellt den Spielbereich, die Antworten stehen luftig. */
#quizContent, .quiz-container { max-width: 640px !important; }

.card-flip-container { flex: 1 1 auto !important; display: flex !important; }
.card-flip-inner { flex: 1 1 auto !important; }

.beta-card {
    border-radius: 22px !important;
    border: 1px solid var(--jt-line-2) !important;
    box-shadow: 0 22px 50px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.10) !important;
    min-height: min(66vh, 560px) !important;
}
/* Frage ins obere Drittel, Antworten wandern nach oben nach:
   klassische Quiz-Anordnung statt Text, der in der Mitte schwebt. */
.beta-card-question {
    flex: 0 0 auto !important;
    align-items: flex-start !important;
    padding-top: 1.6rem !important;
}
.beta-card-answers { margin-top: auto !important; padding-bottom: .4rem !important; }

/* Schwierigkeitsstufen: satter und klar unterscheidbar */
#questionCard.difficulty-easy {
    background: linear-gradient(155deg, #2f7d46 0%, #1f5b36 55%, #17402a 100%) !important;
}
#questionCard.difficulty-medium {
    background: linear-gradient(155deg, #2a6ba8 0%, #1e4e7d 55%, #16385a 100%) !important;
}
#questionCard.difficulty-hard {
    background: linear-gradient(155deg, #b8862a 0%, #8d651e 55%, #5f4415 100%) !important;
}
#questionCard.difficulty-expert {
    background: linear-gradient(155deg, #b04440 0%, #83302d 55%, #58211f 100%) !important;
}

.beta-card-header { border-bottom: 1px solid rgba(255,255,255,.12) !important; }
.beta-card-header,
.beta-card-header * { color: rgba(255,255,255,.86) !important; }

.beta-card-question {
    color: #fff !important;
    font-weight: 700 !important;
    letter-spacing: -.01em;
    text-shadow: 0 2px 12px rgba(0,0,0,.35);
    text-wrap: balance;
}

.beta-card-footer,
.beta-card-footer * { color: rgba(255,255,255,.62) !important; }

/* ---------- Antworten als Spielsteine ---------- */
.answer-button {
    background: rgba(255,255,255,.13) !important;
    border: 1px solid rgba(255,255,255,.26) !important;
    border-bottom: 3px solid rgba(0,0,0,.34) !important;
    border-radius: 14px !important;
    color: #fff !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 14px rgba(0,0,0,.22) !important;
    transition: transform .13s ease, background .18s ease, box-shadow .13s ease !important;
    -webkit-tap-highlight-color: transparent;
}
.answer-button:hover:not(:disabled) {
    background: rgba(255,255,255,.21) !important;
    transform: translateY(-2px);
    box-shadow: 0 9px 22px rgba(0,0,0,.32) !important;
}
.answer-button:active:not(:disabled) {
    transform: translateY(1px);
    border-bottom-width: 2px !important;
}

/* Richtig / falsch bleiben unmissverstaendlich */
.answer-button.correct,
.answer-button.is-correct {
    background: linear-gradient(180deg, #57c062 0%, #3d8f46 100%) !important;
    border-color: rgba(255,255,255,.42) !important;
    color: #fff !important;
}
.answer-button.wrong,
.answer-button.is-wrong,
.answer-button.incorrect {
    background: linear-gradient(180deg, #e2635e 0%, #ad403c 100%) !important;
    border-color: rgba(255,255,255,.38) !important;
    color: #fff !important;
}


/* Ausgeschiedene Antworten (Joker/Fehlversuch) standen auf 20% Weiss BEI
   zusaetzlich 40% Deckkraft - zusammen rund 8%, auf der farbigen Karte
   praktisch unsichtbar. Zurueckgenommen ja, unlesbar nein. */
.answer-button.eliminated,
.answer-button:disabled:not(.correct):not(.wrong):not(.is-correct):not(.is-wrong) {
    opacity: .85 !important;
    color: rgba(255,255,255,.62) !important;
    background: rgba(0,0,0,.22) !important;
    border-color: rgba(255,255,255,.16) !important;
    text-decoration: line-through;
    text-decoration-color: rgba(255,255,255,.35);
}

/* ---------- Rueckseite mit dem Fun-Fact ---------- */
.card-flip-back .beta-card {
    background: linear-gradient(160deg, var(--jt-panel) 0%, var(--jt-stage-2) 100%) !important;
    border: 1px solid var(--jt-line-2) !important;
}
.sidefact-back-content { color: var(--jt-ink-soft) !important; }
.sidefact-back-content b, .sidefact-back-content strong { color: var(--jt-gold) !important; }

/* ---------- Fortschritt sichtbar machen ---------- */
.beta-card-header .bg-white\/20,
.beta-card-header [class*="progress"] { background: rgba(0,0,0,.28) !important; }

/* ---------- Abzeichen ---------- */
.difficulty-badge {
    background: rgba(0,0,0,.30) !important;
    border: 1px solid rgba(255,255,255,.26) !important;
    color: #fff !important;
    font-weight: 700 !important;
}

/* ---------- Sonstige helle Flaechen einfangen ---------- */
.bg-white:not(.answer-button):not(#mainFooter):not(.quiz-header) {
    background: var(--jt-panel) !important;
    color: var(--jt-ink) !important;
}
.text-gray-900, .text-gray-800, .text-gray-700 { color: var(--jt-ink) !important; }
.text-gray-600, .text-gray-500 { color: var(--jt-ink-soft) !important; }
.text-gray-400, .text-gray-300 { color: var(--jt-ink-mute) !important; }
.border-t, .border-b, .border { border-color: var(--jt-line) !important; }

/* ---------- Desktop: kompakter statt gestreckt ----------
   Die Mindesthoehe ist fuer Handys gedacht, damit die Antworten am Daumen
   liegen. Am grossen Schirm wirkt dieselbe Karte sperrig und leer. */
@media (min-width: 768px) {
    .beta-card {
        min-height: 0 !important;
        border-radius: 26px !important;
    }
    .card-flip-container { flex: 0 0 auto !important; }
    #quizContent, .quiz-container {
        max-width: 720px !important;
        justify-content: center !important;
        padding-top: 0 !important;
    }
    .beta-card-question {
        padding-top: 2.2rem !important;
        padding-bottom: 2.2rem !important;
        font-size: 1.55rem !important;
    }
    .beta-card-answers { margin-top: 0 !important; }
    .answer-button { min-height: 62px !important; font-size: 1.05rem !important; }
}

/* ---------- Rueckkehr-Leiste zu stuffle.com ----------
   Kam im alten Indigo/Violett daher und schnitt quer durchs neue Bild.
   (Der Schreibfehler "Zurueck" steht hart in quiz.html und laesst sich
   nur dort beheben - siehe offene Punkte.) */
#stuffleReturnBanner {
    background: linear-gradient(90deg, rgba(23,32,63,.97) 0%, rgba(16,23,51,.97) 100%) !important;
    border-top: 1px solid var(--jt-line-2) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 -8px 24px rgba(0,0,0,.35) !important;
}
#stuffleReturnBanner button:not([onclick*="dismiss"]) {
    background: linear-gradient(180deg, var(--jt-gold) 0%, #c8912a 100%) !important;
    color: #1a1206 !important;
    border: 1px solid rgba(255,255,255,.24) !important;
    border-bottom: 3px solid rgba(0,0,0,.34) !important;
}
#stuffleReturnBanner button:not([onclick*="dismiss"]):hover {
    background: linear-gradient(180deg, #f5c65c 0%, #d29d24 100%) !important;
}

@media (prefers-reduced-motion: reduce) {
    .answer-button { transition: none !important; }
}