/* lern.de Live-Quiz – Styles, Grundfarben angelehnt an bestehendes Theme (Grün/Grau) */

.livequiz-box {
    max-width: 900px;
    margin: 40px auto;
    padding: 32px;
    font-family: Arial, Helvetica, Verdana, sans-serif;
    color: #333;
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 10px 35px rgba(0,0,0,0.08);
}

.livequiz-box h2 {
    margin: 0 0 24px 0;
    font-size: 26px;
    font-weight: 800;
}

.lq-field { margin-bottom: 18px; }
.lq-field label { display:block; font-weight:bold; margin-bottom:6px; }
.lq-field select,
.lq-field input[type="text"] {
    width:100%; padding:12px 14px; border:1px solid #dddddd; border-radius:10px; font-size:16px;
    background: #ffffff;
}
.lq-field input[type="range"] {
    width:100%;
    -webkit-appearance: none;
    appearance: none;
    height: 8px;
    border-radius: 6px;
    background: #eeeeee;
    outline: none;
}
.lq-field input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px; height: 20px; border-radius: 50%;
    background: #8bc53f; cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.25);
}
.lq-field input[type="range"]::-moz-range-thumb {
    width: 20px; height: 20px; border-radius: 50%; border: none;
    background: #8bc53f; cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.25);
}

.lq-btn {
    display:inline-block; padding:15px 24px; border:none; border-radius:10px;
    font-size:17px; font-weight:800; text-transform:uppercase; cursor:pointer; margin-top:8px;
}
.lq-btn-primary { background:#8bc53f; color:#fff; box-shadow: 0 4px 0 rgba(0,0,0,0.35); }
.lq-btn-primary:hover { background:#79ad33; }
.lq-btn-primary:active { box-shadow: 0 1px 0 rgba(0,0,0,0.35); transform: translateY(3px); }

.lq-setup-card {
    padding: 20px;
    border-radius: 14px;
    background: #f7f7f7;
}
.lq-setup-card .lq-btn-primary { margin-top: 4px; }

.livequiz-hinweis { padding:16px 18px; background:#f1f8e8; border-left:5px solid #8bc53f; border-radius:14px; line-height:1.5; }

.lq-error { color:#c0392b; font-weight:bold; }
.lq-sub { color:#666; }

/* Lobby */
.lq-lobby-grid { display:flex; gap:32px; flex-wrap:wrap; align-items:flex-start; }
.lq-lobby-qr { text-align:center; }
.lq-code-display { font-size:22px; margin-top:12px; letter-spacing:2px; }
.lq-lobby-participants { flex:1; min-width:240px; }

.lq-avatar-list { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px; }
.lq-avatar-list li {
    display:flex; align-items:center; gap:8px; background:#f0f7e6;
    padding:8px 14px; border-radius:20px; font-weight:bold;
}
.lq-avatar { font-size:22px; }

/* Avatar picker (Lernende) */
.lq-avatar-picker { display:grid; grid-template-columns:repeat(6,1fr); gap:8px; }
.lq-avatar-opt {
    font-size:30px; padding:10px; border:2px solid #eee; border-radius:10px;
    background:#fff; cursor:pointer;
}
.lq-avatar-opt.lq-avatar-selected { border-color:#8bc53f; background:#f0f7e6; }

/* Frage / Timer */
.lq-progress { font-weight:bold; color:#777; margin-bottom:8px; }
.lq-timer-bar { height:10px; background:#eee; border-radius:6px; overflow:hidden; margin:12px 0; }
#lq-timer-fill, #lq-s-timer-fill {
    height:100%; background:#8bc53f; width:100%; transition:width 0.3s linear;
}

.lq-answers-grid {
    list-style:none; margin:16px 0; padding:0;
    display:grid; grid-template-columns:1fr 1fr; gap:12px;
}
.lq-answers-grid-student { display:grid; }
.lq-answer-opt {
    padding:18px; border-radius:10px; font-size:17px; text-align:left;
    border:none; cursor:pointer; color:#fff;
}
.lq-opt-a { background:#e74c3c; }
.lq-opt-b { background:#2980b9; }
.lq-opt-c { background:#f39c12; }
.lq-opt-d { background:#27ae60; }
button.lq-answer-opt:hover { filter:brightness(1.08); }

/* Auflösung */
.lq-reveal-correct { font-size:20px; background:#eafbe0; padding:14px; border-radius:8px; }
.lq-erklaerung-box {
    background:#f4f4f4; border-left:4px solid #8bc53f; padding:14px 18px;
    margin:14px 0; border-radius:0 8px 8px 0; line-height:1.5;
}

/* Leaderboard */
.lq-leaderboard { list-style:none; margin:0; padding:0; }
.lq-leaderboard li {
    display:flex; align-items:center; gap:12px; padding:10px 14px;
    border-bottom:1px solid #eee;
}
.lq-leaderboard .lq-name { flex:1; font-weight:bold; }
.lq-leaderboard .lq-score { color:#8bc53f; font-weight:bold; }

/* Podium */
.lq-podium { display:flex; align-items:flex-end; justify-content:center; gap:16px; margin:24px 0; }
.lq-podium-place { text-align:center; padding:16px; border-radius:10px 10px 0 0; color:#fff; min-width:110px; }
.lq-place-1 { background:#f1c40f; height:180px; order:2; }
.lq-place-2 { background:#bdc3c7; height:140px; order:1; }
.lq-place-3 { background:#cd853f; height:110px; order:3; }
.lq-podium-avatar { font-size:34px; }
.lq-podium-name { font-weight:bold; margin-top:6px; }
.lq-podium-rank { font-size:28px; font-weight:bold; margin-top:6px; }

@media (max-width: 600px) {
    .lq-answers-grid { grid-template-columns:1fr; }
    .lq-avatar-picker { grid-template-columns:repeat(4,1fr); }
}