/* ========================================
   Buru Gelembung: gelembung suku (Sendiri / Duel) - memakai kerangka kamera
   kamera-dasar.css + camera-stage.css. Sengaja TANPA filter warna merah/hijau
   di atas kamera; sisi pemain dibedakan biru muda (kiri) & kuning (kanan).
   ======================================== */

body.gk-page .hd-status-badge { top: auto; bottom: 14px; }   /* tidak menutupi panel soal */

/* ---------- Layar setup: memakai gaya bersama (.setup-card, .jenjang-btn, .question-count-btn, .tmr-*) ---------- */
.gk-page .setup-section .jenjang-picker { margin-bottom: 4px; }
.gk-btn-count { display: block; margin-top: 2px; font-style: normal; font-size: 11px; font-weight: 600; color: var(--text-muted); }
.jenjang-btn.active .gk-btn-count { color: #ffd9ea; }
.gk-note-box { margin: 10px 0 12px; font-size: 13.5px; color: var(--text-secondary); }
.gk-page #gkPanelGambar .jenjang-picker { margin-top: 2px; }

/* ---------- HUD di atas kamera (tidak menangkap klik) ---------- */
.gk-hud { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.gk-qpanel {
    position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: min(60%, 760px);
    padding: 10px 18px 12px; text-align: center; border-radius: 18px; z-index: 3;
    background: rgba(12, 10, 32, 0.84); border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(0, 217, 255, 0.25);
}
body.gk-duel .gk-qpanel { width: min(46%, 640px); }
.gk-qmeta { display: flex; justify-content: space-between; margin-bottom: 4px; font: 600 12.5px Poppins, sans-serif; color: #ffd166; }
.gk-qtext { margin: 0 0 8px; font: 700 clamp(15px, 1.7vw, 24px)/1.3 Poppins, sans-serif; color: #fff; }
.gk-timebar { height: 6px; border-radius: 99px; background: rgba(255, 255, 255, 0.16); overflow: hidden; }
.gk-timebar i { display: block; height: 100%; transform-origin: left; background: linear-gradient(90deg, #00d9ff, #ffd166); }

.gk-score {
    position: absolute; top: 66px; z-index: 3; min-width: 128px; padding: 5px 14px; text-align: center;
    border-radius: 14px; background: rgba(12, 10, 32, 0.84); border: 2px solid var(--c);
}
.gk-score--l { left: 14px; --c: #00d9ff; }
.gk-score--r { right: 14px; --c: #ffb703; display: none; }
body.gk-duel .gk-score--r { display: block; }
.gk-score-name { display: block; font: 600 11.5px Poppins, sans-serif; color: var(--c); }
.gk-score b { font: 800 26px/1.1 Poppins, sans-serif; color: #fff; }

/* Sisi yang sudah salah menjawab: dikunci sampai soal berikutnya (netral, bukan merah) */
.gk-lock {
    position: absolute; top: 0; bottom: 0; z-index: 2; display: none; align-items: center; justify-content: center;
    background: rgba(8, 10, 28, 0.55); font: 700 22px Poppins, sans-serif; color: #fff; text-shadow: 0 2px 10px #000;
    opacity: 0; transition: opacity 0.2s;
}
body.gk-duel .gk-lock { display: flex; }
.gk-lock.on { opacity: 1; }
.gk-lock--l { left: 0; width: calc(50% - 2px); }
.gk-lock--r { right: 0; width: calc(50% - 2px); }

/* ---------- Popup penjelasan & hasil ---------- */
.gk-modal {
    position: absolute; inset: 0; z-index: 8; display: flex; align-items: center; justify-content: center;
    padding: 16px; background: rgba(5, 8, 18, 0.62); overflow: auto;
}
.gk-modal.hidden { display: none; }
.gk-card {
    display: flex; flex-direction: column; width: min(640px, 100%); max-height: 100%; overflow-x: hidden; overflow-y: auto;
    padding: 20px 22px; border-radius: 20px; color: #fff;
    background: linear-gradient(160deg, rgba(30, 22, 62, 0.97), rgba(9, 7, 24, 0.98));
    border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
}
.gk-card-head { font: 800 22px Poppins, sans-serif; text-align: center; color: #ffd166; }
.gk-ans { display: flex; align-items: center; gap: 14px; margin: 12px 0 6px; }
.gk-ans img { width: 92px; height: 92px; flex: none; object-fit: contain; border-radius: 50%; background: rgba(255, 255, 255, 0.08); border: 3px solid #ffd166; }
.gk-ans b { display: block; font: 700 20px Poppins, sans-serif; }
.gk-ans small { color: var(--text-muted); font-size: 13px; }
.gk-ex-text { margin: 8px 0 14px; font: 400 15px/1.6 Inter, sans-serif; color: #e4e0ff; }
/* Tombol ringkas & berukuran tetap; denyut hanya lewat bayangan (bukan scale) supaya tidak memunculkan scrollbar */
.gk-next-btn { align-self: center; width: min(100%, 340px); max-width: 100%; text-align: center; padding: 9px 18px; font-size: 14px; white-space: normal; }
.gk-next-btn--waiting { animation: gk-wait 1.2s ease-in-out infinite; }
@keyframes gk-wait { 0%, 100% { box-shadow: 0 0 0 0 rgba(0, 217, 255, 0); } 50% { box-shadow: 0 0 0 4px rgba(0, 217, 255, 0.35); } }

.gk-res-scores { display: flex; gap: 12px; justify-content: center; margin: 14px 0 6px; }
.gk-res-box { flex: 1; max-width: 220px; padding: 12px; text-align: center; border-radius: 16px; border: 2px solid var(--c); background: rgba(255, 255, 255, 0.06); }
.gk-res-box.win { background: rgba(255, 209, 102, 0.16); box-shadow: 0 0 24px rgba(255, 209, 102, 0.35); }
.gk-res-box span { display: block; font: 600 13px Poppins, sans-serif; color: var(--c); }
.gk-res-box b { display: block; font: 800 36px/1.2 Poppins, sans-serif; }
.gk-res-box small { color: var(--text-muted); }
.gk-res-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.gk-card--result .gk-ex-text { text-align: center; }

/* ---------- Layar setup: Bank Soal ---------- */
.gk-bank { margin-top: 8px; }
.gk-bank.hidden { display: none; }
#gkPanelGambar.hidden { display: none; }
.gk-bank .bsp { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.gk-bank .bsp-summary { grid-column: 1 / -1; }
.gk-bank-note--warn { color: #ffd166; }


/* ---------- Gestur: sentuh tombol dengan jari (tahan sebentar) ---------- */
/* Lapisan titik jari DI ATAS popup (kanvas utama ada di bawah popup) */
.gk-pointer-layer { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 9; pointer-events: none; }
/* Isi bar kemajuan di dalam tombol: --dwell (0..1) diatur js/game-kamera.js */
.gk-gest { position: relative; overflow: hidden; }
.gk-gest::after {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; pointer-events: none;
    width: calc(var(--dwell, 0) * 100%); background: rgba(255, 255, 255, 0.34);
}
.gk-gesture-hint {
    display: none; margin: 10px 0 0; text-align: center; font: 600 12.5px Poppins, sans-serif; color: #7fe9ff;
}
.gk-gesture-hint.on { display: block; }

/* ---------- Kapsul jawaban (Bank Soal) tergambar di kanvas; catatan di sini hanya untuk popup jawaban teks ---------- */
.gk-ans--text .gk-ans-label { font: 800 20px Poppins, sans-serif; }

/* Soal panjang (umumnya dari Bank Soal): panel melebar & hurufnya sedikit mengecil */
.gk-qpanel--long { width: min(78%, 980px); }
.gk-qpanel--long .gk-qtext { font-size: clamp(13px, 1.35vw, 19px); }
.gk-qpanel--xlong .gk-qtext { font-size: clamp(12px, 1.05vw, 15px); line-height: 1.3; }
body.gk-duel .gk-qpanel--long { width: min(62%, 860px); }

/* ---------- Menjawab dengan CUBIT: panduan di menu awal + petunjuk di arena ---------- */
.gk-cubit-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin: 6px 0 4px; }
.gk-cubit-step {
    display: grid; gap: 3px; justify-items: center; text-align: center; padding: 12px 10px;
    border-radius: 14px; border: 2px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.05);
}
.gk-cubit-step span { font-size: 30px; line-height: 1.1; }
.gk-cubit-step b { font: 800 15px/1.2 Poppins, sans-serif; color: #fff; }
.gk-cubit-step small { color: var(--text-secondary); font-size: 12px; line-height: 1.4; }
.gk-cubit-steps[hidden] { display: none; }
.gk-pinch-tip {
    position: absolute; left: 50%; bottom: 62px; transform: translateX(-50%); z-index: 3; display: none;
    max-width: min(92%, 640px); padding: 7px 14px; border-radius: 999px; text-align: center;
    font: 600 12.5px/1.35 Poppins, sans-serif; color: #e8fbff; background: rgba(8, 12, 30, 0.72);
    border: 1px solid rgba(0, 217, 255, 0.5); pointer-events: none;
}
.gk-pinch-tip.on { display: block; }