/* styles.css */

*{box-sizing:border-box;font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;}
body{margin:0;background:linear-gradient(180deg,#f7fbff,#fff);color:#0b1220}

/* 1. Mengatur lebar maksimal app agar tidak terlalu lebar di layar besar */
.app{
    max-width: 1000px; 
    margin: 0 auto; 
    padding: 3px; 
}

header{display:flex;align-items:center;justify-content:space-between;gap:12px; padding: 10px 0;}
h1{margin:0;font-size:1.8rem;color:#1f2937}
/* --- PENGATURAN BARU HEADER --- */

.controls {
    display: flex;
    gap: 15px; 
    align-items: flex-end; /* Menjajajarkan kotak dengan tombol Mulai */
}

/* --- PERBAIKAN HEADER (MURID, KELAS, LEVEL) --- */

.controls {
    display: flex;
    gap: 15px; 
    align-items: flex-end; /* Menjajajarkan kotak dengan tombol Mulai secara horizontal */
}

/* Membuat tulisan di Atas, Tebal, dan tepat di TENGAH kotak */
.controls label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-weight: 900; 
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    align-items: center; /* KUNCI: Membuat teks label berada di tengah kotak dropdown */
    text-align: center;
}

/* Gaya dasar Kotak Pilihan (Select) */
.controls select {
    padding: 8px 12px;
    border-radius: 10px;
    font-weight: bold;
    cursor: pointer;
    border: 3px solid; 
    outline: none;
    transition: transform 0.2s;
    text-align: center; /* Membuat teks di dalam dropdown juga di tengah */
}

.controls select:hover {
    transform: scale(1.05);
}

/* WARNA KHUSUS TIAP KATEGORI */

/* 1. Murid - BIRU */
.ctrl-murid { 
    color: #1e40af !important; /* Warna Biru Tua untuk tulisan "MURID" */
}

.ctrl-murid select {
    border-color: #3b82f6 !important; /* Warna border Biru */
    background-color: #eff6ff !important; /* Warna latar Biru sangat muda */
    color: #1e40af !important; /* Warna tulisan "Laki-laki / Perempuan" di dalam kotak */
    font-weight: bold;
}

/* Tambahan agar saat kotak diklik, tetap konsisten biru */
.ctrl-murid select option {
    background-color: #ffffff;
    color: #1e40af;
}

/* 2. Kelas - Kuning/Emas */
.ctrl-kelas { color: #a16207 !important; } 
.ctrl-kelas select {
    border-color: #eab308 !important;
    background-color: #fefce8 !important;
    color: #a16207 !important;
}

/* 3. Level - Merah */
.ctrl-level { color: #b91c1c !important; }
.ctrl-level select {
    border-color: #ef4444 !important;
    background-color: #fef2f2 !important;
    color: #b91c1c !important;
}
/* Gaya tombol MULAI yang lebih menarik */
#startBtn{
    padding:8px 16px;
    border-radius:12px;
    border:3px solid #16a34a;
    background:#22c55e;
    color:white;
    font-weight: bold;
    box-shadow: 0 4px #16a34a;
    transition: all 0.1s;
}
#startBtn:active {
    box-shadow: 0 1px #16a34a;
    transform: translateY(3px);
}
#startBtn:disabled {
    opacity: 0.5;
    box-shadow: none;
    transform: translateY(0);
}


button{cursor:pointer}
main{
    display:flex;
    gap: 12px; 
    margin-top:10px; 
}
.gamearea {
    flex: 2;
}

.sidebar {
    flex: 1;
    margin-top: -10px; /* Angka negatif ini yang menarik kotak instruksi ke atas */
}
 

/* Kotak Status Utama */
.status {
    display: flex;
    /* KUNCI: Membuat jarak kiri, kanan, dan antar kotak benar-benar identik */
    justify-content: space-evenly; 
    align-items: center;
    
    margin-bottom: 8px; 
    /* Menaikkan kotak kuning lebih ke atas sesuai permintaan Anda sebelumnya */
    margin-top: -10px; 
    
    /* Padding samping dinolkan agar space-evenly bekerja sempurna ke ujung bingkai */
    padding: 5px 0; 
    background: #fef3c7;
    border-radius: 10px; 
    border: 3px solid #fbbf24;
    font-weight: 700;
    color: #92400e;
}

/* Gaya Semua Kotak Putih di Dalamnya */
.status > div {
    background: white;
    padding: 10px 15px;      
    border-radius: 10px;
    border: 2px solid #fbbf24;
    font-weight: 800;
    color: #92400e;
    
    width: auto;             
    min-width: 90px;         /* Sedikit diperlebar agar teks Sub-Level tidak sesak */
    height: 38px;            
    
    position: relative; 
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.0rem;
	
	flex: 0 1 auto !important; 
    overflow: hidden !important;
}

/* Khusus untuk kotak ke-3 (Timer) agar lebih pendek dan manis */
.status > div:last-child {
    min-width: 70px; 
    width: 75px;     
}

/* Mengatur agar Timer Overlay tetap menempel pas di kotak induknya */
#timer-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fbbf24; 
    color: #92400e; 
    border-radius: 8px;
    display: flex !important;
    align-items: center !important;
	white-space: nowrap !important;
    justify-content: center !important;
    z-index: 10;
    font-family: 'Arial Black', sans-serif;
    font-size: 1rem;
    border: 2px solid #ffffff;
	padding-left: 0;   /* Jarak kecil agar tidak menempel tembok kiri */
    padding-right: 0;
}

/*#timer-overlay::before {
    content: "⏱️"; 
    font-size: 1.1rem;
    display: inline-block;

    /* TAMBAHKAN BARIS INI */
    /*margin-right: 12px; /* Semakin besar angkanya, ikon akan semakin geser ke kiri */
/*}*/*/

/* Gaya untuk Ikon Jam Keren (Font Awesome) */
#time-left {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px; /* Jarak yang pas antara ikon dan angka */
    font-size: 1.3rem;
    font-weight: bold;
    color: #92400e;
    width: auto; /* Biarkan lebar mengikuti isi agar Flexbox overlay bisa memusatkannya */
}


/* Kontainer Utama - Frame Kuning */
.bikeArea {
  height: 295px; 
  margin-top: 10px; 
  margin-bottom: 5px; 
  display: flex;
  justify-content: center;
  align-items: center; 
  z-index: 100;
  overflow: hidden; 
  width: 100%;
  
  position: relative; 
  
  background: #fef3c7; 
  border: 3px solid #fbbf24; 
  border-radius: 10px; 
  
  /* PENTING: Untuk menahan background image mode start */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}


/* KELAS START IMAGE - Menetapkan gambar berdasarkan gender yang dipilih */
.bikeArea.start-image-mode-boy {
    /* PERBAIKAN: JALUR FILE DIUBAH KE SUBFOLDER ASSETS */
    background-image: url('assets/boy_biking_star.png'); 
    background-size: 90%; 
}

.bikeArea.start-image-mode-girl {
    /* PERBAIKAN: JALUR FILE DIUBAH KE SUBFOLDER ASSETS */
    background-image: url('assets/girl_biking_star.png'); 
    background-size: 90% 98%; 
}

/* Gaya untuk elemen Video */
#bikeVideo {
  /* 1. GEMBOK POSISI: Dipaku tepat di tengah bingkai kuning */
  position: absolute !important;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Menarik video tepat ke titik tengah koordinat */
  z-index: 10; /* Memastikan video tetap di depan background */

  /* 2. GEMBOK UKURAN: Sesuai patokan sakral Bapak */
  width: 100%;
  max-width: 588px !important; 
  height: auto !important; 
  
  /* 3. ESTETIKA: Tetap rapi dan tidak gepeng */
  object-fit: contain; 
  
  /* 4. EFEK VISUAL: Sesuai kode asli Bapak (Hanya ditulis 1x agar bersih) */
  transition: opacity 0.3s ease-out; 
  transform-origin: bottom center;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* KELAS KRITIS: Untuk status Awal/Gambar Diam - Video harus disembunyikan total */
.start-image-mode #bikeVideo {
    opacity: 0 !important; 
    visibility: hidden !important; /* Tambahan untuk memastikan penyembunyian */
    display: none !important; /* KRITIS: Jangan tampilkan video */
}

/* KELAS KRITIS: Untuk status Aktif/Video - Video harus terlihat */
.video-mode #bikeVideo {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important; /* KRITIS: Tampilkan video */
}


/* Gaya dasar untuk setiap huruf */
.sideText {
    color: #16a34a; /* Warna hijau */
    font-weight: 800;
    font-size: 1.2rem; /* Ukuran font besar */
    user-select: none; 
    pointer-events: none; 
}

/* Kontainer Kiri: "GAME" */
.leftText {
    position: absolute;
    top: 48.3%; /* Ubah dari 50% ke 48% untuk menaikkan sedikit tulisan ke atas */
    left: 2.2%; 
    transform: translate(-50%, -50%); 
    
    display: flex;
    flex-direction: column;
    align-items: center; 
    z-index: 200; 

    /* Agar huruf G lurus N dan E lurus I */
    height: 260px; 
    justify-content: space-between; 
}

/* Kontainer Kanan: "NUMERASI" */
.rightText {
    position: absolute;
    top: 48.3%; /* Samakan dengan kiri agar sejajar */
    right: 2.2%; 
    transform: translate(50%, -50%); 
    
    display: flex;
    flex-direction: column;
    align-items: center; 
    z-index: 200; 

    /* Agar huruf G lurus N dan E lurus I */
    height: 260px; 
    justify-content: space-between; 
}

/* Kotak Utama Pertanyaan - Dikecilkan dan Diturunkan */
.questionCard{
    background:linear-gradient(135deg, #e0f7fa, #b3e5fc);
    border-radius:8px; 
    padding:8px; 
    border:3px solid #03a9f4; 
    box-shadow: 0 3px 6px rgba(0,0,0,0.1); 
    margin-top: 10px; 
    margin-bottom: 5px; 

    /* --- TAMBAHKAN 2 BARIS INI SEKARANG --- */
    position: relative !important;
    overflow: hidden !important;
}

.question {
    /* --- KODE ASLI ANDA --- */
    font-size: 1.4rem; 
    margin-bottom: 15px;
    font-weight: 800;
    color: #01579b;

    /* --- TAMBAHAN UNTUK KOMBINASI --- */
    background: #f0f9ff;
    padding: 10px;
    border-radius: 12px;
    border: 1.8px solid #01579b;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    
    /* --- PERUBAHAN UNTUK MENGUNCI 2 BARIS --- */
    min-height: 80px;      /* Tetap 80px */
    max-height: 85px;      /* KUNCI: Agar tidak melar ke bawah menjadi 3 baris */
    overflow: hidden;      /* KUNCI: Memotong teks jika terlalu besar sebelum dikecilkan JS */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.2;      /* Dipersempit sedikit agar 2 baris lebih pas */
    transition: font-size 0.1s ease; /* Transisi halus saat font berubah */
}

/* Gaya untuk form jawaban */
.answerForm {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;

    /* TAMBAHKAN BARIS INI */
    margin-top: -10px; /* Sesuaikan angka ini (misal -10px sampai -20px) */
    position: relative; 
    z-index: 5;
	
	/* TAMBAHKAN INI: Agar tidak terlalu mepet ke pinggir kiri bingkai */
    padding-left: 1px;
	
	flex-direction: row !important; /* Menjamin baris dari kiri ke kanan */
}

/* Tambahkan ini juga agar tombol speaker ukurannya tetap cantik */
#speakBtn {
    flex-shrink: 0 !important;
    width: 60px !important;
    height: 34px !important;
    cursor: pointer;
	padding: 5px;
	margin-top: -2px !important; /* Nilai minus membuat tombol naik ke atas */
    position: relative !important;
    z-index: 10 !important;
}

#submitBtn {
    width: 60px !important;
    height: 34px !important;
	margin-top: -2px !important; /* Samakan nilainya agar sejajar dengan Speaker */
    position: relative !important;
    z-index: 10 !important;
}

.answerForm input{
    padding:6px; 
    border-radius:8px; 
    border:2px solid #90caf9;
    width:220px; 
    font-size: 1rem; 
}
.answerForm button{
    padding:6px 10px; 
    border-radius:8px; 
    border:none;
    background:#2563eb;
    color:white;
    font-weight: bold;
    box-shadow: 0 3px #1e40af;
    transition: all 0.1s;
}
.answerForm button:active{
    box-shadow: 0 0 #1e40af;
    transform: translateY(3px);
}
#speakBtn{
    background:#f97316;
    color:white;
    box-shadow: 0 3px #c2410c;
}
#speakBtn:active{
    box-shadow: 0 0 #c2410c;
    transform: translateY(3px);
}

/* Kotak Pratinjau Soal Berikutnya - Dikecilkan & Diturunkan Lebih Jauh */
.nextPreview{
    margin-top: 5px; 
    background:linear-gradient(90deg, #f0fdf4, #ccfbf1);
    padding:5px; 
    border-radius:6px; 
    border:2px solid #34d399; 
    box-shadow: 0 1px 3px rgba(0,0,0,0.05); 
}
.nextPreview > div:first-child{
    font-weight: 500; 
    color: #065f46;
    font-size: 0.8rem; 
}
#nextQ{
    font-size: 0.95rem; 
    font-style: italic;
    color: #10b981;
    margin-top: 1px; 
}

/* Kotak Panel (Instruksi, Simpan Skor, Pengaturan, Leaderboard) */
.panel{
    background:linear-gradient(135deg, #fff7ed, #fee2e2);
    padding:15px;
    border-radius:15px;
    border:3px solid #f97316;
    margin-bottom:15px;
    box-shadow: 0 6px 10px rgba(0,0,0,0.1);
    transition: all 0.3s ease; /* Tambahkan transisi untuk animasi */
}
.panel h3{
    margin-top: 0;
    color: #c2410c;
    border-bottom: 2px solid #f59e0b;
    padding-bottom: 5px;
    margin-bottom: 10px;
}
.panel ol {
    padding-left: 20px;
}

/* GAYA KOTAK PANEL SKOR AKTIF (Diatur oleh JS) */
.panel.score-active {
    border-color: #059669; /* Border hijau */
    box-shadow: 0 6px 10px rgba(16, 185, 129, 0.5); /* Shadow hijau */
    background: linear-gradient(135deg, #d1fae5, #a7f3d0); /* Gradient hijau muda */
}
.panel.score-active h3 {
    color: #059669;
    border-bottom-color: #059669;
}

/* --- FOOTER & SIDEBAR --- */
/* --- OPTIMASI SIDEBAR AGAR PENUH & PADAT --- */
.sidebar {
    display: flex;
    flex-direction: column;
    gap: 8px !important; /* Jarak antar panel dipersempit agar naik */
}

.sidebar .panel {
    padding: 10px 14px !important; /* Memperkecil padding agar kotak terasa penuh */
    margin-bottom: 0 !important;   /* Menghapus margin bawah yang tidak perlu */
    border-left: 4px solid #3b82f6; /* Aksen garis biru agar terlihat premium */
    background-color: #ffffff;
}

.sidebar .panel h3 {
    margin: 0 0 6px 0 !important; /* Jarak judul ke isi dipersempit */
    font-size: 0.95rem;
    color: #1e40af;
}


/* Memastikan tombol sertifikat naik mengikuti teksnya */
#printCertBtn {
    margin-top: 0 !important;
    padding: 10px !important;
}

/* Mengatur list instruksi agar tidak melompong */
.instructions ol {
    margin: 0 !important;
    padding-left: 18px !important;
}

.instructions li {
    font-size: 0.9rem;
    line-height: 1.3; /* Jarak antar baris dirapatkan agar terlihat 'full' */
    margin-bottom: 0px;
    color: #374151;
}

.instructions li b {
    color: #1e40af;                /* Memberi warna biru pada kata kunci penting */
    font-weight: 700;
}

/* Merapikan form agar lebih ramping dan naik */
.saveScoreForm {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Footer agar tidak terlalu jauh di bawah */
footer {
    margin-top: 8px !important; 
}

/* Gaya Responsif Dasar */
@media (max-width: 768px) {
    main {
        flex-direction: column; 
    }
    .gamearea, .sidebar {
        flex: auto;
    }
}
/* --- PERBAIKAN PANEL SIMPAN SKOR (HORIZONTAL) --- */

/* 1. Tulisan instruksi: Tidak terlalu tebal */
#currentNameDisplay {
    color: #000000 !important; 
    font-weight: 600 !important; /* Ketebalan sedang (tidak terlalu tebal) */
    margin-bottom: 8px;
    font-size: 0.95rem;
    display: block;
    text-align: left;
}

/* 2. Mengatur Form agar Kotak Nama dan Tombol sejajar ke samping */
.saveScoreForm {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* 3. Kotak Nama diperkecil (Panjang & Tingginya) */
#playerName {
    width: 100% !important; /* Membuat kotak nama penuh ke kanan */
    max-width: none !important; /* Menghapus batasan 180px sebelumnya */
    padding: 8px 10px;
    border-radius: 8px;
    border: 2px solid #16a34a !important; /* Border Hijau tetap dipertahankan */
    background-color: #f0fdf4 !important;
    color: #000000 !important;
    font-weight: 600 !important;
    font-size: 0.9rem;
    outline: none;
    height: 38px; /* Sedikit lebih tinggi agar nyaman diketik */
    box-sizing: border-box; /* WAJIB: Agar padding tidak membuat kotak meluber keluar */
    margin-bottom: 8px; /* Jarak ke tombol di bawahnya */
}

/* 4. Menyesuaikan Tombol Simpan Skor agar serasi di sebelah kanan */
#saveScoreBtn {
    padding: 7px 15px; /* Menyesuaikan ukuran tombol agar tingginya sama dengan kotak */
    font-size: 0.85rem;
    white-space: nowrap; /* Mencegah tulisan tombol turun ke bawah */
    margin-bottom: 0; /* Menghilangkan margin bawah bawaan jika ada */
}
/* --- GAYA MODAL VIDEO REWARD (VERSI TERBAIK) --- */
#videoModal {
  position: fixed;
  top: 0; 
  left: 0;
  width: 100%; 
  height: 100%;
  background: rgba(0, 0, 0, 0.85); /* Latar belakang lebih gelap agar fokus ke video */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.modal-content {
  background: white;
  padding: 25px;
  border-radius: 20px; /* Sudut lebih melingkar */
  max-width: 600px;
  width: 90%;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  /* Animasi agar modal muncul membesar perlahan */
  animation: zoomIn 0.3s ease-out;
}

@keyframes zoomIn {
  from { transform: scale(0.8); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

#rewardVideo {
  border-radius: 12px;
  margin: 15px 0;
  border: 4px solid #f0fdf4; /* Garis tepi halus di sekitar video */
  background-color: #000; /* Warna hitam jika video belum termuat */
}

#videoTitle {
  color: #16a34a;
  margin-top: 0;
  font-size: 1.6rem;
}

.btn-close {
  background-color: #16a34a;
  color: white;
  border: none;
  padding: 12px 25px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: bold;
  transition: background 0.2s, transform 0.1s;
}

.btn-close:hover {
  background-color: #15803d;
  transform: scale(1.05); /* Sedikit membesar saat kursor di atasnya */
}
/* --- ANIMASI KEMBANG API SEDERHANA --- */
.fireworks-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Agar tidak menghalangi klik di bawahnya */
    overflow: hidden;
    z-index: 10000; /* Pastikan di atas semua elemen lain */
}

.firework {
    position: absolute;
    width: 5px;
    height: 5px;
    background-color: #ffd700; /* Warna awal kuning keemasan */
    border-radius: 50%;
    opacity: 0;
    animation: firework-burst 0.8s ease-out forwards;
}

@keyframes firework-burst {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    50% {
        transform: scale(20); /* Membesar menjadi "ledakan" */
        opacity: 0.5;
    }
    100% {
        transform: scale(40);
        opacity: 0;
    }
}

/* --- ANIMASI KEMBANG API --- */
.fireworks-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10000;
}

.firework {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    opacity: 0;
    animation: burst 0.8s ease-out forwards;
}

@keyframes burst {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    100% {
        transform: scale(35); /* Mengatur seberapa besar ledakannya */
        opacity: 0;
    }
}

/* --- KODE LAMA ANDA DI ATAS --- */
.tombol-selesai {
    background-color: blue;
} /* Ini batas akhir kode lama */

/* --- BATAS KODE BARU: KEMBANG API --- */
.fireworks-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10000;
}

.firework {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    opacity: 0;
    animation: burst 0.8s ease-out forwards;
}

@keyframes burst {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    100% {
        transform: scale(55); /* Saya buat sedikit lebih besar agar makin meriah */
        opacity: 0;
    }
}

/* Container utama bikeArea harus relative agar timer bisa menempel */
/* Container utama bikeArea sebagai patokan posisi melayang */
.bikeArea {
    position: relative;
    overflow: hidden; 
    border: 2px solid #fbbf24; /* Opsional: memberikan bingkai emas pada area video */
    border-radius: 12px;
}

/* 3. Timer yang Elegan (Warna Kuning Menyatu dengan Border) */
#timer-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ffffff; 
    color: #92400e;
    border-radius: 8px; 
    
    /* --- KUNCI TENGAH (PENGGANTI flex-start & padding-left) --- */
    display: flex;
    align-items: center;      
    justify-content: center; /* Ini yang membuat jam & angka ke tengah */
    
    z-index: 10;
    font-family: 'Arial Black', sans-serif;
    font-size: 1.1rem;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.1);
    border: 2px solid #ffffff; 
    /* Padding-left dihilangkan agar tidak berat sebelah ke kanan */
}

/* Warna Kuning Lampu Lalu Lintas saat Kritis (10 Detik Terakhir) */
.timer-warning {
    animation: shake-timer 0.5s infinite;
    background: #FFD700 !important; /* Gold/Kuning Cerah Lampu Lalu Lintas */
    color: #000000 !important; /* Teks Hitam agar kontras dan terbaca jelas */
    border: 2px solid #B8860B !important; /* Garis pinggir emas gelap */
}

@keyframes shake-timer {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(1deg) scale(1.05); }
    75% { transform: rotate(-1deg) scale(1.05); }
    100% { transform: rotate(0deg); }
}

/* Mengatur simbol jam dan angka di dalamnya agar SEJAJAR */
#time-left {
    font-size: 1.3rem; 
    font-weight: bold;
    display: flex;           
    align-items: center;
    gap: 8px; /* Jarak antara ikon jam dan angka */
    
    /* Margin-left negatif dihilangkan agar tidak miring ke kiri */
    margin: 0; 
    
    /* Menurunkan posisi sedikit agar sejajar secara visual */
    transform: translateY(2px); 
    
    color: inherit;
}

/* Mengatur warna dan ukuran ikon jam di dalam #time-left */
#time-left i {
    color: #92400e;    /* Warna cokelat agar seragam dengan angka */
    font-size: 1.2rem; /* Ukuran ikon agar seimbang dengan angka */
    display: inline-block;
}

/* Pastikan wadah utamanya benar-benar rata tengah */
#timer-overlay {
    display: flex;
    justify-content: center; /* Menarik jam + angka ke tengah */
    align-items: center;
    width: 100%;
    height: 100%;
}

/* Menghias judul selamat datang di dalam kotak soal */
#questionText strong {
    display: block;
    font-size: 1.3rem; /* Sedikit lebih besar */
    color: #2563eb;    /* Warna biru yang cerah dan semangat */
    margin-top: 8px;
}

/* --- EFEK KEDAP-KEDIP BERWARNA-WARNI UNTUK PESAN AWAL --- */

.blinking-text {
    animation: blinker 1.5s linear infinite, color-changer 3s infinite alternate; /* Dua animasi berjalan bersamaan */
    font-weight: bold;
    text-align: center;
    /* Kita mulai dengan warna merah agar tetap terlihat jelas */
    color: #ef4444; 
    transition: color 0.5s ease; /* Transisi halus saat warna berubah */
}

/* Animasi untuk efek KEDAP-KEDIP (opacity) */
@keyframes blinker {
    50% { opacity: 0; }
}

/* Animasi untuk efek PERGANTIAN WARNA */
@keyframes color-changer {
    0%   { color: #ef4444; } /* Merah */
    25%  { color: #3b82f6; } /* Biru */
    50%  { color: #16a34a; } /* Hijau */
    75%  { color: #eab308; } /* Kuning */
    100% { color: #d946ef; } /* Ungu */
}

/* Pastikan kotak feedback putih tetap elegan dan muat */
/* --- KODE FEEDBACK TUNGGAL (DIJAMIN AMAN & RAPI) --- */
.feedback {
    /* 1. Warna & Bingkai (Tetap sesuai pilihan Bapak) */
    background-color: #fff9c4 !important;
    border: 1.5px solid #90caf9 !important;
    border-radius: 8px !important;
    
    /* 2. Ukuran Kotak (Dibuat sedikit lebih tinggi agar huruf besar tidak sesak) */
    min-height: 35px !important; 
    
    /* 3. Posisi (Tetap di tengah sesuai keinginan Bapak) */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 5px 15px !important;
    margin-top: 4px !important;
    
    /* 4. Teks (Dibuat lebih besar dan jelas) */
    font-size: 1.08rem !important; 
    font-weight: bold !important;
    color: #333 !important;
    text-align: center !important;
    
    /* 5. Keamanan Teks */
    word-break: break-word; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.05) !important;
}

/* --- MENGATUR KOTAK JAWABAN SISWA AGAR DI TENGAH --- */
#answerInput {
    text-align: center !important;   /* Ini yang membuat tulisan ke TENGAH */
    font-size: 1.2rem !important;    /* Ukuran tulisan saat siswa mengetik (besar & jelas) */
    font-weight: normal !important;    /* Agar angka jawaban terlihat tegas */
    color: Black !important;       /* Warna biru agar beda dengan soal */
    
    /* Opsional: mempercantik tampilan kotak */
    border: 2px solid #90caf9;
    border-radius: 8px;
    height: 40px;
    width: 280px; 
}

/* Efek saat kotak diklik oleh siswa */
#answerInput:focus {
    outline: none;
    border-color: #2563eb !important;
    background-color: #f0f9ff; /* Berubah warna sedikit saat aktif */
}

/* --- GAYA TIRAI FINAL: OTOMATIS MENGIKUTI KOTAK BIRU --- */
.tirai-container {
    position: absolute !important; 
    
    /* GANTI 4 BARIS INI */
    top: -3px !important;    /* Naik sedikit untuk menutupi border atas */
    left: -3px !important;   /* Geser kiri sedikit untuk menutupi border kiri */
    width: calc(100% + 6px) !important;  /* Diperlebar agar menutup border kanan */
    height: calc(100% + 6px) !important; /* Dipertinggi agar menutup border bawah */
    
    /* --- Dekorasi Kuning Emas Bapak --- */
    background: #fde047; 
    border: 5px solid #ca8a04;
    z-index: 2000; 
    display: none; 
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
    box-sizing: border-box !important; 

    /* --- Animasi Mewah (Ditarik dari Atas) --- */
    transform: scaleY(0);
    transform-origin: top;
    opacity: 0;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s;
}

/* Saat aktif, tirai memanjang ke bawah menutup sempurna */
.tirai-container.active {
    display: flex !important;
    transform: scaleY(1) !important;
    opacity: 1 !important;
}

/* --- BAGIAN DI BAWAH INI BIARKAN SAJA SEPERTI MILIK BAPAK --- */
.pesan-tirai {
    font-size: 1.15rem;
    font-weight: 900;
    color: #854d0e;
    margin-bottom: 12px;
    line-height: 1.4;
}

.instruksi-tirai {
    font-size: 0.9rem;
    color: #b45309;
    background: #ffffff;
    padding: 8px 15px;
    border-radius: 10px;
    border: 2px dashed #ca8a04;
    font-weight: 800;
    animation: blinker 1.2s linear infinite;
}


/* Animasi Kedap-Kedip */
@keyframes blinker {
    50% { opacity: 0.3; }
}

/* 2. Isi Dalam - Menggunakan Font Lonjong & Jurus Sejajar */
#time-left {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px; /* Jarak pas antara jam dan angka */
    
    * GANTI KE OSWALD */
    font-family: 'Oswald', sans-serif !important;
    font-size: 1.3rem !important; /* Oswald sedikit lebih lebar, jadi ukuran 1.3 sudah cukup */
    font-weight: 700 !important;
    color: #92400e !important;
    color: #92400e !important;
    
   /* KITA TURUNKAN SEDIKIT (Tadinya -3px, sekarang coba -1px saja) */
    transform: translateY(1.23px) !important; 
    line-height: 1 !important;
}
#time-left .fa-clock {
    font-size: 0.86em !important;
    /* Tetap pertahankan tinggi yang sudah Bapak kunci */
    transform: translateY(0.5px) translateX(0px) !important; 
    
    /* translateX(-3px) di atas akan menarik ikon ke kiri sejauh 3 pixel */
    /* Jika kurang ke kiri, silakan ganti -3px menjadi -5px atau -8px */
    
    margin-left: 2px !important; /* Tambahan sedikit ruang agar tidak terlalu dekat dengan angka */
}

/* Tambahkan di akhir file styles.css */
#answer-input:disabled {
    background-color: #d1d5db !important; /* Warna abu-abu */
    cursor: not-allowed; /* Kursor berubah jadi tanda dilarang */
    color: #6b7280 !important;
    border: 2px solid #9ca3af !important; /* Agar terlihat tegas sedang terkunci */
}

/* Gaya Tabel Peringkat Prestisius */
#leaderboard-modal {
    display: none; /* Awalnya sembunyi */
    position: fixed;
    
    /* GANTI ANGKA INI */
    z-index: 9999 !important; 
    
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%;
    background-color: rgba(0,0,0,0.85); 
    justify-content: center; 
    align-items: center;
}

/* TAMBAHKAN INI: Kunci untuk memunculkan modal */
#leaderboard-modal.show {
    display: flex !important;
}

.leaderboard-content {
    background: white; padding: 25px; border-radius: 20px;
    width: 90%; max-width: 500px; text-align: center;
    border: 5px solid #fbbf24; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    position: relative; /* Agar tombol tutup bisa diposisikan */
}

.leaderboard-table {
    width: 100%; border-collapse: collapse; margin-top: 15px;
}

.leaderboard-table th {
    background: #fef3c7; color: #92400e; padding: 10px; border-bottom: 2px solid #fbbf24;
}

.leaderboard-table td {
    padding: 10px; border-bottom: 1px solid #f3f4f6; font-weight: 700;
}

.rank-1 { color: #b45309; font-size: 1.2rem; }

/* Desain Tombol Hapus Admin */
#clearLeaderboardBtn {
    background: linear-gradient(135deg, #ef4444, #b91c1c); /* Warna merah gradasi */
    color: white;
    font-weight: bold;
    border: none;
    padding: 10px 15px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    width: 70%; 
    
    /* --- TAMBAHKAN DUA BARIS INI AGAR KE TENGAH --- */
    display: block;       /* Mengubah tombol jadi blok mandiri */
    margin: 15px auto;    /* 'auto' akan membagi jarak kiri & kanan sama rata */
    /* ---------------------------------------------- */

    margin-top: 13.5px; /* Ini bisa tetap ada atau digabung ke margin di atas */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Efek saat mouse mendekat (Hover) */
#clearLeaderboardBtn:hover {
    background: linear-gradient(135deg, #dc2626, #991b1b);
    transform: translateY(-2px); /* Tombol sedikit naik */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

/* Efek saat tombol diklik */
#clearLeaderboardBtn:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Kode khusus untuk membuat kotak admin lebih ramping */
.panel-admin {
    height: 110px !important;    /* Bapak bisa ganti angka ini (100-120) sesuai selera */
    min-height: auto !important;  /* Menghapus batasan tinggi minimum jika ada */
    display: flex;
    flex-direction: column;
    justify-content: center;      /* Supaya isinya tetap di tengah walau sempit */
    padding: 5px !important;
}

/* Mengatur jarak tulisan di dalam kotak agar tidak terlalu renggang */
.panel-admin h3 {
    margin: 5px 0 !important;
    font-size: 14px !important; /* Memperkecil sedikit ukuran teks judul */
}

/* ============================================================ 
   VERSI FINAL: TOMBOL PRESTASI & SERTIFIKAT (PASTI SERAGAM)
   ============================================================ */

.btn-rank, .btn-cert {
    width: 65% !important;
    height: 34px !important;
    margin: 10px auto !important;
    
    /* HAPUS !important di bawah ini */
    display: flex; 
    
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 8px;
    font-weight: bold;
    font-size: 1.0rem !important;
    cursor: pointer;
    transition: all 0.2s;
    gap: 6px;
}

.btn-rank {
    background: #2563eb !important;
    color: white !important;
    box-shadow: 0 4px #1e40af;
}

.btn-cert {
    background: #10b981 !important;
    color: white !important;
    box-shadow: 0 4px #059669;
}

.btn-cert:disabled {
    background: #d1d5db !important;
    color: #9ca3af !important;
    box-shadow: 0 2px #9ca3af;
    cursor: not-allowed;
    opacity: 0.7;
}

.btn-rank:active, .btn-cert:not(:disabled):active {
    box-shadow: 0 1px #059669;
    transform: translateY(3px);
}

.panel p {
    margin-bottom: 5px !important;
    font-size: 0.82rem !important;
    line-height: 1.2 !important;
    text-align: center;
}

/* Animasi berkedip yang halus */
@keyframes kedipInstruksi {
    0% { opacity: 1; }
    50% { opacity: 0.3; }
    100% { opacity: 1; }
}

/* Class khusus untuk teks yang sedang berkedip */
.teks-kedip {
    animation: kedipInstruksi 1s infinite;
    font-weight: bold;
    color: #b45309; 
    display: inline-block; /* TAMBAHKAN INI: Agar animasi berjalan stabil pada elemen span */
    width: 100%;           /* TAMBAHKAN INI: Agar teks tetap berada di tengah kotak */
}

/* Container Utama Footer */
.footer-elegan {
    margin-top: 10px; /* Jarak sangat tipis dengan kotak soal berikutnya */
    padding: 8px 15px;
    background: linear-gradient(90deg, #f8fafc 0%, #f1f5f9 100%);
    border-top: 1px solid #e2e8f0;
    border-radius: 0 0 12px 12px; /* Melengkung di bawah saja agar menyatu */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Penata Letak Isi */
.footer-content {
    display: flex;
    justify-content: space-between; /* Kiri info, kanan nama Bapak */
    align-items: center;
    font-size: 0.8rem;
    color: #64748b;
}

/* Styling Nama Kreator */
.info-creator {
    color: #1e40af;
    background: #dbeafe;
    padding: 3px 10px;
    border-radius: 20px;
    border: 1px solid #bfdbfe;
}

.info-creator strong {
    letter-spacing: 0.5px;
}

/* Responsif untuk HP */
@media (max-width: 600px) {
    .footer-content {
        flex-direction: column;
        gap: 5px;
        text-align: center;
    }
}

/* Perbaikan Khusus HP: Menyembunyikan teks GAME & NUMERASI */
@media screen and (max-width: 800px) {
    .leftText, 
    .rightText, 
    .sideText { 
        display: none !important; 
    }
}

/* PENTING: Taruh di baris paling bawah file styles.css */
@media screen and (max-width: 800px) {
    .leftText, 
    .rightText, 
    .sideText { 
        display: none !important; 
        visibility: hidden !important;
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
    }
}