/* ============================================================================
   JTSL "Spielstein" — helle Fassung
   Wird zusaetzlich zum Basis-Theme geladen und dreht die Buehne ins Helle.
   Kein Zurueck zum alten Grau-Weiss: warmes Off-White statt kaltem #f9fafb,
   kraeftige Farben, dieselbe Spielstein-Haptik mit Kante und Tiefe.
   ============================================================================ */

:root {
    --stage:      #f5f2ec;   /* warmes Papier statt kaltes Grau */
    --stage-2:    #ffffff;
    --panel:      #ffffff;
    --panel-2:    #faf7f2;
    --line:       rgba(26,32,48,.10);
    --line-2:     rgba(26,32,48,.17);

    --gold:       #d99a1f;
    --gold-deep:  #b07d14;
    --blue:       #2f6fb5;
    --red:        #c94a45;
    --green:      #418a48;

    --ink:        #171c2b;
    --ink-soft:   rgba(23,28,43,.72);
    --ink-mute:   rgba(23,28,43,.65);   /* .50 ergab nur 3,2:1 Kontrast */

    --shadow-tile: 0 10px 30px rgba(26,32,48,.10);

    /* Quiz-Theme-Variablen */
    --jt-stage:    #f5f2ec;
    --jt-stage-2:  #ffffff;
    --jt-panel:    #ffffff;
    --jt-line:     rgba(26,32,48,.10);
    --jt-line-2:   rgba(26,32,48,.17);
    --jt-gold:     #d99a1f;
    --jt-ink:      #171c2b;
    --jt-ink-soft: rgba(23,28,43,.72);
    --jt-ink-mute: rgba(23,28,43,.65);
}

/* ---------- Lesbares Gold ----------
   Das helle Gold der dunklen Fassung kommt auf beigem Grund nur auf 2,2:1
   Kontrast. Fuer TEXT wird deshalb ein dunklerer Ton benutzt (5,1:1), fuer
   Flaechen und Rahmen bleibt das helle Gold. */
.jtsl-v2 .kicker-pill,
.jtsl-v2 .level-hint,
.jtsl-v2 .streak-chip,
.jtsl-v2 .board-cat i,
.jtsl-v2 .sidefact b,
.jtsl-v2 .seo-copy a,
.jtsl-v2 .seo-longtext summary::after { color: #8a5e0c !important; }
.jtsl-v2 .kicker-pill { border-color: rgba(138,94,12,.32) !important; background: rgba(217,154,31,.13) !important; }
.jtsl-v2 .streak-chip { border-color: rgba(138,94,12,.30) !important; background: rgba(217,154,31,.13) !important; }

/* ---------- Startseite ---------- */
body.jtsl-v2 { background: var(--stage) !important; color: var(--ink) !important; }
body.jtsl-v2::before {
    background:
        radial-gradient(900px 500px at 50% -10%, rgba(217,154,31,.16), transparent 62%),
        radial-gradient(700px 460px at 12% 8%,  rgba(47,111,181,.10), transparent 60%),
        radial-gradient(700px 460px at 88% 14%, rgba(201,74,69,.08),  transparent 60%) !important;
}
.jtsl-v2 .jtsl-header {
    background: rgba(255,255,255,.88) !important;
    border-bottom: 1px solid var(--line) !important;
}
.jtsl-v2 .quizboard {
    background: linear-gradient(168deg, #ffffff 0%, #fbf8f3 100%) !important;
    border: 1px solid var(--line-2) !important;
    box-shadow: 0 14px 40px rgba(26,32,48,.11), inset 0 1px 0 rgba(255,255,255,.9) !important;
}
.jtsl-v2 .board-top { background: rgba(26,32,48,.03) !important; }
.jtsl-v2 .tile {
    background: linear-gradient(180deg, #ffffff 0%, #f4f0e9 100%) !important;
    border: 1px solid var(--line-2) !important;
    border-bottom: 3px solid rgba(26,32,48,.20) !important;
    color: var(--ink) !important;
}
.jtsl-v2 .tile:hover:not(:disabled) {
    border-color: rgba(217,154,31,.65) !important;
    box-shadow: 0 8px 22px rgba(26,32,48,.14) !important;
}
.jtsl-v2 .tile-key { background: rgba(26,32,48,.06) !important; color: var(--ink-soft) !important; }
.jtsl-v2 .tile.is-right,
.jtsl-v2 .tile.is-wrong { color: #fff !important; }
.jtsl-v2 .tile.is-right .tile-key,
.jtsl-v2 .tile.is-wrong .tile-key { color: #fff !important; }
.jtsl-v2 .ticker { background: rgba(255,255,255,.75) !important; }
.jtsl-v2 .tab { background: rgba(255,255,255,.8) !important; }
.jtsl-v2 .tab.active { color: #2a1c02 !important; }
.jtsl-v2 .seo-block, .jtsl-v2 .seo-longtext, .jtsl-v2 .seo-tag { background: rgba(255,255,255,.8) !important; }
.jtsl-v2 .btn-ghost { background: rgba(26,32,48,.04) !important; }
.jtsl-v2 .sidefact { background: rgba(217,154,31,.07) !important; }

/* Kategoriekarten: helle Karte, Bild bleibt dunkel gerahmt damit die
   Strichzeichnungen Kontrast behalten */
.jtsl-v2 .category-card {
    background: #ffffff !important;
    border: 1px solid var(--line) !important;
    border-bottom: 3px solid rgba(26,32,48,.16) !important;
    box-shadow: 0 2px 10px rgba(26,32,48,.06) !important;
}
.jtsl-v2 .category-card:hover { box-shadow: 0 14px 30px rgba(26,32,48,.15) !important; }
.jtsl-v2 .cat-thumb::after {
    background: linear-gradient(to top, #ffffff 1%, rgba(255,255,255,.35) 26%, transparent 62%) !important;
}
.jtsl-v2 .category-image { filter: none !important; }
.jtsl-v2 .cat-thumb::before { opacity: .22 !important; }
.jtsl-v2 .cat-thumb { background: #ffffff !important; }
.jtsl-v2 .jtsl-footer { background: #171c2b !important; }
.jtsl-v2 .jtsl-footer h3, .jtsl-v2 .jtsl-footer h4 { color: #fff !important; }
.jtsl-v2 .jtsl-footer, .jtsl-v2 .jtsl-footer a { color: rgba(255,255,255,.6) !important; }
.jtsl-v2 .jtsl-footer a:hover { color: #f0b73f !important; }
.jtsl-v2 .icon-btn { background: rgba(26,32,48,.04) !important; }

/* ---------- Quiz-Seite ---------- */
html, body, body.bg-gray-50 { background-color: var(--jt-stage) !important; color: var(--jt-ink) !important; }
html {
    background-image:
        radial-gradient(900px 520px at 50% 0%, rgba(217,154,31,.15), transparent 62%),
        radial-gradient(720px 460px at 10% 12%, rgba(47,111,181,.09), transparent 60%) !important;
}
.quiz-header {
    background: rgba(255,255,255,.90) !important;
    border-bottom: 1px solid var(--jt-line) !important;
}
#mainFooter {
    background: rgba(255,255,255,.95) !important;
    border-top: 1px solid var(--jt-line) !important;
}
.beta-card {
    box-shadow: 0 18px 44px rgba(26,32,48,.16) !important;
    border: 1px solid rgba(26,32,48,.08) !important;
}
#stuffleReturnBanner {
    background: linear-gradient(90deg, #ffffff 0%, #faf7f2 100%) !important;
    border-top: 1px solid var(--jt-line-2) !important;
    box-shadow: 0 -8px 24px rgba(26,32,48,.12) !important;
}
#stuffleReturnBanner span, #stuffleReturnBanner i { color: var(--jt-ink) !important; }
.bg-white:not(.answer-button):not(#mainFooter):not(.quiz-header) {
    background: #ffffff !important; color: var(--jt-ink) !important;
}

/* ---------- Rueckseite der Spielkarte (Fun-Fact) ----------
   AKUT: quiz.html faerbt die Rueckseite fuer dunklen Grund - .sidefact-body
   steht auf rgba(255,255,255,.85), der Weiter-Knopf ebenfalls weiss auf
   rgba(255,255,255,.12). Auf der hellen Karte war damit der komplette
   Fun-Fact unsichtbar: weisse Schrift auf weissem Grund. */
.card-flip-back .beta-card {
    background: linear-gradient(160deg, #ffffff 0%, #faf7f2 100%) !important;
    border: 1px solid var(--jt-line-2) !important;
    box-shadow: 0 18px 44px rgba(26,32,48,.16) !important;
}
.sidefact-back-content,
.sidefact-back-content * { color: var(--jt-ink) !important; }

.sidefact-header {
    color: #8a5e0c !important;
    font-weight: 800 !important;
}
.sidefact-body {
    color: #171c2b !important;
    opacity: 1 !important;
}
.sidefact-action button,
.card-flip-back button {
    background: linear-gradient(180deg, #d99a1f 0%, #b07d14 100%) !important;
    color: #20180a !important;
    border: 1px solid rgba(255,255,255,.24) !important;
    border-bottom: 3px solid #8a5e0c !important;
    font-weight: 800 !important;
}
.sidefact-disable a,
.card-flip-back a { color: #6b7280 !important; text-decoration: underline; }
.card-flip-back input {
    background: #ffffff !important;
    color: #171c2b !important;
    border: 1px solid var(--jt-line-2) !important;
}
.card-flip-back input::placeholder { color: #9aa0ad !important; }