/* Kuis Kelas: gaya bersama (panel soal, bilah skor). Game memakai awalan kelas masing-masing untuk gaya sendiri. */
.kk-area { position: relative; width: 100%; height: 100%; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.kk-modal { position: absolute; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; padding: 10px; background: rgba(15, 23, 42, .55); }
.kk-panel { width: min(760px, 100%); max-height: 100%; overflow: auto; background: #fff; border-radius: 20px; padding: 14px 16px 16px; box-shadow: 0 18px 50px rgba(15, 23, 42, .35); }
.kk-kepala { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.kk-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: var(--c, #0284c7); color: #fff; font-weight: 800; font-size: .95rem; }
.kk-judulsoal { color: #475569; font-weight: 700; font-size: .95rem; }
.kk-waktu { margin-left: auto; color: #0f172a; font-weight: 700; }
.kk-waktu b { font-size: 1.3rem; }
.kk-bar { height: 8px; border-radius: 999px; background: #e2e8f0; overflow: hidden; margin-bottom: 10px; }
.kk-bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #10b981, #fbbf24, #f43f5e); transition: width .2s linear; }
.kk-tanya { margin: 4px 0 12px; font-size: clamp(1.15rem, 2.6vw, 1.7rem); font-weight: 800; line-height: 1.3; color: #0f172a; overflow-wrap: anywhere; }
.kk-opsi { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kk-opsi.dua { grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .kk-opsi { grid-template-columns: 1fr; } }
.kk-pilih { display: flex; align-items: center; gap: 10px; text-align: left; padding: 10px 12px; min-height: 52px; border: 2px solid #cbd5e1; border-radius: 14px; background: #f8fafc; color: #0f172a; font: inherit; font-weight: 700; font-size: clamp(1rem, 2vw, 1.3rem); cursor: pointer; }
.kk-pilih:hover:not(:disabled) { border-color: #0284c7; background: #e0f2fe; }
.kk-pilih:disabled { cursor: default; }
.kk-huruf { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #0284c7; color: #fff; font-weight: 800; }
.kk-teks { overflow-wrap: anywhere; }
.kk-pilih.benar { border-color: #059669; background: #d1fae5; }
.kk-pilih.benar .kk-huruf { background: #059669; }
.kk-pilih.salah { border-color: #be123c; background: #ffe4e6; }
.kk-pilih.salah .kk-huruf { background: #be123c; }
.kk-info { min-height: 1.4em; margin: 10px 0 0; font-weight: 800; }
.kk-info.ok { color: #059669; }
.kk-info.bad { color: #be123c; }
.kk-skor { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; padding: 6px 8px; }
.kk-skor .kk-tim { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: #fff; border: 3px solid var(--c); font-weight: 800; color: #0f172a; }
.kk-skor .kk-tim.aktif { background: var(--c); color: #fff; }
.kk-skor .kk-tim small { font-weight: 700; opacity: .85; }
@media (max-height: 460px) { .kk-panel { padding: 8px 12px 10px; } .kk-tanya { margin: 2px 0 8px; font-size: 1.05rem; } .kk-pilih { min-height: 40px; padding: 6px 10px; } .kk-opsi { gap: 6px; } }