*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
        *::-webkit-scrollbar{display:none}
        html,body{
            width:100%;height:100%;overflow:hidden;
            font-family:'Sora','Space Grotesk',system-ui,sans-serif;
            -webkit-tap-highlight-color:transparent;
            -webkit-user-select:none;user-select:none;
            touch-action:manipulation;
            background:#050510;color:#fff;
        }

        .mesh-bg{
            position:fixed;inset:0;z-index:0;
            background:
                radial-gradient(circle at 20% 30%, rgba(88,28,255,0.35) 0%, transparent 45%),
                radial-gradient(circle at 75% 60%, rgba(0,210,255,0.25) 0%, transparent 45%),
                radial-gradient(circle at 50% 90%, rgba(255,0,128,0.2) 0%, transparent 40%),
                radial-gradient(circle at 90% 15%, rgba(0,255,136,0.12) 0%, transparent 35%);
            animation:meshMove 12s ease-in-out infinite alternate;
            filter:blur(60px);
        }
        @keyframes meshMove{
            0%{transform:scale(1) translate(0,0)}
            33%{transform:scale(1.05) translate(-2%,3%)}
            66%{transform:scale(0.98) translate(3%,-2%)}
            100%{transform:scale(1.03) translate(-1%,1%)}
        }

        .noise{
            position:fixed;inset:0;z-index:1;
            opacity:0.03;pointer-events:none;
            background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
            background-repeat:repeat;
        }

        canvas{display:block;position:absolute;inset:0;z-index:2;touch-action:none}

        .scherm{
            position:absolute;inset:0;
            display:flex;flex-direction:column;align-items:center;justify-content:center;
            z-index:10;opacity:0;pointer-events:none;
            transition:opacity 0.6s cubic-bezier(0.16,1,0.3,1);
        }
        .scherm.actief{opacity:1;pointer-events:auto}

        .hero{text-align:center;position:relative;z-index:2}

        .logo{
            font-size:clamp(56px,14vw,120px);
            font-weight:800;line-height:1;
            background:linear-gradient(135deg,#00d4ff 0%,#7b2dff 30%,#ff0080 60%,#ff8c00 100%);
            background-size:200% 200%;
            -webkit-background-clip:text;background-clip:text;
            -webkit-text-fill-color:transparent;
            animation:logoShimmer 6s ease infinite;
            filter:drop-shadow(0 0 40px rgba(123,45,255,0.4)) drop-shadow(0 0 80px rgba(0,212,255,0.2));
            letter-spacing:-3px;
        }
        @keyframes logoShimmer{
            0%,100%{background-position:0% 50%}
            50%{background-position:100% 50%}
        }

        .tagline{
            font-size:clamp(11px,2.5vw,15px);
            font-weight:600;letter-spacing:8px;
            text-transform:uppercase;
            color:rgba(255,255,255,0.25);
            margin-top:12px;margin-bottom:56px;
        }

        .orb{
            position:absolute;border-radius:50%;
            filter:blur(40px);pointer-events:none;
            animation:orbFloat 8s ease-in-out infinite alternate;
        }
        .orb-1{width:200px;height:200px;background:rgba(0,212,255,0.15);top:-60px;left:-80px;animation-delay:0s}
        .orb-2{width:150px;height:150px;background:rgba(255,0,128,0.12);bottom:-40px;right:-60px;animation-delay:2s}
        .orb-3{width:120px;height:120px;background:rgba(123,45,255,0.1);top:20px;right:-40px;animation-delay:4s}
        @keyframes orbFloat{
            0%{transform:translate(0,0) scale(1)}
            100%{transform:translate(15px,-20px) scale(1.15)}
        }

        .btn{
            border:none;outline:none;cursor:pointer;
            font-family:inherit;font-weight:700;
            border-radius:16px;position:relative;
            transition:all 0.2s cubic-bezier(0.16,1,0.3,1);
            overflow:hidden;
        }
        .btn:active{transform:scale(0.95)!important}

        .btn-play{
            padding:20px 64px;font-size:18px;
            background:linear-gradient(135deg,#7b2dff,#00d4ff);
            color:#fff;letter-spacing:2px;text-transform:uppercase;
            box-shadow:0 8px 32px rgba(123,45,255,0.4),0 0 0 1px rgba(255,255,255,0.06) inset;
        }
        .btn-play:hover{
            transform:translateY(-3px);
            box-shadow:0 12px 48px rgba(123,45,255,0.5),0 0 0 1px rgba(255,255,255,0.1) inset;
        }
        .btn-play::before{
            content:'';position:absolute;inset:-3px;
            border-radius:18px;z-index:-1;
            background:linear-gradient(135deg,#7b2dff,#00d4ff,#ff0080);
            filter:blur(20px);opacity:0.5;
            animation:btnGlow 3s ease-in-out infinite alternate;
        }
        @keyframes btnGlow{0%{opacity:0.3}100%{opacity:0.6}}

        .btn-glass{
            padding:16px 40px;font-size:15px;
            background:rgba(255,255,255,0.04);
            -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
            border:1px solid rgba(255,255,255,0.08);
            color:#fff;letter-spacing:1px;
        }
        .btn-glass:hover{
            background:rgba(255,255,255,0.08);
            border-color:rgba(255,255,255,0.15);
            transform:translateY(-2px);
        }

        .btn-accent{
            padding:16px 40px;font-size:15px;
            background:linear-gradient(135deg,#7b2dff,#00d4ff);
            color:#fff;letter-spacing:1px;
            box-shadow:0 4px 20px rgba(123,45,255,0.3);
        }

        .btn-pink{
            padding:16px 40px;font-size:15px;
            background:linear-gradient(135deg,#ff0080,#ff8c00);
            color:#fff;letter-spacing:1px;
            box-shadow:0 4px 20px rgba(255,0,128,0.3);
        }

        .modus-wrap{
            display:flex;gap:20px;flex-wrap:wrap;
            justify-content:center;padding:24px;
        }
        .modus-card{
            width:min(300px,42vw);
            padding:36px 28px;
            background:rgba(255,255,255,0.03);
            -webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);
            border:1px solid rgba(255,255,255,0.06);
            border-radius:24px;
            text-align:center;cursor:pointer;
            transition:all 0.3s cubic-bezier(0.16,1,0.3,1);
            position:relative;overflow:hidden;
        }
        .modus-card::before{
            content:'';position:absolute;inset:0;
            background:linear-gradient(135deg,transparent 40%,rgba(255,255,255,0.03) 100%);
            pointer-events:none;
        }
        .modus-card:hover{
            transform:translateY(-6px);
            border-color:rgba(255,255,255,0.12);
            box-shadow:0 20px 60px rgba(0,0,0,0.3),0 0 40px rgba(123,45,255,0.08);
        }
        .modus-card:active{transform:scale(0.97)}
        .modus-card.locked{opacity:0.35;pointer-events:none;filter:grayscale(0.5)}

        .card-icon{
            width:72px;height:72px;margin:0 auto 20px;
            border-radius:20px;
            display:flex;align-items:center;justify-content:center;
        }
        .icon-zen{
            background:linear-gradient(135deg,rgba(0,212,255,0.15),rgba(0,212,255,0.03));
            box-shadow:0 0 30px rgba(0,212,255,0.1),inset 0 0 0 1px rgba(0,212,255,0.1);
        }
        .icon-challenge{
            background:linear-gradient(135deg,rgba(255,0,128,0.15),rgba(255,0,128,0.03));
            box-shadow:0 0 30px rgba(255,0,128,0.1),inset 0 0 0 1px rgba(255,0,128,0.1);
        }

        .card-title{font-size:22px;font-weight:700;margin-bottom:8px}
        .card-desc{font-size:13px;color:rgba(255,255,255,0.35);line-height:1.6}
        .card-badge{
            display:inline-block;margin-top:16px;
            padding:4px 14px;border-radius:50px;
            font-size:11px;font-weight:700;letter-spacing:1px;
            text-transform:uppercase;
        }
        .badge-free{background:rgba(0,212,255,0.12);color:#00d4ff}
        .badge-locked{background:rgba(255,255,255,0.04);color:rgba(255,255,255,0.3)}
        .badge-unlock{background:rgba(0,255,136,0.12);color:#00ff88}
        .badge-new{background:rgba(255,34,0,0.15);color:#ff4422;animation:newPulse 2s ease-in-out infinite}
        @keyframes newPulse{0%,100%{opacity:1}50%{opacity:0.6}}
        .icon-rush{
            background:linear-gradient(135deg,rgba(255,34,0,0.15),rgba(255,34,0,0.03));
            box-shadow:0 0 30px rgba(255,34,0,0.1),inset 0 0 0 1px rgba(255,34,0,0.1);
        }
        .rush-card{border:1px solid rgba(255,34,0,0.2)}

        .missie-scroll{
            width:min(680px,92vw);max-height:65vh;
            overflow-y:auto;padding:4px 8px;
            scrollbar-width:thin;scrollbar-color:rgba(255,255,255,0.08) transparent;
        }
        #profiel div::-webkit-scrollbar{display:none}
        #shop .shop-wrap::-webkit-scrollbar{display:none}
        .missie-scroll::-webkit-scrollbar{width:4px}
        .missie-scroll::-webkit-scrollbar-track{background:transparent}
        .missie-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.08);border-radius:4px}

        .missie-card{
            display:flex;align-items:center;gap:18px;
            padding:20px 22px;margin-bottom:10px;
            background:rgba(255,255,255,0.03);
            -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
            border:1px solid rgba(255,255,255,0.06);
            border-radius:18px;cursor:pointer;
            transition:all 0.25s ease;
        }
        .missie-card:hover{
            transform:translateX(4px);
            border-color:rgba(255,0,128,0.15);
            box-shadow:0 8px 30px rgba(0,0,0,0.2);
        }
        .missie-card.locked{opacity:0.2;pointer-events:none}
        .missie-card.done{border-color:rgba(0,255,136,0.1)}

        .missie-nr{
            width:44px;height:44px;border-radius:14px;
            display:flex;align-items:center;justify-content:center;
            font-size:18px;font-weight:800;flex-shrink:0;
        }
        .missie-nr-open{
            background:linear-gradient(135deg,rgba(255,0,128,0.15),rgba(255,0,128,0.05));
            color:#ff0080;
        }
        .missie-nr-done{
            background:linear-gradient(135deg,rgba(0,255,136,0.15),rgba(0,255,136,0.05));
            color:#00ff88;
        }
        .missie-nr-locked{
            background:rgba(255,255,255,0.03);
            color:rgba(255,255,255,0.15);
        }

        .missie-info{flex:1;text-align:left}
        .missie-titel{font-size:15px;font-weight:700;margin-bottom:3px}
        .missie-doel{font-size:12px;color:rgba(255,255,255,0.3)}

        .missie-sterren{display:flex;gap:4px;flex-shrink:0}
        .ster{width:18px;height:18px;opacity:0.12}
        .ster.on{opacity:1;filter:drop-shadow(0 0 6px #ff8c00)}

        .hoofdstuk-card{
            display:flex;align-items:center;gap:16px;
            padding:18px 20px;margin-bottom:10px;
            background:rgba(255,255,255,0.03);
            border:1px solid rgba(255,255,255,0.04);
            border-radius:16px;cursor:pointer;
            transition:all 0.2s ease;position:relative;overflow:hidden
        }
        .hoofdstuk-card:hover{transform:translateX(4px);box-shadow:0 8px 30px rgba(0,0,0,0.2)}
        .hoofdstuk-card.locked{opacity:0.25;pointer-events:none}
        .hoofdstuk-card.complete{border-color:rgba(0,255,136,0.12)}
        .hoofdstuk-icon{
            width:48px;height:48px;border-radius:14px;
            display:flex;align-items:center;justify-content:center;
            font-size:16px;font-weight:900;flex-shrink:0;letter-spacing:1px
        }
        .hoofdstuk-info{flex:1;text-align:left}
        .hoofdstuk-naam{font-size:16px;font-weight:700;margin-bottom:4px}
        .hoofdstuk-progress{font-size:11px;color:rgba(255,255,255,0.35)}
        .hoofdstuk-stars{display:flex;gap:2px;margin-top:4px}
        .hoofdstuk-bar{height:3px;border-radius:2px;background:rgba(255,255,255,0.06);margin-top:6px;overflow:hidden}
        .hoofdstuk-bar-fill{height:100%;border-radius:2px;transition:width 0.4s ease}
        .missie-unlock{font-size:11px;color:rgba(255,255,255,0.4);margin-top:2px;font-style:italic}

        .game-ui{position:absolute;inset:0;pointer-events:none;z-index:15}
        .game-ui>*{pointer-events:none}
        .game-ui *{pointer-events:none}
        .scherm.actief .pause-btn{pointer-events:auto!important}
        .scherm:not(.actief) .game-ui{display:none}
        .scherm.actief .game-ui>.overlay.on{pointer-events:auto}
        .scherm.actief .game-ui>.overlay.on *{pointer-events:auto}

        .combo-bar{
            position:absolute;top:calc(20px + env(safe-area-inset-top, 0px));left:50%;transform:translateX(-50%);
            width:min(280px,65vw);height:40px;
            background:rgba(10,8,24,0.72);
            border:1px solid rgba(255,255,255,0.06);
            border-radius:20px;overflow:hidden;
            pointer-events:none;
        }
        .combo-fill{
            height:100%;width:0%;
            background:linear-gradient(90deg,#7b2dff,#00d4ff,#ff0080);
            background-size:200% 100%;
            animation:comboGrad 2s linear infinite;
            border-radius:20px;
            transition:width 0.1s ease-out;
            pointer-events:none;
        }
        @keyframes comboGrad{0%{background-position:0%}100%{background-position:200%}}

        .combo-label{
            position:absolute;inset:0;
            display:flex;align-items:center;justify-content:center;
            font-size:13px;font-weight:700;letter-spacing:2px;
            text-shadow:0 0 10px rgba(0,0,0,0.5);
            pointer-events:none;
        }

        .score-display{position:absolute;top:calc(20px + env(safe-area-inset-top, 0px));left:calc(20px + env(safe-area-inset-left, 0px))}
        .score-num{
            font-size:32px;font-weight:800;
            background:linear-gradient(135deg,#00d4ff,#7b2dff);
            -webkit-background-clip:text;background-clip:text;
            -webkit-text-fill-color:transparent;
            line-height:1;
        }
        .score-sub{font-size:11px;color:rgba(255,255,255,0.3);font-weight:600;letter-spacing:2px;text-transform:uppercase;margin-top:2px}

        .timer-wrap{
            position:absolute;top:70px;left:50%;transform:translateX(-50%);
            text-align:center;display:none;
        }
        .timer-wrap.on{display:block}
        .timer-num{
            font-size:28px;font-weight:800;
            color:#ff0080;
            text-shadow:0 0 20px rgba(255,0,128,0.4);
        }
        .timer-num.warn{animation:timerPulse 0.5s ease infinite}
        @keyframes timerPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
        .missie-label{
            font-size:11px;color:rgba(255,255,255,0.3);
            font-weight:600;letter-spacing:1.5px;
            text-transform:uppercase;margin-top:4px;
        }

        .sterren-result{
            display:flex;gap:12px;justify-content:center;margin:20px 0;
        }
        .ster-groot{width:40px;height:40px;opacity:0.12;transition:all 0.3s ease}
        .ster-groot.on{opacity:1;filter:drop-shadow(0 0 12px #ff8c00);transform:scale(1.1)}

        .xp-wrap{
            position:absolute;bottom:calc(24px + env(safe-area-inset-bottom, 0px));left:50%;transform:translateX(-50%);
            width:min(360px,85vw);text-align:center;
        }
        .xp-track{
            width:100%;height:4px;
            background:rgba(255,255,255,0.04);
            border-radius:2px;overflow:hidden;margin-bottom:8px;
        }
        .xp-fill{
            height:100%;width:0%;
            background:linear-gradient(90deg,#00ff88,#00d4ff);
            border-radius:2px;transition:width 0.4s ease-out;
            box-shadow:0 0 12px rgba(0,255,136,0.3);
        }
        .xp-text{
            font-size:11px;font-weight:600;
            color:rgba(255,255,255,0.25);letter-spacing:1.5px;
        }

        .pause-btn{
            position:absolute;top:calc(20px + env(safe-area-inset-top, 0px));right:calc(20px + env(safe-area-inset-right, 0px));
            width:48px;height:48px;border-radius:14px;
            background:rgba(255,255,255,0.04);
            -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
            border:1px solid rgba(255,255,255,0.06);
            display:flex;align-items:center;justify-content:center;
            cursor:pointer;transition:all 0.2s ease;color:#fff;
        }
        .pause-btn:hover{background:rgba(255,255,255,0.08)}
        .pause-btn:active{transform:scale(0.9)}

        .wave-indicator{
            position:absolute;top:calc(75px + env(safe-area-inset-top, 0px));left:50%;transform:translateX(-50%);
            display:flex;align-items:center;gap:8px;pointer-events:none;
        }
        .wave-ind-num{
            background:rgba(0,212,255,0.15);border:1px solid rgba(0,212,255,0.2);
            border-radius:6px;padding:2px 8px;font-size:13px;font-weight:700;color:#00d4ff;
        }
        .wave-ind-naam{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,0.35)}

        .combo-glow{
            position:absolute;inset:0;pointer-events:none;z-index:5;
            opacity:0;transition:opacity 0.5s ease;
        }
        .combo-glow.on{opacity:1}

        .pop-score{
            position:absolute;pointer-events:none;z-index:12;
            font-weight:800;
            text-shadow:0 0 15px currentColor;
            animation:popFloat 0.9s cubic-bezier(0.16,1,0.3,1) forwards;
        }
        @keyframes popFloat{
            0%{opacity:1;transform:translateY(0) scale(0.8)}
            30%{transform:translateY(-20px) scale(1.2)}
            100%{opacity:0;transform:translateY(-70px) scale(0.9)}
        }

        .combo-burst{
            position:absolute;left:50%;top:45%;z-index:13;
            transform:translate(-50%,-50%);
            font-size:48px;font-weight:800;
            pointer-events:none;
            text-shadow:0 0 40px currentColor;
            animation:burstIn 0.8s cubic-bezier(0.16,1,0.3,1) forwards;
        }
        @keyframes burstIn{
            0%{opacity:0;transform:translate(-50%,-50%) scale(0.3)}
            30%{opacity:1;transform:translate(-50%,-50%) scale(1.3)}
            100%{opacity:0;transform:translate(-50%,-50%) scale(1.6)}
        }

        .lvl-up{
            position:absolute;top:75px;left:50%;transform:translateX(-50%);
            background:rgba(0,212,255,0.08);
            -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
            border:1px solid rgba(0,212,255,0.15);
            padding:14px 32px;border-radius:16px;
            text-align:center;z-index:60;
            opacity:0;pointer-events:none;
            transition:all 0.4s cubic-bezier(0.16,1,0.3,1);
            transform:translateX(-50%) translateY(-10px);
        }
        .lvl-up.show{opacity:1;pointer-events:none;transform:translateX(-50%) translateY(0)}
        .lvl-title{font-size:16px;font-weight:800;color:#00d4ff}
        .lvl-desc{font-size:12px;color:rgba(255,255,255,0.4);margin-top:2px}

        .overlay{
            position:absolute;inset:0;
            background:rgba(5,5,16,0.88);
            -webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px);
            display:flex;align-items:center;justify-content:center;
            z-index:50;opacity:0;pointer-events:none;
            transition:opacity 0.35s ease;
        }
        .overlay.on{opacity:1;pointer-events:auto}
        .scherm:not(.actief) .overlay{pointer-events:none!important;opacity:0!important}

        .modal{
            background:rgba(255,255,255,0.03);
            -webkit-backdrop-filter:blur(40px);backdrop-filter:blur(40px);
            border:1px solid rgba(255,255,255,0.06);
            border-radius:28px;padding:44px 36px;
            text-align:center;width:min(380px,88vw);
        }
        .modal-title{
            font-size:28px;font-weight:800;margin-bottom:16px;
            background:linear-gradient(135deg,#00d4ff,#7b2dff);
            -webkit-background-clip:text;background-clip:text;
            -webkit-text-fill-color:transparent;
        }
        .modal-title.pink{
            background:linear-gradient(135deg,#ff0080,#ff8c00);
            -webkit-background-clip:text;background-clip:text;
        }
        .modal-sub{font-size:14px;color:rgba(255,255,255,0.4);margin-bottom:24px}
        .modal-btns{display:flex;flex-direction:column;gap:12px}

        /* Reward Sequence */
        .reward-score{font-size:48px;font-weight:900;color:#fff;text-align:center;margin:8px 0;
            opacity:0;transform:scale(3);letter-spacing:2px}
        .reward-score.slam{animation:scoreSlam 0.6s cubic-bezier(0.34,1.56,0.64,1) forwards}
        .reward-flex{font-size:18px;font-weight:800;letter-spacing:3px;text-transform:uppercase;
            text-align:center;margin:4px 0 10px;opacity:0;transform:translateY(10px)}
        .reward-flex.in{animation:flyInUp 0.4s ease forwards}
        .reward-coins{margin:12px 0;border-top:1px solid rgba(255,255,255,0.06);padding-top:10px}
        .reward-coin-row{display:flex;justify-content:space-between;padding:4px 0;font-size:13px;color:rgba(255,255,255,0.5)}
        .reward-coin-row.in-left{animation:flyInLeft 0.35s ease forwards}
        .reward-coin-row.in-right{animation:flyInRight 0.35s ease forwards}
        .reward-coin-val{color:#ffd700;font-weight:700}
        .reward-coin-total{display:flex;justify-content:space-between;padding:8px 0 0;
            font-size:15px;font-weight:700;color:#fff;border-top:1px solid rgba(255,255,255,0.08)}
        .reward-coin-total .reward-coin-val{font-size:17px}
        .reward-xp{margin:10px 0}
        .reward-xp-bar{height:6px;background:rgba(255,255,255,0.08);border-radius:3px;overflow:hidden}
        .reward-xp-fill{height:100%;background:linear-gradient(90deg,#7b2dff,#00d4ff);border-radius:3px;
            width:0%;transition:width 0.8s ease}
        .reward-xp-fill.glow{animation:xpFillGlow 0.5s ease}
        .reward-xp-text{font-size:11px;color:rgba(255,255,255,0.35);margin-top:4px;text-align:right}
        .reward-levelup{font-size:22px;font-weight:900;text-align:center;color:#ffd700;
            opacity:0;transform:scale(0.5);margin:6px 0}
        .reward-levelup.pop{animation:scoreSlam 0.5s cubic-bezier(0.34,1.56,0.64,1) forwards}
        .reward-hook{font-size:14px;font-weight:700;text-align:center;color:#00d4ff;
            margin:8px 0;opacity:0;transform:translateY(8px)}
        .reward-hook.in{animation:flyInUp 0.4s ease forwards}
        .reward-cta{animation:pulseGlow 1.5s ease infinite}
        @keyframes scoreSlam{0%{transform:scale(3);opacity:0}50%{transform:scale(0.92)}
            70%{transform:scale(1.05)}100%{transform:scale(1);opacity:1}}
        @keyframes flyInLeft{from{transform:translateX(-60px);opacity:0}to{transform:translateX(0);opacity:1}}
        @keyframes flyInRight{from{transform:translateX(60px);opacity:0}to{transform:translateX(0);opacity:1}}
        @keyframes flyInUp{from{transform:translateY(12px);opacity:0}to{transform:translateY(0);opacity:1}}
        @keyframes pulseGlow{0%,100%{box-shadow:0 0 15px rgba(123,45,255,0.3)}
            50%{box-shadow:0 0 30px rgba(123,45,255,0.5),0 0 60px rgba(0,212,255,0.15)}}
        @keyframes xpFillGlow{0%{filter:brightness(1)}50%{filter:brightness(1.6)}100%{filter:brightness(1)}}

        .nav-btn{
            position:absolute;top:calc(20px + env(safe-area-inset-top, 0px));width:48px;height:48px;
            border-radius:14px;border:none;
            background:rgba(255,255,255,0.04);
            -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
            border:1px solid rgba(255,255,255,0.06);
            display:flex;align-items:center;justify-content:center;
            cursor:pointer;transition:all 0.2s ease;color:#fff;z-index:20;
        }
        .nav-btn:hover{background:rgba(255,255,255,0.08)}
        .nav-btn:active{transform:scale(0.9)}
        .nav-l{left:calc(20px + env(safe-area-inset-left, 0px))}.nav-r{right:calc(20px + env(safe-area-inset-right, 0px))}

        .settings-group{margin-bottom:28px;text-align:left;width:min(320px,80vw)}
        .settings-label{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,0.25);margin-bottom:10px;display:block}
        input[type="range"]{
            width:100%;height:44px;border-radius:2px;
            background:transparent;
            -webkit-appearance:none;appearance:none;outline:none;
            cursor:pointer
        }
        input[type="range"]::-webkit-slider-runnable-track{height:3px;background:rgba(255,255,255,0.06);border-radius:2px}
        input[type="range"]::-webkit-slider-thumb{
            -webkit-appearance:none;width:18px;height:18px;border-radius:50%;
            background:linear-gradient(135deg,#7b2dff,#00d4ff);
            box-shadow:0 0 15px rgba(123,45,255,0.4);cursor:pointer;
            margin-top:-7.5px;
        }
        input[type="range"]::-moz-range-thumb{
            width:18px;height:18px;border:none;border-radius:50%;
            background:linear-gradient(135deg,#7b2dff,#00d4ff);
            box-shadow:0 0 15px rgba(123,45,255,0.4);cursor:pointer;
        }
        input[type="range"]::-moz-range-track{height:3px;background:rgba(255,255,255,0.06);border-radius:2px}

        .section-title{
            font-size:24px;font-weight:800;margin-bottom:32px;
            background:linear-gradient(135deg,#00d4ff,#7b2dff);
            -webkit-background-clip:text;background-clip:text;
            -webkit-text-fill-color:transparent;
            text-align:center;
        }
        .section-title.pink{
            background:linear-gradient(135deg,#ff0080,#ff8c00);
            -webkit-background-clip:text;background-clip:text;
        }

        /* === PROFIEL HEADER === */
        .profiel-header{position:relative;width:100%;padding:20px 0 24px;display:flex;flex-direction:column;align-items:center}
        .profiel-header::before{content:'';position:absolute;inset:0;
            background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(123,45,255,0.2) 0%,transparent 70%),
                        radial-gradient(ellipse 60% 40% at 30% 100%,rgba(0,212,255,0.08) 0%,transparent 60%);
            pointer-events:none}
        .profiel-flex-titel{font-size:clamp(26px,8vw,40px);font-weight:900;letter-spacing:4px;text-transform:uppercase;
            margin-top:8px;margin-bottom:6px;text-shadow:0 0 30px currentColor,0 0 60px currentColor;line-height:1}
        .profiel-flex-titel.gradient{background:linear-gradient(90deg,#ff0080,#ff8c00,#ffff00,#00d4ff);
            -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
            filter:drop-shadow(0 0 20px rgba(255,0,128,0.6)) drop-shadow(0 0 40px rgba(0,212,255,0.4))}
        .profiel-avatar-wrap{position:relative;width:96px;height:96px;margin-bottom:14px}
        .profiel-avatar-ring{position:absolute;inset:-4px;border-radius:50%;
            background:conic-gradient(from 0deg,#7b2dff,#00d4ff,#ff0080,#7b2dff);
            animation:ringRotate 4s linear infinite;opacity:0.85}
        .profiel-avatar-ring::after{content:'';position:absolute;inset:3px;border-radius:50%;background:var(--bg,#0a0818)}
        @keyframes ringRotate{to{transform:rotate(360deg)}}
        .profiel-avatar-wrap img,.profiel-avatar-wrap svg{position:relative;z-index:1;width:96px;height:96px;border-radius:50%;object-fit:cover}
        .profiel-naam{font-size:clamp(24px,7vw,32px);font-weight:800;letter-spacing:-0.5px;
            background:linear-gradient(135deg,#fff 0%,rgba(255,255,255,0.7) 100%);
            -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:6px;line-height:1.1}
        .level-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 16px;
            background:linear-gradient(135deg,rgba(123,45,255,0.25),rgba(0,212,255,0.15));
            border:1px solid rgba(0,212,255,0.3);border-radius:50px;font-size:11px;font-weight:700;
            color:#00d4ff;letter-spacing:1.5px;text-transform:uppercase;
            box-shadow:0 0 16px rgba(0,212,255,0.15),inset 0 1px 0 rgba(255,255,255,0.08);margin-bottom:12px}
        .profiel-coins-pill{font-size:12px;color:rgba(255,200,0,0.7);font-weight:700;margin-bottom:14px}
        .profiel-xp-wrap{width:min(280px,80vw);margin-bottom:6px}
        .profiel-xp-wrap .xp-track{height:6px;border-radius:3px}
        .profiel-xp-wrap .xp-fill{box-shadow:0 0 12px rgba(0,212,255,0.5),0 0 24px rgba(0,212,255,0.2)}
        .profiel-xp-tekst{font-size:11px;color:rgba(255,255,255,0.3);text-align:center;margin-bottom:20px}

        /* === PROFIEL ENTRY ANIM === */
        @keyframes profielIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
        #profiel.actief > div{animation:profielIn 0.35s cubic-bezier(0.22,1,0.36,1) both}
        #profiel.actief .profiel-avatar-wrap{animation:profielIn 0.4s 0.05s both cubic-bezier(0.22,1,0.36,1)}
        #profiel.actief .profiel-naam{animation:profielIn 0.4s 0.1s both cubic-bezier(0.22,1,0.36,1)}
        #profiel.actief .profiel-flex-titel{animation:profielIn 0.4s 0.15s both cubic-bezier(0.22,1,0.36,1)}
        #profiel.actief .stat-reel{animation:profielIn 0.4s 0.2s both cubic-bezier(0.22,1,0.36,1)}

        /* === STAT REEL === */
        .stat-reel{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding:4px 0 8px;scroll-snap-type:x mandatory;
            -webkit-mask-image:linear-gradient(to right,black 75%,transparent 100%);mask-image:linear-gradient(to right,black 75%,transparent 100%)}
        .stat-reel::-webkit-scrollbar{display:none}
        .stat-held{flex:0 0 min(130px,36vw);scroll-snap-align:start;padding:16px 14px;
            background:linear-gradient(135deg,rgba(255,255,255,0.05) 0%,rgba(255,255,255,0.02) 100%);
            border:1px solid rgba(255,255,255,0.08);border-radius:16px;position:relative;overflow:hidden;
            box-shadow:inset 0 1px 0 rgba(255,255,255,0.1),0 8px 24px rgba(0,0,0,0.3)}
        .stat-held::before{content:'';position:absolute;top:-20px;right:-20px;width:60px;height:60px;
            border-radius:50%;background:var(--stat-kleur,#00d4ff);opacity:0.12;filter:blur(20px)}
        .stat-held-waarde{font-size:clamp(26px,7vw,34px);font-weight:800;line-height:1;color:#fff;margin-bottom:4px;
            font-variant-numeric:tabular-nums}
        .stat-held-label{font-size:10px;font-weight:700;color:rgba(255,255,255,0.45);text-transform:uppercase;letter-spacing:1.5px}

        /* === SECONDARY STATS === */
        .stat-grid-klein{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
        .stat-mini{padding:10px 12px;background:rgba(255,255,255,0.025);border:1px solid rgba(255,255,255,0.05);
            border-radius:10px;display:flex;justify-content:space-between;align-items:center;
            box-shadow:inset 0 1px 0 rgba(255,255,255,0.06)}
        .stat-mini-label{font-size:11px;color:rgba(255,255,255,0.45);font-weight:600}
        .stat-mini-waarde{font-size:14px;font-weight:700;color:rgba(255,255,255,0.75)}

        /* === PROFIEL SECTIES === */
        .profiel-sectie{text-align:left;margin-top:24px}
        .profiel-sectie-kop{font-size:12px;font-weight:700;color:rgba(255,255,255,0.4);letter-spacing:2px;
            text-transform:uppercase;margin-bottom:12px;display:flex;align-items:baseline;gap:8px;
            border-left:3px solid #00d4ff;padding-left:10px}
        .profiel-sectie-kop span{color:rgba(255,200,0,0.6);font-size:11px}

        /* === LEADERBOARD RANK === */
        .profiel-rank-card{padding:14px 16px;background:linear-gradient(135deg,rgba(123,45,255,0.08),rgba(0,212,255,0.06));
            border:1px solid rgba(123,45,255,0.15);border-radius:14px;display:flex;align-items:center;gap:12px;
            margin-top:16px;box-shadow:inset 0 1px 0 rgba(255,255,255,0.08)}
        .profiel-rank-nr{font-size:28px;font-weight:800;color:#00d4ff;min-width:40px;text-align:center}
        .profiel-rank-label{font-size:12px;color:rgba(255,255,255,0.4);font-weight:600}

        /* === BADGE ENTRY ANIM === */
        @keyframes badgePop{0%{transform:scale(0.6);opacity:0}70%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}

        /* Thema kaarten */
        .thema-kaart{
            display:flex;align-items:center;gap:16px;
            padding:18px 20px;
            background:rgba(255,255,255,0.03);
            -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
            border:1px solid rgba(255,255,255,0.06);
            border-radius:18px;cursor:pointer;
            transition:all 0.25s ease;
        }
        .thema-kaart:hover{
            transform:translateX(4px);
            border-color:rgba(255,255,255,0.12);
            box-shadow:0 8px 30px rgba(0,0,0,0.2);
        }
        .thema-kaart.actief-thema{
            border-color:rgba(0,212,255,0.3);
            box-shadow:0 0 20px rgba(0,212,255,0.08);
        }
        .thema-preview{
            display:flex;gap:5px;flex-shrink:0;
        }
        .thema-bol{
            width:18px;height:18px;border-radius:50%;
            box-shadow:0 0 8px currentColor;
        }
        .thema-info{flex:1}
        .thema-naam{font-size:15px;font-weight:700;margin-bottom:2px}
        .thema-badge-premium{
            display:inline-block;margin-left:8px;
            padding:2px 10px;border-radius:50px;
            font-size:10px;font-weight:700;letter-spacing:1px;
            background:rgba(255,215,0,0.1);color:#ffd700;
            text-transform:uppercase;
        }

        /* Screenshake */
        .shake{animation:shake 0.3s ease}
        @keyframes shake{
            0%,100%{transform:translate(0,0)}
            20%{transform:translate(-3px,2px)}
            40%{transform:translate(3px,-2px)}
            60%{transform:translate(-2px,-1px)}
            80%{transform:translate(2px,1px)}
        }
        .shake-hard{animation:shakeHard 0.4s ease}
        @keyframes shakeHard{
            0%,100%{transform:translate(0,0)}
            15%{transform:translate(-6px,4px)}
            30%{transform:translate(5px,-5px)}
            45%{transform:translate(-4px,-3px)}
            60%{transform:translate(4px,3px)}
            75%{transform:translate(-2px,2px)}
        }

        @media(max-width:480px){
            .modus-card{width:min(280px,85vw)}
            .combo-bar{height:34px;top:14px}
            .score-display{top:14px;left:14px}
            .pause-btn{top:14px;right:14px}
            .timer-wrap{top:56px}
        }
        /* === BUBBLE LOADOUT SLOTS === */
        .bubbel-slots-wrap{margin-top:10px;text-align:center}
        .bubbel-slots-divider{width:40px;height:1px;background:rgba(255,255,255,0.06);margin:0 auto 8px}
        .bubbel-slots-label{font-size:10px;font-weight:600;color:rgba(255,255,255,0.25);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:6px}
        .bubbel-slots{display:flex;gap:8px;justify-content:center;align-items:center;flex-wrap:wrap}
        .bubbel-slots-hint{font-size:10px;color:rgba(0,212,255,0.4);margin-top:6px;text-align:center}
        .bubbel-slot{
            width:48px;height:48px;border-radius:12px;
            background:rgba(255,255,255,0.04);
            border:1px solid rgba(255,255,255,0.08);
            backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
            display:flex;flex-direction:column;align-items:center;justify-content:center;
            cursor:pointer;transition:transform 0.08s ease,border-color 0.2s ease,background 0.2s ease,box-shadow 0.2s ease;
            position:relative;overflow:hidden;
            touch-action:manipulation;-webkit-tap-highlight-color:transparent
        }
        .bubbel-slot:active{transform:scale(0.91)}
        .bubbel-slot.gevuld{border-color:rgba(0,212,255,0.35);box-shadow:0 0 10px rgba(0,212,255,0.08),inset 0 1px 0 rgba(255,255,255,0.08);background:rgba(0,212,255,0.05)}
        .bubbel-slot.gevuld:hover{border-color:rgba(0,212,255,0.55);box-shadow:0 0 16px rgba(0,212,255,0.14),inset 0 1px 0 rgba(255,255,255,0.1)}
        .bubbel-slot.leeg{border:1px dashed rgba(255,255,255,0.15);animation:slotIdlePulse 3s ease-in-out infinite}
        .bubbel-slot.leeg:hover{background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.2);animation:none}
        @keyframes slotIdlePulse{0%,100%{border-color:rgba(255,255,255,0.12);box-shadow:none}50%{border-color:rgba(0,212,255,0.25);box-shadow:0 0 8px rgba(0,212,255,0.08)}}
        .bubbel-slot.locked{border:1px solid rgba(255,215,0,0.25);background:rgba(255,215,0,0.04)}
        .bubbel-slot.locked:hover{border-color:rgba(255,215,0,0.5);background:rgba(255,215,0,0.08);box-shadow:0 0 12px rgba(255,215,0,0.1)}
        .bubbel-slot-naam{font-size:8px;color:rgba(255,255,255,0.5);margin-top:2px;text-transform:capitalize}
        .bubbel-slot-prijs{font-size:9px;color:#ffd700;font-weight:700;letter-spacing:-0.3px}
        .bubbel-slot canvas{border-radius:50%}
        @keyframes slotFill{0%{transform:scale(0.5);opacity:0}70%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}
        .slot-bubble-enter{animation:slotFill 0.3s cubic-bezier(0.16,1,0.3,1) both}
        @keyframes slotPulse{0%,100%{box-shadow:0 0 0 0 rgba(0,212,255,0);border-color:rgba(255,255,255,0.15)}50%{box-shadow:0 0 0 4px rgba(0,212,255,0.15);border-color:rgba(0,212,255,0.3)}}
        .bubbel-slot.leeg.hint-pulse{animation:slotPulse 2s ease-in-out 3}
        @keyframes slotUnlocked{0%{transform:scale(0.85);border-color:rgba(255,215,0,0.8);box-shadow:0 0 20px rgba(255,215,0,0.4)}50%{transform:scale(1.08);border-color:rgba(0,212,255,0.6);box-shadow:0 0 24px rgba(0,212,255,0.3)}100%{transform:scale(1);border-color:rgba(0,212,255,0.35);box-shadow:0 0 10px rgba(0,212,255,0.08)}}
        .bubbel-slot.nieuw-ontgrendeld{animation:slotUnlocked 0.6s cubic-bezier(0.16,1,0.3,1) forwards}
        /* === BUBBLE CHOOSER === */
        .bubbel-kiezer-item{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px;border-radius:12px;cursor:pointer;transition:transform 0.1s ease,background 0.15s ease,border-color 0.15s ease;border:2px solid transparent}
        .bubbel-kiezer-item:active{transform:scale(0.93)}
        .bubbel-kiezer-item.huidig{border-color:#00d4ff;background:rgba(0,212,255,0.08)}
        .bubbel-kiezer-item.in-gebruik{opacity:0.4;cursor:default}
        .bubbel-kiezer-item.vergrendeld{opacity:0.3;cursor:pointer}
        .bubbel-kiezer-item:not(.in-gebruik):not(.vergrendeld):hover{background:rgba(255,255,255,0.06)}
        .btn-glass-danger{background:rgba(255,34,0,0.08);border-color:rgba(255,34,0,0.2);color:rgba(255,120,80,0.9)}
        .btn-glass-danger:hover{background:rgba(255,34,0,0.14);border-color:rgba(255,34,0,0.4)}
        /* === BUBBLE COLLECTION === */
        .collect-progress{text-align:center;font-size:13px;color:rgba(255,255,255,0.5);margin:-8px 0 12px}
        .collect-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;padding:0 20px 40px;width:100%;max-width:600px}
        .collect-card{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:16px;padding:16px 12px;text-align:center;transition:transform 0.2s;overflow:hidden}
        .collect-card:hover{transform:scale(1.03)}
        .collect-card.locked{opacity:0.35;filter:grayscale(0.8)}
        .collect-orb{width:80px;height:80px;margin:0 auto 10px;display:flex;align-items:center;justify-content:center;font-size:24px;will-change:transform}
        .collect-orb canvas{will-change:contents}
        #bubbelCollectie{background:#050510}
        .collect-card.locked .collect-orb{background:rgba(255,255,255,0.06)!important}
        .collect-name{font-weight:700;font-size:14px;margin-bottom:4px}
        .collect-cat{font-size:10px;text-transform:uppercase;letter-spacing:1px;padding:2px 8px;border-radius:6px;display:inline-block;margin-bottom:6px}
        .collect-cat.basis{background:rgba(0,212,255,0.15);color:#00d4ff}
        .collect-cat.offensive{background:rgba(255,215,0,0.15);color:#ffd700}
        .collect-cat.defensive{background:rgba(0,229,255,0.15);color:#80f2ff}
        .collect-cat.tactical{background:rgba(0,255,136,0.15);color:#00ff88}
        .collect-cat.dangerous{background:rgba(255,34,0,0.15);color:#ff6644}
        .collect-cat.special{background:rgba(155,89,182,0.15);color:#c39bd3}
        .collect-cat.legendary{background:rgba(255,0,204,0.15);color:#ff80e6}
        .collect-desc{font-size:11px;color:rgba(255,255,255,0.45);line-height:1.4}
        .collect-card.locked .collect-name{color:rgba(255,255,255,0.3)}
        .collect-card.locked .collect-desc{color:rgba(255,255,255,0.15)}
        @media(max-width:380px){.collect-grid{grid-template-columns:repeat(2,1fr);gap:10px;padding:0 12px 32px}}

        /* === EERSTE KEER HINT === */
        .eerste-keer-hint{
            position:absolute;top:50%;left:50%;
            transform:translate(-50%,-50%);
            background:rgba(5,5,16,0.82);
            color:#fff;font-size:22px;font-weight:800;letter-spacing:0.02em;
            padding:14px 32px;border-radius:40px;
            pointer-events:none;
            opacity:0;transition:opacity 0.4s ease;
            z-index:200;white-space:nowrap;
            border:1.5px solid rgba(123,45,255,0.4);
        }
        .eerste-keer-hint.on{opacity:1}

        /* === ADS === */
        .ad-banner{
            position:fixed;bottom:0;left:0;right:0;
            height:60px;z-index:50;
            display:none;align-items:center;justify-content:center;
            background:rgba(10,10,20,0.9);
            border-top:1px solid rgba(255,255,255,0.06);
        }
        .ad-banner.on{display:flex}
        .ad-interstitial{
            position:fixed;inset:0;z-index:10001;
            background:rgba(5,5,16,0.98);
            display:none;align-items:center;justify-content:center;
        }
        .ad-interstitial.on{display:flex}
        .ad-inter-content{width:min(400px,90vw);min-height:300px;position:relative;
            background:rgba(255,255,255,0.03);border-radius:20px;
            display:flex;align-items:center;justify-content:center}
        .ad-inter-sluit{
            position:absolute;top:12px;right:16px;
            font-size:13px;font-weight:700;color:rgba(255,255,255,0.4);
            cursor:pointer;padding:8px 16px;
            background:rgba(255,255,255,0.06);border-radius:10px;
        }
        .ad-inter-sluit:hover{color:#fff;background:rgba(255,255,255,0.1)}

        /* === BADGES === */
        .badge-toast{
            position:fixed;top:-80px;left:50%;transform:translateX(-50%);
            background:rgba(20,10,40,0.85);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
            border:1px solid rgba(255,200,0,0.3);border-radius:16px;
            padding:12px 24px;display:flex;align-items:center;gap:12px;
            z-index:9999;transition:top 0.5s cubic-bezier(0.34,1.56,0.64,1);
            box-shadow:0 0 30px rgba(255,200,0,0.15);
            pointer-events:none;
        }
        .badge-toast.on{top:20px}
        .badge-toast-icoon{font-size:28px}
        .badge-toast-tekst{font-size:13px;font-weight:700;letter-spacing:1px}
        .badge-toast-sub{font-size:11px;color:rgba(255,255,255,0.4);margin-top:2px}

        .badge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:10px;margin-top:12px}
        .badge-cel{
            width:64px;height:64px;border-radius:16px;display:flex;align-items:center;justify-content:center;
            font-size:28px;position:relative;
            background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);
            animation:badgePop 0.4s ease-out both;animation-delay:calc(var(--i,0) * 40ms);
        }
        .badge-cel.unlocked{
            background:rgba(255,200,0,0.06);border-color:rgba(255,200,0,0.2);
            box-shadow:0 0 20px rgba(255,200,0,0.15),0 4px 16px rgba(0,0,0,0.4),inset 0 1px 0 rgba(255,255,255,0.1);
        }
        .badge-cel.unlocked::before{content:'';position:absolute;top:5px;left:5px;right:5px;height:30%;
            background:linear-gradient(180deg,rgba(255,255,255,0.1) 0%,transparent 100%);
            border-radius:10px 10px 0 0;pointer-events:none}
        .badge-cel.tier-brons.unlocked{box-shadow:0 0 20px rgba(205,127,50,0.2),0 4px 16px rgba(0,0,0,0.4);border-color:rgba(205,127,50,0.3)}
        .badge-cel.tier-zilver.unlocked{box-shadow:0 0 20px rgba(192,192,192,0.2),0 4px 16px rgba(0,0,0,0.4);border-color:rgba(192,192,192,0.3)}
        .badge-cel.tier-goud.unlocked{box-shadow:0 0 20px rgba(255,215,0,0.25),0 4px 16px rgba(0,0,0,0.4);border-color:rgba(255,215,0,0.35)}
        .badge-cel.tier-diamant.unlocked{box-shadow:0 0 24px rgba(185,242,255,0.35),0 4px 16px rgba(0,0,0,0.4);border-color:rgba(185,242,255,0.45);
            animation:badgePop 0.4s ease-out both,diamantSchittering 3s ease-in-out infinite 0.5s}
        @keyframes diamantSchittering{0%,100%{box-shadow:0 0 24px rgba(185,242,255,0.35),0 4px 16px rgba(0,0,0,0.4)}
            50%{box-shadow:0 0 40px rgba(185,242,255,0.6),0 4px 16px rgba(0,0,0,0.4),0 0 60px rgba(185,242,255,0.15)}}
        .badge-cel.locked{opacity:0.2;filter:grayscale(1) blur(0.5px)}
        .badge-tier{position:absolute;bottom:2px;right:5px;font-size:9px;font-weight:700}

        .ach-kaart{
            background:rgba(255,255,255,0.04);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
            border:1px solid rgba(255,255,255,0.08);border-radius:16px;
            padding:14px 16px;display:flex;align-items:center;gap:14px;
        }
        .ach-kaart.unlocked{border-color:rgba(255,200,0,0.2);background:rgba(255,200,0,0.04)}
        .ach-icoon{font-size:32px;min-width:40px;text-align:center}
        .ach-info{flex:1}
        .ach-naam{font-size:14px;font-weight:700;letter-spacing:0.5px}
        .ach-beschrijving{font-size:11px;color:rgba(255,255,255,0.35);margin-top:2px}
        .ach-voortgang{height:4px;background:rgba(255,255,255,0.08);border-radius:4px;margin-top:8px;overflow:hidden}
        .ach-voortgang-vul{height:100%;border-radius:4px;transition:width 0.3s}
        .ach-beloning{font-size:10px;color:rgba(255,200,0,0.6);margin-top:4px;font-weight:600}

        .nieuwe-badges-wrap{margin-top:16px;text-align:center}
        .nieuwe-badges-titel{font-size:11px;color:rgba(255,200,0,0.5);letter-spacing:2px;text-transform:uppercase;margin-bottom:8px;font-weight:700}
        .coins-display{font-size:12px;color:rgba(255,200,0,0.7);font-weight:700;margin-top:4px}

        /* ======= SHOP ======= */
        .shop-wrap{padding-top:80px;width:min(400px,92vw);padding-bottom:40px;max-height:calc(100vh - 40px);overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none;position:relative;-webkit-mask-image:linear-gradient(to bottom,transparent 0%,black 80px,black calc(100% - 40px),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0%,black 80px,black calc(100% - 40px),transparent 100%)}
        .shop-saldo{text-align:center;font-size:22px;font-weight:800;color:rgba(255,200,0,0.9);margin-bottom:24px}
        .shop-sectie-titel{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,0.25);margin:20px 0 10px}
        .shop-kaart{
            background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.06);
            border-radius:16px;padding:14px;display:flex;align-items:center;gap:12px;
            margin-bottom:10px;transition:all 0.2s
        }
        .shop-kaart:hover{background:rgba(255,255,255,0.07)}
        .shop-kaart.uitverkocht{opacity:0.4;pointer-events:none}
        .shop-icoon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
        .shop-info{flex:1;min-width:0}
        .shop-naam{font-size:14px;font-weight:700;color:#fff}
        .shop-desc{font-size:11px;color:rgba(255,255,255,0.4);margin-top:2px}
        .shop-voorraad{font-size:10px;color:rgba(255,200,0,0.5);margin-top:2px}
        .shop-prijs-btn{
            padding:12px 16px;border-radius:10px;border:none;
            background:linear-gradient(135deg,#7b2dff,#00d4ff);
            color:#fff;font-weight:700;font-size:12px;cursor:pointer;
            transition:all 0.2s;white-space:nowrap;flex-shrink:0;
            min-height:44px;display:flex;align-items:center;justify-content:center
        }
        .shop-prijs-btn:hover{transform:scale(1.05)}
        .shop-prijs-btn:active{transform:scale(0.95)}
        .shop-prijs-btn.gratis{background:linear-gradient(135deg,#00c853,#00e676)}
        .shop-prijs-btn.disabled{background:rgba(255,255,255,0.08);color:rgba(255,255,255,0.3);pointer-events:none}
        .shop-prijs-btn.actief-btn{background:rgba(0,200,83,0.2);color:#00c853;pointer-events:none}
        .shop-prijs-btn.equip-btn{background:linear-gradient(135deg,#7b2dff,#00d4ff)}
        .shop-kaart.cos-actief{border-color:rgba(0,200,83,0.3);background:rgba(0,200,83,0.04)}

        .shop-timer{font-size:11px;color:rgba(0,212,255,0.7);font-weight:600;margin-top:3px}
        .shop-streak{display:flex;gap:4px;margin-top:6px}
        .shop-streak-dag{
            width:24px;height:24px;border-radius:6px;display:flex;align-items:center;justify-content:center;
            font-size:9px;font-weight:700;border:1px solid rgba(255,255,255,0.08);color:rgba(255,255,255,0.3)
        }
        .shop-streak-dag.actief{background:rgba(255,200,0,0.15);border-color:rgba(255,200,0,0.3);color:rgba(255,200,0,0.9)}
        .shop-streak-dag.vandaag{background:linear-gradient(135deg,#ff8c00,#ff0080);border-color:transparent;color:#fff}

        .shop-pakket{
            background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.06);
            border-radius:16px;padding:20px 16px;text-align:center;position:relative;
            backdrop-filter:blur(12px);transition:all 0.2s;cursor:pointer;
            overflow:hidden
        }
        .shop-pakket:hover{background:rgba(255,255,255,0.07);transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,0,0,0.2)}
        .shop-pakket:active{transform:scale(0.97)}
        .shop-pakket-label{
            position:absolute;top:-1px;right:12px;padding:4px 10px 5px;border-radius:0 0 8px 8px;
            font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:1px;
            box-shadow:0 2px 8px rgba(0,0,0,0.3)
        }
        .shop-pakket-label.deal{background:linear-gradient(135deg,#ff0080,#ff8c00);color:#fff}
        .shop-pakket-label.best{background:linear-gradient(135deg,#7b2dff,#00d4ff);color:#fff}
        .shop-pakket-label.special{background:linear-gradient(135deg,#ffd700,#ff8c00);color:#1a0a00}
        .shop-pakket-bonus{
            display:inline-block;margin-top:4px;padding:2px 8px;border-radius:10px;
            font-size:10px;font-weight:700;letter-spacing:0.3px
        }
        .diamant-pakket .shop-pakket-bonus{background:rgba(179,136,255,0.15);color:#d4aaff;border:1px solid rgba(179,136,255,0.2)}
        .munt-pakket .shop-pakket-bonus{background:rgba(255,200,0,0.12);color:#ffd700;border:1px solid rgba(255,200,0,0.2)}
        .shop-pakket-munten{font-size:26px;font-weight:800;color:rgba(255,200,0,0.9)}
        .shop-pakket-prijs{
            font-size:14px;font-weight:700;color:rgba(255,255,255,0.7);margin-top:6px;
            padding:4px 12px;border-radius:8px;display:inline-block;
            background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.08)
        }
        .shop-pakket-overlay{
            position:absolute;inset:0;border-radius:16px;
            background:rgba(0,0,0,0.6);display:flex;align-items:center;justify-content:center;
            font-size:11px;font-weight:700;color:rgba(255,255,255,0.5);letter-spacing:1px
        }
        .shop-pakketten{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px}
        .diamant-pakket{border-color:rgba(179,136,255,0.12)}
        .diamant-pakket:hover{border-color:rgba(179,136,255,0.3);box-shadow:0 0 20px rgba(179,136,255,0.08)}
        .diamant-icoon{font-size:32px;margin-bottom:2px;filter:drop-shadow(0 2px 6px rgba(179,136,255,0.4))}
        .diamant-aantal{font-size:28px;font-weight:800;color:#d4aaff;line-height:1}
        .diamant-bonus{display:inline-block;margin-top:6px;padding:3px 10px;border-radius:10px;font-size:11px;font-weight:700;background:rgba(179,136,255,0.15);color:#d4aaff;border:1px solid rgba(179,136,255,0.25);letter-spacing:0.3px}
        .diamant-prijs-btn{display:inline-block;margin-top:8px;padding:6px 16px;border-radius:10px;font-size:14px;font-weight:700;color:#d4aaff;background:linear-gradient(135deg,rgba(179,136,255,0.2),rgba(124,77,255,0.2));border:1px solid rgba(179,136,255,0.3);transition:all 0.15s}
        .diamant-pakket:hover .diamant-prijs-btn{background:linear-gradient(135deg,rgba(179,136,255,0.3),rgba(124,77,255,0.3));border-color:rgba(179,136,255,0.5)}

        /* POWERS GRID */
        .powers-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
        .power-card{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:6px;transition:border-color 0.2s}
        .power-card.power-actief{border-color:rgba(0,212,255,0.4);background:rgba(0,212,255,0.06)}
        .power-card.power-locked{opacity:0.5}
        .power-header{display:flex;justify-content:space-between;align-items:center}
        .power-naam{font-size:13px;font-weight:700}
        .power-level{font-size:10px;font-weight:700;color:#00d4ff;background:rgba(0,212,255,0.15);padding:2px 8px;border-radius:8px}
        .power-desc{font-size:11px;color:rgba(255,255,255,0.5);line-height:1.3}
        .power-meter{display:flex;gap:4px;margin-top:2px}
        .power-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.15)}
        .power-dot.filled{background:#00d4ff;border-color:#00d4ff;box-shadow:0 0 6px rgba(0,212,255,0.5)}
        .power-btn{width:100%;padding:6px;border:none;border-radius:8px;font-size:12px;font-weight:700;cursor:pointer;margin-top:4px}
        .power-btn.buy{background:linear-gradient(135deg,rgba(179,136,255,0.3),rgba(124,77,255,0.3));color:#d4aaff;border:1px solid rgba(179,136,255,0.3)}
        .power-btn.upgrade{background:linear-gradient(135deg,rgba(255,200,0,0.2),rgba(255,140,0,0.2));color:#ffd700;border:1px solid rgba(255,200,0,0.3)}
        .power-btn.locked{background:rgba(255,255,255,0.05);color:rgba(255,255,255,0.3);border:1px solid rgba(255,255,255,0.08)}
        .power-btn.maxed{background:rgba(0,212,255,0.1);color:#00d4ff;border:1px solid rgba(0,212,255,0.2)}
        .power-btn.disabled{background:rgba(255,255,255,0.03);color:rgba(255,255,255,0.2);border:1px solid rgba(255,255,255,0.06);pointer-events:none}
        .power-equip-btn{width:100%;padding:5px;border:1px solid rgba(0,212,255,0.3);border-radius:8px;background:rgba(0,212,255,0.08);color:#00d4ff;font-size:11px;font-weight:700;cursor:pointer;margin-top:3px}
        .power-active-label{text-align:center;font-size:10px;font-weight:700;color:#00d4ff;letter-spacing:1.5px;margin-top:3px}

        /* DIAMOND BOOSTS */
        .diamond-boosts-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
        .boost-card{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:14px;padding:12px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
        .boost-card.boost-actief{border-color:rgba(255,200,0,0.4);background:rgba(255,200,0,0.06)}
        .boost-icoon{font-size:24px}
        .boost-info{display:flex;flex-direction:column;gap:2px}
        .boost-naam{font-size:12px;font-weight:700}
        .boost-desc{font-size:10px;color:rgba(255,255,255,0.5)}
        .boost-duur{font-size:10px;color:rgba(255,255,255,0.3)}
        .boost-btn{width:100%;padding:6px;border:none;border-radius:8px;font-size:12px;font-weight:700;cursor:pointer}
        .boost-btn.buy{background:linear-gradient(135deg,rgba(179,136,255,0.3),rgba(124,77,255,0.3));color:#d4aaff;border:1px solid rgba(179,136,255,0.3)}
        .boost-btn.actief{background:rgba(255,200,0,0.15);color:#ffd700;border:1px solid rgba(255,200,0,0.3)}
        .boost-btn.disabled{background:rgba(255,255,255,0.03);color:rgba(255,255,255,0.2);border:1px solid rgba(255,255,255,0.06);pointer-events:none}

        /* DAILY JACKPOT */
        .shop-streak-dag.jackpot{background:linear-gradient(135deg,rgba(255,200,0,0.2),rgba(255,140,0,0.2));border-color:rgba(255,200,0,0.4);box-shadow:0 0 8px rgba(255,200,0,0.2)}

        .shop-header{margin-bottom:20px}
        .shop-titel-rij{display:flex;align-items:center;justify-content:space-between;margin-bottom:0}
        .shop-titel-tekst{font-size:24px;font-weight:800;background:linear-gradient(135deg,#ff8c00,#ff0080);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
        .shop-saldo-pill{background:rgba(255,200,0,0.12);border:1px solid rgba(255,200,0,0.25);border-radius:20px;padding:6px 16px;font-size:15px;font-weight:700;color:#ffd700;display:flex;align-items:center;gap:6px}
        .shop-saldo-pill::before{content:'';display:inline-block;width:14px;height:14px;background:radial-gradient(circle,#ffd700,#ff8c00);border-radius:50%}
        .diamant-pill{background:rgba(179,136,255,0.12);border-color:rgba(179,136,255,0.3);color:#b388ff}
        .diamant-pill::before{background:radial-gradient(circle,#b388ff,#7c4dff)}
        .diamant-prijs{background:linear-gradient(135deg,rgba(179,136,255,0.2),rgba(124,77,255,0.2))!important;border-color:rgba(179,136,255,0.3)!important;color:#b388ff!important}
        .shop-unlock-hint{font-size:10px;color:rgba(179,136,255,0.7);margin-top:2px;font-style:italic}
        .shop-titel-rij{flex-wrap:wrap;gap:8px}
        .shop-tabs{display:flex;gap:4px;margin-bottom:20px;background:rgba(255,255,255,0.03);border-radius:12px;padding:4px}
        .shop-tab{flex:1;padding:10px 0;border:none;background:none;color:rgba(255,255,255,0.4);font-size:12px;font-weight:600;border-radius:10px;cursor:pointer;transition:all 0.2s;font-family:inherit}
        .shop-tab.actief{background:rgba(255,255,255,0.08);color:#fff;box-shadow:0 2px 8px rgba(0,0,0,0.2)}
        .shop-tab-content{display:none}
        .shop-tab-content.actief{display:block}
        .shop-kaart-highlight{border-color:rgba(255,200,0,0.2);background:linear-gradient(135deg,rgba(255,200,0,0.06),rgba(255,140,0,0.03))}
        .shop-cos-subtabs{display:flex;gap:8px;margin-bottom:16px}
        .shop-cos-tab{padding:6px 16px;border:1px solid rgba(255,255,255,0.08);background:none;color:rgba(255,255,255,0.4);font-size:12px;font-weight:600;border-radius:20px;cursor:pointer;transition:all 0.2s;font-family:inherit}
        .shop-cos-tab.actief{background:rgba(123,45,255,0.15);border-color:rgba(123,45,255,0.3);color:#fff}
        .shop-cos-panel{display:none}
        .shop-cos-panel.actief{display:block}

        .shop-icoon-notify .notify-dot{
            position:absolute;top:-2px;right:-2px;width:8px;height:8px;
            background:#ff0080;border-radius:50%;display:none
        }
        .shop-icoon-notify .notify-dot.on{display:block}

        /* SETTINGS */
        .settings-wrap{padding-top:80px;width:min(360px,90vw);padding-bottom:40px;max-height:calc(100vh - 40px);overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none}
        .settings-card{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.06);border-radius:16px;padding:16px;margin-bottom:12px}
        .settings-card-title{font-size:13px;font-weight:700;color:rgba(255,255,255,0.5);margin-bottom:14px;display:flex;align-items:center;gap:8px}
        .settings-slider-row{display:flex;justify-content:space-between;align-items:center}
        .settings-val{font-size:12px;color:rgba(255,255,255,0.4);font-weight:600;font-variant-numeric:tabular-nums}
        .settings-option-btn{width:100%;display:flex;align-items:center;justify-content:space-between;padding:12px 0;border:none;background:none;color:rgba(255,255,255,0.7);font-size:14px;font-weight:500;cursor:pointer;border-bottom:1px solid rgba(255,255,255,0.04);font-family:inherit;transition:color 0.2s}
        .settings-option-btn:last-child{border-bottom:none}
        .settings-option-btn:hover{color:#fff}
        .settings-option-val{font-size:12px;color:rgba(255,255,255,0.3);font-weight:400}
        .settings-option-btn.settings-danger{color:rgba(255,60,60,0.7)}
        .settings-option-btn.settings-danger:hover{color:#ff3c3c}
        .settings-toggle-row{display:flex;align-items:center;justify-content:space-between;padding:12px 0;font-size:14px;color:rgba(255,255,255,0.7)}
        .settings-switch{position:relative;width:44px;height:24px;flex-shrink:0}
        .settings-switch input{opacity:0;width:0;height:0}
        .settings-switch-slider{position:absolute;cursor:pointer;inset:0;background:rgba(255,255,255,0.1);border-radius:24px;transition:0.3s}
        .settings-switch-slider::before{content:'';position:absolute;height:18px;width:18px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:0.3s}
        .settings-switch input:checked+.settings-switch-slider{background:linear-gradient(135deg,#7b2dff,#00d4ff)}
        .settings-switch input:checked+.settings-switch-slider::before{transform:translateX(20px)}
        .settings-account-info{padding:8px 0;margin-bottom:4px}
        .settings-account-naam{font-size:14px;font-weight:600;color:rgba(255,255,255,0.7)}
        .settings-versie{text-align:center;font-size:11px;color:rgba(255,255,255,0.15);margin-top:24px;letter-spacing:1px}

        /* LOADOUT */
        .loadout-wrap{
            padding:80px 20px 40px;width:100%;max-width:400px;
            overflow-y:auto;max-height:100vh;
            scrollbar-width:none;-ms-overflow-style:none
        }
        .loadout-wrap::-webkit-scrollbar{display:none}
        .loadout-slots{display:flex;gap:12px;justify-content:center;margin:20px 0 28px}
        .loadout-slot{
            width:72px;height:72px;border-radius:16px;
            border:2px dashed rgba(255,255,255,0.2);
            display:flex;align-items:center;justify-content:center;
            font-size:28px;cursor:pointer;transition:all 0.2s;
            background:rgba(255,255,255,0.03);position:relative
        }
        .loadout-slot.gevuld{
            border:2px solid rgba(123,45,255,0.5);
            background:rgba(123,45,255,0.1)
        }
        .loadout-slot .slot-x{
            position:absolute;top:-6px;right:-6px;width:18px;height:18px;
            background:rgba(255,0,80,0.8);border-radius:50%;
            font-size:10px;display:flex;align-items:center;justify-content:center;
            font-weight:700;display:none
        }
        .loadout-slot.gevuld .slot-x{display:flex}
        .loadout-kaarten{display:flex;flex-direction:column;gap:8px;margin-bottom:24px}
        .loadout-pu{
            display:flex;align-items:center;gap:12px;
            padding:12px 14px;border-radius:14px;
            background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.06);
            cursor:pointer;transition:all 0.2s
        }
        .loadout-pu:hover{background:rgba(255,255,255,0.08)}
        .loadout-pu.leeg{opacity:0.3;pointer-events:none}
        .loadout-pu.gekozen{border-color:rgba(123,45,255,0.5);background:rgba(123,45,255,0.08)}
        .loadout-pu-icoon{
            width:40px;height:40px;border-radius:10px;
            display:flex;align-items:center;justify-content:center;font-size:20px
        }
        .loadout-pu-info{flex:1}
        .loadout-pu-naam{font-size:13px;font-weight:700}
        .loadout-pu-desc{font-size:11px;color:rgba(255,255,255,0.4);margin-top:2px}
        .loadout-pu-voorraad{
            font-size:11px;font-weight:700;color:rgba(255,255,255,0.3);
            min-width:24px;text-align:center
        }
        .loadout-start{
            width:100%;padding:16px;border:none;border-radius:14px;
            font-family:inherit;font-size:16px;font-weight:700;
            color:#fff;cursor:pointer;letter-spacing:1px;
            background:linear-gradient(135deg,#7b2dff,#00d4ff);
            transition:transform 0.15s
        }
        .loadout-start:active{transform:scale(0.97)}
        .actieve-pu-wrap{
            position:absolute;top:20px;right:60px;display:flex;gap:6px;z-index:16;
            pointer-events:none;
        }
        .actieve-pu{
            width:32px;height:32px;border-radius:8px;
            display:flex;align-items:center;justify-content:center;
            font-size:16px;backdrop-filter:blur(10px);
            pointer-events:none;
        }
        .btn-deel{
            display:flex;align-items:center;justify-content:center;gap:8px;
            width:100%;padding:12px;margin-bottom:12px;border:none;border-radius:12px;
            font-family:inherit;font-size:13px;font-weight:700;color:#fff;
            background:linear-gradient(135deg,#ff0080,#ff8c00);cursor:pointer;
            transition:all 0.2s;letter-spacing:0.5px
        }
        .btn-deel:active{transform:scale(0.96)}
        .btn-deel.gedeeld{background:rgba(0,200,83,0.3);pointer-events:none}

        .dagelijks-kaart{
            margin-top:16px;padding:10px 16px;border-radius:12px;
            background:rgba(255,255,255,0.03);
            border:1px solid rgba(255,255,255,0.06);cursor:pointer;
            transition:transform 0.15s;text-align:center;
            display:flex;align-items:center;gap:10px;justify-content:center
        }
        .dagelijks-kaart:hover{transform:scale(1.02)}
        .dagelijks-titel{font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,0,128,0.5)}
        .dagelijks-score{font-size:11px;color:rgba(255,255,255,0.3)}
        .dagelijks-label{font-size:13px;font-weight:700;color:rgba(255,255,255,0.5)}

        .loadout-shop-link{
            display:block;text-align:center;margin-top:14px;
            font-size:12px;color:rgba(255,255,255,0.35);
            text-decoration:underline;cursor:pointer
        }

        /* Leaderboard modal stijlen */
        .lb-rij{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,0.06);font-size:13px}
        .lb-positie{width:24px;font-weight:700;color:rgba(255,255,255,0.4);text-align:right;flex-shrink:0}
        .lb-positie.goud{color:#ffd700}
        .lb-positie.zilver{color:#c0c0c0}
        .lb-positie.brons{color:#cd7f32}
        .lb-naam{flex:1;font-weight:600;word-break:break-all}
        .lb-score{font-weight:700;color:#00d4ff;flex-shrink:0}
        .lb-datum{font-size:10px;color:rgba(255,255,255,0.3);flex-shrink:0}
        .lb-jij{background:rgba(123,45,255,0.12);border-radius:8px;padding:0 6px}

        /* ============================================================
           MICRO-ANIMATIONS & UI POLISH
           All animations use transform/opacity only — no layout triggers.
           ============================================================ */

        /* 1. SCREEN FADE + SLIDE ENTRANCE
           .scherm already transitions opacity. We add a Y-axis shift so
           screens feel like they rise into view rather than just appearing. */
        .scherm{
            transform:translateY(12px);
            transition:opacity 0.45s cubic-bezier(0.16,1,0.3,1),
                        transform 0.45s cubic-bezier(0.16,1,0.3,1);
        }
        .scherm.actief{
            transform:translateY(0);
        }
        /* 2. SHOP CARD ENTRANCE — scale-up pop when tab content becomes visible.
           Cards stagger via nth-child so they cascade rather than all appear at once. */
        @keyframes shopCardIn{
            0%  {opacity:0;transform:scale(0.92) translateY(8px)}
            60% {opacity:1;transform:scale(1.02) translateY(-1px)}
            100%{opacity:1;transform:scale(1) translateY(0)}
        }
        .shop-tab-content.actief .shop-kaart,
        .shop-tab-content.actief .shop-pakket,
        .shop-tab-content.actief .thema-kaart{
            animation:shopCardIn 0.35s cubic-bezier(0.16,1,0.3,1) both;
        }
        .shop-tab-content.actief .shop-kaart:nth-child(1),
        .shop-tab-content.actief .thema-kaart:nth-child(1){animation-delay:0ms}
        .shop-tab-content.actief .shop-kaart:nth-child(2),
        .shop-tab-content.actief .thema-kaart:nth-child(2){animation-delay:40ms}
        .shop-tab-content.actief .shop-kaart:nth-child(3),
        .shop-tab-content.actief .thema-kaart:nth-child(3){animation-delay:80ms}
        .shop-tab-content.actief .shop-kaart:nth-child(4),
        .shop-tab-content.actief .thema-kaart:nth-child(4){animation-delay:120ms}
        .shop-tab-content.actief .shop-kaart:nth-child(5),
        .shop-tab-content.actief .thema-kaart:nth-child(5){animation-delay:160ms}
        .shop-tab-content.actief .shop-kaart:nth-child(n+6),
        .shop-tab-content.actief .thema-kaart:nth-child(n+6){animation-delay:200ms}
        /* Cosmetics sub-panels cascade the same way */
        .shop-cos-panel.actief .shop-kaart:nth-child(1){animation-delay:0ms}
        .shop-cos-panel.actief .shop-kaart:nth-child(2){animation-delay:40ms}
        .shop-cos-panel.actief .shop-kaart:nth-child(3){animation-delay:80ms}
        .shop-cos-panel.actief .shop-kaart:nth-child(4){animation-delay:120ms}
        .shop-cos-panel.actief .shop-kaart:nth-child(n+5){animation-delay:160ms}
        .shop-cos-panel.actief .shop-kaart{
            animation:shopCardIn 0.35s cubic-bezier(0.16,1,0.3,1) both;
        }

        /* 3. DAILY REWARD PULSE
           Soft scale + outer glow — never touches layout properties. */
        @keyframes gratisPulse{
            0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(0,200,83,0.5)}
            50%    {transform:scale(1.07);box-shadow:0 0 0 6px rgba(0,200,83,0)}
        }
        .shop-prijs-btn.gratis{
            animation:gratisPulse 1.8s ease-in-out infinite;
        }
        /* Freeze pulse on press so it doesn't fight the active scale */
        .shop-prijs-btn.gratis:active{
            animation:none;
            transform:scale(0.95);
        }

        /* 4. COIN BALANCE SHIMMER
           A highlight sweep across the pill using a pseudo-element.
           The pill needs overflow:hidden so the sweep stays clipped. */
        .shop-saldo-pill{
            position:relative;
            overflow:hidden;
        }
        .shop-saldo-pill::after{
            content:'';
            position:absolute;
            top:0;left:-75%;
            width:50%;height:100%;
            background:linear-gradient(
                105deg,
                transparent 0%,
                rgba(255,255,255,0.22) 50%,
                transparent 100%
            );
            animation:pillShimmer 2.8s ease-in-out infinite;
            pointer-events:none;
        }
        @keyframes pillShimmer{
            0%  {left:-75%;opacity:0}
            15% {opacity:1}
            50% {left:125%;opacity:1}
            51%,100%{opacity:0;left:125%}
        }

        /* 5. SHOP TAB CONTENT SLIDE
           When a tab becomes active its content slides in from the right. */
        @keyframes slideTabIn{
            0%  {opacity:0;transform:translateX(16px)}
            100%{opacity:1;transform:translateX(0)}
        }
        .shop-tab-content.actief{
            animation:slideTabIn 0.28s cubic-bezier(0.16,1,0.3,1) both;
        }

        /* 6. BUTTON HOVER GLOW
           A blurred ::after pseudo fades in under every .btn on hover.
           overflow:hidden on .btn keeps it contained — no layout change. */
        .btn::after{
            content:'';
            position:absolute;
            inset:-4px;
            border-radius:inherit;
            opacity:0;
            background:inherit;
            filter:blur(14px);
            z-index:-1;
            transition:opacity 0.25s ease;
            pointer-events:none;
        }
        .btn:hover::after{
            opacity:0.45;
        }
        /* Freeze glow while pressed */
        .btn:active::after{
            opacity:0.2;
        }

        /* 7. SETTINGS TOGGLE SPRING
           Replace the linear 0.3s transition on the knob with a spring curve
           and add a subtle squish on press. */
        .settings-switch-slider{
            transition:background 0.35s cubic-bezier(0.34,1.56,0.64,1);
        }
        .settings-switch-slider::before{
            transition:transform 0.38s cubic-bezier(0.34,1.56,0.64,1),
                        width 0.18s cubic-bezier(0.34,1.56,0.64,1);
        }
        /* Squish knob while the user holds the toggle */
        .settings-switch:active .settings-switch-slider::before{
            width:22px;
        }
        /* When checked + held, squish toward the left so it looks like it's
           compressing before springing back */
        .settings-switch input:checked ~ .settings-switch-slider:active::before,
        .settings-switch:active .settings-switch-slider::before{
            width:22px;
        }

        /* 8. ACTIVE SHOP TAB — animated gradient border highlight
           The active tab background shifts its gradient position continuously
           to suggest a living, glowing selection indicator. */
        @keyframes tabGradShift{
            0%  {background-position:0% 50%}
            50% {background-position:100% 50%}
            100%{background-position:0% 50%}
        }
        .shop-tab.actief{
            background:linear-gradient(
                135deg,
                rgba(123,45,255,0.22),
                rgba(0,212,255,0.15),
                rgba(255,0,128,0.12),
                rgba(123,45,255,0.22)
            );
            background-size:300% 300%;
            animation:tabGradShift 4s ease infinite;
            color:#fff;
            box-shadow:0 2px 12px rgba(0,0,0,0.25),
                       inset 0 0 0 1px rgba(255,255,255,0.08);
        }

        /* ── Bubble Unlock Overlay ── */
        .unlock-overlay{
            position:fixed;inset:0;z-index:1000;
            display:flex;flex-direction:column;align-items:center;justify-content:center;
            background:rgba(0,0,0,0.92);cursor:pointer;
            opacity:0;transform:scale(0.95);
            transition:opacity 0.4s ease, transform 0.4s ease;
        }
        .unlock-overlay.on{opacity:1;transform:scale(1)}
        .unlock-overlay.unlock-out{opacity:0;transform:scale(1.05)}
        .unlock-glow{
            position:absolute;width:320px;height:320px;border-radius:50%;
            filter:blur(60px);opacity:0.7;
            animation:unlockPulse 2s ease-in-out infinite;
        }
        .unlock-orb{
            width:100px;height:100px;border-radius:50%;
            margin-bottom:20px;position:relative;
            animation:unlockFloat 2.5s ease-in-out infinite, unlockSpin 8s linear infinite;
        }
        .unlock-label{
            font-size:14px;font-weight:800;text-transform:uppercase;
            letter-spacing:3px;margin-bottom:10px;
        }
        .unlock-naam{
            font-size:28px;font-weight:800;color:#fff;margin-bottom:8px;
        }
        .unlock-cat{
            font-size:11px;font-weight:600;padding:3px 12px;
            border-radius:20px;margin-bottom:14px;text-transform:uppercase;
            letter-spacing:1px;
        }
        .unlock-desc{
            font-size:14px;color:rgba(255,255,255,0.6);
            max-width:280px;text-align:center;line-height:1.5;margin-bottom:28px;
        }
        .unlock-hint{
            font-size:12px;color:rgba(255,255,255,0.25);
            animation:unlockBlink 2s ease infinite;
        }
        @keyframes unlockPulse{0%,100%{transform:scale(1);opacity:0.5}50%{transform:scale(1.15);opacity:0.8}}
        @keyframes unlockFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
        @keyframes unlockSpin{from{filter:hue-rotate(0deg)}to{filter:hue-rotate(360deg)}}
        @keyframes unlockBlink{0%,100%{opacity:0.25}50%{opacity:0.6}}

        /* ── Bubble Detail Card Overlay ── */
        .bdetail-overlay{
            position:fixed;inset:0;z-index:9999;
            display:flex;align-items:center;justify-content:center;
            background:rgba(0,0,0,0.88);
            opacity:0;
            transition:opacity 0.25s ease;
            padding:20px;
        }
        .bdetail-overlay.on{opacity:1}
        .bdetail-overlay.out{opacity:0}

        /* Wrapper zodat glow BUITEN de card kan overlopen */
        .bdetail-card-wrap{
            position:relative;
            display:flex;align-items:center;justify-content:center;
        }

        /* Glow achter de card — atmosferisch licht */
        .bdetail-glow{
            position:absolute;
            top:50%;left:50%;
            transform:translate(-50%,-75%);
            width:320px;height:320px;border-radius:50%;
            filter:blur(70px);opacity:0.55;
            pointer-events:none;z-index:0;
            animation:bdetailGlowPulse 3s ease-in-out infinite alternate;
        }
        @keyframes bdetailGlowPulse{
            0%{opacity:0.4;transform:translate(-50%,-75%) scale(0.9)}
            100%{opacity:0.65;transform:translate(-50%,-75%) scale(1.1)}
        }

        .bdetail-card{
            width:min(340px,90vw);max-height:85vh;overflow-y:auto;
            background:rgba(20,15,40,0.95);
            border-radius:24px;
            border:1px solid rgba(255,255,255,0.08);
            box-shadow:0 20px 60px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05);
            padding:32px 24px 28px;
            display:flex;flex-direction:column;align-items:center;
            position:relative;z-index:1;
            transform-origin:center bottom;
        }
        .bdetail-card::-webkit-scrollbar{display:none}

        /* Card reveal animatie */
        .bdetail-overlay.on .bdetail-card{
            animation:bdetailCardReveal 0.4s cubic-bezier(0.34,1.56,0.64,1) forwards;
        }
        @keyframes bdetailCardReveal{
            0%{opacity:0;transform:scale(0.85) translateY(24px)}
            100%{opacity:1;transform:scale(1) translateY(0)}
        }

        /* Orb — groot en prominent, niet laten krimpen door flex */
        .bdetail-orb-wrap{
            width:120px;height:120px;margin:4px auto 14px;
            position:relative;z-index:1;flex-shrink:0;
        }
        @media(min-height:700px){
            .bdetail-orb-wrap{width:160px;height:160px;margin:8px auto 20px}
        }
        .bdetail-naam{
            font-size:24px;font-weight:800;color:#fff;margin-bottom:4px;
            text-align:center;position:relative;z-index:1;
            letter-spacing:-0.5px;flex-shrink:0;
        }
        @media(min-height:700px){
            .bdetail-naam{font-size:28px;margin-bottom:6px}
        }
        .bdetail-cat{
            font-size:10px;font-weight:700;padding:4px 16px;
            border-radius:20px;margin-bottom:14px;text-transform:uppercase;
            letter-spacing:2px;display:inline-block;flex-shrink:0;
            backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
        }
        @media(min-height:700px){
            .bdetail-cat{margin-bottom:20px}
        }

        /* Divider tussen lore en effect */
        .bdetail-divider{
            width:100%;height:1px;margin:4px 0 16px;
            background:linear-gradient(to right,
                transparent 0%, rgba(255,255,255,0.08) 20%,
                rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.08) 80%,
                transparent 100%);
        }

        .bdetail-section{width:100%;margin-bottom:14px}
        .bdetail-section-title{
            font-size:10px;font-weight:700;text-transform:uppercase;
            letter-spacing:2px;color:rgba(255,255,255,0.35);margin-bottom:6px;
        }
        .bdetail-lore{
            font-size:13px;line-height:1.7;color:rgba(255,255,255,0.65);
            font-style:italic;
        }
        .bdetail-effect{
            font-size:13px;line-height:1.5;color:rgba(255,255,255,0.8);
        }

        /* ── ATTRIBUTES section ── */
        .bdetail-attr-header{
            display:flex;align-items:center;gap:10px;margin-bottom:14px;
        }
        .bdetail-attr-header-line{
            flex:1;height:1px;
            background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.22) 40%,rgba(255,255,255,0.10) 100%);
        }
        .bdetail-attr-header-line:last-child{
            background:linear-gradient(90deg,rgba(255,255,255,0.10) 0%,rgba(255,255,255,0.22) 60%,transparent 100%);
        }
        .bdetail-attr-header-text{
            font-size:8px;font-weight:800;letter-spacing:3px;
            text-transform:uppercase;color:rgba(255,255,255,0.42);white-space:nowrap;
        }

        /* Bar rows (XP, Spawn Rate) */
        .bdetail-attr-bars{
            display:flex;flex-direction:column;gap:11px;margin-bottom:12px;width:100%;
        }
        .bdetail-bar-row{display:flex;flex-direction:column;gap:5px;width:100%}
        .bdetail-bar-meta{display:flex;align-items:center;justify-content:space-between}
        .bdetail-bar-label{
            display:flex;align-items:center;gap:5px;
            font-size:10px;font-weight:700;letter-spacing:1px;
            text-transform:uppercase;color:rgba(255,255,255,0.48);
        }
        .bdetail-bar-label-icon{font-size:12px;line-height:1;filter:drop-shadow(0 0 3px currentColor)}
        .bdetail-bar-value{font-size:11px;font-weight:800;letter-spacing:0.5px}
        .bdetail-bar-track{
            width:100%;height:6px;border-radius:99px;
            background:rgba(255,255,255,0.06);
            border:1px solid rgba(255,255,255,0.05);
            overflow:hidden;position:relative;
        }
        .bdetail-bar-fill{
            height:100%;border-radius:99px;width:0%;
            animation:barFillIn 0.6s cubic-bezier(0.22,1,0.36,1) forwards;
            position:relative;will-change:width;
        }
        .bdetail-bar-fill::after{
            content:'';position:absolute;inset:0;border-radius:99px;
            background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.32) 50%,transparent 100%);
            animation:barShimmerSlide 1.6s ease-in-out var(--bar-shimmer-delay,0.65s) infinite;
        }
        @keyframes barFillIn{from{width:0%}to{width:var(--bar-target,0%)}}
        @keyframes barShimmerSlide{0%{transform:translateX(-100%)}60%{transform:translateX(200%)}100%{transform:translateX(200%)}}
        @keyframes barGlowPulse{0%{box-shadow:var(--bar-glow-dim)}100%{box-shadow:var(--bar-glow-bright)}}

        /* Stat tiles (Size Range, Times Popped) */
        .bdetail-attr-tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
        .bdetail-attr-tile{
            background:rgba(255,255,255,0.035);
            border:1px solid rgba(255,255,255,0.09);border-radius:12px;
            padding:12px 8px 10px;display:flex;flex-direction:column;
            align-items:center;gap:3px;position:relative;overflow:hidden;
        }
        .bdetail-tile-icon{
            font-size:20px;line-height:1;margin-bottom:2px;
            filter:drop-shadow(0 0 4px rgba(255,255,255,0.3));
        }
        .bdetail-tile-val{
            font-size:20px;font-weight:800;color:#fff;
            line-height:1.1;letter-spacing:-0.5px;
        }
        .bdetail-tile-label{
            font-size:9px;font-weight:700;letter-spacing:1px;
            text-transform:uppercase;color:rgba(255,255,255,0.30);
            text-align:center;margin-top:2px;
        }
        .bdetail-unlock{
            font-size:12px;color:rgba(255,255,255,0.35);text-align:center;margin-top:8px;
        }

        /* Close button — 36px + touch target */
        .bdetail-close{
            position:absolute;top:10px;right:10px;
            width:36px;height:36px;border-radius:50%;
            background:rgba(255,255,255,0.07);
            border:1px solid rgba(255,255,255,0.12);
            color:rgba(255,255,255,0.6);font-size:15px;
            display:flex;align-items:center;justify-content:center;
            cursor:pointer;transition:background 0.2s, transform 0.15s;
            z-index:2;
        }
        .bdetail-close:hover,.bdetail-close:active{
            background:rgba(255,255,255,0.14);transform:scale(1.1);
        }

        /* ── Rarity-driven card styles ── */

        /* LEGENDARY — gold shimmer border + pulsing glow */
        .bdetail-card[data-category="legendary"]{
            border-color:rgba(255,255,180,0.2);
            animation:bdetailCardReveal 0.5s cubic-bezier(0.34,1.56,0.64,1) forwards,
                      legendaryCardPulse 2.5s ease-in-out 0.5s infinite alternate;
        }
        @keyframes legendaryCardPulse{
            0%{box-shadow:0 0 0 1px rgba(255,255,180,0.15),0 20px 60px rgba(0,0,0,0.6),0 0 30px rgba(255,255,180,0.06),inset 0 1px 0 rgba(255,255,255,0.12)}
            100%{box-shadow:0 0 0 1px rgba(255,255,180,0.35),0 20px 60px rgba(0,0,0,0.6),0 0 60px rgba(255,255,180,0.18),inset 0 1px 0 rgba(255,255,255,0.18)}
        }
        .bdetail-card[data-category="legendary"] .bdetail-naam{
            background:linear-gradient(90deg,#fff 0%,#ffe88a 40%,#fff 60%,#ffe88a 100%);
            background-size:200% 100%;
            -webkit-background-clip:text;background-clip:text;
            -webkit-text-fill-color:transparent;
            animation:legendaryNaamShimmer 3s linear infinite;
        }
        @keyframes legendaryNaamShimmer{
            0%{background-position:200% 0}100%{background-position:-200% 0}
        }

        /* DANGEROUS — red pulse */
        .bdetail-card[data-category="dangerous"]{
            animation:bdetailCardReveal 0.4s cubic-bezier(0.34,1.56,0.64,1) forwards,
                      dangerCardPulse 1.8s ease-in-out 0.4s infinite alternate;
        }
        @keyframes dangerCardPulse{
            0%{box-shadow:0 20px 60px rgba(0,0,0,0.5),0 0 0 1px rgba(255,34,0,0.08),inset 0 1px 0 rgba(255,255,255,0.05)}
            100%{box-shadow:0 20px 60px rgba(0,0,0,0.5),0 0 20px rgba(255,34,0,0.15),0 0 0 1px rgba(255,34,0,0.28),inset 0 1px 0 rgba(255,255,255,0.05)}
        }

        /* SPECIAL — purple glow */
        .bdetail-card[data-category="special"]{
            animation:bdetailCardReveal 0.4s cubic-bezier(0.34,1.56,0.64,1) forwards,
                      specialCardPulse 3s ease-in-out 0.4s infinite alternate;
        }
        @keyframes specialCardPulse{
            0%{box-shadow:0 20px 60px rgba(0,0,0,0.5),0 0 20px rgba(155,89,182,0.06),inset 0 1px 0 rgba(255,255,255,0.05)}
            100%{box-shadow:0 20px 60px rgba(0,0,0,0.5),0 0 40px rgba(155,89,182,0.2),inset 0 1px 0 rgba(255,255,255,0.05)}
        }

        /* OFFENSIVE — gold shimmer */
        .bdetail-card[data-category="offensive"]{
            animation:bdetailCardReveal 0.4s cubic-bezier(0.34,1.56,0.64,1) forwards,
                      offensiveCardPulse 3s ease-in-out 0.4s infinite alternate;
        }
        @keyframes offensiveCardPulse{
            0%{box-shadow:0 20px 60px rgba(0,0,0,0.5),0 0 15px rgba(255,215,0,0.05),inset 0 1px 0 rgba(255,255,255,0.05)}
            100%{box-shadow:0 20px 60px rgba(0,0,0,0.5),0 0 35px rgba(255,215,0,0.15),inset 0 1px 0 rgba(255,255,255,0.05)}
        }

        /* DEFENSIVE — cyan pulse */
        .bdetail-card[data-category="defensive"]{
            animation:bdetailCardReveal 0.4s cubic-bezier(0.34,1.56,0.64,1) forwards,
                      defensiveCardPulse 3s ease-in-out 0.4s infinite alternate;
        }
        @keyframes defensiveCardPulse{
            0%{box-shadow:0 20px 60px rgba(0,0,0,0.5),0 0 15px rgba(0,229,255,0.05),inset 0 1px 0 rgba(255,255,255,0.05)}
            100%{box-shadow:0 20px 60px rgba(0,0,0,0.5),0 0 35px rgba(0,229,255,0.15),inset 0 1px 0 rgba(255,255,255,0.05)}
        }

        /* TACTICAL — green pulse */
        .bdetail-card[data-category="tactical"]{
            animation:bdetailCardReveal 0.4s cubic-bezier(0.34,1.56,0.64,1) forwards,
                      tacticalCardPulse 3s ease-in-out 0.4s infinite alternate;
        }
        @keyframes tacticalCardPulse{
            0%{box-shadow:0 20px 60px rgba(0,0,0,0.5),0 0 15px rgba(0,255,136,0.05),inset 0 1px 0 rgba(255,255,255,0.05)}
            100%{box-shadow:0 20px 60px rgba(0,0,0,0.5),0 0 35px rgba(0,255,136,0.15),inset 0 1px 0 rgba(255,255,255,0.05)}
        }