/* =====================================================================
   1. GRUNDLAGEN & TYPOGRAFIE (Dark Fantasy / Neon Theme)
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=MedievalSharp&family=Nunito:wght@400;700&display=swap');

body {
    background-color: #070b19; 
    color: #e0e0e0;
    font-family: 'Nunito', sans-serif;
    margin: 0;
    padding: 20px;
    text-align: center;
    background-image: url('Bilder/Hintergrund/hintergrund-leer.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    transition: background-image 0.8s ease-in-out; 
}

h1, h2, h3 {
    font-family: 'MedievalSharp', cursive;
    letter-spacing: 2px;
}

h1 {
    color: #ff5e00;
    font-size: 3rem;
    text-shadow: 0 0 10px rgba(255, 94, 0, 0.8), 2px 2px 4px black;
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    width: 100%;
    text-align: center;
    z-index: 1000;
}

/* =====================================================================
   2. GLOBALE LAYOUTS & SZENEN-MANAGEMENT
   ===================================================================== */
.szene { display: none; }
.szene.aktiv { display: block; animation: fadeIn 0.5s ease-in-out; }

.tab-inhalt { display: none; }
.tab-inhalt.aktiv { display: block; animation: fadeIn 0.3s; }

.flex-container {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
}

.setup-container {
    display: flex;
    justify-content: center;
    align-items: center; 
    min-height: 80vh;    
    gap: 30px;
    flex-wrap: wrap;
    width: 100%;
    max-width: 2500px;
    margin: 60px auto 0 auto; /* Puffer nach oben zur absoluten Hauptüberschrift */
}

/* =====================================================================
   3. KARTEN & GLASSMORPHISMUS
   ===================================================================== */
.karte {
    background-color: rgba(10, 12, 22, 0.93); 
    border: 1px solid #00ffff;
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.25);
    padding: 25px;
    margin: 20px auto;
    max-width: 800px;
    backdrop-filter: blur(8px);
}

.karte p { color: #b0c4de; }
.karte label { color: #00ffff; }

/* Die beiden Karten im Setup teilen sich den Platz */
.setup-container > .karte {
    flex: 1 1 600px; 
    max-width: 8500px;
    margin-top: 0 !important;
}

/* Schiebt die normalen Karten unter die absolute Überschrift */
#szene-titel .karte,
#szene-kategorien .karte {
    margin-top: 100px !important; 
}

/* =====================================================================
   4. EINGABEFELDER & DROPDOWNS
   ===================================================================== */
.dropdown, .punkte-input, .team-name-input, input[type="number"] {
    background-color: #1a2035;
    color: #00ffff;
    border: 1px solid #00ffff;
    border-radius: 5px;
    padding: 8px;
    font-family: 'Nunito', sans-serif;
    font-weight: bold;
}

.team-name-input, input[type="number"] {
    text-align: center;
}

.team-name-input::placeholder {
    color: #4facfe;
    opacity: 0.5;
}

/* =====================================================================
   5. BUTTONS (Standard, Schwebend & Menü)
   ===================================================================== */
button {
    font-family: 'Nunito', sans-serif;
    font-weight: bold;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 12px 25px;
    cursor: pointer;
    margin: 5px;
    transition: all 0.3s ease;
    text-shadow: 1px 1px 2px black;
    box-shadow: 0 4px 6px rgba(0,0,0,0.5);
}

button:disabled {
    opacity: 0.3 !important;
    filter: grayscale(100%);
    cursor: not-allowed;
    box-shadow: none !important;
}

.btn-plus {
    background: linear-gradient(135deg, #11998e, #38ef7d);
    border: 1px solid #38ef7d;
}
.btn-plus:hover { box-shadow: 0 0 15px #38ef7d; transform: scale(1.05); }

.rad-btn {
    background: linear-gradient(135deg, #1e3c72, #2a5298);
    border: 1px solid #4facfe;
}
.rad-btn:hover { box-shadow: 0 0 10px #4facfe; transform: scale(1.05); }

.btn-minus50 {
    background: linear-gradient(135deg, #d35400, #a04000);
    border: 1px solid #ff5e00;
}
.btn-minus50:hover { box-shadow: 0 0 10px #ff5e00; transform: scale(1.05); }
    
.btn-minus100 {
    background: linear-gradient(135deg, #c0392b, #8b0000);
    border: 1px solid #ff0000;
}
.btn-minus100:hover { box-shadow: 0 0 15px #ff0000; transform: scale(1.05); }

.tab-menue {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
    margin-top: 25px;
}

.tab-btn {
    background: linear-gradient(to bottom, #1e3c72, #2a5298);
    border: 1px solid #4facfe;
    font-size: 14px;
}
.tab-btn.aktiv {
    background: linear-gradient(135deg, #00b4db, #0083b0);
    box-shadow: 0 0 10px #00ffff;
}

/* =====================================================================
   6. SPIELBRETT & HITBOXEN
   ===================================================================== */
.brett-container {
    position: relative;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    box-shadow: 0 0 30px rgba(0, 195, 255, 0.4);
    border-radius: 10px;
}

.brett-container img {
    width: 100%;
    display: block;
    border-radius: 10px;
}

.hitbox {
    position: absolute;
    width: 100px;
    height: 60px;
    background-color: transparent !important; 
    border: none !important;
    box-shadow: none !important;
    cursor: pointer;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease-in-out;
    animation: schweben 3s ease-in-out infinite;
}

.hitbox span {
    color: #ffffff;
    font-family: 'Nunito', sans-serif;
    font-weight: bold;
    font-size: 13px;
    line-height: 1.1;
    text-shadow: 2px 2px 3px #000000, -2px -2px 3px #000000, 2px -2px 3px #000000, -2px 2px 3px #000000; 
    pointer-events: none;
    white-space: normal !important; 
    text-align: center;
}

.hitbox.gesperrt span {
    color: #555555;
    text-shadow: 1px 1px 1px #000000;
    text-decoration: line-through;
}

.hitbox:hover:not(.gesperrt) {
    transform: translate(-50%, -50%) scale(1.2);
    text-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff;
    background: radial-gradient(circle, rgba(0, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0) 70%) !important;
    border-radius: 50%;
}

/* =====================================================================
   7. MINIGAMES (TRIVIA, WALZE, REGELBUCH)
   ===================================================================== */
.mc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 20px;
}

.mc-option {
    background: linear-gradient(to bottom, #2980b9, #14446b);
    border: 1px solid #4facfe;
    color: white;
    padding: 15px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    font-size: 18px;
    transition: all 0.2s;
    box-shadow: 0 5px 15px rgba(0,0,0,0.6);
}

.mc-option:hover { background: linear-gradient(to bottom, #3498db, #1d6fa5); box-shadow: 0 0 15px #4facfe; }
.mc-option.correct { background: linear-gradient(to bottom, #28a745, #145523) !important; border-color: #28a745; box-shadow: 0 0 20px #28a745; }
.submit-btn, .mc-option.wrong { background: linear-gradient(to bottom, #dc3545, #7a1b24) !important; border-color: #dc3545; box-shadow: 0 0 20px #dc3545; }
.mc-option.disabled { pointer-events: none; opacity: 0.6; }

/* Slot Machine Walze */
.walzen-container {
    width: 250px;
    height: 60px;
    margin: 0 auto 20px auto;
    border: 2px solid #00ffff;
    border-radius: 5px;
    background: #070b19;
    overflow: hidden; 
    position: relative;
    box-shadow: inset 0 0 15px #000, 0 0 10px rgba(0, 255, 255, 0.3);
}

.walzen-band {
    display: flex;
    flex-direction: column;
    transition: transform 4s cubic-bezier(0.15, 0.85, 0.15, 1);
}

.walzen-item {
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-family: 'Nunito', sans-serif;
    font-weight: bold;
    font-size: 18px;
    color: #ffc107; 
    text-shadow: 2px 2px 4px black;
}

.walzen-schatten {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 70%, rgba(0,0,0,0.9) 100%);
    pointer-events: none; 
}

/* Regelbuch Setup */
.regelbuch-container {
    color: #b0c4de;
    line-height: 1.6;
    font-size: 20px;
}

.regel-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; 
    gap: 15px; 
    margin-top: 15px;
}

.regel-karte {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(0, 255, 255, 0.2);
    border-radius: 12px;
    padding: 20px;
    box-shadow: inset 0 0 15px rgba(0,0,0,0.8);
    transition: all 0.3s ease;
}

.regel-karte:hover {
    background: rgba(0, 0, 0, 0.6);
    border-color: rgba(0, 255, 255, 0.6);
    transform: translateY(-5px);
}

.regel-karte h3 {
    margin-top: 0;
    margin-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 10px;
    font-size: 24px;
}

/* Raster (2x3) für Wer bin ich Hinweise */
#werBinIchHinweise {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
#werBinIchHinweise > div { margin-bottom: 0 !important; }

/* =====================================================================
   8. SCHWEBENDE UI-ELEMENTE (Globale Buttons & Pop-ups)
   ===================================================================== */
#globalRegelBtn, #globalRestartBtn {
    position: fixed;
    bottom: 20px;
    z-index: 100000;
    background: rgba(10, 12, 22, 0.9);
    padding: 12px 20px;
    border-radius: 50px;
    cursor: pointer;
    font-weight: bold;
    font-size: 18px;
    transition: all 0.3s;
}

#globalRegelBtn {
    right: 20px;
    border: 2px solid #ffc107;
    color: #ffc107;
    box-shadow: 0 0 15px rgba(255, 193, 7, 0.4);
}
#globalRegelBtn:hover { background: rgba(255, 193, 7, 0.2); transform: scale(1.1); }

#globalRestartBtn {
    left: 20px;
    border: 2px solid #dc3545;
    color: #dc3545;
    box-shadow: 0 0 15px rgba(220, 53, 69, 0.4);
}
#globalRestartBtn:hover { background: rgba(220, 53, 69, 0.2); transform: scale(1.1); }

#globalRegelPopup {
    display: none; 
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 90vw; max-width: 1200px; height: 85vh;
    background: rgba(10, 12, 22, 0.95);
    border: 2px solid #00ffff;
    border-radius: 15px;
    z-index: 100001;
    overflow-y: auto;
    padding: 30px;
    box-shadow: 0 0 50px rgba(0,0,0,1), 0 0 30px rgba(0,255,255,0.4);
    backdrop-filter: blur(10px);
}
#globalRegelPopup .schliessen-btn {
    position: absolute; top: 15px; right: 15px;
    background: #dc3545; color: white; border: none;
    padding: 10px 15px; border-radius: 8px; cursor: pointer; font-weight: bold;
}

/* =====================================================================
   9. ANIMATIONEN & VISUELLES FEEDBACK
   ===================================================================== */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes schweben {
    0% { margin-top: 0px; }
    50% { margin-top: -6px; }
    100% { margin-top: 0px; }
}

@keyframes pulsieren {
    0% { box-shadow: 0 0 10px rgba(255, 193, 7, 0.5); border-color: #ffc107; transform: scale(1.02); }
    50% { box-shadow: 0 0 30px rgba(255, 193, 7, 1); border-color: #fff3cd; transform: scale(1.05); }
    100% { box-shadow: 0 0 10px rgba(255, 193, 7, 0.5); border-color: #ffc107; transform: scale(1.02); }
}

@keyframes wackeln {
    10%, 90% { transform: translate3d(-2px, 0, 0); }
    20%, 80% { transform: translate3d(4px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-6px, 0, 0); }
    40%, 60% { transform: translate3d(6px, 0, 0); }
}

@keyframes flash {
    0% { background-color: #ffffff; box-shadow: 0 0 50px #ffffff; transform: scale(1.05); }
    100% { background-color: #070b19; box-shadow: inset 0 0 15px #000, 0 0 10px rgba(0, 255, 255, 0.3); transform: scale(1); }
}

.shake { animation: wackeln 0.5s cubic-bezier(.36,.07,.19,.97) both; }
.flash-bang { animation: flash 0.5s ease-out; }

/* Teamanzeige Logik */
.team-karte.aktiv-zug { animation: pulsieren 2s infinite ease-in-out !important; }
#szene-lobby .team-karte button { display: none; }

/* Status-Farben */
body.boss-beschworen .karte { border-color: #ff0000; box-shadow: 0 0 20px rgba(255, 0, 0, 0.4); }
body.relikt-sichtbar .karte { border-color: #ffc107; box-shadow: 0 0 25px rgba(255, 193, 7, 0.5); }

/* =====================================================================
   10. KINO-MODUS (Vollbild für Brett & Karten)
   ===================================================================== */
body.kino-aktiv::before {
    content: ""; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(8px); z-index: 9998;
}

.brett-container.kino-modus, .kino-karte {
    position: fixed !important;
    top: 50% !important; left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 9999 !important;
    box-shadow: 0 0 50px rgba(0, 0, 0, 1), 0 0 30px rgba(0, 255, 255, 0.5) !important;
}

.brett-container.kino-modus {
    width: 95vw; max-width: 1800px;
    border: 2px solid #00ffff; border-radius: 15px;
}

.kino-karte {
    width: 95vw !important; max-width: 1600px !important; height: 90vh !important;
    overflow-y: auto !important; 
}

/* Anpassung der Hitboxen im Vollbild */
.brett-container.kino-modus .hitbox { width: 10vw; height: 6vw; }
.brett-container.kino-modus .hitbox span { font-size: 1.2vw; }

/* Kino-Modus Buttons */
#vollbildBtn:hover { background: rgba(0, 255, 255, 0.2) !important; transform: scale(1.1); }

.kino-btn-dynamic, .kino-btn-back {
    position: absolute; top: 15px; z-index: 10000;
    background: rgba(10, 12, 22, 0.9);
    padding: 10px 15px; border-radius: 8px; cursor: pointer;
    font-weight: bold; transition: all 0.3s; font-family: 'Nunito', sans-serif;
}

.kino-btn-dynamic { right: 15px; border: 2px solid #00ffff; color: #00ffff; box-shadow: 0 0 15px rgba(0,255,255,0.4); }
.kino-btn-dynamic:hover { background: rgba(0, 255, 255, 0.2); transform: scale(1.1); }

.kino-btn-back { right: 160px; border: 2px solid #ffc107; color: #ffc107; box-shadow: 0 0 15px rgba(255, 193, 7, 0.4); display: none; }
.kino-btn-back:hover { background: rgba(255, 193, 7, 0.2); transform: scale(1.1); }
.kino-karte .kino-btn-back { display: block; }

/* =====================================================================
   11. TV-OPTIMIERUNG & SONDERREGELN
   ===================================================================== */
.tab-inhalt .karte { max-width: 1000px; }
#frageText { font-size: 28px !important; line-height: 1.4; }
.mc-option { font-size: 22px !important; }
#hellblauText, #schaetzFrageText { font-size: 26px !important; line-height: 1.4; }
button[onclick="zieheHellblauFrage()"] { color: #ffffff !important; }

/* Cinematic Finale */
body.finale-modus .tab-menue,
body.finale-modus #spielbrettTeamsPlatzhalter,
body.finale-modus #tab-rot > .karte > h2,
body.finale-modus #tab-rot > .karte > p,
body.finale-modus #tab-rot > .karte > div:first-of-type,
body.finale-modus #boss-beschwoeren-container { 
    display: none !important;
}

body.finale-modus #tab-rot .karte {
    margin: 60vh auto 20px auto !important; 
    background: rgba(10, 12, 22, 0.85) !important;
    border: 1px solid #ffc107 !important;
    box-shadow: 0 0 30px rgba(255, 193, 7, 0.3) !important;
    transition: margin 1.5s ease-in-out, background 1s;
}

body.finale-modus.lese-modus #tab-rot .karte {
    margin: 15vh auto 20px auto !important;
}

/* Dynamische Dungeon-Hintergründe im Game */
body:has(#szene-spielbrett.aktiv) { background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('Bilder/Hintergrund/hintergrund-leer.jpg'); }
body.boss-animation:has(#tab-rot.aktiv) { background-image: url('Bilder/Hintergrund/boss-transition.gif') !important; }
body.boss-beschworen:has(#tab-rot.aktiv) { background-image: url('Bilder/Hintergrund/hintergrund-boss.jpg') !important; }
body.kristall-sichtbar:has(#tab-rot.aktiv) { background-image: url('Bilder/Hintergrund/hintergrund-kristall.jpg') !important; }
body.relikt-animation:has(#tab-rot.aktiv) { background-image: url('Bilder/Hintergrund/relikt-transition.gif') !important; }
body.relikt-sichtbar:has(#tab-rot.aktiv) { background-image: url('Bilder/Hintergrund/hintergrund-relikt.jpg') !important; }

/* Das Admin-Dashboard unter die große leuchtende Überschrift schieben */
#szene-admin .karte {
    margin-top: 100px !important;
}

/* --- ADMIN DASHBOARD --- */
/* Spezielle Styles für das neue 3-Spalten-Layout */
            .admin-spalten-container { display: flex; gap: 20px; max-width: 98vw; margin: 0 auto; height: calc(100vh - 80px); padding-bottom: 20px; box-sizing: border-box; align-items: stretch; }
            .admin-spalte { background: rgba(10, 12, 22, 0.85); border: 2px solid #0056b3; border-radius: 10px; padding: 20px; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; box-sizing: border-box; }
            .admin-input-feld { width: 100%; box-sizing: border-box; font-size: 16px; padding: 12px; background: #1a2035; color: #fff; border-radius: 5px; margin-bottom: 15px; font-family: 'Nunito', sans-serif; }
            .admin-label { font-size: 16px; font-weight: bold; margin-bottom: 5px; display: inline-block; }
            
            /* Eigene, schmale Scrollbalken für die Spalten */
            .admin-spalte::-webkit-scrollbar { width: 8px; }
            .admin-spalte::-webkit-scrollbar-track { background: #0a0c16; border-radius: 4px; }
            .admin-spalte::-webkit-scrollbar-thumb { background: #0056b3; border-radius: 4px; }
            .admin-spalte::-webkit-scrollbar-thumb:hover { background: #00ffff; }