<!DOCTYPE html>
<html lang="en">

<head>
    
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-7514H63DMB"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-7514H63DMB');
</script>
   <link rel="icon" type="image/png" href="img/logo.png">
<link rel="apple-touch-icon" href="img/logo.png">
<link rel="shortcut icon" href="img/logo.png">
    <link rel="manifest" href="/manifest.json">
    <meta name="theme-color" content="#0A0D1A">
    <meta charset="utf-8" />
    <title><?= $page ?> | <?= $settings['name'] ?> - <?= $settings['description'] ?></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="referrer" content="origin">
    <meta content="Complete Tasks, Get Rewards" name="description" />
    <meta content="Cronweb Solutions Private Limited" name="author" />
    <link rel="shortcut icon" href="logo.png">

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet">

    <link href="/assets/css/bootstrap-dark.min.css?v=4.4.4" id="bootstrap-style" rel="stylesheet" type="text/css" />
    <link href="/assets/css/app-dark.min.css?v=4.4.4" id="bootstrap-style" rel="stylesheet" type="text/css" />
    <link href="/assets/css/icons.min.css?v=4.4.4" rel="stylesheet" type="text/css" />
    <link href="/assets/css/styles.css?v=4.4.4" rel="stylesheet" type="text/css" />
    <link href="/assets/css/fvsdg1gv1d81d7vvx8133d11.css" rel="stylesheet" type="text/css" />

    <style>
    :root{
        --bg:#0A0D1A;
        --surface:#131A2E;
        --surface-2:#1B2440;
        --surface-3:#232E52;
        --teal-500:#00E6D8;
        --teal-600:#00C2A8;
        --violet-500:#8B5CF6;
        --violet-600:#7C3AED;
        --gold:#FFC23C;
        --grad-primary: linear-gradient(135deg, var(--violet-500), var(--violet-600));
        --grad-gold: linear-gradient(135deg, var(--gold) 0%, #FF7A3C 100%);
        --mint:#00E6D8;
        --violet-glow: rgba(139,92,246,.6);
        --text:#F3F5FC;
        --text-dim:#8891AC;
        --line: rgba(255,255,255,.08);
        --font-display:'Bebas Neue', sans-serif;
        --font-mono:'JetBrains Mono', monospace;
        --sidebar-w: 246px;
    }
    html,body{background:var(--bg);}
    body{
        color:var(--text);
        font-family:'Inter', sans-serif;
        position:relative;
    }
    .antibotlinks{background-color:#ffffff}

    /* ================= BACKGROUND VIDEO (hero-video2.mp4) ================= */
    .eg-bg-video{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;}
    .eg-bg-video video{
        position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
        filter:saturate(1.15) contrast(1.05) brightness(.75);
        animation:eg-kenburns 45s ease-in-out infinite alternate;
        opacity:1;
        transition:opacity 900ms ease-in-out;
        will-change:opacity, transform;
    }
    @keyframes eg-kenburns{from{transform:scale(1);}to{transform:scale(1.08);}}
    .eg-bg-video-poster{
        position:absolute;inset:0;
        background:linear-gradient(160deg,#171226 0%, #0A0D1A 55%, #170B18 100%);
        background-size:220% 220%;animation:eg-poster-shift 9s ease-in-out infinite;
    }
    @keyframes eg-poster-shift{0%,100%{background-position:0% 50%;}50%{background-position:100% 50%;}}
    .eg-bg-overlay{
        position:fixed;inset:0;z-index:0;pointer-events:none;
        background:
            linear-gradient(180deg, rgba(10,13,26,.32) 0%, rgba(10,13,26,.48) 45%, rgba(10,13,26,.68) 100%),
            radial-gradient(700px 460px at 12% 0%, rgba(124,58,237,.22), transparent 62%),
            radial-gradient(620px 420px at 100% 10%, rgba(0,230,216,.10), transparent 60%),
            radial-gradient(520px 360px at 60% 100%, rgba(34,227,165,.08), transparent 60%);
    }
    .eg-bg-toggle{
        position:fixed;right:18px;bottom:18px;z-index:1045;
        width:38px;height:38px;border-radius:50%;
        background:rgba(19,26,46,.85);border:1px solid var(--line);
        backdrop-filter:blur(8px);color:var(--text);font-size:12px;
        display:flex;align-items:center;justify-content:center;cursor:pointer;
        transition:border-color .2s ease, transform .2s ease, color .2s ease;
    }
    .eg-bg-toggle:hover{border-color:var(--mint);color:var(--mint);transform:translateY(-2px);}
    @media (prefers-reduced-motion: reduce){.eg-bg-video video{animation:none;}}

    #layout-wrapper{position:relative;z-index:1;display:flex;min-height:100vh;}

    /* ---------- SIDEBAR ---------- */
    .eg-sidenav{
        position:fixed;top:0;left:0;bottom:0;width:var(--sidebar-w);z-index:1050;
        background:
            radial-gradient(420px 260px at 100% 0%, rgba(139,92,246,.12), transparent 60%),
            #0D1122;
        background-image:
            radial-gradient(420px 260px at 100% 0%, rgba(139,92,246,.12), transparent 60%),
            linear-gradient(30deg, rgba(255,255,255,.025) 12%, transparent 12.5%, transparent 87%, rgba(255,255,255,.025) 87.5%, rgba(255,255,255,.025)),
            linear-gradient(150deg, rgba(255,255,255,.025) 12%, transparent 12.5%, transparent 87%, rgba(255,255,255,.025) 87.5%, rgba(255,255,255,.025)),
            #0D1122;
        background-size:auto, 26px 45px, 26px 45px, auto;
        border-right:1px solid var(--line);
        box-shadow:6px 0 24px -12px rgba(0,0,0,.5);
        display:flex;flex-direction:column;padding:20px 14px 16px;overflow-y:auto;
        transition:transform .25s ease;
    }
    .eg-sidenav::-webkit-scrollbar{width:5px;}
    .eg-sidenav::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:10px;}

    .eg-sidenav-brand-row{
        display:flex;align-items:center;justify-content:space-between;gap:8px;
        padding:2px 6px 18px;margin-bottom:16px;border-bottom:1px solid var(--line);
    }
    .eg-sidenav-brand{
        display:flex;align-items:center;gap:9px;text-decoration:none;min-width:0;
    }
    .eg-sidenav-brand-icon{
        position:relative;
        width:32px;height:32px;border-radius:10px;background:#fff;flex-shrink:0;
        display:flex;align-items:center;justify-content:center;
        box-shadow:0 0 0 4px rgba(139,92,246,.14), 0 6px 16px rgba(0,0,0,.35);
    }
    .eg-sidenav-brand-icon img{width:20px;height:20px;object-fit:contain;}
    .eg-sidenav-brand-text{
        font-family:var(--font-display);font-size:19px;font-weight:400;letter-spacing:.02em;line-height:1;
        white-space:nowrap;
    }
    .eg-sidenav-brand-text .game{color:var(--text);}
    .eg-sidenav-brand-text .earns{color:var(--violet-500);}

    /* ---- Player level badge, clipped to the logo tile ---- */
    .eg-level-chip{
        position:absolute;bottom:-5px;right:-6px;z-index:2;
        min-width:17px;height:17px;padding:0 3px;border-radius:6px;
        background:var(--grad-gold);color:#2B1600;border:2px solid #0D1122;
        font-family:var(--font-mono);font-size:9px;font-weight:800;letter-spacing:.01em;
        display:flex;align-items:center;justify-content:center;
        box-shadow:0 3px 8px -2px rgba(255,138,60,.55);
    }

    /* ---- XP progress toward next level — sits under the brand/balance row ---- */
    .eg-xp-row{
        display:flex;align-items:center;gap:8px;
        padding:0 6px 12px;margin:-6px 0 0;
    }
    .eg-xp-rank{
        flex-shrink:0;font-family:var(--font-mono);font-size:9.5px;font-weight:800;letter-spacing:.04em;
        text-transform:uppercase;color:var(--text-dim);white-space:nowrap;
    }
    .eg-xp-track{
        flex:1;height:6px;border-radius:999px;background:var(--surface-3);overflow:hidden;position:relative;
    }
    .eg-xp-fill{
        height:100%;border-radius:999px;background:var(--grad-primary);
        box-shadow:0 0 10px rgba(139,92,246,.6);
        position:relative;
    }
    .eg-xp-fill::after{
        content:"";position:absolute;inset:0;
        background:linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
        width:40%;animation:eg-xp-shimmer 2.4s ease-in-out infinite;
    }
    @keyframes eg-xp-shimmer{
        0%{transform:translateX(-120%);}
        100%{transform:translateX(340%);}
    }
    .eg-xp-label{
        flex-shrink:0;font-family:var(--font-mono);font-size:9.5px;font-weight:700;color:var(--mint);white-space:nowrap;
    }
    @media (prefers-reduced-motion: reduce){
        .eg-xp-fill::after{animation:none;}
    }

    /* ---- Daily streak strip — 7 day pips under the XP bar ---- */
    .eg-streak-row{
        display:flex;align-items:center;gap:8px;
        padding:0 6px 16px;margin-bottom:16px;border-bottom:1px solid var(--line);
    }
    .eg-streak-flame{flex-shrink:0;color:var(--gold);font-size:13px;}
    .eg-streak-pips{display:flex;gap:4px;flex:1;}
    .eg-streak-pip{
        flex:1;height:8px;border-radius:3px;background:var(--surface-3);
    }
    .eg-streak-pip.is-filled{
        background:var(--grad-gold);box-shadow:0 0 8px rgba(255,194,60,.5);
    }
    .eg-streak-count{
        flex-shrink:0;font-family:var(--font-mono);font-size:9.5px;font-weight:700;color:var(--gold);white-space:nowrap;
    }

    /* Balance chip — sits beside the logo/name, replaces the old topbar
       pill button on desktop where the sidebar is visible. */
    .eg-sidenav-balance-chip{
        display:flex;align-items:center;gap:5px;flex-shrink:0;text-decoration:none;
        background:linear-gradient(135deg, rgba(139,92,246,.24), rgba(0,230,216,.12));
        border:1px solid rgba(139,92,246,.4);border-radius:12px;
        padding:6px 9px;color:var(--text);
        transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
    }
    .eg-sidenav-balance-chip .ico{
        width:16px;height:16px;border-radius:5px;background:var(--grad-primary);
        display:flex;align-items:center;justify-content:center;flex-shrink:0;
        color:#fff;font-size:8.5px;
    }
    .eg-sidenav-balance-chip .js-balance-amt{
        font-family:var(--font-mono);font-weight:800;font-size:11.5px;white-space:nowrap;
    }
    .eg-sidenav-balance-chip:hover{
        border-color:rgba(139,92,246,.75);transform:translateY(-1px);color:var(--text);
        box-shadow:0 8px 18px -8px rgba(139,92,246,.55);
    }

    .eg-sidenav-tabs{display:flex;gap:8px;margin-bottom:24px;}
    .eg-sidenav-tab{
        flex:1;text-align:center;font-size:13px;font-weight:700;padding:10px 6px;border-radius:12px;
        color:var(--text-dim);text-decoration:none;border:1px solid var(--line);
        background:var(--surface);transition:background .2s ease, color .2s ease, box-shadow .2s ease, border-color .2s ease;
    }
    .eg-sidenav-tab:hover{color:var(--text);border-color:rgba(255,255,255,.16);}
    .eg-sidenav-tab.active{
        color:#fff;background:var(--grad-primary);border-color:transparent;
        box-shadow:0 10px 26px -8px rgba(139,92,246,.6);
    }
    .eg-sidenav-close{
        display:none;width:32px;height:32px;border-radius:9px;border:1px solid var(--line);
        background:var(--surface);color:var(--text-dim);align-items:center;justify-content:center;
        flex:0 0 auto;transition:color .18s ease, border-color .18s ease;
    }
    .eg-sidenav-close:hover{color:var(--text);border-color:rgba(255,255,255,.2);}

    .eg-sidenav-group{margin-bottom:18px;padding-bottom:18px;border-bottom:1px solid var(--line);}
    .eg-sidenav-group:last-of-type{border-bottom:none;}
    .eg-sidenav-label{
        font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
        color:var(--text-dim);opacity:.65;padding:0 10px;margin-bottom:8px;
    }
    .eg-sidenav-link{
        display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:13px;
        color:var(--text-dim);text-decoration:none;font-size:13.5px;font-weight:600;
        margin-bottom:2px;transition:background .18s ease, color .18s ease, transform .18s ease;
    }
    .eg-sidenav-link i, .eg-sidenav-link .ico{width:18px;text-align:center;font-size:15px;flex-shrink:0;}
    .eg-sidenav-link:hover{background:var(--surface);color:var(--text);transform:translateX(2px);}
    .eg-sidenav-link.active{
        background:linear-gradient(100deg, rgba(139,92,246,.28), rgba(0,230,216,.08));
        color:#fff;box-shadow:inset 0 0 0 1px rgba(124,58,237,.4);
    }
    .eg-sidenav-link.race{background:rgba(255,201,60,.06);}
    .eg-sidenav-link.race i{color:#FFC93C;}
    .eg-sidenav-link.race:hover{background:rgba(255,201,60,.12);}

    /* ---- Daily Quests dropdown — sidebar-only, primarily surfaced on
       phones/small devices where the dashboard's inline quest section
       (eg-quests-wrap) is hidden. Same name, same data, different shell. ---- */
    .eg-sidenav-quest-toggle{
        display:flex;align-items:center;gap:11px;width:100%;text-align:left;
        padding:10px 12px;border-radius:13px;border:none;cursor:pointer;
        background:transparent;color:var(--text-dim);font-size:13.5px;font-weight:600;
        margin-bottom:2px;transition:background .18s ease, color .18s ease;
    }
    .eg-sidenav-quest-toggle:hover{background:var(--surface);color:var(--text);}
    .eg-sidenav-quest-toggle i.quest-ico{width:18px;text-align:center;font-size:15px;flex-shrink:0;color:var(--gold);}
    .eg-sidenav-quest-toggle .quest-label{flex:1;min-width:0;}
    .eg-sidenav-quest-toggle .quest-count{
        flex-shrink:0;min-width:16px;height:16px;padding:0 4px;border-radius:999px;
        background:var(--grad-gold);color:#2B1600;font-family:var(--font-mono);font-size:9.5px;font-weight:800;
        display:flex;align-items:center;justify-content:center;
    }
    .eg-sidenav-quest-toggle .chevron{
        flex-shrink:0;font-size:11px;color:var(--text-dim);transition:transform .22s ease;
    }
    .eg-sidenav-quest-toggle.is-open .chevron{transform:rotate(180deg);}
    .eg-sidenav-quest-toggle.is-open{background:var(--surface);color:var(--text);}

    .eg-sidenav-quest-panel{
        max-height:0;overflow:hidden;transition:max-height .28s ease;
        padding:0 4px;
    }
    .eg-sidenav-quest-panel.is-open{max-height:320px;}
    .eg-sidenav-quest-row{
        display:flex;align-items:center;gap:9px;padding:8px 8px;margin:2px 0;border-radius:11px;
        background:var(--surface);border:1px solid var(--line);
    }
    .eg-sidenav-quest-row .q-ring{
        position:relative;flex-shrink:0;width:26px;height:26px;border-radius:50%;
        background:conic-gradient(var(--q-accent, var(--violet-500)) calc(var(--pct,0) * 1%), rgba(255,255,255,.1) 0);
        display:flex;align-items:center;justify-content:center;
    }
    .eg-sidenav-quest-row .q-ring::before{content:"";position:absolute;inset:2px;border-radius:50%;background:var(--surface);}
    .eg-sidenav-quest-row .q-ring i{position:relative;z-index:1;font-size:10px;color:var(--q-accent, var(--mint));}
    .eg-sidenav-quest-row[data-difficulty="easy"]{--q-accent:var(--teal-500);}
    .eg-sidenav-quest-row[data-difficulty="medium"]{--q-accent:var(--violet-500);}
    .eg-sidenav-quest-row[data-difficulty="hard"]{--q-accent:var(--gold);}
    .eg-sidenav-quest-row.is-done .q-ring i{color:#22E3A5;}
    .eg-sidenav-quest-row .q-body{flex:1;min-width:0;}
    .eg-sidenav-quest-row .q-title{font-size:11.5px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    .eg-sidenav-quest-row .q-reward{font-family:var(--font-mono);font-size:10px;color:var(--gold);font-weight:700;}
    .eg-sidenav-quest-row .q-claim{
        flex-shrink:0;border:none;cursor:pointer;font-family:var(--font-mono);font-weight:800;font-size:9.5px;
        padding:5px 9px;border-radius:8px;color:#0A0D1A;background:var(--grad-gold);
    }
    .eg-sidenav-quest-row .q-claim:disabled{opacity:.4;cursor:not-allowed;background:var(--surface-3);color:var(--text-dim);}
    .eg-sidenav-quest-row.is-done .q-claim{background:linear-gradient(135deg,#22E3A5,#12986B);color:#fff;}

    /* This nav item is chiefly meant for phones/small devices — on desktop
       the same quests already sit inline on the dashboard, so tuck the
       sidebar entry away there to avoid showing the list twice. */
    @media (min-width:768px){
        .eg-sidenav-quests-group{display:none;}
    }
    .eg-sidenav-spacer{flex:1;}
    .eg-sidenav-support{
        margin-top:auto;display:flex;align-items:center;gap:10px;padding:12px;border-radius:14px;
        background:var(--surface);border:1px solid var(--line);
    }
    .eg-sidenav-support i{color:var(--mint);font-size:16px;}
    .eg-sidenav-support span{font-size:12px;color:var(--text-dim);}

    .eg-sidenav-overlay{display:none;position:fixed;inset:0;background:rgba(5,6,14,.6);z-index:1049;}
    @media (max-width:991px){
        .eg-sidenav{transform:translateX(-100%);}
        .eg-sidenav.is-open{transform:translateX(0);}
        .eg-sidenav-close{display:flex;}
        .eg-sidenav-overlay.is-open{display:block;}
    }

    /* ---------- CONTENT WRAPPER ---------- */
    .eg-content-wrapper{flex:1;min-width:0;display:flex;flex-direction:column;}
    @media (min-width:992px){
        .eg-content-wrapper{margin-left:var(--sidebar-w);}
    }

    /* ---------- HEADER ---------- */
    #page-topbar{
        margin-bottom:-98px;
        position:sticky;top:0;z-index:1040;
        background:rgba(13,17,34,.86) !important;backdrop-filter:blur(14px) saturate(140%);
        border-bottom:1px solid var(--line);
    }
    .navbar-header{background:transparent !important;display:flex;align-items:center;
        justify-content:space-between;padding:12px 18px;gap:14px;flex-wrap:wrap;}
    .navbar-header .d-flex.align-items-center{gap:12px;}
    .eg-header-right{gap:10px !important;}
    .brand-mark{display:flex;align-items:center;gap:8px;}
    .eg-mobile-menu-btn{
        display:none;width:38px;height:38px;border-radius:11px;border:1px solid var(--line);
        background:rgba(255,255,255,.04);color:var(--text);align-items:center;justify-content:center;
        flex-shrink:0;
    }
    @media (max-width:991px){.eg-mobile-menu-btn{display:flex;}}

    /* Topbar balance chip — the primary balance display now lives in the
       sidebar next to the logo (desktop). This compact version only shows
       on mobile/tablet, where the sidebar is off-canvas. */
    .eg-topbar-balance{
        display:flex;align-items:center;gap:8px;text-decoration:none;color:#fff;
        background:var(--grad-primary);border-radius:14px;height:40px;padding:0 13px 0 7px;
        box-shadow:0 10px 24px -8px rgba(139,92,246,.6);flex-shrink:0;
    }
    .eg-topbar-balance-icon{
        width:26px;height:26px;border-radius:9px;background:rgba(255,255,255,.2);
        display:flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0;color:#fff;
    }
    .eg-topbar-balance-text{display:flex;flex-direction:column;line-height:1.05;}
    .eg-topbar-balance-amt{font-family:var(--font-mono);font-weight:800;font-size:12.5px;}
    .eg-topbar-balance-cur{font-size:9px;opacity:.85;font-weight:700;letter-spacing:.04em;}
    @media (min-width:992px){
        .eg-topbar-balance{display:none;}
    }

    /* Profile avatar — gradient ring + online dot instead of the plain flat circle */
    .header-profile-user{border-radius:50%;width:32px;height:32px;object-fit:cover;
        border:2px solid #0D1122;display:block;}
    #page-header-user-dropdown{
        position:relative;
        background:conic-gradient(var(--mint) calc(var(--xp-pct, 60) * 1%), rgba(255,255,255,.16) 0) !important;
        border-radius:50% !important;
        border:none !important;padding:3px !important;width:38px;height:38px;
        display:flex;align-items:center;justify-content:center;
        box-shadow:0 6px 16px -6px rgba(139,92,246,.65);
    }
    #page-header-user-dropdown .header-profile-user{border-width:2px;}
    #page-header-user-dropdown::after{
        content:"";position:absolute;bottom:-1px;right:-1px;width:10px;height:10px;border-radius:50%;
        background:#22E3A5;border:2px solid #0D1122;
    }
    .dropdown-menu{background:var(--surface) !important;border:1px solid var(--line) !important;}
    .dropdown-item{color:var(--text) !important;}
    .dropdown-item:hover{background:var(--surface-2) !important;}

    .switch{display:inline-block;vertical-align:middle;}
    .switch input{display:none;}
    .slider{position:relative;display:inline-block;width:30px;height:16px;
        background-color:var(--surface-3);border-radius:8px;cursor:pointer;}
    .slider:before{content:'';position:absolute;top:3px;left:3px;width:10px;height:10px;
        background-color:white;border-radius:50%;transition:.2s;}
    input:checked + .slider{background:var(--grad-primary);}
    input:checked + .slider:before{transform:translateX(14px);}

    /* legacy horizontal topnav — nav links now live in the sidebar, keep hidden */
    .topnav{display:none !important;}

    .page-title-box h4{font-family:var(--font-display);letter-spacing:.03em;font-size:22px;}
    .breadcrumb-item a{color:var(--text-dim);}
    .breadcrumb-item.active{color:var(--text);}

    .page-content .container-fluid{max-width:100% !important;width:100% !important;padding-bottom:90px;}
    .main-content{width:100%;}

    /* =========================================================
       BOTTOM NAV (mobile only, sidebar covers desktop)
       Rebuilt for a consistent icon system, clearer active state,
       and legible labels instead of the mismatched icon styles /
       cramped text from before.
       ========================================================= */
    .bottom-nav1{
        position:fixed;left:0;right:0;bottom:0;width:100%;
        background:#0D1122 !important;border-top:1px solid var(--line);
        border-radius:22px 22px 0 0;
        display:flex;align-items:flex-end;justify-content:space-around;
        padding:10px 6px calc(10px + env(safe-area-inset-bottom));
        box-shadow:0 -14px 34px -18px rgba(0,0,0,.75);z-index:1030;
    }
    @media (min-width:992px){.bottom-nav1{display:none;}}
    .nav-item1{
        color:var(--text-dim);text-decoration:none;
        display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;gap:5px;
        position:relative;padding:8px 2px;border-radius:14px;min-width:0;
        transition:background .18s ease, color .18s ease;
    }
    .nav-item1 .nav-item1-icon{
        width:22px;height:22px;display:flex;align-items:center;justify-content:center;
        flex-shrink:0;
    }
    .nav-item1 .nav-item1-icon svg{width:20px;height:20px;}
    .nav-item1 .nav-item1-icon i{font-size:19px;line-height:1;}
    .nav-item1 span{
        font-size:10.5px;font-weight:600;letter-spacing:.01em;color:inherit;
        white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;
    }
    .nav-item1:hover{color:var(--text);}
    .nav-item1.active,.nav-item1[data-active="true"]{
        color:#fff;background:rgba(139,92,246,.16);
    }
    .nav-item1.active span,.nav-item1[data-active="true"] span{font-weight:700;}

    #bottom-nav-earn-link{
        flex:0 0 auto;width:60px;height:60px;padding:0;position:relative;top:-20px;
        border-radius:18px;background:var(--grad-gold) !important;
        display:flex;align-items:center;justify-content:center;
        border:4px solid #0D1122;overflow:hidden;
        box-shadow:0 12px 28px -8px rgba(255,138,60,.65), 0 0 0 1px rgba(255,194,60,.25);
    }
    #bottom-nav-earn-link:hover,#bottom-nav-earn-link.active,#bottom-nav-earn-link[data-active="true"]{
        background:var(--grad-gold) !important;
    }
    #bottom-nav-earn-link::before{
        content:"";position:absolute;inset:-9px;border-radius:22px;background:var(--grad-gold);
        filter:blur(15px);opacity:.55;animation:eg-pulse 2.2s ease-in-out infinite;z-index:-1;
    }
    #bottom-nav-earn-link .nav-item1-earn-label{
        font-size:12px;font-weight:800;letter-spacing:.02em;color:#2B1600;line-height:1;
    }
    @keyframes eg-pulse{
        0%,100%{transform:scale(.94);opacity:.45;}
        50%{transform:scale(1.08);opacity:.8;}
    }

    .nav-item1[title="$200k Event"]{position:relative;}

    /* small sparkle accents on the Earn CTA — echoes the coin/loot theme without being busy */
    #bottom-nav-earn-link .spark{
        position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;
        opacity:0;animation:eg-spark 2.6s ease-in-out infinite;
    }
    #bottom-nav-earn-link .spark:nth-child(1){top:10px;left:12px;animation-delay:.2s;}
    #bottom-nav-earn-link .spark:nth-child(2){top:16px;right:10px;animation-delay:1.1s;}
    #bottom-nav-earn-link .spark:nth-child(3){bottom:12px;left:20px;animation-delay:1.9s;}
    @keyframes eg-spark{
        0%,100%{opacity:0;transform:scale(.4);}
        50%{opacity:1;transform:scale(1);}
    }
    @media (prefers-reduced-motion: reduce){
        #bottom-nav-earn-link .spark{display:none;}
    }

    /* ---------- Right sidebar / off-canvas (kept for legacy triggers, unused now) ---------- */
    .right-bar{background:var(--surface) !important;}
    .rightbar-title h5{font-family:var(--font-display);letter-spacing:.03em;}

    .card-radio{background-color:var(--surface) !important;border:6px solid var(--surface-3) !important;
        border-radius:2rem;padding:.9rem;}
    .modal-content{background:var(--surface) !important;border:1px solid var(--line) !important;
        border-radius:20px !important;}
    .modal-header{border-bottom:1px solid var(--line) !important;}
    .modal-title{font-family:var(--font-display);letter-spacing:.03em;font-size:20px;}
    .hoverr{background:linear-gradient(160deg, rgba(139,92,246,.14), rgba(0,230,216,.06)) !important;
        border:1px solid var(--line) !important;border-radius:16px !important;transition:transform .18s ease;}
    .hoverr:hover{transform:translateY(-3px);}

    @media screen and (max-width: 600px) {
        .nomobile { font-size: 24px !important; }
    }

    .swal2-container.swal2-top-end>.swal2-popup, .swal2-container.swal2-top-right>.swal2-popup {
        background:var(--surface) !important; color:var(--text); border-radius:14px;
    }
    .swal2-timer-progress-bar{background:var(--surface-3) !important;}

    /* Notifications dropdown */
    .noti-icon{
        position:relative;color:var(--text-dim) !important;font-size:19px;background:var(--surface-2);
        width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
        border:1px solid var(--line);transition:color .15s ease, transform .15s ease, border-color .15s ease;
    }
    .noti-icon:hover{color:var(--text) !important;border-color:rgba(255,255,255,.18);transform:translateY(-1px);}
    .noti-icon .noti-badge{
        position:absolute;top:-3px;right:-3px;min-width:18px;height:18px;padding:0 4px;
        font-size:10px;font-weight:800;font-family:var(--font-mono);line-height:18px;text-align:center;
        background:var(--grad-gold) !important;color:#231400;border:2px solid var(--bg);border-radius:999px;
    }

    #notifications .dropdown-menu{
        width:350px;max-width:92vw;border-radius:18px !important;overflow:hidden;
        box-shadow:0 24px 60px -16px rgba(0,0,0,.65) !important;margin-top:14px !important;
        padding:0 !important;
    }
    .noti-head{
        background:linear-gradient(160deg, rgba(139,92,246,.20), rgba(0,230,216,.08));
        border-bottom:1px solid var(--line);padding:14px 16px;
        display:flex;align-items:center;justify-content:space-between;
    }
    .noti-head h6{font-family:var(--font-display);letter-spacing:.04em;font-size:17px;margin:0;color:var(--text);}
    .noti-head .noti-tag{
        font-family:var(--font-mono);font-size:10.5px;font-weight:700;color:var(--mint);
        background:rgba(34,227,165,.12);border:1px solid rgba(34,227,165,.25);
        padding:2px 9px;border-radius:999px;
    }

    .noti-body{max-height:320px;overflow-y:auto;}
    .noti-body::-webkit-scrollbar{width:5px;}
    .noti-body::-webkit-scrollbar-track{background:transparent;}
    .noti-body::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:3px;}

    .notification-item{
        display:flex;gap:12px;align-items:flex-start;padding:12px 16px;
        border-bottom:1px solid var(--line);text-decoration:none;transition:background .15s ease;
    }
    .notification-item:last-child{border-bottom:none;}
    .notification-item:hover{background:var(--surface-2);}
    .notification-item .noti-avatar{
        width:36px;height:36px;border-radius:50%;flex-shrink:0;color:#fff;font-size:14px;
        display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px -4px rgba(0,0,0,.5);
    }
    .noti-avatar.type-0{background:var(--grad-primary);}
    .noti-avatar.type-1{background:linear-gradient(135deg,#22E3A5,#12986B);}
    .noti-avatar.type-2{background:linear-gradient(135deg,#FF6161,#C21F1F);}
    .noti-avatar.type-3{background:linear-gradient(135deg,#3CA0FF,#2361C4);}

    .notification-item .noti-text{margin:0 0 4px;font-size:12.5px;line-height:1.4;color:var(--text);}
    .notification-item .noti-time{
        margin:0;font-size:11px;color:var(--text-dim);display:flex;align-items:center;gap:4px;
    }

    .noti-empty{padding:34px 16px;text-align:center;color:var(--text-dim);font-size:13px;}
    .noti-empty i{font-size:26px;display:block;margin-bottom:10px;color:var(--surface-3);}

    .noti-foot{padding:10px 16px;border-top:1px solid var(--line);text-align:center;}
    .noti-foot a{font-size:12px;font-weight:700;letter-spacing:.02em;color:var(--violet-500);text-decoration:none;}
    .noti-foot a:hover{color:var(--text);}

    /* =========================================================
       SHARED FX LAYER — toasts, confetti burst, level-up modal.
       Used by both the dashboard (quest claims) and anywhere else
       that wants a bit of "gaming juice" via window.EG.*
       ========================================================= */
    .eg-toast-stack{
        position:fixed;top:16px;right:16px;z-index:2147483200;
        display:flex;flex-direction:column;gap:10px;width:300px;max-width:calc(100vw - 32px);
        pointer-events:none;
    }
    @media (max-width:991px){
        .eg-toast-stack{top:auto;bottom:calc(90px + env(safe-area-inset-bottom));right:12px;left:12px;width:auto;}
    }
    .eg-toast{
        pointer-events:auto;display:flex;align-items:flex-start;gap:10px;
        background:var(--surface);border:1px solid var(--line);border-radius:14px;
        padding:11px 13px;box-shadow:0 16px 34px -14px rgba(0,0,0,.6);
        transform:translateX(24px);opacity:0;transition:transform .3s ease, opacity .3s ease;
    }
    .eg-toast.is-visible{transform:translateX(0);opacity:1;}
    .eg-toast-icon{
        flex-shrink:0;width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;
        color:#fff;font-size:13px;background:var(--grad-primary);
    }
    .eg-toast.success .eg-toast-icon{background:linear-gradient(135deg,#22E3A5,#12986B);}
    .eg-toast.gold .eg-toast-icon{background:var(--grad-gold);color:#2B1600;}
    .eg-toast-body{min-width:0;}
    .eg-toast-title{font-size:12.5px;font-weight:800;margin-bottom:2px;}
    .eg-toast-msg{font-size:11.5px;color:var(--text-dim);line-height:1.35;}

    .eg-confetti-piece{
        position:fixed;z-index:2147483150;border-radius:2px;pointer-events:none;will-change:transform,opacity;
    }

    .eg-levelup-overlay{
        position:fixed;inset:0;z-index:2147483250;background:rgba(5,6,14,.78);
        display:flex;align-items:center;justify-content:center;
        opacity:0;pointer-events:none;transition:opacity .25s ease;
    }
    .eg-levelup-overlay.is-visible{opacity:1;pointer-events:auto;}
    .eg-levelup-card{
        text-align:center;padding:34px 30px;border-radius:26px;
        background:linear-gradient(180deg, var(--surface-2), var(--surface));
        border:1px solid rgba(255,194,60,.35);box-shadow:0 30px 70px -20px rgba(255,194,60,.35);
        transform:scale(.85);transition:transform .3s cubic-bezier(.34,1.56,.64,1);max-width:320px;
    }
    .eg-levelup-overlay.is-visible .eg-levelup-card{transform:scale(1);}
    .eg-levelup-badge{
        width:78px;height:78px;border-radius:50%;margin:0 auto 14px;
        background:var(--grad-gold);display:flex;align-items:center;justify-content:center;
        font-family:var(--font-display);font-size:30px;color:#2B1600;
        box-shadow:0 0 0 8px rgba(255,194,60,.14), 0 16px 34px -10px rgba(255,138,60,.65);
        animation:eg-levelup-spin .8s ease-out;
    }
    @keyframes eg-levelup-spin{from{transform:rotate(-200deg) scale(.4);opacity:0;}to{transform:rotate(0) scale(1);opacity:1;}}
    .eg-levelup-title{font-family:var(--font-display);font-size:26px;letter-spacing:.03em;margin-bottom:4px;}
    .eg-levelup-sub{font-size:13px;color:var(--text-dim);margin-bottom:18px;}
    .eg-levelup-close{
        border:none;cursor:pointer;font-weight:800;font-size:12.5px;letter-spacing:.02em;
        padding:9px 22px;border-radius:999px;color:#fff;background:var(--grad-primary);
        box-shadow:0 10px 24px -8px rgba(139,92,246,.6);
    }
    </style>
</head>

<script>
    const navItems = document.querySelectorAll('.nav-item1');
    navItems.forEach(item => {
        item.addEventListener('click', function() {
            navItems.forEach(i => i.classList.remove('active'));
            this.classList.add('active');
        });
    });
</script>

<body data-topbar="dark" data-layout="horizontal" data-layout-mode="dark" cz-shortcut-listen="true">

    

    <!-- ===================== BACKGROUND VIDEO ===================== -->
    <div class="eg-bg-video">
        <div class="eg-bg-video-poster"></div>
        <video id="eg-bg-video" autoplay muted playsinline preload="auto">
            <source src="hero-video.mp4" type="video/mp4">
        </video>
    </div>
    <div class="eg-bg-overlay"></div>
    <button class="eg-bg-toggle" id="eg-bg-toggle" aria-label="Pause background video" aria-pressed="false">
        <i class="fas fa-pause" id="eg-bg-toggle-icon"></i>
    </button>

    <!-- ===================== SHARED FX MOUNTS ===================== -->
    <div class="eg-toast-stack" id="eg-toast-stack" aria-live="polite"></div>
    <div class="eg-levelup-overlay" id="eg-levelup-overlay">
        <div class="eg-levelup-card">
            <div class="eg-levelup-badge" id="eg-levelup-badge">1</div>
            <div class="eg-levelup-title">Level Up!</div>
            <div class="eg-levelup-sub" id="eg-levelup-sub">You've reached a new level.</div>
            <button type="button" class="eg-levelup-close" id="eg-levelup-close">Nice!</button>
        </div>
    </div>

    <div id="layout-wrapper">

        <div class="eg-sidenav-overlay" id="eg-sidenav-overlay"></div>

        <!-- ===================== SIDEBAR ===================== -->
        <aside class="eg-sidenav" id="eg-sidenav">
            <?php
                // Cosmetic-only rank name derived from level — no schema change.
                $egLevel = isset($user['level']) ? (int) $user['level'] : 0;
                $egExpPct = isset($user['exp']) ? ((int) $user['exp'] % 100) : 0;
                $egRankTiers = [
                    0  => 'Bronze',
                    10 => 'Silver',
                    25 => 'Gold',
                    50 => 'Platinum',
                    75 => 'Diamond',
                ];
                $egRank = 'Bronze';
                foreach ($egRankTiers as $minLevel => $rankName) {
                    if ($egLevel >= $minLevel) { $egRank = $rankName; }
                }
                // Streak pips: how many of the last 7 days are "lit". Falls
                // back to 0 filled (all hollow) if no streak field exists yet.
                $egStreakDays = isset($user['streak']) ? (int) $user['streak'] : 0;
                $egStreakFilled = min(7, $egStreakDays);
            ?>
            <div class="eg-sidenav-brand-row">
                <a href="/dashboard" class="eg-sidenav-brand">
                    <span class="eg-sidenav-brand-icon">
                        <img src="img/logo.png" alt="TryGames logo">
                        <span class="eg-level-chip"><?= $egLevel ?></span>
                    </span>
                    <span class="eg-sidenav-brand-text"><span class="game">Try</span><span class="earns">Games</span></span>
                </a>
                <a href="/withdraw" class="eg-sidenav-balance-chip" title="Balance">
                    <span class="ico"><i class="fas fa-wallet"></i></span>
                    <span class="js-balance-amt">0.00</span>
                </a>
            </div>

            <div class="eg-xp-row" title="<?= $egExpPct ?>% to Level <?= $egLevel + 1 ?>">
                <span class="eg-xp-rank"><?= $egRank ?></span>
                <span class="eg-xp-track"><span class="eg-xp-fill" style="width:<?= $egExpPct ?>%;"></span></span>
                <span class="eg-xp-label">Lv <?= $egLevel ?></span>
            </div>

            <div class="eg-streak-row" title="<?= $egStreakDays ?> day streak">
                <i class="fas fa-fire eg-streak-flame"></i>
                <span class="eg-streak-pips">
                    <?php for ($i = 1; $i <= 7; $i++): ?>
                        <span class="eg-streak-pip<?= $i <= $egStreakFilled ? ' is-filled' : '' ?>"></span>
                    <?php endfor; ?>
                </span>
                <span class="eg-streak-count"><?= $egStreakDays ?>d</span>
            </div>

            <div class="eg-sidenav-tabs">
                <a href="/dashboard" class="eg-sidenav-tab active">Earn</a>
                <a href="/withdraw" class="eg-sidenav-tab">Rewards</a>
                <button type="button" class="eg-sidenav-close" id="eg-sidenav-close" aria-label="Close menu">
                    <i class="fas fa-times"></i>
                </button>
            </div>

            <div class="eg-sidenav-group">
                <div class="eg-sidenav-label">Earn</div>
                 <a href="/dashboard" class="eg-sidenav-link" data-nav-key="earn"><i class="fas fa-coins"></i> Earn</a>
                <a href="/referrals" class="eg-sidenav-link" data-nav-key="dashboard"><i class="fas fa-share-alt"></i> Affiliates</a>
                <!--<a href="/dashboard" class="eg-sidenav-link" data-nav-key="earn"><i class="fas fa-coins"></i> Earn</a>-->
                <!--<a href="/tasks" class="eg-sidenav-link" data-nav-key="tasks"><i class="fas fa-list-check"></i> Tasks</a>-->
                <!--<a href="/surveys" class="eg-sidenav-link" data-nav-key="surveys"><i class="fas fa-square-poll-vertical"></i> Surveys</a>-->
            </div>

            <div class="eg-sidenav-group eg-sidenav-quests-group">
                <?php
                    // Same three quests as the dashboard's inline section
                    // (dashboard-content.php). Kept as a small local array so
                    // this sidebar entry renders on every page, not just
                    // Dashboard — when real quest data exists, swap both
                    // this array and the dashboard's for a single shared
                    // source (e.g. a model call) so they can't drift apart.
                    $sidebarQuests = [
                        ['login',    'fa-door-open',   'Log in today for more than 1 hour',            '+$0.50', 100, false,  'easy'],
                        ['complete', 'fa-check-double','Complete 3 tasks',        '+$0.50', 66,  false, 'medium'],
                        ['spend',    'fa-clock',       'Spend 10 min on an offer','+$0.25', 30,  false, 'hard'],
                    ];
                    $sidebarQuestClaimable = 0;
                    foreach ($sidebarQuests as $sq) { if ($sq[5]) { $sidebarQuestClaimable++; } }
                ?>
                <button type="button" class="eg-sidenav-quest-toggle" id="eg-sidenav-quest-toggle" aria-expanded="false" aria-controls="eg-sidenav-quest-panel">
                    <i class="fas fa-scroll quest-ico"></i>
                    <span class="quest-label">Daily Quests</span>
                    <?php if ($sidebarQuestClaimable > 0) { ?>
                        <span class="quest-count"><?= $sidebarQuestClaimable ?></span>
                    <?php } ?>
                    <i class="fas fa-chevron-down chevron"></i>
                </button>
                <div class="eg-sidenav-quest-panel" id="eg-sidenav-quest-panel">
                    <?php foreach ($sidebarQuests as $sq) {
                        [$qid, $icon, $title, $reward, $progress, $done, $difficulty] = $sq;
                        $rowClass = 'eg-sidenav-quest-row' . ($done ? ' is-done' : '');
                        echo '<div class="' . $rowClass . '" data-difficulty="' . $difficulty . '">'
                           . '<span class="q-ring" style="--pct:' . $progress . ';"><i class="fas ' . $icon . '"></i></span>'
                           . '<div class="q-body"><div class="q-title">' . $title . '</div><div class="q-reward">' . $reward . '</div></div>'
                           . '<button type="button" class="q-claim" data-quest-claim="' . $qid . '" data-quest-reward="' . $reward . '"' . ($done ? '' : ' disabled') . '>'
                           . ($done ? 'Claim' : $progress . '%') . '</button>'
                           . '</div>';
                    } ?>
                </div>
            </div>

            <div class="eg-sidenav-group">
                <div class="eg-sidenav-label">Races</div>
                <a href="/leaderboard" class="eg-sidenav-link race"><i class="fas fa-trophy"></i> $2,500.00 Monthly Race</a>
                <a href="/leaderboard" class="eg-sidenav-link race"><i class="fas fa-trophy"></i> $50.00 Daily Race</a>
            </div>

            <div class="eg-sidenav-group">
                <div class="eg-sidenav-label">More</div>
                <!--<a href="/withdraw" class="eg-sidenav-link"><i class="fas fa-wallet"></i> Rewards</a>-->
                <!--<a href="/referrals" class="eg-sidenav-link"><i class="fas fa-share-alt"></i> Affiliates</a>-->
                <a href="https://trygames.ink/blog.php" class="eg-sidenav-link"><i class="fas fa-newspaper"></i> Blog</a>
                <a href="https://trygames.ink/guides.php" class="eg-sidenav-link"><i class="fas fa-book"></i> Guides</a>
                <!--<a href="#" id="chat-nav-side" class="eg-sidenav-link" onclick="openChat()"><i class="fas fa-headset"></i> Live Support</a>-->
            </div>

            <div class="eg-sidenav-spacer"></div>
        </aside>

        <div class="eg-content-wrapper">

            <header id="page-topbar">
                <div class="navbar-header">
                    <div class="d-flex align-items-center eg-header-left">
                        <button type="button" class="eg-mobile-menu-btn" id="eg-mobile-menu-btn" aria-label="Open menu">
                            <i class="fas fa-bars"></i>
                        </button>

                        <!-- Mobile/tablet only — desktop shows the balance chip in the sidebar instead -->
                        <a href="/withdraw" class="eg-topbar-balance">
                            <span class="eg-topbar-balance-icon"><i class="fas fa-wallet"></i></span>
                            <span class="eg-topbar-balance-text">
                                <span class="eg-topbar-balance-amt js-balance-amt">0.00</span>
                                <span class="eg-topbar-balance-cur js-balance-cur">Coin</span>
                            </span>
                        </a>
                    </div>

                    <div class="d-flex align-items-center eg-header-right">

                        <!-- ===================== NOTIFICATIONS ===================== -->
                        <div class="dropdown d-inline-block" id="notifications">
                            <button type="button" class="btn header-item noti-icon waves-effect" id="page-header-notifications-dropdown"
                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <i class="bx bx-bell<?= $countUnreadNotification > 0 ? ' bx-tada' : '' ?>"></i>
                                <?php if ($countUnreadNotification > 0) { ?>
                                    <span class="noti-badge"><?= $countUnreadNotification > 9 ? '9+' : $countUnreadNotification ?></span>
                                <?php } ?>
                            </button>
                            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="page-header-notifications-dropdown">
                                <div class="noti-head">
                                    <h6>Notifications</h6>
                                    <?php if ($countUnreadNotification > 0) { ?>
                                        <span class="noti-tag"><?= $countUnreadNotification ?> new</span>
                                    <?php } ?>
                                </div>
                                <div class="noti-body">
                                    <?php if (!empty($notifications)) { ?>
                                        <?php foreach ($notifications as $notification) {
                                            switch ($notification['type']) {
                                                case 0: $notiIcon = 'fas fa-bullhorn'; $notiClass = 'type-0'; break;
                                                case 1: $notiIcon = 'far fa-money-bill-alt'; $notiClass = 'type-1'; break;
                                                case 2: $notiIcon = 'fas fa-exclamation-triangle'; $notiClass = 'type-2'; break;
                                                default: $notiIcon = 'far fa-comment-dots'; $notiClass = 'type-3'; break;
                                            }
                                        ?>
                                            <a href="" class="notification-item">
                                                <span class="noti-avatar <?= $notiClass ?>"><i class="<?= $notiIcon ?>"></i></span>
                                                <div class="media-body">
                                                    <p class="noti-text"><?= $notification['content'] ?></p>
                                                    <p class="noti-time"><i class="mdi mdi-clock-outline"></i>
                                                        <?= timespan($notification["create_time"], time(), 2) ?> ago</p>
                                                </div>
                                            </a>
                                        <?php } ?>
                                    <?php } else { ?>
                                        <div class="noti-empty">
                                            <i class="bx bx-bell-off"></i>
                                            No notifications yet
                                        </div>
                                    <?php } ?>
                                </div>
                                <div class="noti-foot">
                                    <a href="/notifications">View all notifications</a>
                                </div>
                            </div>
                        </div>
                        <!-- ===================== END NOTIFICATIONS ===================== -->

                        <div class="dropdown d-inline-block">
                            <button type="button" id="page-header-user-dropdown"
                                style="--xp-pct:<?= isset($user['exp']) ? ((int) $user['exp'] % 100) : 0 ?>;"
                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <img class="header-profile-user" src="/assets/images/users/user.png" alt="Header Avatar">
                            </button>
                            <div class="dropdown-menu dropdown-menu-right" style="width:200px;">
                                <a class="dropdown-item" href="/profile"><i class="far fa-user-circle mr-1"></i> Profile</a>
                                <a class="dropdown-item" href="/history"><i class="fas fa-history mr-1"></i> History</a>
                                <a class="dropdown-item" href="/leaderboard"><i class="bx bx-bar-chart-alt-2"></i> Leaderboard</a>
                                <div class="dropdown-divider"></div>
                                <div class="dropdown-item">
                                    <label class="switch" style="display:inline-block;cursor:pointer;">
                                        <span>Show in Dollar</span>
                                        <input type="checkbox" id="toggleSwitch">
                                        <span class="slider round"></span>
                                    </label>
                                </div>
                                <a class="dropdown-item text-danger" href="/auth/logout">
                                    <i class="bx bx-power-off font-size-16 align-middle mr-1 text-danger"></i> Logout
                                </a>
                            </div>
                        </div>

                    </div>
                </div>

                <?php
                // fraud/VPN check (unchanged logic)
                $key = 'lQaTUVV7aDXBVtFMdT1H0wplPaMBbbEM';
                $ip = isset($_SERVER['REMOTE_ADDR']) ? $_SERVER['REMOTE_ADDR'] : $_SERVER['HTTP_CLIENT_IP'];
                $strictness = 1;
                $result = json_decode(file_get_contents(sprintf(
                    'https://ipqualityscore.com/api/json/ip/%s/%s?strictness=%s',
                    $key, $ip, $strictness
                )), true);
                if ($result !== null) {
                    if (isset($result['proxy']) && $result['proxy'] == true) {
                        $this->m_core->updateStatus($user['id'], 'suspect');
                        $this->m_core->insertCheatLog($user['id'], 'Vpn Usage');
                    }
                }
                ?>
            </header>

            <!-- legacy horizontal topnav — replaced by sidebar, kept empty for compatibility -->
            <div class="topnav">
                <div class="container-fluid">
                    <nav class="navbar navbar-light navbar-expand-lg topnav-menu"></nav>
                </div>
            </div>

            <div class="main-content">
                <div class="page-content">
                    <div class="container-fluid">

                        <?= $contents ?>

                    </div>
                </div>
            </div>

            <!-- ===================== BOTTOM NAV (mobile) ===================== -->
            <div class="bottom-nav1">
                <a class="nav-item1" href="/profile" id="bottom-nav-cashout-link">
                    <span class="nav-item1-icon"><i class="far fa-user-circle"></i></span>
                    <span>Profile</span>
                </a>
                <a class="nav-item1" href="/withdraw" id="bottom-nav-cashout-link">
                    <span class="nav-item1-icon">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M22.8002 9.75322V4.03407C22.8002 3.13167 22.0562 2.40002 21.1387 2.40002H2.86173C1.94415 2.40002 1.2002 3.13167 1.2002 4.03407V9.75322C1.2002 10.6556 1.94415 11.3873 2.86173 11.3873H3.27712V6.07662H20.7233V11.3873H21.1387C22.0562 11.3873 22.8002 10.6556 22.8002 9.75322Z" fill="currentColor" />
                            <path d="M4.9385 7.71096V18.3322C4.9385 19.3944 4.9383 19.7955 4.9383 21.6003H19.0616C19.0616 19.7955 19.0616 19.3944 19.0616 18.3322V7.71096H4.9385ZM12.8308 12.6131C12.8308 14.1895 11.713 15.4727 10.3385 15.4727C9.21156 15.4727 8.25826 14.6099 7.95087 13.4301H6.60004V11.7961H7.95087C8.25826 10.6163 9.21156 9.75352 10.3385 9.75352V11.3876C9.89612 11.3876 9.50773 11.9603 9.50773 12.6131C9.50773 13.2659 9.89612 13.8386 10.3385 13.8386C10.7809 13.8386 11.1693 13.2659 11.1693 12.6131C11.1693 11.0366 12.2871 9.75352 13.6616 9.75352C14.7885 9.75352 15.7418 10.6163 16.0488 11.7961H17.4V13.4301H16.0488C15.7418 14.6099 14.7885 15.4727 13.6616 15.4727V13.8386C14.104 13.8386 14.4924 13.2659 14.4924 12.6131C14.4924 11.9603 14.104 11.3876 13.6616 11.3876C13.2192 11.3876 12.8308 11.9603 12.8308 12.6131Z" fill="currentColor" />
                        </svg>
                    </span>
                    <span>Cashout</span>
                </a>

                <a class="nav-item1" href="/dashboard" id="bottom-nav-earn-link">
                    <span class="spark" aria-hidden="true"></span>
                    <span class="spark" aria-hidden="true"></span>
                    <span class="spark" aria-hidden="true"></span>
                    <span class="nav-item1-earn-label">Earn</span>
                </a>

                <a class="nav-item1" title="$200k Event" href="/leaderboard">
                    <span class="nav-item1-icon"><i class="fas fa-award"></i></span>
                    <span>Leaders</span>
                </a>
                <a class="nav-item1" href="/referrals" id="chat-nav" onclick="openChat()">
                    <span class="nav-item1-icon"><i class="fas fa-share-alt"></i></span>
                    <span>Refer</span>
                </a>
            </div>

        </div>
        <!-- end .eg-content-wrapper -->

        <!-- Right bar overlay (legacy, unused triggers kept for compatibility) -->
        <div class="right-bar d-lg-none">
            <div data-simplebar class="h-100">
                <div class="rightbar-title d-flex align-items-center px-3 py-4">
                    <h5 class="m-0 me-2">Menu</h5>
                    <a href="javascript:void(0);" class="right-bar-toggle ms-auto">
                        <i class="mdi mdi-close noti-icon"></i>
                    </a>
                </div>
                <b class="hr anim mt-0 mb-4"></b>
            </div>
        </div>

        <!-- ===================== CAPTCHA JOBS MODAL ===================== -->
        <div class="modal fade show" id="faucetss" tabindex="-1" role="dialog" aria-labelledby="faucetss" aria-modal="true">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="faucetss">Captcha Jobs</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="card" style="background:transparent;border:none;">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-6 col-lg-4">
                                        <a href="/auto">
                                            <div class="card text-center hoverr">
                                                <div style="text-align:right;">
                                                    <span class="badge bg-danger text-white" style="margin:6px;">Best</span>
                                                </div>
                                                <div class="card-body">
                                                    <h1 class="nomobile" style="font-size:38px;font-family:var(--font-display);">
                                                        <img src="/img/clock.png" style="width:32px;"><br>Auto<br>Captcha
                                                    </h1>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                    <div class="col-6 col-lg-4">
                                        <a href="/faucet">
                                            <div class="card text-center hoverr">
                                                <div style="text-align:right;">
                                                    <span class="badge bg-danger text-white" style="margin:6px;">Best</span>
                                                </div>
                                                <div class="card-body">
                                                    <h1 class="nomobile" style="font-size:38px;font-family:var(--font-display);">
                                                        <img src="/img/time.png" style="width:32px;">Manual Captcha
                                                    </h1>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                    <div class="col-6 col-lg-4">
                                        <a href="/madfaucet">
                                            <div class="card text-center hoverr">
                                                <div style="text-align:right;">
                                                    <span class="badge bg-danger text-white" style="margin:6px;">Best</span>
                                                </div>
                                                <div class="card-body">
                                                    <h1 class="nomobile" style="font-size:38px;font-family:var(--font-display);">
                                                        <img src="/img/token-s.png" style="width:32px;"><br>Mad<br>Captcha
                                                    </h1>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                </div>
                                <a href="/dashboard" type="button" class="btn btn-outline-light btn-block waves-effect"><b>Dashboard</b></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    <!-- ===================== OFFERWALL POPUP ===================== -->
    <div id="popupOverlay" style="display:none;position:fixed;inset:0;background:rgba(5,6,14,.72);
        backdrop-filter:blur(3px);z-index:2147483000;"></div>
    <div id="popupContainer" style="display:none;position:fixed;top:50%;left:50%;border-radius:15px;
        transform:translate(-50%, -50%);padding:5px;background-color:#131A2E;border:1px solid #232E52;
        box-shadow:0 10px 40px rgba(0,0,0,.55);z-index:2147483001;width:95%;height:78%;max-width:600px;">
        <span onclick="closePopup()" style="position:absolute;top:-10px;right:-10px;cursor:pointer;
            border:1px solid #232E52;width:30px;height:30px;border-radius:50%;background-color:#131A2E;color:#fff;
            display:flex;justify-content:center;align-items:center;font-size:20px;">&times;</span>
        <!--<div onclick="openExternal()" style="cursor:pointer;font-size:14px;color:#8B5CF6;-->
        <!--    margin-bottom:8px;display:inline-flex;align-items:center;gap:5px;">🔗 <span>Open in new tab</span></div>-->
        <iframe id="popupIframe" width="100%" height="100%" style="border:none;border-radius:10px;background:#fff;"></iframe>
    </div>

    </div>
    <!-- END layout-wrapper -->

    <?= $settings['footer_code'] ?>

    <!-- JAVASCRIPT -->
    <script src="<?= base_url() ?>assets/libs/jquery/jquery.min.js"></script>
    <script src="<?= base_url() ?>assets/libs/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="<?= base_url() ?>assets/libs/metismenu/metisMenu.min.js"></script>
    <script src="<?= base_url() ?>assets/libs/simplebar/simplebar.min.js"></script>
    <script src="<?= base_url() ?>assets/libs/node-waves/waves.min.js"></script>

    <?php if ($page == 'Dashboard') { ?>
        <script src="<?= base_url() ?>assets/libs/apexcharts/apexcharts.min.js"></script>
        <script>
            var options = {
                chart: { height: 180, type: 'radialBar', offsetY: -10 },
                plotOptions: {
                    radialBar: {
                        startAngle: -135, endAngle: 135,
                        dataLabels: {
                            name: { fontSize: '13px', color: undefined, offsetY: 60 },
                            value: { offsetY: 22, fontSize: '16px', color: undefined,
                                formatter: function(val) { return val + "%"; } }
                        }
                    }
                },
                colors: ['#7C3AED'],
                fill: {
                    type: 'gradient',
                    gradient: { shade:'dark', shadeIntensity:.15, inverseColors:false,
                        opacityFrom:1, opacityTo:1, stops:[0,50,65,91] },
                },
                stroke: { dashArray: 4 },
                series: [<?= ($user['exp'] % 100) ?>],
                labels: ['Level <?= $user['level'] + 1 ?>'],
            }
            var chart = new ApexCharts(document.querySelector("#radialBar-chart"), options);
            chart.render();
        </script>
    <?php } ?>

    <script type="text/javascript">
        var site_url = "<?= base_url() ?>";
        window.TryGamesPushConfig = {
            userId: <?= json_encode((string) $user['id']) ?>,
            workerUrl: <?= json_encode(base_url('push-sw.js')) ?>,
            workerScope: '/push-notifications/',
            configUrl: <?= json_encode(site_url('push-notifications/config')) ?>,
            subscribeUrl: <?= json_encode(site_url('push-notifications/subscribe')) ?>,
            unsubscribeUrl: <?= json_encode(site_url('push-notifications/unsubscribe')) ?>,
            promptDelay: 1400
        };
    </script>
    <script src="<?= base_url('assets/js/vie/push-notifications.js') ?>?v=<?= VIE_VERSION ?>"></script>
    <script src="<?= base_url() ?>assets/js/app.js?v=<?= VIE_VERSION ?>"></script>
    <script src="<?= base_url() ?>assets/js/vie/captcha.js?v=<?= VIE_VERSION ?>"></script>
    <?php if ($page == 'Deposit') { ?><script src="<?= base_url() ?>assets/js/vie/deposit.js?v=<?= VIE_VERSION ?>"></script><?php } ?>
    <?php if ($page == 'Dice') { ?><script src="<?= base_url() ?>assets/js/vie/dice.js?v=<?= VIE_VERSION ?>"></script><?php } ?>
    <?php if ($page == 'Coin Flip') { ?><script src="<?= site_url('assets/js/vie/coinflip.js?v=' . VIE_VERSION) ?>"></script><?php } ?>

    <script type="text/javascript">
        $("a[href='<?= current_url() ?>']").attr('data-active', 'true');
    </script>

    <?php if (isset($antibot_js)) { ?>
        <?= $antibot_js ?>
        <script src="<?= base_url() ?>assets/js/vie/antibotlinks.js?v=<?= VIE_VERSION ?>"></script>
    <?php } ?>
    <?php if ($page == 'Faucet') { ?><script src="<?= base_url() ?>assets/js/vie/faucet.js?v=<?= VIE_VERSION ?>"></script><?php } ?>
    <?php if ($page == 'Mad Faucet') { ?><script src="<?= base_url() ?>assets/js/vie/faucet.js?v=<?= VIE_VERSION ?>"></script><?php } ?>
    <?php if ($page == 'Wheel of fortunes') { ?>
        <script src="<?= base_url() ?>assets/js/wheel/Winwheel.min.js"></script>
        <script src="<?= base_url() ?>assets/js/wheel/TweenMax.min.js"></script>
        <script src="<?= base_url() ?>assets/js/wheel/wheel.js"></script>
    <?php } ?>
    <?php if (isset($_COOKIE['captcha'])) { ?>
        <script>$('option[value=<?= $_COOKIE['captcha'] ?>]').attr('selected', 'selected');</script>
    <?php } ?>

    <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <?php if (isset($_SESSION['sweet_message'])) { echo $_SESSION['sweet_message']; } ?>

    <!-- ===================== SHARED FX ENGINE (window.EG) ===================== -->
    <script>
    (function () {
        // Lightweight, dependency-free toast / confetti / chime / level-up
        // system. Anything on the page can call window.EG.* — the quest
        // claim buttons on the dashboard already do.
        var toastStack = document.getElementById('eg-toast-stack');
        var audioCtx = null;

        function getAudioCtx() {
            if (!audioCtx) {
                var AC = window.AudioContext || window.webkitAudioContext;
                if (AC) audioCtx = new AC();
            }
            return audioCtx;
        }

        // Short synthesized chime — no external audio asset needed.
        function chime(kind) {
            var ctx = getAudioCtx();
            if (!ctx) return;
            if (ctx.state === 'suspended') ctx.resume();
            var notes = kind === 'levelup' ? [523.25, 659.25, 783.99, 1046.5] : [659.25, 987.77];
            var t0 = ctx.currentTime;
            notes.forEach(function (freq, i) {
                var osc = ctx.createOscillator();
                var gain = ctx.createGain();
                osc.type = 'sine';
                osc.frequency.value = freq;
                var start = t0 + i * 0.09;
                gain.gain.setValueAtTime(0, start);
                gain.gain.linearRampToValueAtTime(0.14, start + 0.02);
                gain.gain.exponentialRampToValueAtTime(0.0001, start + 0.32);
                osc.connect(gain).connect(ctx.destination);
                osc.start(start);
                osc.stop(start + 0.34);
            });
        }

        function toast(title, msg, variant) {
            if (!toastStack) return;
            var el = document.createElement('div');
            el.className = 'eg-toast' + (variant ? ' ' + variant : '');
            var iconClass = variant === 'success' ? 'fa-check' : (variant === 'gold' ? 'fa-coins' : 'fa-bolt');
            el.innerHTML =
                '<span class="eg-toast-icon"><i class="fas ' + iconClass + '"></i></span>' +
                '<div class="eg-toast-body">' +
                '<div class="eg-toast-title">' + title + '</div>' +
                '<div class="eg-toast-msg">' + msg + '</div>' +
                '</div>';
            toastStack.appendChild(el);
            requestAnimationFrame(function () { el.classList.add('is-visible'); });
            setTimeout(function () {
                el.classList.remove('is-visible');
                setTimeout(function () { el.remove(); }, 320);
            }, 3800);
        }

        // Small burst of falling squares from a given viewport rect —
        // pure CSS transforms, cleans itself up after the animation.
        function confetti(originRect) {
            var colors = ['#8B5CF6', '#00E6D8', '#FFC23C', '#22E3A5', '#3CA0FF'];
            var cx = originRect ? originRect.left + originRect.width / 2 : window.innerWidth / 2;
            var cy = originRect ? originRect.top + originRect.height / 2 : window.innerHeight / 2;
            var count = 18;
            for (var i = 0; i < count; i++) {
                var piece = document.createElement('span');
                piece.className = 'eg-confetti-piece';
                var size = 4 + Math.random() * 5;
                piece.style.width = size + 'px';
                piece.style.height = (size * 1.6) + 'px';
                piece.style.left = cx + 'px';
                piece.style.top = cy + 'px';
                piece.style.background = colors[i % colors.length];
                document.body.appendChild(piece);

                var angle = (Math.random() * Math.PI) - Math.PI / 2 - Math.PI / 2;
                var distance = 60 + Math.random() * 90;
                var dx = Math.cos(angle) * distance;
                var dy = Math.sin(angle) * distance - 40;
                var rot = (Math.random() * 480) - 240;
                var duration = 700 + Math.random() * 500;

                piece.animate([
                    { transform: 'translate(0,0) rotate(0deg)', opacity: 1 },
                    { transform: 'translate(' + dx + 'px,' + (dy + 140) + 'px) rotate(' + rot + 'deg)', opacity: 0 }
                ], { duration: duration, easing: 'cubic-bezier(.2,.8,.3,1)' });

                (function (p, d) { setTimeout(function () { p.remove(); }, d + 40); })(piece, duration);
            }
        }

        // Numbers-go-up bump on a HUD value (quick highlight, no real
        // recalculation here — callers can also just re-render server data).
        function bumpHud(selector) {
            document.querySelectorAll(selector).forEach(function (el) {
                el.animate([
                    { transform: 'scale(1)', color: 'inherit' },
                    { transform: 'scale(1.18)', color: 'var(--mint)' },
                    { transform: 'scale(1)', color: 'inherit' }
                ], { duration: 480, easing: 'ease-out' });
            });
        }

        function levelUp(newLevel) {
            var overlay = document.getElementById('eg-levelup-overlay');
            var badge = document.getElementById('eg-levelup-badge');
            var sub = document.getElementById('eg-levelup-sub');
            if (!overlay) return;
            if (badge) badge.textContent = newLevel != null ? newLevel : '';
            if (sub) sub.textContent = newLevel != null ? ("You've reached level " + newLevel + ".") : "You've reached a new level.";
            overlay.classList.add('is-visible');
            chime('levelup');
            confetti({ left: window.innerWidth / 2 - 10, top: window.innerHeight / 2 - 10, width: 20, height: 20 });
        }

        var levelUpOverlay = document.getElementById('eg-levelup-overlay');
        var levelUpClose = document.getElementById('eg-levelup-close');
        if (levelUpClose) {
            levelUpClose.addEventListener('click', function () {
                levelUpOverlay.classList.remove('is-visible');
            });
        }

        window.EG = { toast: toast, confetti: confetti, chime: chime, bumpHud: bumpHud, levelUp: levelUp };
    })();
    </script>

    <script>
        // ---- Offerwall popup: event delegation ----
        var currentOfferUrl = "";

        document.addEventListener('click', function (e) {
            var el = e.target.closest('[data-offerwall]');
            if (!el) return;
            if (e.metaKey || e.ctrlKey || e.shiftKey || e.button === 1) return;
            e.preventDefault();
            openPopup(el.getAttribute('data-offerwall'));
        });

        document.getElementById('popupOverlay').addEventListener('click', closePopup);

        function openPopup(offerwallUrl) {
            currentOfferUrl = offerwallUrl;
            document.getElementById('popupIframe').src = offerwallUrl;
            document.getElementById('popupOverlay').style.display = 'block';
            document.getElementById('popupContainer').style.display = 'block';
        }
        function openExternal() {
            if (currentOfferUrl) window.open(currentOfferUrl, '_blank');
        }
        function closePopup() {
            document.getElementById('popupOverlay').style.display = 'none';
            document.getElementById('popupContainer').style.display = 'none';
            document.getElementById('popupIframe').src = 'about:blank';
        }
    </script>

    <script>
        function rtrim(str, char) {
            var regExp = new RegExp(char + '+$');
            return str.replace(regExp, '');
        }

        // ---- Balance display currency preference ----
        // Default = Coin (unchecked). Checking the switch shows Dollar (USDT).
        // Preference persists across page loads via localStorage.
        (function initToggleState() {
            var saved = localStorage.getItem('balanceShowDollar');
            if (saved === '1') {
                document.getElementById('toggleSwitch').checked = true;
            }
        })();

        function updateBalance() {
            fetch('/dashboard/balance1')
                .then(response => response.text())
                .then(balance => {
                    const formattedBalance = rtrim(balance, '0');
                    const switchEnabled = document.getElementById('toggleSwitch').checked;
                    // Unchecked (default) = Coin. Checked = Dollar (USDT).
                    const displayedBalance = switchEnabled
                        ? formattedBalance
                        : (parseFloat(formattedBalance) * 1000).toFixed(2);
                    document.querySelectorAll('.js-balance-amt').forEach(function (el) {
                        el.textContent = displayedBalance;
                    });
                    document.querySelectorAll('.js-balance-cur').forEach(function (el) {
                        el.textContent = switchEnabled ? 'USDT' : 'Coin';
                    });
                })
                .catch(error => console.error('Error fetching balance:', error));
        }
        document.getElementById('toggleSwitch').addEventListener('change', function () {
            localStorage.setItem('balanceShowDollar', this.checked ? '1' : '0');
            updateBalance();
        });
        updateBalance();
    </script>

    <!-- ===================== sidebar / bg video behavior ===================== -->
    <script>
    (function(){
        var video = document.getElementById('eg-bg-video');
        var toggle = document.getElementById('eg-bg-toggle');
        var toggleIcon = document.getElementById('eg-bg-toggle-icon');
        var reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

        if (video) {
            video.muted = true;
            video.playsInline = true;
            var tryPlay = function(){ video.play().catch(function(){}); };
            tryPlay();
            video.addEventListener('loadeddata', tryPlay, { once: true });

            // ---- Smooth loop: fade out just before the clip ends, jump
            // back to the start while hidden, then fade back in — avoids
            // the hard visual "cut" a native loop restart produces.
            var FADE_MS = 700;
            var isLooping = false;
            video.addEventListener('timeupdate', function () {
                if (isLooping || !video.duration) return;
                if (video.currentTime >= video.duration - (FADE_MS / 1000)) {
                    isLooping = true;
                    video.style.opacity = '0';
                    setTimeout(function () {
                        video.currentTime = 0;
                        video.play().catch(function(){});
                        // let the frame settle before fading back in
                        requestAnimationFrame(function () {
                            requestAnimationFrame(function () {
                                video.style.opacity = '1';
                                isLooping = false;
                            });
                        });
                    }, FADE_MS);
                }
            });
        }

        if (reduceMotion && video) {
            video.pause();
            video.removeAttribute('autoplay');
            if (toggle) {
                toggleIcon.className = 'fas fa-play';
                toggle.setAttribute('aria-pressed', 'true');
                toggle.setAttribute('aria-label', 'Play background video');
            }
        }

        if (toggle && video) {
            toggle.addEventListener('click', function () {
                if (video.paused) {
                    video.play().catch(function(){});
                    toggleIcon.className = 'fas fa-pause';
                    toggle.setAttribute('aria-pressed', 'false');
                    toggle.setAttribute('aria-label', 'Pause background video');
                } else {
                    video.pause();
                    toggleIcon.className = 'fas fa-play';
                    toggle.setAttribute('aria-pressed', 'true');
                    toggle.setAttribute('aria-label', 'Play background video');
                }
            });
        }

        var sidenav = document.getElementById('eg-sidenav');
        var overlay = document.getElementById('eg-sidenav-overlay');
        var openBtn = document.getElementById('eg-mobile-menu-btn');
        var closeBtn = document.getElementById('eg-sidenav-close');

        function openNav(){ sidenav.classList.add('is-open'); overlay.classList.add('is-open'); }
        function closeNav(){ sidenav.classList.remove('is-open'); overlay.classList.remove('is-open'); }

        if (openBtn) openBtn.addEventListener('click', openNav);
        if (closeBtn) closeBtn.addEventListener('click', closeNav);
        if (overlay) overlay.addEventListener('click', closeNav);

        // mark the sidebar link matching the current page as active
        var here = window.location.pathname.replace(/\/+$/, '') || '/';
        document.querySelectorAll('.eg-sidenav-link[href]').forEach(function(link){
            var href = link.getAttribute('href').replace(/\/+$/, '') || '/';
            if (href === here) link.classList.add('active');
        });

        // ---- Daily Quests dropdown (sidebar) ----
        var questToggle = document.getElementById('eg-sidenav-quest-toggle');
        var questPanel = document.getElementById('eg-sidenav-quest-panel');
        if (questToggle && questPanel) {
            questToggle.addEventListener('click', function () {
                var open = questPanel.classList.toggle('is-open');
                questToggle.classList.toggle('is-open', open);
                questToggle.setAttribute('aria-expanded', open ? 'true' : 'false');
            });
        }
        document.querySelectorAll('.eg-sidenav-quest-row [data-quest-claim]').forEach(function (btn) {
            btn.addEventListener('click', function () {
                if (btn.disabled) return;
                var reward = btn.getAttribute('data-quest-reward') || '';
                var row = btn.closest('.eg-sidenav-quest-row');
                btn.disabled = true;
                btn.textContent = 'Claimed';
                if (row) row.classList.add('is-done');
                if (window.EG) {
                    EG.chime('reward');
                    EG.confetti(btn.getBoundingClientRect());
                    EG.toast('Quest complete', reward + ' added to your balance', 'success');
                    EG.bumpHud('.js-balance-amt');
                }
            });
        });
    })();
    </script>

</body>
</html>