: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;
}
:root {
/* Aksen Tombol Navigasi Cepat di Home Screen (Library / Leaderboard / History) */
  --home-library-accent: var(--primary-color);
  --home-leaderboard-accent: #facc15;          /* Gold/Yellow — selaras dengan text-yellow-400 */
  --home-history-accent: var(--primary-color);
}
.home-nav-btn.accent-library::before { background-color: var(--home-library-accent); }
.home-nav-btn.accent-leaderboard::before { background-color: var(--home-leaderboard-accent); }
.home-nav-btn.accent-history::before { background-color: var(--home-history-accent); }
.home-nav-btn-compact {
    border-top: 2px solid transparent;
}
.home-nav-btn-compact.accent-library { border-top-color: var(--home-library-accent); }
.home-nav-btn-compact.accent-leaderboard { border-top-color: var(--home-leaderboard-accent); }
.home-nav-btn-compact.accent-history { border-top-color: var(--home-history-accent); }
.home-nav-btn-compact.accent-missed { border-top-color: var(--error-color); }
.home-nav-btn-compact.accent-share { border-top-color: var(--primary-color); }
.home-nav-btn-compact.accent-back { border-top-color: var(--subtle-text-color); }
/* ============================================================
   ACCENT SYSTEM: QUIZ MODE & LIBRARY CATEGORY CARDS
   ============================================================ */
.accent-card {
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.accent-card:hover,
.accent-card:active {
    border-color: var(--primary-color);
    transform: translateY(-2px);
}
.accent-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background-color: var(--card-accent, var(--primary-color));
    opacity: 0.9;
}
.accent-card .accent-icon {
    color: var(--card-accent, var(--primary-color));
}
/* ============================================================
   SKELETON LOADING (Leaderboard, Fun Fact, View Detail)
   ============================================================ */
.skeleton-block {
    background: linear-gradient(90deg, rgba(255,255,255,0.05) 25%, rgba(255,255,255,0.13) 50%, rgba(255,255,255,0.05) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
}
@keyframes skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
/* ============================================================
   BOTTOM SHEET (reusable component — Library quick actions, dst.)
   ============================================================ */
.bottom-sheet-overlay {
    display: none;
    position: fixed;
    z-index: 1060;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.55);
    align-items: flex-end;
    justify-content: center;
}
.bottom-sheet-overlay.active {
    display: flex;
    animation: overlayFadeIn 0.25s ease;
}
@keyframes overlayFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.bottom-sheet-panel {
    position: relative;
    width: 100%;
    max-width: 600px;
    max-height: 85vh;
    overflow-y: auto;
    background-color: var(--card-bg-color);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border-top: 1px solid var(--card-border-color);
    border-left: 1px solid var(--card-border-color);
    border-right: 1px solid var(--card-border-color);
    border-radius: 24px 24px 0 0;
    padding: 12px 20px calc(20px + env(safe-area-inset-bottom)) 20px;
    box-shadow: 0 -10px 40px rgba(0,0,0,0.4);
    animation: sheetSlideUp 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}
.bottom-sheet-handle {
    width: 40px;
    height: 4px;
    background: var(--card-border-color);
    border-radius: 999px;
    margin: 0 auto 16px auto;
}
@keyframes sheetSlideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}
.bottom-sheet-panel.flex-content {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.sheet-close-btn {
    position: absolute;
    top: 12px;
    right: 16px;
    z-index: 20;
    color: var(--subtle-text-color);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: color 0.2s ease, background-color 0.2s ease;
}
.sheet-close-btn:hover {
    color: var(--text-color);
    background-color: var(--secondary-color);
}
.btn.card {
    border: 1px solid var(--card-border-color);
}
.btn.card:hover {
    border-color: var(--primary-color);
}
.lib-flag-card {
    cursor: pointer;
    position: relative;
    z-index: 1;
    border: 1px solid transparent;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), z-index 0s;
}
.lib-flag-card:hover,
.lib-flag-card:active,
.lib-flag-card.card-active {
    transform: translateY(-3px);
    box-shadow: 0 8px 18px rgba(0,0,0,0.35);
    border-color: var(--primary-color);
    z-index: 5;
}
.lib-flag-card:hover .flag-img,
.lib-flag-card:active .flag-img,
.lib-flag-card.card-active .flag-img {
    transform: scale(1.05);
}
.lib-flag-card .flag-img {
    transition: transform 0.3s ease, opacity 0.3s ease;
}
.lib-flag-card .flag-wrapper + div {
    border-top: 1px solid var(--card-border-color);
    margin-top: 4px;
}
/* 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);
}
.btn.card:hover,
.btn.card:active {
    border-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: none;
}
#quiz-modes-carousel::-webkit-scrollbar,
#home-quick-explore::-webkit-scrollbar,
#profile-achievement-preview-row::-webkit-scrollbar {
    display: none;
}
.carousel-chip {
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.carousel-chip:hover,
.carousel-chip:active {
    border-color: var(--primary-color) !important;   
}
#home-quick-explore .carousel-chip {
    max-width: 96px;
    justify-self: center;
}
/* --- 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;
    border-radius: 999px !important;
}
.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);
    border: 1.5px solid rgba(var(--primary-color-rgb), 0.28);
    border-radius: 999px !important;
}
.btn-secondary:hover {
    background-color: var(--secondary-hover-color);
    box-shadow: 0 0 15px rgba(var(--secondary-color-rgb), 0.3);
}
.btn-view-outline {
    background: rgba(var(--primary-color-rgb), 0.12);
    border: 1px solid rgba(var(--primary-color-rgb), 0.35);
    color: var(--primary-color);
}
.btn-view-outline:hover {
    background: rgba(var(--primary-color-rgb), 0.2);
    border-color: var(--primary-color);
}
#library-search-input,
.country-selector-search {
    background-color: var(--input-bg-color);
    border: 1px solid var(--card-border-color);
    color: var(--text-color);
}
#library-search-input::placeholder,
.country-selector-search::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: 95vw !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 {
    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 .flagx-title-text {
    /* Gradient judul disesuaikan dengan palet baru (Violet ke Pink) */
    font-family: 'Plus Jakarta Sans', 'Poppins', sans-serif;
    background: linear-gradient(90deg, var(--primary-hover-color), #EC41B1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
    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: 16px;
    border: 1px solid var(--primary-color);
    color: var(--text-color) !important;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    min-width: 148px;
}
#totalscore-container .totalscore-row {
    white-space: nowrap; /* KUNCI: cegah ikon/teks XP/Lv. turun ke baris baru */
}
/* Biar badge XP tetap 1 baris tapi lebih ramping khusus HP kecil, supaya tidak nabrak tombol menu/lonceng */
@media (max-width: 480px) {
    #totalscore-container {
        padding: 0.4rem 0.75rem;
        gap: 0.35rem;
        font-size: 0.95rem;
    }
    #level-badge {
        min-width: 60px;
        padding: 0.2rem 0.6rem;
        font-size: 0.85rem;
    }
}
/* Efek Hover untuk Total Score Container agar sama dengan Profile/Settings */
#totalscore-container:active {
    background-color: var(--secondary-color); /* Sedikit lebih gelap saat ditekan */
    transform: translate(-50%, -50%) !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 {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: 4 / 3;
  width: 100%;
  overflow: hidden;
  border-radius: 4px;
}
.flag-img-frame {
  position: relative;
  display: block;      
  width: 100%;          
  height: 100%;          
  line-height: 0;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#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; }
}
/* ============================================================
   HAMBURGER DRAWER (Profile + Settings)
   ============================================================ */
.side-drawer-panel {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    height: 100dvh;
    width: 320px;
    max-width: 85vw;
    background-color: var(--card-bg-color);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border-right: 1px solid var(--card-border-color);
    box-shadow: 10px 0 40px rgba(0,0,0,0.4);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--primary-color) transparent;
    animation: drawerSlideIn 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    padding-bottom: env(safe-area-inset-bottom);
}
@keyframes drawerSlideIn {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}
.bottom-sheet-overlay.closing {
    animation: overlayFadeOut 0.25s ease forwards;
}
.bottom-sheet-overlay.closing .side-drawer-panel {
    animation: drawerSlideOut 0.3s cubic-bezier(0.32, 0.72, 0, 1) forwards;
}
.bottom-sheet-overlay.closing .bottom-sheet-panel {
    animation: sheetSlideDown 0.3s cubic-bezier(0.32, 0.72, 0, 1) forwards;
}
@keyframes overlayFadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}
@keyframes drawerSlideOut {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}
@keyframes sheetSlideDown {
    from { transform: translateY(0); }
    to { transform: translateY(100%); }
}
#profile-panel {
    border-bottom: 1px solid var(--card-border-color);
    padding-bottom: 0.5rem;
}
/* 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;
}
/* ============================================================
   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 */
.bottom-sheet-panel::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 cubic-bezier(0.4, 0, 0.2, 1);
}
/* 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;
}
/* --- 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);
    cursor: pointer;
}
/* Merah (Untuk status: "Unofficial") */
.badge-unofficial {
    background: linear-gradient(135deg, #dc3545, #a71d2a);
    color: white;
}
/* --- FLAG SOURCE ATTRIBUTION (watermark kecil di pojok gambar) --- */
.flag-source-badge {
    position: absolute;
    bottom: 4px;
    left: 4px;
    z-index: 5;
    font-size: 0.6rem;
    font-weight: 600;
    line-height: 1.2;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.55);
    color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    max-width: calc(100% - 8px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
}
/* --- 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;
    }
}
/* --- FEEDBACK BUTTON (sisi kiri, seberang scroll-to-top) --- */
#feedback-btn {
    position: fixed;
    bottom: 20px;
    left: 20px;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    z-index: 999;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(var(--primary-color-rgb), 0.4);
    animation: fadeIn 0.4s ease-out;
}
#feedback-btn:hover {
    transform: translateY(-5px) scale(1.05);
}
/* Sembunyikan total saat quiz-screen aktif */
body.quiz-mode-active #feedback-btn {
    display: none !important;
}
body:not(.nav-hidden) #feedback-btn {
    bottom: 90px;
}
@media (max-width: 640px) {
    body:not(.nav-hidden) #feedback-btn {
        bottom: 85px;
        left: 15px;
    }
}
@media (max-width: 480px) {
    #feedback-btn {
        bottom: 1.5rem;
        left: 1.5rem;
        width: 3rem;
        height: 3rem;
    }
}
/* PWA install banner — mulai di sebelah kanan feedback-btn, bukan di belakangnya */
#pwa-banner {
    position: fixed;
    z-index: 900;
    bottom: 90px;
    left: 92px;
    right: 12px;
    max-width: 400px;
    border: 1px solid var(--primary-color);
    transform: translateY(20px);
    opacity: 0;
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.3s ease;
}
#pwa-banner.show { transform: translateY(0); opacity: 1; }
#pwa-banner.hide { transform: translateY(20px); opacity: 0; }
@media (max-width: 640px) {
    #pwa-banner { bottom: 85px; left: 87px; }
}
@media (max-width: 380px) {
    #pwa-banner .pwa-banner-desc { display: none; }
}
@media (min-width: 1024px) {
    #pwa-banner { left: calc(var(--sidebar-width) + 96px); right: 24px; bottom: 24px; }
    body.sidebar-collapsed #pwa-banner { left: calc(var(--sidebar-width-collapsed) + 96px); }
}
@media (prefers-reduced-motion: reduce) {
    #pwa-banner { transition: opacity 0.2s ease; }
    #pwa-banner.show, #pwa-banner.hide { transform: none; }
}
/* --- Sticky Mobile/Tablet Header ---
   Scoped to <1024px on purpose: desktop uses .desktop-header (position:fixed) instead.
   backdrop-filter is safe here since #level-info-panel & other bottom-sheet overlays are
   siblings of #app-header, not descendants — they don't sit inside the containing block
   backdrop-filter creates for position:fixed elements. If a fixed-position element is ever
   nested inside this header again, remove backdrop-filter/filter/transform here first. */
@media (max-width: 1023px) {
    #app-header {
        position: sticky;
        top: 0;
        left: 0;
        right: 0;
        width: auto;
        max-width: none;
        background-color: var(--card-bg-color);
        backdrop-filter: blur(20px) saturate(150%);
        -webkit-backdrop-filter: blur(20px) saturate(150%);
        border-bottom: 1px solid var(--card-border-color);
        z-index: 800;
        margin-left: -1rem;
        margin-right: -1rem;       
        padding-left: 1rem;
        padding-right: 1rem;
        /* sisanya tetap sama */
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    #app-header {
        margin-left: -1.5rem;
        margin-right: -1.5rem;        
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media (max-width: 1023px) {
    #app-container { padding-top: 0 !important; }
}

/* --- 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);
    border-radius: 26px 26px 0 0;
    z-index: 1000;
    padding-bottom: env(safe-area-inset-bottom); /* Dukungan iPhone berponi */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* 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;
    padding: 8px 4px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    flex: 1;
    cursor: pointer;
}
.nav-item i {
    font-size: 1.2rem;
}
.nav-pill-track {
    position: absolute;
    top: 6px;
    left: 0;
    right: 0;
    bottom: 6px;      /* ganti dari height:40px — auto nyesuaikan tinggi nav bar */
    display: flex;
    pointer-events: none;
    z-index: 0;
}
.nav-pill {
    width: 20%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.nav-pill::before {
    content: "";
    width: 82%;        
    height: 100%;
    border-radius: 20px;   /* dari 999px (oval) jadi rounded-rect, biar muat icon+teks */
    background-image: linear-gradient(135deg, var(--primary-color), #EC41B1);
    box-shadow: 0 6px 16px rgba(var(--primary-color-rgb), 0.5);
}
.nav-item { position: relative; z-index: 1; } /* biar icon/label tampil di atas pill */
.nav-item.active { color: #fff; font-weight: bold; }
/* 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;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: var(--text-color) !important;
}
/* Memastikan teks tidak meluap jika nama negara terlalu panjang */
#fotd-name {
    display: block;
    width: 100%;
    text-align: left;
    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 */
}
/* Saat Daily Streak tersembunyi (streak = 0), kartu Daily Challenge melebar penuh */
#home-streak-daily-grid:has(#streak-display.hidden) #daily-challenge-card {
    grid-column: 1 / -1;
}
#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 {
        padding: 14px 18px;
    }
    #fotd-img { max-height: 56px; }
    .text-[9px] { font-size: 8px; }
    #fotd-name { font-size: 15px; }
}
/* Notifikasi Toast Custom — stacked, closable, slides in from the right */
.toast-container {
    position: fixed;
    top: calc(88px + env(safe-area-inset-top, 0px));
    right: 16px;
    z-index: 10001;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(360px, calc(100vw - 32px));
    pointer-events: none;
}
.toast-msg {
    position: relative;
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    background: rgba(var(--primary-color-rgb), 0.15);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border: 2px solid var(--primary-color);
    border-radius: 14px;
    padding: 13px 12px 15px 14px;
    box-shadow: 
        0 0 12px rgba(var(--primary-color-rgb), 0.5),
        inset 4px 0 0 var(--primary-color);
    color: var(--text-color);
    overflow: hidden;
    transform: translateX(calc(100% + 32px));
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.3s ease;
}
.toast-msg.show { transform: translateX(0); opacity: 1; }
.toast-msg.hide { transform: translateX(calc(100% + 32px)); opacity: 0; }
.toast-msg-text {
    flex: 1;
    min-width: 0;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.4;
    word-wrap: break-word;
    padding-top: 1px;
}
.toast-msg-close {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--subtle-text-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.toast-msg-close:hover { background: var(--secondary-color); color: var(--text-color); }
.toast-msg-progress {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 4px;
    width: 100%;
    background: linear-gradient(90deg, var(--primary-color), #EC41B1);
    transform-origin: left;
    animation: toastProgress linear forwards;
}
@keyframes toastProgress { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (min-width: 1024px) {
    .toast-container { top: calc(var(--desktop-header-height) + 20px); right: 24px; }
}
@media (prefers-reduced-motion: reduce) {
    .toast-msg { transition: opacity 0.2s ease; }
    .toast-msg.show, .toast-msg.hide { transform: none; }
    .toast-msg-progress { animation: none; }
}
/* 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;
}
/* ========== NEW FEATURE STYLES ========== */
.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);
}
/* --- 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;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* ============================================================
   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);
}
/* Kartu tipe Feedback: reuse .custom-radio-card, layout kolom (ikon di atas label) */
.feedback-type-card {
    flex-direction: column;
    padding: 14px 8px;
    gap: 6px;
    cursor: pointer;
    width: 100%;
}
/* 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;
    box-shadow: 0 0 16px rgba(var(--primary-color-rgb), 0.45), 0 0 32px rgba(var(--primary-color-rgb), 0.2);
}
.profile-hex-level {
    position: absolute;
    bottom: -4px;
    right: -4px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary-color), #EC41B1);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    border: 2px solid var(--bg-color-dark);
    box-shadow: 0 0 10px rgba(var(--primary-color-rgb), 0.65), 0 2px 6px rgba(0,0,0,0.35);
    z-index: 20;
}
.profile-hex-level span {
    color: #fff;
    font-family: 'Plus Jakarta Sans', 'Poppins', sans-serif;
    font-weight: 800;
    font-size: 0.62rem;
    line-height: 1;
    letter-spacing: -0.02em;
}
/* --- 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);
}
/* --- BACK BUTTON ICON --- */
[data-translate-key="backButton"] {
    display: flex;
    align-items: center;
    gap: 6px;
}
[data-translate-key="backButton"]::before {
    content: "\f053"; /* fa-chevron-left */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.8em;
}
/* --- COMBO NOTIFICATION ANIMATION --- */
@keyframes comboIn {
    from { transform: translateX(-50%) scale(0.5); opacity: 0; }
    to   { transform: translateX(-50%) scale(1);   opacity: 1; }
}
/* --- PERFECT RUN CONFETTI --- */
.confetti-burst {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
}
.confetti-piece {
    position: absolute;
    top: -12px;
    width: 8px;
    height: 14px;
    border-radius: 2px;
    opacity: 0.9;
    animation: confettiFall linear forwards;
}
@keyframes confettiFall {
    0%   { transform: translateY(0) translateX(0) rotate(0deg); opacity: 1; }
    100% { transform: translateY(105vh) translateX(var(--confetti-drift, 0px)) rotate(600deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .confetti-burst { display: none; }
}
/* ============================================================
   DESKTOP SIDEBAR (persistent nav for wide viewports, replaces
   header + bottom-nav + hamburger drawer settings on desktop)
   ============================================================ */
:root { --sidebar-width: 240px; }
.desktop-sidebar {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    height: 100dvh;
    width: var(--sidebar-width);
    flex-direction: column;
    background-color: var(--card-bg-color);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border-right: 1px solid var(--card-border-color);
    padding: 0 14px 20px 14px;
    box-sizing: border-box;
    z-index: 900;
}
.desktop-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    height: var(--desktop-header-height);
    padding: 0 6px;
    box-sizing: border-box;
    border-bottom: 1px solid var(--card-border-color);
    overflow: hidden;
    flex-shrink: 0;
}
.desktop-sidebar-brand-text {
    font-family: 'Plus Jakarta Sans', 'Poppins', sans-serif;
    font-weight: 800;
    font-size: 1.15rem;
    white-space: nowrap;
    flex-shrink: 0;
    background: linear-gradient(90deg, var(--primary-hover-color), #EC41B1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.desktop-sidebar-nav { display: flex; flex-direction: column; gap: 4px; margin-top: 16px; }
.desktop-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    border-radius: 12px;
    background: none;
    border: none;
    color: var(--subtle-text-color);
    font-size: 0.9rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
}
.desktop-nav-item i { width: 18px; text-align: center; font-size: 1rem; }
.desktop-nav-item:hover { background: var(--secondary-color); color: var(--text-color); }
.desktop-nav-item.active {
    color: #fff;
    background-image: linear-gradient(135deg, var(--primary-color), #EC41B1);
    box-shadow: 0 4px 14px rgba(var(--primary-color-rgb), 0.3);
}
.desktop-sidebar-spacer { flex: 1 1 auto; }
.desktop-sidebar-utility { display: flex; gap: 8px; padding: 0 6px 14px 6px; }
.desktop-utility-btn {
    position: relative;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--secondary-color);
    border: 1px solid var(--card-border-color);
    color: var(--subtle-text-color);
    cursor: pointer;
    transition: all 0.2s ease;
}
.desktop-utility-btn:hover { color: var(--text-color); border-color: var(--primary-color); }
.desktop-header-xp-chip {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
    padding: 7px 14px;
    border-radius: 14px;
    background: var(--secondary-color);
    border: 1px solid var(--card-border-color);
    color: var(--text-color);
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 168px;
}
.desktop-header-xp-chip:hover { border-color: var(--primary-color); }
.desktop-header-xp-chip-row {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.desktop-header-xp-chip-track {
    width: 100%;
    height: 4px;
    border-radius: 999px;
    background: rgba(0,0,0,0.25);
    overflow: hidden;
}
.desktop-header-xp-chip-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--primary-color), #EC41B1);
    transition: width 0.5s ease;
}
.desktop-header-level-badge {
    background: var(--primary-color);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.2);
    min-width: 42px;
    text-align: center;
}
.notif-dot {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 16px;
    height: 16px;
    border-radius: 999px;
    background: var(--primary-color);
    border: 2px solid var(--secondary-color);
}
.desktop-profile-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 14px;
    border: 1px solid var(--card-border-color);
    background: var(--secondary-color);
    cursor: pointer;
    text-align: left;
    width: 100%;
    transition: all 0.2s ease;
}
.desktop-profile-card:hover { border-color: var(--primary-color); }
.desktop-profile-avatar-wrap {
    position: relative;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(var(--primary-color-rgb), 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
}
.desktop-profile-avatar-wrap img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.desktop-profile-avatar-wrap i { color: var(--subtle-text-color); font-size: 1rem; }
.desktop-achv-badge {
    position: absolute;
    bottom: -3px;
    right: -3px;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    border-radius: 999px;
    background: #facc15;
    color: #241b03;
    font-size: 0.6rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--secondary-color);
}
.desktop-profile-info { min-width: 0; flex: 1; }
.desktop-profile-name {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.desktop-profile-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
    font-size: 0.72rem;
    color: var(--subtle-text-color);
    font-weight: 600;
}
.desktop-profile-meta i { color: #fb923c; margin-right: 3px; }
@media (min-width: 1024px) {
    .desktop-sidebar { display: flex; }
    #app-header, .bottom-nav { display: none !important; }
    body { padding-bottom: 0 !important; }
    #app-container { margin-left: var(--sidebar-width); padding-bottom: 0 !important; }
    body.nav-hidden #app-container { padding-bottom: 0 !important; }
    .screen:not(#library-display-screen) { max-width: 760px !important; }
    #library-display-screen { max-width: min(1400px, 92vw) !important; }
    #scroll-to-top-btn,
    body:not(.nav-hidden) #scroll-to-top-btn { bottom: 24px; right: 24px; }
    #feedback-btn,
    body:not(.nav-hidden) #feedback-btn { left: calc(var(--sidebar-width) + 24px); bottom: 24px; }
    body.sidebar-collapsed #feedback-btn,
    body.sidebar-collapsed:not(.nav-hidden) #feedback-btn { left: calc(var(--sidebar-width-collapsed) + 24px); }
}
/* ============================================================
   DESKTOP SIDEBAR v2: wider + collapsible, inline Settings
   accordion, standalone Contact section, profile moved to a
   new desktop header (see below).
   ============================================================ */
:root {
    --sidebar-width: 260px;
    --sidebar-width-collapsed: 72px;
    --desktop-header-height: 64px;
}
.desktop-sidebar { transition: width 0.3s ease; }
body.sidebar-collapsed .desktop-sidebar { width: var(--sidebar-width-collapsed); }
@media (min-width: 1024px) {
    #app-container { transition: margin-left 0.3s ease; }
    body.sidebar-collapsed #app-container { margin-left: var(--sidebar-width-collapsed) !important; }
}
.desktop-sidebar-collapse-btn {
    display: none;
    position: fixed;
    top: 19px;
    left: calc(var(--sidebar-width) + 8px);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    background: var(--card-bg-color);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--card-border-color);
    color: var(--subtle-text-color);
    cursor: pointer;
    z-index: 950;
    font-size: 0.7rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    transition: left 0.3s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.desktop-sidebar-collapse-btn:hover { background: var(--secondary-color); color: var(--primary-color); border-color: var(--primary-color); }
body.sidebar-collapsed .desktop-sidebar-collapse-btn { left: calc(var(--sidebar-width-collapsed) + 8px); }
@media (min-width: 1024px) {
    .desktop-sidebar-collapse-btn { display: flex; }
}
/* Collapse to icon-rail: hide text/labels, center icons */
body.sidebar-collapsed .desktop-sidebar-brand-text,
body.sidebar-collapsed .desktop-nav-item span,
body.sidebar-collapsed .desktop-sidebar-bottom { display: none; }
body.sidebar-collapsed .desktop-sidebar-brand { justify-content: center; }
body.sidebar-collapsed .desktop-nav-item { justify-content: center; padding-left: 0; padding-right: 0; }
/* Sidebar bottom: Contact (static) + Settings (accordion trigger + content) */
.desktop-sidebar-bottom {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 10px;
    margin-top: 4px;
    border-top: 1px solid var(--card-border-color);
}
/* ============================================================
   DESKTOP HEADER: profile (avatar + name + chevron) + notif bell,
   right-aligned, sits above the main content to the right of the sidebar
   ============================================================ */
.desktop-header {
    display: none;
    position: fixed;
    top: 0;
    left: var(--sidebar-width);
    right: 0;
    height: var(--desktop-header-height);
    align-items: center;
    gap: 12px;
    padding: 0 24px;
    background: var(--card-bg-color);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border-bottom: 1px solid var(--card-border-color);
    z-index: 800;
    transition: left 0.3s ease;
}
body.sidebar-collapsed .desktop-header { left: var(--sidebar-width-collapsed); }
.desktop-header-spacer { flex: 1 1 auto; }
.desktop-header-profile-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px 6px 6px;
    border-radius: 999px;
    background: var(--secondary-color);
    border: 1px solid var(--card-border-color);
    cursor: pointer;
    transition: all 0.2s ease;
}
.desktop-header-profile-chip:hover { border-color: var(--primary-color); }
.desktop-header-profile-name {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-color);
    max-width: 140px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.desktop-header-chevron { font-size: 0.7rem; color: var(--subtle-text-color); }
@media (min-width: 1024px) {
    .desktop-header { display: flex; }
    #app-container { padding-top: calc(var(--desktop-header-height) + 24px); }
}
/* ============================================================
   Restyle the existing hamburger-drawer as a small anchored
   dropdown (not a full-height left panel) when opened from the
   desktop header profile chip. Same DOM/content, desktop-only CSS.
   ============================================================ */
@media (min-width: 1024px) {
    #hamburger-drawer.active {
        background: transparent;
        align-items: flex-start;
        justify-content: flex-end;
        padding: calc(var(--desktop-header-height) + 10px) 24px 0 0;
    }
    #hamburger-drawer .side-drawer-panel {
        position: static !important;
        width: 340px !important;
        max-width: 340px;
        height: auto !important;
        max-height: calc(100vh - var(--desktop-header-height) - 24px);
        border-radius: 16px;
        border: 1px solid var(--card-border-color);
        box-shadow: 0 12px 40px rgba(0,0,0,0.45);
        animation: dropdownFadeIn 0.2s ease;
    }
    #hamburger-drawer.closing .side-drawer-panel { animation: dropdownFadeOut 0.18s ease forwards; }
}
@keyframes dropdownFadeIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes dropdownFadeOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-8px); } }
/* ============================================================
   DESKTOP CONTENT WIDTH — v1 gave every screen the same flat
   760px cap, which just floats a narrow column in a lot of empty
   space on wide monitors. Differentiate by screen type instead:
   - quiz-screen stays tight/focused (one flag+question at a time)
   - browse/selector grids get real room to breathe & reflow
   - everything else gets a modest bump over the old 760px
   ============================================================ */
@media (min-width: 1024px) {
    .screen:not(#library-display-screen) { max-width: 880px !important; }
    #quiz-screen { max-width: 680px !important; }
    #quiz-modes-screen,
    #library-categories-screen,
    #continent-clash-screen,
    #continent-library-screen,
    #subdivision-library-screen,
    #territory-library-screen,
    #historical-library-screen { max-width: 1040px !important; }
}
/* Tablet range (640-1023px): same tiering as the desktop block above, just
   starting earlier so screens don't sit stuck at a narrow 600px on tablets
   / small laptops while #library-display-screen (no such cap) already uses
   the full width. Same values as desktop — on this narrower range they mostly
   act as a ceiling rather than an active constraint. */
@media (min-width: 640px) and (max-width: 1023px) {
    .screen:not(#library-display-screen) { max-width: 880px !important; }
    #quiz-screen { max-width: 680px !important; }
    #quiz-modes-screen,
    #library-categories-screen,
    #continent-clash-screen,
    #continent-library-screen,
    #subdivision-library-screen,
    #territory-library-screen,
    #historical-library-screen { max-width: 1040px !important; }
}
/* Contact used to live nested inside Settings — now it's its own sibling
   section in the mobile drawer. Desktop already has its own standalone
   Contact section in the sidebar, so hide this mobile copy there. */
@media (min-width: 1024px) {
    #contact-panel { display: none; }
}
/* Achievement sheet: restyle from a mobile bottom-sheet into a centered
   desktop modal (grid content reads better centered than edge-anchored) */
@media (min-width: 1024px) {
    #achievement-sheet { align-items: center; }
    #achievement-sheet .bottom-sheet-handle { display: none; }
    #achievement-sheet .bottom-sheet-panel {
        border-radius: 20px;
        max-width: 680px;
        animation: fadeInScale 0.25s ease;
    }
    #achievement-sheet.closing .bottom-sheet-panel { animation: dropdownFadeOut 0.18s ease forwards; }
}
/* settings-panel carries its own "Settings" heading (needed when it sits inside
   the mobile drawer, which has no other Settings label). The desktop modal
   already has its own header with the same label, so hide the inner one there
   only — mobile drawer keeps it as-is. */
#desktop-settings-modal-slot #settings-panel > h4:first-child { display: none; }
/* Point 5: the small "Flag-X" wordmark above the home-screen hero heading is
   redundant on desktop, where the sidebar already carries persistent branding. */
@media (min-width: 1024px) {
    #home-hero-brand-row { display: none; }
}
/* Quick Explore chips are aspect-square, sized off the grid column width —
   fine on mobile, but ballooned into oversized squares once home-screen got
   wider on desktop (chip size scales with container width). On desktop,
   restyle each chip into a short wide row (icon box + label side by side,
   same pattern as the streak/daily-challenge cards above it) instead of a
   tall stacked square — height then follows padding, not column width, so
   it can't balloon again regardless of how wide the grid gets. */
@media (min-width: 1024px) {
    #home-quick-explore .carousel-chip {
    aspect-ratio: auto;
    max-width: none;
    justify-self: stretch;
    flex-direction: row;
    justify-content: flex-start;
    padding: 10px 12px;
    gap: 10px;
}
    #home-quick-explore .carousel-chip i {
        width: 32px;
        height: 32px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        background: rgba(var(--primary-color-rgb), 0.12);
        font-size: 0.85rem;
    }
    #home-quick-explore .carousel-chip span {
        text-align: left;
        font-size: 0.72rem;
    }
}
/* ============================================================
   PROFILE PANEL v2 achievement hexagon preview badges
   ============================================================ */
.achv-hex-badge {
    width: 32px;
    height: 37px;
    flex-shrink: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease;
}
.achv-hex-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.achv-hex-bg polygon {
    fill: var(--secondary-color);
    stroke: var(--card-border-color);
    stroke-width: 1.5px;
    stroke-linejoin: round;
    transition: fill 0.2s ease, stroke 0.2s ease;
}
.achv-hex-badge i {
    position: relative;
    z-index: 1;
    font-size: 0.7rem;
    color: var(--subtle-text-color);
}
.achv-hex-badge.unlocked .achv-hex-bg polygon {
    fill: rgba(250,204,21,0.18);
    stroke: rgba(250,204,21,0.65);
}
.achv-hex-badge.unlocked i {
    color: #facc15;
    filter: drop-shadow(0 0 4px rgba(250,204,21,0.5));
}

/* ============================================================
   ROUND 3 — RADICAL RESTRUCTURE (colors untouched, everything else rebuilt)
   Principle: focused single-task screens (quiz gameplay, results) go
   immersive full-bleed with no card container; browsing screens (home,
   library, leaderboard) keep cards but the material changes from
   translucent glass-blur to solid, deeply-shadowed panels. Navigation,
   quiz-answer presentation and the results hero are all reworked.
   ============================================================ */

/* --- Material shift: every .card goes from frosted glass to a solid,
   richly-shadowed panel. Cascades to every screen that uses .card. */
/* .card intentionally left as the ORIGINAL glassmorphism rule (earlier
   in this file) — static/persistent page content stays glass. The new
   solid material now lives ONLY on modal/bottom-sheet/side-drawer
   contexts, see below. */
.bottom-nav {
    border-radius: 18px 18px 0 0 !important;
    border-top: 2px solid rgba(var(--primary-color-rgb), 0.32) !important;
}

/* --- Solid/dramatic material lives ONLY on transient overlay UI (modals,
   bottom sheets, the hamburger side drawer) — persistent page content
   (cards, FOTD, nav) stays the original glassmorphism above. */
/* Solid material scoped to SMALL, individual, repeated tiles only — they
   don't cover enough of the viewport to hide the bg-globe watermark, and
   the contrast helps them read as distinct, tappable items. Large/main
   containers (base .card, bottom sheets, side drawer, modal boxes) are
   intentionally left as the original glassmorphism above. */
.accent-card,
.lib-flag-card,
#results-breakdown > div,
#history-list > div,
#leaderboard-list .rounded-xl:not(.border-2) {
    background: linear-gradient(160deg, rgba(42,36,64,0.96), rgba(30,25,46,0.98)) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1.5px solid rgba(var(--primary-color-rgb), 0.3) !important;
    box-shadow: 0 14px 28px -10px rgba(0,0,0,0.5) !important;
}

/* --- Global: bolder, tighter section headers app-wide */
.screen.active h1, .screen.active h2, .screen.active h3,
.modal h3, .bottom-sheet-panel h3 {
    font-family: 'Plus Jakarta Sans', 'Poppins', sans-serif;
}

/* --- Flag-pennant motif on every accent-card (quiz-mode / library cards):
   a small corner triangle in the card's own accent color, replacing the
   plain left stripe. Whole card is tappable (wired in script.js above). */
.accent-card::before { display: none !important; }
.accent-card::after {
    content: "";
    position: absolute;
    top: 0; right: 0;
    width: 0; height: 0;
    border-style: solid;
    border-width: 0 28px 28px 0;
    border-color: transparent var(--card-accent, var(--primary-color)) transparent transparent;
    opacity: 0.92;
    pointer-events: none;
    transition: border-width 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
.accent-card:hover::after, .accent-card:active::after { border-width: 0 36px 36px 0; }


/* --- Bottom nav: Home becomes a floating FAB that pokes above the bar,
   instead of five identical icons. NAV_ORDER math in script.js assumes
   equal-width flex items, so only the icon (not the nav-item box) is
   resized here — layout math stays untouched. */
#nav-home i {
    position: relative;
    transform: translateY(-14px);
    width: 46px; height: 46px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color), #EC41B1);
    color: #fff !important;
    font-size: 1.05rem !important;
    box-shadow: 0 10px 20px -4px rgba(var(--primary-color-rgb), 0.65);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
#nav-home:hover i, #nav-home:active i {
    transform: translateY(-18px);
    box-shadow: 0 14px 26px -4px rgba(var(--primary-color-rgb), 0.75);
}
#nav-home span { position: relative; top: -10px; font-size: 0.62rem; }

#home-streak-daily-grid { grid-template-columns: 1fr 1.35fr !important; }
#fotd-container {
    padding: 26px 22px !important;
    border-radius: 28px !important;
    background: linear-gradient(150deg, rgba(var(--primary-color-rgb),0.20), rgba(236,65,177,0.08) 60%), var(--card-bg-color) !important;
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    border: 1px solid rgba(var(--primary-color-rgb),0.35) !important;
}
#fotd-name {
    font-family: 'Plus Jakarta Sans', 'Poppins', sans-serif !important;
    font-size: clamp(1.35rem, 6.2vw, 1.65rem) !important;
    font-weight: 700 !important;
    letter-spacing: -0.015em;
}
#fotd-img { max-height: 92px !important; }

/* --- Quiz Modes + Library Categories: bento grid, forced 2-col even on
   narrow phones. First & last item are full-width featured tiles; the
   rest compress into an icon-forward compact grid. */
#quiz-modes-screen > .grid, #library-categories-screen > .grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
}
#quiz-modes-screen > .grid > div:nth-child(1),
#library-categories-screen > .grid > div:nth-child(1) {
    grid-column: span 2 !important;
    padding: 22px 20px !important;
}
#quiz-modes-screen > .grid > div:nth-child(1) h3,
#library-categories-screen > .grid > div:nth-child(1) h3 {
    font-size: 1.32rem !important;
}
#quiz-modes-screen > .grid > div:nth-child(n+2),
#library-categories-screen > .grid > div:nth-child(n+2) { padding: 14px !important; }
#quiz-modes-screen > .grid > div:nth-child(n+2) h3,
#library-categories-screen > .grid > div:nth-child(n+2) h3 {
    font-size: 0.92rem !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
}
#quiz-modes-screen > .grid > div:nth-child(n+2) h3 i,
#library-categories-screen > .grid > div:nth-child(n+2) h3 i { font-size: 1.5rem !important; margin: 0 !important; }
#quiz-modes-screen > .grid > div:nth-child(n+2) p,
#library-categories-screen > .grid > div:nth-child(n+2) p {
    display: -webkit-box !important; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
    overflow: hidden; font-size: 0.68rem !important; padding-left: 0 !important;
}
#quiz-modes-screen > .grid > div:nth-child(n+2) .mt-4,
#library-categories-screen > .grid > div:nth-child(n+2) .mt-4 { margin-top: 10px !important; }
#quiz-modes-screen > .grid > div:nth-child(n+2) button,
#library-categories-screen > .grid > div:nth-child(n+2) button { padding: 8px !important; font-size: 0.72rem !important; }

/* --- Quiz gameplay: strip the card container entirely for an immersive,
   full-bleed feel. Flag becomes a dominant hero image. Answers switch
   from a 2x2 grid to a vertical list with auto-lettered (A/B/C/D) badges
   via CSS counters — no JS needed, and no change to click logic/text. */
#quiz-screen > .card {
    background: transparent !important;
    backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 4px !important;
}
#timer {
    font-family: 'Plus Jakarta Sans', 'Poppins', sans-serif !important;
    font-size: 2.4rem !important;
    letter-spacing: -0.02em;
}
#score, #question-counter { font-family: 'Plus Jakarta Sans', 'Poppins', sans-serif; font-weight: 700; }
#quiz-prompt {
    font-family: 'Plus Jakarta Sans', 'Poppins', sans-serif;
    font-size: 1.35rem !important;
    font-weight: 700;
}
#quiz-screen div:has(> #flag-display-quiz) { max-width: 100% !important; }
#options-container {
    grid-template-columns: 1fr !important;
    counter-reset: option-counter;
    gap: 10px !important;
}
#options-container button {
    counter-increment: option-counter;
    position: relative !important;
    text-align: left !important;
    justify-content: flex-start !important;
    padding-left: 56px !important;
    min-height: 56px !important;
    border: 2px solid var(--card-border-color) !important;
    border-radius: 16px !important;
    font-weight: 600 !important;
}
#options-container button::before {
    content: counter(option-counter, upper-alpha);
    position: absolute;
    left: 12px; top: 50%; transform: translateY(-50%);
    width: 30px; height: 30px;
    border-radius: 9px;
    background: rgba(var(--primary-color-rgb), 0.18);
    color: var(--primary-color);
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 0.9rem;
    font-family: 'Plus Jakarta Sans', 'Poppins', sans-serif;
}
#options-container button.correct::before, #options-container button.incorrect::before {
    background: rgba(255,255,255,0.28);
    color: #fff;
}

/* --- Results: outer container keeps the standard solid .card treatment
   (kept, not stripped, so the screen doesn't feel empty). Only the 4-stat
   grid becomes an asymmetric 2x2 (Correct/Wrong bigger on top, Accuracy/
   Avg.Time smaller beneath). */
#results-breakdown { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
#results-breakdown > div {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    gap: 2px 10px !important;
    padding: 10px 12px !important;
    min-width: 0 !important;
}
#results-breakdown > div > div:first-child { grid-column: 1; grid-row: 1 / 3; }
#results-breakdown > div > div:nth-child(3) { grid-column: 2; grid-row: 1; text-align: left !important; min-width: 0; }
#results-breakdown > div > div:nth-child(2) {
    grid-column: 2;
    grid-row: 2;
    text-align: left !important;
    font-family: 'Plus Jakarta Sans', 'Poppins', sans-serif;
    min-width: 0;
}

/* --- Vexiloquest-style quiz answers: check/cross on reveal, 50:50 fade */
#options-container button.correct,
#options-container button.incorrect {
    padding-right: 42px !important;
}
#options-container button.correct::after,
#options-container button.incorrect::after {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.05rem;
    color: #fff;
}
#options-container button.correct::after { content: "\f00c"; }
#options-container button.incorrect::after { content: "\f00d"; }
#options-container button.fifty-fifty-out {
    opacity: 0.3 !important;
    text-decoration: line-through;
    pointer-events: none;
}
#powerup-5050-btn:disabled { cursor: default; }