@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;700;800&display=swap');
        
        body.theme-pink { --bg-color: #12151d; --card-color: #1a1f2b; --accent-color: #f9196f; --rating-high: #fcd34d; --rating-mid: #db2777; --rating-low: #991b1b; --logo-hue: 0deg; }
        body.theme-xbox { --bg-color: #0c1410; --card-color: #14221a; --accent-color: #107c10; --rating-high: #fde047; --rating-mid: #16a34a; --rating-low: #7f1d1d; --logo-hue: 120deg; }
        body.theme-cyberpunk { --bg-color: #141410; --card-color: #1f1f17; --accent-color: #fce803; --rating-high: #06b6d4; --rating-mid: #eab308; --rating-low: #881337; --logo-hue: 60deg; }
        body.theme-purple { --bg-color: #0f0d16; --card-color: #191426; --accent-color: #8b5cf6; --rating-high: #fde047; --rating-mid: #9333ea; --rating-low: #4c1d95; --logo-hue: 270deg; }
        body.theme-ocean { --bg-color: #0b131a; --card-color: #111f2b; --accent-color: #00d2ff; --rating-high: #fcd34d; --rating-mid: #0284c7; --rating-low: #7f1d1d; --logo-hue: 200deg; }
        body.theme-synthwave { --bg-color: #170d21; --card-color: #241536; --accent-color: #ff007f; --rating-high: #00f0ff; --rating-mid: #ff007f; --rating-low: #4c1d95; --logo-hue: 320deg; }
        body.theme-matcha { --bg-color: #0f1712; --card-color: #16221a; --accent-color: #a3e635; --rating-high: #fef08a; --rating-mid: #84cc16; --rating-low: #7f1d1d; --logo-hue: 90deg; }
        body.theme-crimson { --bg-color: #170a0a; --card-color: #241010; --accent-color: #f43f5e; --rating-high: #fde047; --rating-mid: #fb923c; --rating-low: #9f1239; --logo-hue: 340deg; }

        body.theme-pink #bg-pattern { background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 50.5L12 32.5C7.5 28 7.5 20.5 12 16C16.5 11.5 24 11.5 28.5 16L30 17.5L31.5 16C36 11.5 43.5 11.5 48 16C52.5 20.5 52.5 28 48 32.5L30 50.5Z' fill='%23f9196f' fill-opacity='0.05'/%3E%3C/svg%3E"); }
        body.theme-xbox #bg-pattern { background-image: repeating-linear-gradient(45deg, rgba(16,124,16,0.05) 0px, rgba(16,124,16,0.05) 2px, transparent 2px, transparent 8px); }
        body.theme-cyberpunk #bg-pattern { background-image: radial-gradient(rgba(252,232,3,0.05) 1px, transparent 1px); background-size: 20px 20px; }
        body.theme-purple #bg-pattern { background-image: radial-gradient(rgba(255,255,255,0.04) 1.5px, transparent 1.5px); background-size: 45px 45px; background-position: 0 0, 22.5px 22.5px; }
        body.theme-ocean #bg-pattern { background-image: repeating-radial-gradient(circle at 0 0, transparent 0, rgba(0, 210, 255, 0.05) 10px, transparent 20px); }
        body.theme-synthwave #bg-pattern { background-image: linear-gradient(0deg, transparent 24%, rgba(255, 0, 127, 0.05) 25%, rgba(255, 0, 127, 0.05) 26%, transparent 27%, transparent 74%, rgba(0, 240, 255, 0.05) 75%, rgba(0, 240, 255, 0.05) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(255, 0, 127, 0.05) 25%, rgba(255, 0, 127, 0.05) 26%, transparent 27%, transparent 74%, rgba(0, 240, 255, 0.05) 75%, rgba(0, 240, 255, 0.05) 76%, transparent 77%, transparent); background-size: 50px 50px; }
        body.theme-matcha #bg-pattern { background-image: radial-gradient(rgba(163, 230, 53, 0.05) 2px, transparent 2px); background-size: 30px 30px; }
        body.theme-crimson #bg-pattern { background-image: linear-gradient(45deg, rgba(244, 63, 94, 0.03) 25%, transparent 25%, transparent 50%, rgba(244, 63, 94, 0.03) 50%, rgba(244, 63, 94, 0.03) 75%, transparent 75%, transparent); background-size: 40px 40px; }

::selection { background-color: var(--accent-color, #f9196f); color: #ffffff; }
        ::-moz-selection { background-color: var(--accent-color, #f9196f); color: #ffffff; }
        
        #bg-pattern { transform: translateZ(0); will-change: transform; }
        html { scroll-behavior: smooth; }
        body { background-color: var(--bg-color, #12151d); color: #e2e8f0; transition: background-color 0.3s ease; text-rendering: optimizeLegibility; }
        
        .game-card { transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s ease; aspect-ratio: 2/3; will-change: transform; transform: translateZ(0); container-type: inline-size; }
        .card-badge-scale { font-size: clamp(9px, 5cqw, 14px); padding: clamp(2px, 1cqw, 4px) clamp(4px, 2.5cqw, 8px); }
        .card-title-scale { font-size: clamp(11px, 8cqw, 18px); line-height: 1.15; }
        .card-meta-scale { font-size: clamp(8px, 5cqw, 12px); }

        .game-card:hover, .game-card.keyboard-focus { transform: translateY(-6px) scale(1.02) translateZ(0); box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.6); border-color: var(--accent-color, #f9196f); border-width: 4px; z-index: 30; }

        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: var(--bg-color); }
        ::-webkit-scrollbar-thumb { background: #374151; border-radius: 4px; }
        ::-webkit-scrollbar-thumb:hover { background: #4b5563; }
        
        .modal-enter { animation: fadeIn 0.2s ease-out forwards; }
        @keyframes fadeIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
        
        @keyframes floatZ {
            0% { transform: translate(0, 0) scale(0.5); opacity: 0; }
            20% { opacity: 1; }
            80% { opacity: 0; }
            100% { transform: translate(15px, -25px) scale(1.5); opacity: 0; }
        }
        
        .zzz { position: absolute; opacity: 0; font-family: 'Comic Sans MS', sans-serif; font-weight: bold; color: #cbd5e1; pointer-events: none; z-index: 20; }
        .z1 { top: -5px; right: 15px; font-size: 14px; animation: floatZ 3s infinite linear; animation-delay: 0s; }
        .z2 { top: -15px; right: 5px; font-size: 11px; animation: floatZ 3s infinite linear; animation-delay: 1s; }
        .z3 { top: -25px; right: -5px; font-size: 8px; animation: floatZ 3s infinite linear; animation-delay: 2s; }

        @keyframes pixelBreathe {
            0%, 100% { transform: scaleY(1) translateY(0); }
            50% { transform: scaleY(1.03) translateY(-1px); }
        }
        @keyframes wakeUpBounce {
            0% { transform: scale(0.9) translateY(2px); }
            50% { transform: scale(1.05) translateY(-2px); }
            100% { transform: scale(1) translateY(0); }
        }

        .pixel-awake-cat { opacity: 0; transition: opacity 0.2s ease; position: absolute; inset: 0; transform-origin: center bottom; }
        .pixel-sleep-cat { opacity: 1; transition: opacity 0.2s ease; position: absolute; inset: 0; transform-origin: center bottom; animation: pixelBreathe 3s infinite ease-in-out; }

        .cat-container:hover .pixel-awake-cat { opacity: 1; animation: wakeUpBounce 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }
        .cat-container:hover .pixel-sleep-cat { opacity: 0; }
        .cat-container:hover .zzz { animation: none; opacity: 0; }

        @keyframes confettiFall {
            0% { transform: translateY(-20px) rotate(0deg); opacity: 1; }
            100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
        }
        .confetti-piece {
            position: fixed;
            top: -20px;
            z-index: 99999;
            pointer-events: none;
            animation: confettiFall linear forwards;
        }

        .badge-unlocked { background-color: rgba(255, 255, 255, 0.05); opacity: 1; transform: scale(1); transition: transform 0.2s; }
        .badge-unlocked:hover { transform: scale(1.05); }
        .badge-unlocked .icon-wrap { background-color: rgba(255, 255, 255, 0.1); }
        .badge-locked { border-color: #374151; background-color: #111827; opacity: 0.5; filter: grayscale(80%); }
        .badge-locked .icon-wrap { border-color: #4b5563; background-color: #1f2937; }
        .badge-locked i { color: #6b7280 !important; filter: none !important; }

        .star-interactive { cursor: pointer; transition: transform 0.1s ease, color 0.15s ease; }
        .star-interactive:hover { transform: scale(1.3); }
        .star-interactive:active { transform: scale(0.9); }
    /* EASTER EGG SCREEN SHAKE */
        @keyframes shake {
            0% { transform: translate(1px, 1px) rotate(0deg); }
            10% { transform: translate(-1px, -2px) rotate(-1deg); }
            20% { transform: translate(-3px, 0px) rotate(1deg); }
            30% { transform: translate(3px, 2px) rotate(0deg); }
            40% { transform: translate(1px, -1px) rotate(1deg); }
            50% { transform: translate(-1px, 2px) rotate(-1deg); }
            60% { transform: translate(-3px, 1px) rotate(0deg); }
            70% { transform: translate(3px, 1px) rotate(-1deg); }
            80% { transform: translate(-1px, -1px) rotate(1deg); }
            90% { transform: translate(1px, 2px) rotate(0deg); }
            100% { transform: translate(1px, -2px) rotate(-1deg); }
        }