/* ========================================
   Pilot Cerdas (pesawat.html) - tambahan gaya di atas css/game-kamera.css (kerangka kamera, panel soal,
   popup penjelasan/hasil, tombol gestur) dan css/kamera-dasar.css. Skrip: js/pesawat.js
   Kamera SENGAJA tampil apa adanya (tanpa lapisan gelap/warna) supaya pemain melihat tangannya sendiri.
   ======================================== */

/* ---------- Layar setup ---------- */

.pl-sub {
    margin: 14px 0 8px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-secondary);
}

.setup-section-title + .pl-sub { margin-top: 0; }

.pl-btn-sub {
    display: block;
    margin-top: 2px;
    font-style: normal;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
}

.jenjang-btn.active .pl-btn-sub { color: #ffd9ea; }

/* Deretan gambar pesawat level 1-5 + "Hancur": jalur kerusakan menurut pengaturan guru menyala */
.pl-levels {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
    margin: 16px 0 12px;
    padding: 0;
}

.pl-levels li {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    min-width: 0;
    padding: 8px 6px 6px;
    border-radius: 12px;
    border: 2px solid var(--border);
    background: rgba(255, 255, 255, 0.04);
    opacity: 0.42;
    transition: opacity 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.pl-levels li img {
    display: block;
    width: 100%;
    height: auto;
}

.pl-levels li span {
    font: 700 11.5px Poppins, sans-serif;
    color: var(--text-secondary);
    text-align: center;
}

.pl-levels li.reach { opacity: 1; border-color: rgba(0, 217, 255, 0.55); }
.pl-levels li.reach span { color: var(--text-primary); }

.pl-levels li.start {
    border-color: var(--primary);
    box-shadow: 0 0 14px rgba(255, 0, 110, 0.3);
}

.pl-levels li.start span::after { content: ' · mulai'; color: #ffd9ea; }

.pl-levels li.pl-level-boom b { font-size: 34px; line-height: 1.5; }
.pl-levels li.pl-level-boom.reach { border-color: #ff6b6b; }

.pl-note-box { margin: 0; font-size: 13.5px; color: var(--text-secondary); line-height: 1.55; }

@media (max-width: 560px) {
    .pl-levels { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- HUD di atas kamera ---------- */

.pl-hud { z-index: 6; }

/* Kondisi pesawat (kanan atas, sejajar dengan kotak nilai di kiri) */
.pl-status {
    --st: #7ae582;
    position: absolute;
    top: 66px;
    right: 14px;
    z-index: 3;
    display: grid;
    justify-items: center;
    gap: 3px;
    width: 112px;
    padding: 6px 8px 7px;
    border-radius: 14px;
    background: rgba(12, 10, 32, 0.84);
    border: 2px solid var(--st);
    transition: border-color 0.25s ease;
}

.pl-status img { display: block; width: 92px; height: auto; }

.pl-status-text {
    display: grid;
    justify-items: center;
    gap: 4px;
    font: 700 11.5px Poppins, sans-serif;
    color: #fff;
}

.pl-hp { display: flex; gap: 3px; }
.pl-hp i { width: 15px; height: 7px; border-radius: 3px; background: var(--st); transition: background 0.25s ease; }
.pl-hp i.off { background: rgba(255, 255, 255, 0.2); }

.pl-status.pl-hit { animation: plHit 0.5s ease; }
@keyframes plHit {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); } 40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); } 80% { transform: translateX(3px); }
}

/* Penanda genggaman (tengah bawah) */
.pl-grip {
    --gc: #00d9ff;
    --p: 0;
    position: absolute;
    left: 50%;
    bottom: 58px;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 92%;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(12, 10, 32, 0.86);
    border: 2px solid var(--gc);
    color: #fff;
    font: 700 14px Poppins, sans-serif;
    transition: opacity 0.2s ease, border-color 0.2s ease;
    pointer-events: none;
}

.pl-grip[data-state="hidden"] { opacity: 0; }
.pl-grip[data-state="wait"] { --gc: #00d9ff; animation: plGripPulse 1.3s ease-in-out infinite; }
.pl-grip[data-state="arming"] { --gc: #ffd166; }
.pl-grip[data-state="held"] { --gc: #7ae582; }
.pl-grip[data-state="grace"] { --gc: #ff4d6d; animation: plGripBlink 0.3s ease-in-out infinite alternate; }

.pl-grip-ico { font-size: 22px; line-height: 1; }
.pl-grip-text { min-width: 0; }

.pl-grip-bar {
    flex: none;
    width: 64px;
    height: 6px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.2);
    overflow: hidden;
}

.pl-grip-bar i {
    display: block;
    width: 100%;
    height: 100%;
    transform-origin: left;
    transform: scaleX(var(--p));
    background: var(--gc);
}

@keyframes plGripPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0, 217, 255, 0); }
    50% { box-shadow: 0 0 0 7px rgba(0, 217, 255, 0.28); }
}

@keyframes plGripBlink {
    from { box-shadow: 0 0 0 0 rgba(255, 77, 109, 0); }
    to { box-shadow: 0 0 0 8px rgba(255, 77, 109, 0.4); }
}

/* ---------- Popup: latar tipis supaya kamera (dan tangan) tetap terlihat; kartu di bagian bawah ---------- */

.pl-modal {
    align-items: flex-end;
    background: rgba(5, 8, 18, 0.16);
    padding: 12px 12px 14px;
}

.pl-modal .gk-card {
    width: min(620px, 100%);
    max-height: 66%;
    background: linear-gradient(160deg, rgba(30, 22, 62, 0.94), rgba(9, 7, 24, 0.95));
}

/* kartu hasil di tengah layar */
#plResult { align-items: center; background: rgba(5, 8, 18, 0.34); }
#plResult .gk-card { max-height: 100%; }

.pl-page .gk-ans { margin: 10px 0 4px; }
.pl-page .gk-ans b { font-size: 18px; line-height: 1.35; }
.pl-page .gk-ans small { display: block; margin-bottom: 2px; }

/* Popup yang lebih pendek di layar tinggi-pendek (HP mendatar) */
@media (max-height: 560px) {
    .pl-modal .gk-card { max-height: 78%; padding: 12px 16px; }
    .pl-page .gk-ex-text { font-size: 13px; margin: 6px 0 10px; }
    .pl-grip { bottom: 50px; padding: 6px 12px; font-size: 12.5px; }
    .pl-status { width: 92px; top: 56px; }
    .pl-status img { width: 74px; }
}

@media (max-width: 700px) {
    .pl-status { width: 92px; }
    .pl-status img { width: 74px; }
    .pl-grip { font-size: 12.5px; padding: 7px 12px; }
    .pl-grip-bar { width: 44px; }
}

/* ---------- Panel soal: menunggu pesawat digenggam (soal BELUM tampil) & munculnya soal ---------- */

.gk-qpanel--wait .gk-qtext { color: #7fe9ff; font-weight: 600; margin-bottom: 8px; }

.pl-qpop { animation: plQPop 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.2); }

@keyframes plQPop {
    0% { transform: translateX(-50%) scale(0.86); opacity: 0.15; }
    100% { transform: translateX(-50%) scale(1); opacity: 1; }
}