style.css

:root {
  /* --- Dark Mode --- */
  /* Latar belakang lebih gelap dan keunguan */
  --bg-color-dark: #100C1F;
  --bg-color-light: #19152C;
  
  /* Warna primer yang khas */
  --primary-color: #7B47F5;
  --primary-color-rgb: 123, 71, 245;
  --primary-hover-color: #8F64F8;
  
  /* Warna sekunder baru yang selaras */
  --secondary-color: #2A2440;
  --secondary-color-rgb: 42, 36, 64;
  --secondary-hover-color: #383158;
  
  /* Kaca yang disesuaikan dengan latar belakang baru */
  --card-bg-color: rgba(42, 36, 64, 0.5); /* Semi-transparent glass */
  --card-border-color: rgba(123, 71, 245, 0.2); /* Border 'glow' ungu */
  
  --text-color: #e2e8f0;
  --subtle-text-color: #a0aec0;
  --input-bg-color: rgba(42, 36, 64, 0.7);
  
  --success-color: #28a745;
  --success-color-rgb: 40, 167, 69;
  --error-color: #dc3545;
  --error-color-rgb: 220, 53, 69;
}

html.light {
  /* --- Light Mode Colors (Bright & Clean) --- */
  /* Mode terang tidak diubah, fokus pada permintaan dark mode */
  --bg-color-dark: #eef2f9;
  --bg-color-light: #ffffff;
  --primary-color: #6366f1;
  --primary-color-rgb: 99, 102, 241;
  --primary-hover-color: #7b7df3;
  --secondary-color: #f3f4f6;
  --secondary-color-rgb: 243, 244, 246;
  --secondary-hover-color: #e5e7eb;
  --card-bg-color: rgba(255, 255, 255, 0.6); 
  --card-border-color: rgba(99, 102, 241, 0.2);
  --text-color: #1f2937;
  --subtle-text-color: #6b7280;
  --input-bg-color: rgba(243, 244, 246, 0.8);
  --success-color: #16a34a;
  --success-color-rgb: 22, 163, 74;
  --error-color: #ef4444;
  --error-color-rgb: 239, 68, 69;
}

:root {
/* Skema Warna Khusus Halaman History */
  --history-classic: var(--primary-color);      /* Ungu Utama (#7B47F5) */
  --history-continent: #14b8a6;                /* Teal/Cyan (Muted/bukan neon) */
  --history-capital: #f59e0b;                  /* Oranye Kekuningan (Warna Accuracy) */
  --history-year: #f97316;                     /* Oranye */
  --history-timeattack: #3b82f6;               /* Biru (Warna Time Average) */
  --history-survival: var(--success-color);    /* Hijau Success (#28a745) */
  --history-combo: var(--error-color);                    /* Merah Failed/Wrong (Sesuaikan dengan --error-color Anda) */
  --history-bookmarks: #EC41B1;                /* Pink/Magenta Aksen */
  
  /* Indikator Umum */
  --history-correct: var(--success-color);
  --history-wrong: var(--error-color);
  --history-accuracy: #f59e0b;
  --history-time-avg: #3b82f6;
}

/* ==========================================
   UTILITY CLASSES UNTUK CARD / TEXT HISTORY
   ========================================== */

/* Kelas Warna Teks */
.text-hist-classic    { color: var(--history-classic); }
.text-hist-continent  { color: var(--history-continent); }
.text-hist-capital    { color: var(--history-capital); }
.text-hist-year       { color: var(--history-year); }
.text-hist-timeattack { color: var(--history-timeattack); }
.text-hist-survival   { color: var(--history-survival); }
.text-hist-combo      { color: var(--history-combo); }
.text-hist-bookmarks  { color: var(--history-bookmarks); }
.text-hist-correct    { color: var(--history-correct); }
.text-hist-wrong      { color: var(--history-wrong); }

/* Kelas Background Badge / Border Card Masing-masing Mode (Efek Glassmorphism Tipis) */
.badge-hist-classic    { background: rgba(123, 71, 245, 0.15); border: 1px solid var(--history-classic); }
.badge-hist-continent  { background: rgba(20, 184, 166, 0.15); border: 1px solid var(--history-continent); }
.badge-hist-capital    { background: rgba(245, 158, 11, 0.15); border: 1px solid var(--history-capital); }
.badge-hist-year       { background: rgba(249, 115, 22, 0.15); border: 1px solid var(--history-year); }
.badge-hist-timeattack { background: rgba(59, 130, 246, 0.15); border: 1px solid var(--history-timeattack); }
.badge-hist-survival   { background: rgba(40, 167, 69, 0.15); border: 1px solid var(--history-survival); }
.badge-hist-combo      { background: rgba(220, 53, 69, 0.15); border: 1px solid var(--history-combo); }
.badge-hist-bookmarks  { background: rgba(236, 65, 177, 0.15); border: 1px solid var(--history-bookmarks); }

/* 1. Pastikan html dan body mengambil tinggi penuh tanpa overflow */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

/* 1. Tambahkan lapisan gradient di elemen HTML agar benar-benar statis */
html::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 120vh;
    z-index: -2; /* Di bawah globe (yang z-indexnya -1) */
    pointer-events: none;
    
    /* Pindahkan gradient Anda ke sini */
    background-image: 
      radial-gradient(at 15% 15%, hsla(258, 88%, 60%, 0.15) 0px, transparent 50%),
      radial-gradient(at 80% 20%, hsla(320, 78%, 55%, 0.1) 0px, transparent 50%),
      radial-gradient(at 50% 80%, hsla(258, 88%, 60%, 0.1) 0px, transparent 50%),
      radial-gradient(at 90% 90%, hsla(320, 78%, 55%, 0.15) 0px, transparent 50%),
      linear-gradient(135deg, var(--bg-color-dark), var(--bg-color-light));
    background-size: cover;
    
     /* Tambahkan ini agar transisi antar screen tidak 'lompat' */
    will-change: transform;
    transform: translateZ(0);
}

body {
  font-family: 'Poppins', sans-serif;  
  color: var(--text-color);  
  transition: color 0.3s ease;
  min-height: 100dvh;
  padding-bottom: 80px; /* Sesuaikan dengan tinggi nav + jarak aman */
  background-color: var(--bg-color-dark); /* Warna dasar fallback */
  margin: 0;
  position: relative;
  
  /* Mencegah scroll memantul yang sering memicu area hantu */
    overscroll-behavior-y: none; 
    min-height: 100.1dvh; /* Paksa sedikit lebih tinggi dari layar */
}

/* --- Core Component Styling --- */
.card {
    background-color: var(--card-bg-color);
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    border: 1px solid var(--card-border-color);
    /* Menambah 'glow' yang konsisten */
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2), 0 0 15px rgba(var(--primary-color-rgb), 0.1);
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;      
}

.btn {
    transition: all 0.2s ease-in-out;
    border: none;
    font-weight: 600;
    border-radius: 0.5rem; /* 8px */
}
.btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.btn:active {
    transform: translateY(-1px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

/* --- Tombol Utama dengan Gradient --- */
.btn-primary { 
    /* Menggunakan gradient (Violet ke Magenta/Pink) */
    background-image: linear-gradient(90deg, var(--primary-color) 0%, #EC41B1 100%); 
    color: white;
    background-size: 200% 100%;
    transition: all 0.4s ease-in-out;
}
.btn-primary:hover { 
    /* Efek hover yang lebih 'glowing' dengan animasi geser gradient */
    background-position: 100% 0;
    box-shadow: 0 0 25px rgba(var(--primary-color-rgb), 0.6), 0 0 20px rgba(236, 65, 177, 0.4);
    transform: translateY(-3px);
}

.btn-secondary { 
    background-color: var(--secondary-color); 
    color: var(--text-color);
}
.btn-secondary:hover { 
    background-color: var(--secondary-hover-color);
    box-shadow: 0 0 15px rgba(var(--secondary-color-rgb), 0.3);
}

#library-search-input,
.settings-input { 
    background-color: var(--input-bg-color); 
    border: 1px solid var(--card-border-color);
    color: var(--text-color);
}
#library-search-input::placeholder {
    color: var(--subtle-text-color);
}

/* 1. Aturan umum .screen */
.screen {
    display: none; 
    width: 100% !important;
    /* Hapus max-width: 600px dari sini agar tidak memukul rata semua halaman */
    margin-left: auto;
    margin-right: auto;
    animation: slideDown 0.5s ease-out forwards;
}

/* 2. Berikan batas 600px HANYA untuk layar selain Library */
/* Ini agar menu utama & quiz tetap rapi di tengah */
.screen:not(#library-display-screen) {
    max-width: 600px !important;   
}

/* 3. Khusus untuk Library, berikan lebar maksimal yang besar */
#library-display-screen {
    max-width: 95% !important; /* Sekarang Library bisa melebar ke samping */
 /* --- TAMBAHKAN 2 BARIS INI --- */
    margin-top: 0 !important;      /* Memastikan tidak ada jarak berlebih di atas */
    margin-bottom: auto !important; /* Mendorong ruang kosong ke bawah agar layar naik ke atas */
}

.screen.active { 
    display: flex; 
    flex-direction: column;
    align-items: stretch; 
    text-align: center;
}

/* 4. Khusus elemen teks/judul agar tetap di tengah secara visual */
.screen.active h1, 
.screen.active h2, 
.screen.active p, 
.screen.active .flex-center-custom {
    align-self: center;
}

/* 5. Penyesuaian Grid Library agar pas di lebar 600px */
#library-grid {
    display: grid !important; /* Tetap pastikan dia grid */
    width: 100% !important;
    padding: 10px 0;    
}

@media (max-width: 480px) {
    #library-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Memaksa semua kontainer layar library agar memenuhi lebar */
#library-display-screen, 
#library-grid,
.screen {
    width: 100% !important;
    max-width: 95vw !important; /* Menggunakan viewport width */
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Mengatur agar item di dalam grid punya lebar yang pas */
#library-grid > div {
    width: 100% !important;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --- Specific Element Tweaks --- */
#home-screen h1 {
    /* Gradient judul disesuaikan dengan palet baru (Violet ke Pink) */
    background: linear-gradient(90deg, var(--primary-hover-color), #EC41B1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
    display: inline-block; /* Fix for gradient clipping */
    padding-bottom: 0.2em; /* Fix for gradient clipping */
}

#totalscore-container {
    background-color: var(--card-bg-color);
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    border: 1px solid var(--card-border-color);
    color: var(--text-color) !important;
}

/* Efek Hover untuk Total Score Container agar sama dengan Profile/Settings */
#totalscore-container:hover {
    background-color: var(--secondary-hover-color) !important; /* Warna abu-abu ungu khas tombol lain */
    border-color: rgba(var(--primary-color-rgb), 0.4); /* Beri sedikit kilau ungu pada border saat dihover */
    transition: all 0.3s ease;
}

/* Pastikan tidak ada pergerakan posisi (translate) saat di klik */
#totalscore-container:active {
    background-color: var(--secondary-color); /* Sedikit lebih gelap saat ditekan */
    transform: none !important;
}

.text-subtle { color: var(--subtle-text-color); }

/* Fun Fact Button (sudah bagus, hanya ganti warna) */
.fun-fact-btn {
  background: linear-gradient(270deg, var(--primary-color), #EC41B1, var(--primary-hover-color));
  background-size: 400% 400%;
  animation: gradientShift 15s ease infinite;
  color: #fff;
}
.fun-fact-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 18px rgba(var(--primary-color-rgb), 0.6);
}
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Container utama tetap 2 kolom */
#options-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Tetap 2 menyamping */
    gap: 12px;
    width: 100%;
    margin-top: 20px;
}

/* Tombol Opsi yang bisa nambah tinggi kalau teks panjang */
#options-container button {
    width: 100%;
    min-height: 70px; /* Tinggi minimal supaya rapi */
    height: auto !important; /* KUNCI: Biar tinggi ngikutin teks */
    padding: 10px 8px;
    
    /* Agar teks turun ke bawah kalau panjang */
    white-space: normal !important; 
    word-wrap: break-word;
    overflow-wrap: break-word;
    
    /* Layout teks di dalam tombol */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.2;
    font-size: 0.9rem; /* Sedikit dikecilkan agar aman di mobile */
}

/* Khusus untuk teks yang benar-benar panjang (seperti Sri Jayawardenepura Kotte) */
@media (max-width: 480px) {
    #options-container button {
        font-size: 0.8rem; /* Lebih kecil sedikit di HP kecil */
        padding: 8px 4px;
    }
}

/* Quiz Answer Buttons */
.option-btn:hover:not(:disabled) {
  border-color: var(--primary-color);
  color: var(--primary-color);
  box-shadow: 0 0 12px rgba(var(--primary-color-rgb), 0.4);
}
.option-btn.correct {
  background-color: var(--success-color) !important;
  border-color: var(--success-color) !important;
  color: #fff !important;
  transform: scale(1.05);
  box-shadow: 0 0 15px rgba(var(--success-color-rgb), 0.6);
}
.option-btn.incorrect {
  background-color: var(--error-color) !important;
  border-color: var(--error-color) !important;
  color: #fff !important;
  animation: shake 0.5s;
  box-shadow: 0 0 15px rgba(var(--error-color-rgb), 0.6);
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}

/* Flag Image Styling */
.flag-img {
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  transition: box-shadow 0.3s ease, transform 0.3s ease, opacity 0.3s ease-in-out;
}
#quiz-screen .flag-img {
  max-height: clamp(8rem, 15vh, 12rem);
  width: auto;
  margin: 0 auto 1rem auto;
}
.flag-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: 4 / 3;
  width: 100%;
  overflow: hidden;
  border-radius: 4px;
}
#quiz-screen .flag-img.correct-flag {
  box-shadow: 0 0 25px 5px rgba(var(--success-color-rgb), 0.7);
  transform: scale(1.05);
}
#quiz-screen .flag-img.incorrect-flag {
  box-shadow: 0 0 25px 5px rgba(var(--error-color-rgb), 0.7);
}
#library-display-screen img.flag-img,
#library-categories-screen img.flag-img,
#continent-library-screen img.flag-img,
#subdivision-library-screen img.flag-img,
#territory-library-screen img.flag-img,
#historical-library-screen img.flag-img {
  width: auto !important;
  height: auto !important;
  max-height: 6rem;
  max-width: 100%;
  object-fit: contain !important;
  display: block;
  margin: 0 auto;
}
    
/* Modal Styling */
.modal {
    display: none;
    position: fixed;
    z-index: 1050;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    justify-content: center;
    align-items: center;
    animation: fadeIn 0.3s ease;
/* --- TAMBAHAN UNTUK GAP BOTTOM NAV --- */
    /* Memberi jarak bawah 90px (nav 70px + gap 20px), dan jarak aman di sisi lain */
    padding: 20px 20px 90px 20px; 
    box-sizing: border-box;
}

/* --- TAMBAHKAN CLASS BARU INI DI BAWAHNYA --- */
/* Mengunci scroll pada body saat modal terbuka */
body.modal-open {
    overflow: hidden !important;
}
.modal.active { display: flex; }
.modal .card { animation: zoomIn 0.3s ease-out; }
/* Tambahkan ini di bawah class modal untuk Custom Scrollbar */
.modal-scrollable-content {
    scrollbar-width: thin;
    scrollbar-color: var(--primary-color) transparent;
}
.modal-scrollable-content::-webkit-scrollbar {
    width: 4px;
}
.modal-scrollable-content::-webkit-scrollbar-thumb {
    background-color: var(--primary-color);
    border-radius: 10px;
}
@keyframes zoomIn {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.icon-text .fa-fw { margin-right: 0.75rem; }

/* ============================================================
   SETTINGS, PROFILE, & DISCLAIMER PANEL
   ============================================================ */

/* Properti Bersama (Sistem Kerja Panel) */
#settings-panel, 
#profile-panel, 
#level-info-panel, 
#disclaimer-panel { 
    display: none;
    position: fixed;
    z-index: 1000; 
    max-height: 80vh; 
    overflow-y: auto;
    box-shadow: 0 10px 30px rgba(0,0,0,0.6);
    scrollbar-width: thin;
    scrollbar-color: var(--primary-color) transparent;
    /* Tambahkan max-width agar tidak jebol di HP */
    max-width: 90vw; 
}

/* Ukuran Spesifik: Profile & Settings (Side Panels) */
#settings-panel, 
#profile-panel,
#level-info-panel { 
    width: 320px; 
}

/* Pengaturan Posisi */
#settings-panel { 
    top: 100px; 
    right: 20px; 
}

#profile-panel,
#level-info-panel { 
    top: 100px; 
    left: 20px; 
} 

#disclaimer-panel { 
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); 
}

/* Aktivasi & Animasi */
#settings-panel.active, 
#profile-panel.active,
#level-info-panel.active { 
    display: block; 
    animation: slideDown 0.3s ease-out;
}

/* Penyesuaian Konten di Dalam Panel Level Info */
#level-info-panel h4 {
    color: var(--text-color);
    font-weight: bold;
    margin-bottom: 0.5rem;
}

#level-info-panel ul li {
    border-bottom: 1px solid var(--card-border-color);
    padding-bottom: 0.5rem;
    color: var(--subtle-text-color);
}

/* style.css */
#level-progress-bar {
    box-shadow: 0 0 10px rgba(var(--primary-color-rgb), 0.5);
    border-radius: inherit;
}

#disclaimer-panel.active { 
    display: block; 
    animation: fadeInCenter 0.3s ease-out;
}

/* Update di style.css */

#disclaimer-panel { 
    /* Lebar tetap */
    width: 480px; 
    
    /* PERBAIKAN: Gunakan variabel agar otomatis berubah saat Light Mode */
    background-color: var(--card-bg-color) !important; 
    
    /* Efek blur tetap ada */
    backdrop-filter: blur(25px) saturate(160%);
    -webkit-backdrop-filter: blur(25px) saturate(160%);
    
    /* PERBAIKAN: Border mengikuti tema */
    border: 1px solid var(--card-border-color);
    
    /* Bayangan mengikuti tema (lebih tipis di light mode agar elegan) */
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

/* Pastikan warna teks di dalam judul disclaimer juga mengikuti tema */
#disclaimer-title {
    color: var(--text-color);
}

/* Pastikan teks isi disclaimer menggunakan variabel warna teks yang tepat */
#disclaimer-content {
    color: var(--subtle-text-color);
}

/* Tambahan: Beri sedikit jarak pada tombol close di dalam panel agar tidak mepet */
#disclaimer-panel .mt-4 {
    margin-top: 1.5rem;
}

/* ============================================================
   ANIMASI
   ============================================================ */

@keyframes slideDown {
    from { transform: translateY(-20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes fadeInCenter {
    from {
        opacity: 0;
        transform: translate(-50%, -55%);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

/* Utility tambahan agar konten utama (Quiz/Library) tetap di tengah */
/* Update agar konten mulai dari atas, tapi tetap tengah secara horizontal */
main {
    width: 100%;
    max-width: 100% !important; /* Memastikan tidak ada batasan lebar */
    display: flex;   
    flex-direction: column;
    align-items: center;
    flex-grow: 1;    
    flex: 1 0 auto; /* Ini akan memaksa footer tetap di bawah meski konten sedikit */
    padding: 0 20px; /* Memberi sedikit jarak di pinggir agar tidak menempel sekali */
}

main > section:last-child {
    margin-bottom: 0;
}

/* Ganti slideDownCenter kamu dengan ini */
@keyframes slideDownCenter {
    from { transform: translateY(-10px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Jika ada fadeInScale, pastikan tidak ada translate -50% kecuali untuk MODAL */
@keyframes fadeInScale {
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* Loader */
.loader {
    width: 48px;
    height: 48px;
    border: 5px solid var(--text-color);
    /* Loader disesuaikan dengan warna primer baru */
    border-bottom-color: var(--primary-color); 
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}
@keyframes rotation {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.col-span-full {
    grid-column: 1 / -1;
    width: 100%;
}

/* Pastikan h3 di dalam grid punya line-height yang bagus */
#library-grid h3 {
    line-height: 1.5;
    letter-spacing: 0.5px; /* Memberi sedikit ruang antar huruf agar tidak rapat */
}

/* Membuat ikon pensil menyala saat input difokuskan */
.relative:focus-within .fa-pencil {
    color: var(--primary-color);
    transition: color 0.3s ease;
}

body::before {
    content: "";
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    /* Ukuran responsif: di mobile tidak memenuhi layar, di desktop tidak raksasa */
    width: 85vw; 
    max-width: 550px;
    height: 85vw;
    max-height: 550px;

    /* Memanggil file gambar asli kamu */
    background-image: url('globe-bg.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    
    /* Atur kejelasan di sini */
    opacity: 0.18;      /* Sudah cukup terlihat tapi tidak menabrak teks */
    filter: blur(0px);  /* Tanpa blur agar detail bendera tajam */
    
    /* Layering agar berada di belakang konten */
    z-index: -1;
    pointer-events: none;
}

/* --- TEMA FUN FACT: THEME-AWARE GLASSMORPHISM --- */

.glass-fun-fact {
    background: var(--card-bg-color) !important;
    backdrop-filter: blur(12px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(160%) !important;
    border: 1px solid var(--card-border-color) !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1) !important;
}

/* Garis cahaya tipis di atas kartu agar tetap terlihat premium */
.glass-fun-fact::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
    opacity: 0.5;
    z-index: 5;
}

/* --- EFEK IKON EMAS BERSINAR (SMART & SOFT) --- */

/* 1. Versi Light Theme (Default) */
.glow-icon-effect {
    /* Kita gunakan warna "Soft Gold" agar menyatu dengan tema terang */
    color: #ffffff !important; 
    /* Hilangkan glow neon, ganti dengan bayangan lembut agar ikon terlihat bersih */
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
    animation: gold-pulse 2s infinite ease-in-out;
    transition: all 0.3s ease;
}

/* 2. Versi Dark Theme (Tetap Glowing seperti gambar) */
.dark .glow-icon-effect {
    color: #ffffff !important; /* Kuning emas murni */
    /* Glow neon berlapis untuk latar belakang gelap */
    filter: 
        drop-shadow(0 0 5px #FFD700) 
        drop-shadow(0 0 15px #FFA500) 
        drop-shadow(0 0 25px rgba(255, 215, 0, 0.4));
}

@keyframes gold-pulse {
    0%, 100% { 
        transform: scale(1); 
    }
    50% { 
        transform: scale(1.08); 
    }
}

/* --- PERBAIKAN LOADER AGAR TIDAK ANEH --- */
/* Kita hapus semua border-top/right/left yang saya kasih sebelumnya */
/* Biarkan class .loader menggunakan style utama yang sudah Anda buat */
.glass-fun-fact .loader {
    /* Pastikan warna teks dan primer tetap terbaca di mode glass */
    border-color: var(--text-color);
    border-bottom-color: var(--primary-color);
    
    /* Memastikan tidak ada sisa style dari percobaan sebelumnya yang merusak animasi */
    border-top-color: var(--text-color) !important;
    border-right-color: var(--text-color) !important;
    border-left-color: var(--text-color) !important;
}

.flag-img {
    content-visibility: auto; /* Membantu browser hanya merender yang terlihat di layar */
    contain-intrinsic-size: 100px 60px; /* Memberi estimasi ukuran gambar sebelum dimuat */
}
.flag-img.opacity-0 {
    opacity: 0;
}

/* --- STATUS BADGES SYSTEM --- */
.status-badge {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 4px 8px;
    border-bottom-left-radius: 8px; /* Lengkungan hanya di pojok kiri bawah badge */
    z-index: 10;
    letter-spacing: 0.5px;
    box-shadow: -2px 2px 5px rgba(0,0,0,0.2);
    backdrop-filter: blur(4px);
}

/* Merah (Untuk status: "Unofficial" atau "Fan-made") */
.badge-unofficial {
    background: linear-gradient(135deg, #dc3545, #a71d2a);
    color: white;
}

/* Oranye/Emas (Untuk status: "Reconstruction") */
.badge-warning {
    background: linear-gradient(135deg, #fd7e14, #d35400);
    color: white;
}

/* Biru (Untuk status: "Proposed") */
.badge-info {
    background: linear-gradient(135deg, #0dcaf0, #0aa2c0);
    color: #fff; /* Teks hitam agar kontras dengan biru muda */
}

/* Label untuk Negara dengan Pengakuan Terbatas (Taiwan, Kosovo, dll) */
.badge-limited {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover-color));
    color: white;
}

/* Warna khusus untuk Historical (Coklat Emas Tua / Sepia) */
.badge-historical {
    background: linear-gradient(135deg, #8b5a2b, #5d3a1a);
    color: #ffffff;
    border-bottom-left-radius: 8px;
}

/* --- FLOATING XP ANIMATION --- */
.xp-floating-text {
    position: fixed;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--success-color);
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
    pointer-events: none; /* Supaya tidak menghalangi klik */
    z-index: 1000;
    animation: floatUp 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.dark .xp-floating-text {
    filter: drop-shadow(0 0 8px var(--success-color));
}

@keyframes floatUp {
    0% { transform: translate(-50%, 0) scale(0.5); opacity: 0; }
    20% { transform: translate(-50%, -20px) scale(1.2); opacity: 1; }
    100% { transform: translate(-50%, -60px) scale(1); opacity: 0; }
}

/* Menyamakan warna LEVEL UP dengan gradien tombol AWESOME! */
#level-up-text {
    background-image: linear-gradient(90deg, var(--primary-color) 0%, #EC41B1 100%);
    background-clip: text;
    -webkit-background-clip: text;
}

/* ============================================================
   SCROLL TO TOP BUTTON
   ============================================================ */
#scroll-to-top-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%; /* Membuatnya bulat */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    z-index: 999; /* Memastikan selalu berada di atas elemen lain */
    
    /* State awal: Tersembunyi di bawah */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) scale(0.9);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(var(--primary-color-rgb), 0.4);
}

/* State saat muncul */
#scroll-to-top-btn.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

/* Efek Hover */
#scroll-to-top-btn:hover {
    /* Hapus 'background' agar efek gradasi .btn-primary tidak tertimpa */
    transform: translateY(-5px) scale(1.05);
}

/* Hilangkan ruang tersebut jika nav sedang disembunyikan */
body.nav-hidden {
    padding-bottom: 0;
}
body.nav-hidden #app-container {
    padding-bottom: 0; /* Footer akan langsung mentok ke bawah */
}

/* KETIKA NAVIGASI MUNCUL (Bukan di Home/Quiz) */
/* Kita gunakan selector body:not(.nav-hidden) */
body:not(.nav-hidden) #scroll-to-top-btn {
    bottom: 90px; /* Naik ke atas navigasi (70px tinggi nav + 20px jarak) */
}

/* Responsif untuk Mobile agar tidak terlalu mepet pinggir */
@media (max-width: 640px) {
    body:not(.nav-hidden) #scroll-to-top-btn {
        bottom: 85px; 
        right: 15px;
    }
}

/* Sedikit penyesuaian di layar HP agar tidak menabrak pinggiran */
@media (max-width: 480px) {
    #scroll-to-top-btn {
        bottom: 1.5rem;
        right: 1.5rem;
        width: 3rem;
        height: 3rem;
    }
}

/* --- Bottom Navigation Styling --- */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 70px;
    background: var(--secondary-color); /* Warna Dark dengan transparansi */
    background-color: rgba(var(--secondary-color-rgb), 0.85); 
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-top: 1px solid var(--card-border-color);
    z-index: 1000;
    padding-bottom: env(safe-area-inset-bottom); /* Dukungan iPhone berponi */
    transition: all 0.3s ease; /* Transisi smooth saat ganti tema */
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--subtle-text-color);
    background: none;
    border: none;
    font-size: 0.7rem;
    gap: 4px;
    transition: all 0.3s ease;
    flex: 1;
    cursor: pointer;
}

.nav-item i {
    font-size: 1.2rem;
}

/* State Aktif (Ikon Terang) */
.nav-item.active {
    color: var(--primary-color);
    transform: translateY(-2px);
    font-weight: bold;
}

.nav-item.active i {
    filter: drop-shadow(0 0 8px rgba(var(--primary-color-rgb), 0.6));
}

/* SOLUSI FOOTER: Berikan padding agar konten/footer tidak tertutup nav bar */
#app-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /* Gunakan 100dvh untuk mobile agar akurat dengan bar browser */
    min-height: 100dvh; 
    position: relative;
    
    /* Ruang untuk navigasi bawah (70px tinggi nav + 10px jarak) */
    padding-bottom: 80px; 
    transition: padding-bottom 0.3s ease;
    box-sizing: border-box;
}

footer {
    flex-shrink: 0; /* Mencegah footer terkompresi */
    width: 100%;
    padding: 20px 0;
    text-align: center;
    /* Footer akan duduk tepat di atas padding-bottom #app-container */
}

/* Container utama FOTD */
#fotd-container {  
    height: auto;    
    max-height: 130px;
    min-height: 110px;
    transition: all 0.3s ease;
    border: 1px solid var(--card-border-color);
    background-color: var(--card-bg-color);
    color: var(--text-color) !important;
}

/* Memastikan teks tidak meluap jika nama negara terlalu panjang */
#fotd-name {
    display: block;
    width: 100%;
    text-align: center;
    white-space: normal;      /* Mengizinkan teks turun ke bawah */
    word-wrap: break-word;    /* Memutus kata jika terlalu panjang */
    line-height: 1.2;         /* Mengatur jarak antar baris agar rapi */
    overflow: visible;        /* Memastikan teks terlihat semua */
}

#fotd-img {
	opacity: 1;
	transition: opacity 0.4s ease-in-out;
	}

/* --- KHUSUS TOMBOL FUN FACT DI FOTD --- */
#fotd-fun-fact-btn {  
  background: linear-gradient(270deg, var(--primary-color), #d53f8c, var(--primary-hover-color));
  background-size: 400% 400%;
  animation: gradientShiftFOTD 15s ease infinite;
  color: #fff;
}

/* Hover Effect */
#fotd-fun-fact-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 18px rgba(var(--primary-color-rgb), 0.6);  
}

/* Active Effect (Saat Ditekan) */
#fotd-fun-fact-btn:active {
  transform: translateY(0) scale(0.95);
}

/* Keyframes Khusus FOTD agar tidak bentrok */
@keyframes gradientShiftFOTD {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Pastikan teks di dalam span tetap putih */
#fotd-fun-fact-btn span {
  color: #fff !important;
}

/* Penyesuaian untuk layar sangat kecil (iPhone SE, dll) */
@media (max-height: 660px) {
    #fotd-container {
        height: 15vh;
        padding: 10px 20px;
    }
    #fotd-img { max-height: 50px; }
    .text-[9px] { font-size: 8px; }
    #fotd-name { font-size: 12px; }
}

/* Notifikasi Toast Custom */
.toast-msg {
    position: fixed;
    top: 5vh;
    left: 50%;
    transform: translateX(-50%) translateY(-20px);
    background-color: var(--primary-color);
    color: white;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    z-index: 10001;
    opacity: 0;
    transition: all 0.4s ease;
    pointer-events: none;
    /* --- PERBAIKAN DI SINI --- */
    white-space: normal;       /* Mengizinkan teks turun ke bawah */
    text-align: center;        /* Agar teks yang turun tetap rapi di tengah */
    max-width: 90vw;           /* Batas lebar maksimal 90% lebar layar HP */
    width: max-content;        /* Lebar mengikuti teks tapi tidak melebihi max-width */
    word-wrap: break-word;     /* Memutus kata jika sangat panjang */
}

.toast-msg.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Animasi Getar jika input kosong */
.shake-input {
    animation: shake-input-error 0.4s ease-in-out;
    border: 2px solid #ff4d4d !important;
}

@keyframes shake-input-error {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    50% { transform: translateX(5px); }
    75% { transform: translateX(-5px); }
}

/* Loading State untuk Tombol */
.btn-loading {
    opacity: 0.7;
    pointer-events: none;
    position: relative;
}

/* ============================================================
   STREAK ANIMATION
   ============================================================ */
@keyframes fire-pulse {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 4px rgba(249, 115, 22, 0.4)); }
    50% { transform: scale(1.15); filter: drop-shadow(0 0 10px rgba(249, 115, 22, 0.8)); }
}

.streak-active {
    color: #f97316 !important; /* Warna Orange Tailwind */
    animation: fire-pulse 2s infinite ease-in-out;
}

/* ========== NEW FEATURE STYLES ========== */
.active-dot {
    background-color: var(--primary-color) !important;
    transform: scale(1.3);
    transition: all 0.3s ease;
}
.onboard-dot {
    background-color: var(--secondary-color);
    border: 1px solid var(--card-border-color);
}
.bookmark-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    transition: transform 0.2s ease, color 0.2s ease;
}
.bookmark-btn:hover {
    transform: scale(1.2);
}
.missed-flag-card {
    border-radius: 8px;
    overflow: hidden;
    text-align: center;
    padding: 6px;
    background: var(--card-bg-color);
    border: 1px solid rgba(var(--error-color-rgb), 0.3);
}
.missed-flag-card img {
    width: 100%;
    aspect-ratio: 3/2;
    object-fit: cover;
    border-radius: 4px;
    margin-bottom: 4px;
}
.missed-flag-card p {
    font-size: 10px;
    font-weight: 600;
    color: var(--subtle-text-color);
    line-height: 1.2;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* --- ANIMASI ONBOARDING (Grid Stacking — No Flicker) --- */
.onboard-slides-container {
    display: grid;
    grid-template-rows: 1fr;
    min-height: 160px;
    margin-bottom: 0;
}
.onboard-slides-container > .onboard-slide {
    grid-area: 1 / 1;
    align-self: start;
}
.onboard-slide {
    opacity: 0;
    transform: translateX(24px) scale(0.96);
    transition: opacity 0.38s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.38s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}
.onboard-slide.active-slide {
    opacity: 1;
    transform: translateX(0) scale(1);
    pointer-events: auto;
}
.onboard-dot {
    background-color: var(--secondary-color);
    border: 1px solid var(--card-border-color);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.active-dot {
    background-color: var(--primary-color) !important;
    transform: scale(1.4) !important;
    box-shadow: 0 0 10px rgba(var(--primary-color-rgb), 0.5);
    width: 24px;
    border-radius: 10px;
}

/* ============================================================
   CUSTOM RADIO BUTTONS (Language & Difficulty)
   ============================================================ */
.custom-radio-label {
    cursor: pointer;
    display: block;
}

.custom-radio-card {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1.5px solid var(--card-border-color);
    background: var(--input-bg-color);
    color: var(--subtle-text-color);
    font-size: 0.82rem;
    font-weight: 600;
    transition: all 0.2s ease;
    user-select: none;
}

.custom-radio-card:hover {
    border-color: rgba(var(--primary-color-rgb), 0.5);
    color: var(--text-color);
    background: var(--secondary-hover-color);
}

/* State aktif */
.custom-radio-card.active {
    border-color: var(--primary-color);
    background: rgba(var(--primary-color-rgb), 0.12);
    color: var(--primary-color);
    box-shadow: 0 0 0 1px rgba(var(--primary-color-rgb), 0.25),
                inset 0 0 8px rgba(var(--primary-color-rgb), 0.08);
}

/* Titik indikator */
.custom-radio-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--subtle-text-color);
    flex-shrink: 0;
    transition: all 0.2s ease;
    background: transparent;
}

.custom-radio-card.active .custom-radio-dot {
    border-color: var(--primary-color);
    background: var(--primary-color);
    box-shadow: 0 0 6px rgba(var(--primary-color-rgb), 0.6);
}

/* Live gradient ring untuk avatar di profile panel — sama seperti Fun Fact button */
.profile-avatar-ring {
    background: linear-gradient(270deg, var(--primary-color), #d53f8c, var(--primary-hover-color));
    background-size: 400% 400%;
    animation: gradientShiftFOTD 15s ease infinite;
}

/* --- Shimmer Animation untuk Tombol Login --- */
.btn-shimmer {
    position: relative;
    overflow: hidden; /* Mencegah cahaya meluber keluar dari lengkungan tombol */
}

.btn-shimmer::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%; /* Cahaya standby di luar area kiri tombol */
    width: 50%; /* Lebar sapuan cahaya */
    height: 100%;
    /* Gradien transparan -> putih semi-transparan -> transparan */
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transform: skewX(-25deg); /* Dimiringkan agar pantulannya terlihat lebih natural/kinclong */
    animation: shimmer-effect 10s infinite; /* Durasi 1 putaran adalah 4 detik */
}

@keyframes shimmer-effect {
    0% { 
        left: -100%; 
    }
    20% { 
        left: 200%; /* Cahaya menyapu dengan cepat ke kanan (selesai dalam 0.8 detik) */
    }
    100% { 
        left: 200%; /* Cahaya diam menunggu di luar kanan selama 3.2 detik sisanya */
    }
}

/* ============================================================
   LEADERBOARD ANIMATION & TWEAKS
   ============================================================ */
.leaderboard-slide {
    opacity: 0;
    transform: translateX(24px) scale(0.98);
    transition: opacity 0.38s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.38s cubic-bezier(0.4, 0, 0.2, 1);
}

.leaderboard-slide.active-slide {
    opacity: 1;
    transform: translateX(0) scale(1);
}