/* ================================================= */
/* === BOARD.CSS — qwizzle           === */
/* === Aufgeräumt & kommentiert                   === */
/* ================================================= */


/* ================================================= */
/* === 1. FONTS                                   === */
/* ================================================= */

@font-face {
    font-family: 'Lobster';
    src: url('../fonts/Lobster%201.4.otf') format('truetype');
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Sunflower';
    src: url('../fonts/MADE-Sunflower.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}


/* ================================================= */
/* === 2. KEYFRAME ANIMATIONEN                    === */
/* ================================================= */

@keyframes waveFlyIn {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.8);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes catDropIn {
    0% {
        transform: translateY(-50px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes simpleZoomIn {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes slideDownFade {
    0% {
        transform: translateY(-30px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes moveAura {
    0% {
        transform: translate(0, 0) scale(1);
    }

    33% {
        transform: translate(150px, 80px) scale(1.2);
    }

    66% {
        transform: translate(-80px, 150px) scale(0.9);
    }

    100% {
        transform: translate(0, 0) scale(1);
    }
}

@keyframes floatTitle {

    0%,
    100% {
        transform: translateY(0) rotate(-3deg);
    }

    50% {
        transform: translateY(-15px) rotate(-3deg);
    }
}

@keyframes floatCrown {

    0%,
    100% {
        transform: translateY(0) rotate(-10deg);
    }

    50% {
        transform: translateY(-10px) rotate(10deg);
    }
}

@keyframes cardPulse {
    0% {
        opacity: 0.6;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0.6;
    }
}

@keyframes smoothPulse {
    from {
        opacity: 0.4;
    }

    to {
        opacity: 1.0;
    }
}

@keyframes fadeInOverlay {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes popInBox {
    0% {
        transform: scale(0.8) translateY(20px);
        opacity: 0;
    }

    100% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

@keyframes popIn {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    80% {
        transform: scale(1.1);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes pulse {
    from {
        transform: scale(1);
        box-shadow: 0 0 30px #d400ff;
    }

    to {
        transform: scale(1.2);
        box-shadow: 0 0 80px #d400ff;
    }
}

@keyframes pulseRed {
    0% {
        box-shadow: 0 0 0 0 rgba(214, 48, 49, 0.7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(214, 48, 49, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(214, 48, 49, 0);
    }
}

@keyframes pulseReady {
    0% {
        box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.15);
    }

    50% {
        box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.4), 0 0 20px rgba(108, 92, 231, 0.7);
    }

    100% {
        box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.15);
    }
}

@keyframes solutionFadeIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideUpWinner {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes spotlightSweep {
    0% {
        left: -150%;
    }

    100% {
        left: 150%;
    }
}

@keyframes winnerPopIn {
    0% {
        opacity: 0;
        transform: scale(0.7) translateY(100px);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes slideInLeft {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes fadeInOnly {
    0% {
        opacity: 0;
        transform: scale(0.9) rotate(-3deg);
    }

    100% {
        opacity: 1;
        transform: scale(1) rotate(-3deg);
    }
}

@keyframes geoMarkerDrop {
    0% {
        transform: translate(-50%, -200%) scale(0.5);
        opacity: 0;
    }

    60% {
        transform: translate(-50%, -90%) scale(1.1);
        opacity: 1;
    }

    80% {
        transform: translate(-50%, -105%);
    }

    100% {
        transform: translate(-50%, -100%) scale(1);
        opacity: 1;
    }
}


/* ================================================= */
/* === 3. DISCORD COMPATIBILITY & POINTER-EVENTS === */
/* ================================================= */

/* Hintergrund-Elemente dürfen keine Klicks blocken */
.bg-animations,
.bg-animations *,
#particles-canvas {
    pointer-events: none !important;
    z-index: -1 !important;
}

/* Alle interaktiven Elemente sichern */
.container,
.container *,
button,
input,
select,
a,
.card,
.team-card,
.ctrl-btn,
.action-btn,
.modal-box,
.modal-box *,
.close-x,
.team-edit-btn,
.btn-add-team,
.empty-slot,
.top-controls,
.top-controls * {
    pointer-events: auto !important;
    position: relative;
}

/* Container, Sidebar, Game-Area explizit klickbar */
.top-controls,
.container,
.sidebar,
.game-area {
    pointer-events: auto !important;
}

/* Icons in Buttons fangen keine Klicks */
button svg,
button path,
.ctrl-btn svg,
.ctrl-btn path,
.action-btn svg,
.action-btn path,
.team-edit-btn svg,
.team-edit-btn path,
.btn-control svg,
.btn-control path {
    pointer-events: none !important;
}

/* Ausnahme: Mute-SVG ist direkt klickbar */
.volume-top-bar svg {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Buttons immer klickbar */
button,
.btn-control,
.action-btn,
.ctrl-btn {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Close-Buttons immer ganz oben */
.close-x {
    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: 99999 !important;
}


/* ================================================= */
/* === 4. Z-INDEX HIERARCHIE                      === */
/* ================================================= */

/* Spielfeld-Ebenen */
.sidebar,
.game-area,
.grid {
    z-index: 10;
}

.card {
    z-index: 25;
}

/* Top-Controls (immer über dem Spielfeld) */
.top-controls {
    z-index: 3000 !important;
}

/* Room Code (unter top-controls) */
.room-code-display {
    z-index: 500;
}

/* Modals Ebene 1 (Frage, Team-Edit, QR, Reset, Winner) */
#modal,
#modal-reset,
#modal-team-edit,
#modal-player-qr,
#winner-overlay {
    z-index: 2000 !important;
}

/* Modal Ebene 2: Timeout (über Frage) */
#timeout-popup {
    z-index: 3000 !important;
}

/* Modal Ebene 3: Delete-Bestätigung (über Team-Edit) */
#modal-delete-team {
    z-index: 4000 !important;
}

/* Immer ganz oben */
.close-x {
    z-index: 99999 !important;
}


/* ================================================= */
/* === 5. BASIS LAYOUT (BODY & CONTAINER)         === */
/* ================================================= */

body {
    background: #0b0014;
    color: white;
    font-family: 'Roboto', sans-serif;
    margin: 0;
    height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
    position: relative;
    transition: background 0.8s ease, color 0.8s ease;
}

/* Keine Animationen wenn Layout-Wechsel läuft */
body.no-anim,
body.no-anim * {
    transition: none !important;
    animation: none !important;
}

/* Reduzierte Bewegung (Accessibility) */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .bg-animations,
    .aura {
        display: none;
    }
}

.container {
    display: flex;
    width: 100%;
    height: 100%;
    padding: clamp(10px, 2vw, 30px);
    box-sizing: border-box;
    gap: clamp(15px, 3vw, 40px);
    position: relative;
    z-index: 1;
    transition: opacity 0.4s ease, padding 0.4s ease, gap 0.4s ease;
    opacity: 1;
}


/* ================================================= */
/* === 6. HINTERGRUND & EFFEKTE                   === */
/* ================================================= */

.bg-animations {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: linear-gradient(-45deg, #0b0014, #240036, #1e0b2e, #0b0014);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
    overflow: hidden;
    transition: opacity 0.5s ease;
}

.aura {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.15;
    animation: moveAura 25s linear infinite;
    will-change: transform;
    contain: strict;
}

.aura-1 {
    width: 500px;
    height: 500px;
    background: #6c5ce7;
    top: -10%;
    left: -5%;
}

.aura-2 {
    width: 600px;
    height: 600px;
    background: #d400ff;
    bottom: -15%;
    right: -5%;
    animation-duration: 35s;
    animation-direction: reverse;
}

#particles-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity 1.2s ease;
    opacity: 1;
    image-rendering: optimizeSpeed;
}


/* ================================================= */
/* === 7. TOP CONTROLS (OBEN RECHTS)              === */
/* ================================================= */

.top-controls {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    gap: 10px;
    z-index: 3000;
    pointer-events: auto !important;
}

.ctrl-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.3s;
    backdrop-filter: blur(5px);
    color: white;
}

.ctrl-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.4);
}

.ctrl-btn svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
}

/* Admin-Button nur für Host */
body:not(.host-mode) .btn-admin {
    display: none !important;
}


/* ================================================= */
/* === 8. SIDEBAR (LINKS: HOST & TEAMS)           === */
/* ================================================= */

.sidebar {
    width: clamp(240px, 25vw, 450px);
    min-width: 240px;
    display: flex;
    flex-direction: column;
    gap: clamp(8px, 1vw, 15px);
    justify-content: center;
    padding-right: clamp(10px, 1.5vw, 20px);
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    transition: width 0.5s ease, gap 0.5s ease, padding 0.5s ease,
    border-color 0.5s ease, background 0.5s ease;
    opacity: 0;
    animation-fill-mode: forwards;
}

.sidebar-title {
    font-family: 'Lobster', cursive;
    font-size: clamp(1.8em, 2.5vw, 3em);
    text-align: center;
    text-shadow: 0 0 15px #6c5ce7;
    color: #e0d4ff;
    margin-bottom: clamp(5px, 0.8vw, 10px);
    transform: rotate(-2deg);
    transition: color 0.5s ease, text-shadow 0.5s ease;
}

.team-scroll {
    overflow-y: auto;
    overflow-x: visible;
    padding: 25px !important;
    margin: -25px;
    max-height: 75vh;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.team-scroll::-webkit-scrollbar {
    width: 0;
}

#teams-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
}

/* --- HOST DISPLAY --- */

.host-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #1e0a32;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: clamp(10px, 1.5vw, 20px);
    margin-bottom: clamp(10px, 1.5vw, 20px);
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    transition: background 0.5s ease, border-color 0.5s ease,
    box-shadow 0.5s ease, padding 0.5s ease;
}

.host-avatar-container {
    position: relative;
}

.host-crown {
    position: absolute;
    top: -15px;
    font-size: 2em;
    filter: drop-shadow(0 0 10px gold);
    z-index: 10;
    animation: floatCrown 3s ease-in-out infinite;
}

#host-avatar {
    width: clamp(60px, 7vw, 100px);
    height: clamp(60px, 7vw, 100px);
    border-radius: 50%;
    border: 3px solid #d400ff;
    object-fit: cover;
    box-shadow: 0 0 20px rgba(212, 0, 255, 0.4);
    margin-bottom: 10px;
    transition: border-color 0.5s ease, box-shadow 0.5s ease;
}

.host-label {
    font-size: 0.7em;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #d400ff;
    font-weight: bold;
    margin-bottom: 5px;
}

.host-name {
    font-family: 'Lobster', cursive;
    font-size: clamp(1.2em, 1.5vw, 1.8em);
    color: white;
    text-shadow: 0 0 10px rgba(212, 0, 255, 0.5);
    line-height: 1;
    transition: color 0.5s ease, text-shadow 0.5s ease;
}

/* --- TEAM KARTEN --- */

.team-card {
    background: #1e0a32;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: clamp(8px, 1vw, 15px);
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    min-height: clamp(60px, 7vh, 100px);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    border-color 0.4s ease, box-shadow 0.4s ease, background 0.5s ease;
}

.team-card:hover {
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-5px);
}

.players-row {
    display: flex;
    align-items: center;
    padding-left: 5px;
    flex-shrink: 0;
}

.avatar {
    width: clamp(40px, 5vw, 70px);
    height: clamp(40px, 5vw, 70px);
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
    border-radius: 50%;
    border: 3px solid #fff;
    object-fit: cover;
    background: #ddd;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    margin-right: -25px;
    position: relative;
    z-index: 1;
    transition: 0.3s;
}

.avatar:nth-child(2) {
    z-index: 2;
}

.team-info {
    flex: 1;
    text-align: right;
    z-index: 5;
    padding-left: 30px;
    padding-right: 25px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.team-name {
    font-family: 'Lobster', cursive;
    font-size: clamp(1em, 1.2vw, 1.5em);
    color: #e0d4ff;
    line-height: 1.1;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.5s ease;
}

.score {
    font-size: clamp(1.5em, 2vw, 2.5em);
    font-weight: 900;
    line-height: 1;
    background: linear-gradient(90deg, #6c5ce7, #a29bfe);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: color 0.5s ease, text-shadow 0.5s ease, letter-spacing 0.5s ease;
}

/* --- TEAM EDIT & ADD BUTTONS --- */

.team-edit-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    background: rgba(0, 0, 0, 0.3);
    color: #aaa;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
    opacity: 0;
    transition: 0.2s;
    z-index: 10;
}

.team-card:hover .team-edit-btn {
    opacity: 1;
}

.team-edit-btn:hover {
    background: #6c5ce7;
    color: white;
}

.btn-add-team {
    width: 100%;
    background: rgba(255, 255, 255, 0.1);
    border: 2px dashed rgba(255, 255, 255, 0.3);
    border-radius: 20px;
    padding: 15px;
    text-align: center;
    cursor: pointer;
    font-size: 2em;
    color: rgba(255, 255, 255, 0.5);
    transition: 0.2s;
    margin-top: 10px;
    box-sizing: border-box;
}

.btn-add-team:hover {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border-color: white;
}

/* Versteckt für Spieler */
body:not(.host-mode) .team-edit-btn {
    display: none !important;
}

body:not(.host-mode) .btn-add-team {
    display: none !important;
}

body:not(.host-mode) .team-card {
    pointer-events: none;
}

/* --- AKTIVES TEAM HIGHLIGHT --- */

.team-card.active-turn {
    position: relative !important;
    z-index: 100 !important;
    transform: scale(1.0);
    border: 2px solid #ff00de;
    background: linear-gradient(90deg, rgba(255, 0, 222, 0.15), rgba(108, 92, 231, 0.15)), rgba(0, 0, 0, 0.6);
    box-shadow: 0 0 15px rgba(255, 0, 222, 0.4),
    inset 0 0 15px rgba(255, 0, 222, 0.1);
}

/* Pulsierender Glow auf eigener Layer */
.team-card.active-turn::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    z-index: -1;
    box-shadow: 0 0 20px rgba(255, 0, 222, 0.8),
    0 0 50px rgba(108, 92, 231, 0.6);
    animation: smoothPulse 1.5s ease-in-out infinite alternate;
    will-change: opacity;
}

/* --- HOST INTERACTIVE TEAMS --- */

.team-card.host-interactive {
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.team-card.host-interactive:hover {
    transform: scale(1.03);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.9);
    z-index: 10;
}

.team-card.host-interactive:active {
    transform: scale(0.98);
}

/* --- STREAMER MODE CARDS --- */
.streamer-card {
    position: relative;
    overflow: hidden;
    height: clamp(150px, 21vh, 230px);
    padding: 0 !important;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    border: 3px solid transparent;
    border-radius: 15px;
    background: #2d3436;
    margin-bottom: 5px;
}

.streamer-card .streamer-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    border-radius: 12px;
}

.streamer-card .streamer-overlay {
    position: relative;
    z-index: 1;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);
    width: 100%;
    height: 80px;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    padding: 15px;
    box-sizing: border-box;
}

.streamer-card .team-name {
    font-size: 1.1em;
    font-weight: bold;
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 1);
    /* Make sure name flexes */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 65%;
}

.streamer-card .score {
    font-size: 1.5em;
    font-weight: 900;
    color: #00b894;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 1);
    background: none;
    -webkit-text-fill-color: initial;
}

.streamer-card.active-turn {
    border: 3px solid #ff00de !important;
}

/* --- SPLITSCREEN MODE (2 Spieler) --- */

.streamer-card.splitscreen {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: stretch;
    padding: 0 !important;
    position: relative;
    overflow: hidden;
}

.streamer-card.splitscreen .streamer-video {
    width: 50%;
    height: 100%;
    object-fit: cover;
    position: relative;
    top: auto;
    left: auto;
    z-index: 0;
    border-radius: 0;
}

/* Abgerundete Ecken nur an den Außenkanten */
.streamer-card.splitscreen .streamer-video:first-of-type {
    border-radius: 12px 0 0 12px;
}

.streamer-card.splitscreen .streamer-video:nth-of-type(2) {
    border-radius: 0 12px 12px 0;
}

/* Vertikale Trennlinie */
.streamer-card.splitscreen .streamer-video:first-of-type {
    border-right: 2px solid rgba(0, 0, 0, 0.85);
}

/* Overlay bleibt über beiden Hälften */
.streamer-card.splitscreen .streamer-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 2;
}

/* --- HOST DISPLAY: VOLLBILD-CAM IM STREAMER MODE --- */
body.is-streamer-mode .host-display {
    position: relative;
    overflow: hidden;
    height: clamp(200px, 24vh, 240px);
    min-height: 80px;
    margin-bottom: -10px;

    /* NEU: Flexbox anpassen für Text unten links */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* Schiebt alles nach unten */
    align-items: flex-start;
    /* Schiebt alles nach links */
    padding: 12px !important;
    /* Überschreibt das zentrierte Standard-Padding */
    box-sizing: border-box;
}

/* NEU: Spezifische Anpassung für Bottom-Layout (Cam-Höhe & Breite) */
body.layout-bottom.is-streamer-mode .host-display {
    height: clamp(120px, 16vh, 165px);
    /* Selbe Höhe wie Team-Karten */
    width: clamp(160px, 40vw, 190px);
    /* Schmaler als Team-Karten (ca. halbe Breite) */
    min-width: 140px;
    margin-bottom: 0;
    margin-right: 15px;
    /* Abstand zu den Teams */
}

/* Elemente im Streamer-Mode richtig anordnen (Krone, Label, Name) */
body.is-streamer-mode .host-display .host-crown {
    position: relative;
    top: 0;
    left: 0;
    font-size: 1.2em;
    margin-bottom: 2px;
}

body.is-streamer-mode .host-display .host-label {
    font-size: 0.65em;
    margin-bottom: 2px;
    text-align: left;
    color: rgba(255, 255, 255, 0.85);
    position: relative;
    z-index: 2;
}

body.is-streamer-mode .host-display .host-name {
    font-size: 1.1em;
    text-align: left;
    margin: 0;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: white;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9);
    position: relative;
    z-index: 2;
}

/* Video: ebenfalls als Vollbild-Hintergrund */
body.is-streamer-mode .host-display #host-stream-video {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    border-radius: inherit;
    border: none !important;
    box-shadow: none !important;
    margin: 0;
    z-index: 0;
}

/* Gradient-Overlay damit Text lesbar bleibt */
body.is-streamer-mode .host-display::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
    rgba(0, 0, 0, 0.9) 0%,
    rgba(0, 0, 0, 0.2) 60%,
    rgba(0, 0, 0, 0) 100%);
    z-index: 1;
    pointer-events: none;
    border-radius: inherit;
}


.empty-slot {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 2px dashed rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 1.5em;
    cursor: pointer;
    transition: 0.3s;
    margin-right: -20px;
    position: relative;
    z-index: 1;
    background: rgba(0, 0, 0, 0.3);
}

.empty-slot:hover {
    border-color: #00b894;
    color: #00b894;
    background: rgba(0, 184, 148, 0.1);
    transform: scale(1.1);
}

body:not(.host-mode) .empty-slot {
    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: 10;
}

body:not(.host-mode) .empty-slot:hover {
    background: rgba(0, 184, 148, 0.2);
    border-color: #00b894;
    color: #00b894;
    transform: scale(1.1);
}

/* QR Modal für Spieler schließbar machen */
body:not(.host-mode) #modal-player-qr,
body:not(.host-mode) #modal-player-qr * {
    pointer-events: auto !important;
}

body:not(.host-mode) #modal-player-qr .close-x {
    display: block !important;
    cursor: pointer !important;
    z-index: 1000;
}


/* ================================================= */
/* === 9. GAME AREA (RECHTS: TITEL + SPIELFELD)  === */
/* ================================================= */

.game-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    position: relative;
    transition: background 0.5s ease, border-color 0.5s ease,
    box-shadow 0.5s ease, padding 0.5s ease;
}

/* --- TITEL (qwizzle) --- */

/* Wrapper: nur Einblend-Animation + statische Rotation.
   Das Floating übernimmt .main-title selbst, damit .animate-drop-in
   (wird per JS gesetzt) keinen Konflikt verursacht. */
.header-wrapper {
    display: inline-block;
    position: relative;
    text-align: center;
    margin-bottom: 30px;
    margin-top: 10px;
    transform: rotate(-3deg);
    opacity: 0;
    animation-fill-mode: forwards;
}

/* Sobald JS .animate-drop-in entfernt hat (nach dem Einblenden),
   muss der Wrapper sichtbar bleiben — daher statisch opacity: 1. */
.header-wrapper.visible {
    opacity: 1;
}

.main-title {
    font-family: 'Lobster', cursive;
    font-size: clamp(2.5em, 4.5vw, 5.5em);
    color: #ffffff;
    margin: 0;
    margin-bottom: -5px;
    line-height: 1.1;
    text-shadow: 1px 1px 0px #dff9fb, 2px 2px 0px #a29bfe, 3px 3px 0px #6c5ce7,
    4px 4px 0px #6c5ce7, 5px 5px 0px #4834d4, 6px 6px 0px #301b81,
    0 0 20px rgba(212, 0, 255, 1), 0 0 50px rgba(108, 92, 231, 0.8),
    0 0 100px rgba(108, 92, 231, 0.5);
    transition: color 0.5s ease, text-shadow 0.5s ease;
    /* Float-Animation liegt jetzt hier, nicht mehr am Wrapper */
    animation: floatTitle 5s ease-in-out infinite;
}

.sub-title {
    font-family: 'Roboto', sans-serif;
    font-size: 0.9em;
    font-style: italic;
    font-weight: 300;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.6);
    text-align: right;
    margin-right: -8px;
    margin-top: 3px;
    display: block;
    transform: rotate(0deg);
    /* Subtitle schwebt synchron mit */
    animation: floatTitle 5s ease-in-out infinite;
}

.kr3akz-highlight {
    color: #a29bfe;
    font-weight: 900;
    font-style: italic;
    margin-left: 3px;
    text-transform: uppercase;
    text-shadow: 0 0 10px rgba(162, 155, 254, 0.4);
}

/* --- ROOM CODE (RECHTS NEBEN DEM SPIELFELD) --- */

.room-code-display {
    /* Standard: oben links neben der Sidebar */
    position: absolute;
    top: 20px;
    left: 20px;
    right: auto;
    transform: none;
    z-index: 500;

    /* Einlauf-Animation */
    animation: slideDownFade 0.8s ease-out forwards 0.5s;
    opacity: 0;

    /* Darstellung */
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(162, 155, 254, 0.3);
    padding: 10px 20px;
    border-radius: 15px;
    backdrop-filter: blur(10px);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);

    /* Layout */
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;

    /* Toggle-Transitions */
    transition: background 0.3s ease, border-color 0.3s ease,
    box-shadow 0.3s ease;
    overflow: hidden;
}

.room-code-display:hover {
    box-shadow: 0 0 15px rgba(162, 155, 254, 0.2);
    border-color: rgba(162, 155, 254, 0.5);
}

.room-code-label {
    font-size: 0.7em;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #a29bfe;
    font-weight: 700;
    margin-bottom: 2px;
}

.room-code-value {
    font-family: 'Fredoka', sans-serif;
    font-size: 2em;
    color: white;
    font-weight: 900;
    letter-spacing: 3px;
    text-shadow: 0 0 15px rgba(162, 155, 254, 0.6);
}

/* Inhalt des Room Codes */
.code-content {
    transition: 0.3s;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Overlay (Auge beim Verstecken) */
.code-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.8);
    transition: 0.3s;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(2px);
}

.code-overlay svg {
    width: 32px;
    height: 32px;
    fill: rgba(255, 255, 255, 0.7);
    filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.5));
}

/* Zustand: Versteckt */
.room-code-display.hidden {
    background: rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.1);
}

.room-code-display.hidden .code-content {
    filter: blur(8px);
    opacity: 0.3;
}

.room-code-display.hidden .code-overlay {
    opacity: 1;
    transform: scale(1);
}

/* --- SPIELFELD GRID --- */

.grid {
    display: flex;
    gap: clamp(8px, 1.2vw, 20px);
    width: 100%;
    max-width: 1200px;
    flex: 1 1 auto;
    min-height: 0;
    max-height: 82vh;
    background: rgba(30, 10, 50, 0.4);
    backdrop-filter: blur(15px);
    padding: clamp(10px, 2vw, 30px);
    border-radius: clamp(15px, 2vw, 30px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    transition: background 0.5s ease, box-shadow 0.5s ease, border-color 0.5s ease,
    padding 0.4s ease, gap 0.4s ease;
}

/* --- SPALTEN IM GRID --- */

.col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(6px, 1vw, 15px);
}

.cat-header {
    font-family: 'Lobster', cursive;
    font-size: clamp(1em, 1.5vw, 2.2em);
    text-align: center;
    color: #ffffff;
    text-shadow: 0 0 15px #d400ff;
    margin-bottom: clamp(4px, 0.6vw, 10px);
    white-space: normal;
    overflow: hidden;
    padding: 0 5px;
    transition: color 0.5s ease, text-shadow 0.5s ease;
    height: 2.6em;
    min-height: 2.6em;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.3;
    word-break: break-word;
}

/* --- KARTEN --- */

.card {
    flex: 1;
    background: repeating-linear-gradient(45deg,
    rgba(255, 255, 255, 0.05),
    rgba(255, 255, 255, 0.05) 10px,
    transparent 10px,
    transparent 20px),
    linear-gradient(135deg, #6c5ce7, #a29bfe);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: clamp(8px, 1vw, 15px);
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    font-family: 'Sunflower', 'Fredoka', 'Lobster', serif;
    font-size: clamp(1.5em, 2.5vw, 3.5em) !important;
    font-weight: 700;
    box-shadow: 0 5px 15px rgba(108, 92, 231, 0.4);
    overflow: hidden;
    will-change: transform;
    transform: translateZ(0);
    contain: layout style;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    box-shadow 0.4s ease, border-color 0.4s ease, filter 0.4s ease;
}

/* Puls-Glow als eigene GPU-Layer */
.card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 5px 25px rgba(108, 92, 231, 0.6), 0 0 15px rgba(212, 0, 255, 0.3);
    animation: cardPulse 4s infinite ease-in-out;
    will-change: opacity;
    pointer-events: none;
    z-index: 0;
}

/* Punktzahl */
.card::after {
    content: attr(data-pts);
    position: absolute;
    z-index: 1;
    background: linear-gradient(to bottom, #ffffff 0%, #cfd8dc 45%, #90a4ae 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.3));
    pointer-events: none;
    transition: transform 0.3s ease, filter 0.3s ease;
    font-family: 'Sunflower', 'Fredoka', 'Lobster', serif;
    font-weight: 700;
}

.card.alt-color {
    background: repeating-linear-gradient(45deg,
    rgba(255, 255, 255, 0.05),
    rgba(255, 255, 255, 0.05) 10px,
    transparent 10px,
    transparent 20px),
    linear-gradient(135deg, #4b3189, #7362c2);
}

/* Hover-Lichteffekt */
.card>.card-hover-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    transform: scale(0);
    transition: transform 0.6s ease;
    pointer-events: none;
}

.card:hover {
    transform: translateY(-8px) scale(1.05);
    filter: brightness(1.1);
    border-color: #ffeaa7;
    box-shadow: 0 15px 35px rgba(108, 92, 231, 0.8), 0 0 20px rgba(253, 203, 110, 0.5);
}

.card:hover::before {
    opacity: 0;
}

.card:hover::after {
    transform: scale(1.1);
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.6));
}

/* Benutzte Karte */
.card.used {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
    color: transparent;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);
    transform: scale(0.98);
    opacity: 0.5;
    filter: none;
}

.card.used::before {
    display: none;
}

.card.used::after {
    opacity: 0;
}

.card.used:hover {
    border-color: #ff7675;
    box-shadow: 0 0 15px rgba(255, 118, 117, 0.2);
    cursor: help;
    opacity: 1;
}

/* Karten für Spieler (kein Klicken, aber Hover) */
body:not(.host-mode) .card:not(.used) {
    cursor: default;
    pointer-events: auto;
}

body.host-mode .card:not(.used) {
    cursor: pointer;
    pointer-events: auto;
}

/* Karten-Animationen beim Laden */
body .container .card.animate-card-wave {
    opacity: 0;
    animation: waveFlyIn 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards !important;
    animation-delay: var(--wave-delay) !important;
    visibility: visible !important;
    display: flex !important;
}

body .container .col .cat-header.animate-cat-drop {
    animation: simpleZoomIn 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards !important;
    opacity: 0;
    visibility: visible !important;
}


/* ================================================= */
/* === 10. MODAL OVERLAYS & POPUP SYSTEM         === */
/* ================================================= */

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(5, 0, 10, 0.95);
    backdrop-filter: blur(8px);
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    pointer-events: auto;
    animation: fadeInOverlay 0.3s ease-out;
}

.modal-overlay .modal-box {
    pointer-events: auto !important;
    position: relative;
    z-index: 2001;
}

/* Spieler können Overlay nicht schließen */
body:not(.host-mode) .modal-overlay {
    pointer-events: none;
}

body:not(.host-mode) .modal-box {
    pointer-events: auto;
}

body:not(.host-mode) .close-x,
body:not(.host-mode) .btn-close {
    display: none !important;
}

/* --- MODAL BOX --- */

.modal-box {
    background: rgba(20, 0, 40, 0.95);
    border: 1px solid rgba(162, 155, 254, 0.3);
    border-radius: 25px;
    padding: 40px;
    text-align: center;
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.8);
    color: white;
    width: 90%;
    max-width: 1000px;
    min-width: 600px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.modal-box h2 {
    color: #a29bfe !important;
    margin-top: 0;
    font-family: 'Fredoka', sans-serif;
    font-size: 2.2em;
}

.modal-box p {
    color: #dfe6e9 !important;
    font-size: 1.1em;
}

/* Wrapper: Fragebox + Buzzer-Sidebar nebeneinander */
.modal-body-wrapper {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 20px;
    max-width: 1400px;
    width: 95%;
    max-height: 90vh;
}

/* ================================================= */
/* === ACTIVE TEAM PILL (floats above question-box) === */
/* ================================================= */

.active-team-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 20px 8px 8px;
    background: rgba(20, 0, 40, 0.85);
    border: 1px solid rgba(162, 155, 254, 0.35);
    border-radius: 999px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow:
            0 0 25px rgba(162, 155, 254, 0.15),
            0 4px 20px rgba(0, 0, 0, 0.5);
    z-index: 10;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    white-space: nowrap;
    max-width: calc(100% - 40px);
    overflow: hidden;
    pointer-events: none;
}

@keyframes pillSlideIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(calc(-50% - 10px)) scale(0.92);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(-50%) scale(1);
    }
}

/* Buzzer-State: warme Akzentfarbe */
.active-team-pill.pill-buzzed {
    border-color: rgba(255, 170, 0, 0.55);
    box-shadow:
            0 0 25px rgba(255, 170, 0, 0.25),
            0 4px 20px rgba(0, 0, 0, 0.5);
}

.active-team-pill.pill-buzzed .pill-label {
    color: rgba(255, 190, 50, 0.85);
}

.active-team-pill.pill-buzzed .pill-name {
    color: #ffe8a0;
    text-shadow: 0 0 12px rgba(255, 170, 0, 0.5);
}

.active-team-pill.pill-buzzed .pill-avatar,
.active-team-pill.pill-buzzed .pill-avatar-fallback {
    border-color: rgba(255, 170, 0, 0.6);
}

/* Queue-State: nächstes Team in der Warteschlange */
.active-team-pill.pill-queued {
    border-color: rgba(100, 200, 255, 0.45);
    box-shadow:
            0 0 25px rgba(100, 200, 255, 0.15),
            0 4px 20px rgba(0, 0, 0, 0.5);
    opacity: 0.85;
}

.active-team-pill.pill-queued .pill-label {
    color: rgba(130, 210, 255, 0.75);
}

.active-team-pill.pill-queued .pill-name {
    color: #c8ecff;
    text-shadow: 0 0 12px rgba(100, 200, 255, 0.4);
}

.active-team-pill.pill-queued .pill-avatar,
.active-team-pill.pill-queued .pill-avatar-fallback {
    border-color: rgba(100, 200, 255, 0.5);
}

.pill-avatars {
    display: flex;
    align-items: center;
    gap: -6px;
}

.pill-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid rgba(162, 155, 254, 0.5);
    object-fit: cover;
    margin-left: -6px;
    background: rgba(162, 155, 254, 0.15);
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
    flex-shrink: 0;
}

.pill-avatars .pill-avatar:first-child {
    margin-left: 0;
}

.pill-avatar-fallback {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid rgba(162, 155, 254, 0.5);
    background: rgba(162, 155, 254, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: rgba(200, 185, 255, 0.9);
    margin-left: -6px;
    flex-shrink: 0;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
}

.pill-avatars .pill-avatar-fallback:first-child {
    margin-left: 0;
}

.pill-name {
    font-size: 0.85em;
    font-weight: 700;
    color: rgba(220, 210, 255, 0.95);
    letter-spacing: 0.04em;
    text-shadow: 0 0 12px rgba(162, 155, 254, 0.5);
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 200px;
}

.pill-label {
    font-size: 0.7em;
    font-weight: 500;
    color: rgba(162, 155, 254, 0.6);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-right: 4px;
}

/* Inner row: Fragebox + Buzzer-Sidebar nebeneinander */
.modal-inner-row {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 20px;
    width: 100%;
    flex: 1;
    min-height: 0;
    max-height: 90vh;
}

/* Wrapper: Pill-Anker mit overflow visible, question-box selbst bleibt hidden */
.question-box-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;   /* Anker für die absolute Pill */
    overflow: visible;    /* Pill darf oben rausgucken */
    min-height: 0;
}

/* Die Fragebox */
.question-box {
    flex: 1;
    background: rgba(20, 0, 40, 0.95);
    border: 1px solid rgba(162, 155, 254, 0.3);
    border-radius: 25px;
    padding: 30px;
    padding-top: 52px;
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;     /* Solution-Section bleibt sauber drin */
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.8);
    min-height: 0;
}

/* --- MODAL SEKTIONEN --- */

.modal-header-badges {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 15px;
    flex-shrink: 0;
}

.modal-content-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    width: 100%;
    padding: 10px 0;
}

.modal-content {
    padding: 40px;
    flex: 1;
    pointer-events: none;
}

.modal-content>* {
    pointer-events: auto;
}

.modal-host-ui {
    flex-shrink: 0;
    padding: 15px 0;
    margin: 5px 0;
    width: 100%;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: none;
    align-items: center;
    justify-content: center;
}

body.host-mode .modal-host-ui {
    display: flex;
}

.modal-footer {
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 30px;
    padding-top: 20px;
    justify-content: space-between;
}

/* --- LÖSUNGSBEREICH --- */

.solution-section {
    flex-shrink: 0;
    margin-top: auto;
    padding: 12px 20px;
    border-top: 1px solid rgba(241, 196, 15, 0.2);
    background: rgba(241, 196, 15, 0.04);
    border-radius: 0 0 25px 25px;
    margin: 5px -30px -30px -30px;
    width: calc(100% + 60px);
    text-align: center;
    transition: background 0.3s ease;
    display: none;
}

.modal-overlay .solution-section {
    display: block;
}

.solution-section:hover {
    background: rgba(241, 196, 15, 0.07);
}

#btn-toggle-solution {
    background: none;
    border: none;
    color: #f1c40f;
    cursor: pointer;
    font-size: 1em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 auto;
    padding: 8px 16px;
    border-radius: 8px;
    transition: all 0.3s ease;
    font-family: inherit;
}

#btn-toggle-solution:hover {
    color: #f39c12;
    background: rgba(241, 196, 15, 0.1);
    transform: scale(1.03);
}

body:not(.host-mode) #btn-toggle-solution {
    display: none;
}

#answer-reveal {
    padding: 15px 20px;
    color: #f1c40f;
    font-weight: bold;
    font-size: 1.2em;
    margin-bottom: 10px;
    animation: solutionFadeIn 0.3s ease;
    background: rgba(241, 196, 15, 0.08);
    border: 1px solid rgba(241, 196, 15, 0.15);
    border-left: none;
    border-right: none;
}

/* --- FRAGENTEXT & MEDIA --- */

#q-text {
    font-size: 2.5em;
    font-weight: 700;
    line-height: 1.2;
    margin: 20px 0;
    width: 100%;
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
}


#media-area {
    margin-top: 20px;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    position: relative;
    flex-direction: column;
    align-items: center;
    pointer-events: none !important;
    z-index: 1;
}

#media-area iframe,
#media-area img {
    pointer-events: auto !important;
    position: relative;
    z-index: 10;
}

iframe,
img {
    border-radius: 15px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
    max-height: min(400px, 40vh);
    max-width: 100%;
    object-fit: contain;
}

/* --- MEDIA CONTROLS (PLAY/PAUSE etc.) --- */

.media-controls {
    display: flex;
    gap: 20px;
    margin-top: 20px;
    justify-content: center;
    position: relative;
    z-index: 500;
    pointer-events: none;
}

.btn-control {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    cursor: pointer;
    transition: 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
    pointer-events: auto !important;
    cursor: pointer !important;
    position: relative;
    z-index: 501;
    transform: translateZ(0);
}

.btn-control:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(1.1);
    border-color: white;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
}

.btn-control svg {
    width: 30px;
    height: 30px;
    fill: white;
}

/* Audio-Visualizer */
.audio-container {
    position: relative;
    width: 300px;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.audio-container iframe {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.audio-container,
.visualizer {
    pointer-events: none !important;
}

.visualizer {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: #e0d4ff;
    box-shadow: 0 0 50px #d400ff;
    animation: pulse 1s infinite alternate;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3em;
}

/* --- CLOSE BUTTON --- */

.close-x {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(0, 0, 0, 0.5);
    border: none;
    color: white;
    font-size: 30px;
    cursor: pointer;
    z-index: 99999 !important;
    pointer-events: auto !important;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex !important;
    align-items: center;
    justify-content: center;
    user-select: none;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
}

.close-x:hover {
    background: rgba(214, 48, 49, 0.8);
    transform: scale(1.1);
}

/* --- BADGES --- */

.badge {
    font-weight: 900;
    padding: 8px 20px;
    border-radius: 50px;
    text-transform: uppercase;
    margin: 0 5px;
    display: inline-block;
}

.badge-pts {
    background: linear-gradient(90deg, #6c5ce7, #a29bfe);
}

#join-url-text {
    color: #a29bfe !important;
    font-weight: bold;
}

.footer-label {
    color: #a29bfe;
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
    font-weight: bold;
}

/* --- QR CODE --- */

#qr-code-container {
    margin: 30px auto;
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
}

#qr-code-container img,
#qr-code-container canvas {
    background: white;
    padding: 10px;
    border-radius: 15px;
    box-shadow: 0 0 0 4px white,
    0 0 30px rgba(108, 92, 231, 0.8),
    0 0 60px rgba(108, 92, 231, 0.5);
    max-width: 100%;
    height: auto;
}

/* --- TIMEOUT POPUP --- */

#timeout-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    background: rgba(40, 5, 10, 0.95);
    border: 1px solid rgba(255, 118, 117, 0.3);
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.9), 0 0 30px rgba(214, 48, 49, 0.3);
    padding: 40px 60px;
    border-radius: 25px;
    z-index: 3000;
    text-align: center;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    backdrop-filter: blur(15px);
}

#timeout-popup.show {
    transform: translate(-50%, -50%) scale(1);
    visibility: visible;
    opacity: 1;
    pointer-events: auto !important;
}

#timeout-popup h1 {
    font-family: 'Roboto', sans-serif;
    font-weight: 900;
    font-size: 3.5em;
    margin: 0;
    color: #ff7675;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 0 20px rgba(214, 48, 49, 0.6);
}

#btn-timeout-ok {
    background: linear-gradient(135deg, #d63031, #ff7675);
    color: white;
    border: none;
    padding: 12px 40px;
    font-size: 1.2em;
    border-radius: 50px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(214, 48, 49, 0.4);
    transition: 0.2s;
    text-transform: uppercase;
}

#btn-timeout-ok:hover {
    transform: scale(1.05);
    box-shadow: 0 0 25px rgba(214, 48, 49, 0.6);
}

body:not(.host-mode) #btn-timeout-ok {
    display: none;
}


/* ================================================= */
/* === 11. BUTTONS                                === */
/* ================================================= */

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

button.action-btn {
    padding: 15px 20px;
    min-width: 150px;
    border-radius: 15px;
    border: none;
    font-weight: 900;
    text-transform: uppercase;
    cursor: pointer;
    transition: 0.2s;
    font-size: 1.1em;
    color: white;
    margin: 5px;
}

button.action-btn:hover {
    transform: scale(1.05);
    filter: brightness(1.1);
}

.action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 25px;
    min-width: 160px;
    font-size: 1.1em;
    transition: 0.3s;
}

.action-btn svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

/* Button-Varianten */
.btn-team {
    background: linear-gradient(135deg, #6c5ce7, #a29bfe);
    box-shadow: 0 4px 15px rgba(108, 92, 231, 0.4);
}

.btn-reveal {
    background: linear-gradient(135deg, #f1c40f, #f39c12);
    color: white !important;
    box-shadow: 0 4px 15px rgba(241, 196, 15, 0.4);
    font-size: 1em;
    padding: 12px 25px;
    margin-top: 10px;
}

.btn-none,
.btn-delete {
    background: linear-gradient(135deg, #ff7675, #d63031);
    color: white;
    box-shadow: 0 4px 15px rgba(214, 48, 49, 0.4);
}

.btn-save {
    background: #00b894;
}

.btn-cancel {
    background: #636e72;
    color: #dfe6e9;
}

.btn-close {
    background: #636e72;
    font-size: 0.9em;
}

.btn-correct {
    background: #00b894;
    color: white;
    box-shadow: 0 4px 15px rgba(0, 184, 148, 0.4);
}

.btn-wrong {
    background: #d63031;
    color: white;
    box-shadow: 0 4px 15px rgba(214, 48, 49, 0.4);
}

.btn-unlock {
    background: linear-gradient(135deg, #0984e3, #74b9ff);
    color: white;
}

.btn-lock {
    background: #636e72;
    color: #ccc;
}

.btn-buzzer {
    background: linear-gradient(135deg, #0984e3, #74b9ff);
    flex: 1;
    margin-bottom: 15px;
    box-shadow: 0 4px 15px rgba(9, 132, 227, 0.4);
}

/* Runder Timer-Button */
.btn-timer-round {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    min-width: auto !important;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #6c5ce7, #a29bfe);
    box-shadow: 0 4px 15px rgba(108, 92, 231, 0.4);
    transition: 0.3s;
    border: none;
    color: white;
    cursor: pointer;
}

.btn-timer-round.stopped {
    background: linear-gradient(135deg, #d63031, #ff7675);
    box-shadow: 0 4px 15px rgba(214, 48, 49, 0.4);
    animation: pulseRed 2s infinite;
}

.btn-timer-round:hover {
    transform: scale(1.1) rotate(15deg);
    background: linear-gradient(135deg, #a29bfe, #6c5ce7);
}

.btn-timer-round svg {
    width: 24px;
    height: 24px;
    fill: white;
}

/* Step-resolve Container */
#step-resolve {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100%;
}

#step-resolve>div {
    margin: 0 !important;
}


/* ================================================= */
/* === 12. TEAM EDITOR MODAL                      === */
/* ================================================= */

#modal-team-edit .btn-group {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
    width: 100%;
}

#modal-team-edit .action-btn {
    flex: 0 1 180px;
    margin: 0;
}

.editor-header {
    margin-bottom: 30px;
}

.editor-header input {
    font-family: 'Lobster', cursive;
    font-size: 2em;
    color: #e0d4ff;
    text-align: center;
    background: transparent;
    border: none;
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
    width: 100%;
    padding: 10px;
    outline: none;
    transition: 0.3s;
}

.editor-header input:focus {
    border-color: #6c5ce7;
}

.editor-grid {
    display: grid;
    grid-template-columns: 1fr 1px 1fr;
    gap: 20px;
    align-items: start;
    margin-bottom: 30px;
}

.divider {
    background: rgba(255, 255, 255, 0.1);
    height: 200px;
    align-self: center;
}

.player-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.player-col label {
    color: #a29bfe;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.9em;
}

.editor-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 4px solid white;
    background: #333;
    object-fit: cover;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s;
}

select {
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(0, 0, 0, 0.3);
    color: white;
    font-size: 1em;
    cursor: pointer;
    text-align: center;
}

select option {
    background: #1e0b2e;
    color: white;
}

#answer-box {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #f1c40f;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}


/* ================================================= */
/* === 13. BUZZER SIDEBAR (FRAGEFENSTER)          === */
/* ================================================= */

.buzzer-sidebar {
    width: 280px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    backdrop-filter: blur(10px);
    overflow-y: auto;
    transition: width 0.3s ease;
}

#host-sidebar-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 5px;
}

#host-sidebar-controls .buzzer-winner-display {
    font-size: 1.1em;
    margin-top: 5px;
}

/* Host-Layout (Breiter, Grid) */
.buzzer-sidebar.host-layout {
    width: 300px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: center;
    gap: 10px;
    padding-bottom: 20px;
}

.buzzer-sidebar.host-layout .os-buzzer-wrapper {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    width: 45%;
}

.buzzer-sidebar.host-layout .os-buzzer-btn {
    width: 70px;
    height: 70px;
}

.buzzer-sidebar.host-layout .os-buzzer-btn svg {
    width: 35px;
    height: 35px;
}

/* Spieler-Buzzer (Riesig) */
/* Spieler-Buzzer (Riesig) */
.buzzer-sidebar:not(.host-layout) .os-buzzer-btn {
    width: 220px !important;
    height: 220px !important;
    margin: 0 !important;
    box-shadow:
            0 0 50px rgba(0,0,0,0.5),
            0 0 0 6px rgba(255, 255, 255, 0.05),
            inset 0 6px 15px rgba(255,255,255,0.1),
            inset 0 -15px 30px rgba(0, 0, 0, 0.6);
}

.buzzer-sidebar:not(.host-layout) .os-buzzer-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    width: 100%;
}

.buzzer-sidebar:not(.host-layout) .os-buzzer-btn::before {
    content: '';
    position: absolute;
    top: 5%; left: 10%; width: 80%; height: 40%;
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(255,255,255,0.15), transparent);
    pointer-events: none;
    z-index: 2;
}

.buzzer-sidebar:not(.host-layout) .os-buzzer-btn svg {
    width: 100px !important;
    height: 100px !important;
}

.buzzer-sidebar:not(.host-layout) .os-buzzer-btn.active {
    transform: scale(1.05);
}

/* Buzzer-Button Basis */
.os-buzzer-btn {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin-bottom: 10px;
    background: linear-gradient(135deg, #2d3436, #636e72);
    box-shadow:
            0 0 20px rgba(0,0,0,0.4),
            0 0 0 3px rgba(255, 255, 255, 0.05),
            inset 0 3px 8px rgba(255,255,255,0.1),
            inset 0 -8px 15px rgba(0, 0, 0, 0.5);
    color: #b2bec3;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: not-allowed;
    transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease, background 0.3s ease;
    z-index: 10;
    position: relative;
    overflow: hidden;
}

.os-buzzer-btn::before {
    content: '';
    position: absolute;
    top: 5%; left: 10%; width: 80%; height: 40%;
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(255,255,255,0.1), transparent);
    pointer-events: none;
    z-index: 2;
}

.os-buzzer-btn svg {
    width: 50px;
    height: 50px;
    fill: currentColor;
    pointer-events: none;
    transition: fill 0.3s ease, transform 0.3s ease, filter 0.3s ease;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
    position: relative;
    z-index: 3;
}

.os-buzzer-btn span {
    position: relative;
    z-index: 3;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}

.os-buzzer-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    position: relative;
    margin: 0;
    margin-bottom: 10px;
}

.os-buzzer-label {
    font-family: 'Lobster', cursive;
    font-size: 1.6em;
    color: #e0d4ff;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    text-align: center;
    line-height: 1.2;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 10px;
}

/* Buzzer-Zustände (Basis-Fallback, Theme-Overrides greifen später) */
.os-buzzer-btn {
    /* Standard Fallback Farben, werden von den Themes überschrieben */
    --bz-glow: rgba(108, 92, 231, 0.4);
    --bz-glow-strong: rgba(108, 92, 231, 0.6);
    --bz-ring: rgba(255, 255, 255, 0.15);
    --bz-ring-strong: rgba(108, 92, 231, 0.6);
}

.os-buzzer-btn.ready {
    background: linear-gradient(135deg, #6c5ce7, #a29bfe);
    box-shadow:
            0 0 30px var(--bz-glow),
            0 0 0 4px var(--bz-ring),
            inset 0 6px 10px rgba(255, 255, 255, 0.3),
            inset 0 -10px 20px rgba(0,0,0,0.4);
    color: white;
    cursor: pointer;
    animation: pulseReady 2.5s infinite ease-in-out;
}

@keyframes pulseReady {
    0% { transform: scale(1); box-shadow: 0 0 30px var(--bz-glow), 0 0 0 4px var(--bz-ring), inset 0 6px 10px rgba(255, 255, 255, 0.3), inset 0 -10px 20px rgba(0,0,0,0.4); }
    50% { transform: scale(1.02); box-shadow: 0 0 45px var(--bz-glow-strong), 0 0 0 6px var(--bz-ring-strong), inset 0 6px 10px rgba(255, 255, 255, 0.4), inset 0 -10px 20px rgba(0,0,0,0.4); }
    100% { transform: scale(1); box-shadow: 0 0 30px var(--bz-glow), 0 0 0 4px var(--bz-ring), inset 0 6px 10px rgba(255, 255, 255, 0.3), inset 0 -10px 20px rgba(0,0,0,0.4); }
}

.os-buzzer-btn.ready:active {
    transform: scale(0.92);
    box-shadow:
            0 0 10px rgba(0,0,0,0.6),
            0 0 0 2px rgba(255, 255, 255, 0.1),
            inset 0 10px 20px rgba(0,0,0,0.6);
    transition: transform 0.05s ease, box-shadow 0.05s ease;
    animation: none;
}

.os-buzzer-btn.active {
    transform: scale(1.1);
    z-index: 20;
    background: linear-gradient(135deg, #00b894, #55efc4) !important;
    color: white !important;
    box-shadow:
            0 0 50px rgba(0, 184, 148, 0.6),
            0 0 0 6px rgba(255, 255, 255, 0.8),
            inset 0 8px 15px rgba(255, 255, 255, 0.6),
            inset 0 -15px 30px rgba(0,0,0,0.3) !important;
    animation: none;
}
.os-buzzer-btn.active svg {
    filter: drop-shadow(0 0 12px rgba(255,255,255,0.9));
    transform: scale(1.15);
}

.os-buzzer-btn.wrong {
    background: linear-gradient(135deg, #1e272e, #485460);
    box-shadow:
            inset 0 0 30px rgba(0,0,0,0.8),
            0 0 0 2px rgba(255,255,255,0.05) !important;
    color: #808e9b !important;
    opacity: 0.85 !important;
    cursor: not-allowed;
    transform: scale(0.95);
    animation: none;
}
.os-buzzer-btn.wrong svg {
    opacity: 0.3;
    filter: none;
}

.os-buzzer-btn.locked {
    opacity: 1;
    background: linear-gradient(135deg, #1e272e, #485460);
    box-shadow: inset 0 0 20px rgba(0,0,0,0.8), 0 0 0 2px rgba(255,255,255,0.05);
    color: #808e9b;
}

/* Buzzer-Gewinner */
.buzzer-winner-display {
    font-size: 1.5em;
    color: #00b894;
    font-weight: bold;
    margin-bottom: 15px;
    animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}


/* ================================================= */
/* === 14. WARTESCHLANGE                          === */
/* ================================================= */

.queue-display {
    display: none;
    margin-top: 20px;
    padding: 15px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.queue-display.visible {
    display: block;
    animation: slideDown 0.3s ease;
}

.queue-title {
    color: #a29bfe;
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
    font-weight: bold;
}

.queue-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.queue-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    border-left: 3px solid;
    transition: 0.2s;
}

.queue-item.active {
    background: rgba(0, 184, 148, 0.2);
    border-left-color: #00b894;
    box-shadow: 0 0 15px rgba(0, 184, 148, 0.3);
}

.queue-item.waiting {
    border-left-color: #fdcb6e;
    opacity: 0.7;
}

.queue-number {
    font-weight: bold;
    font-size: 1.2em;
    color: #fff;
    min-width: 30px;
    text-align: center;
}

.queue-team-name {
    flex: 1;
    color: #ddd;
    font-weight: 500;
}

.queue-badge {
    font-size: 0.7em;
    padding: 3px 8px;
    border-radius: 10px;
    text-transform: uppercase;
    font-weight: bold;
}

.badge-active {
    background: #00b894;
    color: white;
}

.badge-waiting {
    background: #fdcb6e;
    color: #000;
}


/* ================================================= */
/* === 15. VOLUME CONTROL                         === */
/* ================================================= */

.volume-top-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 0 15px;
    height: 45px;
    border-radius: 25px;
    backdrop-filter: blur(10px);
}

#vol-slider {
    appearance: none;
    -webkit-appearance: none;
    width: 80px;
    background: rgba(255, 255, 255, 0.2);
    height: 4px;
    border-radius: 2px;
    outline: none;
    transition: width 0.3s ease, background 0.3s ease;
}

#vol-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    background: #ffffff;
    border-radius: 50%;
    cursor: pointer;
}

.volume-top-bar svg:hover {
    transform: scale(1.2);
    opacity: 1 !important;
}


/* ================================================= */
/* === 16. THEME POPUP (DESIGN-AUSWAHL)           === */
/* ================================================= */

.theme-popup {
    position: absolute;
    top: 60px;
    right: 0;
    width: 260px;
    background: rgba(20, 0, 40, 0.95);
    border: 1px solid rgba(162, 155, 254, 0.3);
    border-radius: 16px;
    padding: 15px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(15px);
    z-index: 4000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: none;
}

.theme-popup.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.theme-popup-header {
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    color: #a29bfe;
    margin-bottom: 12px;
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding-left: 5px;
}

.theme-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.theme-option {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 10px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    transition: 0.2s;
    position: relative;
}

.theme-option:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

.theme-option span {
    font-size: 0.9em;
    color: #eee;
    font-weight: 500;
}

.theme-option.active {
    border-color: #00b894;
    background: rgba(0, 184, 148, 0.1);
    box-shadow: 0 0 10px rgba(0, 184, 148, 0.2);
}

.theme-option.active span {
    color: #00b894;
    font-weight: bold;
}

/* Vorschau-Boxen */
.preview-box {
    width: 100%;
    height: 40px;
    border-radius: 6px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.preview-neon {
    background: linear-gradient(135deg, #2d0036, #0b0014);
}

.preview-glass {
    background: #1e1e1e;
}

.preview-zen {
    background: #e0e0e0;
}

.preview-arctic {
    background: linear-gradient(135deg, #001f3f, #003366);
}

.preview-sunset {
    background: linear-gradient(135deg, #2c0b00, #4a1900);
}

.preview-valorant {
    background: linear-gradient(135deg, #0F1923, #1a2535);
    border: 1px solid rgba(255, 70, 85, 0.35) !important;
}

.preview-neon .preview-dot {
    background: #d400ff;
    box-shadow: 0 0 5px #d400ff;
}

.preview-glass .preview-dot {
    background: #ccc;
}

.preview-zen .preview-dot {
    background: #333;
}

.preview-arctic .preview-dot {
    background: #00d2ff;
    box-shadow: 0 0 5px #00d2ff;
}

.preview-sunset .preview-dot {
    background: #ff9f43;
    box-shadow: 0 0 5px #ff9f43;
}

.preview-valorant .preview-dot {
    background: #FF4655;
    box-shadow: 0 0 5px #FF4655;
    border-radius: 1px; /* Sharp corners – Valorant-Style */
}

.preview-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 6px;
    border-radius: 3px;
}

/* Theme-spezifische Popup-Anpassungen */
body.theme-arctic .theme-popup {
    background: rgba(10, 25, 45, 0.95);
    border-color: rgba(0, 210, 255, 0.3);
}

body.theme-arctic .theme-popup-header {
    color: #00d2ff;
}

body.theme-arctic .theme-option:hover {
    background: rgba(0, 210, 255, 0.1);
    border-color: rgba(0, 210, 255, 0.3);
}

body.theme-arctic .theme-option.active {
    border-color: #00d2ff;
    background: rgba(0, 210, 255, 0.15);
    box-shadow: 0 0 15px rgba(0, 210, 255, 0.2);
}

body.theme-arctic .theme-option.active span {
    color: #00d2ff;
}

body.theme-sunset .theme-popup {
    background: rgba(40, 10, 5, 0.95);
    border-color: rgba(255, 159, 67, 0.3);
}

body.theme-sunset .theme-popup-header {
    color: #ff9f43;
}

body.theme-sunset .theme-option:hover {
    background: rgba(255, 159, 67, 0.1);
    border-color: rgba(255, 159, 67, 0.3);
}

body.theme-sunset .theme-option.active {
    border-color: #ff9f43;
    background: rgba(255, 159, 67, 0.15);
    box-shadow: 0 0 15px rgba(255, 159, 67, 0.2);
}

body.theme-sunset .theme-option.active span {
    color: #ff9f43;
}

body.theme-zen .theme-popup {
    background: rgba(245, 245, 245, 0.98);
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

body.theme-zen .theme-popup-header {
    color: #2d3436;
}

body.theme-zen .theme-option {
    background: #fff;
    border-color: #e0e0e0;
}

body.theme-zen .theme-option span {
    color: #636e72;
}

body.theme-zen .theme-option:hover {
    background: #f5f5f5;
    border-color: #b2bec3;
    transform: translateY(-2px);
}

body.theme-zen .theme-option.active {
    border-color: #2d3436;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

body.theme-zen .theme-option.active span {
    color: #2d3436;
}

body.theme-performance .theme-popup {
    background: rgba(30, 30, 30, 0.95);
    border-color: rgba(255, 255, 255, 0.2);
}

body.theme-performance .theme-popup-header {
    color: #dfe6e9;
}

body.theme-performance .theme-option:hover {
    background: rgba(255, 255, 255, 0.1);
}

body.theme-performance .theme-option.active {
    border-color: #ffffff;
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}

body.theme-performance .theme-option.active span {
    color: #ffffff;
}


/* ================================================= */
/* === 17. SIEGEREHRUNG (WINNER SCREEN)           === */
/* ================================================= */

.winner-final-box {
    background: rgba(30, 10, 50, 0.7) !important;
    backdrop-filter: blur(25px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.8) !important;
    max-width: 900px !important;
    width: 85% !important;
    padding: 60px !important;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: winnerPopIn 0.8s cubic-bezier(0.17, 0.89, 0.32, 1.1) forwards;
}

/* Spotlight-Strahl */
.winner-final-box::before {
    content: "";
    position: absolute;
    top: -100%;
    left: -150%;
    width: 50%;
    height: 300%;
    background: linear-gradient(to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.08) 50%,
    rgba(255, 255, 255, 0) 100%);
    transform: rotate(30deg);
    animation: spotlightSweep 5s infinite ease-in-out;
    pointer-events: none;
    z-index: 1;
}

.spotlight-inner {
    position: absolute;
    top: -100%;
    left: -150%;
    width: 40%;
    height: 300%;
    background: linear-gradient(to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.05) 50%,
    rgba(255, 255, 255, 0) 100%);
    transform: rotate(25deg);
    animation: spotlightSweep 6s infinite ease-in-out;
    pointer-events: none;
    z-index: 1;
}

.winner-title-style {
    font-family: 'Lobster', cursive;
    font-size: 5em;
    text-align: center;
    color: #ffffff;
    margin: 0 0 40px 0;
    line-height: 1.1;
    text-shadow: 1px 1px 0px #dff9fb, 2px 2px 0px #a29bfe, 3px 3px 0px #6c5ce7,
    4px 4px 0px #6c5ce7, 5px 5px 0px #4834d4,
    0 0 20px rgba(212, 0, 255, 0.6);
}

#winner-profiles {
    display: flex !important;
    justify-content: center;
    gap: 30px;
    margin: 40px 0;
    min-height: 180px;
    width: 100%;
    position: relative;
    z-index: 5;
}

.winner-profile-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0;
    animation: slideUpWinner 0.6s ease-out forwards;
    transition: 0.3s;
}

/* Letzte Definition gewinnt: 140px */
.winner-profile-card img {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    border: 4px solid white;
    object-fit: cover;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
    background: #222;
}

.winner-score-tile {
    margin-top: 20px;
    padding: 15px 45px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    backdrop-filter: blur(10px);
}

.winner-score-clean {
    margin-top: 20px;
    padding: 15px 40px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    backdrop-filter: blur(10px);
    display: inline-block;
}

.winner-score-clean .points-val {
    font-size: 3.5em;
    font-weight: 900;
    background: linear-gradient(90deg, #6c5ce7, #a29bfe);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: block;
    line-height: 1;
}

.winner-score-clean .points-label {
    color: #a29bfe;
    text-transform: uppercase;
    font-size: 0.9em;
    letter-spacing: 2px;
    font-weight: bold;
    margin-top: 5px;
    display: block;
}

.winner-score-lux {
    font-size: 3em;
    font-weight: 900;
    margin-top: 20px;
    padding: 10px 30px;
    border-radius: 15px;
    background: rgba(108, 92, 231, 0.2);
    border: 1px solid rgba(162, 155, 254, 0.3);
    display: inline-block;
    color: #f1c40f;
    text-shadow: 0 0 15px rgba(241, 196, 15, 0.5);
    box-shadow: inset 0 0 20px rgba(108, 92, 231, 0.2);
}


/* ================================================= */
/* === 18. GEOGUESSR STYLES                       === */
/* ================================================= */

#btn-show-geo-map:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 184, 148, 0.5);
}

.geo-phase-btn {
    background: linear-gradient(135deg, #00b894, #00cec9);
    color: white;
    border: none;
    padding: 12px 28px;
    border-radius: 12px;
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 15px rgba(0, 184, 148, 0.4);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.geo-phase-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 184, 148, 0.5);
}


/* ================================================= */
/* === 19. BOARD START ANIMATIONEN               === */
/* ================================================= */

.animate-slide-in {
    opacity: 0;
    animation: slideInLeft 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.animate-drop-in {
    opacity: 0;
    animation: fadeInOnly 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.animate-pop-in {
    opacity: 0;
    animation: popIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}


/* ================================================= */
/* === 20. PERFORMANCE BOOSTER                    === */
/* ================================================= */

.card,
.btn-buzzer,
.bg-animations,
.aura,
.modal-box {
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
}


/* ================================================= */
/* === 21. ZOOM & SKALIERUNG (AUFLÖSUNGEN)        === */
/* ================================================= */

/* 1080p (und kleiner): 85% Zoom */
@media (max-width: 1920px) {
    body:not(.discord-activity) .container {
        zoom: 0.85;
        height: 117.65vh;
        width: 117.65vw;
    }

    .grid {
        max-width: 1350px;
        aspect-ratio: 16 / 10.5;
        flex: 0 0 auto;
        height: auto;
        max-height: 80vh;
    }

    body:not(.discord-activity) .top-controls {
        zoom: 0.85;
    }

    /* Streamer Mode 1080p: Shift the question modal up so the bottom bar isn't obscured */
    body.layout-bottom.is-streamer-mode:not(.discord-activity) .modal-overlay .modal-body-wrapper {
        transform: translateY(-80px);
        transform-origin: center center;
    }

    .team-scroll {
        max-height: 100vh;
    }

    /* Bottom-Layout auf 1080p: Standard-Zoom (0.85) beibehalten, nur Bottom-Bar kompakter */
    body.layout-bottom:not(.discord-activity) .sidebar {
        min-height: 200px !important;
        padding: 8px 16px;
    }

    body.layout-bottom:not(.discord-activity) .team-card {
        height: clamp(120px, 16vh, 170px);
        width: clamp(180px, 14vw, 290px);
        min-width: 200px;
    }

    body.layout-bottom:not(.discord-activity) .streamer-card {
        height: clamp(140px, 18vh, 190px);
        min-width: 290px;
    }

    body.layout-bottom:not(.discord-activity) .host-display {
        height: clamp(120px, 16vh, 170px);
    }

    body.layout-bottom:not(.discord-activity) .btn-add-team {
        height: clamp(120px, 16vh, 170px);
    }

    body.layout-bottom:not(.discord-activity) .grid {
        max-width: 1100px;
        flex: 1 1 auto;
        height: auto;
        max-height: none;
    }

    body.layout-bottom:not(.discord-activity) .game-area {
        padding: 10px 40px 10px 40px;
        gap: 20px;
        align-items: center;
        justify-content: center;
    }
}

/* WQHD (2560x1440): leicht größer */
@media (min-width: 1921px) {
    body:not(.discord-activity) .container {
        zoom: 1.05;
    }

    body:not(.discord-activity) .top-controls {
        zoom: 1.05;
    }

    .grid {
        max-width: 1350px;
        aspect-ratio: 16 / 10.5;
        flex: 0 0 auto;
        height: auto;
        max-height: 80vh;
    }

    /* Bottom-Layout auf WQHD: 10% mehr Zoom */
    body.layout-bottom:not(.discord-activity) .container {
        zoom: 1.155;
    }

    body.layout-bottom:not(.discord-activity) .top-controls {
        zoom: 1.155;
    }

    /* Bottom-Bar horizontal zentrieren: weniger Padding damit Cards nicht rechts anstoßen */
    body.layout-bottom:not(.discord-activity) .sidebar {
        padding: 10px 10px;
    }

    body.layout-bottom:not(.discord-activity) .team-scroll {
        padding: 10px 10px;
    }

    body.layout-bottom:not(.discord-activity) .host-display {
        margin-right: 10px;
    }

    body.layout-bottom:not(.discord-activity) .sidebar-title {
        margin-right: 10px;
    }
}

/* Discord: kein CSS-Zoom, JS übernimmt transform:scale() */
body.discord-activity {
    zoom: unset !important;
    overflow: hidden !important;
}

body.discord-activity .container {
    zoom: unset !important;
    width: 100vw !important;
    height: 100vh !important;
}

/* ================================================= */
/* === DISCORD ACTIVITY: PILL & MODAL FIXES       === */
/* ================================================= */

/* Modal-Wrapper: immer als Row, nie als Column (verhindert Media-Query-Override) */
body.discord-activity .modal-body-wrapper {
    flex-direction: row !important;
    align-items: stretch !important;
    overflow-y: visible !important;
    max-height: 95vh !important;
    width: 98% !important;
    zoom: 1 !important; /* Kein zoom-0.8 Scaledown */
}

/* Buzzer-Sidebar im Discord-Host-Layout kompakter */
body.discord-activity .buzzer-sidebar.host-layout {
    width: 200px !important;
    min-width: 180px !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    order: unset !important;
    max-height: 95vh !important;
    overflow-y: auto !important;
}

/* question-box-wrapper: overflow visible damit Pill oben rausschauen kann */
body.discord-activity .question-box-wrapper {
    overflow: visible !important;
}

body.discord-activity .question-box {
    overflow: hidden !important;
    padding-top: 30px !important;
}


/* ================================================= */
/* === 22. LAYOUT: BOTTOM (TEAMS UNTEN)           === */
/* ================================================= */

body.layout-bottom .container {
    flex-direction: column;
    padding: 0;
}

body.layout-bottom .game-area {
    order: 1;
    flex: 1;
    width: 100%;
    padding: 20px 40px;
    overflow: visible;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 30px;
}

/* Unsichtbare Säule für symmetrisches Grid-Zentrierung */
body.layout-bottom .game-area::after {
    content: "";
    flex: 1;
    order: 3;
}

body.layout-bottom .header-wrapper {
    order: 1;
    margin: 0;
    position: relative;
    flex: 1;
    /* Wechsel von Flex auf Grid für punktgenaues Alignment */
    display: grid;
    grid-template-columns: max-content;
    justify-content: center;
    align-content: center;
}

body.layout-bottom .grid {
    order: 2;
    padding: 20px;
    flex: 1 1 auto;
    max-width: 1100px;
    height: auto;
    max-height: 75vh;
    margin: 0;
}

/* Room Code im Bottom-Layout: Zentriert im rechten freien Bereich */
body.layout-bottom .room-code-display {
    position: absolute !important;
    top: 50% !important;
    right: clamp(100px, 15vw, 300px) !important;
    left: auto !important;
    /* HIER DIE GRÖßE ANPASSEN: scale(1.2) = 20% größer, scale(0.8) = 20% kleiner */
    transform: translateY(-50%) scale(1.0) !important;
    width: auto !important;
    margin: 0 !important;
}

body.layout-bottom .sidebar {
    order: 2;
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 160px !important;
    flex: 0 0 auto;
    border-right: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 10px 20px;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(20px);
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.5);
    z-index: 50;
    position: relative;
}

/* Ensure the sidebar (cameras + teams) stays above the question modal overlay (z-index 2000) specifically in streamer mode */
body.layout-bottom.is-streamer-mode .container {
    z-index: auto !important;
}

body.layout-bottom.is-streamer-mode .sidebar {
    z-index: 2005 !important;
}

body.layout-bottom.is-streamer-mode .modal-body-wrapper {
    /* Base rule: shift the entire modal wrapper up so it sits above the tall camera sidebar */
    transform: translateY(-80px);
}


body.layout-bottom .sidebar-title {
    font-size: 1.8em;
    margin: 0 20px 0 0;
    min-width: auto;
    transform: none;
    text-align: left;
    line-height: 1;
}

body.layout-bottom .team-scroll {
    flex-direction: row;
    overflow-y: hidden;
    overflow-x: auto;
    width: auto;
    max-width: 100%;
    /* Flexibel bleiben, aber wenn moeglich zentrieren */
    flex: 0 1 auto;
    padding: 10px 30px;
    /* Mehr rechts/links Padding für Scroll-Luft */
    gap: 15px;
    align-items: center;
    /* 'safe center' zentriert normalerweise, weicht aber auf 'start' aus, falls der Platz nicht reicht (verhindert links abgeschnittenen Content) */
    justify-content: safe center;
}

body.layout-bottom #teams-list {
    flex-direction: row;
    width: auto;
    gap: 15px;
    justify-content: safe center;
}

body.layout-bottom .team-card {
    min-width: 170px;
    width: clamp(170px, 13vw, 260px);
    height: clamp(100px, 14vh, 145px);
    margin: 0;
}

body.layout-bottom .streamer-card {
    min-width: 280px;
    /* Streamer brauchen mehr Platz fuer 16:9, skalieren die Hoehe aber mit */
    width: auto;
    height: clamp(120px, 16vh, 165px);
    /* Kameras wieder signifikant groeßer machen */
    aspect-ratio: 16 / 9;
}

body.layout-bottom .btn-add-team {
    min-width: 60px;
    width: clamp(60px, 5vw, 80px);
    height: clamp(100px, 14vh, 145px);
    /* An Kamera-Höhe anpassen */
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.layout-bottom .main-title {
    font-size: clamp(4em, 5vw, 6em);
    margin: 0;
    text-align: center;
}

body.layout-bottom .sub-title {
    margin-top: -5px;
    margin-right: -8px;
    /* Holt den leichten Überhang aus dem Standard-Layout zurück */
    text-align: right;
    justify-self: end;
    /* Zieht den Text passgenau an den rechten Rand der "qwizzle" Spalte */
}

body.layout-bottom .cat-header {
    font-size: 1.5em;
}

body.layout-bottom .card {
    font-size: 3.5em !important;
}


/* ================================================= */
/* === 23. LAYOUT: STREAMER (OBS / WEBCAM)        === */
/* ================================================= */

body.layout-streamer .container {
    padding: 20px;
}

body.layout-streamer .sidebar {
    width: 350px;
    min-width: 350px;
}

body.layout-streamer .team-card {
    aspect-ratio: 16 / 9;
    height: auto;
    min-height: 180px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0;
    background: rgba(10, 5, 20, 0.8);
    border: 2px dashed rgba(255, 255, 255, 0.15);
    overflow: hidden;
    position: relative;
}

body.layout-streamer .team-card::before {
    content: '📷 CAM SLOT';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgba(255, 255, 255, 0.1);
    font-size: 1.5em;
    font-weight: 900;
    pointer-events: none;
    z-index: 0;
}

body.layout-streamer .team-card:hover::before {
    color: rgba(255, 255, 255, 0.3);
}

body.layout-streamer .team-info {
    width: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
    padding: 10px 15px;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(108, 92, 231, 0.5);
    z-index: 5;
    text-align: left;
}

body.layout-streamer .team-name {
    font-size: 1.2em;
    max-width: 60%;
    margin: 0;
}

body.layout-streamer .score {
    font-size: 1.8em;
}

body.layout-streamer .players-row {
    position: absolute;
    bottom: 45px;
    right: 15px;
    z-index: 10;
}

body.layout-streamer .avatar {
    width: 35px;
    height: 35px;
    border-width: 2px;
}

body.layout-streamer .team-card.active-turn {
    background: rgba(0, 0, 0, 0.8) !important;
    border: 3px solid #ff00de;
}

body.layout-streamer .team-card.active-turn .team-info {
    background: rgba(255, 0, 222, 0.2);
}


/* ================================================= */
/* === 24. RESPONSIVE DESIGN                      === */
/* ================================================= */

/* Mittlere Auflösungen (< 1600px oder < 900px Höhe) */
@media screen and (max-width: 1600px),
screen and (max-height: 900px) {
    .grid {
        max-height: 80vh;
    }

    .sub-title {
        font-size: 0.8em;
    }
}

/* Kleine Laptops (< 1100px) */
@media screen and (max-width: 1100px) {
    body:not(.discord-activity) {
        zoom: 0.75;
    }

    .sidebar {
        width: 240px;
        min-width: 240px;
    }

    .modal-box {
        width: 95%;
        padding: 20px;
    }

    .question-box {
        padding: 15px;
    }

    #q-text {
        font-size: 1.8em;
    }

    .modal-body-wrapper {
        flex-direction: column;
        align-items: center;
        overflow-y: auto;
    }

    .buzzer-sidebar.host-layout {
        width: 100% !important;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: flex-start;
        gap: 10px;
        order: 2;
        padding: 15px;
        height: auto;
        min-height: 120px;
        max-height: 35vh;
        overflow-y: auto;
        padding-bottom: 40px;
    }

    .buzzer-sidebar.host-layout #host-sidebar-controls {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding-bottom: 10px;
        margin-bottom: 10px;
        width: 100%;
        gap: 15px;
    }

    .buzzer-sidebar.host-layout .os-buzzer-wrapper {
        width: auto;
    }

    .buzzer-sidebar.host-layout .os-buzzer-btn {
        width: 50px;
        height: 50px;
    }

    .buzzer-sidebar.host-layout #host-sidebar-controls .queue-display {
        display: none;
    }
}

/* Tablet (< 1024px) */
@media (max-width: 1024px) {
    .container {
        padding: 15px;
        gap: 20px;
    }

    .sidebar {
        width: 280px;
        min-width: 260px;
    }

    .sidebar-title {
        font-size: 2em;
    }

    .main-title {
        font-size: 3.5em;
    }

    .grid {
        padding: 15px;
        gap: 10px;
        aspect-ratio: auto;
        height: auto;
        flex-grow: 1;
    }

    .card {
        font-size: 2em !important;
    }

    .cat-header {
        font-size: 1.2em;
    }
}

/* Mobile (< 768px) */
@media (max-width: 768px) {
    .container {
        flex-direction: column;
        padding: 10px;
        height: auto;
        min-height: 100vh;
        overflow-y: auto;
    }

    .game-area {
        width: 100%;
        order: 1;
        padding: 5px;
        flex: 1 0 auto;
        min-height: 60vh;
    }

    .sidebar {
        order: 2;
        flex-direction: row;
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        justify-content: flex-start;
        align-items: center;
        padding: 15px;
        background: rgba(0, 0, 0, 0.4);
        gap: 15px;
        white-space: nowrap;
        scrollbar-width: none;
        -ms-overflow-style: none;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        border-right: none;
        margin-top: 20px;
        min-height: 100px;
    }

    .sidebar::-webkit-scrollbar {
        display: none;
    }

    .sidebar-title {
        display: none;
    }

    #teams-list {
        flex-direction: row;
        width: auto;
        gap: 15px;
    }

    .team-scroll {
        padding: 0;
        margin: 0;
        flex-direction: row;
        max-height: none;
        overflow: visible;
        width: auto;
    }

    .team-card {
        min-width: 220px;
        width: 220px;
        height: 70px;
        margin: 0;
    }

    .avatar {
        width: 45px;
        height: 45px;
        margin-right: -15px;
    }

    .team-info {
        padding-left: 20px;
        text-align: left;
    }

    .team-name {
        font-size: 1.1em;
    }

    .score {
        font-size: 1.5em;
    }

    .btn-add-team {
        min-width: 60px;
        width: 60px;
        height: 70px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        font-size: 1.5em;
    }

    .header-wrapper {
        margin-bottom: 20px;
    }

    .main-title {
        font-size: 2.5em;
        transform: none !important;
        animation: none;
        margin-bottom: 10px;
    }

    /* Room Code auf Mobile: Inline im Fluss */
    .room-code-display {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        transform: none !important;
        margin-top: 10px;
        flex-direction: row;
        gap: 10px;
        background: none;
        box-shadow: none;
        border: none;
        padding: 5px;
        justify-content: center;
    }

    .room-code-label {
        margin-bottom: 0;
        display: inline-block;
    }

    .room-code-value {
        font-size: 1.5em;
        display: inline-block;
    }

    .grid {
        display: flex;
        overflow-x: auto;
        padding-bottom: 20px;
        align-items: stretch;
        min-height: 400px;
    }

    .col {
        min-width: 140px;
    }

    .cat-header {
        font-size: 1em;
        white-space: normal;
        line-height: 1.2;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    .card {
        font-size: 1.8em !important;
        border-radius: 8px;
    }

    .top-controls {
        top: 10px;
        right: 10px;
        gap: 5px;
    }

    .ctrl-btn {
        width: 35px;
        height: 35px;
    }

    .ctrl-btn svg {
        width: 18px;
        height: 18px;
    }

    .host-display {
        display: none;
    }

    .modal-box {
        width: 95%;
        padding: 15px;
        max-height: 90vh;
        overflow-y: auto;
    }

    #q-text {
        font-size: 1.3em;
        margin: 15px 0;
    }

    .btn-group {
        flex-direction: column;
        width: 100%;
        gap: 10px;
    }

    .action-btn {
        width: 100%;
        margin: 0;
        padding: 12px;
    }

    .modal-btns {
        flex-direction: column-reverse;
    }

    .modal-header-badges {
        flex-wrap: wrap;
    }

    .close-x {
        top: 10px;
        right: 10px;
        width: 30px;
        height: 30px;
        font-size: 20px;
    }
}

/* ================================================= */
/* === 25. EVENT LOG SYSTEM                      === */
/* ================================================= */

/* Standard Layout: Als Popup schwebend */
.event-log-container {
    position: absolute;
    top: 80px;
    /* Unter den Top-Controls */
    right: 20px;
    width: 320px;
    height: 60vh;
    background: rgba(20, 0, 40, 0.95);
    border: 1px solid rgba(162, 155, 254, 0.3);
    border-radius: 15px;

    /* Geändert: Flex anlassen, aber über visibility/opacity verstecken */
    display: flex;
    flex-direction: column;
    z-index: 4000;
    backdrop-filter: blur(15px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
    overflow: hidden;

    /* --- DIE NEUE ANIMATION WIE BEIM THEME-SWITCHER --- */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: none;
}

.event-log-container.show {
    /* Sichtbar machen mit weichem Bounce-Effekt */
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.log-header {
    background: rgba(0, 0, 0, 0.3);
    padding: 12px 15px;
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    color: #a29bfe;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.9em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.log-header .close-x {
    position: static !important;
    width: 26px !important;
    height: 26px !important;
    font-size: 20px !important;
    background: rgba(255, 255, 255, 0.1);
}

.log-messages {
    flex: 1;
    padding: 15px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Einzelner Eintrag */
.log-msg {
    background: rgba(255, 255, 255, 0.05);
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 0.85em;
    line-height: 1.4;
    border-left: 4px solid #6c5ce7;
    /* Standardfarbe */
    animation: slideDownFade 0.3s ease-out;
}

.log-msg .log-time {
    font-size: 0.8em;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 4px;
    display: block;
}

.log-msg b {
    color: #fff;
}

/* Farbcodierung für verschiedene Events */
.log-msg.type-success {
    border-left-color: #00b894;
    background: rgba(0, 184, 148, 0.1);
}

.log-msg.type-danger {
    border-left-color: #d63031;
    background: rgba(214, 48, 49, 0.1);
}

.log-msg.type-warning {
    border-left-color: #fdcb6e;
    background: rgba(253, 203, 110, 0.1);
}

.log-msg.type-info {
    border-left-color: #0984e3;
    background: rgba(9, 132, 227, 0.1);
}

/* --- EVENT LOG SCROLLBAR (Basis & Default Neon) --- */
.log-messages::-webkit-scrollbar {
    width: 8px;
    /* Schön schmal */
}

.log-messages::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.log-messages::-webkit-scrollbar-thumb {
    background: rgba(162, 155, 254, 0.4);
    /* Standard Neon-Lila */
    border-radius: 4px;
}

.log-messages::-webkit-scrollbar-thumb:hover {
    background: rgba(162, 155, 254, 0.8);
}

/* Glass-Theme (falls du es direkt in der board.css hast) */
body.theme-glass .log-messages::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}

body.theme-glass .log-messages::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
}

body.theme-glass .log-messages::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.4);
}

/* ================================================= */
/* === FREE-FOR-ALL (FFA) MODE                    === */
/* ================================================= */

.ffa-mode .team-card.is-active::after {
    display: none !important;
    /* Hide the active turn glow */
}

/* Bottom Layout: wrapping so many players fit */
body.layout-bottom.ffa-mode .teams-grid {
    flex-wrap: wrap;
    justify-content: center;
}

body.layout-bottom.ffa-mode .team-card {
    min-width: 120px;
    max-width: 150px;
    flex: 1 1 130px;
    padding: 10px;
}

/* Sidebar Layout (Admin View, Standard, Streamer) */
.ffa-mode .sidebar #teams-list {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 0 5px;
}

.ffa-mode .sidebar .team-card {
    min-width: 0;
    max-width: none;
    padding: 8px 5px;
    margin-bottom: 0;
    overflow: visible;
}

.ffa-mode .team-name {
    font-size: 0.9em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ffa-mode .team-score {
    font-size: 1.2rem;
}

.ffa-mode .avatar {
    flex-shrink: 0;
    min-width: clamp(40px, 5vw, 70px);
    min-height: clamp(40px, 5vw, 70px);
    margin-right: 0;
}

/* Hide Layout Toggle in Streamer Mode */
body.is-streamer-mode .layout-control-wrapper {
    display: none !important;
}

/* ================================================= */
/* === FULLHD FIX: Streamer Mode Standard Layout  === */
/* === (Cams werden bei ≤1080px Höhe abgeschnitten) */
/* ================================================= */
@media (max-height: 1100px) {
    body.is-streamer-mode:not(.layout-bottom) .streamer-card {
        height: clamp(180px, 21vh, 210px);
        margin-bottom: 3px;
    }

    body.is-streamer-mode:not(.layout-bottom) .host-display {
        height: clamp(180px, 31vh, 210px);
    }

    body.is-streamer-mode:not(.layout-bottom) .team-scroll {
        max-height: 82vh;
    }

    body.is-streamer-mode.layout-bottom .host-display {
        height: clamp(130px, 19vh, 185px);
        width: clamp(200px, 60vw, 230px);
        min-width: unset;
    }
}

/* ================================================= */
/* === FULLHD FIX: Board Modals Scaledown (20%)   === */
/* ================================================= */
@media (max-width: 1920px),
(max-height: 1100px) {
    .modal-overlay .modal-body-wrapper {
        zoom: 0.8;
    }
}

/* ================================================= */
/* === FULLSCREEN IMAGE VIEWER                    === */
/* ================================================= */

.fullscreen-image-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(5, 0, 10, 0.95);
    backdrop-filter: blur(15px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeInOverlay 0.3s ease-out;
}

.fullscreen-image-container {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    animation: popInBox 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.fullscreen-image-container img {
    max-width: 100%;
    max-height: 90vh;
    border-radius: 15px;
    border: 3px solid #6c5ce7;
    box-shadow: 0 0 40px rgba(108, 92, 231, 0.6);
    object-fit: contain;
}

.fullscreen-image-container .close-x {
    position: absolute;
    top: -20px;
    right: -20px;
    width: 40px;
    height: 40px;
    background: #ff7675;
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
    box-shadow: 0 0 15px rgba(255, 118, 117, 0.8);
    display: flex !important;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    transition: transform 0.2s;
}

/* Force visible for players against high-specificity hiding rules in board.css */
body:not(.host-mode) .fullscreen-image-container .close-x {
    display: flex !important;
}

.fullscreen-image-container .close-x:hover {
    transform: scale(1.1);
}

/* Hover effect to indicate images are clickable on the board */
#media-area img,
.solution-media-container img {
    cursor: pointer;
    transition: transform 0.2s ease;
}

#media-area img:hover,
.solution-media-container img:hover {
    transform: scale(1.02);
}
/* ================================================= */
/* === ACTIVE TEAM PILL — GLASS THEME === */
/* ================================================= */
body.theme-glass .active-team-pill {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow:
            0 0 20px rgba(255, 255, 255, 0.06),
            0 4px 20px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

body.theme-glass .pill-name {
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

body.theme-glass .pill-label {
    color: rgba(255, 255, 255, 0.4);
}

body.theme-glass .pill-avatar,
body.theme-glass .pill-avatar-fallback {
    border-color: rgba(255, 255, 255, 0.3);
}

body.theme-glass .pill-avatar-fallback {
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.8);
}