/* --- CSS STYLING --- */
		
		/* Instantly collapse the ad box if Google has no ads available */
        ins.adsbygoogle[data-ad-status="unfilled"] {
            display: none !important;
        }
		
		
        /* --- 1. DEFAULT (Midnight Canopy) --- */
        :root {
            --bg-color: #121212; --card-bg: #1e1e1e;
            --primary-green: #2e7d32; --light-green: #4caf50; --danger-red: #d32f2f; --gold: #ffd700;
            --text-main: #ffffff; --text-muted: #aaaaaa;
            --btn-neutral: #333333; --btn-neutral-text: #ffffff;
            --btn-blue: #1DA1F2; --btn-orange: #f57c00;
            --cal-bg: rgba(255,255,255,0.05);
            --chat-other-bg: #333333; --chat-other-text: #dddddd;
            --faq-bg: #111111;
            --rank-card-bg: linear-gradient(135deg, #2e7d32, #1b5e20);
            --card-secondary-bg: linear-gradient(145deg, #1a1a1a, #222);
            --fade-out-bg: linear-gradient(to bottom, transparent, #222);
            --card-border: #444444;
            --rank-accent: var(--gold);
            --progress-bg: #222222;
            --progress-fill: var(--gold);
        }

        /* --- 2. FIELD NOTEBOOK (Light Mode) --- */
        [data-theme="light"] {
            --bg-color: #f8fafc; --card-bg: #ffffff;
            --primary-green: #22c55e; --light-green: #4ade80; 
            --text-main: #334155; --text-muted: #64748b;
            --btn-neutral: #e2e8f0; --btn-neutral-text: #334155;
            --btn-blue: #3b82f6; --btn-orange: #f97316;
            --cal-bg: rgba(0,0,0,0.04);
            --chat-other-bg: #e2e8f0; --chat-other-text: #334155;
            --faq-bg: #f8fafc;
            --rank-card-bg: linear-gradient(135deg, #86efac, #4ade80);
            --card-secondary-bg: #f1f5f9;
            --fade-out-bg: linear-gradient(to bottom, transparent, #f8fafc);
            --card-border: #cbd5e1;
            --rank-accent: #064e3b;
            --progress-bg: #e2e8f0;
            --progress-fill: #ea580c;
        }

        /* --- 3. DIPTEROCARP (Warm) --- */
        [data-theme="wood"] {
            --bg-color: #3e2723; --card-bg: #4e342e;
            --primary-green: #689f38; --light-green: #8bc34a; 
            --text-main: #efebe9; --text-muted: #bcaaa4;
        }

        /* --- 4. WATERSHED (Cool) --- */
        [data-theme="water"] {
            --bg-color: #0f2027; --card-bg: #203a43;
            --primary-green: #009688; --light-green: #4db6ac; 
            --text-main: #e0f2f1; --text-muted: #80cbc4;
        }

        /* --- 5. FIRE HAZARD (Orange) --- */
        [data-theme="fire"] {
            --bg-color: #212121; --card-bg: #323232;
            --primary-green: #e65100; --light-green: #ff9800; 
            --text-main: #fff3e0; --text-muted: #ffb74d;
        }

        /* --- 6. KWEK CARDS (Accessible Flashcard) --- */
        [data-theme="kwek"] {
            --bg-color: #FAFAFA; --card-bg: #FFFFFF;
            --primary-green: #F97316; --light-green: #EA580C; 
            --text-main: #171717; --text-muted: #737373;
            --btn-neutral: #E5E7EB; --btn-neutral-text: #171717;
            --btn-blue: #3b82f6; --btn-orange: #F97316;
            --cal-bg: rgba(0,0,0,0.04);
            --chat-other-bg: #F3F4F6; --chat-other-text: #171717;
            --faq-bg: #FAFAFA;
            --rank-card-bg: linear-gradient(135deg, #F97316, #EA580C);
            --card-secondary-bg: #F9FAFB;
            --fade-out-bg: linear-gradient(to bottom, transparent, #FAFAFA);
            --card-border: #E5E7EB;
            --rank-accent: #FFFFFF;
            --progress-bg: #E5E7EB;
            --progress-fill: #F97316;
        }

        /* --- 7. FACEBOOK LIGHT (Social Media Classic) --- */
        [data-theme="fb-light"] {
            --bg-color: #F0F2F5; --card-bg: #FFFFFF;
            --primary-green: #1877F2; --light-green: #166FE5; 
            --text-main: #050505; --text-muted: #65676B;
            --btn-neutral: #E4E6EB; --btn-neutral-text: #050505;
            --btn-blue: #1877F2; --btn-orange: #F97316;
            --cal-bg: rgba(0,0,0,0.05);
            --chat-other-bg: #E4E6EB; --chat-other-text: #050505;
            --faq-bg: #F0F2F5;
            --rank-card-bg: linear-gradient(135deg, #1877F2, #166FE5);
            --card-secondary-bg: #F7F8FA;
            --fade-out-bg: linear-gradient(to bottom, transparent, #F0F2F5);
            --card-border: #CED0D4;
            --rank-accent: #FFFFFF;
            --progress-bg: #E4E6EB;
            --progress-fill: #1877F2;
        }

        * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', Tahoma, sans-serif; }
        body { 
            background-color: var(--bg-color); 
            color: var(--text-main); 
            max-width: 600px; 
            margin: 0 auto; 
            height: 100vh; /* Fallback for older browsers */
            height: 100dvh; /* Dynamic viewport height fixes the mobile address bar issue */
            display: flex; 
            flex-direction: column; 
            overflow: hidden; /* Prevents the whole page from scrolling */
        }
        
        main { 
            flex-grow: 1; 
            padding: 20px; 
            /* padding-bottom removed because nav is now part of the flex layout */
            overflow-y: auto; /* Allows only the middle content to scroll perfectly to the nav */
        }

		/* --- HEADER & PROFILE ICON --- */
header { 
    display: flex; 
    background-color: #1a1a1a; /* Changed from var(--card-bg) to match your inline style preference */
    padding: 10px 15px; 
    border-bottom: 2px solid var(--primary-green); 
    justify-content: space-between; 
    align-items: center; 
    min-height: 60px;
}

/* This container holds the VIP, Avatar, and Name in one line */
#header-profile-container {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.1);
    padding: 5px 12px;
    border-radius: 20px;
    transition: background 0.3s;
}

#header-profile-container:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Specific styling for the Username in the header */
#header-username {
    font-weight: 600;
    font-size: 0.9rem;
    color: #ffffff;
    white-space: nowrap;
}

/* VIP Badge styling */
#vip-badge {
    color: #000;
    font-size: 0.7rem;
    font-weight: bold;
    background: var(--gold);
    padding: 2px 8px;
    border-radius: 5px;
    text-transform: uppercase;
}

        /* --- UPGRADE BANNER & SCREEN --- */
        #upgrade-banner { background: linear-gradient(45deg, #b8860b, #ffd700); color: #000; padding: 15px; border-radius: 12px; text-align: center; font-weight: bold; margin-bottom: 20px; cursor: pointer; box-shadow: 0 4px 10px rgba(255, 215, 0, 0.2); animation: pulse 2s infinite; }
        @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.02); } 100% { transform: scale(1); } }
        #upgrade-screen { display: none; flex-direction: column; align-items: center; justify-content: center; height: 70vh; text-align: center; animation: fadeIn 0.5s; }
        .lock-icon { font-size: 4em; margin-bottom: 15px; }
        .lock-title { font-size: 1.8em; margin-bottom: 10px; color: var(--gold); }
        .lock-desc { color: var(--text-muted); margin-bottom: 25px; font-size: 0.95em; line-height: 1.4; }
        .key-input { padding: 15px; border-radius: 8px; border: 2px solid #333; background: var(--bg-color); color: var(--text-main); font-size: 1.1em; width: 100%; max-width: 300px; margin-bottom: 15px; text-align: center; text-transform: uppercase; }
        .btn-unlock { background-color: var(--gold); color: #000; padding: 15px 30px; border: none; border-radius: 8px; font-size: 1.1em; font-weight: bold; cursor: pointer; width: 100%; max-width: 300px; margin-bottom: 10px;}
        .btn-cancel { background: transparent; color: var(--text-muted); border: none; text-decoration: underline; cursor: pointer; margin-top: 10px; font-size: 0.9em; }
        .error-msg { color: #ff5252; margin-top: 15px; display: none; font-size: 0.9em; font-weight: bold; }

        /* --- HOME SCREEN --- */
        #home-screen { display: block; animation: fadeIn 0.3s; }
        #home-screen h2 { margin-bottom: 20px; font-size: 1.5em; }
        .category-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
        .category-card { background-color: var(--card-bg); border: 1px solid var(--card-border, #333); border-radius: 12px; padding: 20px 10px; text-align: center; cursor: pointer; transition: 0.2s; }
        .category-card:active { transform: scale(0.95); background-color: var(--primary-green); }
        .cat-icon { font-size: 2.5em; margin-bottom: 10px; }
        .cat-title { font-size: 0.9em; font-weight: bold; line-height: 1.2; }

        /* --- CATEGORY MASTERY STATS --- */
        .cat-stat-container { background: var(--card-bg); padding: 15px; border-radius: 12px; border: 1px solid var(--card-border, #333); margin-top: 15px; }
        .cat-stat-row { display: flex; justify-content: space-between; margin-bottom: 12px; font-size: 0.85em; align-items: center;}
        .cat-stat-row:last-child { margin-bottom: 0; }
        .cat-stat-name { flex: 1 1 auto; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 10px;}
        .cat-stat-bar-bg { flex: 0 1 30%; height: 8px; background: var(--progress-bg); border-radius: 4px; overflow: hidden; min-width: 50px; }
        .cat-stat-bar-fill { height: 100%; background: var(--progress-fill); transition: width 0.5s; }
        .cat-stat-pct { flex: 0 0 auto; white-space: nowrap; text-align: right; color: var(--progress-fill); font-weight: bold;}

        /* --- BATTLE HUB --- */
        #battle-hub { display: none; animation: fadeIn 0.3s; }
        .battle-card { background: var(--card-bg); border: 2px solid var(--card-border, #444); border-radius: 12px; padding: 20px; margin-bottom: 15px; text-align: center; cursor: pointer; transition: 0.2s; }
        .battle-card:active { transform: scale(0.98); border-color: var(--light-green); }
        .battle-card h3 { color: var(--gold); margin-bottom: 5px; font-size: 1.3em;}
        .battle-card p { color: var(--text-muted); font-size: 0.9em; margin-bottom: 15px; }
        .btn-battle { background: var(--primary-green); color: white; border: none; padding: 10px 20px; border-radius: 8px; font-weight: bold; width: 100%; font-size: 1em; }
        .btn-battle.locked { background: #333; color: #777; cursor: not-allowed; }

        /* Waiting Room */
        #waiting-room { display: none; text-align: center; animation: fadeIn 0.3s; }
        .room-code-box { background: #222; border: 2px dashed var(--gold); padding: 15px; font-size: 2em; letter-spacing: 5px; font-weight: bold; color: var(--gold); margin-bottom: 20px; border-radius: 10px; }
        .player-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 20px; }
        .player-slot { background: var(--card-bg); padding: 10px; border-radius: 8px; border: 1px solid var(--card-border, #333); font-size: 0.8em; display: flex; flex-direction: column; align-items: center; }
        .player-slot.empty { opacity: 0.5; border: 1px dashed var(--card-border, #555); }
        .player-avatar { font-size: 2em; margin-bottom: 5px; }

        /* Live Leaderboard & Timer */
        .live-ranks { display: flex; gap: 5px; overflow-x: auto; padding-bottom: 10px; margin-bottom: 15px; }
        .live-rank-item { background: #222; border: 1px solid var(--card-border, #444); border-radius: 8px; padding: 5px 10px; font-size: 0.8em; display: flex; align-items: center; gap: 5px; white-space: nowrap; }
        .live-rank-item.is-me { border-color: var(--gold); background: rgba(255,215,0,0.1); }
        .timer-text { font-size: 1.5em; font-weight: bold; color: var(--gold); text-align: center; margin-bottom: 10px; background: #222; padding: 5px; border-radius: 8px; border: 1px dashed var(--card-border, #555); }

        /* --- CHAT SCREEN --- */
        #chat-screen { 
    display: none; 
    flex-direction: column; 
    flex-grow: 1; /* Add this instead of height: 100% */
    animation: fadeIn 0.3s; 
    padding-bottom: 20px;
}
		
        .chat-header-tabs { display: flex; background: var(--card-bg); border-radius: 10px; padding: 5px; margin-bottom: 15px; border: 1px solid var(--card-border, #333); }
        .chat-tab { flex: 1; padding: 10px; text-align: center; background: transparent; border: none; color: var(--text-muted); font-weight: bold; cursor: pointer; border-radius: 8px; transition: 0.2s; }
        .chat-tab.active { background: var(--primary-green); color: white; }
        .chat-box { flex-grow: 1; background: var(--card-bg); border-radius: 12px; border: 1px solid var(--card-border, #333); padding: 15px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; max-height: 60vh; }
        .msg-row { display: flex; width: 100%; margin-bottom: 5px; }
        .msg-row.me { justify-content: flex-end; }
        .msg-bubble { max-width: 85%; width: fit-content; padding: 10px 15px; border-radius: 15px; font-size: 0.95em; line-height: 1.4; word-wrap: break-word; white-space: pre-wrap; }
        .msg-row.me .msg-bubble { background: var(--primary-green); color: white; border-bottom-right-radius: 2px; }
        .msg-row.other .msg-bubble { background: var(--chat-other-bg); color: var(--chat-other-text); border-bottom-left-radius: 2px; }
        .msg-author { font-size: 0.75em; color: var(--text-muted); margin-bottom: 3px; display: block; }
        .announcement-card { background: var(--card-secondary-bg); border-left: 4px solid var(--gold); padding: 15px; border-radius: 8px; margin-bottom: 10px; }
        .announce-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
        .announce-badge { background: var(--danger-red); color: white; font-size: 0.7em; padding: 3px 8px; border-radius: 12px; font-weight: bold; text-transform: uppercase; }
        .announce-date { font-size: 0.75em; color: var(--text-muted); }
        .announce-body { font-size: 0.95em; color: var(--text-main); margin-bottom: 10px; line-height: 1.4; transition: max-height 0.3s ease; }
        
        /* New Styles for Images and Expanding */
        .announce-img { width: 100%; max-height: 250px; object-fit: cover; border-radius: 8px; margin-bottom: 10px; border: 1px solid var(--card-border); }
        .announce-body.collapsed { max-height: 60px; overflow: hidden; position: relative; }
        .announce-body.collapsed::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 30px; background: var(--fade-out-bg); }
        .btn-read-more { background: none; border: none; color: var(--gold); cursor: pointer; font-size: 0.85em; font-weight: bold; margin-bottom: 10px; padding: 0; display: block;}
        .announce-link { color: #4285F4; text-decoration: none; font-weight: bold; font-size: 0.9em; display: inline-block; margin-right: 15px;}
        .announce-link:hover { text-decoration: underline; }
        .chat-input-area { margin-top: 15px; display: flex; flex-direction: column; gap: 5px; }
        .chat-stats { display: flex; justify-content: space-between; font-size: 0.8em; color: var(--text-muted); padding: 0 5px; }
        .chat-input-row { display: flex; gap: 10px; }
        .chat-input { flex-grow: 1; padding: 12px; border-radius: 20px; border: 1px solid #444; background: var(--bg-color); color: var(--text-main); font-size: 1em; }
        .btn-send { background: var(--primary-green); color: white; border: none; border-radius: 50%; width: 45px; height: 45px; display: flex; justify-content: center; align-items: center; cursor: pointer; font-size: 1.2em; transition: 0.2s; }
        .btn-send:disabled { background: #333; color: #777; cursor: not-allowed; }

        /* --- MORE SCREEN --- */
        #more-screen { display: none; animation: fadeIn 0.3s; padding-bottom: 20px; }
        .more-menu-item { background: var(--card-bg); border: 1px solid var(--card-border, #333); padding: 15px 20px; border-radius: 12px; margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; transition: 0.2s; font-size: 1.1em; }
        .more-menu-item:active { transform: scale(0.98); border-color: var(--light-green); }
        .more-icon { font-size: 1.5em; margin-right: 15px; }
        .more-content-view { display: none; background: var(--faq-bg); padding: 20px; border-radius: 12px; border-left: 4px solid var(--primary-green); margin-top: -5px; margin-bottom: 15px; line-height: 1.5; font-size: 0.95em; color: var(--text-main); }
		/* --- FAQ STYLES --- */
        .faq-item { background: var(--card-secondary-bg); border: 1px solid var(--card-border); border-radius: 8px; margin-bottom: 8px; overflow: hidden; }
        .faq-question { padding: 12px 15px; font-weight: bold; font-size: 0.9em; cursor: pointer; display: flex; justify-content: space-between; align-items: center; color: var(--text-main); transition: background 0.2s; }
        .faq-question:hover { background: var(--card-bg); }
        .faq-answer { display: none; padding: 0 15px 15px 15px; font-size: 0.85em; color: var(--text-muted); line-height: 1.5; border-top: 1px solid var(--card-border); margin-top: 5px; padding-top: 10px; }
		
		/* --- PROFILE & EDIT PROFILE --- */
        #profile-screen, #edit-profile-screen { display: none; text-align: center; animation: fadeIn 0.5s; }
        .profile-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
        .btn-edit-profile { background: var(--btn-neutral); color: var(--btn-neutral-text); border: none; padding: 8px 15px; border-radius: 8px; font-size: 0.9em; font-weight: bold; cursor: pointer; }
        .rank-card { background: var(--rank-card-bg); padding: 30px; border-radius: 20px; margin-bottom: 20px; box-shadow: 0 10px 20px rgba(0,0,0,0.3); }
        .rank-icon { font-size: 4em; margin-bottom: 5px; }
        .rank-username { font-size: 1.4em; font-weight: bold; margin-bottom: 5px; color: var(--rank-accent); }
        .rank-name { font-size: 1.2em; margin-bottom: 5px; color: var(--text-main); }
        .xp-display { font-size: 1.1em; opacity: 0.9; margin-bottom: 15px; color: var(--text-main); }
        .progress-container { background: var(--progress-bg); height: 12px; border-radius: 10px; width: 100%; overflow: hidden; }
        .progress-bar { background: var(--progress-fill); height: 100%; width: 0%; transition: width 1s ease-in-out; }
        .stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 20px; }
        .stat-box { background: var(--card-bg); padding: 15px; border-radius: 12px; border: 1px solid var(--card-border, #333); }
        .stat-val { font-size: 1.4em; font-weight: bold; color: var(--light-green); }
        .stat-label { font-size: 0.8em; color: var(--text-muted); text-transform: uppercase; margin-top: 5px;}
        .edit-form { background: var(--card-bg); padding: 20px; border-radius: 12px; border: 1px solid var(--card-border, #333); }
        .form-group { margin-bottom: 15px; text-align: left; }
        .form-label { display: block; margin-bottom: 5px; color: var(--text-muted); font-size: 0.85em; font-weight: bold; }
        .form-input { width: 100%; padding: 12px; border-radius: 8px; border: 1px solid #444; background: var(--bg-color); color: var(--text-main); font-size: 1em; }
        .emoji-grid { display: flex; gap: 10px; font-size: 2em; justify-content: center; margin-bottom: 20px; flex-wrap: wrap; }
        .emoji-btn { background: none; border: 2px solid transparent; cursor: pointer; border-radius: 50%; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; transition: 0.2s; }
        .emoji-btn.selected { border-color: var(--light-green); background: rgba(76, 175, 80, 0.2); }
		
		/* --- ADVANCED STATS & CALENDAR --- */
        .stat-grid-advanced { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 15px; }
        .stat-box-mini { background: var(--card-bg); padding: 12px 5px; border-radius: 10px; border: 1px solid var(--card-border, #333); text-align: center; }
        .stat-val-mini { font-size: 1.1em; font-weight: bold; color: var(--light-green); margin-bottom: 3px; }
        .stat-label-mini { font-size: 0.65em; color: var(--text-muted); text-transform: uppercase; }
        
        .profile-section-title { text-align: left; font-size: 0.9em; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin: 20px 0 10px 5px; border-bottom: 1px solid var(--card-border, #333); padding-bottom: 5px; }
        
		.cal-header { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-bottom: 5px; text-align: center; font-size: 0.7em; color: #888; text-transform: uppercase; font-weight: bold; }
        .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
        
        /* Upgraded Calendar Grids */
        .cal-day { position: relative; aspect-ratio: 1; border-radius: 6px; background: var(--cal-bg); display: flex; align-items: center; justify-content: center; transition: 0.3s; overflow: hidden; }
        .cal-day.active { background: rgba(76, 175, 80, 0.15); border: 1px solid var(--primary-green); box-shadow: 0 0 8px rgba(76, 175, 80, 0.2); }
        .cal-day.today { border: 2px solid var(--gold); }
        
        /* The Date Number & Badge */
        .cal-date-num { position: absolute; top: 2px; left: 3px; font-size: 0.55em; font-weight: bold; color: #888; white-space: nowrap; }
        .cal-day.active .cal-date-num { color: var(--light-green); }
        .cal-badge { font-size: 1.2em; filter: drop-shadow(0 2px 2px rgba(0,0,0,0.5)); animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
        @keyframes popIn { 0% { transform: scale(0); } 100% { transform: scale(1); } }
		
        .rank-summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
        .rank-box { background: var(--card-secondary-bg); border: 1px solid var(--card-border); padding: 12px; border-radius: 10px; text-align: center; }
        .rank-box-title { font-size: 0.75em; color: var(--text-muted); margin-bottom: 5px; }
        .rank-box-val { font-size: 1.4em; font-weight: bold; color: var(--rank-accent); }
		
		/* --- THEME PICKER STYLES --- */
        .theme-grid { display: flex; gap: 12px; justify-content: center; margin-bottom: 20px; flex-wrap: wrap; }
        .theme-btn { 
            width: 45px; height: 45px; border-radius: 50%; cursor: pointer; 
            border: 3px solid transparent; transition: transform 0.2s, border-color 0.2s;
            box-shadow: 0 4px 6px rgba(0,0,0,0.3);
        }
        .theme-btn:hover { transform: scale(1.1); }
        .theme-btn.selected { border-color: var(--gold); transform: scale(1.1); box-shadow: 0 0 10px var(--gold); }
        
        /* The specific colors for the swatch buttons */
        .btn-theme-default { background: linear-gradient(135deg, #121212 50%, #2e7d32 50%); }
        .btn-theme-light { background: linear-gradient(135deg, #f4f4f9 50%, #1b5e20 50%); }
        .btn-theme-wood { background: linear-gradient(135deg, #3e2723 50%, #689f38 50%); }
        .btn-theme-water { background: linear-gradient(135deg, #0f2027 50%, #009688 50%); }
        .btn-theme-fire { background: linear-gradient(135deg, #212121 50%, #e65100 50%); }
        .btn-theme-kwek { background: linear-gradient(135deg, #FAFAFA 50%, #F97316 50%); }
        .btn-theme-fb-light { background: linear-gradient(135deg, #F0F2F5 50%, #1877F2 50%); }
        
        /* --- KWEK THEME OVERRIDES --- */
        [data-theme="kwek"] .category-card,
        [data-theme="kwek"] .battle-card,
        [data-theme="kwek"] .question-box,
        [data-theme="kwek"] .cat-stat-container,
        [data-theme="kwek"] .stat-box,
        [data-theme="kwek"] .lb-item {
            border-radius: 16px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            border-color: var(--card-border);
        }
        [data-theme="kwek"] .category-card:hover,
        [data-theme="kwek"] .battle-card:hover {
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }

        /* --- LEADERBOARD SCREEN --- */
        #leaderboard-screen { display: none; animation: fadeIn 0.5s; padding-bottom: 20px;}
        .lb-header { text-align: center; margin-bottom: 20px; }
        .lb-tabs { display: flex; justify-content: space-between; margin-bottom: 20px; background: var(--card-bg); border-radius: 10px; padding: 5px; border: 1px solid var(--card-border, #333); }
        .lb-tab { flex: 1; padding: 10px 5px; text-align: center; background: transparent; border: none; color: var(--text-muted); font-weight: bold; cursor: pointer; border-radius: 8px; font-size: 0.9em; transition: 0.2s; }
        .lb-tab.active { background: var(--primary-green); color: white; box-shadow: 0 2px 5px rgba(0,0,0,0.2); }
        .lb-item { display: flex; align-items: center; justify-content: space-between; background: var(--card-bg); padding: 12px 15px; border-radius: 12px; margin-bottom: 10px; border: 1px solid var(--card-border, #333); transition: 0.2s; }
        .lb-item.is-me { border-color: var(--gold); background: linear-gradient(to right, rgba(255,215,0,0.1), rgba(0,0,0,0)); }
        .lb-rank { font-size: 1.2em; font-weight: bold; color: var(--text-muted); width: 35px; text-align: center; }
        .lb-rank.top-1 { color: #ffd700; font-size: 1.6em; text-shadow: 0 0 5px rgba(255,215,0,0.5); } 
        .lb-rank.top-2 { color: #c0c0c0; font-size: 1.4em; } 
        .lb-rank.top-3 { color: #cd7f32; font-size: 1.3em; } 
        .lb-profile { display: flex; align-items: center; gap: 12px; flex-grow: 1; margin-left: 10px; }
        .lb-avatar { font-size: 2em; background: var(--btn-neutral); border-radius: 50%; width: 45px; height: 45px; display: flex; justify-content: center; align-items: center; border: 1px solid var(--card-border);}
        .lb-name { font-weight: bold; font-size: 1.05em; color: var(--text-main); margin-bottom: 3px; }
        .lb-badge { font-size: 0.7em; background: var(--btn-neutral); padding: 3px 8px; border-radius: 10px; color: var(--text-main); text-transform: uppercase; font-weight: bold; }
        .lb-name { font-weight: bold; font-size: 1.05em; color: var(--text-main); margin-bottom: 3px; }
        .lb-score { font-weight: bold; color: var(--light-green); text-align: right; font-size: 1.2em; }
        .lb-xp-label { font-size: 0.6em; color: var(--text-muted); display: block; text-transform: uppercase; margin-top: 2px;}

        /* --- QUIZ SCREEN --- */
        #quiz-screen { display: none; }
        .quiz-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-size: 0.9em; }
        .back-btn { background: none; border: none; color: var(--light-green); font-size: 1.1em; cursor: pointer; font-weight: bold; }
        .question-counter { color: var(--text-muted); }
        .live-score { background: #333; padding: 5px 10px; border-radius: 8px; font-weight: bold; color: #fff; border: 1px solid var(--primary-green);}
        .question-box { background: var(--card-bg); padding: 20px; border-radius: 12px; font-size: 1.1em; margin-bottom: 20px; line-height: 1.4; border: 1px solid var(--card-border, #333);}
        .options-grid { display: flex; flex-direction: column; gap: 10px; }
        .option-btn { background-color: var(--card-bg); color: var(--text-main); border: 1px solid #444; padding: 15px; border-radius: 8px; font-size: 1em; text-align: left; cursor: pointer; transition: 0.2s; }
        .option-btn.correct { background-color: var(--primary-green) !important; border-color: var(--light-green) !important; color: white; }
        .option-btn.wrong { background-color: var(--danger-red) !important; border-color: #ff5252 !important; color: white; }
        .option-btn:disabled { cursor: not-allowed; opacity: 0.9; }

        #feedback-container { display: none; margin-top: 20px; animation: fadeIn 0.5s; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
        .explanation-box { background: #2a2a2a; padding: 15px; border-left: 4px solid var(--light-green); border-radius: 8px; margin-bottom: 15px; font-size: 0.95em; color: #ddd; }
        .action-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
        .action-btn { padding: 12px; border: none; border-radius: 8px; font-size: 0.9em; font-weight: bold; cursor: pointer; color: white; }
        .btn-search { background-color: #4285F4; } 
        .btn-next { background-color: var(--primary-green); }

        /* --- RESULTS SCREEN --- */
        #result-screen { display: none; text-align: center; animation: fadeIn 0.5s; }
        .result-card { background: var(--card-bg); padding: 30px 20px; border-radius: 15px; border: 2px solid var(--primary-green); margin-bottom: 20px; }
        .result-profile { font-size: 1.2em; font-weight: bold; margin-bottom: 10px; color: var(--light-green); }
        .result-score { font-size: 3em; font-weight: bold; margin: 10px 0; }
        .result-percent { font-size: 1.2em; color: var(--text-muted); margin-bottom: 5px; }
        .result-xp { font-size: 1.3em; font-weight: bold; color: var(--gold); margin-bottom: 15px; background: rgba(255,215,0,0.1); display: inline-block; padding: 5px 15px; border-radius: 20px;}
        .result-message { font-size: 1.1em; font-style: italic; color: var(--text-main); }
        .result-actions { display: flex; flex-direction: column; gap: 10px; }
        .btn-share { background-color: var(--btn-blue); padding: 15px; border: none; border-radius: 8px; font-size: 1em; font-weight: bold; color: white; cursor: pointer; }
        .btn-retry { background-color: var(--btn-orange); padding: 15px; border: none; border-radius: 8px; font-size: 1em; font-weight: bold; color: white; cursor: pointer; }
        .btn-next-set { background-color: var(--primary-green); padding: 15px; border: none; border-radius: 8px; font-size: 1em; font-weight: bold; color: white; cursor: pointer; }

        nav { 
            display: flex; 
            width: 100%; 
            max-width: 600px; 
            background-color: var(--card-bg); 
            justify-content: space-around; 
            padding: 15px 0; 
            border-top: 1px solid var(--card-border, #333); 
            z-index: 1000; 
            flex-shrink: 0; /* Important: Prevents the nav bar from squishing on small screens */
        }
        .nav-item { display: flex; flex-direction: column; align-items: center; color: var(--text-muted); font-size: 0.75em; cursor: pointer; }
        .nav-item.active { color: var(--light-green); font-weight: bold; }
        .nav-icon { font-size: 1.5em; margin-bottom: 3px; }