@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/nunito-latin-400-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/nunito-latin-600-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/nunito-latin-700-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('../fonts/nunito-latin-800-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url('../fonts/nunito-latin-900-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Lilita One';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/lilita-one-latin-400-normal.woff2') format('woff2');
}

        :root {
            --primary: #2d8a4e;
            --primary-dark: #1d6b38;
            --primary-light: #4caf6a;
            --accent: #f5a623;
            --accent-dark: #d4891a;
            --accent-light: #ffc857;
            --danger: #e74c3c;
            --danger-dark: #c0392b;
            --purple: #8e44ad;
            --purple-light: #a569bd;
            --blue: #3498db;
            --blue-light: #5dade2;
            --bg-dark: #0f2818;
            --bg-medium: #1a3a2a;
            --bg-light: #2a5a3e;
            --card-bg: #fef9e7;
            --card-border: #d4a843;
            --text-dark: #1a2e1a;
            --text-medium: #4a6a4a;
            --text-light: #8aaa8a;
            --glass-bg: rgba(255,255,255,0.12);
            --glass-border: rgba(255,255,255,0.18);
            --shadow-sm: 0 2px 4px rgba(0,0,0,0.15);
            --shadow-md: 0 4px 12px rgba(0,0,0,0.2);
            --shadow-lg: 0 8px 32px rgba(0,0,0,0.3);
            --shadow-xl: 0 16px 48px rgba(0,0,0,0.4);
            --radius-sm: 8px;
            --radius-md: 14px;
            --radius-lg: 22px;
            --radius-xl: 32px;
        }

        * {
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
            user-select: none;
            -webkit-user-select: none;
            margin: 0;
            padding: 0;
        }

        html, body {
            width: 100%;
            height: 100%;
            overflow: hidden;
            overscroll-behavior: none;
            font-family: 'Nunito', sans-serif;
            background: #0f2818;
            position: fixed;
            inset: 0;
            touch-action: none;
        }

     #game-container {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url('../images/bgimg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #0f2818; /* fallback color */
}

#game-container::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 30%, rgba(15, 40, 24, 0.2) 0%, rgba(5, 14, 8, 0.5) 100%);
    z-index: 1; /* Change from 0 to 1 */
    pointer-events: none;
}

#frame {
    position: relative;
    z-index: 2; /* Change from 1 to 2 */
    /* rest of your styles */
}

        /* Decorative Jungle Foliage overlays */
        

        #frame {
            position: relative;
            z-index: 1;
            overflow: hidden;
            border-radius: 0;
            box-shadow: var(--shadow-xl), 0 0 0 1px rgba(255,255,255,0.05) inset;
        }

        @media (min-width: 640px) and (min-height: 560px) {
            #frame { border-radius: 24px; }
        }

        #frame::before {
            content: '';
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 50;
            border-radius: inherit;
            box-shadow: 0 0 0 2px rgba(255,255,255,0.08) inset;
        }

        canvas#game {
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;
            touch-action: none;
            display: block;
        }

        /* ===== HUD TOP BAR ===== */
        #hud-top {
            position: absolute;
            top: 0; left: 0; right: 0;
            z-index: 10;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 8px 10px 4px;
            pointer-events: none;
        }

        #hud-top > * { pointer-events: all; }

        .hud-btn {
            width: 36px; height: 36px;
            border-radius: 50%;
            background: var(--glass-bg);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            border: 1.5px solid var(--glass-border);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: transform 0.12s ease, background 0.15s;
            flex-shrink: 0;
        }

        .hud-btn:active { transform: scale(0.88); background: rgba(255,255,255,0.2); }

        .hud-btn svg { width: 18px; height: 18px; }

        /* Score display */
        #score-center {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 3px;
            flex: 1;
            margin: 0 8px;
        }

        .score-main {
            background: linear-gradient(135deg, var(--accent), var(--accent-dark));
            color: #fff;
            font-family: 'Lilita One', cursive;
            font-size: 16px;
            letter-spacing: 0.5px;
            border-radius: 20px;
            padding: 4px 20px;
            box-shadow: 0 3px 0 var(--accent-dark), var(--shadow-sm);
            transition: transform 0.15s cubic-bezier(0.34,1.56,0.64,1);
            white-space: nowrap;
            text-align: center;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .score-main .score-icon {
            width: 20px; height: 20px;
        }

        .score-main.pop { transform: scale(1.15); }

        .score-best {
            background: rgba(255,255,255,0.15);
            backdrop-filter: blur(4px);
            color: var(--accent-light);
            font-weight: 800;
            border-radius: 10px;
            padding: 2px 10px;
            white-space: nowrap;
            font-size: 10px;
            display: flex;
            align-items: center;
            gap: 4px;
            border: 1px solid rgba(255,200,87,0.2);
        }

        /* Combo badge */
        #combo-badge {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            z-index: 11;
            background: linear-gradient(135deg, #ff6b35, #e74c3c);
            color: #fff;
            font-family: 'Lilita One', cursive;
            font-size: 13px;
            border-radius: 16px;
            padding: 3px 14px;
            box-shadow: 0 3px 0 #c0392b, var(--shadow-sm);
            white-space: nowrap;
            opacity: 0;
            transition: opacity 0.2s, transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
            transform: translateX(-50%) scale(0.5);
        }

        #combo-badge.show {
            opacity: 1;
            transform: translateX(-50%) scale(1);
        }

        /* Level bar */
        #level-bar-wrap {
            position: absolute;
            left: 0; right: 0;
            z-index: 9;
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 0 12px;
        }

        #level-badge {
            background: linear-gradient(135deg, var(--accent), var(--accent-dark));
            color: #fff;
            font-family: 'Lilita One', cursive;
            font-size: 10px;
            border-radius: 8px;
            padding: 1px 8px;
            box-shadow: 0 2px 0 var(--accent-dark);
            white-space: nowrap;
        }

        #xp-track {
            flex: 1;
            background: rgba(0,0,0,0.3);
            border-radius: 6px;
            overflow: hidden;
            border: 1px solid rgba(255,255,255,0.08);
        }

        #xp-fill {
            height: 100%;
            background: linear-gradient(90deg, var(--primary-light), var(--accent));
            border-radius: 6px;
            transition: width 0.5s cubic-bezier(0.34,1.56,0.64,1);
            box-shadow: 0 0 8px rgba(76,175,106,0.4);
        }

        /* ===== SIDE PANELS ===== */
        /* Powerups - Left */
        #powerups {
            position: absolute;
            left: 0; top: 0; bottom: 0;
            z-index: 10;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            padding-top: 62px;
            gap: 6px;
            pointer-events: none;
        }

        .pu-btn {
            border: none;
            border-radius: var(--radius-md);
            background: var(--glass-bg);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            border: 1.5px solid var(--glass-border);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            position: relative;
            pointer-events: all;
            transition: transform 0.12s ease, box-shadow 0.12s;
        }

        .pu-btn:active { transform: scale(0.88); }

        .pu-btn:disabled { opacity: 0.35; cursor: not-allowed; }

        .pu-count {
            position: absolute;
            top: -5px; right: -5px;
            background: var(--danger);
            color: #fff;
            border-radius: 50%;
            font-weight: 900;
            font-size: 9px;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 16px; height: 16px;
            box-shadow: 0 2px 4px rgba(231,76,60,0.4);
            border: 1.5px solid rgba(255,255,255,0.3);
        }

        .pu-btn .pu-icon { line-height: 1; }

        .pu-btn .pu-icon svg { width: 20px; height: 20px; }

        .pu-btn .pu-name {
            font-size: 7px;
            font-weight: 800;
            color: rgba(255,255,255,0.8);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .pu-btn.active-pu {
            box-shadow: 0 0 0 2px var(--accent), 0 0 16px rgba(245,166,35,0.4);
            border-color: var(--accent);
            animation: puGlow 0.8s ease-in-out infinite alternate;
        }

        @keyframes puGlow {
            from { box-shadow: 0 0 0 2px var(--accent), 0 0 12px rgba(245,166,35,0.3); }
            to { box-shadow: 0 0 0 3px var(--accent-light), 0 0 20px rgba(245,166,35,0.5); }
        }

        /* Next + Hold - Right */
        #side-panel {
            position: absolute;
            right: 0; top: 0; bottom: 0;
            z-index: 10;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            padding-top: 62px;
            gap: 6px;
            pointer-events: none;
        }

        .panel-box {
            background: var(--glass-bg);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            border: 1.5px solid var(--glass-border);
            border-radius: var(--radius-md);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2px;
            pointer-events: all;
        }

        .panel-label {
            font-weight: 800;
            font-size: 8px;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: rgba(255,255,255,0.6);
            width: 100%;
            text-align: center;
            padding: 2px 4px;
            background: rgba(0,0,0,0.15);
            border-radius: var(--radius-md) var(--radius-md) 0 0;
        }

        .panel-icon {
            width: 38px; height: 38px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(255,255,255,0.1);
            font-size: 20px;
            border: 2px solid rgba(255,255,255,0.15);
        }

        .panel-icon.pop {
            animation: iconPop 0.3s cubic-bezier(0.34,1.56,0.64,1);
        }

        @keyframes iconPop {
            0% { transform: scale(1); }
            50% { transform: scale(1.3); }
            100% { transform: scale(1); }
        }

        #hold-btn {
            border: none;
            border-radius: 0 0 var(--radius-md) var(--radius-md);
            background: linear-gradient(135deg, var(--blue), var(--blue-light));
            color: #fff;
            font-weight: 800;
            font-size: 8px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            cursor: pointer;
            width: 100%;
            padding: 4px 0;
            transition: transform 0.12s;
        }

        #hold-btn:active { transform: scale(0.92); }

        #hold-btn:disabled { background: #555; cursor: not-allowed; opacity: 0.5; }

        /* ===== BOTTOM STRIP (Evolution Progress) ===== */
        #strip {
            position: absolute;
            left: 0; right: 0; bottom: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 3px;
            z-index: 10;
            background: linear-gradient(180deg, rgba(15,40,24,0.95), rgba(10,25,15,0.98));
            border-top: 2px solid rgba(255,255,255,0.08);
            overflow-x: auto;
            padding: 4px 8px;
            backdrop-filter: blur(8px);
        }

        #strip::-webkit-scrollbar { display: none; }

        .strip-item {
            border-radius: 50%;
            background: rgba(255,255,255,0.06);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            opacity: 0.35;
            transition: all 0.4s cubic-bezier(0.34,1.56,0.64,1);
            border: 1.5px solid rgba(255,255,255,0.06);
        }

        .strip-item.reached {
            opacity: 1;
            background: rgba(245,166,35,0.15);
            border-color: var(--accent);
            box-shadow: 0 0 8px rgba(245,166,35,0.3);
            transform: scale(1.1);
        }

        .strip-arrow {
            color: rgba(255,255,255,0.2);
            flex-shrink: 0;
            font-size: 10px;
        }

        /* ===== DAILY CHALLENGE ===== */
        #daily-bar {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            z-index: 10;
            background: var(--glass-bg);
            backdrop-filter: blur(8px);
            border: 1.5px solid var(--glass-border);
            border-radius: var(--radius-md);
            display: flex;
            align-items: center;
            gap: 6px;
            white-space: nowrap;
            pointer-events: all;
        }

        #daily-bar.hidden { display: none !important; }

        /* ===== ACHIEVEMENT TOAST ===== */
        #ach-toast {
            position: absolute;
            bottom: 56px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 30;
            background: linear-gradient(135deg, var(--accent), var(--accent-dark));
            color: #fff;
            font-weight: 800;
            border-radius: 20px;
            padding: 8px 20px;
            box-shadow: var(--shadow-md);
            white-space: nowrap;
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.3s ease;
            font-size: 12px;
            border: 1px solid rgba(255,255,255,0.2);
        }

        #ach-toast.show { opacity: 1; }

        /* ===== PAUSE SCREEN ===== */
        #pause-screen {
            position: absolute;
            inset: 0;
            z-index: 25;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(0,0,0,0.65);
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
        }

        #pause-screen.hidden { display: none !important; }

        /* ===== OVERLAYS ===== */
        .overlay {
            position: absolute;
            inset: 0;
            z-index: 20;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            overflow-y: auto;
            padding: 20px;
        }

        .overlay.hidden { display: none !important; }

        /* Menu Screen */
        #menu-screen {
            background-color: #0c1e12;
            background-image: 
                linear-gradient(180deg, rgba(12,30,18,0.55) 0%, rgba(5,14,8,0.75) 100%),
                url('bg-menu.jpg'),
                url('assets/bg-jungle.jpg'),
                radial-gradient(ellipse at 50% 30%, #2d8a4e 0%, #0f2818 100%);
            background-position: center center;
            background-size: cover;
            background-repeat: no-repeat;
        }

        /* Decorative floating elements */
        .menu-decor {
            position: absolute;
            pointer-events: none;
            opacity: 0.6;
            animation: floatDecor 4s ease-in-out infinite;
        }

        @keyframes floatDecor {
            0%, 100% { transform: translateY(0) rotate(0deg); }
            50% { transform: translateY(-12px) rotate(3deg); }
        }

        /* Leaf pattern background */
        .menu-bg-pattern {
            position: absolute;
            inset: 0;
            opacity: 0.04;
            background-image: 
                radial-gradient(circle at 20% 80%, rgba(255,255,255,0.3) 1px, transparent 1px),
                radial-gradient(circle at 80% 20%, rgba(255,255,255,0.3) 1px, transparent 1px),
                radial-gradient(circle at 50% 50%, rgba(255,255,255,0.2) 1px, transparent 1px);
            background-size: 60px 60px, 80px 80px, 40px 40px;
            pointer-events: none;
        }

        /* Logo area */
        .logo-container {
            text-align: center;
            margin-bottom: 8px;
            position: relative;
        }

        .logo-icon {
            width: 96px; height: 96px;
            margin: 0 auto 10px;
            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
            border-radius: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 10px 28px rgba(45,138,78,0.5), 0 4px 0 var(--primary-dark);
            border: 3.5px solid rgba(255,255,255,0.25);
            animation: logoFloat 3s ease-in-out infinite;
        }

        @keyframes logoFloat {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-6px); }
        }

        .logo-icon svg { width: 84px; height: 84px; }

        .logo-img {
            width: 84px;
            height: 84px;
            object-fit: contain;
            display: block;
        }

        .logo-title {
            font-family: 'Lilita One', cursive;
            font-size: 38px;
            line-height: 1;
            color: #fff;
            text-shadow: 0 3px 0 var(--primary-dark), 0 6px 12px rgba(0,0,0,0.3);
            letter-spacing: 1px;
        }

        .logo-subtitle {
            font-family: 'Lilita One', cursive;
            font-size: 22px;
            color: var(--accent-light);
            text-shadow: 0 2px 0 var(--accent-dark);
            line-height: 1.1;
            margin-top: 2px;
        }

        .menu-tagline {
            color: rgba(255,255,255,0.6);
            font-weight: 700;
            font-size: 12px;
            text-align: center;
            margin: 6px 0 12px;
            letter-spacing: 0.5px;
        }

        /* Stats row */
        .menu-stats-row {
            display: flex;
            gap: 8px;
            margin: 8px 0 16px;
        }

        .stat-pill {
            background: var(--glass-bg);
            backdrop-filter: blur(8px);
            border: 1.5px solid var(--glass-border);
            border-radius: var(--radius-md);
            padding: 8px 14px;
            text-align: center;
            flex: 1;
        }

        .stat-pill .sv {
            font-family: 'Lilita One', cursive;
            font-size: 20px;
            color: var(--accent-light);
        }

        .stat-pill .sk {
            font-size: 9px;
            font-weight: 700;
            color: rgba(255,255,255,0.5);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        /* Play button */
        .play-btn-wrap {
            position: relative;
            margin-bottom: 16px;
            display: flex;
            justify-content: center;
        }

        .play-btn {
            min-width: 170px;
            height: 70px;
            padding: 0 34px;
            border-radius: 35px;
            background: linear-gradient(135deg, var(--primary-light), var(--primary));
            border: 4px solid rgba(255,255,255,0.35);
            box-shadow: 0 6px 0 var(--primary-dark), 0 0 30px rgba(76,175,106,0.4);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            cursor: pointer;
            transition: all 0.15s ease;
            animation: playPulse 2.5s ease-in-out infinite;
            color: #fff;
            font-family: 'Lilita One', cursive;
            font-size: 26px;
            letter-spacing: 1.5px;
            text-shadow: 0 2px 4px rgba(0,0,0,0.25);
            user-select: none;
        }

        .play-btn:active {
            transform: translateY(4px) scale(0.96);
            box-shadow: 0 2px 0 var(--primary-dark);
        }

        .play-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 0 var(--primary-dark), 0 0 35px rgba(76,175,106,0.5);
        }

        .play-btn svg {
            width: 28px;
            height: 28px;
            flex-shrink: 0;
            filter: drop-shadow(0 2px 2px rgba(0,0,0,0.2));
        }

        @keyframes playPulse {
            0%, 100% { box-shadow: 0 6px 0 var(--primary-dark), 0 0 0 0 rgba(76,175,106,0.4); }
            50% { box-shadow: 0 6px 0 var(--primary-dark), 0 0 0 16px rgba(76,175,106,0); }
        }

        /* Menu buttons row */
        .menu-btns-row {
            display: flex;
            gap: 8px;
        }

        .menu-btn {
            border: none;
            cursor: pointer;
            color: #fff;
            font-family: 'Nunito', sans-serif;
            font-weight: 800;
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            border-radius: 12px;
            padding: 8px 14px;
            display: flex;
            align-items: center;
            gap: 5px;
            transition: transform 0.12s, box-shadow 0.12s;
            box-shadow: 0 3px 0 rgba(0,0,0,0.2);
        }

        .menu-btn:active {
            transform: translateY(2px);
            box-shadow: 0 1px 0 rgba(0,0,0,0.2);
        }

        .menu-btn svg { width: 14px; height: 14px; }
        .menu-btn.btn-scores { background: linear-gradient(135deg, var(--purple), var(--purple-light)); }
        .menu-btn.btn-badges { background: linear-gradient(135deg, var(--accent), var(--accent-dark)); }
        .menu-btn.btn-how { background: linear-gradient(135deg, var(--blue), var(--blue-light)); }

        /* ===== GAME CARDS ===== */
        .game-card {
            position: relative;
            background: linear-gradient(180deg, #fef9e7, #f5e6c8);
            border: 3px solid var(--card-border);
            border-radius: var(--radius-xl);
            width: 90%;
            max-width: 320px;
            text-align: center;
            box-shadow: var(--shadow-lg);
            overflow: visible;
        }

        .card-banner {
            position: absolute;
            top: -18px;
            left: 50%;
            transform: translateX(-50%);
            font-family: 'Lilita One', cursive;
            font-size: 14px;
            color: #fff;
            border-radius: 10px;
            padding: 4px 18px;
            white-space: nowrap;
            letter-spacing: 0.5px;
        }

        .card-banner.banner-default { background: linear-gradient(135deg, var(--accent), var(--accent-dark)); box-shadow: 0 3px 0 var(--accent-dark); }
        .card-banner.banner-danger { background: linear-gradient(135deg, var(--danger), var(--danger-dark)); box-shadow: 0 3px 0 var(--danger-dark); }
        .card-banner.banner-success { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); box-shadow: 0 3px 0 var(--primary-dark); }
        .card-banner.banner-purple { background: linear-gradient(135deg, var(--purple), #6c3483); box-shadow: 0 3px 0 #5b2c6f; }
        .card-banner.banner-blue { background: linear-gradient(135deg, var(--blue), #2471a3); box-shadow: 0 3px 0 #1a5276; }

        .card-content {
            padding: 28px 18px 18px;
        }

        .card-mascot {
            font-size: 48px;
            margin: 4px 0 8px;
            animation: mascotBob 2.4s ease-in-out infinite;
        }

        @keyframes mascotBob {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-6px); }
        }

        /* Score display in cards */
        .card-score {
            background: #fff;
            border-radius: 12px;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-family: 'Lilita One', cursive;
            font-size: 16px;
            color: var(--text-dark);
            padding: 6px 16px;
            box-shadow: 0 2px 0 rgba(0,0,0,0.06);
            margin: 6px auto;
        }

        .card-score .score-val { color: var(--primary); }

        .card-best {
            background: #fff;
            border-radius: 12px;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-weight: 800;
            color: var(--purple);
            padding: 5px 14px;
            box-shadow: 0 2px 0 rgba(0,0,0,0.06);
            margin: 4px auto;
            font-size: 13px;
        }

        /* Stats mini */
        .card-stats-row {
            display: flex;
            gap: 6px;
            justify-content: center;
            margin: 10px 0;
        }

        .card-stat {
            background: #fff;
            border-radius: 10px;
            padding: 6px 10px;
            text-align: center;
            box-shadow: 0 2px 0 rgba(0,0,0,0.06);
            min-width: 60px;
        }

        .card-stat .cs-icon { font-size: 16px; }
        .card-stat .cs-val { font-family: 'Lilita One', cursive; font-size: 14px; color: var(--text-dark); }
        .card-stat .cs-label { font-size: 8px; font-weight: 700; color: var(--text-light); text-transform: uppercase; }

        /* Buttons */
        .btn-row { display: flex; gap: 10px; justify-content: center; margin-top: 12px; }

        .btn {
            border: none;
            cursor: pointer;
            color: #fff;
            font-family: 'Nunito', sans-serif;
            font-weight: 800;
            border-radius: var(--radius-md);
            transition: transform 0.12s, box-shadow 0.12s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
        }

        .btn:active { transform: translateY(2px); }
        .btn svg { width: 16px; height: 16px; }

        .btn-primary {
            background: linear-gradient(135deg, var(--primary-light), var(--primary));
            box-shadow: 0 3px 0 var(--primary-dark);
            padding: 10px 22px;
            font-size: 14px;
        }

        .btn-primary:active { box-shadow: 0 1px 0 var(--primary-dark); }

        .btn-secondary {
            background: linear-gradient(135deg, var(--purple-light), var(--purple));
            box-shadow: 0 3px 0 #5b2c6f;
            padding: 10px 18px;
            font-size: 14px;
        }

        .btn-secondary:active { box-shadow: 0 1px 0 #5b2c6f; }

        .btn-warning {
            background: linear-gradient(135deg, var(--accent), var(--accent-dark));
            box-shadow: 0 3px 0 var(--accent-dark);
            padding: 10px 22px;
            font-size: 14px;
            color: #fff;
        }

        .btn-warning:active { box-shadow: 0 1px 0 var(--accent-dark); }

        .btn-icon {
            width: 40px; height: 40px;
            border-radius: 50%;
            padding: 0;
        }

        /* Settings toggles */
        .settings-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin: 8px 16px;
            padding: 4px 0;
        }

        .settings-label {
            font-weight: 800;
            font-size: 14px;
            color: var(--text-dark);
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .settings-label svg { width: 18px; height: 18px; opacity: 0.6; }

        .toggle-switch {
            width: 44px; height: 26px;
            border-radius: 13px;
            border: none;
            cursor: pointer;
            position: relative;
            transition: background 0.2s;
            box-shadow: inset 0 2px 4px rgba(0,0,0,0.15);
        }

        .toggle-switch::after {
            content: '';
            position: absolute;
            width: 20px; height: 20px;
            border-radius: 50%;
            background: #fff;
            top: 3px;
            transition: left 0.2s;
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }

        .toggle-switch.on {
            background: linear-gradient(135deg, var(--primary-light), var(--primary));
        }

        .toggle-switch.on::after { left: 21px; }

        .toggle-switch.off {
            background: #ccc;
        }

        .toggle-switch.off::after { left: 3px; }

        /* Leaderboard */
        .lb-row {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 6px 12px;
            border-radius: 10px;
            margin: 3px 12px;
        }

        .lb-row.me {
            background: rgba(142,68,173,0.08);
            border: 1.5px solid var(--purple);
        }

        .lb-rank {
            font-weight: 900;
            color: var(--purple);
            width: 24px;
            text-align: center;
            flex-shrink: 0;
            font-size: 13px;
        }

        .lb-name {
            flex: 1;
            font-weight: 700;
            color: var(--text-dark);
            text-align: left;
            font-size: 12px;
        }

        .lb-score {
            font-family: 'Lilita One', cursive;
            color: var(--primary);
            font-size: 14px;
        }

        /* Achievement list */
        .ach-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 6px 12px;
            border-radius: 10px;
            margin: 3px 12px;
        }

        .ach-item.unlocked {
            background: rgba(45,138,78,0.08);
            border: 1.5px solid rgba(45,138,78,0.3);
        }

        .ach-item.locked {
            background: rgba(0,0,0,0.03);
            border: 1.5px solid rgba(0,0,0,0.05);
        }

        .ach-icon { font-size: 22px; flex-shrink: 0; }
        .ach-item.locked .ach-icon { filter: grayscale(1); opacity: 0.35; }
        .ach-info { flex: 1; text-align: left; }
        .ach-name { font-weight: 800; font-size: 12px; color: var(--text-dark); }
        .ach-desc { font-size: 10px; color: var(--text-light); }
        .ach-status { font-size: 16px; flex-shrink: 0; }

        /* How to play */
        .how-step {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 6px 12px;
            border-radius: 10px;
            margin: 3px 12px;
            background: rgba(0,0,0,0.03);
        }

        .how-step-icon {
            width: 32px; height: 32px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--primary-light), var(--primary));
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .how-step-icon svg { width: 16px; height: 16px; }

        .how-step-text {
            font-size: 12px;
            font-weight: 700;
            color: var(--text-dark);
            text-align: left;
        }

        /* ===== FLOATING EFFECTS ===== */
        .float-pop {
            position: absolute;
            z-index: 8;
            pointer-events: none;
            font-family: 'Lilita One', cursive;
            color: #fff;
            text-shadow: 0 2px 4px rgba(0,0,0,0.4);
            animation: floatUp 0.9s ease-out forwards;
        }

        @keyframes floatUp {
            0% { transform: translate(-50%,-50%) scale(0.5); opacity: 0; }
            15% { transform: translate(-50%,-65%) scale(1.2); opacity: 1; }
            100% { transform: translate(-50%,-180%) scale(0.8); opacity: 0; }
        }

        .merge-ring {
            position: absolute;
            z-index: 7;
            pointer-events: none;
            border: 3px solid rgba(255,255,255,0.8);
            border-radius: 50%;
            animation: ringOut 0.5s ease-out forwards;
        }

        @keyframes ringOut {
            0% { transform: translate(-50%,-50%) scale(0.2); opacity: 0.9; }
            100% { transform: translate(-50%,-50%) scale(2.8); opacity: 0; }
        }

        .combo-flash {
            position: absolute;
            inset: 0;
            z-index: 6;
            pointer-events: none;
            animation: comboFlash 0.3s ease-out forwards;
        }

        @keyframes comboFlash {
            0% { opacity: 1; }
            100% { opacity: 0; }
        }

        .confetti {
            position: absolute;
            z-index: 15;
            pointer-events: none;
            border-radius: 2px;
            animation: confettiFall var(--dur) ease-out forwards;
        }

        @keyframes confettiFall {
            0% { transform: translate(0,0) rotate(0deg) scale(1); opacity: 1; }
            100% { transform: translate(var(--dx),var(--dy)) rotate(var(--rot)) scale(0.4); opacity: 0; }
        }

        .bomb-ring {
            position: absolute;
            z-index: 7;
            pointer-events: none;
            border: 4px solid var(--danger);
            border-radius: 50%;
            animation: bombRing 0.6s ease-out forwards;
        }

        @keyframes bombRing {
            0% { transform: translate(-50%,-50%) scale(0.1); opacity: 1; }
            100% { transform: translate(-50%,-50%) scale(4); opacity: 0; }
        }

        .freeze-overlay {
            position: absolute;
            inset: 0;
            z-index: 5;
            pointer-events: none;
            background: rgba(100,200,255,0.08);
            animation: freezePulse 3s ease-in-out;
        }

        @keyframes freezePulse {
            0%, 100% { opacity: 0; }
            50% { opacity: 1; }
        }

        .score-x2-badge {
            position: absolute;
            top: 50%; left: 50%;
            transform: translate(-50%,-50%);
            z-index: 8;
            pointer-events: none;
            font-family: 'Lilita One', cursive;
            font-size: 42px;
            color: var(--accent-light);
            text-shadow: 0 0 20px var(--accent), 0 4px 0 var(--accent-dark);
            animation: x2Pop 1s ease-out forwards;
        }

        @keyframes x2Pop {
            0% { transform: translate(-50%,-50%) scale(0); opacity: 0; }
            30% { transform: translate(-50%,-50%) scale(1.3); opacity: 1; }
            70% { transform: translate(-50%,-50%) scale(1); opacity: 1; }
            100% { transform: translate(-50%,-50%) scale(0.6); opacity: 0; }
        }

        .tier-unlock {
            position: absolute;
            top: 30%; left: 50%;
            transform: translateX(-50%);
            z-index: 12;
            pointer-events: none;
            text-align: center;
            animation: tierUnlock 2.2s ease-out forwards;
        }

        @keyframes tierUnlock {
            0% { transform: translateX(-50%) translateY(20px); opacity: 0; }
            15% { transform: translateX(-50%) translateY(0); opacity: 1; }
            75% { transform: translateX(-50%) translateY(0); opacity: 1; }
            100% { transform: translateX(-50%) translateY(-30px); opacity: 0; }
        }

        .tier-unlock-inner {
            background: linear-gradient(135deg, var(--accent), var(--accent-dark));
            border-radius: 16px;
            padding: 8px 20px;
            box-shadow: var(--shadow-md);
            color: #fff;
            font-family: 'Lilita One', cursive;
            font-size: 14px;
            border: 2px solid rgba(255,255,255,0.3);
        }

        /* Shake animation */
        @keyframes shake {
            0% { transform: translate(0,0); }
            25% { transform: translate(-3px,2px); }
            50% { transform: translate(3px,-2px); }
            75% { transform: translate(-2px,1px); }
            100% { transform: translate(0,0); }
        } 

        /* Version tag */
        .version-tag {
            position: absolute;
            bottom: 50px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 9px;
            color: rgba(255,255,255,0.2);
            font-weight: 700;
            letter-spacing: 1px;
        }