/* ========================================
   Tampilan adaptif permainan berkamera (Buru Gelembung, Jelajah Dunia, Pilot Cerdas, Pilih Sisi, Tiru Gaya,
   Maestro Muda). Dimuat PALING AKHIR di tiap halaman supaya menang atas aturan halamannya sendiri.
   Pasangannya: js/layar-penuh.js (tombol Layar Penuh, pemecah ikon/label tombol, petunjuk putar HP).

   Masalah yang dipecahkan: di HP mendatar (±914x360 px, "6,6 inci") bilah menu (±60 px) + baris tombol (±50 px) +
   panel soal + kotak skor + kotak jawaban menutupi hampir seluruh gambar kamera. Di layar PENDEK (tinggi <= 640 px):
     - bilah menu disembunyikan selama bermain (tombol Menu ada lagi begitu permainan dihentikan),
     - kamera memenuhi seluruh layar sampai ke tepi,
     - tombol Hentikan/Jeda/Bantuan/Layar Penuh menjadi ikon bulat kecil yang melayang di pojok kanan atas,
     - panel soal, skor, status, dan popup diperkecil mengikuti tinggi layar,
     - kotak pose Tiru Gaya pindah ke tepi kiri/kanan supaya bagian tengah kamera (tempat pemain berdiri) lapang.
   Memakai satuan tinggi layar (vh/dvh) + media query ketinggian - bukan container query - supaya tetap jalan di
   WebView TV/HP lama.
   ======================================== */

/* ---------- 1. Tombol Layar Penuh di bilah menu atas ---------- */

button.app-tab--full {
    flex: 0 0 auto;
    gap: 8px;
    padding: 7px 14px;
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--border-light);
    color: var(--text-primary);
    cursor: pointer;
    line-height: normal;
    -webkit-appearance: none;
    appearance: none;
}

button.app-tab--full:hover { background: rgba(255, 255, 255, 0.1); border-color: var(--accent); }
button.app-tab--full:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button.app-tab--full.cam-full-btn--on { border-color: var(--accent); color: var(--accent); }
.app-tab--full .cam-ico { flex: none; }

@media (max-width: 760px) {
    .app-tab--full .cam-lbl {
        position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
    }
    button.app-tab--full { padding: 8px 11px; }
}

/* ---------- 2. Baris tombol di atas kamera: ikon + label ---------- */

.cam-toolbar .btn { gap: 7px; }
.cam-toolbar .cam-ico { flex: none; line-height: 1; }
.cam-toolbar .cam-badge { display: none; }
/* Tombol layar penuh sudah ada di bilah menu; di baris ini baru perlu saat bilah menu disembunyikan (lihat di bawah) */
.cam-toolbar .cam-full-btn { display: none; }
.cam-toolbar .cam-full-btn--on { border-color: var(--accent); color: var(--accent); }

/* Layar pendek ATAU sempit: tombol berupa ikon bulat (nama tombol ada di title/aria-label) */
@media (max-height: 640px) and (min-aspect-ratio: 1/1), (max-width: 560px) {
    .cam-toolbar:not(.dj-top-actions) { gap: 6px; flex-wrap: nowrap; }
    .cam-toolbar:not(.dj-top-actions) .btn {
        position: relative;
        flex: none;
        width: var(--cb, 38px);
        height: var(--cb, 38px);
        min-width: 0;
        padding: 0;
        gap: 0;
        border-radius: 50%;
        font-size: 16px;
    }
    .cam-toolbar:not(.dj-top-actions) .cam-lbl {
        position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
    }
    /* angka (mis. jumlah jari aktif di Jelajah Dunia) tetap terbaca sebagai lencana kecil */
    .cam-toolbar:not(.dj-top-actions) .cam-badge {
        display: block; position: absolute; right: -3px; bottom: -3px; min-width: 16px; height: 16px; padding: 0 3px;
        border-radius: 8px; box-sizing: border-box; background: var(--accent); color: #041226;
        font: 800 10px/16px Poppins, sans-serif; text-align: center; text-transform: none; letter-spacing: 0;
    }
}

/* ---------- 3. Layar pendek (HP mendatar, jendela rendah): kamera memenuhi layar ---------- */

@media (max-height: 640px) and (min-aspect-ratio: 1/1) {
    body.cam-stage-active {
        --cb: clamp(30px, 9vh, 38px);               /* sisi tombol bulat */
        --cm: 6px;                                   /* jarak ke tepi layar */
        --row2: calc(var(--cm) + var(--cb) + 6px);   /* baris kedua HUD (di bawah deretan tombol) */
        --side: calc(var(--cb) * 4 + 34px);          /* lebar gugus tombol kanan (4 ikon) + celah: ruang yang disisakan panel soal */
    }

}

/* Peramban yang mendukung satuan dvh (tinggi layar yang MEMANG terlihat, tanpa bilah alamat): ukuran tombol memakai itu */
@supports (height: 1dvh) {
    @media (max-height: 640px) and (min-aspect-ratio: 1/1) {
        body.cam-stage-active { --cb: clamp(30px, 9dvh, 38px); }
    }
}

@media (max-height: 640px) and (min-aspect-ratio: 1/1) {
    /* Bilah menu disembunyikan, kamera sampai ke tepi layar */
    body.cam-stage-active .app-tabs { display: none; }
    body.cam-stage-active .main-content { padding: 0; }
    body.cam-stage-active .hd-stage,
    body.cam-stage-active .qk-game-wrap { position: relative; gap: 0; }
    body.cam-stage-active .hd-camera-wrap,
    body.cam-stage-active .qk-camera-stage { border: 0; border-radius: 0; box-shadow: none; }

    /* Deretan tombol melayang di pojok kanan atas kamera */
    body.cam-stage-active .cam-toolbar:not(.dj-top-actions) {
        position: absolute;
        top: var(--cm);
        right: max(var(--cm), env(safe-area-inset-right, 0px));
        z-index: 40;
        justify-content: flex-end;
        gap: 5px;
    }
    body.cam-stage-active .cam-toolbar:not(.dj-top-actions) .cam-full-btn { display: inline-flex; }
    body.cam-stage-active .cam-toolbar:not(.dj-top-actions) .btn,
    body.cam-stage-active .hd-switch-cam,
    body.cam-stage-active .hd-flip-mirror,
    body.cam-stage-active .hd-skeleton-btn,
    body.cam-stage-active .qk-switch-cam,
    body.cam-stage-active .qk-flip-mirror {
        background: rgba(8, 12, 30, 0.78);
        border: 1px solid rgba(255, 255, 255, 0.3);
        color: #fff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    }
    body.cam-stage-active .cam-toolbar:not(.dj-top-actions) .btn-danger { background: rgba(150, 12, 52, 0.86); border-color: rgba(255, 120, 155, 0.7); }
    body.cam-stage-active .cam-toolbar:not(.dj-top-actions) .cam-pause-btn--paused {
        background: linear-gradient(135deg, var(--primary), var(--secondary)); border-color: transparent;
    }
    body.cam-stage-active .cam-toolbar:not(.dj-top-actions) .cam-full-btn--on { border-color: var(--accent); color: var(--accent); }

    /* Tombol bulat kecil di pojok kiri atas (ganti kamera / balik gambar / kerangka tangan) */
    body.cam-stage-active .hd-switch-cam,
    body.cam-stage-active .hd-flip-mirror,
    body.cam-stage-active .hd-skeleton-btn,
    body.cam-stage-active .qk-switch-cam,
    body.cam-stage-active .qk-flip-mirror {
        top: var(--cm);
        width: var(--cb);
        height: var(--cb);
        font-size: 15px;
    }
    body.cam-stage-active .hd-switch-cam,
    body.cam-stage-active .qk-switch-cam { left: max(var(--cm), env(safe-area-inset-left, 0px)); }
    body.cam-stage-active .hd-flip-mirror,
    body.cam-stage-active .qk-flip-mirror { left: calc(max(var(--cm), env(safe-area-inset-left, 0px)) + var(--cb) + 6px); }
    body.cam-stage-active .hd-skeleton-btn { left: calc(max(var(--cm), env(safe-area-inset-left, 0px)) + (var(--cb) + 6px) * 2); }

    /* Lencana status ("Tangan terdeteksi", pesan galat): kecil, di tengah atas; di Buru Gelembung & Pilot di tengah bawah */
    body.cam-stage-active .hd-status-badge {
        top: var(--cm);
        padding: 4px 12px;
        font-size: 11px;
        line-height: 1.25;
        max-width: calc(100% - 2 * (var(--cb) * 6 + 40px));
        white-space: normal;
        text-align: center;
    }
    body.cam-stage-active.gk-page .hd-status-badge { top: auto; bottom: 5px; max-width: 74%; }

    /* Lapisan "Dijeda" */
    body.cam-stage-active .cam-pause-card { padding: 10px 22px; border-radius: 14px; }
    body.cam-stage-active .cam-pause-icon { font-size: 28px; }
    body.cam-stage-active .cam-pause-title { margin-top: 4px; font-size: 17px; }
    body.cam-stage-active .cam-pause-hint { margin-top: 3px; font-size: 12px; }

    /* Popup Bantuan: muat dalam layar pendek */
    .hd-help-overlay { padding: 8px; }
    .hd-help-modal { padding: 14px 18px 16px; border-radius: 14px; }
    .hd-help-modal h2 { margin-bottom: 8px; font-size: 16px; }
    .hd-help-modal ol { gap: 5px; margin-bottom: 12px; font-size: 12.5px; line-height: 1.45; }
    .hd-help-modal .btn { padding: 8px 16px; }

    /* Tombol musik melayang: lebih kecil & tidak menutupi jawaban di pojok kanan bawah */
    body.cam-stage-active .mp-widget { right: 8px; bottom: 8px; gap: 6px; }
    body.cam-stage-active .mp-toggle-btn { width: 34px; height: 34px; font-size: 15px; }
    body.cam-stage-active .mp-panel {
        width: 250px; padding: 12px 14px; max-height: calc(100vh - 64px); overflow-y: auto;
    }

    /* ----- Buru Gelembung & Pilot Cerdas: panel soal, skor, popup ----- */
    body.cam-stage-active .gk-qpanel,
    body.cam-stage-active.gk-duel .gk-qpanel,
    body.cam-stage-active .gk-qpanel--long,
    body.cam-stage-active.gk-duel .gk-qpanel--long {
        top: var(--cm);
        width: calc(100% - 2 * var(--side));
        min-width: 200px;
        max-width: 760px;
        padding: 5px 12px 7px;
        border-radius: 12px;
    }
    body.cam-stage-active .gk-qmeta { margin-bottom: 2px; font-size: 11px; }
    body.cam-stage-active .gk-qtext { margin: 0 0 4px; font-size: clamp(12px, 3.9vh, 16px); line-height: 1.25; }
    body.cam-stage-active .gk-qpanel--long .gk-qtext { font-size: clamp(11.5px, 3.4vh, 14px); }
    body.cam-stage-active .gk-qpanel--xlong .gk-qtext { font-size: clamp(10.5px, 3vh, 12.5px); line-height: 1.22; }
    body.cam-stage-active .gk-timebar { height: 4px; }

    body.cam-stage-active .gk-score { top: var(--row2); min-width: 0; padding: 1px 10px 2px; border-radius: 10px; }
    body.cam-stage-active .gk-score--l { left: max(var(--cm), env(safe-area-inset-left, 0px)); }
    body.cam-stage-active .gk-score--r { right: max(var(--cm), env(safe-area-inset-right, 0px)); }
    body.cam-stage-active .gk-score-name { font-size: 10px; line-height: 1.2; }
    body.cam-stage-active .gk-score b { font-size: 18px; line-height: 1.1; }

    body.cam-stage-active .gk-lock { font-size: 14px; }
    body.cam-stage-active .gk-pinch-tip { bottom: 46px; max-width: 72%; padding: 4px 11px; font-size: 11px; line-height: 1.3; }

    body.cam-stage-active .gk-modal { padding: 8px; }
    body.cam-stage-active .gk-card { width: min(560px, 100%); padding: 10px 16px; border-radius: 14px; }
    body.cam-stage-active .gk-card-head { font-size: 17px; }
    body.cam-stage-active .gk-ans { gap: 10px; margin: 5px 0 3px; }
    body.cam-stage-active .gk-ans img { width: 54px; height: 54px; border-width: 2px; }
    body.cam-stage-active .gk-ans b { font-size: 15px; }
    body.cam-stage-active .gk-ans small { font-size: 11.5px; }
    body.cam-stage-active .gk-ans--text .gk-ans-label { font-size: 16px; }
    body.cam-stage-active .gk-ex-text { margin: 4px 0 8px; font-size: 12.5px; line-height: 1.45; }
    body.cam-stage-active .gk-next-btn { padding: 7px 14px; font-size: 12.5px; }
    body.cam-stage-active .gk-gesture-hint { margin-top: 6px; font-size: 11px; }
    body.cam-stage-active .gk-res-scores { gap: 8px; margin: 8px 0 4px; }
    body.cam-stage-active .gk-res-box { padding: 6px 8px; border-radius: 12px; }
    body.cam-stage-active .gk-res-box span { font-size: 11.5px; }
    body.cam-stage-active .gk-res-box b { font-size: 24px; }
    body.cam-stage-active .gk-res-btns .btn { padding: 8px 14px; font-size: 12.5px; }

    /* ----- Pilot Cerdas: kondisi pesawat, penanda genggaman, popup ----- */
    /* Kondisi pesawat di KIRI (di bawah kotak nilai): sisi kanan adalah jalur kapsul jawaban yang meluncur masuk */
    body.cam-stage-active .pl-status { top: calc(var(--row2) + 44px); right: auto; left: max(var(--cm), env(safe-area-inset-left, 0px)); width: 68px; gap: 2px; padding: 4px 5px 5px; border-radius: 10px; border-width: 2px; }
    body.cam-stage-active .pl-status img { width: 52px; }
    body.cam-stage-active .pl-status-text { gap: 3px; font-size: 10px; }
    body.cam-stage-active .pl-hp i { width: 9px; height: 5px; }
    body.cam-stage-active .pl-grip { bottom: 46px; gap: 8px; padding: 4px 12px; font-size: 12px; border-width: 2px; }
    body.cam-stage-active .pl-grip-ico { font-size: 16px; }
    body.cam-stage-active .pl-grip-bar { width: 40px; height: 5px; }
    body.cam-stage-active .pl-modal { padding: 6px 8px 8px; }
    body.cam-stage-active .pl-modal .gk-card { max-height: 88%; padding: 9px 14px; }
    body.cam-stage-active .pl-page .gk-ex-text { font-size: 12.5px; margin: 4px 0 8px; }
    body.cam-stage-active .pl-page .gk-ans b { font-size: 15px; }

    /* ----- Jelajah Dunia: kartu info suku lebih ringkas supaya tidak memenuhi tinggi layar ----- */
    body.cam-stage-active .sk-pos { width: min(300px, 60%); }
    body.cam-stage-active .sk-card { padding-bottom: 6px; border-radius: 14px; }
    body.cam-stage-active .sk-card::before { height: 10px; }
    body.cam-stage-active .sk-head { padding: 7px 14px 6px; }
    body.cam-stage-active .sk-name { font-size: 21px; }
    body.cam-stage-active .sk-asal { margin-top: 2px; font-size: 11px; }
    body.cam-stage-active .sk-chips { margin-top: 3px; }
    body.cam-stage-active .sk-sec { margin: 0 10px 5px; padding: 5px 10px 6px; border-radius: 10px; }
    body.cam-stage-active .sk-label { margin-bottom: 1px; font-size: 11.5px; }
    body.cam-stage-active .sk-val { font-size: 13px; }
    body.cam-stage-active .sk-why { margin-top: 3px; font-size: 11px; line-height: 1.4; }
    body.cam-stage-active .sk-foot { font-size: 10.5px; }

    /* ----- Pilih Sisi & Tiru Gaya: soal di atas, pilihan di bawah, kamera tetap kelihatan ----- */
    body.cam-stage-active .qk-hud-top { padding: 6px calc(var(--side) + 4px) 16px; }
    body.cam-stage-active .qk-soal-badge { margin-bottom: 3px; padding: 3px 12px; font-size: 10.5px; letter-spacing: 1px; }
    body.cam-stage-active .qk-question-text { margin-top: 0; font-size: clamp(13px, 4.4vh, 19px); line-height: 1.25; }
    body.cam-stage-active .qk-question-image { max-width: 110px; max-height: 50px; margin-top: 4px; }
    body.cam-stage-active .qk-timer { top: var(--row2); right: max(var(--cm), env(safe-area-inset-right, 0px)); width: 46px; height: 46px; }
    body.cam-stage-active .qk-timer-value { font-size: 16px; }
    body.cam-stage-active .qk-switch-cam-tip { top: var(--row2); left: var(--cm); max-width: 150px; padding: 6px 9px; font-size: 11px; }
    body.cam-stage-active .qk-switch-cam-tip::before { display: none; }
    body.cam-stage-active .qk-options-hud {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        padding: 6px 64px 8px;
        font-size: clamp(11px, 3.6vh, 15px);
    }
    body.cam-stage-active .qk-option-chip { padding: 0.45em 0.8em; border-width: 1px; }
    body.cam-stage-active .qk-half { padding-bottom: 3%; }
    body.cam-stage-active .qk-half-icon { width: 42px; height: 42px; font-size: 20px; border-width: 2px; }
    body.cam-stage-active .qk-half-text { padding: 2px 12px; font-size: 13px; }
    body.cam-stage-active .qk-answer-banner { padding: 8px 22px; border-radius: 14px; }
    body.cam-stage-active .qk-answer-label { font-size: 10px; letter-spacing: 2px; }
    body.cam-stage-active .qk-answer-value { font-size: 28px; }
    body.cam-stage-active .qk-answer-text { margin-top: 2px; font-size: 12px; }

    /* Tiru Gaya: dua kotak pose di tepi kiri & kanan; bagian tengah kamera (tempat pemain berdiri) dibiarkan lapang */
    body.cam-stage-active .tg-middle { grid-template-columns: minmax(0, 24%) minmax(0, 1fr) minmax(0, 24%); gap: 0; padding: 2px calc(var(--cb) + 20px) 4px 8px; }   /* kanan: ruang untuk lingkaran waktu */
    body.cam-stage-active .tg-middle > .tg-panel:nth-child(2) { grid-column: 3; }
    body.cam-stage-active .tg-panel { padding: 6px; border-radius: 16px; gap: 3px; }
    body.cam-stage-active .tg-panel::before { inset: -2px; border-radius: 18px; padding: 3px; }
    body.cam-stage-active .tg-panel-letter { top: 5px; left: 6px; width: 24px; height: 24px; font-size: 13px; }
    body.cam-stage-active .tg-panel-foot { gap: 6px; font-size: 10.5px; }
    body.cam-stage-active .tg-panel-tap { font-size: 11px; }
    body.cam-stage-active .tg-coach { margin: 0 8px 2px; padding: 0.3em 0.9em; font-size: 11.5px; }
    body.cam-stage-active .tg-arena .qk-hud-top { padding: 6px calc(var(--side) + 4px) 8px; }
    body.cam-stage-active .tg-arena .qk-options-hud { padding: 4px 64px 6px; }

    /* Popup penjelasan (Pilih Sisi & Tiru Gaya) */
    .qk-modal-overlay { padding: 8px; }
    .qk-modal { max-height: 100%; overflow-y: auto; padding: 12px 18px 14px; border-radius: 14px; }
    .qk-modal-result-title { margin-bottom: 6px; font-size: 16px; }
    .qk-modal-explanation { margin-bottom: 8px; padding: 8px 12px; font-size: 13px; line-height: 1.5; }
    .qk-modal-image { max-height: 80px; margin-bottom: 8px; }
    .qk-next-btn { padding: 9px; font-size: 13px; }
    .tg-modal-verdict { margin-bottom: 6px; padding: 5px 10px; font-size: 13px; }

    /* Popup cek kamera */
    .qk-ready-overlay { padding: 8px; }
    .qk-ready-card { margin-bottom: 0; padding: 12px 18px; border-radius: 14px; }
    .qk-ready-icon { display: none; }
    .qk-ready-title { margin-bottom: 8px; font-size: 15px; }
    .qk-ready-checklist { display: none; }
    .qk-ready-cam-controls { margin-bottom: 8px; }
    .qk-ready-start-btn { padding: 10px; font-size: 14px; }
    .qk-ready-cancel-btn { margin-top: 4px; padding: 4px; }
}

/* HP sangat pendek (<= 420 px tinggi): sedikit lebih kecil lagi */
@media (max-height: 420px) and (min-aspect-ratio: 1/1) {
    body.cam-stage-active .gk-ans img { width: 44px; height: 44px; }
    body.cam-stage-active .gk-card-head { font-size: 15px; }
    body.cam-stage-active .gk-ex-text { font-size: 12px; }
    body.cam-stage-active .qk-half-icon { width: 36px; height: 36px; font-size: 17px; }
    body.cam-stage-active .pl-status { width: 60px; }
    body.cam-stage-active .pl-status img { width: 44px; }
}

/* ---------- 4. Layar penuh semu (iPhone & peramban tanpa Fullscreen API) ---------- */

body.layar-penuh-semu.cam-stage-active .app-tabs { display: none; }
body.layar-penuh-semu.cam-stage-active .cam-toolbar .cam-full-btn { display: inline-flex; }

/* ---------- 5. Petunjuk putar HP & pemberitahuan layar penuh ---------- */

.cam-rotate-hint {
    position: fixed;
    z-index: 90;
    left: 50%;
    top: 8px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    width: min(94vw, 420px);
    padding: 6px 8px 6px 12px;
    border-radius: 12px;
    background: rgba(8, 12, 30, 0.95);
    border: 1px solid var(--accent);
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.5);
    color: #fff;
    font: 600 12px/1.3 Poppins, sans-serif;
}

/* Normalnya disisipkan di dalam alur halaman (di atas area utama), jadi tidak menutupi tombol apa pun */
.cam-rotate-hint--flow {
    position: static;
    transform: none;
    flex: none;
    width: auto;
    margin: 4px 8px 0;
}

.cam-rotate-ico { flex: none; font-size: 20px; line-height: 1; }
.cam-rotate-txt { flex: 1 1 auto; min-width: 0; }

.cam-rotate-x {
    flex: none;
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--border-light);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
}

.cam-layar-toast {
    position: fixed;
    z-index: 400;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    width: min(92vw, 460px);
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(8, 12, 30, 0.96);
    border: 1px solid var(--accent);
    color: #fff;
    font: 600 12.5px/1.45 Poppins, sans-serif;
    text-align: center;
    transition: opacity 0.4s ease;
}

.cam-layar-toast--out { opacity: 0; }

/* ---------- 6. Maestro Muda: bilah atas sendiri (menu halaman disembunyikan selama bermain) ---------- */

body.dj-page.cam-stage-active .cam-toolbar .cam-full-btn { display: inline-flex; }

@media (max-height: 640px) and (min-aspect-ratio: 1/1), (max-width: 900px) {
    /* Hanya "Mulai Lagu" yang tetap berlabel; sisanya ikon supaya bilah atas tidak pindah baris */
    body.dj-page .dj-top-actions .btn:not(.dj-go) {
        position: relative; flex: none; width: 34px; height: 34px; min-width: 0; padding: 0; gap: 0; border-radius: 50%; font-size: 15px;
    }
    body.dj-page .dj-top-actions .btn:not(.dj-go) .cam-lbl {
        position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
    }
}

/* ---------- 7. HP berdiri (sempit & tinggi): HUD Buru Gelembung & Pilot Cerdas mengalir dari atas ----------
   Baris 1: tombol bulat (kiri atas). Baris 2: kotak nilai + kondisi pesawat. Baris 3: panel soal selebar layar.
   Batas atas arena dihitung dari bawah panel soal oleh js/game-kamera.js & js/pesawat.js (measureTop). */
@media (max-width: 560px) and (max-aspect-ratio: 1/1) {
    body.cam-stage-active .gk-hud {
        display: flex; flex-wrap: wrap; align-content: flex-start; align-items: flex-start;
        gap: 6px; padding: 56px 10px 0; box-sizing: border-box;
    }
    body.cam-stage-active .gk-hud > .gk-score { position: static; order: 1; min-width: 0; padding: 3px 12px 4px; }
    body.cam-stage-active .gk-hud > .gk-score b { font-size: 20px; }
    body.cam-stage-active .gk-hud > .pl-status {
        position: static; order: 2; margin-left: auto; width: auto; display: flex; align-items: center; gap: 8px; padding: 5px 10px;
    }
    body.cam-stage-active .gk-hud > .pl-status img { display: none; }
    body.cam-stage-active .gk-hud > .gk-qpanel,
    body.cam-stage-active.gk-duel .gk-hud > .gk-qpanel {
        position: static; transform: none; animation: none; order: 3; flex: 1 1 100%;
        width: auto; max-width: none; min-width: 0; margin: 0; padding: 6px 12px 8px;
    }
    body.cam-stage-active .pl-grip,
    body.cam-stage-active .gk-pinch-tip,
    body.cam-stage-active .hd-status-badge { width: max-content; max-width: 94%; box-sizing: border-box; }
    body.cam-stage-active .gk-pinch-tip { bottom: 70px; }
}

/* ---------- 8. Layar sangat lebar (>= 1740 px): lima tombol Jelajah Dunia butuh ruang lebih di bilah menu ---------- */
@media (min-width: 1740px) {
    body.jb-page.cam-stage-active .app-tabs { padding-right: 930px; }
}