/* =========================================================================
   SAPPARDY! - Retro-TV-Look für ein Jeopardy-artiges SAP-Quiz
   -------------------------------------------------------------------------
   Design-Variablen sind ganz oben zusammengefasst - so lassen sich
   Farben, Radien und Schatten mit einem Blick anpassen.
   ========================================================================= */

:root {
    /* Farbpalette - Retro-Jeopardy */
    --color-bg:            #05122e;
    --color-board-bg:      #0b1e5b;
    --color-tile-bg:       #1637a8;
    --color-tile-hover:    #264fd0;
    --color-tile-played:   #0a1533;
    --color-gold-1:        #f5c518;
    --color-gold-2:        #ffaa00;
    --color-gold-text:     #ffd76a;
    --color-white:         #ffffff;
    --color-text-muted:    #b7c4e6;
    --color-danger:        #d94848;
    --color-success:       #4bb56b;

    /* Typografie */
    --font-title:  "Anton", "Oswald", Impact, sans-serif;
    --font-value:  "Oswald", Impact, sans-serif;
    --font-body:   "Roboto Condensed", "Oswald", sans-serif;

    /* Sonstiges */
    --radius-tile:  10px;
    --radius-card:  14px;
    --glow-gold:    0 0 20px rgba(255,204,51,0.55), inset 0 0 15px rgba(255,170,0,0.35);
    --glow-strong:  0 0 40px rgba(255,204,51,0.75);
}

/* ---------- Reset & Basis ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    height: 100%;
    background: radial-gradient(ellipse at top, #0d1f57 0%, var(--color-bg) 70%);
    color: var(--color-white);
    font-family: var(--font-body);
    overflow-x: hidden;
}

button {
    font-family: var(--font-body);
    cursor: pointer;
    border: none;
    background: none;
    color: inherit;
}

button:disabled { cursor: not-allowed; opacity: 0.4; }

#app {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* =========================================================================
   Titel-Banner mit Lampen (auf jedem Screen wiederverwendet)
   ========================================================================= */
.banner {
    position: relative;
    text-align: center;
    padding: 28px 20px;
    margin: 20px;
    border-radius: 16px;
    background: linear-gradient(180deg, #0b1e5b 0%, #071642 100%);
    box-shadow: var(--glow-gold);
    border: 3px solid var(--color-gold-2);
}

.banner h1 {
    font-family: var(--font-title);
    font-size: clamp(2.2rem, 6vw, 4.5rem);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: linear-gradient(180deg, var(--color-gold-1) 0%, var(--color-gold-2) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

.banner .subtitle {
    color: var(--color-text-muted);
    font-size: 1rem;
    margin-top: 4px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

/* Reihe kleiner Glüh-Lampen oben und unten am Banner */
.banner::before,
.banner::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 10px;
    background-image: radial-gradient(circle, #ffdc73 0 4px, transparent 5px);
    background-repeat: repeat-x;
    background-size: 22px 10px;
    filter: drop-shadow(0 0 4px #ffb700);
    opacity: 0.9;
}
.banner::before { top: -6px; }
.banner::after  { bottom: -6px; }

/* =========================================================================
   Setup-Screen
   ========================================================================= */
.setup {
    max-width: 720px;
    margin: 0 auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.setup-card {
    background: rgba(11, 30, 91, 0.7);
    border: 2px solid var(--color-gold-2);
    border-radius: var(--radius-card);
    padding: 24px 28px;
    box-shadow: var(--glow-gold);
}

.setup-card h2 {
    font-family: var(--font-value);
    text-transform: uppercase;
    color: var(--color-gold-text);
    margin-bottom: 16px;
    letter-spacing: 0.05em;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
}

.team-count-buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.team-count-buttons button {
    flex: 1;
    min-width: 80px;
    min-height: 56px;
    font-family: var(--font-value);
    font-size: 1.4rem;
    background: var(--color-tile-bg);
    border: 2px solid transparent;
    border-radius: 8px;
    color: var(--color-white);
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}

.team-count-buttons button.active {
    border-color: var(--color-gold-1);
    box-shadow: 0 0 15px rgba(255,204,51,0.6);
    color: var(--color-gold-text);
}

.team-count-buttons button:hover:not(.active) {
    background: var(--color-tile-hover);
    transform: translateY(-2px);
}

.team-inputs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    margin-top: 8px;
}

.team-inputs label {
    display: flex;
    flex-direction: column;
    font-size: 0.85rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.team-inputs input[type="text"] {
    margin-top: 6px;
    padding: 12px 14px;
    font-size: 1.1rem;
    font-family: var(--font-body);
    background: #071642;
    border: 2px solid #2c4794;
    border-radius: 8px;
    color: var(--color-white);
    min-height: 48px;
}

.team-inputs input[type="text"]:focus {
    outline: none;
    border-color: var(--color-gold-1);
    box-shadow: 0 0 10px rgba(255,204,51,0.4);
}

.file-upload {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.file-upload input[type="file"] {
    color: var(--color-white);
    font-family: var(--font-body);
}

.file-status {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    margin-top: 8px;
    padding: 8px 12px;
    border-radius: 6px;
    background: rgba(255,255,255,0.04);
    border-left: 3px solid var(--color-text-muted);
    line-height: 1.4;
}

.file-status.error {
    color: #ffb1b1;
    background: rgba(217,72,72,0.12);
    border-left-color: var(--color-danger);
}
.file-status.ok {
    color: #b6f0c4;
    background: rgba(75,181,107,0.12);
    border-left-color: var(--color-success);
}
.file-status.info {
    color: var(--color-gold-text);
    background: rgba(255,204,51,0.12);
    border-left-color: var(--color-gold-2);
}

/* --- Kurzer Hinweistext unter einer Karten-Überschrift --- */
.section-hint {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    line-height: 1.5;
    margin-top: -6px;
}

.section-hint code {
    background: rgba(0,0,0,0.35);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.85rem;
    color: var(--color-gold-text);
    font-family: "SF Mono", Menlo, Consolas, monospace;
}

/* =========================================================================
   Fragenset-Toolbar (Karte 3)
   ========================================================================= */
.fileset-toolbar {
    display: flex;
    align-items: stretch;
    gap: 12px;
    flex-wrap: wrap;
}

.set-name-field {
    display: flex;
    align-items: center;
    background: #071642;
    border: 2px solid #2c4794;
    border-radius: 8px;
    padding: 0 12px 0 14px;
    min-height: 48px;
    flex: 1 1 260px;
    min-width: 220px;
    gap: 10px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.set-name-field:focus-within {
    border-color: var(--color-gold-1);
    box-shadow: 0 0 10px rgba(255,204,51,0.4);
}

.set-name-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.set-name-field input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--color-white);
    font-family: var(--font-value);
    font-size: 1.15rem;
    padding: 8px 0;
    min-width: 0;
    letter-spacing: 0.02em;
}

.set-name-field input:focus { outline: none; }

.set-name-suffix {
    color: var(--color-gold-text);
    font-family: var(--font-value);
    font-size: 1.05rem;
    opacity: 0.8;
    user-select: none;
}

.fileset-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.btn-toolbar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    min-height: 48px;
    font-family: var(--font-value);
    font-size: 0.95rem;
    letter-spacing: 0.03em;
    background: var(--color-tile-bg);
    color: var(--color-white);
    border: 2px solid #2c4794;
    border-radius: 8px;
    transition: transform 0.15s, background 0.15s, border-color 0.15s, box-shadow 0.15s;
    white-space: nowrap;
    cursor: pointer;
}

.btn-toolbar:hover {
    background: var(--color-tile-hover);
    border-color: var(--color-gold-2);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.35);
}

.btn-toolbar:active { transform: translateY(0); }

.btn-toolbar-primary {
    background: linear-gradient(180deg, var(--color-gold-1), var(--color-gold-2));
    color: #1a1a1a;
    border-color: transparent;
    font-weight: 700;
}

.btn-toolbar-primary:hover {
    background: linear-gradient(180deg, #ffd54a, #ffb833);
    border-color: transparent;
    box-shadow: 0 4px 15px rgba(255,204,51,0.5);
}

@media (max-width: 640px) {
    .fileset-toolbar { flex-direction: column; align-items: stretch; }
    .fileset-actions { justify-content: space-between; }
    .btn-toolbar { flex: 1 1 auto; padding: 10px 12px; font-size: 0.85rem; }
}

.btn-primary {
    display: inline-block;
    padding: 16px 28px;
    min-height: 56px;
    font-family: var(--font-value);
    font-size: 1.3rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    background: linear-gradient(180deg, var(--color-gold-1), var(--color-gold-2));
    color: #1a1a1a;
    border-radius: 10px;
    box-shadow: 0 4px 0 #a67a00, 0 0 20px rgba(255,204,51,0.35);
    transition: transform 0.15s, box-shadow 0.15s;
    font-weight: 700;
}

.btn-primary:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 0 #a67a00, 0 0 30px rgba(255,204,51,0.55);
}

.btn-primary:active:not(:disabled) {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #a67a00;
}

.btn-secondary {
    padding: 12px 18px;
    min-height: 48px;
    font-family: var(--font-value);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: transparent;
    color: var(--color-gold-text);
    border: 2px solid var(--color-gold-text);
    border-radius: 8px;
    transition: background 0.15s, color 0.15s;
}

.btn-secondary:hover {
    background: var(--color-gold-text);
    color: #071642;
}

.setup-actions {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

/* =========================================================================
   Board-Ansicht
   ========================================================================= */
.board-view {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(260px, 3fr);
    grid-template-rows: auto 1fr auto;
    gap: 20px;
    padding: 0 20px 20px;
    min-height: 100vh;
}

.board-view > .banner {
    grid-column: 1 / -1;
    margin: 20px 0 0;
}

.board {
    background: var(--color-board-bg);
    border-radius: var(--radius-card);
    padding: 14px;
    box-shadow: var(--glow-gold);
    border: 3px solid var(--color-gold-2);
    display: grid;
    gap: 10px;
    align-content: start;
    /* grid-template-columns wird per JS dynamisch gesetzt (Kategoriezahl) */
}

.board .category-header {
    background: linear-gradient(180deg, #142c7e 0%, #0b1e5b 100%);
    color: var(--color-white);
    font-family: var(--font-title);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: center;
    padding: 14px 8px;
    border-radius: 8px;
    font-size: clamp(0.9rem, 1.6vw, 1.4rem);
    border: 2px solid #2c4794;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.board .tile {
    background: var(--color-tile-bg);
    border-radius: var(--radius-tile);
    min-height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-value);
    font-size: clamp(1.4rem, 2.5vw, 2.4rem);
    font-weight: 700;
    color: var(--color-gold-text);
    text-shadow: 0 2px 4px rgba(0,0,0,0.6);
    letter-spacing: 0.05em;
    border: 2px solid #2c4794;
    transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
    cursor: pointer;
    user-select: none;
}

.board .tile:hover {
    background: var(--color-tile-hover);
    box-shadow: 0 0 20px rgba(255,204,51,0.4);
    transform: translateY(-3px) scale(1.02);
}

.board .tile.played {
    background: var(--color-tile-played);
    color: transparent;
    pointer-events: none;
    border-color: #1a2650;
    box-shadow: none;
    transform: none;
}

.board .tile.placeholder {
    background: transparent;
    border: 2px dashed rgba(255,255,255,0.08);
    pointer-events: none;
    color: transparent;
    box-shadow: none;
}

/* Score-Panel */
.score-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-content: start;
}

.score-panel h3 {
    font-family: var(--font-value);
    text-transform: uppercase;
    color: var(--color-gold-text);
    letter-spacing: 0.1em;
    font-size: 1rem;
    padding-bottom: 4px;
    border-bottom: 2px solid var(--color-gold-2);
}

.team-card {
    background: rgba(11, 30, 91, 0.7);
    border: 2px solid var(--color-gold-2);
    border-radius: var(--radius-card);
    padding: 16px 20px;
    box-shadow: var(--glow-gold);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.team-card .team-name {
    font-family: var(--font-value);
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-gold-text);
    word-wrap: break-word;
}

.team-card .team-score {
    font-family: var(--font-title);
    font-size: clamp(2rem, 4vw, 3.5rem);
    color: var(--color-white);
    text-shadow: 0 3px 6px rgba(0,0,0,0.4);
    line-height: 1;
}

.team-card .team-score.negative { color: var(--color-danger); }

/* Bedienleiste unten */
.board-controls {
    grid-column: 1 / -1;
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.1);
}

/* =========================================================================
   Frage-Overlay
   ========================================================================= */
.overlay {
    position: fixed;
    inset: 0;
    background: rgba(3, 8, 25, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 1000;
    animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes popIn {
    from { transform: scale(0.85); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}

.question-modal {
    background: linear-gradient(180deg, #0b1e5b 0%, #071642 100%);
    border: 3px solid var(--color-gold-2);
    border-radius: 16px;
    box-shadow: var(--glow-strong);
    padding: 40px;
    max-width: 1000px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    text-align: center;
    animation: popIn 0.3s ease-out;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.question-modal .value-badge {
    font-family: var(--font-title);
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    background: linear-gradient(180deg, var(--color-gold-1), var(--color-gold-2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    letter-spacing: 0.05em;
}

.question-modal .prompt-label {
    font-family: var(--font-value);
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-gold-text);
    opacity: 0.85;
    margin-top: -12px;
}

.question-modal .prompt-hint {
    font-family: var(--font-body);
    font-style: italic;
    color: var(--color-text-muted);
    font-size: 1rem;
    margin-top: -8px;
}

.question-modal .question-text {
    font-family: var(--font-value);
    font-size: clamp(1.6rem, 3.2vw, 2.8rem);
    line-height: 1.3;
    color: var(--color-white);
    text-shadow: 0 2px 6px rgba(0,0,0,0.5);
}

.question-modal .answer-text {
    font-family: var(--font-body);
    font-size: clamp(1.2rem, 2.4vw, 1.8rem);
    color: var(--color-gold-text);
    padding: 20px;
    background: rgba(0,0,0,0.35);
    border: 2px dashed var(--color-gold-2);
    border-radius: 12px;
    animation: fadeIn 0.2s ease-out;
}

.question-modal .answer-text .solution-label {
    display: block;
    font-family: var(--font-value);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-text-muted);
    margin-bottom: 8px;
}

.team-picker {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

.team-picker button {
    padding: 12px 20px;
    min-height: 48px;
    font-family: var(--font-value);
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--color-tile-bg);
    color: var(--color-white);
    border: 3px solid transparent;
    border-radius: 10px;
    transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.team-picker button:hover {
    background: var(--color-tile-hover);
    transform: translateY(-2px);
}

.team-picker button.selected {
    border-color: var(--color-gold-1);
    box-shadow: 0 0 20px rgba(255,204,51,0.6);
    color: var(--color-gold-text);
}

.judge-controls {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.btn-correct, .btn-wrong {
    padding: 16px 30px;
    min-height: 56px;
    font-family: var(--font-value);
    font-size: 1.3rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-radius: 10px;
    color: var(--color-white);
    font-weight: 700;
    transition: transform 0.15s, box-shadow 0.15s;
}

.btn-correct {
    background: linear-gradient(180deg, #4bb56b, #2f8a4c);
    box-shadow: 0 4px 0 #1e6234;
}
.btn-correct:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 0 #1e6234, 0 0 20px rgba(75,181,107,0.5);
}

.btn-wrong {
    background: linear-gradient(180deg, #d94848, #9e2f2f);
    box-shadow: 0 4px 0 #6c1d1d;
}
.btn-wrong:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 0 #6c1d1d, 0 0 20px rgba(217,72,72,0.5);
}

.hint {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    font-style: italic;
}

.modal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.1);
}

/* =========================================================================
   Game-Over-Screen
   ========================================================================= */
.gameover {
    max-width: 720px;
    margin: 0 auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    text-align: center;
}

.gameover .trophy {
    font-size: clamp(3rem, 8vw, 5rem);
}

.gameover .winner-title {
    font-family: var(--font-title);
    font-size: clamp(2rem, 5vw, 3.5rem);
    background: linear-gradient(180deg, var(--color-gold-1), var(--color-gold-2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-transform: uppercase;
}

.ranking {
    background: rgba(11, 30, 91, 0.7);
    border: 2px solid var(--color-gold-2);
    border-radius: var(--radius-card);
    padding: 24px;
    box-shadow: var(--glow-gold);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ranking .rank-row {
    display: grid;
    grid-template-columns: 60px 1fr auto;
    align-items: center;
    padding: 12px 16px;
    background: rgba(0,0,0,0.25);
    border-radius: 8px;
    font-family: var(--font-value);
    font-size: 1.3rem;
}

.ranking .rank-row.winner {
    border: 2px solid var(--color-gold-1);
    box-shadow: 0 0 15px rgba(255,204,51,0.5);
}

.ranking .rank-pos  { color: var(--color-gold-text); font-weight: 700; }
.ranking .rank-name { text-align: left; padding-left: 12px; }
.ranking .rank-score { color: var(--color-white); font-family: var(--font-title); font-size: 1.6rem; }

/* =========================================================================
   Fehlermeldungen
   ========================================================================= */
.error-box {
    padding: 12px 16px;
    border-radius: 8px;
    background: rgba(217, 72, 72, 0.15);
    border: 2px solid var(--color-danger);
    color: #ffb1b1;
    font-family: var(--font-body);
    font-size: 0.95rem;
}

/* =========================================================================
   Responsiveness
   ========================================================================= */
@media (max-width: 900px) {
    .board-view {
        grid-template-columns: 1fr;
    }
    .score-panel {
        flex-direction: row;
        overflow-x: auto;
        gap: 10px;
    }
    .score-panel h3 { display: none; }
    .team-card {
        min-width: 160px;
        flex-shrink: 0;
    }
    .question-modal { padding: 24px; }
}

@media (max-width: 520px) {
    .banner { margin: 10px; padding: 20px 12px; }
    .setup, .board-view, .gameover { padding: 12px; }
}

/* =========================================================================
   Fragen-Editor (inline im aufgeklappten Fragenset-Bereich)
   ========================================================================= */
.editor-card,
.editor-inline {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.editor-inline {
    margin-top: 8px;
    padding-top: 20px;
    border-top: 2px dashed rgba(255,204,51,0.25);
}

.editor-subheading {
    font-family: var(--font-value);
    text-transform: uppercase;
    color: var(--color-gold-text);
    letter-spacing: 0.05em;
    font-size: 1.05rem;
    margin: 0;
}

.editor-intro {
    color: var(--color-text-muted);
    font-size: 0.95rem;
    line-height: 1.5;
    padding: 10px 14px;
    background: rgba(255,204,51,0.08);
    border-left: 3px solid var(--color-gold-2);
    border-radius: 4px;
    margin-top: -6px;
}

.editor-intro strong {
    color: var(--color-gold-text);
    font-weight: 700;
}

.editor-meta {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 12px;
    align-items: end;
}

.editor-meta label {
    display: flex;
    flex-direction: column;
    font-size: 0.85rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.editor-meta input[type="text"] {
    margin-top: 6px;
    padding: 10px 12px;
    font-size: 1rem;
    font-family: var(--font-body);
    background: #071642;
    border: 2px solid #2c4794;
    border-radius: 6px;
    color: var(--color-white);
    min-height: 44px;
}

.editor-meta input[type="text"]:focus {
    outline: none;
    border-color: var(--color-gold-1);
    box-shadow: 0 0 8px rgba(255,204,51,0.35);
}

.editor-meta .checkbox-label {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.95rem;
    color: var(--color-white);
    cursor: pointer;
}

.editor-meta .checkbox-label input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--color-gold-1);
    cursor: pointer;
}

/* --- Kategorien-Liste --- */
.editor-categories {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.editor-category {
    background: rgba(7, 22, 66, 0.6);
    border: 2px solid #2c4794;
    border-radius: 10px;
    overflow: hidden;
    transition: border-color 0.15s;
}

.editor-category.open {
    border-color: var(--color-gold-2);
    box-shadow: 0 0 10px rgba(255,204,51,0.25);
}

.editor-category-header {
    display: flex;
    align-items: stretch;
    gap: 6px;
    padding: 6px;
}

.cat-toggle {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    background: transparent;
    color: var(--color-white);
    text-align: left;
    border-radius: 6px;
    min-height: 44px;
}

.cat-toggle:hover { background: rgba(255,255,255,0.05); }

.cat-arrow {
    color: var(--color-gold-text);
    font-size: 0.9rem;
    width: 14px;
    flex-shrink: 0;
}

.cat-title-input {
    flex: 1;
    background: #071642;
    border: 2px solid transparent;
    color: var(--color-white);
    font-family: var(--font-value);
    font-size: 1.05rem;
    padding: 8px 10px;
    border-radius: 6px;
    min-height: 40px;
    letter-spacing: 0.03em;
}

.cat-title-input:focus {
    outline: none;
    border-color: var(--color-gold-1);
    background: #0b1e5b;
}

.cat-count {
    color: var(--color-text-muted);
    font-size: 0.85rem;
    flex-shrink: 0;
    padding-right: 6px;
}

.cat-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.btn-icon, .btn-icon-danger {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: rgba(255,255,255,0.05);
    color: var(--color-white);
    font-size: 1rem;
    transition: background 0.15s, color 0.15s;
    border: none;
    padding: 0;
}

.btn-icon:hover:not(:disabled) {
    background: rgba(255,204,51,0.2);
    color: var(--color-gold-text);
}

.btn-icon-danger {
    color: #ffb1b1;
}

.btn-icon-danger:hover:not(:disabled) {
    background: rgba(217,72,72,0.3);
    color: var(--color-white);
}

/* --- Kategorie-Body: Fragen-Tabelle --- */
.editor-category-body {
    padding: 10px 14px 14px;
    border-top: 1px solid rgba(255,255,255,0.08);
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: rgba(0,0,0,0.15);
}

.q-row {
    display: grid;
    grid-template-columns: 90px 1fr 1.5fr 40px;
    gap: 8px;
    align-items: center;
}

.q-row.q-header {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-muted);
    padding: 0 4px;
}

.q-row input {
    padding: 8px 10px;
    background: #071642;
    border: 2px solid #2c4794;
    border-radius: 6px;
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: 0.95rem;
    min-height: 40px;
    width: 100%;
    min-width: 0;
}

.q-row input:focus {
    outline: none;
    border-color: var(--color-gold-1);
    box-shadow: 0 0 6px rgba(255,204,51,0.35);
}

.q-row .q-value {
    text-align: right;
    color: var(--color-gold-text);
    font-family: var(--font-value);
    font-weight: 700;
}

.btn-add-q {
    align-self: flex-start;
    margin-top: 6px;
    padding: 8px 14px;
    min-height: 40px;
    font-size: 0.9rem;
}

.btn-add-cat {
    align-self: flex-start;
    padding: 10px 16px;
    min-height: 44px;
}

/* Kompaktere Darstellung auf schmalen Screens */
@media (max-width: 720px) {
    .editor-meta { grid-template-columns: 1fr; }

    .q-row {
        grid-template-columns: 80px 1fr 40px;
        grid-template-areas:
            "val question del"
            "val answer   del";
        row-gap: 6px;
    }
    .q-row .q-value    { grid-area: val; height: 100%; }
    .q-row .q-question { grid-area: question; }
    .q-row .q-answer   { grid-area: answer; }
    .q-row [data-action="delete-q"] { grid-area: del; }
    .q-row.q-header { display: none; }

    .cat-count { display: none; }
}


/* =========================================================================
   Fragenset-Karte (einklappbar): Header zeigt Set-Name + Titel;
   Body enthält Toolbar + Editor.
   ========================================================================= */
.fragenset-card {
    padding: 0;
    overflow: hidden;
    transition: box-shadow 0.2s, border-color 0.2s;
}

.fragenset-card.collapsed:hover {
    box-shadow: var(--glow-gold), 0 0 25px rgba(255,204,51,0.4);
}

.fragenset-summary {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 24px;
    background: transparent;
    color: var(--color-white);
    border: none;
    border-radius: var(--radius-card);
    cursor: pointer;
    text-align: left;
    /* Buttons haben eine Browser-Default-Font-Größe (~13px). Wir setzen
       explizit die Body-Größe, damit alle Kinder-em-Werte konsistent
       zu den anderen Setup-Karten stimmen. */
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.2;
    transition: background 0.15s;
}

.fragenset-summary:hover {
    background: rgba(255,204,51,0.06);
}

.fragenset-summary-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fragenset-summary-label {
    font-family: var(--font-value);
    text-transform: uppercase;
    color: var(--color-gold-text);
    letter-spacing: 0.05em;
    font-size: 1.5rem;      /* == h2-Standard, gleich zu "2. Teamnamen" */
    font-weight: 700;
    line-height: 1.2;
}

.fragenset-summary-values {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.fs-value-item {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
}

.fs-value-key {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.fs-value-val {
    font-family: var(--font-value);
    font-size: 1.15rem;
    color: var(--color-white);
    letter-spacing: 0.02em;
    max-width: 340px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fs-value-count {
    color: var(--color-text-muted);
    font-size: 0.85rem;
    font-family: var(--font-body);
    padding-left: 4px;
    border-left: 1px solid rgba(255,255,255,0.15);
    padding-left: 20px;
    margin-left: 4px;
}

.fragenset-summary-hint {
    font-family: var(--font-value);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-gold-text);
    padding: 8px 14px;
    border: 2px solid var(--color-gold-2);
    border-radius: 6px;
    background: rgba(255,204,51,0.08);
    white-space: nowrap;
    transition: background 0.15s;
}

.fragenset-summary:hover .fragenset-summary-hint {
    background: rgba(255,204,51,0.2);
}

.fragenset-chevron {
    font-size: 1rem;
    color: var(--color-gold-text);
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

.fragenset-body {
    padding: 4px 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    border-top: 1px solid rgba(255,204,51,0.2);
    animation: fadeIn 0.2s ease-out;
}

@media (max-width: 720px) {
    .fragenset-summary {
        flex-wrap: wrap;
        padding: 14px 16px;
        gap: 10px;
    }
    .fragenset-summary-values { gap: 12px; }
    .fs-value-val { max-width: 200px; }
    .fs-value-count {
        border-left: none;
        padding-left: 0;
        margin-left: 0;
    }
    .fragenset-summary-hint { flex: 1; text-align: center; }
    .fragenset-body { padding: 4px 14px 20px; }
}

/* =========================================================================
   Studio-Ansicht (Board-Screen)
   -------------------------------------------------------------------------
   Das Bild studio-bg.png zeigt ein TV-Studio mit einer Leinwand. Wir bauen
   eine Bühne mit exakt derselben Aspect-Ratio (16:9), legen das Bild als
   Hintergrund darauf und positionieren Board + Overlays prozentual.

   Monitor-Grenzen wurden per Pixel-Analyse ermittelt und leicht in den
   Rahmen erweitert, damit die Kacheln bündig auf der Leinwand sitzen. Die
   endgültigen Werte stehen unten als CSS-Custom-Properties und können zum
   Feintunen direkt geändert werden.
   ========================================================================= */

/* Body wird schwarz, kein Scrollen, damit die Bühne komplett den Screen
   ausfüllt und schwarze Ränder ("Letterbox") entstehen dürfen. */
body:has(.studio-stage) {
    background: #000;
    overflow: hidden;
}

/* Wenn die Studio-Ansicht aktiv ist, zentrieren wir die Bühne im
   viewport-großen #app-Container mit Flexbox. */
#app:has(.studio-stage) {
    background: #000;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    min-height: 100vh;
}

/* Die Bühne selbst hat FIX die Aspect-Ratio des Hintergrundbildes.
   So passen die %-Positionen der Kinder immer präzise zum Monitor.
   width/height sind so gewählt, dass sie maximal sind, ohne die
   Bild-AR zu verletzen. */
.studio-stage {
    position: relative;
    aspect-ratio: 1376 / 768;
    width: 100vw;
    height: auto;
    max-height: 100vh;
    max-width: calc(100vh * 1376 / 768);

    /* Feintunbare Monitor-Grenzen (per Pixel-Analyse ermittelt).
       Horizontal: exakte Leinwand-Innenkante (nicht der Goldrahmen).
       Vertikal:   leicht über die Leinwand hinaus in den Rahmen erweitert,
                   damit die Kacheln nicht wie eingeschrumpft wirken. */
    /* Feintunbare Monitor-Grenzen. Basierend auf der Leinwand-Innenkante
       (32.6% / 67.7% / 34.9% / 72.9%), plus 1% Nudge pro Seite nach außen,
       damit die Kacheln bündig bis in den Rahmen laufen. */
    --mon-left:   31.9%;
    --mon-right:  68.4%;
    --mon-top:    33.9%;
    --mon-bottom: 73.9%;
}

/* Hintergrundbild - da die Bühne die passende Aspect-Ratio hat,
   füllt es sie exakt zu 100% ohne Verzerrung. */
.studio-bg {
    position: absolute;
    inset: 0;
    background-image: url("studio-bg.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
    pointer-events: none;
    z-index: 1;
}

/* --- Board: passgenau in den Monitor projiziert --- */
.studio-board {
    position: absolute;
    left:   var(--mon-left);
    top:    var(--mon-top);
    right:  calc(100% - var(--mon-right));
    bottom: calc(100% - var(--mon-bottom));
    display: grid;
    grid-auto-rows: 1fr;
    gap: 0.5%;
    padding: 0.6%;
    box-sizing: border-box;
    z-index: 2;
    /* Container-Queries: Kategorie-Header und Kacheln skalieren mit der
       tatsächlichen Board-Größe (nicht nur mit dem Viewport). Bei vielen
       Kategorien werden die Zellen schmaler und cqw wird kleiner - so
       bleibt die Schrift automatisch passend. */
    container-type: inline-size;
    container-name: studio-board;
}

.studio-board .category-header {
    background: linear-gradient(180deg, #142c7e 0%, #0b1e5b 100%);
    color: var(--color-white);
    font-family: var(--font-title);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-align: center;
    padding: 4% 2%;
    border-radius: 4px;
    /* Jede Header-Kachel ist selbst ein Container. cqw = 1% der Kachel-Breite.
       Bei 4 Kategorien sind Kacheln breit -> Schrift groß. Bei vielen
       Kategorien werden Kacheln schmal -> Schrift automatisch kleiner.
       Zusätzlich wird --cat-scale (Default 1) von fitCategoryHeaders() auf
       einen kleineren Wert gesetzt, wenn ein Header vertikal nicht in seine
       Kachel passt - dann werden ALLE Header gemeinsam verkleinert. */
    container-type: inline-size;
    font-size: calc(clamp(0.6rem, 14cqw, 1.8rem) * var(--cat-scale, 1));
    line-height: 1.05;
    border: 1px solid #2c4794;
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    overflow: hidden;
    word-break: break-word;
    hyphens: auto;
}

/* Fallback für Browser ohne Container-Query-Support:
   viewport-basierte Skalierung greift, wenn cqw nicht verstanden wird. */
@supports not (container-type: inline-size) {
    .studio-board .category-header {
        font-size: calc(clamp(0.6rem, 1.2vw, 1.4rem) * var(--cat-scale, 1));
    }
}

.studio-board .tile {
    background: var(--color-tile-bg);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-value);
    font-size: clamp(0.9rem, 2vw, 2.2rem);
    font-weight: 700;
    color: var(--color-gold-text);
    text-shadow: 0 2px 4px rgba(0,0,0,0.7);
    letter-spacing: 0.03em;
    border: 1px solid #2c4794;
    transition: transform 0.18s, box-shadow 0.18s, background 0.18s;
    cursor: pointer;
    user-select: none;
    min-height: 0;
    min-width: 0;
}

.studio-board .tile:hover {
    background: var(--color-tile-hover);
    box-shadow: 0 0 18px rgba(255,204,51,0.7);
    transform: scale(1.05);
    z-index: 3;
}

.studio-board .tile.played {
    background: rgba(10, 21, 51, 0.9);
    color: transparent;
    pointer-events: none;
    border-color: rgba(44, 71, 148, 0.5);
    box-shadow: none;
    transform: none;
}

.studio-board .tile.placeholder {
    background: transparent;
    border: 1px dashed rgba(255,255,255,0.15);
    pointer-events: none;
    color: transparent;
    box-shadow: none;
}

/* --- Score-Panel: rechts als Overlay, außerhalb des Monitors --- */
.studio-scores {
    position: absolute;
    /* Startet knapp rechts vom Monitor (72.5%) mit etwas Abstand */
    left: 75%;
    right: 2%;
    top: 15%;
    bottom: 22%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: flex-start;
    z-index: 4;
    pointer-events: none;
}

.studio-scores h3 {
    font-family: var(--font-value);
    text-transform: uppercase;
    color: var(--color-gold-text);
    letter-spacing: 0.15em;
    font-size: clamp(0.65rem, 0.85vw, 0.9rem);
    padding-bottom: 4px;
    border-bottom: 2px solid var(--color-gold-2);
    text-shadow: 0 2px 6px rgba(0,0,0,0.9);
}

.studio-scores .team-card {
    background: rgba(7, 22, 66, 0.88);
    border: 2px solid var(--color-gold-2);
    border-radius: 8px;
    padding: clamp(6px, 0.8vw, 12px) clamp(8px, 1vw, 14px);
    box-shadow:
        0 4px 20px rgba(0,0,0,0.7),
        0 0 14px rgba(255,204,51,0.3);
    backdrop-filter: blur(3px);
    display: flex;
    flex-direction: column;
    gap: 3px;
    pointer-events: auto;
    min-height: 0;
}

.studio-scores .team-name {
    font-family: var(--font-value);
    font-size: clamp(0.7rem, 0.95vw, 1rem);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--color-gold-text);
    word-wrap: break-word;
}

.studio-scores .team-score {
    font-family: var(--font-title);
    font-size: clamp(1.3rem, 2.4vw, 2.4rem);
    color: var(--color-white);
    text-shadow: 0 2px 6px rgba(0,0,0,0.85);
    line-height: 1;
}

.studio-scores .team-score.negative { color: var(--color-danger); }

/* --- Steuerungsleiste: unten überlagert den Bühnenboden --- */
.studio-controls {
    position: absolute;
    left: 50%;
    bottom: 2.5%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 4;
    padding: 6px 10px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 204, 51, 0.4);
    border-radius: 10px;
    backdrop-filter: blur(6px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.7);
    flex-wrap: wrap;
    justify-content: center;
    max-width: 90%;
}

.studio-controls .btn-secondary {
    padding: 6px 12px;
    min-height: 36px;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    background: rgba(11, 30, 91, 0.7);
}

.studio-controls .btn-secondary:hover {
    background: var(--color-gold-text);
    color: #071642;
}

/* --- Small viewports: Scores rutschen unter den Monitor --- */
@media (max-aspect-ratio: 1.2/1) {
    .studio-scores {
        left: 3%;
        right: 3%;
        top: 74%;
        bottom: 12%;
        flex-direction: row;
        overflow-x: auto;
        gap: 6px;
        background: rgba(0,0,0,0.5);
        border-radius: 8px;
        padding: 6px;
    }
    .studio-scores h3 { display: none; }
    .studio-scores .team-card { min-width: 120px; flex-shrink: 0; }
    .studio-controls { bottom: 1%; }
}

/* =========================================================================
   In-Page-Bestätigungsdialog (showConfirm)
   -------------------------------------------------------------------------
   Ersetzt window.confirm(), damit der Vollbildmodus erhalten bleibt und
   die Optik zum Retro-Studio-Design passt. Wird über document.body
   angehängt und liegt über allen anderen Ebenen (auch dem Frage-Overlay).
   ========================================================================= */
.app-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(3, 8, 25, 0.82);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 3000; /* über dem Frage-Overlay (1000) */
    animation: fadeIn 0.15s ease-out;
    backdrop-filter: blur(4px);
}

.app-modal {
    background: linear-gradient(180deg, #0b1e5b 0%, #071642 100%);
    border: 3px solid var(--color-gold-2);
    border-radius: 14px;
    box-shadow:
        0 0 40px rgba(255,204,51,0.55),
        0 20px 60px rgba(0,0,0,0.7);
    padding: 26px 30px;
    max-width: 480px;
    width: 100%;
    text-align: left;
    animation: popIn 0.2s ease-out;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.app-modal-title {
    font-family: var(--font-value);
    font-size: 1.35rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-gold-text);
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    margin: 0;
}

.app-modal-message {
    color: var(--color-white);
    font-size: 1rem;
    line-height: 1.5;
    font-family: var(--font-body);
    white-space: normal;
}

.app-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.app-modal-actions .btn-toolbar {
    min-width: 120px;
    justify-content: center;
}

/* Danger-Variante des Bestätigen-Buttons (Löschen/Verwerfen etc.) */
.btn-toolbar-danger {
    background: linear-gradient(180deg, #d94848, #9e2f2f);
    color: var(--color-white);
    border-color: transparent;
    font-weight: 700;
}
.btn-toolbar-danger:hover {
    background: linear-gradient(180deg, #e55c5c, #b23838);
    border-color: transparent;
    box-shadow: 0 4px 15px rgba(217,72,72,0.5);
}

/* Fokus-Ring (wichtig, damit man mit Tastatur sieht, wo man ist) */
.app-modal-actions .btn-toolbar:focus-visible {
    outline: 3px solid var(--color-gold-1);
    outline-offset: 2px;
}

@media (max-width: 520px) {
    .app-modal { padding: 20px; }
    .app-modal-actions .btn-toolbar { flex: 1; min-width: 0; }
}

/* =========================================================================
   Fragen-Karte: Header-Zeile mit Toggle-Summary + Sprachumschalter
   ========================================================================= */
/* Sprachumschalter: segmentierter DE|EN-Button im Body der Fragen-Karte
   (nur sichtbar, wenn die Einstellungen ausgeklappt sind). */
.lang-switch {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 204, 51, 0.3);
    border-radius: 8px;
    align-self: flex-start;
    flex-shrink: 0;
}

.lang-switch-label {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.lang-btn {
    padding: 6px 14px;
    min-height: 36px;
    min-width: 46px;
    font-family: var(--font-value);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    background: transparent;
    border: 2px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.lang-btn:hover:not(.active) {
    color: var(--color-gold-text);
    background: rgba(255, 204, 51, 0.08);
}

.lang-btn.active {
    color: var(--color-gold-text);
    border-color: var(--color-gold-2);
    background: rgba(255, 204, 51, 0.15);
    box-shadow: 0 0 8px rgba(255, 204, 51, 0.4);
}

@media (max-width: 520px) {
    .lang-switch {
        align-self: stretch;
        justify-content: center;
    }
}

/* =========================================================================
   Setup-Banner: Schild-Bild statt Text-Banner
   Die Breite folgt dem umschließenden .setup-Container (max 720px).
   ========================================================================= */
.setup-banner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.setup-banner-img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    filter: drop-shadow(0 6px 20px rgba(0,0,0,0.6));
    user-select: none;
    -webkit-user-drag: none;
}

.setup-banner-subtitle {
    color: var(--color-text-muted);
    font-family: var(--font-value);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: 0.9rem;
    text-align: center;
    margin-top: -4px;
}

/* =========================================================================
   Studio-Frage-Ansicht: Der Monitor zeigt Antwort + Frage direkt an,
   statt das Kachel-Grid. Die Judge-Bar sitzt zwischen Monitor und
   Bühnenboden. Kein Fullscreen-Overlay mehr.
   ========================================================================= */
.studio-board.studio-question-view {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5%;
    padding: 1% 1.5%;      /* schmaler als vorher (war 3% 4%) - der dunkle
                              Rahmen wandert auf das Kind .studio-question */
    text-align: center;
    /* kein background hier - siehe .studio-question */

    /* Auto-Fit: --q-scale wird von JS zwischen 0.35 und 1.0 gesetzt.
       --q-base ist die "Wunsch-Basisgröße" für die Antwort - alle anderen
       Elemente skalieren proportional dazu (em). Bei kurzem Text greift 1.0,
       bei sehr langem Text senkt fitStudioQuestion() den Scale bis alles passt. */
    --q-scale: 1;
    --q-base: clamp(1.4rem, 3.4vw, 3rem);
    font-size: calc(var(--q-base) * var(--q-scale));
    line-height: 1.25;
}

.studio-question {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    padding: 1.2em 1.4em;
    max-width: 100%;
    /* KEIN max-height + overflow:hidden hier - das Board-Element (Elternteil)
       hat feste Höhe und wir messen ScrollHeight des Inhalts, um den Fit
       auszurechnen. Overflow visible lassen, damit die Messung stimmt. */
}

.q-value-badge {
    font-family: var(--font-title);
    font-size: 0.85em;   /* relativ zur Antwort */
    background: linear-gradient(180deg, var(--color-gold-1), var(--color-gold-2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    letter-spacing: 0.05em;
    line-height: 1;
    text-shadow: 0 2px 6px rgba(0,0,0,0.6);
}

.q-answer-label {
    font-family: var(--font-value);
    font-size: 0.42em;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-gold-text);
    opacity: 0.85;
    line-height: 1;
}

.q-answer-text {
    font-family: var(--font-value);
    font-size: 1em;       /* == --q-base * --q-scale, ist die Referenzgröße */
    line-height: 1.25;
    color: var(--color-white);
    text-shadow: 0 2px 8px rgba(0,0,0,0.7);
    padding: 0 2%;
    max-width: 100%;
    word-break: break-word;
}

.q-prompt-hint {
    font-family: var(--font-body);
    font-style: italic;
    font-size: 0.42em;
    color: var(--color-text-muted);
    line-height: 1.2;
}

.q-solution {
    margin-top: 0.3em;
    padding: 0.6em 0.9em;
    background: rgba(0,0,0,0.4);
    border: 2px dashed var(--color-gold-2);
    border-radius: 8px;
    animation: fadeIn 0.25s ease-out;
    max-width: 95%;
}

.q-solution-label {
    font-family: var(--font-value);
    font-size: 0.38em;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-text-muted);
    margin-bottom: 0.3em;
}

.q-solution-text {
    font-family: var(--font-body);
    font-size: 0.68em;
    color: var(--color-gold-text);
    line-height: 1.25;
    word-break: break-word;
}

/* --- Judge-Bar: unter dem Monitor, über dem Bühnenboden --- */
.studio-judge-bar {
    position: absolute;
    /* Nur so breit wie nötig: horizontal per left/transform zentriert, statt
       fix mit left/right. Tiefer platziert (näher am Bühnenboden). */
    left: 50%;
    transform: translateX(-50%);
    bottom: 1.5%;                        /* tiefer als vorher (war 3%) */
    max-width: 92%;                      /* Sicherheitsnetz auf schmalen Screens */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;                            /* kompakter (war clamp 6..12px) */
    padding: 6px 10px;                   /* schmaler (war 10px 14px) */
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(255, 204, 51, 0.35);
    border-radius: 10px;
    backdrop-filter: blur(6px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.7);
    z-index: 5;
}

.judge-teams {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.team-pick-btn {
    padding: 8px 16px;
    min-height: 40px;
    font-family: var(--font-value);
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--color-tile-bg);
    color: var(--color-white);
    border: 2px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.team-pick-btn:hover {
    background: var(--color-tile-hover);
    transform: translateY(-1px);
}

.team-pick-btn.selected {
    border-color: var(--color-gold-1);
    box-shadow: 0 0 15px rgba(255,204,51,0.6);
    color: var(--color-gold-text);
}

.judge-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.judge-actions .btn-correct,
.judge-actions .btn-wrong {
    padding: 10px 22px;
    min-height: 44px;
    font-size: 1rem;
    border-radius: 8px;
    letter-spacing: 0.05em;
}

.judge-hint {
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--color-text-muted);
    font-style: italic;
    text-align: center;
}

/* Im Frage-Modus wird die Score-Panel-Position gleich - keine Änderung nötig */

/* Fallback bei sehr wenig Höhe: judge-bar wird schmaler */
@media (max-height: 600px) {
    .studio-judge-bar {
        padding: 6px 10px;
        gap: 4px;
    }
    .team-pick-btn, .judge-actions .btn-correct, .judge-actions .btn-wrong {
        padding: 6px 12px;
        min-height: 34px;
        font-size: 0.85rem;
    }
    .judge-hint { display: none; }
}