.sq-quiz-wrapper{
    font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    background:linear-gradient(180deg,#020617 0%,#020617 60%,#020617 100%);
    color:#f9fafb;
    border-radius:24px;
    padding:16px;
    box-shadow:0 25px 50px -15px rgba(15,23,42,.9);
    max-width:900px;
    margin:0 auto;
    position:relative;
}

.sq-quiz-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:10px;
}

.sq-label{
    font-size:.75rem;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:#e5e7eb;
}

.sq-quiz-timer,.sq-quiz-score{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:.9rem;
}

#sq-timer-display,#sq-score-display{
    font-weight:700;
    font-variant-numeric:tabular-nums;
}

.sq-quiz-controls{
    display:flex;
    gap:8px;
}

.sq-btn{
    border:none;
    border-radius:999px;
    padding:6px 14px;
    font-size:.8rem;
    font-weight:600;
    letter-spacing:.08em;
    text-transform:uppercase;
    cursor:pointer;
    background:#111827;
    color:#f9fafb;
    transition:.15s ease-in-out;
}

.sq-btn-start{
    background:linear-gradient(135deg,#f97316,#ef4444);
}

.sq-btn-restart{
    background:linear-gradient(135deg,#22c55e,#15803d);
}

.sq-btn-music{
    background:linear-gradient(135deg,#4b5563,#6b7280);
}

.sq-btn-primary{
    background:linear-gradient(135deg,#facc15,#eab308);
    color:#111827;
}

.sq-btn:hover{
    transform:translateY(-1px);
    box-shadow:0 10px 25px -12px rgba(15,23,42,.9);
}

.sq-quiz-players{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:8px;
    margin-bottom:10px;
}

.sq-player-btn{
    border:none;
    border-radius:999px;
    padding:6px 8px;
    background:linear-gradient(135deg,#1d4ed8,#1e40af);
    color:#e5e7eb;
    font-size:.75rem;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:2px;
    cursor:pointer;
}

.sq-player-btn .sq-player-stats{
    font-size:.7rem;
}

.sq-player-btn.sq-player-active{
    background:linear-gradient(135deg,#ef4444,#b91c1c);
}

.sq-quiz-panorama-wrapper{
    border-radius:20px;
    overflow:hidden;
    border:1px solid rgba(148,163,184,.45);
    margin-bottom:10px;
    background:#020617;
}

.sq-quiz-panorama-iframe{
    width:100%;
    height:100%;
    border:none;
}

.sq-quiz-panorama-placeholder{
    padding:20px;
    text-align:center;
    color:#9ca3af;
    font-size:.9rem;
}

.sq-quiz-config{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:4px;
}

.sq-config-item{
    display:flex;
    flex-direction:column;
    gap:4px;
    font-size:.8rem;
}

.sq-config-item label{
    text-transform:uppercase;
    letter-spacing:.06em;
    color:#9ca3af;
}

.sq-config-item select{
    background:#020617;
    border-radius:999px;
    border:1px solid rgba(148,163,184,.7);
    color:#e5e7eb;
    padding:4px 10px;
    font-size:.8rem;
}

/* Modals */
.sq-modal{
    position:fixed;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(15,23,42,.8);
    z-index:9999;
}

.sq-modal-content{
    padding:16px 20px;
    border-radius:26px;
    box-shadow:0 25px 60px -20px rgba(15,23,42,.95);
    text-align:center;
}

/* Search card */
.sq-search-card{
    max-width:620px;
    width:90%;
    background:radial-gradient(circle at top,#1d4ed8 0,#020617 55%);
    border:1px solid rgba(129,140,248,.7);
}

#sq-search-text{
    margin-bottom:8px;
}

.sq-btn-search{
    background:#020617;
    min-width:230px;
    letter-spacing:.3em;
}

/* Question card */
.sq-question-card{
    max-width:720px;
    width:92%;
    background:radial-gradient(circle at top,#22c55e 0,#020617 60%);
    border:1px solid rgba(74,222,128,.85);
}

#sq-question-title{
    margin-bottom:8px;
    font-size:1.2rem;
}

#sq-question-content{
    font-size:.92rem;
    margin-bottom:10px;
}

.sq-answers-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin-bottom:8px;
}

.sq-answer-btn{
    border-radius:14px;
    padding:8px 10px;
    border:1px solid rgba(148,163,184,.7);
    background:#020617;
    color:#e5e7eb;
    font-size:.85rem;
    cursor:pointer;
    transition:.12s;
}

.sq-answer-btn:hover{
    transform:translateY(-1px);
}

.sq-answer-btn.sq-answer-correct{
    background:linear-gradient(135deg,#22c55e,#16a34a);
    border-color:transparent;
    color:#052e16;
}

.sq-answer-btn.sq-answer-wrong{
    background:linear-gradient(135deg,#dc2626,#7f1d1d);
    border-color:transparent;
    animation:sq-shake .35s ease-in-out;
}

.sq-question-feedback{
    min-height:22px;
    font-size:.8rem;
    margin-bottom:6px;
}

/* Winner card */
.sq-winner-card{
    max-width:520px;
    width:90%;
    background:radial-gradient(circle at top,#facc15 0,#0f172a 62%);
    border:1px solid rgba(250,204,21,.9);
}

#sq-winner-title{
    font-size:1.4rem;
    margin-bottom:6px;
}

/* Confetti */
#sq-confetti-container{
    pointer-events:none;
    position:fixed;
    inset:0;
    overflow:hidden;
    z-index:9000;
}

.sq-confetti-piece{
    position:absolute;
    top:-10%;
    width:8px;
    height:14px;
    background:linear-gradient(135deg,#f97316,#22c55e,#3b82f6,#eab308);
    border-radius:3px;
    opacity:.9;
    animation:sq-confetti-fall linear infinite;
}

/* Animations */
@keyframes sq-shake{
    0%,100%{transform:translateX(0);}
    20%{transform:translateX(-4px);}
    40%{transform:translateX(4px);}
    60%{transform:translateX(-2px);}
    80%{transform:translateX(2px);}
}

@keyframes sq-confetti-fall{
    0%{transform:translateY(0) rotateZ(0deg);opacity:1;}
    100%{transform:translateY(120vh) rotateZ(360deg);opacity:0;}
}

@media(max-width:768px){
    .sq-quiz-wrapper{
        max-width:100%;
        border-radius:0;
    }
    .sq-quiz-players{
        grid-template-columns:repeat(3,1fr);
    }
    .sq-answers-grid{
        grid-template-columns:1fr;
    }
}


/* Überschrift in der Frage ausblenden (der Nutzer möchte keinen Titel sehen) */
#sq-question-title{
    display:none;
}


/* Close button for winner popup */
.sq-winner-card{
    position:relative;
}

.sq-modal-close{
    position:absolute;
    top:8px;
    right:10px;
    width:26px;
    height:26px;
    border-radius:999px;
    border:none;
    background:rgba(15,23,42,.85);
    color:#e5e7eb;
    font-size:16px;
    line-height:1;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 6px 14px -6px rgba(15,23,42,.8);
}

.sq-modal-close:hover{
    background:#111827;
}