/* ========================================
   Panggung Kamera Layar Lebar - dipakai bersama Pilih Sisi
   (quiz-kamera.html) & Jelajah Dunia (jelajah-budaya.html).

   Begitu panggung kamera tampil, JS memasang kelas .cam-stage-active di
   <body>: halaman dikunci setinggi layar (tanpa scroll), padding area
   utama dipangkas, dan kamera memenuhi seluruh ruang di bawah navbar -
   selebar & setinggi mungkin, bukan lagi kotak persegi kecil di tengah.
   Tombol (Hentikan / Jeda-Mulai / Bantuan) ada di baris DI ATAS layar
   kamera, jadi tidak menutupi gambar, soal, maupun pilihan jawaban.
   ======================================== */

body.cam-stage-active {
    overflow: hidden;
}

body.cam-stage-active .container {
    height: 100vh;          /* cadangan utk peramban lama tanpa satuan dvh */
    height: 100dvh;
    min-height: 0;
}

body.cam-stage-active .main-content {
    padding: 3px 8px 6px;   /* nyaris tanpa tepi: kamera selebar & setinggi mungkin */
    min-height: 0;
}

/* ---------- Baris tombol di atas layar kamera ---------- */

.cam-toolbar {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    flex-shrink: 0;
}

.cam-toolbar .btn {
    padding: 9px 22px;
    font-size: 13px;
    border-radius: 10px;
}

/* Tombol Jeda saat sedang dijeda (labelnya berubah jadi "▶️ Mulai"): dibuat
   mencolok supaya jelas itu yang harus ditekan untuk melanjutkan. */
.cam-toolbar .cam-pause-btn--paused,
.cam-toolbar .cam-pause-btn--paused:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    border-color: transparent;
    color: #fff;
    box-shadow: var(--shadow-glow);
}

.cam-toolbar .cam-pause-btn--paused {
    animation: pulse 1.2s ease infinite;
}

/* ---------- Lapisan "Dijeda" di atas gambar kamera ---------- */

/* Tampil saat elemen panggungnya memegang kelas .cam-paused (dipasang JS).
   pointer-events: none supaya tombol ganti-kamera / balik-gambar di pojok
   layar tetap bisa dipakai selagi dijeda. */
.cam-pause-overlay {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(5, 8, 18, 0.45);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s;
}

.cam-paused .cam-pause-overlay {
    opacity: 1;
    visibility: visible;
}

.cam-pause-card {
    text-align: center;
    padding: 22px 40px;
    border-radius: 20px;
    background: rgba(10, 14, 39, 0.85);
    border: 2px solid var(--accent);
    box-shadow: var(--shadow-lg), 0 0 40px rgba(0, 217, 255, 0.18);
}

.cam-pause-icon {
    font-size: clamp(36px, 6vh, 64px);
    line-height: 1;
}

.cam-pause-title {
    margin-top: 8px;
    font-size: clamp(20px, 3.6vh, 38px);
    font-weight: 800;
    color: #fff;
}

.cam-pause-hint {
    margin-top: 6px;
    font-size: clamp(13px, 2vh, 20px);
    color: var(--text-secondary);
}

@media (max-width: 900px) {
    .cam-toolbar { gap: 8px; }
    .cam-toolbar .btn { padding: 8px 14px; font-size: 12px; }
    .cam-pause-card { padding: 16px 24px; }
}

/* ---------- Layar lebar: tombol pindah ke baris menu (sisi kanan) ----------
   Ruang kosong di kanan tab menu dipakai untuk tombol Hentikan / Jeda / Bantuan,
   jadi kotak kamera naik sampai tepat di bawah menu (tidak ada lagi baris
   tombol yang memotong tinggi kamera). Bilah atas hanya berisi tombol Menu, nama
   permainan, dan Bank Soal (di pojok kanan), jadi tombol baru muat di baris menu pada
   layar selebar ini; layar yang lebih sempit tetap memakai baris tombol di atas kamera.
   Ruang di kanan menu dicadangkan lewat padding supaya tab Bank Soal berhenti tepat
   di kiri tombol. */
@media (min-width: 1740px) {
    body.cam-stage-active .container { position: relative; }

    body.cam-stage-active .app-tabs { padding-right: 440px; }

    body.cam-stage-active .cam-toolbar {
        position: absolute;
        top: 0;
        right: 18px;
        height: 60px;
        z-index: 30;
        flex-wrap: nowrap;
    }
}