:root {
            --color-cream: #FFF8E7;
            --color-warm-white: #FFFDF7;
            --color-golden: #F5A623;
            --color-golden-dark: #D4881C;
            --color-golden-bright: #FFB938;
            --color-earth-brown: #8B6914;
            --color-forest-green: #4A7C59;
            --color-forest-dark: #3a6349;
            --color-sky-blue: #7EC8E3;
            --color-sky-light: #B8E2F8;
            --color-sunset-orange: #E8835B;
            --color-soft-pink: #F5D0C5;
            --color-coral: #FF7B6B;
            --color-lavender: #B8A9E8;
            --color-mint: #A8E6CF;
            --color-text: #4A3728;
            --color-text-light: #6B5344;
            --color-text-muted: #8B7766;
            --color-steam-blue: #1b2838;
            --font-display: 'Fredoka', sans-serif;
            --font-body: 'Quicksand', sans-serif;
            --font-handwritten: 'Caveat', cursive;
            --shadow-soft: 0 4px 20px rgba(74, 55, 40, 0.08);
            --shadow-medium: 0 8px 40px rgba(74, 55, 40, 0.12);
            --shadow-heavy: 0 16px 60px rgba(74, 55, 40, 0.16);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: var(--font-body);
            background: var(--color-cream);
            color: var(--color-text);
            overflow-x: hidden;
            line-height: 1.6;
        }

        /* Performance: Skip rendering off-screen content */
        .features,
        .screenshot-showcase,
        .reviews-section,
        .community,
        footer {
            content-visibility: auto;
            contain-intrinsic-size: auto 800px;
        }

        /* Decorative Background */
        .bg-pattern {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 0;
            opacity: 0.03;
            background-image:
                radial-gradient(circle at 20% 30%, var(--color-forest-green) 2px, transparent 2px),
                radial-gradient(circle at 80% 70%, var(--color-golden) 2px, transparent 2px),
                radial-gradient(circle at 40% 80%, var(--color-sunset-orange) 1.5px, transparent 1.5px);
            background-size: 120px 120px, 150px 150px, 100px 100px;
        }

        /* Subtle paper texture for cozy feel */
        .paper-texture {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 1;
            opacity: 0.025;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
        }

        /* ============================================
           STATE-OF-THE-ART DYNAMIC EFFECTS
           ============================================ */

        /* Cursor Trail Canvas */
        #cursor-trail {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 9999;
        }

        /* Custom Cursor - Subtle and fun */
        .custom-cursor {
            width: 32px;
            height: 32px;
            border: 2px solid rgba(245, 166, 35, 0.6);
            border-radius: 50%;
            position: fixed;
            pointer-events: none;
            z-index: 10000;
            transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
                        opacity 0.2s ease,
                        background 0.2s ease,
                        border-color 0.2s ease;
            transform: translate(-50%, -50%);
            opacity: 0.8;
        }

        .custom-cursor.hovering {
            transform: translate(-50%, -50%) scale(1.5);
            background: rgba(245, 166, 35, 0.15);
            border-color: var(--color-golden);
            opacity: 1;
        }

        .custom-cursor.clicking {
            transform: translate(-50%, -50%) scale(0.9);
            background: rgba(245, 166, 35, 0.3);
        }

        /* Cursor dot */
        .cursor-dot {
            width: 5px;
            height: 5px;
            background: var(--color-golden);
            border-radius: 50%;
            position: fixed;
            pointer-events: none;
            z-index: 10001;
            transform: translate(-50%, -50%);
            opacity: 0.9;
        }

        /* Magnetic button effect */
        .magnetic-btn {
            transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        /* Ripple effect for buttons */
        .btn {
            position: relative;
            overflow: hidden;
        }

        .btn::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.3);
            transform: translate(-50%, -50%);
            transition: width 0.6s ease, height 0.6s ease;
        }

        .btn:active::before {
            width: 400px;
            height: 400px;
        }

        /* Parallax layers */
        .parallax-layer {
            will-change: transform;
            transition: transform 0.1s ease-out;
        }

        /* Floating emoji enhancement - Behind content */
        .floating-elements {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: -1;
            overflow: hidden;
        }

        .leaf {
            position: absolute;
            font-size: 1.5rem;
            opacity: 0;
            animation: floatLeaf 25s ease-in-out infinite;
            filter: drop-shadow(0 2px 4px rgba(0,0,0,0.05));
        }

        .leaf:nth-child(1) { left: 8%; animation-duration: 28s; animation-delay: 0s; font-size: 1.4rem; }
        .leaf:nth-child(2) { left: 22%; animation-duration: 32s; animation-delay: -6s; font-size: 1.6rem; }
        .leaf:nth-child(3) { left: 45%; animation-duration: 30s; animation-delay: -12s; font-size: 1.3rem; }
        .leaf:nth-child(4) { left: 68%; animation-duration: 35s; animation-delay: -4s; font-size: 1.5rem; }
        .leaf:nth-child(5) { left: 82%; animation-duration: 27s; animation-delay: -18s; font-size: 1.2rem; }
        .leaf:nth-child(6) { left: 92%; animation-duration: 33s; animation-delay: -10s; font-size: 1.4rem; }

        @keyframes floatLeaf {
            0% {
                transform: translateY(-50px) rotate(0deg) translateX(0);
                opacity: 0;
            }
            5% {
                opacity: 0.4;
            }
            50% {
                transform: translateY(50vh) rotate(180deg) translateX(30px);
                opacity: 0.35;
            }
            95% {
                opacity: 0.4;
            }
            100% {
                transform: translateY(calc(100vh + 50px)) rotate(360deg) translateX(-20px);
                opacity: 0;
            }
        }

        /* Glowing orbs background - Behind everything */
        .glow-orbs {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: -2;
            overflow: hidden;
        }

        .glow-orb {
            position: absolute;
            border-radius: 50%;
            filter: blur(100px);
            opacity: 0.15;
            animation: orbFloat 30s ease-in-out infinite;
            will-change: transform;
        }

        .glow-orb:nth-child(1) {
            width: 500px;
            height: 500px;
            background: var(--color-golden);
            top: -15%;
            left: -10%;
            animation-delay: 0s;
        }

        .glow-orb:nth-child(2) {
            width: 400px;
            height: 400px;
            background: var(--color-lavender);
            top: 35%;
            right: -15%;
            animation-delay: -10s;
        }

        .glow-orb:nth-child(3) {
            width: 450px;
            height: 450px;
            background: var(--color-mint);
            bottom: -10%;
            left: 25%;
            animation-delay: -20s;
        }

        .glow-orb:nth-child(4) {
            width: 350px;
            height: 350px;
            background: var(--color-soft-pink);
            top: 55%;
            left: -10%;
            animation-delay: -5s;
        }

        @keyframes orbFloat {
            0%, 100% {
                transform: translate(0, 0) scale(1);
            }
            33% {
                transform: translate(30px, -20px) scale(1.05);
            }
            66% {
                transform: translate(-15px, 30px) scale(0.95);
            }
        }

        /* Scroll progress indicator */
        .scroll-progress {
            position: fixed;
            top: 0;
            left: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--color-golden), var(--color-sunset-orange), var(--color-coral));
            z-index: 10001;
            width: 0%;
            transition: width 0.1s ease-out;
        }

        /* Tilt card effect */
        .tilt-card {
            transform-style: preserve-3d;
            perspective: 1000px;
        }

        .tilt-card-inner {
            transition: transform 0.1s ease-out;
            transform-style: preserve-3d;
        }

        /* Text gradient animation */
        .gradient-text {
            background: linear-gradient(
                90deg,
                var(--color-golden),
                var(--color-sunset-orange),
                var(--color-coral),
                var(--color-lavender),
                var(--color-golden)
            );
            background-size: 200% auto;
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: gradientShift 4s ease infinite;
        }

        @keyframes gradientShift {
            0%, 100% { background-position: 0% center; }
            50% { background-position: 100% center; }
        }

        /* Morphing blob shapes */
        .morph-blob {
            animation: morphBlob 8s ease-in-out infinite;
        }

        @keyframes morphBlob {
            0%, 100% {
                border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
            }
            25% {
                border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
            }
            50% {
                border-radius: 50% 60% 30% 60% / 30% 60% 70% 40%;
            }
            75% {
                border-radius: 60% 40% 60% 30% / 70% 30% 50% 60%;
            }
        }

        /* Staggered reveal animation */
        .reveal-container > * {
            opacity: 0;
            transform: translateY(30px);
        }

        .reveal-container.revealed > * {
            animation: revealUp 0.6s ease forwards;
        }

        .reveal-container.revealed > *:nth-child(1) { animation-delay: 0s; }
        .reveal-container.revealed > *:nth-child(2) { animation-delay: 0.1s; }
        .reveal-container.revealed > *:nth-child(3) { animation-delay: 0.2s; }
        .reveal-container.revealed > *:nth-child(4) { animation-delay: 0.3s; }
        .reveal-container.revealed > *:nth-child(5) { animation-delay: 0.4s; }
        .reveal-container.revealed > *:nth-child(6) { animation-delay: 0.5s; }

        @keyframes revealUp {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Smooth text reveal */
        .text-reveal {
            clip-path: inset(0 100% 0 0);
            animation: textReveal 0.8s ease forwards;
        }

        @keyframes textReveal {
            to {
                clip-path: inset(0 0 0 0);
            }
        }

        /* Hover glow effect for cards */
        .glow-hover {
            transition: box-shadow 0.3s ease, transform 0.3s ease;
        }

        .glow-hover:hover {
            box-shadow: 0 0 30px rgba(245, 166, 35, 0.3), var(--shadow-heavy);
        }

        /* Smooth section transitions */
        section {
            position: relative;
        }

        /* Removed section::after effect - was causing visual issues */

        /* Counter animation */
        .counter {
            display: inline-block;
        }

        /* Typewriter effect */
        .typewriter {
            overflow: hidden;
            border-right: 3px solid var(--color-golden);
            white-space: nowrap;
            animation: typing 3s steps(40) forwards, blink 0.75s step-end infinite;
        }

        @keyframes typing {
            from { width: 0; }
            to { width: 100%; }
        }

        @keyframes blink {
            50% { border-color: transparent; }
        }

        /* Interactive hover scale */
        .hover-lift {
            transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
        }

        .hover-lift:hover {
            transform: translateY(-8px) scale(1.02);
        }

        /* Pulsing glow for CTAs */
        .pulse-glow {
            animation: pulseGlow 2s ease-in-out infinite;
        }

        @keyframes pulseGlow {
            0%, 100% {
                box-shadow: 0 0 20px rgba(245, 166, 35, 0.4);
            }
            50% {
                box-shadow: 0 0 40px rgba(245, 166, 35, 0.6), 0 0 60px rgba(245, 166, 35, 0.3);
            }
        }

        /* Neon text glow effect */
        .neon-glow {
            text-shadow:
                0 0 5px var(--color-golden),
                0 0 10px var(--color-golden),
                0 0 20px var(--color-golden-bright),
                0 0 40px var(--color-sunset-orange);
        }

        /* Wave animation for sections */
        .wave-divider {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 60px;
            overflow: hidden;
        }

        .wave-divider svg {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 200%;
            height: 100%;
            animation: waveMove 10s linear infinite;
        }

        @keyframes waveMove {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }

        /* Enhanced button shine effect */
        .btn-shine {
            position: relative;
            overflow: hidden;
        }

        .btn-shine::after {
            content: '';
            position: absolute;
            top: -50%;
            left: -100%;
            width: 50%;
            height: 200%;
            background: linear-gradient(
                90deg,
                transparent,
                rgba(255, 255, 255, 0.4),
                transparent
            );
            transform: skewX(-25deg);
            animation: btnShine 3s ease-in-out infinite;
        }

        @keyframes btnShine {
            0%, 100% { left: -100%; }
            50% { left: 150%; }
        }

        /* 3D card flip on hover */
        .flip-card {
            perspective: 1000px;
        }

        .flip-card-inner {
            transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
            transform-style: preserve-3d;
        }

        .flip-card:hover .flip-card-inner {
            transform: rotateY(180deg);
        }

        /* Elastic bounce animation */
        .elastic-bounce {
            animation: elasticBounce 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        }

        @keyframes elasticBounce {
            0% { transform: scale(0.3); opacity: 0; }
            50% { transform: scale(1.05); }
            70% { transform: scale(0.9); }
            100% { transform: scale(1); opacity: 1; }
        }

        /* Confetti burst effect (activated via JS) */
        .confetti-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 9998;
            overflow: hidden;
        }

        .confetti {
            position: absolute;
            width: 10px;
            height: 10px;
            opacity: 0;
        }

        @keyframes loaderPulse {
            0%, 100% { transform: scale(1) rotate(0deg); }
            50% { transform: scale(1.15) rotate(10deg); }
        }

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

        /* Disable animations for reduced motion preference */
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
            }
            .custom-cursor, .cursor-dot, #cursor-trail {
                display: none !important;
            }
        }

        /* Navigation */
        nav {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            padding: 1rem 2rem;
            z-index: 1000;
            transition: all 0.3s ease;
        }

        nav.scrolled {
            background: rgba(255, 248, 231, 0.95);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            box-shadow: 0 4px 30px rgba(74, 55, 40, 0.15), 0 0 0 1px rgba(245, 166, 35, 0.1);
            padding: 0.75rem 2rem;
        }

        .nav-container {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            font-family: var(--font-display);
            font-size: 1.8rem;
            font-weight: 700;
            color: var(--color-earth-brown);
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            transition: transform 0.3s ease;
        }

        .logo:hover {
            transform: scale(1.05) rotate(-2deg);
        }

        .logo img {
            height: 40px;
            transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
            width: auto;
        }

        .nav-links {
            display: flex;
            gap: 1.5rem;
            list-style: none;
            align-items: center;
            flex-wrap: nowrap;
        }

        .nav-links li {
            flex-shrink: 0;
        }

        .nav-links a {
            font-family: var(--font-display);
            font-weight: 500;
            color: var(--color-text);
            text-decoration: none;
            font-size: 0.95rem;
            transition: color 0.2s ease;
            position: relative;
            white-space: nowrap;
        }

        .nav-links a::after {
            content: '';
            position: absolute;
            bottom: -4px;
            left: 0;
            width: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--color-golden), var(--color-sunset-orange));
            border-radius: 2px;
            transition: width 0.3s ease;
        }

        .nav-links a:hover::after {
            width: 100%;
        }

        .nav-links a:hover {
            color: var(--color-golden-dark);
        }

        .nav-cta {
            background: linear-gradient(135deg, var(--color-steam-blue), #2a475e);
            color: white !important;
            padding: 0.6rem 1.2rem;
            border-radius: 50px;
            font-weight: 600 !important;
            box-shadow: 0 4px 15px rgba(27, 40, 56, 0.3);
        }

        .nav-cta::after {
            display: none !important;
        }

        .nav-cta {
            transition: all 0.3s ease;
        }

        .nav-cta:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(27, 40, 56, 0.4);
            color: white !important;
        }

        /* Critters Toggle Button */
        .nav-critters-toggle {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            background: linear-gradient(135deg, #8B5A2B, #A0522D);
            color: white !important;
            padding: 0.5rem 1rem;
            border-radius: 50px;
            font-weight: 600 !important;
            font-size: 0.85rem;
            box-shadow: 0 4px 15px rgba(139, 90, 43, 0.3);
            transition: all 0.3s ease;
            cursor: pointer;
            border: none;
            font-family: var(--font-body);
        }

        .nav-critters-toggle:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(139, 90, 43, 0.4);
            background: linear-gradient(135deg, #A0522D, #CD853F);
        }

        .critters-switch {
            position: relative;
            width: 36px;
            height: 20px;
            background: rgba(0,0,0,0.3);
            border-radius: 20px;
            transition: background 0.3s ease;
        }

        .critters-switch::after {
            content: '';
            position: absolute;
            top: 2px;
            left: 2px;
            width: 16px;
            height: 16px;
            background: white;
            border-radius: 50%;
            transition: transform 0.3s ease;
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }

        .nav-critters-toggle.active .critters-switch {
            background: #4CAF50;
        }

        .nav-critters-toggle.active .critters-switch::after {
            transform: translateX(16px);
        }

        /* Hide critters section when disabled */
        .battle-arena.hidden {
            display: none !important;
            visibility: hidden !important;
            height: 0 !important;
            min-height: 0 !important;
            overflow: hidden !important;
            padding: 0 !important;
            margin: 0 !important;
        }

        /* Nav Dropdown */
        .nav-dropdown {
            position: relative;
        }

        .nav-dropdown > a {
            display: flex;
            align-items: center;
            gap: 0.3rem;
        }

        .nav-dropdown > a::after {
            display: none !important;
        }

        .nav-dropdown-arrow {
            font-size: 0.7rem;
            transition: transform 0.3s ease;
        }

        .nav-dropdown:hover .nav-dropdown-arrow {
            transform: rotate(180deg);
        }

        .nav-dropdown-menu {
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            background: white;
            border-radius: 12px;
            box-shadow: var(--shadow-heavy);
            padding: 0.5rem 0;
            min-width: 160px;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
            margin-top: 0.5rem;
        }

        .nav-dropdown:hover .nav-dropdown-menu {
            opacity: 1;
            visibility: visible;
            margin-top: 0.75rem;
        }

        .nav-dropdown-menu a {
            display: block;
            padding: 0.6rem 1.2rem;
            font-size: 0.95rem;
        }

        .nav-dropdown-menu a::after {
            display: none !important;
        }

        .nav-dropdown-menu a:hover {
            background: var(--color-cream);
        }

        /* Mobile Menu Toggle */
        .menu-toggle {
            display: none;
            background: none;
            border: none;
            font-size: 1.5rem;
            cursor: pointer;
            color: var(--color-text);
        }

        .menu-close {
            display: none;
            position: absolute;
            top: 1.5rem;
            right: 1.5rem;
            background: none;
            border: none;
            font-size: 1.8rem;
            cursor: pointer;
            color: var(--color-text);
            z-index: 1002;
        }

        /* Hero Section - Content determines height, no overflow clipping */
        .hero {
            position: relative;
            display: block;
            padding: 8rem 2rem 4rem;
            text-align: center;
            background: linear-gradient(180deg,
                var(--color-sky-blue) 0%,
                var(--color-cream) 60%,
                var(--color-soft-pink) 100%);
            overflow: hidden;
        }

        /* ========================================
           PARALLAX VIDEO BACKGROUND SYSTEM
           ======================================== */

        /* Base parallax layer styles */
        .parallax-video {
            position: absolute;
            left: 0;
            width: 100%;
            pointer-events: none;
            will-change: transform;
            backface-visibility: hidden;
        }

        /* Hero parallax layers */
        .hero-video-sky {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center top;
            z-index: 0;
        }

        .hero-video-bg {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 60%;
            object-fit: cover;
            object-position: center bottom;
            z-index: 2;
        }

        /* Section video backgrounds */
        .section-video-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 0;
            pointer-events: none;
            will-change: transform;
            backface-visibility: hidden;
        }

        .section-video-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            pointer-events: none;
        }

        /* Lazy load - hidden until in view */
        .video-lazy {
            opacity: 0;
            transition: opacity 0.8s ease;
        }
        .video-lazy.video-loaded {
            opacity: 1;
        }

        /* Reduce motion for accessibility and performance */
        @media (prefers-reduced-motion: reduce) {
            .parallax-video,
            .section-video-bg,
            .arena-video-bg {
                transform: none !important;
                will-change: auto;
            }
        }

        /* Disable parallax on mobile for performance */
        @media (max-width: 768px) {
            .parallax-video,
            .section-video-bg,
            .arena-video-bg {
                transform: none !important;
                will-change: auto;
            }
            .hero-video-sky {
                height: 100%;
            }
            .hero-video-bg {
                height: 70%;
            }
            .mountain-divider {
                height: 200px;
            }
        }

        /* Gradient overlay for better text readability */
        .hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(180deg,
                rgba(126, 200, 227, 0.7) 0%,
                rgba(255, 248, 231, 0.6) 40%,
                rgba(255, 248, 231, 0.8) 70%,
                rgba(245, 208, 197, 0.9) 100%);
            z-index: 0;
            pointer-events: none;
        }

        .hero-content {
            position: relative;
            z-index: 10;
        }

        .hero-bg {
            display: none;
        }

        .clouds {
            display: none;
        }

        .hero-content {
            max-width: 900px;
            margin: 0 auto;
        }

        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            background: linear-gradient(135deg, var(--color-golden), var(--color-golden-bright));
            color: white;
            padding: 0.5rem 1.2rem;
            border-radius: 50px;
            font-family: var(--font-display);
            font-weight: 700;
            font-size: 0.9rem;
            letter-spacing: 0.03em;
            margin-bottom: 1.5rem;
            box-shadow: 0 4px 20px rgba(245, 166, 35, 0.4);
            animation: pulse 3s ease-in-out infinite, badgeShine 4s ease-in-out infinite;
            position: relative;
            overflow: hidden;
            cursor: default;
            transition: transform 0.3s ease;
        }

        .hero-badge:hover {
            transform: scale(1.05);
            animation-play-state: paused;
        }

        .hero-badge::after {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 50%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
            animation: badgeShine 3s ease-in-out infinite;
        }

        @keyframes badgeShine {
            0%, 100% { left: -100%; }
            50% { left: 150%; }
        }

        @keyframes pulse {
            0%, 100% { box-shadow: 0 4px 20px rgba(245, 166, 35, 0.4); }
            50% { box-shadow: 0 4px 30px rgba(245, 166, 35, 0.6); }
        }

        .hero-logo {
            max-width: 500px;
            width: 90%;
            height: auto;
            margin-bottom: 1.5rem;
            animation: titleFloat 3s ease-in-out infinite, logoGlow 4s ease-in-out infinite alternate;
            filter: drop-shadow(0 0 20px rgba(245, 166, 35, 0.4))
                    drop-shadow(0 0 40px rgba(245, 166, 35, 0.2))
                    drop-shadow(4px 4px 0 rgba(139, 105, 20, 0.3));
            position: relative;
            z-index: 10;
            cursor: pointer;
            transform-style: preserve-3d;
            transition: transform 0.1s ease-out;
        }

        .hero-logo:hover {
            animation: logoGlowIntense 0.5s ease-out forwards;
        }

        /* Logo container enhancements */
        .logo-container {
            position: relative;
            display: inline-block;
            margin: 0 auto;
            perspective: 1000px;
        }

        /* Rainbow gradient ring around logo */
        .logo-ring {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 110%;
            height: 110%;
            transform: translate(-50%, -50%);
            border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
            background: conic-gradient(
                from 0deg,
                var(--color-golden),
                var(--color-sunset-orange),
                var(--color-coral),
                var(--color-lavender),
                var(--color-mint),
                var(--color-sky-blue),
                var(--color-golden)
            );
            opacity: 0;
            z-index: -1;
            animation: ringPulse 4s ease-in-out infinite, ringMorph 8s ease-in-out infinite;
            filter: blur(20px);
            pointer-events: none;
        }

        .logo-container:hover .logo-ring {
            opacity: 0.6;
        }

        @keyframes ringPulse {
            0%, 100% {
                transform: translate(-50%, -50%) scale(1);
                opacity: 0.3;
            }
            50% {
                transform: translate(-50%, -50%) scale(1.1);
                opacity: 0.5;
            }
        }

        @keyframes ringMorph {
            0%, 100% {
                border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
            }
            25% {
                border-radius: 58% 42% 75% 25% / 76% 46% 54% 24%;
            }
            50% {
                border-radius: 50% 50% 33% 67% / 55% 27% 73% 45%;
            }
            75% {
                border-radius: 33% 67% 58% 42% / 63% 68% 32% 37%;
            }
        }

        /* Orbiting stars around logo */
        .logo-orbit {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 120%;
            height: 120%;
            transform: translate(-50%, -50%);
            pointer-events: none;
            z-index: 25;
        }

        .orbit-star {
            position: absolute;
            width: 8px;
            height: 8px;
            background: var(--color-golden);
            border-radius: 50%;
            box-shadow: 0 0 10px var(--color-golden), 0 0 20px var(--color-golden-bright);
        }

        .orbit-star:nth-child(1) {
            animation: orbitStar1 6s linear infinite;
        }

        .orbit-star:nth-child(2) {
            animation: orbitStar2 8s linear infinite;
            background: var(--color-lavender);
            box-shadow: 0 0 10px var(--color-lavender), 0 0 20px var(--color-lavender);
        }

        .orbit-star:nth-child(3) {
            animation: orbitStar3 10s linear infinite;
            background: var(--color-mint);
            box-shadow: 0 0 10px var(--color-mint), 0 0 20px var(--color-mint);
            width: 6px;
            height: 6px;
        }

        @keyframes orbitStar1 {
            0% { transform: rotate(0deg) translateX(55%) rotate(0deg); }
            100% { transform: rotate(360deg) translateX(55%) rotate(-360deg); }
        }

        @keyframes orbitStar2 {
            0% { transform: rotate(120deg) translateX(52%) rotate(-120deg); }
            100% { transform: rotate(480deg) translateX(52%) rotate(-480deg); }
        }

        @keyframes orbitStar3 {
            0% { transform: rotate(240deg) translateX(58%) rotate(-240deg); }
            100% { transform: rotate(600deg) translateX(58%) rotate(-600deg); }
        }

        @keyframes logoBounce {
            0% { transform: scale(1); }
            30% { transform: scale(1.15) rotate(5deg); }
            50% { transform: scale(0.95) rotate(-3deg); }
            70% { transform: scale(1.05) rotate(2deg); }
            100% { transform: scale(1) rotate(0deg); }
        }

        @keyframes logoGlow {
            0% {
                filter: drop-shadow(0 0 20px rgba(245, 166, 35, 0.4))
                        drop-shadow(0 0 40px rgba(245, 166, 35, 0.2))
                        drop-shadow(4px 4px 0 rgba(139, 105, 20, 0.3));
            }
            100% {
                filter: drop-shadow(0 0 30px rgba(245, 166, 35, 0.6))
                        drop-shadow(0 0 60px rgba(245, 166, 35, 0.3))
                        drop-shadow(0 0 100px rgba(232, 131, 91, 0.2))
                        drop-shadow(4px 4px 0 rgba(139, 105, 20, 0.3));
            }
        }

        @keyframes logoGlowIntense {
            0% {
                filter: drop-shadow(0 0 20px rgba(245, 166, 35, 0.4))
                        drop-shadow(0 0 40px rgba(245, 166, 35, 0.2));
            }
            100% {
                filter: drop-shadow(0 0 40px rgba(245, 166, 35, 0.8))
                        drop-shadow(0 0 80px rgba(245, 166, 35, 0.5))
                        drop-shadow(0 0 120px rgba(232, 131, 91, 0.4))
                        drop-shadow(0 0 160px rgba(184, 169, 232, 0.3));
            }
        }

        /* Logo container for particle effects */
        .logo-container {
            position: relative;
            display: inline-block;
            margin: 0 auto;
        }

        .logo-particles {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 100%;
            height: 100%;
            transform: translate(-50%, -50%);
            pointer-events: none;
            z-index: 5;
        }

        .logo-particle {
            position: absolute;
            width: 4px;
            height: 4px;
            border-radius: 50%;
            opacity: 0;
            animation: particleFloat 4s ease-in-out infinite;
        }

        .logo-particle:nth-child(1) { left: 5%; top: 25%; background: var(--color-golden); animation-delay: 0s; }
        .logo-particle:nth-child(2) { left: 95%; top: 35%; background: var(--color-sunset-orange); animation-delay: 0.8s; }
        .logo-particle:nth-child(3) { left: 15%; top: 85%; background: var(--color-coral); animation-delay: 1.6s; }
        .logo-particle:nth-child(4) { left: 85%; top: 75%; background: var(--color-lavender); animation-delay: 2.4s; }
        .logo-particle:nth-child(5) { left: 50%; top: 5%; background: var(--color-mint); animation-delay: 3.2s; }
        .logo-particle:nth-child(6) { left: 25%; top: 55%; background: var(--color-golden-bright); animation-delay: 0.4s; }
        .logo-particle:nth-child(7) { left: 75%; top: 45%; background: var(--color-sky-blue); animation-delay: 1.2s; }
        .logo-particle:nth-child(8) { left: 10%; top: 65%; background: var(--color-soft-pink); animation-delay: 2s; }

        @keyframes particleFloat {
            0%, 100% {
                opacity: 0;
                transform: translateY(0) scale(0);
            }
            15% {
                opacity: 0.7;
                transform: translateY(-5px) scale(1);
            }
            85% {
                opacity: 0.7;
                transform: translateY(-25px) scale(0.6);
            }
        }

        /* Shimmer effect overlay */
        .logo-shimmer {
            position: absolute;
            top: 0;
            left: -100%;
            width: 40%;
            height: 100%;
            background: linear-gradient(
                90deg,
                transparent,
                rgba(255, 255, 255, 0.25),
                transparent
            );
            animation: shimmerMove 5s ease-in-out infinite;
            animation-delay: 2s;
            pointer-events: none;
            z-index: 15;
        }

        @keyframes shimmerMove {
            0%, 80%, 100% { left: -100%; opacity: 0; }
            10% { opacity: 1; }
            40% { left: 150%; opacity: 1; }
            50% { opacity: 0; }
        }

        /* Sparkle stars around logo */
        .logo-sparkles {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 20;
        }

        .sparkle {
            position: absolute;
            font-size: 0.9rem;
            opacity: 0;
            animation: sparkle 3s ease-in-out infinite;
            color: var(--color-golden);
        }

        .sparkle:nth-child(1) { top: -8%; left: 12%; animation-delay: 0s; }
        .sparkle:nth-child(2) { top: -3%; right: 18%; animation-delay: 1s; }
        .sparkle:nth-child(3) { bottom: -3%; left: 22%; animation-delay: 2s; }
        .sparkle:nth-child(4) { bottom: 2%; right: 12%; animation-delay: 0.5s; }
        .sparkle:nth-child(5) { top: 35%; left: -3%; animation-delay: 1.5s; }
        .sparkle:nth-child(6) { top: 45%; right: -3%; animation-delay: 2.5s; }

        @keyframes sparkle {
            0%, 100% { opacity: 0; transform: scale(0) rotate(0deg); }
            50% { opacity: 0.8; transform: scale(1) rotate(180deg); }
        }

        .hero h1 {
            font-family: var(--font-display);
            font-size: clamp(3rem, 8vw, 5.5rem);
            font-weight: 700;
            color: var(--color-earth-brown);
            margin-bottom: 1rem;
            text-shadow: 2px 2px 0 var(--color-cream), 4px 4px 0 rgba(139, 105, 20, 0.2);
            animation: titleFloat 3s ease-in-out infinite;
        }

        /* Hide text title if logo image loads */
        .hero-logo + h1 {
            display: none;
        }

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

        .tagline {
            font-family: var(--font-handwritten);
            font-size: clamp(1.4rem, 3vw, 2rem);
            color: var(--color-forest-green);
            margin-bottom: 1rem;
            font-weight: 600;
            text-shadow: 0 2px 10px rgba(255,255,255,0.8),
                         0 0 30px rgba(255,255,255,0.5);
        }

        .hero-description {
            font-size: 1.1rem;
            color: var(--color-text);
            max-width: 620px;
            margin: 0 auto 2rem;
            line-height: 1.8;
            background: rgba(255,255,255,0.85);
            padding: 1.5rem 2rem;
            border-radius: 20px;
            box-shadow: 0 8px 32px rgba(74, 55, 40, 0.1),
                        inset 0 1px 0 rgba(255,255,255,0.9);
            backdrop-filter: blur(10px);
        }

        .hero-highlight {
            display: block;
            margin-top: 0.5rem;
            color: var(--color-golden-dark);
            font-style: normal;
            font-weight: 600;
            text-shadow: 0 1px 2px rgba(255,255,255,0.8);
        }

        .hero-subtext {
            font-size: 0.95rem;
            color: rgba(80,60,40,0.85);
            margin-bottom: 1.5rem;
            font-style: italic;
        }

        .badges {
            display: flex;
            flex-wrap: wrap;
            gap: 0.75rem;
            justify-content: center;
            margin-bottom: 1rem;
        }

        .badge-players {
            background: linear-gradient(135deg, #27ae60, #2ecc71) !important;
        }

        .badge {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            padding: 0.5rem 1rem;
            border-radius: 50px;
            font-family: var(--font-display);
            font-weight: 600;
            font-size: 0.9rem;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
            transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
            cursor: default;
        }

        .badge:hover {
            transform: translateY(-3px) scale(1.05);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
        }

        .badge:active {
            transform: translateY(-1px) scale(1.02);
        }

        .badge-rating {
            background: linear-gradient(135deg, var(--color-forest-green), #3a6349);
            color: white;
        }

        .badge-rating:hover {
            box-shadow: 0 8px 25px rgba(74, 124, 89, 0.4);
        }

        .badge-deck {
            background: linear-gradient(135deg, #1b2838, #2a475e);
            color: #66c0f4;
        }

        .badge-deck:hover {
            box-shadow: 0 8px 25px rgba(27, 40, 56, 0.5);
        }

        .badge-controller {
            background: linear-gradient(135deg, #5865F2, #4752c4);
            color: white;
        }

        .badge-controller:hover {
            box-shadow: 0 8px 25px rgba(88, 101, 242, 0.5);
        }

        .hero-cta {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            justify-content: center;
            margin-bottom: 2.5rem;
        }

        .btn {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 1rem 2rem;
            font-family: var(--font-display);
            font-size: 1.1rem;
            font-weight: 600;
            text-decoration: none;
            border-radius: 50px;
            transition: all 0.3s ease;
            cursor: pointer;
            border: none;
            position: relative;
            overflow: hidden;
        }

        .btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 60%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
            transition: left 0.5s ease;
        }

        .btn:hover::before {
            left: 150%;
        }

        .btn-primary {
            background: linear-gradient(135deg, var(--color-golden), var(--color-golden-dark));
            color: white;
            box-shadow: 0 4px 20px rgba(245, 166, 35, 0.4),
                        0 2px 4px rgba(0,0,0,0.1),
                        inset 0 1px 0 rgba(255,255,255,0.3);
            text-shadow: 0 1px 2px rgba(0,0,0,0.2);
        }

        .btn-primary:hover {
            transform: translateY(-3px) scale(1.02);
            box-shadow: 0 8px 30px rgba(245, 166, 35, 0.5),
                        0 4px 8px rgba(0,0,0,0.15),
                        inset 0 1px 0 rgba(255,255,255,0.3);
        }

        .btn-steam {
            background: linear-gradient(135deg, var(--color-steam-blue), #2a475e);
            color: white;
            box-shadow: 0 4px 20px rgba(27, 40, 56, 0.35);
        }

        .btn-steam:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 30px rgba(27, 40, 56, 0.45);
        }

        .btn-secondary {
            background: white;
            color: var(--color-text);
            box-shadow: var(--shadow-medium);
            border: 2px solid transparent;
        }

        .btn-secondary:hover {
            transform: translateY(-3px);
            border-color: var(--color-golden);
            box-shadow: var(--shadow-heavy);
        }

        /* Video Container */
        .video-container {
            width: 100%;
            max-width: 800px;
            margin: 0 auto;
            position: relative;
            border-radius: 20px;
            overflow: hidden;
            box-shadow:
                0 20px 60px rgba(74, 55, 40, 0.25),
                0 0 0 4px var(--color-soft-pink),
                0 0 0 8px rgba(245, 208, 197, 0.5);
            background: #000;
        }

        .video-container::before {
            content: '';
            display: block;
            padding-top: 56.25%;
        }

        .video-container iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: none;
        }

        /* Platform Links */
        .platform-links {
            display: flex;
            flex-wrap: wrap;
            gap: 0.75rem;
            justify-content: center;
            margin-top: 2.5rem;
            margin-bottom: 2rem;
        }

        /* Scroll Indicator */
        .scroll-indicator {
            margin-top: 1.5rem;
            margin-bottom: 1rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.5rem;
            cursor: pointer;
            opacity: 0.7;
            transition: opacity 0.3s ease, transform 0.3s ease;
            text-decoration: none;
        }

        .scroll-indicator:hover {
            opacity: 1;
            transform: translateY(3px);
        }

        .scroll-indicator-text {
            font-family: var(--font-display);
            font-size: 0.85rem;
            color: var(--color-text-muted);
            letter-spacing: 0.05em;
        }

        .scroll-indicator-arrow {
            width: 24px;
            height: 24px;
            border-right: 2px solid var(--color-golden);
            border-bottom: 2px solid var(--color-golden);
            transform: rotate(45deg);
            animation: scrollBounce 2s ease-in-out infinite;
        }

        @keyframes scrollBounce {
            0%, 100% { transform: rotate(45deg) translateY(0); opacity: 1; }
            50% { transform: rotate(45deg) translateY(8px); opacity: 0.5; }
        }

        .platform-link {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            padding: 0.6rem 1.2rem;
            background: white;
            color: var(--color-text);
            text-decoration: none;
            font-family: var(--font-display);
            font-weight: 600;
            font-size: 0.9rem;
            border-radius: 10px;
            transition: all 0.3s ease;
            box-shadow: 0 2px 10px rgba(74, 55, 40, 0.1);
        }

        .platform-link:hover {
            transform: translateY(-4px) scale(1.05);
            box-shadow: 0 8px 25px rgba(74, 55, 40, 0.2), 0 0 20px rgba(245, 166, 35, 0.15);
            background: linear-gradient(135deg, white, var(--color-cream));
            border-color: rgba(245, 166, 35, 0.3);
        }

        .platform-link {
            border: 2px solid transparent;
        }

        .platform-link.coming-soon {
            opacity: 0.7;
            cursor: default;
        }

        .platform-link.coming-soon:hover {
            transform: none;
        }

        /* Quote Ribbon - Completely isolated, no overlap */
        .quote-ribbon {
            background: linear-gradient(135deg, var(--color-forest-dark) 0%, var(--color-forest-green) 100%);
            padding: 3.5rem 2rem;
            position: static;
            display: block;
            width: 100%;
            box-sizing: border-box;
        }

        .quote-container {
            max-width: 900px;
            margin: 0 auto;
            text-align: center;
        }

        .quote-text {
            font-family: var(--font-display);
            font-size: clamp(1.2rem, 2.5vw, 1.6rem);
            font-style: italic;
            color: white;
            line-height: 1.6;
            margin-bottom: 1rem;
        }

        .quote-text::before {
            content: '"';
            color: rgba(255,255,255,0.3);
        }

        .quote-text::after {
            content: '"';
            color: rgba(255,255,255,0.3);
        }

        .quote-source {
            color: rgba(255,255,255,0.7);
            font-weight: 600;
            font-size: 0.95rem;
        }

        /* Features Section */
        .features {
            padding: 5rem 2rem 6rem;
            position: relative;
            background: var(--color-warm-white);
            overflow: hidden;
        }

        .features .section-video-bg {
            opacity: 0;
            object-position: center 60%;
        }

        .features .section-video-bg.video-loaded {
            opacity: 0.7;
        }

        .features .section-video-overlay {
            background: linear-gradient(180deg,
                rgba(255, 253, 247, 0.6) 0%,
                rgba(255, 253, 247, 0.5) 50%,
                rgba(255, 253, 247, 0.6) 100%);
        }

        .section-header {
            text-align: center;
            max-width: 700px;
            margin: 0 auto 3rem;
            position: relative;
            z-index: 2;
        }

        .section-eyebrow {
            font-family: var(--font-handwritten);
            font-size: 1.5rem;
            background: linear-gradient(90deg, var(--color-golden-dark), var(--color-sunset-orange), var(--color-golden-dark));
            background-size: 200% auto;
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 0.5rem;
            animation: gradientFlow 3s ease infinite;
        }

        @keyframes gradientFlow {
            0%, 100% { background-position: 0% center; }
            50% { background-position: 100% center; }
        }

        .section-title {
            font-family: var(--font-display);
            font-size: clamp(2rem, 5vw, 3rem);
            color: var(--color-earth-brown);
            margin-bottom: 1rem;
        }

        .section-subtitle {
            color: var(--color-text-light);
            max-width: 600px;
            margin: 0 auto;
            font-size: 1.1rem;
        }

        .features-grid {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            position: relative;
            z-index: 2;
        }

        .feature-card {
            background: white;
            padding: 2rem;
            border-radius: 20px;
            text-align: center;
            box-shadow: var(--shadow-soft);
            transition: all 0.3s ease;
            border: 2px solid transparent;
            position: relative;
            overflow: hidden;
        }

        .feature-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: linear-gradient(90deg, var(--color-golden), var(--color-sunset-orange));
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .feature-card:hover {
            transform: translateY(-8px);
            border-color: var(--color-golden);
            box-shadow: var(--shadow-heavy);
        }

        .feature-card:hover::before {
            opacity: 1;
        }

        .feature-icon {
            width: 70px;
            height: 70px;
            background: linear-gradient(135deg, var(--color-cream) 0%, var(--color-warm-white) 100%);
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            margin: 0 auto 1.5rem;
            box-shadow: inset 0 2px 10px rgba(0,0,0,0.05);
            transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
        }

        .feature-card:hover .feature-icon {
            transform: scale(1.15) rotate(-5deg);
            box-shadow: 0 5px 20px rgba(245, 166, 35, 0.2);
        }

        /* Bounce animation for feature icons */
        .feature-card:hover .feature-icon {
            animation: iconBounce 0.5s ease;
        }

        @keyframes iconBounce {
            0% { transform: scale(1); }
            30% { transform: scale(1.2) rotate(-8deg); }
            50% { transform: scale(0.95) rotate(3deg); }
            70% { transform: scale(1.1) rotate(-3deg); }
            100% { transform: scale(1.15) rotate(-5deg); }
        }

        .feature-card h3 {
            font-family: var(--font-display);
            font-size: 1.4rem;
            color: var(--color-earth-brown);
            margin-bottom: 0.8rem;
        }

        .feature-card p {
            color: var(--color-text-light);
            font-size: 1rem;
        }

        .feature-tag {
            display: inline-block;
            padding: 0.3rem 0.8rem;
            background: var(--color-mint);
            color: var(--color-forest-dark);
            border-radius: 20px;
            font-size: 0.75rem;
            font-weight: 700;
            margin-top: 1rem;
        }

        /* Unique Mechanics Section */
        .unique-section {
            background: linear-gradient(180deg, var(--color-cream) 0%, white 50%, var(--color-cream) 100%);
            padding: 6rem 2rem;
        }

        .mechanics-showcase {
            max-width: 1100px;
            margin: 0 auto;
            display: grid;
            gap: 4rem;
        }

        .mechanic-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 3rem;
            align-items: center;
        }

        .mechanic-row:nth-child(even) {
            direction: rtl;
        }

        .mechanic-row:nth-child(even) > * {
            direction: ltr;
        }

        .mechanic-visual {
            position: relative;
            aspect-ratio: 4/3;
            border-radius: 24px;
            overflow: hidden;
            background: linear-gradient(135deg, var(--color-sky-light), var(--color-lavender));
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: var(--shadow-heavy);
        }

        .mechanic-visual .emoji-display {
            font-size: 5rem;
            animation: floatSlow 4s ease-in-out infinite;
        }

        .mechanic-visual .mechanic-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        @keyframes floatSlow {
            0%, 100% { transform: translateY(0) scale(1); }
            50% { transform: translateY(-15px) scale(1.05); }
        }

        /* Screenshot Gallery */
        .screenshots {
            padding: 5rem 2rem 6rem;
            background: var(--color-cream);
            position: relative;
        }

        .screenshot-grid {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.5rem;
        }

        .screenshot-item {
            position: relative;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: var(--shadow-medium);
            transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
            cursor: pointer;
        }

        .screenshot-item:hover {
            transform: scale(1.03) translateY(-5px);
            box-shadow: 0 20px 50px rgba(74, 55, 40, 0.2), 0 0 30px rgba(245, 166, 35, 0.15);
        }

        .screenshot-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(245, 166, 35, 0) 0%, rgba(245, 166, 35, 0.1) 100%);
            opacity: 0;
            transition: opacity 0.3s ease;
            z-index: 1;
            pointer-events: none;
        }

        .screenshot-item:hover::before {
            opacity: 1;
        }

        .screenshot-item::after {
            content: '🔍';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0);
            font-size: 2rem;
            z-index: 2;
            transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
            filter: drop-shadow(0 2px 10px rgba(0,0,0,0.3));
        }

        .screenshot-item:hover::after {
            transform: translate(-50%, -50%) scale(1);
        }

        .screenshot-item img {
            width: 100%;
            height: 200px;
            object-fit: cover;
            display: block;
        }

        @media (max-width: 900px) {
            .screenshot-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 600px) {
            .screenshot-grid {
                grid-template-columns: 1fr;
            }
            .screenshot-item img {
                height: 180px;
            }
        }

        /* Lightbox */
        .lightbox {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.95);
            z-index: 2000;
            justify-content: center;
            align-items: center;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .lightbox.active {
            display: flex;
            opacity: 1;
        }

        .lightbox-content {
            position: relative;
            max-width: 90vw;
            max-height: 90vh;
        }

        .lightbox-content img {
            max-width: 100%;
            max-height: 85vh;
            border-radius: 12px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
        }

        .lightbox-caption {
            text-align: center;
            color: rgba(255, 255, 255, 0.9);
            font-family: var(--font-display);
            font-size: 1.1rem;
            margin-top: 1rem;
            padding: 0 1rem;
        }

        .lightbox-close {
            position: absolute;
            top: -50px;
            right: 0;
            background: none;
            border: none;
            color: white;
            font-size: 2.5rem;
            cursor: pointer;
            transition: transform 0.3s ease;
            line-height: 1;
        }

        .lightbox-close:hover {
            transform: scale(1.2);
        }

        .lightbox-nav {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(255, 255, 255, 0.1);
            border: none;
            color: white;
            font-size: 2rem;
            padding: 1rem 1.2rem;
            cursor: pointer;
            border-radius: 50%;
            transition: all 0.3s ease;
        }

        .lightbox-nav:hover {
            background: rgba(255, 255, 255, 0.2);
        }

        .lightbox-prev {
            left: -80px;
        }

        .lightbox-next {
            right: -80px;
        }

        @media (max-width: 768px) {
            .lightbox-prev {
                left: 10px;
            }
            .lightbox-next {
                right: 10px;
            }
            .lightbox-nav {
                padding: 0.8rem 1rem;
                font-size: 1.5rem;
            }
        }

        .mechanic-content h3 {
            font-family: var(--font-display);
            font-size: 1.8rem;
            font-weight: 700;
            margin-bottom: 1rem;
            color: var(--color-earth-brown);
        }

        .mechanic-content p {
            font-size: 1.05rem;
            color: var(--color-text-light);
            line-height: 1.8;
            margin-bottom: 1.5rem;
        }

        .mechanic-highlights {
            display: flex;
            flex-wrap: wrap;
            gap: 0.75rem;
        }

        .mechanic-tag {
            padding: 0.5rem 1rem;
            background: var(--color-cream);
            border-radius: 30px;
            font-size: 0.9rem;
            font-weight: 600;
            color: var(--color-text-light);
            border: 2px solid transparent;
            transition: all 0.3s ease;
        }

        .mechanic-tag:hover {
            border-color: var(--color-golden);
            background: white;
        }

        /* Stats Section */
        .stats {
            padding: 4rem 2rem;
            background: linear-gradient(135deg, var(--color-forest-green), #3a6349);
            color: white;
        }

        .stats-grid {
            max-width: 1000px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 2rem;
            text-align: center;
        }

        .stat-item {
            padding: 1rem;
        }

        .stat-number {
            font-family: var(--font-display);
            font-size: 3rem;
            font-weight: 700;
            display: block;
            margin-bottom: 0.5rem;
        }

        .stat-label {
            font-size: 1rem;
            opacity: 0.9;
        }

        /* Reviews Section */
        .reviews-section {
            background: var(--color-forest-dark);
            padding: 5rem 2rem 6rem;
            position: relative;
            overflow: hidden;
        }

        .reviews-section .section-video-bg {
            opacity: 0;
            object-position: center 50%;
        }

        .reviews-section .section-video-bg.video-loaded {
            opacity: 0.4;
        }

        .reviews-section .section-video-overlay {
            background: linear-gradient(180deg,
                rgba(58, 99, 73, 0.82) 0%,
                rgba(58, 99, 73, 0.72) 50%,
                rgba(58, 99, 73, 0.82) 100%);
        }

        .reviews-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background:
                radial-gradient(ellipse 50% 80% at 10% 90%, rgba(245, 166, 35, 0.15) 0%, transparent 50%),
                radial-gradient(ellipse 40% 60% at 90% 20%, rgba(137, 207, 240, 0.1) 0%, transparent 50%);
            pointer-events: none;
            z-index: 1;
        }

        .reviews-header {
            text-align: center;
            margin-bottom: 3rem;
            position: relative;
            z-index: 1;
        }

        .reviews-header .section-eyebrow {
            color: var(--color-golden-bright);
        }

        .reviews-header .section-title {
            color: white;
        }

        .reviews-stats {
            display: flex;
            justify-content: center;
            gap: 3rem;
            margin-bottom: 2.5rem;
            position: relative;
            z-index: 2;
        }

        .review-stat {
            text-align: center;
        }

        .review-stat-value {
            font-family: var(--font-display);
            font-size: 2.5rem;
            font-weight: 700;
            color: var(--color-golden-bright);
        }

        .review-stat-label {
            color: rgba(255,255,255,0.7);
            font-weight: 600;
        }

        .reviews-track-container {
            overflow: hidden;
            position: relative;
            z-index: 2;
        }

        .reviews-track {
            display: flex;
            gap: 1.5rem;
            animation: scroll 50s linear infinite;
            width: max-content;
        }

        @keyframes scroll {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }

        .review-card {
            flex-shrink: 0;
            width: 360px;
            background: rgba(255,255,255,0.95);
            border-radius: 20px;
            padding: 2rem;
            position: relative;
            transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(245, 166, 35, 0.1);
        }

        .review-card:hover {
            transform: translateY(-10px) scale(1.02);
            box-shadow: 0 25px 60px rgba(74, 55, 40, 0.2), 0 0 30px rgba(245, 166, 35, 0.15);
            border-color: rgba(245, 166, 35, 0.3);
        }

        .review-card::before {
            content: '"';
            position: absolute;
            top: 0.5rem;
            right: 1.5rem;
            font-family: var(--font-display);
            font-size: 4rem;
            color: var(--color-golden);
            opacity: 0.3;
            line-height: 1;
            transition: opacity 0.3s ease, transform 0.3s ease;
        }

        .review-card:hover::before {
            opacity: 0.6;
            transform: scale(1.2) rotate(-5deg);
        }

        .review-stars {
            color: var(--color-golden);
            font-size: 1.2rem;
            margin-bottom: 1rem;
        }

        .review-text {
            font-size: 0.95rem;
            color: var(--color-text-light);
            line-height: 1.7;
            margin-bottom: 1.5rem;
        }

        .review-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.85rem;
            color: var(--color-text-muted);
        }

        .review-hours {
            font-weight: 700;
            color: var(--color-forest-green);
        }

        .reviews-cta {
            text-align: center;
            margin-top: 3rem;
            padding-top: 2rem;
            position: relative;
            z-index: 2;
        }

        .reviews-cta p {
            font-size: 1.2rem;
            color: var(--color-text);
            margin-bottom: 1rem;
            font-weight: 500;
        }

        .section-subtitle {
            color: var(--color-text-light);
            font-size: 1.05rem;
            max-width: 600px;
            margin: 0.5rem auto 0;
        }

        /* Roadmap Section */
        .roadmap {
            padding: 6rem 2rem;
            background: var(--color-cream);
        }

        .roadmap-grid {
            max-width: 900px;
            margin: 0 auto;
            display: grid;
            gap: 1.5rem;
        }

        .roadmap-item {
            background: white;
            padding: 1.5rem 2rem;
            border-radius: 16px;
            box-shadow: var(--shadow-soft);
            display: flex;
            gap: 1.5rem;
            align-items: center;
            transition: all 0.3s ease;
        }

        .roadmap-item:hover {
            transform: translateX(8px);
            box-shadow: var(--shadow-medium);
        }

        .roadmap-icon {
            width: 60px;
            height: 60px;
            background: var(--color-cream);
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.8rem;
            flex-shrink: 0;
        }

        .roadmap-content h4 {
            font-family: var(--font-display);
            color: var(--color-earth-brown);
            margin-bottom: 0.3rem;
            font-size: 1.2rem;
        }

        .roadmap-content p {
            color: var(--color-text-light);
            font-size: 0.95rem;
        }

        /* About Section */
        .about {
            padding: 6rem 2rem;
            background: var(--color-warm-white);
        }

        .about-content {
            max-width: 1100px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1.2fr 350px;
            gap: 4rem;
            align-items: start;
        }

        .about-text h2 {
            font-family: var(--font-display);
            font-size: 2.2rem;
            color: var(--color-earth-brown);
            margin-bottom: 1.5rem;
        }

        .about-text p {
            color: var(--color-text-light);
            font-size: 1.05rem;
            margin-bottom: 1.25rem;
            line-height: 1.9;
        }

        .about-closing {
            margin-top: 1.5rem;
            padding-top: 1.5rem;
            border-top: 1px solid rgba(0,0,0,0.1);
            font-style: italic;
        }

        .highlight-text {
            background: linear-gradient(180deg, transparent 60%, var(--color-golden) 60%);
            background-size: 100% 40%;
            background-position: 0 100%;
            background-repeat: no-repeat;
            padding: 0 0.2rem;
        }

        .developer-card {
            background: var(--color-cream);
            padding: 2.5rem 2rem;
            border-radius: 24px;
            text-align: center;
            box-shadow: var(--shadow-medium);
            position: sticky;
            top: 120px;
        }

        .developer-avatar {
            width: 130px;
            height: 130px;
            background: linear-gradient(135deg, var(--color-golden), var(--color-sunset-orange));
            border-radius: 50%;
            margin: 0 auto 1.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 3.5rem;
            box-shadow: 0 8px 25px rgba(245, 166, 35, 0.3);
            overflow: hidden;
        }

        .developer-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
        }

        .developer-avatar:hover {
            box-shadow: 0 12px 35px rgba(245, 166, 35, 0.45);
        }

        .developer-avatar:hover img {
            transform: scale(1.1);
        }

        .developer-card h3 {
            font-family: var(--font-display);
            font-size: 1.6rem;
            color: var(--color-earth-brown);
            margin-bottom: 0.3rem;
        }

        .developer-card .role {
            color: var(--color-forest-green);
            font-weight: 600;
            margin-bottom: 0.5rem;
        }

        .developer-card .company {
            color: var(--color-text-light);
            font-size: 0.95rem;
            margin-bottom: 1.5rem;
        }

        .developer-links {
            display: flex;
            justify-content: center;
            gap: 0.75rem;
        }

        .dev-link {
            width: 45px;
            height: 45px;
            border-radius: 12px;
            background: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            text-decoration: none;
            box-shadow: var(--shadow-soft);
            transition: all 0.3s ease;
        }

        .dev-link:hover {
            transform: translateY(-3px);
            box-shadow: var(--shadow-medium);
        }

        /* Events Section */
        .events {
            padding: 5rem 2rem;
            background: linear-gradient(135deg, var(--color-sunset-orange), var(--color-coral));
            color: white;
        }

        .events-grid {
            max-width: 1000px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 1.5rem;
        }

        .event-card {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            padding: 1.5rem;
            color: var(--color-text);
            position: relative;
            overflow: hidden;
            transition: all 0.3s ease;
        }

        .event-card:hover {
            transform: translateY(-5px);
        }

        .event-badge {
            position: absolute;
            top: 1rem;
            right: 1rem;
            background: linear-gradient(135deg, var(--color-golden), var(--color-sunset-orange));
            color: white;
            padding: 0.25rem 0.7rem;
            border-radius: 20px;
            font-size: 0.7rem;
            font-weight: 700;
            letter-spacing: 0.05em;
        }

        .event-date {
            font-family: var(--font-display);
            font-size: 0.85rem;
            color: var(--color-text-muted);
            margin-bottom: 0.5rem;
        }

        .event-card h4 {
            font-family: var(--font-display);
            font-size: 1.2rem;
            margin-bottom: 0.3rem;
            color: var(--color-text);
        }

        .event-card .location {
            font-size: 0.9rem;
            color: var(--color-text-light);
        }

        /* Community Section */
        .community {
            padding: 5rem 2rem;
            background: white;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .community .section-video-bg {
            opacity: 0;
            object-position: center 55%;
        }

        .community .section-video-bg.video-loaded {
            opacity: 0.35;
        }

        .community .section-video-overlay {
            background: linear-gradient(180deg,
                rgba(255, 255, 255, 0.85) 0%,
                rgba(255, 255, 255, 0.78) 50%,
                rgba(255, 255, 255, 0.85) 100%);
        }

        /* Mountain Divider Section */
        .mountain-divider {
            position: relative;
            height: 400px;
            overflow: hidden;
            background: linear-gradient(180deg, var(--color-warm-white) 0%, var(--color-cream) 100%);
        }

        .mountain-divider .section-video-bg {
            opacity: 0;
            object-position: center 45%;
        }

        .mountain-divider .section-video-bg.video-loaded {
            opacity: 0.7;
        }

        .mountain-divider .section-video-overlay {
            background: linear-gradient(180deg,
                rgba(255, 253, 247, 0.25) 0%,
                rgba(255, 248, 231, 0.05) 50%,
                rgba(255, 253, 247, 0.35) 100%);
        }

        .community-links {
            max-width: 800px;
            margin: 2rem auto 0;
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            justify-content: center;
            position: relative;
            z-index: 2;
        }

        .community-btn {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 1rem 1.5rem;
            background: white;
            color: var(--color-text);
            text-decoration: none;
            font-family: var(--font-display);
            font-weight: 600;
            border-radius: 50px;
            transition: all 0.3s ease;
            box-shadow: var(--shadow-soft);
        }

        .community-btn:hover {
            transform: translateY(-3px);
            box-shadow: var(--shadow-medium);
        }

        .community-btn.discord { background: #5865F2; color: white; }
        .community-btn.twitter { background: #1DA1F2; color: white; }
        .community-btn.youtube { background: #FF0000; color: white; }
        .community-btn.bluesky { background: #0085ff; color: white; }
        .community-btn.tiktok { background: #000000; color: white; }
        .community-btn.default { background: var(--color-cream); }

        /* FAQ Section */
        .faq {
            padding: 5rem 2rem;
            background: var(--color-warm-white);
        }

        .faq-grid {
            max-width: 900px;
            margin: 0 auto;
            display: grid;
            gap: 1rem;
        }

        .faq-item {
            background: white;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: var(--shadow-soft);
        }

        .faq-question {
            width: 100%;
            padding: 1.25rem 1.5rem;
            background: none;
            border: none;
            text-align: left;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-family: var(--font-display);
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--color-earth-brown);
            transition: background 0.3s ease;
        }

        .faq-question:hover {
            background: var(--color-cream);
        }

        .faq-question::after {
            content: '+';
            font-size: 1.5rem;
            font-weight: 400;
            color: var(--color-golden);
            transition: transform 0.3s ease;
        }

        .faq-item.active .faq-question::after {
            transform: rotate(45deg);
        }

        .faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease, padding 0.3s ease;
        }

        .faq-item.active .faq-answer {
            max-height: 300px;
        }

        .faq-answer p {
            padding: 0 1.5rem 1.25rem;
            color: var(--color-text-light);
            line-height: 1.7;
        }

        /* Press Section */
        .press {
            padding: 4rem 2rem;
            background: var(--color-cream);
            text-align: center;
        }

        .press-content {
            max-width: 700px;
            margin: 0 auto;
        }

        .press h2 {
            font-family: var(--font-display);
            font-size: 2rem;
            color: var(--color-earth-brown);
            margin-bottom: 1rem;
        }

        .press p {
            color: var(--color-text-light);
            margin-bottom: 1.5rem;
        }

        .press-buttons {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            justify-content: center;
        }

        /* Featured In / Credibility Section */
        .featured-in {
            padding: 3rem 2rem;
            background: white;
            text-align: center;
            border-top: 1px solid rgba(74, 55, 40, 0.08);
        }

        .featured-in-label {
            font-family: var(--font-display);
            font-size: 0.9rem;
            font-weight: 600;
            color: var(--color-text-muted);
            text-transform: uppercase;
            letter-spacing: 0.1em;
            margin-bottom: 1.5rem;
        }

        .featured-logos {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            gap: 2rem 3rem;
            max-width: 900px;
            margin: 0 auto;
        }

        .featured-item {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.75rem 1.25rem;
            background: var(--color-cream);
            border-radius: 12px;
            font-family: var(--font-display);
            font-weight: 600;
            font-size: 0.95rem;
            color: var(--color-text);
            transition: all 0.3s ease;
        }

        .featured-item:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-soft);
        }

        .featured-item .icon {
            font-size: 1.3rem;
        }

        /* Final CTA Section */
        .final-cta {
            padding: 5rem 2rem;
            background: linear-gradient(135deg, var(--color-forest-green) 0%, #2d5016 100%);
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .final-cta::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
            opacity: 0.5;
        }

        .final-cta-content {
            position: relative;
            z-index: 1;
            max-width: 700px;
            margin: 0 auto;
        }

        .final-cta h2 {
            font-family: var(--font-display);
            font-size: 2.2rem;
            color: white;
            margin-bottom: 1rem;
            text-shadow: 0 2px 10px rgba(0,0,0,0.2);
        }

        .final-cta > .final-cta-content > p {
            color: rgba(255,255,255,0.9);
            font-size: 1.1rem;
            margin-bottom: 2rem;
        }

        .final-cta-buttons {
            display: flex;
            gap: 1rem;
            justify-content: center;
            flex-wrap: wrap;
            margin-bottom: 1.5rem;
        }

        .btn-large {
            padding: 1rem 2rem;
            font-size: 1.1rem;
        }

        .final-cta-note {
            color: rgba(255,255,255,0.7);
            font-size: 0.95rem;
            font-style: italic;
        }

        /* Footer */
        footer {
            padding: 4rem 2rem 2rem;
            background: #3A2D23;
            color: rgba(255, 255, 255, 0.8);
        }

        .footer-content {
            max-width: 1200px;
            margin: 0 auto;
        }

        .footer-top {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            flex-wrap: wrap;
            gap: 2rem;
            margin-bottom: 3rem;
            padding-bottom: 3rem;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .footer-brand {
            max-width: 300px;
        }

        .footer-logo {
            font-family: var(--font-display);
            font-size: 1.8rem;
            font-weight: 700;
            color: white;
            text-decoration: none;
            display: inline-block;
            margin-bottom: 1rem;
        }

        .footer-brand p {
            color: rgba(255, 255, 255, 0.85);
            font-size: 0.95rem;
            line-height: 1.7;
        }

        .footer-links {
            display: flex;
            gap: 4rem;
        }

        .footer-col h4 {
            font-family: var(--font-display);
            font-size: 1rem;
            font-weight: 700;
            margin-bottom: 1rem;
            color: var(--color-golden);
        }

        .footer-col ul {
            list-style: none;
        }

        .footer-col a {
            color: rgba(255, 255, 255, 0.9);
            text-decoration: none;
            font-size: 0.95rem;
            display: block;
            padding: 0.3rem 0;
            transition: color 0.3s ease;
        }

        .footer-col a:hover {
            color: white;
        }

        .footer-bottom {
            text-align: center;
        }

        .footer-bottom p {
            font-size: 0.9rem;
            margin-bottom: 0.5rem;
        }

        .footer-legal {
            font-size: 0.8rem;
            opacity: 0.75;
            max-width: 600px;
            margin: 0.5rem auto 0;
        }

        .footer-secrets {
            margin-top: 1.5rem;
            font-size: 0.85rem;
            opacity: 0.7;
            cursor: pointer;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }

        .footer-secrets:hover {
            opacity: 0.8;
            transform: scale(1.05);
        }

        .secrets-icon {
            display: inline-block;
            animation: subtlePulse 3s ease-in-out infinite;
        }

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

        /* Secrets Modal */
        .secrets-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.85);
            backdrop-filter: blur(10px);
            z-index: 100000;
            overflow-y: auto;
            animation: modalFadeIn 0.3s ease;
        }

        .secrets-modal.active {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        @keyframes modalFadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        .secrets-modal-content {
            background: linear-gradient(145deg, #1a1a2e 0%, #16213e 50%, #0f0f23 100%);
            border-radius: 24px;
            padding: 2.5rem;
            max-width: 900px;
            width: 90%;
            max-height: 85vh;
            overflow-y: auto;
            position: relative;
            box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5),
                        0 0 100px rgba(245, 166, 35, 0.1),
                        inset 0 1px 0 rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.1);
            animation: modalSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        @keyframes modalSlideIn {
            from { transform: scale(0.9) translateY(20px); opacity: 0; }
            to { transform: scale(1) translateY(0); opacity: 1; }
        }

        .secrets-modal-close {
            position: absolute;
            top: 1rem;
            right: 1.5rem;
            background: none;
            border: none;
            font-size: 2rem;
            color: rgba(255, 255, 255, 0.6);
            cursor: pointer;
            transition: all 0.2s ease;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
        }

        .secrets-modal-close:hover {
            color: white;
            background: rgba(255, 255, 255, 0.1);
            transform: rotate(90deg);
        }

        .secrets-title {
            font-family: var(--font-display);
            font-size: 2rem;
            color: var(--color-golden);
            text-align: center;
            margin-bottom: 0.5rem;
            text-shadow: 0 0 30px rgba(245, 166, 35, 0.5);
        }

        .secrets-subtitle {
            text-align: center;
            color: rgba(255, 255, 255, 0.7);
            margin-bottom: 2rem;
            font-size: 1rem;
        }

        .secrets-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 1.5rem;
        }

        .secrets-category {
            background: rgba(255, 255, 255, 0.03);
            border-radius: 16px;
            padding: 1.25rem;
            border: 1px solid rgba(255, 255, 255, 0.05);
        }

        .secrets-category h3 {
            font-family: var(--font-display);
            font-size: 1rem;
            color: var(--color-lavender);
            margin-bottom: 1rem;
            padding-bottom: 0.5rem;
            border-bottom: 1px solid rgba(184, 169, 232, 0.2);
        }

        .secret-cmd {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.6rem 0.75rem;
            margin-bottom: 0.5rem;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .secret-cmd:hover {
            background: rgba(245, 166, 35, 0.15);
            transform: translateX(5px);
        }

        .secret-cmd:active {
            transform: translateX(5px) scale(0.98);
        }

        .cmd-key {
            background: linear-gradient(135deg, var(--color-golden), var(--color-sunset-orange));
            color: white;
            padding: 0.3rem 0.6rem;
            border-radius: 6px;
            font-family: 'Consolas', 'Monaco', monospace;
            font-size: 0.8rem;
            font-weight: 600;
            white-space: nowrap;
            box-shadow: 0 2px 8px rgba(245, 166, 35, 0.3);
        }

        .cmd-desc {
            color: rgba(255, 255, 255, 0.8);
            font-size: 0.85rem;
        }

        .secrets-footer-note {
            text-align: center;
            color: rgba(255, 255, 255, 0.5);
            font-size: 0.85rem;
            margin-top: 2rem;
            padding-top: 1.5rem;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }

        @media (max-width: 600px) {
            .secrets-modal-content {
                padding: 1.5rem;
                border-radius: 16px;
            }

            .secrets-title {
                font-size: 1.5rem;
            }

            .secrets-grid {
                grid-template-columns: 1fr;
            }

            .secret-cmd {
                flex-wrap: wrap;
            }
        }

        /* ========================================
           CORNUCOPIA CRITTERS - BEAUTIFUL MEADOW
           ======================================== */
        .battle-arena {
            position: relative;
            width: 100%;
            height: 1050px;
            min-height: 100vh;
            overflow: hidden;
            background: linear-gradient(180deg, #87CEEB 0%, #B0E0E6 50%, #98FB98 100%);
        }

        .arena-background {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 0;
        }

        /* Video background layers */
        .arena-video-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            pointer-events: none;
        }

        /* Arena single background - full width coverage */
        .arena-single-bg {
            z-index: 0;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: 75% 20%;
            opacity: 0;
            transition: opacity 0.8s ease;
        }

        .arena-single-bg.video-loaded {
            opacity: 1;
        }

        .arena-header {
            position: absolute;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 10;
            text-align: center;
        }

        .arena-title {
            background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(245,245,255,0.9));
            padding: 12px 24px;
            border-radius: 30px;
            border: 3px solid rgba(180,140,200,0.5);
            box-shadow:
                0 8px 32px rgba(150,120,180,0.3),
                0 2px 8px rgba(0,0,0,0.1),
                inset 0 2px 4px rgba(255,255,255,0.8);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            backdrop-filter: blur(10px);
        }

        .arena-title-icon {
            font-size: 1.5rem;
            animation: pawBounce 2s ease-in-out infinite;
        }

        .arena-title-icon:last-child {
            animation-delay: 0.3s;
        }

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

        .arena-title-text {
            font-family: var(--font-display);
            font-size: 1.4rem;
            font-weight: 700;
            background: linear-gradient(135deg, #8B5A2B, #CD853F, #DEB887);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            letter-spacing: 1px;
        }

        .arena-subtitle {
            font-size: 0.95rem;
            color: #4a5568;
            margin-top: 0.75rem;
            font-style: italic;
            font-weight: 600;
            background: rgba(255,255,255,0.85);
            padding: 8px 20px;
            border-radius: 20px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }

        .arena-floor {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            width: 100%;
            height: 70%;
            pointer-events: auto;
            display: flex;
            align-items: flex-end;
            justify-content: center;
        }

        /* ========================================
           PET COMPANION SYSTEM STYLES
           ======================================== */

        /* ========================================
           CORNUCOPIA CRITTERS - DYNAMIC ENVIRONMENT
           ======================================== */
        .battleground {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 200px;
            z-index: 9989;
            pointer-events: none;
            overflow: hidden;
            transition: all 1.5s ease-in-out;
        }

        /* Hide decorative biome icons - they appear without explanation */
        .battleground::before,
        .battleground::after,
        .battleground [class*="easter-egg"] {
            display: none !important;
        }

        /* Battleground layers */
        .battleground-bg {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100%;
            transition: all 1.5s ease-in-out;
        }

        .battleground-ground {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 60px;
            transition: all 1.5s ease-in-out;
        }

        .battleground-particles {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        .battleground-weather {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }

        /* Biome scenery layer for decorations */
        .battleground-scenery {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }

        /* Easter egg container */
        .biome-easter-egg {
            position: absolute;
            pointer-events: auto;
            cursor: pointer;
            opacity: 0;
            transition: opacity 0.5s ease;
            z-index: 10;
        }
        .biome-easter-egg.visible {
            opacity: 1;
            animation: easterEggBounce 2s ease-in-out infinite;
        }
        @keyframes easterEggBounce {
            0%, 100% { transform: translateY(0) scale(1); }
            50% { transform: translateY(-5px) scale(1.1); }
        }

        .bg-particle {
            position: absolute;
            pointer-events: none;
            opacity: 0.7;
            animation: floatParticle 8s ease-in-out infinite;
        }

        @keyframes floatParticle {
            0%, 100% { transform: translateY(0) translateX(0) rotate(0deg); opacity: 0.7; }
            25% { transform: translateY(-20px) translateX(10px) rotate(90deg); opacity: 0.9; }
            50% { transform: translateY(-30px) translateX(-5px) rotate(180deg); opacity: 0.6; }
            75% { transform: translateY(-15px) translateX(-15px) rotate(270deg); opacity: 0.8; }
        }

        /* ============================================
           BIOME: MEADOW - Sunny Paradise
           Easter Egg: Hidden Rainbow (click flowers)
           ============================================ */
        .battleground.biome-meadow .battleground-bg {
            background:
                radial-gradient(ellipse at 80% 20%, rgba(255,255,200,0.4) 0%, transparent 50%),
                linear-gradient(180deg,
                    rgba(135, 206, 250, 0) 0%,
                    rgba(135, 206, 250, 0.4) 30%,
                    rgba(144, 238, 144, 0.6) 60%,
                    rgba(34, 139, 34, 0.9) 100%);
        }
        .battleground.biome-meadow .battleground-ground {
            background:
                repeating-linear-gradient(90deg,
                    transparent 0px, transparent 40px,
                    rgba(255,255,255,0.1) 40px, rgba(255,255,255,0.1) 42px),
                linear-gradient(180deg, #5a9c3a 0%, #3d7a24 40%, #2d5a16 100%);
            border-top: 4px solid #7bc14a;
            box-shadow: inset 0 5px 15px rgba(0,0,0,0.2);
        }
        .battleground.biome-meadow::before {
            content: '🌻 🌷 🌼 🌸 🌺';
            position: absolute;
            bottom: 55px;
            left: 10%;
            font-size: 20px;
            letter-spacing: 30px;
            opacity: 0.9;
            animation: flowerSway 3s ease-in-out infinite;
        }
        .battleground.biome-meadow::after {
            content: '🦋';
            position: absolute;
            bottom: 100px;
            animation: butterflyFloat 8s ease-in-out infinite;
            font-size: 24px;
        }
        @keyframes flowerSway {
            0%, 100% { transform: rotate(-2deg); }
            50% { transform: rotate(2deg); }
        }
        @keyframes butterflyFloat {
            0% { left: -5%; bottom: 80px; }
            25% { bottom: 120px; }
            50% { left: 50%; bottom: 90px; }
            75% { bottom: 130px; }
            100% { left: 105%; bottom: 100px; }
        }
        /* Meadow Rainbow Easter Egg */
        .battleground.biome-meadow .rainbow-easter-egg {
            position: absolute;
            top: 10px;
            left: 20%;
            width: 200px;
            height: 100px;
            background: conic-gradient(from 180deg at 50% 100%,
                red, orange, yellow, green, blue, indigo, violet, transparent 50%);
            border-radius: 100px 100px 0 0;
            opacity: 0;
            transition: opacity 2s ease;
            filter: blur(2px);
        }
        .battleground.biome-meadow.show-rainbow .rainbow-easter-egg {
            opacity: 0.6;
            animation: rainbowShimmer 3s ease-in-out infinite;
        }
        @keyframes rainbowShimmer {
            0%, 100% { filter: blur(2px) brightness(1); }
            50% { filter: blur(1px) brightness(1.2); }
        }

        /* ============================================
           BIOME: FOREST - Enchanted Woods
           Easter Egg: Hidden Fairy (appears rarely)
           ============================================ */
        .battleground.biome-forest .battleground-bg {
            background:
                radial-gradient(ellipse at 20% 80%, rgba(100,200,100,0.2) 0%, transparent 40%),
                radial-gradient(ellipse at 80% 60%, rgba(50,100,50,0.3) 0%, transparent 50%),
                linear-gradient(180deg,
                    rgba(20, 40, 20, 0) 0%,
                    rgba(15, 35, 15, 0.6) 30%,
                    rgba(10, 30, 10, 0.85) 60%,
                    rgba(5, 20, 5, 0.98) 100%);
        }
        .battleground.biome-forest .battleground-ground {
            background:
                repeating-linear-gradient(90deg,
                    transparent 0px, transparent 60px,
                    rgba(0,0,0,0.1) 60px, rgba(0,0,0,0.1) 62px),
                linear-gradient(180deg, #2a4a2a 0%, #1a3a1a 50%, #0d250d 100%);
            border-top: 4px solid #3d6b3d;
            box-shadow: inset 0 8px 25px rgba(0,0,0,0.5);
        }
        .battleground.biome-forest::before {
            content: '🌲 🍄 🌳 🍂 🌲';
            position: absolute;
            bottom: 50px;
            left: 5%;
            font-size: 28px;
            letter-spacing: 25px;
            opacity: 0.85;
            filter: drop-shadow(0 5px 10px rgba(0,0,0,0.5));
        }
        .battleground.biome-forest::after {
            content: '🦉';
            position: absolute;
            top: 30px;
            right: 15%;
            font-size: 22px;
            animation: owlBlink 4s ease-in-out infinite;
        }
        @keyframes owlBlink {
            0%, 45%, 55%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.5; transform: scale(0.95); }
        }
        /* Forest Fairy Easter Egg */
        .battleground.biome-forest .fairy-easter-egg {
            position: absolute;
            bottom: 80px;
            font-size: 18px;
            animation: fairyDance 6s ease-in-out infinite;
            filter: drop-shadow(0 0 10px rgba(150,255,150,0.8));
        }
        @keyframes fairyDance {
            0% { left: 70%; opacity: 0; transform: scale(0.5); }
            20% { opacity: 1; transform: scale(1); }
            50% { left: 75%; bottom: 110px; }
            80% { opacity: 1; }
            100% { left: 80%; opacity: 0; transform: scale(0.5); }
        }

        /* ============================================
           BIOME: DESERT - Scorching Sands
           Easter Egg: Hidden Oasis (shimmers appear)
           ============================================ */
        .battleground.biome-desert .battleground-bg {
            background:
                radial-gradient(ellipse at 85% 30%, rgba(255,255,200,0.8) 0%, transparent 30%),
                radial-gradient(ellipse at 30% 70%, rgba(255,200,150,0.3) 0%, transparent 40%),
                linear-gradient(180deg,
                    rgba(255, 200, 120, 0) 0%,
                    rgba(255, 180, 100, 0.5) 30%,
                    rgba(230, 160, 90, 0.7) 60%,
                    rgba(200, 140, 80, 0.95) 100%);
        }
        .battleground.biome-desert .battleground-ground {
            background:
                repeating-linear-gradient(100deg,
                    rgba(255,255,255,0.05) 0px, rgba(255,255,255,0.05) 100px,
                    transparent 100px, transparent 200px),
                linear-gradient(180deg, #e8c896 0%, #d4a870 30%, #c49660 60%, #a87850 100%);
            border-top: 3px solid #f0d8a8;
            box-shadow: inset 0 -10px 30px rgba(255,200,100,0.3);
        }
        .battleground.biome-desert::before {
            content: '🌵 🏜️ 🦂 🐪 🌵';
            position: absolute;
            bottom: 55px;
            left: 8%;
            font-size: 24px;
            letter-spacing: 35px;
            opacity: 0.9;
        }
        .battleground.biome-desert::after {
            content: '☀️';
            position: absolute;
            top: 15px;
            right: 10%;
            font-size: 40px;
            animation: sunPulse 4s ease-in-out infinite;
            filter: drop-shadow(0 0 20px rgba(255,200,0,0.8));
        }
        @keyframes sunPulse {
            0%, 100% { transform: scale(1); filter: drop-shadow(0 0 20px rgba(255,200,0,0.8)); }
            50% { transform: scale(1.1); filter: drop-shadow(0 0 40px rgba(255,200,0,1)); }
        }
        /* Desert Heat Waves */
        .battleground.biome-desert .battleground-weather {
            background: repeating-linear-gradient(0deg,
                transparent 0px, transparent 3px,
                rgba(255,255,255,0.03) 3px, rgba(255,255,255,0.03) 6px);
            animation: heatWave 2s ease-in-out infinite;
        }
        @keyframes heatWave {
            0%, 100% { transform: translateY(0) skewX(0deg); }
            50% { transform: translateY(-2px) skewX(0.5deg); }
        }
        /* Desert Oasis Easter Egg */
        .battleground.biome-desert .oasis-easter-egg {
            position: absolute;
            bottom: 60px;
            left: 60%;
            font-size: 16px;
            opacity: 0;
            transition: opacity 1s ease;
        }
        .battleground.biome-desert.show-oasis .oasis-easter-egg {
            opacity: 1;
            animation: oasisShimmer 3s ease-in-out infinite;
        }
        @keyframes oasisShimmer {
            0%, 100% { filter: blur(1px); transform: scale(1); }
            50% { filter: blur(0px); transform: scale(1.05); }
        }

        /* ============================================
           BIOME: SNOW - Frozen Wonderland
           Easter Egg: Aurora Borealis (rare event)
           ============================================ */
        .battleground.biome-snow .battleground-bg {
            background:
                radial-gradient(ellipse at 30% 20%, rgba(200,230,255,0.5) 0%, transparent 40%),
                linear-gradient(180deg,
                    rgba(180, 210, 240, 0) 0%,
                    rgba(200, 220, 250, 0.5) 30%,
                    rgba(220, 235, 255, 0.7) 60%,
                    rgba(240, 248, 255, 0.95) 100%);
        }
        .battleground.biome-snow .battleground-ground {
            background:
                repeating-linear-gradient(90deg,
                    rgba(255,255,255,0.3) 0px, rgba(255,255,255,0.3) 2px,
                    transparent 2px, transparent 20px),
                linear-gradient(180deg, #ffffff 0%, #e8f4ff 30%, #d0e8ff 60%, #b8d8f0 100%);
            border-top: 4px solid #ffffff;
            box-shadow: inset 0 5px 20px rgba(200,220,255,0.5), 0 0 30px rgba(255,255,255,0.3);
        }
        .battleground.biome-snow::before {
            content: '🎄 ⛄ 🏔️ 🦌 ❄️';
            position: absolute;
            bottom: 55px;
            left: 10%;
            font-size: 26px;
            letter-spacing: 30px;
            opacity: 0.95;
            filter: drop-shadow(0 3px 6px rgba(0,0,0,0.2));
        }
        .battleground.biome-snow::after {
            content: '🐧';
            position: absolute;
            bottom: 65px;
            right: 20%;
            font-size: 22px;
            animation: penguinWaddle 2s ease-in-out infinite;
        }
        @keyframes penguinWaddle {
            0%, 100% { transform: rotate(-5deg); }
            50% { transform: rotate(5deg); }
        }
        /* Enhanced Snowfall */
        .battleground.biome-snow .weather-snow {
            background-image:
                url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50'%3E%3Ccircle cx='5' cy='5' r='2' fill='white'/%3E%3Ccircle cx='25' cy='20' r='3' fill='white'/%3E%3Ccircle cx='45' cy='35' r='1.5' fill='white'/%3E%3Ccircle cx='15' cy='45' r='2.5' fill='white'/%3E%3C/svg%3E");
            animation: snowFall 4s linear infinite;
        }
        @keyframes snowFall {
            0% { background-position: 0 -50px; }
            100% { background-position: 50px 150px; }
        }
        /* Snow Aurora Easter Egg */
        .battleground.biome-snow .aurora-easter-egg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 80px;
            background: linear-gradient(180deg,
                rgba(0,255,150,0.3) 0%,
                rgba(0,200,255,0.2) 30%,
                rgba(150,0,255,0.2) 60%,
                transparent 100%);
            opacity: 0;
            animation: auroraDance 8s ease-in-out infinite;
        }
        .battleground.biome-snow.show-aurora .aurora-easter-egg {
            opacity: 1;
        }
        @keyframes auroraDance {
            0%, 100% { transform: translateX(-10%) skewX(-5deg); }
            50% { transform: translateX(10%) skewX(5deg); }
        }

        /* ============================================
           BIOME: SWAMP - Mysterious Marshlands
           Easter Egg: Will-o-Wisp (glowing orbs)
           ============================================ */
        .battleground.biome-swamp .battleground-bg {
            background:
                radial-gradient(ellipse at 20% 90%, rgba(100,150,50,0.3) 0%, transparent 40%),
                radial-gradient(ellipse at 70% 70%, rgba(80,100,40,0.4) 0%, transparent 50%),
                linear-gradient(180deg,
                    rgba(60, 80, 50, 0) 0%,
                    rgba(50, 70, 40, 0.6) 30%,
                    rgba(40, 60, 30, 0.8) 60%,
                    rgba(30, 45, 20, 0.98) 100%);
        }
        .battleground.biome-swamp .battleground-ground {
            background:
                repeating-linear-gradient(90deg,
                    rgba(0,50,0,0.2) 0px, rgba(0,50,0,0.2) 30px,
                    transparent 30px, transparent 60px),
                linear-gradient(180deg, #3a5a30 0%, #2a4a20 40%, #1a3a15 70%, #0d2a0a 100%);
            border-top: 4px solid #5a8a4a;
            box-shadow: inset 0 8px 30px rgba(0,0,0,0.6);
        }
        .battleground.biome-swamp::before {
            content: '🌿 🐸 🪷 🦎 🌾';
            position: absolute;
            bottom: 55px;
            left: 8%;
            font-size: 24px;
            letter-spacing: 28px;
            opacity: 0.85;
            filter: drop-shadow(0 3px 8px rgba(0,0,0,0.5));
        }
        .battleground.biome-swamp::after {
            content: '🐊';
            position: absolute;
            bottom: 45px;
            right: 25%;
            font-size: 28px;
            animation: gatorLurk 5s ease-in-out infinite;
        }
        @keyframes gatorLurk {
            0%, 70%, 100% { transform: translateY(0); opacity: 0.7; }
            75%, 95% { transform: translateY(-5px); opacity: 1; }
        }
        /* Swamp Mist */
        .battleground.biome-swamp .weather-fireflies {
            background-image:
                url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Ccircle cx='20' cy='30' r='4' fill='%2390ff90'/%3E%3Ccircle cx='70' cy='60' r='3' fill='%23ffff80'/%3E%3Ccircle cx='45' cy='20' r='3.5' fill='%2380ffff'/%3E%3Ccircle cx='85' cy='80' r='2.5' fill='%23ffff60'/%3E%3C/svg%3E");
            animation: fireflyGlow 5s ease-in-out infinite;
            filter: blur(1px);
        }
        @keyframes fireflyGlow {
            0%, 100% { opacity: 0.3; }
            25% { opacity: 0.8; }
            50% { opacity: 0.4; }
            75% { opacity: 0.9; }
        }
        /* Swamp Will-o-Wisp Easter Egg */
        .battleground.biome-swamp .wisp-easter-egg {
            position: absolute;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(150,255,200,0.9) 0%, rgba(100,200,150,0.5) 50%, transparent 70%);
            filter: blur(3px);
            animation: wispFloat 10s ease-in-out infinite;
        }
        @keyframes wispFloat {
            0% { left: 10%; bottom: 80px; opacity: 0; }
            10% { opacity: 0.8; }
            50% { left: 40%; bottom: 120px; }
            90% { opacity: 0.8; }
            100% { left: 70%; bottom: 70px; opacity: 0; }
        }

        /* ============================================
           BIOME: VOLCANIC - Infernal Wasteland
           Easter Egg: Phoenix Rising (rare spawn)
           ============================================ */
        .battleground.biome-volcanic .battleground-bg {
            background:
                radial-gradient(ellipse at 30% 100%, rgba(255,100,0,0.4) 0%, transparent 50%),
                radial-gradient(ellipse at 70% 80%, rgba(255,50,0,0.3) 0%, transparent 40%),
                linear-gradient(180deg,
                    rgba(60, 20, 10, 0) 0%,
                    rgba(80, 30, 15, 0.6) 30%,
                    rgba(100, 40, 20, 0.8) 60%,
                    rgba(50, 15, 10, 0.98) 100%);
        }
        .battleground.biome-volcanic .battleground-ground {
            background:
                repeating-linear-gradient(90deg,
                    rgba(255,100,0,0.2) 0px, rgba(255,100,0,0.2) 5px,
                    transparent 5px, transparent 50px),
                linear-gradient(180deg, #4a2020 0%, #3a1515 40%, #2a0a0a 70%, #1a0505 100%);
            border-top: 5px solid #ff4500;
            box-shadow:
                inset 0 5px 30px rgba(255, 69, 0, 0.5),
                0 0 40px rgba(255, 100, 0, 0.3);
            animation: lavaGlow 2s ease-in-out infinite;
        }
        @keyframes lavaGlow {
            0%, 100% { box-shadow: inset 0 5px 30px rgba(255, 69, 0, 0.5), 0 0 40px rgba(255, 100, 0, 0.3); }
            50% { box-shadow: inset 0 8px 40px rgba(255, 100, 0, 0.7), 0 0 60px rgba(255, 150, 0, 0.5); }
        }
        .battleground.biome-volcanic::before {
            content: '🌋 🔥 💀 🪨 🔥';
            position: absolute;
            bottom: 55px;
            left: 10%;
            font-size: 26px;
            letter-spacing: 30px;
            opacity: 0.9;
            filter: drop-shadow(0 0 10px rgba(255,100,0,0.8));
        }
        .battleground.biome-volcanic::after {
            content: '🐉';
            position: absolute;
            top: 20px;
            right: 15%;
            font-size: 35px;
            animation: dragonBreath 3s ease-in-out infinite;
            filter: drop-shadow(0 0 15px rgba(255,50,0,0.8));
        }
        @keyframes dragonBreath {
            0%, 70%, 100% { transform: scale(1); filter: drop-shadow(0 0 15px rgba(255,50,0,0.8)); }
            75%, 85% { transform: scale(1.1); filter: drop-shadow(0 0 25px rgba(255,100,0,1)); }
        }
        /* Enhanced Embers */
        .battleground.biome-volcanic .weather-embers {
            background-image:
                url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='80'%3E%3Ccircle cx='10' cy='15' r='3' fill='%23ff4500'/%3E%3Ccircle cx='40' cy='40' r='2' fill='%23ff6b00'/%3E%3Ccircle cx='25' cy='65' r='2.5' fill='%23ffa500'/%3E%3Ccircle cx='55' cy='20' r='1.5' fill='%23ffcc00'/%3E%3C/svg%3E");
            animation: embersRise 3s ease-out infinite;
        }
        @keyframes embersRise {
            0% { background-position: 0 100px; opacity: 1; }
            100% { background-position: 30px -50px; opacity: 0.3; }
        }
        /* Phoenix Easter Egg */
        .battleground.biome-volcanic .phoenix-easter-egg {
            position: absolute;
            font-size: 40px;
            filter: drop-shadow(0 0 20px rgba(255,150,0,1));
            animation: phoenixRise 8s ease-in-out infinite;
        }
        @keyframes phoenixRise {
            0% { bottom: 40px; left: 30%; opacity: 0; transform: scale(0.5) rotate(-10deg); }
            30% { opacity: 1; transform: scale(1) rotate(0deg); }
            50% { bottom: 140px; left: 50%; }
            70% { opacity: 1; }
            100% { bottom: 200px; left: 70%; opacity: 0; transform: scale(1.2) rotate(10deg); }
        }

        /* ============================================
           BIOME: CAVE - Crystal Caverns
           Easter Egg: Glowing Treasure Chest
           ============================================ */
        .battleground.biome-cave .battleground-bg {
            background:
                radial-gradient(ellipse at 20% 60%, rgba(150,100,255,0.15) 0%, transparent 40%),
                radial-gradient(ellipse at 80% 40%, rgba(100,200,255,0.1) 0%, transparent 35%),
                radial-gradient(ellipse at 50% 90%, rgba(200,150,255,0.15) 0%, transparent 45%),
                linear-gradient(180deg,
                    rgba(25, 25, 40, 0) 0%,
                    rgba(30, 30, 50, 0.7) 30%,
                    rgba(25, 25, 45, 0.9) 60%,
                    rgba(15, 15, 30, 0.98) 100%);
        }
        .battleground.biome-cave .battleground-ground {
            background:
                repeating-linear-gradient(90deg,
                    rgba(150,100,255,0.1) 0px, rgba(150,100,255,0.1) 3px,
                    transparent 3px, transparent 40px),
                linear-gradient(180deg, #3a3a5a 0%, #2a2a4a 40%, #1a1a3a 70%, #0d0d2a 100%);
            border-top: 4px solid #6a5acd;
            box-shadow: inset 0 5px 25px rgba(100,100,200,0.3);
        }
        .battleground.biome-cave::before {
            content: '💎 🦇 💠 🔮 ⚗️';
            position: absolute;
            bottom: 55px;
            left: 8%;
            font-size: 24px;
            letter-spacing: 28px;
            opacity: 0.9;
            animation: crystalGlow 3s ease-in-out infinite;
        }
        @keyframes crystalGlow {
            0%, 100% { filter: drop-shadow(0 0 5px rgba(150,100,255,0.5)); }
            50% { filter: drop-shadow(0 0 15px rgba(150,100,255,0.9)); }
        }
        .battleground.biome-cave::after {
            content: '🕯️';
            position: absolute;
            bottom: 80px;
            right: 20%;
            font-size: 20px;
            animation: candleFlicker 0.5s ease-in-out infinite;
        }
        @keyframes candleFlicker {
            0%, 100% { opacity: 0.8; transform: scale(1); }
            50% { opacity: 1; transform: scale(1.05); }
        }
        /* Crystal Shimmer Effect */
        .battleground.biome-cave .weather-fog {
            background:
                radial-gradient(circle at 30% 50%, rgba(150,100,255,0.2) 0%, transparent 20%),
                radial-gradient(circle at 70% 30%, rgba(100,200,255,0.15) 0%, transparent 25%),
                radial-gradient(circle at 50% 80%, rgba(200,100,255,0.2) 0%, transparent 30%);
            animation: crystalShimmer 5s ease-in-out infinite;
        }
        @keyframes crystalShimmer {
            0%, 100% { opacity: 0.5; transform: scale(1); }
            50% { opacity: 0.8; transform: scale(1.05); }
        }
        /* Cave Treasure Easter Egg */
        .battleground.biome-cave .treasure-easter-egg {
            position: absolute;
            bottom: 50px;
            font-size: 28px;
            filter: drop-shadow(0 0 15px rgba(255,215,0,0.8));
            animation: treasureGlow 2s ease-in-out infinite;
        }
        @keyframes treasureGlow {
            0%, 100% { filter: drop-shadow(0 0 10px rgba(255,215,0,0.6)); transform: scale(1); }
            50% { filter: drop-shadow(0 0 25px rgba(255,215,0,1)); transform: scale(1.1); }
        }

        /* ============================================
           BIOME: OCEAN - Underwater Kingdom
           Easter Egg: Swimming Mermaid
           ============================================ */
        .battleground.biome-ocean .battleground-bg {
            background:
                radial-gradient(ellipse at 80% 30%, rgba(100,200,255,0.3) 0%, transparent 40%),
                radial-gradient(ellipse at 20% 70%, rgba(0,150,200,0.3) 0%, transparent 50%),
                linear-gradient(180deg,
                    rgba(0, 80, 120, 0) 0%,
                    rgba(0, 100, 150, 0.5) 30%,
                    rgba(0, 80, 130, 0.75) 60%,
                    rgba(0, 50, 100, 0.95) 100%);
        }
        .battleground.biome-ocean .battleground-ground {
            background:
                repeating-linear-gradient(90deg,
                    rgba(255,255,255,0.05) 0px, rgba(255,255,255,0.05) 2px,
                    transparent 2px, transparent 30px),
                linear-gradient(180deg, #1a6080 0%, #0d4a6a 40%, #0a3a5a 70%, #052a4a 100%);
            border-top: 4px solid #3498db;
            box-shadow: inset 0 10px 40px rgba(0,100,150,0.5);
        }
        .battleground.biome-ocean::before {
            content: '🐠 🪸 🐙 🦀 🐚';
            position: absolute;
            bottom: 55px;
            left: 10%;
            font-size: 24px;
            letter-spacing: 30px;
            opacity: 0.9;
            animation: oceanSway 4s ease-in-out infinite;
        }
        @keyframes oceanSway {
            0%, 100% { transform: translateX(0) rotate(-1deg); }
            50% { transform: translateX(5px) rotate(1deg); }
        }
        .battleground.biome-ocean::after {
            content: '🐋';
            position: absolute;
            font-size: 50px;
            animation: whaleSwin 15s ease-in-out infinite;
            opacity: 0.6;
        }
        @keyframes whaleSwin {
            0% { left: -15%; bottom: 60px; }
            50% { bottom: 90px; }
            100% { left: 110%; bottom: 70px; }
        }
        /* Ocean Waves */
        .battleground.biome-ocean .weather-bubbles {
            background-image:
                url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='100'%3E%3Ccircle cx='10' cy='20' r='5' fill='none' stroke='%2380d4ff' stroke-width='1' opacity='0.6'/%3E%3Ccircle cx='40' cy='50' r='4' fill='none' stroke='%2380d4ff' stroke-width='1' opacity='0.5'/%3E%3Ccircle cx='25' cy='80' r='6' fill='none' stroke='%2380d4ff' stroke-width='1' opacity='0.4'/%3E%3Ccircle cx='50' cy='30' r='3' fill='none' stroke='%23a0e4ff' stroke-width='1' opacity='0.5'/%3E%3C/svg%3E");
            animation: bubblesFloat 5s ease-in-out infinite;
        }
        @keyframes bubblesFloat {
            0% { background-position: 0 100px; }
            100% { background-position: 20px -50px; }
        }
        /* Ocean Mermaid Easter Egg */
        .battleground.biome-ocean .mermaid-easter-egg {
            position: absolute;
            font-size: 30px;
            filter: drop-shadow(0 0 10px rgba(100,200,255,0.8));
            animation: mermaidSwim 12s ease-in-out infinite;
        }
        @keyframes mermaidSwim {
            0% { left: -10%; bottom: 70px; opacity: 0; transform: scaleX(1); }
            10% { opacity: 1; }
            45% { bottom: 100px; }
            50% { left: 50%; transform: scaleX(1); }
            55% { transform: scaleX(-1); }
            90% { opacity: 1; }
            100% { left: 110%; bottom: 80px; opacity: 0; transform: scaleX(-1); }
        }

        /* ============================================
           BIOME: NIGHT - Eternal Darkness
           Easter Egg: Shooting Star (wish upon it!)
           ============================================ */
        .battleground.biome-night .battleground-bg {
            background:
                radial-gradient(ellipse at 75% 25%, rgba(255,255,200,0.15) 0%, transparent 30%),
                radial-gradient(ellipse at 20% 40%, rgba(100,100,200,0.1) 0%, transparent 40%),
                linear-gradient(180deg,
                    rgba(5, 5, 20, 0) 0%,
                    rgba(10, 10, 35, 0.6) 30%,
                    rgba(15, 15, 45, 0.85) 60%,
                    rgba(8, 8, 25, 0.98) 100%);
        }
        .battleground.biome-night .battleground-ground {
            background:
                repeating-linear-gradient(90deg,
                    rgba(50,50,100,0.1) 0px, rgba(50,50,100,0.1) 2px,
                    transparent 2px, transparent 40px),
                linear-gradient(180deg, #1a1a3a 0%, #15152e 40%, #101028 70%, #080818 100%);
            border-top: 4px solid #3a3a6a;
            box-shadow: inset 0 5px 25px rgba(50,50,100,0.4);
        }
        .battleground.biome-night::before {
            content: '🌙 🦉 🐺 🏚️ 👻';
            position: absolute;
            bottom: 55px;
            left: 10%;
            font-size: 24px;
            letter-spacing: 28px;
            opacity: 0.85;
            filter: drop-shadow(0 0 8px rgba(150,150,255,0.5));
        }
        .battleground.biome-night::after {
            content: '🌕';
            position: absolute;
            top: 15px;
            right: 15%;
            font-size: 45px;
            animation: moonGlow 6s ease-in-out infinite;
            filter: drop-shadow(0 0 30px rgba(255,255,200,0.8));
        }
        @keyframes moonGlow {
            0%, 100% { filter: drop-shadow(0 0 20px rgba(255,255,200,0.6)); transform: scale(1); }
            50% { filter: drop-shadow(0 0 40px rgba(255,255,200,1)); transform: scale(1.05); }
        }
        /* Twinkling Stars */
        .battleground.biome-night .weather-stars {
            background-image:
                url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='100'%3E%3Ccircle cx='20' cy='20' r='1.5' fill='white'/%3E%3Ccircle cx='80' cy='35' r='1' fill='white'/%3E%3Ccircle cx='50' cy='60' r='1.8' fill='white'/%3E%3Ccircle cx='120' cy='25' r='1.2' fill='white'/%3E%3Ccircle cx='140' cy='70' r='0.8' fill='white'/%3E%3Ccircle cx='30' cy='80' r='1.3' fill='white'/%3E%3Ccircle cx='100' cy='55' r='1' fill='white'/%3E%3C/svg%3E");
            animation: starsTwinkle 4s ease-in-out infinite;
        }
        @keyframes starsTwinkle {
            0%, 100% { opacity: 0.7; }
            25% { opacity: 1; }
            50% { opacity: 0.6; }
            75% { opacity: 0.9; }
        }
        /* Shooting Star Easter Egg */
        .battleground.biome-night .shootingstar-easter-egg {
            position: absolute;
            width: 4px;
            height: 4px;
            background: white;
            border-radius: 50%;
            box-shadow: 0 0 10px white, -20px 0 15px rgba(255,255,255,0.5), -40px 0 10px rgba(255,255,255,0.3);
            animation: shootingStar 8s ease-in infinite;
            opacity: 0;
        }
        @keyframes shootingStar {
            0% { top: 20px; left: 80%; opacity: 0; }
            5% { opacity: 1; }
            15% { top: 100px; left: 20%; opacity: 0; }
            100% { top: 100px; left: 20%; opacity: 0; }
        }

        /* ============================================
           BIOME: SKY - Celestial Paradise
           Easter Egg: Rainbow Bridge & Angel Wings
           ============================================ */
        .battleground.biome-sky .battleground-bg {
            background:
                radial-gradient(ellipse at 30% 30%, rgba(255,255,255,0.4) 0%, transparent 40%),
                radial-gradient(ellipse at 70% 50%, rgba(255,230,200,0.3) 0%, transparent 50%),
                linear-gradient(180deg,
                    rgba(135, 200, 255, 0) 0%,
                    rgba(150, 210, 255, 0.4) 30%,
                    rgba(180, 220, 255, 0.6) 60%,
                    rgba(220, 240, 255, 0.85) 100%);
        }
        .battleground.biome-sky .battleground-ground {
            background:
                repeating-linear-gradient(90deg,
                    rgba(255,255,255,0.3) 0px, rgba(255,255,255,0.3) 50px,
                    rgba(255,255,255,0.1) 50px, rgba(255,255,255,0.1) 100px),
                linear-gradient(180deg,
                    rgba(255,255,255,0.9) 0%,
                    rgba(230,240,255,0.8) 50%,
                    rgba(200,220,255,0.7) 100%);
            border-top: 4px solid rgba(255,255,255,0.95);
            box-shadow: 0 -10px 40px rgba(255,255,255,0.5), inset 0 5px 20px rgba(200,220,255,0.3);
        }
        .battleground.biome-sky::before {
            content: '☁️ 🕊️ ⭐ 🌈 ✨';
            position: absolute;
            bottom: 55px;
            left: 10%;
            font-size: 26px;
            letter-spacing: 32px;
            opacity: 0.95;
            filter: drop-shadow(0 3px 8px rgba(100,150,255,0.3));
        }
        .battleground.biome-sky::after {
            content: '☁️';
            position: absolute;
            font-size: 60px;
            animation: cloudFloat 20s linear infinite;
            opacity: 0.7;
            filter: drop-shadow(0 5px 15px rgba(0,0,0,0.1));
        }
        @keyframes cloudFloat {
            0% { top: 30px; left: -20%; }
            100% { top: 50px; left: 120%; }
        }
        /* Sun Rays */
        .battleground.biome-sky .battleground-weather {
            background:
                repeating-conic-gradient(from 0deg at 85% 20%,
                    rgba(255,255,200,0.1) 0deg,
                    transparent 15deg,
                    rgba(255,255,200,0.1) 30deg);
            animation: sunRays 10s linear infinite;
        }
        @keyframes sunRays {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        /* Sky Rainbow Bridge Easter Egg */
        .battleground.biome-sky .rainbow-bridge {
            position: absolute;
            bottom: 30px;
            left: 10%;
            width: 80%;
            height: 60px;
            background: linear-gradient(180deg,
                rgba(255,0,0,0.3) 0%,
                rgba(255,165,0,0.3) 16%,
                rgba(255,255,0,0.3) 33%,
                rgba(0,255,0,0.3) 50%,
                rgba(0,0,255,0.3) 66%,
                rgba(75,0,130,0.3) 83%,
                rgba(148,0,211,0.3) 100%);
            border-radius: 60px 60px 0 0;
            opacity: 0;
            transition: opacity 2s ease;
        }
        .battleground.biome-sky.show-rainbow .rainbow-bridge {
            opacity: 0.7;
            animation: rainbowPulse 4s ease-in-out infinite;
        }
        @keyframes rainbowPulse {
            0%, 100% { filter: brightness(1); }
            50% { filter: brightness(1.3); }
        }
        /* Angel Wings Easter Egg */
        .battleground.biome-sky .angel-easter-egg {
            position: absolute;
            font-size: 35px;
            filter: drop-shadow(0 0 20px rgba(255,255,255,0.9));
            animation: angelFloat 10s ease-in-out infinite;
        }
        @keyframes angelFloat {
            0% { bottom: 60px; left: 20%; opacity: 0; transform: scale(0.8); }
            20% { opacity: 1; transform: scale(1); }
            50% { bottom: 130px; left: 50%; }
            80% { opacity: 1; }
            100% { bottom: 80px; left: 80%; opacity: 0; transform: scale(0.8); }
        }

        /* ============================================
           BIOME INDICATOR BADGE
           ============================================ */
        .biome-indicator {
            position: fixed;
            bottom: 210px;
            left: 10px;
            padding: 8px 14px;
            background: linear-gradient(145deg, rgba(0,0,0,0.7) 0%, rgba(30,30,50,0.9) 100%);
            /* Hidden on desktop - use GUI button instead */
            display: none;
            color: white;
            font-size: 11px;
            border-radius: 18px;
            border: 1px solid rgba(255,255,255,0.15);
            z-index: 9991;
            pointer-events: auto;
            cursor: pointer;
            transition: all 0.3s ease;
            align-items: center;
            gap: 8px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.1);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }

        /* ============================================
           PARTICLE EFFECTS - GLOBAL STYLES
           ============================================ */

        /* Sparkle particle for XP/gold */
        .particle-sparkle {
            position: absolute;
            width: 6px;
            height: 6px;
            background: radial-gradient(circle, #fff 0%, rgba(255,220,100,0.8) 50%, transparent 100%);
            border-radius: 50%;
            pointer-events: none;
            animation: sparkleParticle 0.8s ease-out forwards;
        }

        @keyframes sparkleParticle {
            0% {
                opacity: 1;
                transform: scale(1) translate(0, 0);
            }
            100% {
                opacity: 0;
                transform: scale(0) translate(var(--tx, 20px), var(--ty, -30px));
            }
        }

        /* Heal particle */
        .particle-heal {
            position: absolute;
            font-size: 12px;
            color: #44ff66;
            pointer-events: none;
            animation: healParticle 1s ease-out forwards;
            text-shadow: 0 0 10px rgba(68,255,102,0.8);
        }

        @keyframes healParticle {
            0% {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
            100% {
                opacity: 0;
                transform: translateY(-30px) scale(0.5);
            }
        }

        /* Impact particle for attacks */
        .particle-impact {
            position: absolute;
            width: 20px;
            height: 20px;
            background: radial-gradient(circle, rgba(255,100,100,0.8) 0%, rgba(255,50,50,0.4) 50%, transparent 70%);
            border-radius: 50%;
            pointer-events: none;
            animation: impactParticle 0.4s ease-out forwards;
        }

        @keyframes impactParticle {
            0% {
                opacity: 1;
                transform: scale(0.5);
            }
            50% {
                opacity: 0.8;
                transform: scale(1.5);
            }
            100% {
                opacity: 0;
                transform: scale(2);
            }
        }

        /* Death burst particles */
        .particle-death {
            position: absolute;
            width: 8px;
            height: 8px;
            background: radial-gradient(circle, rgba(128,128,128,0.9) 0%, rgba(80,80,80,0.5) 70%, transparent 100%);
            border-radius: 50%;
            pointer-events: none;
            animation: deathParticle 0.6s ease-out forwards;
        }

        @keyframes deathParticle {
            0% {
                opacity: 1;
                transform: translate(0, 0) scale(1);
            }
            100% {
                opacity: 0;
                transform: translate(var(--dx, 0), var(--dy, 0)) scale(0.3);
            }
        }

        /* Level up burst effect */
        .levelup-burst {
            position: absolute;
            width: 100px;
            height: 100px;
            background: radial-gradient(circle, rgba(68,221,255,0.4) 0%, rgba(68,221,255,0.1) 40%, transparent 70%);
            border-radius: 50%;
            pointer-events: none;
            animation: levelUpBurst 0.8s ease-out forwards;
        }

        @keyframes levelUpBurst {
            0% {
                opacity: 1;
                transform: translate(-50%, -50%) scale(0);
            }
            50% {
                opacity: 0.8;
            }
            100% {
                opacity: 0;
                transform: translate(-50%, -50%) scale(2);
            }
        }

        /* Floating ambient particles */
        .ambient-particle {
            position: absolute;
            width: 3px;
            height: 3px;
            background: rgba(255,255,255,0.4);
            border-radius: 50%;
            pointer-events: none;
            animation: ambientFloat 4s ease-in-out infinite;
        }

        @keyframes ambientFloat {
            0%, 100% {
                opacity: 0.2;
                transform: translateY(0) translateX(0);
            }
            50% {
                opacity: 0.6;
                transform: translateY(-20px) translateX(10px);
            }
        }

        /* ========================================
           ENHANCED ABILITY EFFECTS - SATISFYING COMBAT
           ======================================== */

        /* Screen Flash Effects */
        .screen-flash {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            pointer-events: none;
            z-index: 99999;
            animation: screenFlash 0.3s ease-out forwards;
        }

        .screen-flash.critical { background: radial-gradient(circle at center, rgba(255,200,0,0.4) 0%, rgba(255,100,0,0.2) 50%, transparent 100%); }
        .screen-flash.fire { background: radial-gradient(circle at center, rgba(255,100,0,0.5) 0%, rgba(255,50,0,0.2) 50%, transparent 100%); }
        .screen-flash.ice { background: radial-gradient(circle at center, rgba(100,200,255,0.4) 0%, rgba(50,150,255,0.2) 50%, transparent 100%); }
        .screen-flash.lightning { background: radial-gradient(circle at center, rgba(255,255,100,0.5) 0%, rgba(200,200,50,0.2) 50%, transparent 100%); }
        .screen-flash.nature { background: radial-gradient(circle at center, rgba(100,255,100,0.4) 0%, rgba(50,200,50,0.2) 50%, transparent 100%); }
        .screen-flash.dark { background: radial-gradient(circle at center, rgba(150,50,200,0.4) 0%, rgba(100,0,150,0.2) 50%, transparent 100%); }
        .screen-flash.holy { background: radial-gradient(circle at center, rgba(255,255,200,0.5) 0%, rgba(255,255,150,0.3) 50%, transparent 100%); }

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

        /* Screen Shake */
        .screen-shake {
            animation: screenShake 0.4s ease-out;
        }

        .screen-shake-heavy {
            animation: screenShakeHeavy 0.5s ease-out;
        }

        @keyframes screenShake {
            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); }
        }

        @keyframes screenShakeHeavy {
            0%, 100% { transform: translate(0, 0); }
            10% { transform: translate(-8px, 5px); }
            20% { transform: translate(8px, -5px); }
            30% { transform: translate(-6px, 4px); }
            40% { transform: translate(6px, -4px); }
            50% { transform: translate(-4px, 3px); }
            60% { transform: translate(4px, -3px); }
            70% { transform: translate(-2px, 2px); }
            80% { transform: translate(2px, -2px); }
            90% { transform: translate(-1px, 1px); }
        }

        /* Micro shake for taking damage */
        .screen-shake-micro {
            animation: screenShakeMicro 0.15s ease-out;
        }

        @keyframes screenShakeMicro {
            0%, 100% { transform: translate(0, 0); }
            25% { transform: translate(-2px, 1px); }
            50% { transform: translate(2px, -1px); }
            75% { transform: translate(-1px, 0); }
        }

        /* Boss kill epic shake */
        .screen-shake-boss {
            animation: screenShakeBoss 0.6s ease-out;
        }

        @keyframes screenShakeBoss {
            0%, 100% { transform: translate(0, 0) scale(1); }
            5% { transform: translate(-10px, 6px) scale(1.01); }
            10% { transform: translate(10px, -6px) scale(0.99); }
            15% { transform: translate(-8px, 5px) scale(1.01); }
            20% { transform: translate(8px, -5px) scale(0.99); }
            30% { transform: translate(-6px, 4px); }
            40% { transform: translate(6px, -4px); }
            50% { transform: translate(-4px, 3px); }
            60% { transform: translate(4px, -3px); }
            70% { transform: translate(-2px, 2px); }
            80% { transform: translate(2px, -1px); }
            90% { transform: translate(-1px, 1px); }
        }

        /* Multi-Hit Damage Numbers */
        .damage-cascade {
            position: fixed;
            font-family: var(--font-display);
            font-weight: 900;
            color: #fff;
            text-shadow:
                0 0 10px currentColor,
                2px 2px 0 rgba(0,0,0,0.8),
                -2px -2px 0 rgba(0,0,0,0.8);
            pointer-events: none;
            z-index: 100000;
            animation: damageCascade 1s ease-out forwards;
        }

        .damage-cascade.hit-1 { font-size: 1.2rem; color: #ff6666; animation-delay: 0s; }
        .damage-cascade.hit-2 { font-size: 1.4rem; color: #ff8844; animation-delay: 0.1s; }
        .damage-cascade.hit-3 { font-size: 1.6rem; color: #ffaa22; animation-delay: 0.2s; }
        .damage-cascade.hit-4 { font-size: 1.8rem; color: #ffcc00; animation-delay: 0.3s; }
        .damage-cascade.hit-5 { font-size: 2rem; color: #ffff00; animation-delay: 0.4s; text-shadow: 0 0 20px #ffff00, 0 0 40px #ff8800; }
        .damage-cascade.critical { font-size: 2.5rem; color: #ff0; animation: damageCritical 0.8s ease-out forwards; }

        @keyframes damageCascade {
            0% { opacity: 0; transform: translateY(10px) scale(0.5); }
            20% { opacity: 1; transform: translateY(0) scale(1.2); }
            40% { transform: translateY(-10px) scale(1); }
            100% { opacity: 0; transform: translateY(-40px) scale(0.8); }
        }

        @keyframes damageCritical {
            0% { opacity: 0; transform: scale(0.3) rotate(-10deg); }
            30% { opacity: 1; transform: scale(1.5) rotate(5deg); }
            50% { transform: scale(1.2) rotate(-3deg); }
            100% { opacity: 0; transform: scale(0.8) translateY(-50px) rotate(0deg); }
        }

        /* Combo Counter Display */
        .combo-counter {
            position: fixed;
            top: 20%;
            right: 5%;
            font-family: var(--font-display);
            font-size: 2rem;
            font-weight: 900;
            color: #fff;
            text-shadow: 0 0 20px rgba(255,150,0,0.8), 3px 3px 0 rgba(0,0,0,0.8);
            pointer-events: none;
            z-index: 99998;
            opacity: 0;
            transition: all 0.2s ease;
        }

        .combo-counter.active {
            opacity: 1;
            animation: comboPulse 0.3s ease-out;
        }

        .combo-counter.heated { color: #ff6600; text-shadow: 0 0 30px rgba(255,100,0,0.9), 0 0 60px rgba(255,50,0,0.5); }
        .combo-counter.blazing { color: #ff0; text-shadow: 0 0 40px rgba(255,255,0,0.9), 0 0 80px rgba(255,150,0,0.6); font-size: 2.5rem; }
        .combo-counter.inferno { color: #fff; text-shadow: 0 0 50px rgba(255,255,255,1), 0 0 100px rgba(255,200,0,0.8); font-size: 3rem; animation: comboInferno 0.5s ease infinite; }

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

        @keyframes comboInferno {
            0%, 100% { transform: scale(1) rotate(-1deg); }
            50% { transform: scale(1.05) rotate(1deg); }
        }

        /* Chain Energy Effect */
        .chain-bolt {
            position: fixed;
            height: 3px;
            background: linear-gradient(90deg, transparent, #88ddff, #ffffff, #88ddff, transparent);
            pointer-events: none;
            z-index: 99997;
            animation: chainBolt 0.3s ease-out forwards;
            transform-origin: left center;
            box-shadow: 0 0 10px #88ddff, 0 0 20px #4488ff;
        }

        @keyframes chainBolt {
            0% { opacity: 1; transform: scaleX(0); }
            30% { opacity: 1; transform: scaleX(1); }
            100% { opacity: 0; transform: scaleX(1); }
        }

        /* Explosion Burst Effects */
        .explosion-burst {
            position: fixed;
            width: 100px;
            height: 100px;
            pointer-events: none;
            z-index: 99996;
            animation: explosionBurst 0.6s ease-out forwards;
        }

        .explosion-burst::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle, rgba(255,200,100,0.9) 0%, rgba(255,100,50,0.6) 40%, rgba(255,50,0,0.2) 70%, transparent 100%);
            border-radius: 50%;
            transform: translate(-50%, -50%);
            animation: explosionInner 0.4s ease-out forwards;
        }

        .explosion-burst::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 150%;
            height: 150%;
            border: 3px solid rgba(255,150,50,0.6);
            border-radius: 50%;
            transform: translate(-50%, -50%) scale(0);
            animation: explosionRing 0.5s ease-out forwards;
        }

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

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

        @keyframes explosionRing {
            0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
            100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }
        }

        /* Element Particles */
        .particle-fire {
            position: fixed;
            width: 8px;
            height: 12px;
            background: linear-gradient(to top, #ff6600, #ffcc00, #ffffff);
            border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
            pointer-events: none;
            z-index: 99995;
            animation: fireParticle 0.8s ease-out forwards;
            box-shadow: 0 0 10px #ff6600, 0 0 20px #ff3300;
        }

        @keyframes fireParticle {
            0% { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
            100% { opacity: 0; transform: translateY(-60px) scale(0.3) rotate(45deg); }
        }

        .particle-ice {
            position: fixed;
            width: 10px;
            height: 10px;
            background: linear-gradient(135deg, #aaeeff, #ffffff);
            clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
            pointer-events: none;
            z-index: 99995;
            animation: iceParticle 1s ease-out forwards;
            box-shadow: 0 0 8px #88ddff;
        }

        @keyframes iceParticle {
            0% { opacity: 1; transform: translateY(0) rotate(0deg) scale(1); }
            100% { opacity: 0; transform: translateY(40px) rotate(180deg) scale(0.5); }
        }

        .particle-lightning {
            position: fixed;
            width: 4px;
            height: 20px;
            background: linear-gradient(to bottom, #ffffff, #ffff88, #ffff00);
            pointer-events: none;
            z-index: 99995;
            animation: lightningParticle 0.4s ease-out forwards;
            box-shadow: 0 0 15px #ffff00, 0 0 30px #ffcc00;
        }

        @keyframes lightningParticle {
            0% { opacity: 1; transform: scaleY(0) translateY(-10px); }
            30% { opacity: 1; transform: scaleY(1.5) translateY(0); }
            100% { opacity: 0; transform: scaleY(0.5) translateY(20px); }
        }

        .particle-nature {
            position: fixed;
            width: 12px;
            height: 12px;
            background: radial-gradient(circle, #88ff88 0%, #44cc44 70%, transparent 100%);
            border-radius: 50%;
            pointer-events: none;
            z-index: 99995;
            animation: natureParticle 1.2s ease-out forwards;
        }

        @keyframes natureParticle {
            0% { opacity: 1; transform: translate(0, 0) scale(0.5); }
            50% { opacity: 0.8; transform: translate(var(--tx, 20px), var(--ty, -30px)) scale(1); }
            100% { opacity: 0; transform: translate(calc(var(--tx, 20px) * 1.5), calc(var(--ty, -30px) * 2)) scale(0.3); }
        }

        /* Skill Activation Flash */
        .skill-flash {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-family: var(--font-display);
            font-size: 3rem;
            font-weight: 900;
            color: #fff;
            text-shadow: 0 0 30px currentColor, 0 0 60px currentColor;
            pointer-events: none;
            z-index: 100001;
            animation: skillFlash 1.2s ease-out forwards;
            white-space: nowrap;
        }

        .skill-flash.fire { color: #ff6600; }
        .skill-flash.ice { color: #88ddff; }
        .skill-flash.lightning { color: #ffff00; }
        .skill-flash.nature { color: #88ff88; }
        .skill-flash.dark { color: #aa66ff; }
        .skill-flash.holy { color: #ffffaa; }

        @keyframes skillFlash {
            0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); letter-spacing: -10px; }
            20% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); letter-spacing: 5px; }
            40% { transform: translate(-50%, -50%) scale(1); letter-spacing: 2px; }
            70% { opacity: 1; }
            100% { opacity: 0; transform: translate(-50%, -60%) scale(0.9); }
        }

        /* Ultimate Ability Background Dim */
        .ultimate-dim {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: rgba(0,0,0,0.5);
            pointer-events: none;
            z-index: 99990;
            animation: ultimateDim 1.5s ease-out forwards;
        }

        @keyframes ultimateDim {
            0% { opacity: 0; }
            20% { opacity: 1; }
            80% { opacity: 1; }
            100% { opacity: 0; }
        }

        /* Hit Streak Trail */
        .hit-trail {
            position: fixed;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            pointer-events: none;
            z-index: 99994;
            animation: hitTrail 0.5s ease-out forwards;
        }

        .hit-trail.slash {
            background: linear-gradient(45deg, transparent 40%, rgba(255,255,255,0.8) 50%, transparent 60%);
            width: 60px;
            height: 60px;
            animation: slashTrail 0.3s ease-out forwards;
        }

        @keyframes hitTrail {
            0% { opacity: 0.8; transform: scale(0.5); }
            100% { opacity: 0; transform: scale(1.5); }
        }

        @keyframes slashTrail {
            0% { opacity: 1; transform: scale(0.5) rotate(-45deg); }
            100% { opacity: 0; transform: scale(1.5) rotate(45deg); }
        }

        /* Enemy stagger effect */
        .enemy-sprite.staggered {
            animation: enemyStagger 0.5s ease-out;
        }

        @keyframes enemyStagger {
            0%, 100% { transform: translateX(0); }
            20% { transform: translateX(-15px) rotate(-5deg); }
            40% { transform: translateX(10px) rotate(3deg); }
            60% { transform: translateX(-5px) rotate(-2deg); }
            80% { transform: translateX(3px) rotate(1deg); }
        }

        /* ========================================
           ENHANCED GAME FEEL EFFECTS
           ======================================== */

        /* Critical Hit Indicator */
        .crit-indicator {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-family: var(--font-display);
            font-size: 4rem;
            font-weight: 900;
            color: #ff0;
            text-shadow:
                0 0 20px #ff0,
                0 0 40px #ff8800,
                0 0 60px #ff4400,
                4px 4px 0 #aa0000;
            pointer-events: none;
            z-index: 100002;
            animation: critIndicator 0.8s ease-out forwards;
        }

        .crit-indicator::before,
        .crit-indicator::after {
            content: '⭐';
            position: absolute;
            font-size: 2rem;
            animation: critStars 0.6s ease-out forwards;
        }

        .crit-indicator::before {
            top: -20px;
            left: -30px;
            animation-delay: 0.1s;
        }

        .crit-indicator::after {
            top: -15px;
            right: -30px;
            animation-delay: 0.2s;
        }

        @keyframes critIndicator {
            0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3) rotate(-10deg); }
            30% { opacity: 1; transform: translate(-50%, -50%) scale(1.3) rotate(5deg); }
            50% { transform: translate(-50%, -50%) scale(1) rotate(-2deg); }
            100% { opacity: 0; transform: translate(-50%, -60%) scale(0.8) rotate(0deg); }
        }

        @keyframes critStars {
            0% { opacity: 0; transform: scale(0) rotate(0deg); }
            50% { opacity: 1; transform: scale(1.5) rotate(180deg); }
            100% { opacity: 0; transform: scale(0.5) rotate(360deg); }
        }

        /* Kill Streak Announcements */
        .kill-streak {
            position: fixed;
            top: 30%;
            left: 50%;
            transform: translateX(-50%);
            font-family: var(--font-display);
            font-size: 2.5rem;
            font-weight: 900;
            text-transform: uppercase;
            pointer-events: none;
            z-index: 100003;
            animation: killStreak 1.5s ease-out forwards;
            text-align: center;
        }

        .kill-streak.double { color: #88ff88; text-shadow: 0 0 20px #44ff44, 3px 3px 0 #006600; }
        .kill-streak.triple { color: #88ddff; text-shadow: 0 0 30px #44aaff, 3px 3px 0 #004488; }
        .kill-streak.mega { color: #ff88ff; text-shadow: 0 0 40px #ff44ff, 3px 3px 0 #880088; }
        .kill-streak.ultra { color: #ffff44; text-shadow: 0 0 50px #ffff00, 0 0 80px #ff8800, 4px 4px 0 #886600; font-size: 3rem; }
        .kill-streak.godlike {
            color: #fff;
            text-shadow: 0 0 30px #fff, 0 0 60px #ff0, 0 0 90px #f00;
            font-size: 3.5rem;
            animation: killStreakGodlike 2s ease-out forwards;
        }

        @keyframes killStreak {
            0% { opacity: 0; transform: translateX(-50%) scale(0.5) translateY(20px); }
            20% { opacity: 1; transform: translateX(-50%) scale(1.2) translateY(0); }
            40% { transform: translateX(-50%) scale(1) translateY(-5px); }
            80% { opacity: 1; }
            100% { opacity: 0; transform: translateX(-50%) scale(0.9) translateY(-30px); }
        }

        @keyframes killStreakGodlike {
            0% { opacity: 0; transform: translateX(-50%) scale(0.3); }
            20% { opacity: 1; transform: translateX(-50%) scale(1.5); }
            40% { transform: translateX(-50%) scale(1.1); }
            60% { transform: translateX(-50%) scale(1.2); }
            80% { opacity: 1; transform: translateX(-50%) scale(1); }
            100% { opacity: 0; transform: translateX(-50%) scale(1.3) translateY(-40px); }
        }

        /* Low HP Warning */
        .low-hp-warning {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            pointer-events: none;
            z-index: 99980;
            background: radial-gradient(ellipse at center, transparent 50%, rgba(255,0,0,0.3) 100%);
            animation: lowHpPulse 1s ease-in-out infinite;
        }

        .low-hp-warning.critical {
            background: radial-gradient(ellipse at center, transparent 40%, rgba(255,0,0,0.5) 100%);
            animation: lowHpPulseCritical 0.5s ease-in-out infinite;
        }

        @keyframes lowHpPulse {
            0%, 100% { opacity: 0.3; }
            50% { opacity: 0.7; }
        }

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

        /* Combat Text Popups */
        .combat-popup {
            position: fixed;
            font-family: var(--font-display);
            font-weight: 800;
            pointer-events: none;
            z-index: 100001;
            animation: combatPopup 1s ease-out forwards;
        }

        .combat-popup.dodge {
            color: #88ffff;
            font-size: 1.5rem;
            text-shadow: 0 0 10px #44ffff, 2px 2px 0 #004444;
        }

        .combat-popup.blocked {
            color: #aaaaff;
            font-size: 1.5rem;
            text-shadow: 0 0 10px #8888ff, 2px 2px 0 #000066;
        }

        .combat-popup.immune {
            color: #ffaaff;
            font-size: 1.4rem;
            text-shadow: 0 0 10px #ff88ff, 2px 2px 0 #440044;
        }

        .combat-popup.counter {
            color: #ffaa44;
            font-size: 1.6rem;
            text-shadow: 0 0 15px #ff8800, 2px 2px 0 #442200;
        }

        .combat-popup.lifesteal {
            color: #44ff88;
            font-size: 1.4rem;
            text-shadow: 0 0 10px #22ff66, 2px 2px 0 #004422;
        }

        @keyframes combatPopup {
            0% { opacity: 0; transform: translateY(10px) scale(0.5); }
            20% { opacity: 1; transform: translateY(0) scale(1.1); }
            40% { transform: translateY(-5px) scale(1); }
            100% { opacity: 0; transform: translateY(-30px) scale(0.8); }
        }

        /* Enemy Death Explosion */
        .death-explosion {
            position: fixed;
            width: 80px;
            height: 80px;
            pointer-events: none;
            z-index: 99993;
        }

        .death-coin {
            position: absolute;
            font-size: 1.2rem;
            animation: deathCoin 0.8s ease-out forwards;
        }

        @keyframes deathCoin {
            0% { opacity: 1; transform: translate(0, 0) scale(1) rotate(0deg); }
            100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(0.5) rotate(var(--rot)); }
        }

        .death-star {
            position: absolute;
            width: 8px;
            height: 8px;
            background: radial-gradient(circle, #fff 0%, #ffff88 50%, transparent 100%);
            border-radius: 50%;
            animation: deathStar 0.6s ease-out forwards;
        }

        @keyframes deathStar {
            0% { opacity: 1; transform: translate(0, 0) scale(1); }
            100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(0); }
        }

        /* Hit Pause Effect */
        .hit-pause {
            animation: hitPause 0.08s step-end;
        }

        @keyframes hitPause {
            0%, 100% { filter: brightness(1); }
            50% { filter: brightness(2); }
        }

        /* Pet Idle Animation */
        .pet-sprite.idle {
            animation: petIdle 2s ease-in-out infinite;
        }

        @keyframes petIdle {
            0%, 100% { transform: translateY(0) scale(1); }
            50% { transform: translateY(-3px) scale(1.02); }
        }

        /* Pet Breathing Glow */
        .pet-sprite::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 50%;
            transform: translateX(-50%);
            width: 40px;
            height: 10px;
            background: radial-gradient(ellipse, rgba(255,255,255,0.3) 0%, transparent 70%);
            border-radius: 50%;
            animation: petGlow 2s ease-in-out infinite;
            pointer-events: none;
        }

        @keyframes petGlow {
            0%, 100% { opacity: 0.3; transform: translateX(-50%) scale(1); }
            50% { opacity: 0.6; transform: translateX(-50%) scale(1.2); }
        }

        /* XP Bar Shine Effect */
        .xp-fill::after {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 50%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
            animation: xpShine 3s ease-in-out infinite;
            pointer-events: none;
        }

        @keyframes xpShine {
            0% { left: -100%; }
            50%, 100% { left: 200%; }
        }

        /* Loot Glow */
        .inventory-slot.filled {
            animation: lootGlow 2s ease-in-out infinite;
        }

        @keyframes lootGlow {
            0%, 100% { box-shadow: 0 0 5px rgba(255,215,0,0.3); }
            50% { box-shadow: 0 0 15px rgba(255,215,0,0.6), 0 0 25px rgba(255,215,0,0.3); }
        }

        /* Enemy Attack Warning */
        .enemy-sprite.attacking::before {
            content: '⚠️';
            position: absolute;
            top: -25px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 1rem;
            animation: attackWarning 0.3s ease-out;
        }

        @keyframes attackWarning {
            0% { opacity: 0; transform: translateX(-50%) scale(0.5); }
            50% { opacity: 1; transform: translateX(-50%) scale(1.2); }
            100% { opacity: 0.7; transform: translateX(-50%) scale(1); }
        }

        .biome-indicator:hover {
            background: linear-gradient(135deg, rgba(50,50,80,0.8) 0%, rgba(80,80,120,0.9) 100%);
            transform: scale(1.08);
            box-shadow: 0 4px 15px rgba(0,0,0,0.4);
        }

        .biome-indicator:active {
            transform: scale(0.95);
        }

        .biome-indicator .biome-icon {
            font-size: 16px;
        }

        /* Mobile adjustments */
        @media (max-width: 768px) {
            .battleground {
                height: 150px;
            }
            .battleground-ground {
                height: 45px;
            }
            .biome-indicator {
                display: flex; /* Show on mobile as fallback */
                bottom: 160px;
                font-size: 10px;
                padding: 4px 10px;
            }
            .battleground::before {
                font-size: 18px !important;
                letter-spacing: 15px !important;
            }
            .battleground::after {
                font-size: 20px !important;
            }
        }

        .pet-container {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 90px;
            pointer-events: none;
            z-index: 9990;
            overflow: visible;
        }

        /* Ambient floating particles */
        .pet-container::before {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 100%;
            background:
                radial-gradient(circle at 20% 80%, rgba(255,200,100,0.03) 0%, transparent 50%),
                radial-gradient(circle at 80% 70%, rgba(100,200,255,0.03) 0%, transparent 50%);
            pointer-events: none;
        }

        /* Ground line effect */
        .pet-container::after {
            content: '';
            position: absolute;
            bottom: 8px;
            left: 10%;
            right: 10%;
            height: 2px;
            background: linear-gradient(90deg,
                transparent 0%,
                rgba(255,255,255,0.05) 20%,
                rgba(255,255,255,0.08) 50%,
                rgba(255,255,255,0.05) 80%,
                transparent 100%);
            border-radius: 1px;
            pointer-events: none;
        }

        /* ============================================
           PET SPRITE - ENHANCED VISUALS
           ============================================ */
        .pet-sprite {
            position: absolute;
            bottom: 10px;
            left: 50px;
            cursor: pointer;
            pointer-events: auto;
            transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
            z-index: 9992;
        }

        .pet-sprite::before {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 50%;
            transform: translateX(-50%);
            width: 40px;
            height: 12px;
            background: radial-gradient(ellipse, rgba(0,0,0,0.4) 0%, transparent 70%);
            border-radius: 50%;
            animation: shadowPulse 2s ease-in-out infinite;
        }

        @keyframes shadowPulse {
            0%, 100% { transform: translateX(-50%) scale(1); opacity: 0.4; }
            50% { transform: translateX(-50%) scale(1.1); opacity: 0.3; }
        }

        .pet-sprite:hover {
            transform: scale(1.15);
        }

        .pet-sprite.walking {
            animation: petWalk 0.4s ease-in-out infinite;
        }

        .pet-sprite.attacking {
            animation: petAttack 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        }

        .pet-sprite.hurt {
            animation: petHurt 0.4s ease;
        }

        .pet-sprite.dead {
            opacity: 0.4;
            filter: grayscale(100%) brightness(0.7);
            transform: rotate(-15deg);
        }

        @keyframes petWalk {
            0%, 100% { transform: translateY(0) rotate(-1deg); }
            25% { transform: translateY(-5px) rotate(1deg); }
            50% { transform: translateY(-2px) rotate(-1deg); }
            75% { transform: translateY(-5px) rotate(1deg); }
        }

        @keyframes petAttack {
            0% { transform: translateX(0) scale(1); }
            20% { transform: translateX(-10px) scale(0.9); }
            50% { transform: translateX(25px) scale(1.3); filter: brightness(1.3); }
            100% { transform: translateX(0) scale(1); }
        }

        @keyframes petHurt {
            0% { transform: translateX(0); filter: none; }
            15% { transform: translateX(-8px) rotate(-5deg); filter: brightness(2) sepia(1) hue-rotate(-50deg); }
            30% { transform: translateX(8px) rotate(5deg); filter: brightness(1.8); }
            45% { transform: translateX(-5px); filter: brightness(1.5); }
            60% { transform: translateX(5px); filter: brightness(1.2); }
            100% { transform: translateX(0); filter: none; }
        }

        .pet-emoji {
            font-size: 2.8rem;
            filter: drop-shadow(0 4px 8px rgba(0,0,0,0.4)) drop-shadow(0 0 20px rgba(255,200,100,0.15));
            transition: transform 0.2s ease, filter 0.3s ease;
            animation: petIdle 3s ease-in-out infinite;
        }

        @keyframes petIdle {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.02); }
        }

        .pet-sprite:hover .pet-emoji {
            filter: drop-shadow(0 4px 8px rgba(0,0,0,0.4)) drop-shadow(0 0 30px rgba(255,220,100,0.4));
        }

        .pet-sprite.flipped .pet-emoji {
            transform: scaleX(-1);
        }

        .pet-hp-mini {
            position: absolute;
            top: -30px;
            left: 50%;
            transform: translateX(-50%);
            width: 55px;
            height: 8px;
            background: linear-gradient(180deg, rgba(0,0,0,0.7) 0%, rgba(20,20,20,0.8) 100%);
            border-radius: 4px;
            overflow: hidden;
            border: 1px solid rgba(255,255,255,0.2);
            box-shadow: 0 2px 8px rgba(0,0,0,0.5), inset 0 1px 2px rgba(0,0,0,0.5);
        }

        .pet-hp-mini-fill {
            height: 100%;
            background: linear-gradient(180deg, #4ade80 0%, #22c55e 50%, #16a34a 100%);
            border-radius: 3px;
            transition: width 0.3s ease;
            box-shadow: 0 0 10px rgba(74, 222, 128, 0.4), inset 0 1px 0 rgba(255,255,255,0.3);
        }

        .pet-name-label {
            position: absolute;
            top: -48px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 0.7rem;
            font-weight: 700;
            color: #fff;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.8), -1px -1px 2px rgba(0,0,0,0.8);
            white-space: nowrap;
            font-family: var(--font-display);
            background: rgba(0,0,0,0.5);
            padding: 2px 6px;
            border-radius: 4px;
        }

        .pet-hp-mini-fill {
            height: 100%;
            background: linear-gradient(90deg, #4CAF50, #8BC34A);
            border-radius: 2px;
            transition: width 0.3s ease;
            width: 100%;
        }

        .pet-hp-mini-fill.low {
            background: linear-gradient(90deg, #f44336, #ff5722);
        }

        .pet-hp-mini-fill.medium {
            background: linear-gradient(90deg, #ff9800, #ffc107);
        }

        .pet-level-mini {
            position: absolute;
            top: -8px;
            right: -8px;
            background: linear-gradient(135deg, var(--color-golden), var(--color-sunset-orange));
            color: white;
            font-size: 0.65rem;
            font-weight: 700;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 6px rgba(0,0,0,0.3);
            font-family: var(--font-display);
        }

        .pet-damage-popup {
            position: absolute;
            top: -25px;
            left: 50%;
            transform: translateX(-50%);
            font-weight: 800;
            font-size: 1rem;
            opacity: 0;
            pointer-events: none;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.7), 0 0 10px currentColor;
            font-family: var(--font-display);
            letter-spacing: 0.5px;
        }

        .pet-damage-popup.show {
            animation: damagePopup 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
        }

        .pet-damage-popup.damage {
            color: #ff4444;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.7), 0 0 15px rgba(255,68,68,0.7), 0 0 25px rgba(255,0,0,0.4);
        }

        .pet-damage-popup.heal {
            color: #44ff66;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.7), 0 0 15px rgba(68,255,102,0.7), 0 0 25px rgba(0,255,0,0.4);
        }

        .pet-damage-popup.xp {
            color: #ffdd44;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.7), 0 0 15px rgba(255,221,68,0.7), 0 0 25px rgba(255,200,0,0.4);
        }

        .pet-damage-popup.levelup {
            color: #44ddff;
            font-size: 1.3rem;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.7), 0 0 20px rgba(68,221,255,0.8), 0 0 40px rgba(0,200,255,0.5);
            animation: levelUpPopup 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
        }

        .pet-damage-popup.critical {
            color: #ff8800;
            font-size: 1.2rem;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.7), 0 0 20px rgba(255,136,0,0.8), 0 0 35px rgba(255,100,0,0.5);
            animation: criticalPopup 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
        }

        @keyframes damagePopup {
            0% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.2); }
            20% { transform: translateX(-50%) translateY(-10px) scale(1); }
            100% { opacity: 0; transform: translateX(-50%) translateY(-40px) scale(0.8); }
        }

        @keyframes levelUpPopup {
            0% { opacity: 1; transform: translateX(-50%) translateY(0) scale(0.5); }
            30% { transform: translateX(-50%) translateY(-15px) scale(1.3); }
            50% { transform: translateX(-50%) translateY(-20px) scale(1.1); }
            100% { opacity: 0; transform: translateX(-50%) translateY(-50px) scale(1); }
        }

        @keyframes criticalPopup {
            0% { opacity: 1; transform: translateX(-50%) translateY(0) scale(0.8) rotate(-5deg); }
            25% { transform: translateX(-50%) translateY(-8px) scale(1.3) rotate(5deg); }
            50% { transform: translateX(-50%) translateY(-15px) scale(1.1) rotate(-3deg); }
            100% { opacity: 0; transform: translateX(-50%) translateY(-35px) scale(0.9) rotate(0deg); }
        }

        /* Pet Panel (Stats UI) - Redesigned & Draggable on Desktop */
        .pet-panel {
            position: fixed;
            bottom: 70px;
            left: 20px;
            background: linear-gradient(165deg,
                rgba(30, 30, 60, 0.98) 0%,
                rgba(15, 15, 35, 0.99) 50%,
                rgba(25, 20, 45, 0.99) 100%);
            border-radius: 20px;
            padding: 0.85rem;
            width: 290px;
            max-height: 440px;
            pointer-events: auto;
            opacity: 0;
            transform: scale(0.95) translateY(10px);
            transition: opacity 0.35s ease-out, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
            visibility: hidden;
            box-shadow:
                0 15px 50px rgba(0,0,0,0.6),
                0 0 80px rgba(245, 166, 35, 0.12),
                inset 0 1px 0 rgba(255,255,255,0.1),
                inset 0 -1px 0 rgba(0,0,0,0.3);
            border: 1px solid rgba(255,255,255,0.12);
            z-index: 9993;
            overflow: hidden;
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
        }

        .pet-panel::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg,
                transparent 0%,
                rgba(255,200,100,0.4) 20%,
                rgba(255,200,100,0.6) 50%,
                rgba(255,200,100,0.4) 80%,
                transparent 100%);
        }

        .pet-panel::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient(ellipse at top, rgba(245, 166, 35, 0.05) 0%, transparent 70%);
            pointer-events: none;
        }

        /* Draggable state - disable transition during drag */
        .pet-panel.dragging {
            transition: none !important;
            user-select: none;
        }

        .pet-panel.visible {
            opacity: 1;
            transform: scale(1);
            visibility: visible;
        }

        .pet-panel-header {
            display: flex;
            align-items: center;
            gap: 0.6rem;
            margin-bottom: 0.6rem;
            padding-bottom: 0.5rem;
            border-bottom: 1px solid rgba(255,255,255,0.08);
            cursor: grab;
            position: relative;
        }

        .pet-panel-header::after {
            content: '';
            position: absolute;
            bottom: -1px;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(245,166,35,0.3), transparent);
            pointer-events: none;
        }

        .pet-panel-header:active {
            cursor: grabbing;
        }

        /* Drag handle indicator on desktop */
        @media (min-width: 769px) {
            .pet-panel-header::before {
                content: '⋮⋮';
                font-size: 10px;
                color: rgba(255,255,255,0.25);
                margin-right: 6px;
                letter-spacing: 3px;
                transition: color 0.2s;
            }
            .pet-panel-header:hover::before {
                color: rgba(255,255,255,0.5);
            }
        }

        .pet-name {
            font-family: var(--font-display);
            font-weight: 700;
            color: white;
            font-size: 1rem;
            flex: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            text-shadow: 0 2px 8px rgba(0,0,0,0.3);
            letter-spacing: 0.5px;
        }

        .pet-level {
            background: linear-gradient(135deg, var(--color-golden), var(--color-sunset-orange));
            color: white;
            padding: 0.2rem 0.6rem;
            border-radius: 12px;
            font-size: 0.68rem;
            font-weight: 700;
            font-family: var(--font-display);
            box-shadow: 0 2px 10px rgba(245,166,35,0.3), inset 0 1px 0 rgba(255,255,255,0.2);
            text-shadow: 0 1px 2px rgba(0,0,0,0.3);
            animation: levelShimmer 3s ease-in-out infinite;
        }

        @keyframes levelShimmer {
            0%, 100% { box-shadow: 0 2px 10px rgba(245,166,35,0.3), inset 0 1px 0 rgba(255,255,255,0.2); }
            50% { box-shadow: 0 2px 15px rgba(245,166,35,0.5), inset 0 1px 0 rgba(255,255,255,0.3); }
        }

        .pet-panel-close {
            background: rgba(255,255,255,0.05);
            border: none;
            color: rgba(255,255,255,0.5);
            font-size: 1rem;
            cursor: pointer;
            padding: 0.25rem;
            line-height: 1;
            transition: all 0.2s ease;
            border-radius: 6px;
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .pet-panel-close:hover {
            color: white;
            background: rgba(231, 76, 60, 0.3);
            transform: scale(1.1);
        }

        /* Quick Stats */
        .pet-quick-stats {
            margin-bottom: 0.5rem;
            position: relative;
        }

        .quick-stat {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin-bottom: 0.35rem;
        }

        .stat-icon {
            font-size: 0.9rem;
            width: 20px;
            text-align: center;
            filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
        }

        .stat-bar {
            flex: 1;
            height: 12px;
            background: rgba(0,0,0,0.4);
            border-radius: 6px;
            overflow: hidden;
            position: relative;
            box-shadow: inset 0 2px 4px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.05);
        }

        .stat-bar::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 50%;
            background: linear-gradient(to bottom, rgba(255,255,255,0.1), transparent);
            border-radius: 6px 6px 0 0;
            pointer-events: none;
            z-index: 2;
        }

        .stat-fill {
            height: 100%;
            border-radius: 6px;
            transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
        }

        .stat-fill::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 50%;
            background: linear-gradient(to bottom, rgba(255,255,255,0.3), transparent);
            border-radius: 6px 6px 0 0;
            pointer-events: none;
        }

        .hp-fill {
            background: linear-gradient(90deg, #c0392b 0%, #e74c3c 50%, #ff6b6b 100%);
            box-shadow: 0 0 10px rgba(231, 76, 60, 0.5), inset 0 -2px 4px rgba(0,0,0,0.2);
        }

        .hp-fill.low {
            animation: hpPulse 1s ease-in-out infinite;
        }

        @keyframes hpPulse {
            0%, 100% { box-shadow: 0 0 10px rgba(231, 76, 60, 0.5); }
            50% { box-shadow: 0 0 20px rgba(255, 0, 0, 0.8), 0 0 30px rgba(255, 0, 0, 0.4); }
        }

        .xp-fill {
            background: linear-gradient(90deg, #f39c12 0%, #f1c40f 50%, #ffe066 100%);
            box-shadow: 0 0 10px rgba(241, 196, 15, 0.4), inset 0 -2px 4px rgba(0,0,0,0.2);
        }

        /* XP bar sparkle effect */
        .xp-fill::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 50%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
            animation: xpShine 3s ease-in-out infinite;
            pointer-events: none;
        }

        @keyframes xpShine {
            0% { left: -100%; }
            50%, 100% { left: 200%; }
        }

        /* XP bar anticipation glow when close to level up */
        .xp-fill.almost-there {
            animation: xpAnticipation 0.8s ease-in-out infinite;
        }

        @keyframes xpAnticipation {
            0%, 100% {
                box-shadow: 0 0 10px rgba(241, 196, 15, 0.4), 0 0 20px rgba(255, 215, 0, 0.3);
            }
            50% {
                box-shadow: 0 0 20px rgba(241, 196, 15, 0.8), 0 0 35px rgba(255, 215, 0, 0.6), 0 0 50px rgba(255, 200, 0, 0.3);
            }
        }

        /* Stun stars indicator */
        .stun-stars {
            position: absolute;
            top: -15px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 0.8rem;
            animation: stunRotate 1s linear infinite;
            pointer-events: none;
            z-index: 10;
        }

        @keyframes stunRotate {
            0% { transform: translateX(-50%) rotate(0deg); }
            100% { transform: translateX(-50%) rotate(360deg); }
        }

        /* XP orb particles */
        .xp-orb {
            position: fixed;
            width: 12px;
            height: 12px;
            background: radial-gradient(circle, #ffe066 0%, #f1c40f 50%, #f39c12 100%);
            border-radius: 50%;
            pointer-events: none;
            z-index: 100000;
            box-shadow: 0 0 8px rgba(241, 196, 15, 0.8), 0 0 15px rgba(255, 215, 0, 0.5);
            animation: xpOrbFloat 0.8s ease-in forwards;
        }

        @keyframes xpOrbFloat {
            0% {
                opacity: 1;
                transform: scale(1);
            }
            80% {
                opacity: 1;
                transform: scale(0.8);
            }
            100% {
                opacity: 0;
                transform: scale(0.3);
            }
        }

        /* So close death message */
        .so-close-message {
            position: fixed;
            top: 40%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-family: var(--font-display);
            font-size: 1.5rem;
            font-weight: 900;
            color: #ff6b6b;
            text-shadow: 0 0 20px rgba(255, 107, 107, 0.8), 2px 2px 0 rgba(0,0,0,0.8);
            pointer-events: none;
            z-index: 100001;
            animation: soCloseAnim 2.5s ease-out forwards;
        }

        @keyframes soCloseAnim {
            0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
            15% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
            30% { transform: translate(-50%, -50%) scale(1); }
            80% { opacity: 1; }
            100% { opacity: 0; transform: translate(-50%, -60%); }
        }

        /* Personal best notification */
        .personal-best {
            position: fixed;
            top: 25%;
            right: 5%;
            font-family: var(--font-display);
            font-size: 1.2rem;
            font-weight: 900;
            color: #ffd700;
            text-shadow: 0 0 15px rgba(255, 215, 0, 0.9), 2px 2px 0 rgba(0,0,0,0.8);
            pointer-events: none;
            z-index: 99999;
            animation: personalBestAnim 2s ease-out forwards;
        }

        @keyframes personalBestAnim {
            0% { opacity: 0; transform: scale(0.5) rotate(-10deg); }
            20% { opacity: 1; transform: scale(1.2) rotate(5deg); }
            40% { transform: scale(1) rotate(0deg); }
            80% { opacity: 1; }
            100% { opacity: 0; transform: translateY(-30px); }
        }

        /* 2x XP bonus indicator */
        .bonus-xp-indicator {
            position: fixed;
            top: 15%;
            left: 50%;
            transform: translateX(-50%);
            font-family: var(--font-display);
            font-size: 1.3rem;
            font-weight: 900;
            color: #00ff88;
            text-shadow: 0 0 20px rgba(0, 255, 136, 0.8), 0 0 40px rgba(0, 255, 136, 0.4), 2px 2px 0 rgba(0,0,0,0.8);
            pointer-events: none;
            z-index: 99997;
            animation: bonusXpPulse 0.5s ease-in-out infinite;
        }

        @keyframes bonusXpPulse {
            0%, 100% { transform: translateX(-50%) scale(1); }
            50% { transform: translateX(-50%) scale(1.1); }
        }

        .stat-value {
            font-size: 0.65rem;
            color: rgba(255,255,255,0.85);
            min-width: 50px;
            text-align: right;
            font-family: 'Consolas', monospace;
            font-weight: 600;
            text-shadow: 0 1px 2px rgba(0,0,0,0.5);
        }

        /* Combat Stats Row */
        .pet-combat-stats {
            display: flex;
            justify-content: space-between;
            padding: 0.5rem 0.3rem;
            margin-bottom: 0.5rem;
            background: rgba(0,0,0,0.2);
            border-radius: 10px;
            border: 1px solid rgba(255,255,255,0.05);
        }

        .combat-stat {
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 0.68rem;
            padding: 0 0.3rem;
            position: relative;
        }

        .combat-stat:not(:last-child)::after {
            content: '';
            position: absolute;
            right: -2px;
            top: 20%;
            height: 60%;
            width: 1px;
            background: rgba(255,255,255,0.1);
            pointer-events: none;
        }

        .combat-stat span {
            font-size: 0.85rem;
            filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
        }

        .combat-stat strong {
            color: var(--color-golden);
            font-size: 0.75rem;
            text-shadow: 0 0 8px rgba(245,166,35,0.3);
        }

        /* Tab Navigation */
        .pet-tabs {
            display: flex;
            gap: 3px;
            background: rgba(0,0,0,0.4);
            padding: 4px;
            border-radius: 12px;
            margin-bottom: 0.6rem;
            box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
        }

        .pet-tab {
            flex: 1;
            padding: 0.4rem 0.25rem;
            background: transparent;
            border: none;
            color: rgba(255,255,255,0.5);
            font-size: 0.95rem;
            cursor: pointer;
            border-radius: 9px;
            transition: all 0.25s ease;
            position: relative;
        }

        .pet-tab:hover {
            color: rgba(255,255,255,0.85);
            background: rgba(255,255,255,0.08);
        }

        .pet-tab.active {
            background: linear-gradient(135deg, var(--color-golden), var(--color-sunset-orange));
            color: white;
            box-shadow: 0 3px 12px rgba(245, 166, 35, 0.4), inset 0 1px 0 rgba(255,255,255,0.2);
            text-shadow: 0 1px 2px rgba(0,0,0,0.3);
            transform: scale(1.02);
        }

        /* Tab Content */
        .pet-tab-content {
            display: none;
            animation: tabSlideIn 0.3s ease;
        }

        .pet-tab-content.active { display: block; }

        @keyframes tabSlideIn {
            from { opacity: 0; transform: translateY(-8px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .tab-section { margin-bottom: 0.6rem; }

        .tab-actions {
            display: flex;
            gap: 0.4rem;
        }

        .tab-actions-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 0.4rem;
        }

        /* Co-op Partner Display */
        .coop-partner-display {
            margin-top: 0.5rem;
            padding: 0.5rem;
            background: linear-gradient(135deg, rgba(100, 200, 255, 0.15), rgba(150, 100, 255, 0.15));
            border-radius: 10px;
            border: 1px solid rgba(100, 200, 255, 0.3);
        }
        .coop-status {
            font-size: 0.75rem;
            color: #88ddff;
            text-align: center;
            margin-bottom: 0.3rem;
        }
        .coop-status.looking {
            animation: coopPulse 1.5s infinite;
        }
        @keyframes coopPulse {
            0%, 100% { opacity: 0.7; }
            50% { opacity: 1; }
        }
        .coop-partner-info {
            display: flex;
            align-items: center;
            gap: 0.4rem;
            padding: 0.3rem;
            background: rgba(0,0,0,0.2);
            border-radius: 8px;
        }
        .partner-emoji {
            font-size: 1.2rem;
        }
        .partner-name {
            font-size: 0.75rem;
            color: #fff;
            flex: 1;
        }
        .partner-level {
            font-size: 0.65rem;
            color: #ffdd88;
            background: rgba(255,200,100,0.2);
            padding: 0.1rem 0.3rem;
            border-radius: 4px;
        }
        .partner-hp-bar {
            width: 40px;
            height: 6px;
            background: rgba(0,0,0,0.3);
            border-radius: 3px;
            overflow: hidden;
        }
        .partner-hp-fill {
            height: 100%;
            background: linear-gradient(90deg, #ff6b6b, #ff8888);
            transition: width 0.3s;
        }
        /* Co-op status indicator */
        .coop-status-indicator {
            background: linear-gradient(135deg, rgba(100, 200, 255, 0.2), rgba(150, 100, 255, 0.2));
            border: 1px solid rgba(100, 200, 255, 0.4);
            border-radius: 8px;
            padding: 0.4rem 0.6rem;
            margin-top: 0.5rem;
            text-align: center;
            animation: coopSearchPulse 2s infinite;
        }
        @keyframes coopSearchPulse {
            0%, 100% { opacity: 0.7; }
            50% { opacity: 1; }
        }
        #coopStatusText {
            font-size: 0.75rem;
            color: #88ddff;
        }
        .coop-status-indicator.error {
            background: linear-gradient(135deg, rgba(255, 100, 100, 0.2), rgba(200, 50, 50, 0.2));
            border-color: rgba(255, 100, 100, 0.4);
            animation: none;
        }
        .coop-status-indicator.error #coopStatusText {
            color: #ff8888;
        }
        /* Quick emotes bar */
        .coop-emotes {
            display: flex;
            gap: 0.3rem;
            margin-top: 0.4rem;
            justify-content: center;
        }
        .coop-emote-btn {
            width: 28px;
            height: 28px;
            border: none;
            border-radius: 50%;
            background: rgba(255,255,255,0.1);
            cursor: pointer;
            font-size: 0.9rem;
            transition: all 0.2s;
        }
        .coop-emote-btn:hover {
            background: rgba(255,255,255,0.25);
            transform: scale(1.15);
        }
        /* Partner emote bubble */
        .partner-emote-bubble {
            position: fixed;
            bottom: 170px;
            background: rgba(255,255,255,0.95);
            padding: 0.3rem 0.5rem;
            border-radius: 10px;
            font-size: 1.2rem;
            z-index: 160;
            animation: emoteBubble 2s ease-out forwards;
            pointer-events: none;
        }
        @keyframes emoteBubble {
            0% { opacity: 0; transform: scale(0.5) translateY(10px); }
            15% { opacity: 1; transform: scale(1.1) translateY(0); }
            85% { opacity: 1; transform: scale(1); }
            100% { opacity: 0; transform: scale(0.8) translateY(-20px); }
        }
        /* Subtle sync glow on combo display */
        .shared-combo-display.sync-glow {
            box-shadow: 0 0 20px rgba(255, 200, 100, 0.8), 0 0 40px rgba(255, 150, 50, 0.4);
            transform: scale(1.1);
        }
        /* Subtle sync pulse on partner sprites */
        .partner-pet-sprite.sync-pulse .partner-emoji {
            filter: drop-shadow(0 0 15px rgba(255, 200, 100, 0.9));
        }
        @keyframes syncPop {
            0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
            20% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
            40% { transform: translate(-50%, -50%) scale(1); }
            80% { opacity: 1; }
            100% { opacity: 0; transform: translate(-50%, -50%) scale(0.8) translateY(-30px); }
        }
        @keyframes comboEffectPop {
            0% { opacity: 0; transform: scale(0.5) translateY(0); }
            30% { opacity: 1; transform: scale(1.3) translateY(-10px); }
            60% { transform: scale(1) translateY(-20px); }
            100% { opacity: 0; transform: scale(0.8) translateY(-40px); }
        }
        /* Shared combo display */
        .shared-combo-display {
            position: fixed;
            top: 120px;
            right: 20px;
            background: linear-gradient(135deg, rgba(255, 100, 100, 0.9), rgba(255, 50, 50, 0.9));
            color: white;
            padding: 0.4rem 0.8rem;
            border-radius: 15px;
            font-size: 0.75rem;
            font-weight: bold;
            z-index: 1000;
            display: none;
            text-shadow: 0 1px 2px rgba(0,0,0,0.3);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
        .shared-combo-display.high {
            animation: comboFire 0.5s infinite;
        }
        @keyframes comboFire {
            0%, 100% { box-shadow: 0 0 10px rgba(255, 100, 0, 0.5); }
            50% { box-shadow: 0 0 20px rgba(255, 50, 0, 0.8); }
        }
        /* Session stats display */
        .coop-session-stats {
            margin-top: 0.4rem;
            font-size: 0.6rem;
            color: rgba(255,255,255,0.7);
            display: flex;
            justify-content: space-around;
        }
        .coop-stat {
            text-align: center;
        }
        .coop-stat-value {
            font-weight: bold;
            color: #ffdd88;
        }
        .coop-bonus-indicator {
            position: fixed;
            top: 80px;
            right: 20px;
            background: linear-gradient(135deg, rgba(100, 200, 255, 0.9), rgba(150, 100, 255, 0.9));
            color: white;
            padding: 0.5rem 1rem;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: bold;
            z-index: 1000;
            display: none;
            animation: coopBonusPulse 2s infinite;
        }
        @keyframes coopBonusPulse {
            0%, 100% { transform: scale(1); box-shadow: 0 0 10px rgba(100, 200, 255, 0.5); }
            50% { transform: scale(1.05); box-shadow: 0 0 20px rgba(100, 200, 255, 0.8); }
        }
        /* Partner pet sprite on screen - matches main pet style */
        .partner-pet-sprite {
            position: absolute;
            bottom: 10px;
            font-size: 2rem;
            z-index: 9991;
            transition: left 0.3s ease-out;
            pointer-events: none;
        }
        .partner-pet-sprite .partner-emoji {
            font-size: 2.2rem;
            filter: drop-shadow(0 0 8px rgba(100, 200, 255, 0.6));
            display: block;
        }
        .partner-pet-sprite .partner-name-tag {
            position: absolute;
            top: -22px;
            left: 50%;
            transform: translateX(-50%);
            background: linear-gradient(135deg, rgba(100, 200, 255, 0.3), rgba(150, 100, 255, 0.3));
            border: 1px solid rgba(100, 200, 255, 0.5);
            padding: 2px 8px;
            border-radius: 10px;
            font-size: 0.6rem;
            color: #fff;
            white-space: nowrap;
            text-shadow: 0 1px 2px rgba(0,0,0,0.5);
        }
        .partner-pet-sprite .partner-country-tag {
            position: absolute;
            top: -8px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 0.5rem;
            font-weight: bold;
            white-space: nowrap;
            text-shadow: 0 1px 3px rgba(0,0,0,0.8), 0 0 8px currentColor;
            letter-spacing: 0.5px;
        }
        .partner-pet-sprite .partner-hp-mini {
            position: absolute;
            bottom: -8px;
            left: 50%;
            transform: translateX(-50%);
            width: 40px;
            height: 4px;
            background: rgba(0,0,0,0.5);
            border-radius: 2px;
            overflow: hidden;
        }
        .partner-pet-sprite .partner-hp-mini-fill {
            height: 100%;
            background: linear-gradient(90deg, #66dd66, #88ff88);
            transition: width 0.3s;
        }
        .partner-pet-sprite::before {
            content: '';
            position: absolute;
            bottom: -12px;
            left: 50%;
            transform: translateX(-50%);
            width: 35px;
            height: 10px;
            background: radial-gradient(ellipse, rgba(100, 200, 255, 0.4) 0%, transparent 70%);
            border-radius: 50%;
        }
        .partner-pet-sprite.walking .partner-emoji {
            animation: partnerWalk 0.4s ease-in-out infinite;
        }
        @keyframes partnerWalk {
            0%, 100% { transform: translateY(0) rotate(-2deg); }
            50% { transform: translateY(-4px) rotate(2deg); }
        }
        .partner-pet-sprite.attacking .partner-emoji {
            animation: partnerAttack 0.3s ease;
        }
        @keyframes partnerAttack {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.4) translateY(-8px); }
        }
        .partner-pet-sprite.flipped .partner-emoji {
            transform: scaleX(-1);
        }
        .partner-damage-popup {
            position: fixed;
            color: #88ddff;
            font-weight: bold;
            font-size: 0.9rem;
            z-index: 150;
            animation: partnerDmgFloat 1s ease-out forwards;
            pointer-events: none;
            text-shadow: 0 0 5px rgba(0,0,0,0.5);
        }
        @keyframes partnerDmgFloat {
            0% { opacity: 1; transform: translateY(0); }
            100% { opacity: 0; transform: translateY(-30px); }
        }

        /* Pet Buttons */
        .pet-btn {
            flex: 1;
            padding: 0.5rem 0.45rem;
            border: none;
            border-radius: 10px;
            background: linear-gradient(145deg, rgba(255,255,255,0.12), rgba(255,255,255,0.06));
            color: white;
            font-size: 0.72rem;
            cursor: pointer;
            transition: all 0.25s ease;
            font-family: var(--font-body);
            position: relative;
            overflow: hidden;
            border: 1px solid rgba(255,255,255,0.08);
            box-shadow: 0 2px 8px rgba(0,0,0,0.2);
        }

        .pet-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
            transition: left 0.5s ease;
            pointer-events: none;
        }

        .pet-btn:hover::before {
            left: 100%;
        }

        .pet-btn:hover {
            background: linear-gradient(145deg, rgba(255,255,255,0.2), rgba(255,255,255,0.1));
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(0,0,0,0.3);
            border-color: rgba(255,255,255,0.15);
        }

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

        .pet-btn-danger:hover {
            background: linear-gradient(145deg, rgba(231, 76, 60, 0.4), rgba(192, 57, 43, 0.4));
            border-color: rgba(231, 76, 60, 0.4);
        }

        .pet-btn.primary {
            background: linear-gradient(135deg, #27ae60, #2ecc71, #58d68d);
            font-weight: 600;
            border-color: rgba(46, 204, 113, 0.3);
            box-shadow: 0 3px 12px rgba(46, 204, 113, 0.25), inset 0 1px 0 rgba(255,255,255,0.2);
        }

        .pet-btn.primary:hover {
            background: linear-gradient(135deg, #2ecc71, #58d68d, #27ae60);
            box-shadow: 0 5px 20px rgba(46, 204, 113, 0.4), inset 0 1px 0 rgba(255,255,255,0.3);
            border-color: rgba(46, 204, 113, 0.5);
        }

        .upgrade-btn, .quest-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            padding: 0.6rem 0.35rem;
        }

        .upgrade-btn .btn-icon, .quest-btn .btn-icon {
            font-size: 1.2rem;
            filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
            transition: transform 0.3s ease;
        }

        .upgrade-btn:hover .btn-icon, .quest-btn:hover .btn-icon {
            transform: scale(1.15);
        }

        .upgrade-btn .btn-label, .quest-btn .btn-label {
            font-size: 0.62rem;
            opacity: 0.9;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .upgrade-btn {
            background: linear-gradient(145deg, rgba(52, 152, 219, 0.35), rgba(41, 128, 185, 0.35));
            border: 1px solid rgba(52, 152, 219, 0.35);
            box-shadow: 0 3px 10px rgba(52, 152, 219, 0.2), inset 0 1px 0 rgba(255,255,255,0.1);
        }

        .upgrade-btn:hover {
            background: linear-gradient(145deg, rgba(52, 152, 219, 0.55), rgba(41, 128, 185, 0.55));
            border-color: rgba(52, 152, 219, 0.7);
            box-shadow: 0 5px 20px rgba(52, 152, 219, 0.35), inset 0 1px 0 rgba(255,255,255,0.2);
        }

        .quest-btn {
            background: linear-gradient(145deg, rgba(155, 89, 182, 0.35), rgba(142, 68, 173, 0.35));
            border: 1px solid rgba(155, 89, 182, 0.35);
            box-shadow: 0 3px 10px rgba(155, 89, 182, 0.2), inset 0 1px 0 rgba(255,255,255,0.1);
        }

        .quest-btn:hover {
            background: linear-gradient(145deg, rgba(155, 89, 182, 0.55), rgba(142, 68, 173, 0.55));
            border-color: rgba(155, 89, 182, 0.7);
            box-shadow: 0 5px 20px rgba(155, 89, 182, 0.35), inset 0 1px 0 rgba(255,255,255,0.2);
        }

        .daily-glow {
            animation: dailyGlow 2s ease-in-out infinite;
            position: relative;
        }

        .daily-glow::after {
            content: '✨';
            position: absolute;
            top: -5px;
            right: -5px;
            font-size: 0.7rem;
            animation: sparkleFloat 2s ease-in-out infinite;
            pointer-events: none;
        }

        @keyframes sparkleFloat {
            0%, 100% { transform: translateY(0) scale(1); opacity: 1; }
            50% { transform: translateY(-3px) scale(1.2); opacity: 0.7; }
        }

        @keyframes dailyGlow {
            0%, 100% { box-shadow: 0 0 8px rgba(241, 196, 15, 0.4), 0 3px 10px rgba(0,0,0,0.2); }
            50% { box-shadow: 0 0 20px rgba(241, 196, 15, 0.7), 0 0 35px rgba(241, 196, 15, 0.4), 0 3px 10px rgba(0,0,0,0.2); }
        }

        /* Combat Log */
        .combat-log {
            position: absolute;
            bottom: 85px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 5px;
            pointer-events: none;
        }

        .combat-log-entry {
            background: linear-gradient(135deg, rgba(0,0,0,0.8), rgba(20,20,40,0.85));
            color: white;
            padding: 0.4rem 1rem;
            border-radius: 25px;
            font-size: 0.78rem;
            white-space: nowrap;
            animation: combatLogFade 3s ease-out forwards;
            font-family: var(--font-body);
            border: 1px solid rgba(255,255,255,0.1);
            box-shadow: 0 4px 15px rgba(0,0,0,0.3);
            backdrop-filter: blur(5px);
        }

        @keyframes combatLogFade {
            0% { opacity: 1; transform: translateY(0); }
            70% { opacity: 1; }
            100% { opacity: 0; transform: translateY(-20px); }
        }

        /* ============================================
           ENEMY SPRITES - ENHANCED VISUALS
           ============================================ */
        .enemy-sprite {
            position: absolute;
            bottom: 10px;
            cursor: default;
            pointer-events: auto;
            z-index: 9991;
            transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .enemy-sprite::before {
            content: '';
            position: absolute;
            bottom: -6px;
            left: 50%;
            transform: translateX(-50%);
            width: 30px;
            height: 10px;
            background: radial-gradient(ellipse, rgba(0,0,0,0.35) 0%, transparent 70%);
            border-radius: 50%;
        }

        .enemy-sprite.walking {
            animation: enemyWalk 0.5s ease-in-out infinite;
        }

        .enemy-sprite.hurt {
            animation: enemyHurt 0.35s ease;
        }

        .enemy-sprite.dying {
            animation: enemyDie 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
        }

        @keyframes enemyWalk {
            0%, 100% { transform: translateY(0) rotate(0deg); }
            25% { transform: translateY(-4px) rotate(-2deg); }
            50% { transform: translateY(-2px) rotate(0deg); }
            75% { transform: translateY(-4px) rotate(2deg); }
        }

        @keyframes enemyHurt {
            0% { transform: scale(1); filter: none; }
            20% { transform: scale(0.85) rotate(-10deg); filter: brightness(2) sepia(1) hue-rotate(-50deg); }
            40% { transform: scale(1.1) rotate(5deg); filter: brightness(1.5); }
            60% { transform: scale(0.95); filter: brightness(1.2); }
            100% { transform: scale(1); filter: none; }
        }

        @keyframes enemyDie {
            0% { opacity: 1; transform: scale(1) rotate(0deg) translateY(0); }
            30% { opacity: 1; transform: scale(1.2) rotate(-15deg) translateY(-20px); filter: brightness(1.5); }
            100% { opacity: 0; transform: scale(0) rotate(360deg) translateY(-80px); filter: brightness(2); }
        }

        .enemy-emoji {
            font-size: 2.2rem;
            filter: drop-shadow(0 3px 6px rgba(0,0,0,0.5)) drop-shadow(0 0 10px rgba(255,50,50,0.15));
            transition: transform 0.2s ease, filter 0.3s ease;
            animation: enemyIdle 2.5s ease-in-out infinite;
        }

        @keyframes enemyIdle {
            0%, 100% { transform: scale(1) rotate(0deg); }
            50% { transform: scale(1.03) rotate(1deg); }
        }

        .enemy-sprite:hover .enemy-emoji {
            filter: drop-shadow(0 3px 6px rgba(0,0,0,0.5)) drop-shadow(0 0 20px rgba(255,100,100,0.4));
            transform: scale(1.1);
        }

        .enemy-sprite.flipped .enemy-emoji {
            transform: scaleX(-1);
        }

        /* Shiny enemy sparkle effect */
        .shiny-enemy .enemy-emoji {
            animation: enemyIdle 2.5s ease-in-out infinite, shinySparkle 1s ease-in-out infinite;
        }

        @keyframes shinySparkle {
            0%, 100% { filter: drop-shadow(0 3px 6px rgba(0,0,0,0.5)) drop-shadow(0 0 15px rgba(0,255,255,0.4)); }
            50% { filter: drop-shadow(0 3px 6px rgba(0,0,0,0.5)) drop-shadow(0 0 30px rgba(0,255,255,0.8)) drop-shadow(0 0 50px rgba(255,255,0,0.3)); }
        }

        .enemy-hp-bar {
            position: absolute;
            top: -24px;
            left: 50%;
            transform: translateX(-50%);
            width: 45px;
            height: 7px;
            background: linear-gradient(180deg, rgba(0,0,0,0.7) 0%, rgba(30,0,0,0.8) 100%);
            border-radius: 4px;
            overflow: hidden;
            border: 1px solid rgba(255,100,100,0.3);
            box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px 2px rgba(0,0,0,0.5);
        }

        .enemy-hp-fill {
            height: 100%;
            background: linear-gradient(180deg, #ff6b6b 0%, #e74c3c 50%, #c0392b 100%);
            border-radius: 3px;
            transition: width 0.2s ease;
            box-shadow: 0 0 8px rgba(231, 76, 60, 0.5), inset 0 1px 0 rgba(255,255,255,0.2);
        }

        .enemy-name-label {
            position: absolute;
            top: -40px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 0.6rem;
            font-weight: 700;
            color: #ff8888;
            text-shadow: 0 0 10px rgba(255,100,100,0.5), 1px 1px 2px rgba(0,0,0,0.9);
            white-space: nowrap;
            font-family: var(--font-display);
            background: linear-gradient(180deg, rgba(40,0,0,0.8) 0%, rgba(20,0,0,0.9) 100%);
            padding: 3px 8px;
            border-radius: 4px;
            border: 1px solid rgba(255,100,100,0.3);
        }

        .enemy-name-label.boss {
            color: #FFD700;
            font-size: 0.75rem;
            background: linear-gradient(180deg, rgba(100,0,0,0.9) 0%, rgba(60,0,0,0.95) 100%);
            border: 2px solid #FFD700;
            box-shadow: 0 0 15px rgba(255,215,0,0.4), inset 0 0 20px rgba(255,215,0,0.1);
            animation: bossGlow 2s ease-in-out infinite;
        }

        @keyframes bossGlow {
            0%, 100% { box-shadow: 0 0 15px rgba(255,215,0,0.4), inset 0 0 20px rgba(255,215,0,0.1); }
            50% { box-shadow: 0 0 25px rgba(255,215,0,0.7), inset 0 0 30px rgba(255,215,0,0.2); }
        }

        .enemy-name-label.shiny {
            color: #00FFFF;
            background: linear-gradient(180deg, rgba(0,60,80,0.9) 0%, rgba(0,40,60,0.95) 100%);
            border: 1px solid #00FFFF;
            box-shadow: 0 0 10px rgba(0,255,255,0.3);
        }

        .enemy-level {
            position: absolute;
            top: -6px;
            right: -6px;
            background: #333;
            color: #e74c3c;
            font-size: 0.55rem;
            font-weight: 700;
            width: 14px;
            height: 14px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #e74c3c;
        }

        .enemy-damage-popup {
            position: absolute;
            top: -15px;
            left: 50%;
            transform: translateX(-50%);
            font-weight: 700;
            font-size: 0.8rem;
            color: #ff4444;
            opacity: 0;
            pointer-events: none;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
        }

        .enemy-damage-popup.show {
            animation: damagePopup 0.8s ease-out forwards;
        }

        .enemy-damage-popup.crit {
            color: #ff0 !important;
            font-size: 1rem;
            text-shadow: 0 0 10px rgba(255, 255, 0, 0.8), 2px 2px 4px rgba(0,0,0,0.8);
        }

        .enemy-damage-popup.poison {
            color: #9b59b6 !important;
        }

        .enemy-sprite.stunned {
            filter: brightness(1.5) saturate(0.5);
            animation: stunnedShake 0.1s linear infinite;
        }

        .enemy-sprite.fleeing {
            animation: fleeingAnim 0.2s ease-in-out infinite;
        }

        .enemy-sprite.poisoned {
            filter: hue-rotate(90deg) saturate(1.5);
        }

        .enemy-sprite.poisoned .enemy-emoji {
            animation: poisonPulse 1s ease-in-out infinite;
        }

        @keyframes poisonPulse {
            0%, 100% { filter: drop-shadow(0 0 3px #9b59b6); }
            50% { filter: drop-shadow(0 0 8px #9b59b6); }
        }

        @keyframes stunnedShake {
            0%, 100% { transform: translateX(-1px); }
            50% { transform: translateX(1px); }
        }

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

        /* Enraged enemy (Golem mechanic) */
        .enemy-sprite.enraged {
            filter: drop-shadow(0 0 8px rgba(255, 50, 0, 0.8)) saturate(1.5);
            animation: enragedPulse 0.5s ease-in-out infinite;
        }

        @keyframes enragedPulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.05); }
        }

        /* Shadow clone enemy */
        .enemy-sprite.shadow-clone {
            filter: brightness(0.5) saturate(0);
            opacity: 0.7;
        }

        /* Mini slime from split */
        .enemy-sprite.mini-slime {
            transform: scale(0.7);
        }

        /* Boss Enemy Styles */
        .boss-enemy {
            filter: drop-shadow(0 0 10px rgba(255, 100, 0, 0.6));
        }

        .boss-enemy .boss-emoji {
            font-size: 3rem;
            animation: bossGlow 1s ease-in-out infinite alternate;
        }

        .boss-crown {
            position: absolute;
            top: -20px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 1.2rem;
            animation: crownBounce 0.5s ease-in-out infinite;
        }

        .boss-name {
            position: absolute;
            bottom: -20px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 0.65rem;
            font-weight: 700;
            color: #ff6600;
            white-space: nowrap;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
        }

        .boss-level {
            background: linear-gradient(135deg, #ff6600, #ff0000) !important;
            color: white !important;
            border-color: #ff6600 !important;
            width: auto !important;
            padding: 2px 5px;
            font-size: 0.5rem;
        }

        .boss-hp-bar {
            width: 50px !important;
            height: 5px !important;
        }

        .boss-hp-fill {
            background: linear-gradient(90deg, #ff0000, #ff6600) !important;
        }

        @keyframes bossGlow {
            from { filter: drop-shadow(0 0 5px rgba(255, 100, 0, 0.5)); }
            to { filter: drop-shadow(0 0 15px rgba(255, 100, 0, 0.9)); }
        }

        @keyframes crownBounce {
            0%, 100% { transform: translateX(-50%) translateY(0); }
            50% { transform: translateX(-50%) translateY(-3px); }
        }

        /* Screen shake for boss appearance */
        @keyframes screenShake {
            0%, 100% { transform: translateX(0); }
            10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
            20%, 40%, 60%, 80% { transform: translateX(5px); }
        }

        .screen-shake {
            animation: screenShake 0.5s ease;
        }

        /* Special Ability Section */
        .pet-special-section {
            background: rgba(255, 215, 0, 0.1);
            border: 1px solid rgba(255, 215, 0, 0.3);
            border-radius: 12px;
            padding: 0.75rem;
            margin: 0.75rem 0;
            text-align: center;
        }

        .pet-special-btn {
            background: linear-gradient(135deg, #9b59b6, #8e44ad);
            border: none;
            border-radius: 10px;
            padding: 0.6rem 1.2rem;
            color: white;
            font-weight: 700;
            font-family: var(--font-display);
            cursor: pointer;
            transition: all 0.2s ease;
            width: 100%;
            font-size: 0.9rem;
        }

        .pet-special-btn:hover:not(.on-cooldown) {
            transform: translateY(-2px);
            box-shadow: 0 5px 20px rgba(155, 89, 182, 0.4);
        }

        .pet-special-btn.ready {
            animation: specialReady 2s ease-in-out infinite;
        }

        .pet-special-btn.on-cooldown {
            background: #555;
            cursor: not-allowed;
            opacity: 0.6;
        }

        @keyframes specialReady {
            0%, 100% { box-shadow: 0 0 10px rgba(155, 89, 182, 0.3); }
            50% { box-shadow: 0 0 20px rgba(155, 89, 182, 0.7); }
        }

        .special-icon {
            margin-right: 0.4rem;
        }

        .special-desc {
            font-size: 0.7rem;
            color: rgba(255, 255, 255, 0.6);
            margin-top: 0.4rem;
        }

        /* Inventory Section */
        .pet-inventory-section {
            margin: 0.75rem 0;
        }

        .inventory-header {
            font-size: 0.8rem;
            color: rgba(255, 255, 255, 0.8);
            margin-bottom: 0.5rem;
            font-weight: 600;
        }

        .pet-inventory {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 0.4rem;
        }

        .inventory-slot {
            aspect-ratio: 1;
            background: rgba(0, 0, 0, 0.3);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 32px;
        }

        .inventory-slot.filled {
            cursor: pointer;
            transition: all 0.2s ease;
            background: rgba(255, 255, 255, 0.1);
        }

        .inventory-slot.filled:hover {
            transform: scale(1.1);
            background: rgba(255, 215, 0, 0.2);
            border-color: var(--color-golden);
        }

        .item-emoji {
            font-size: 1.2rem;
        }

        /* Pet Selection Modal */
        .pet-select-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.9);
            z-index: 100001;
            align-items: center;
            justify-content: center;
        }

        .pet-select-modal.active {
            display: flex;
        }

        .pet-select-content {
            background: linear-gradient(145deg, #1a1a2e 0%, #16213e 100%);
            border-radius: 20px;
            padding: 1rem 1.25rem;
            max-width: 420px;
            width: 92%;
            max-height: 80vh;
            overflow-y: auto;
            text-align: center;
            box-shadow: 0 25px 80px rgba(0,0,0,0.5), 0 0 100px rgba(245, 166, 35, 0.15);
            border: 1px solid rgba(255,255,255,0.1);
            animation: modalSlideIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        /* ==========================================
           PET SELECT MODAL - RESPONSIVE STYLES
           Ensures modal fits all screens & devices
           ========================================== */

        /* Small phones */
        @media (max-width: 380px) {
            .pet-select-content {
                width: 96%;
                padding: 0.75rem;
                border-radius: 14px;
            }
            .pet-select-logo { font-size: 0.7rem; letter-spacing: 1px; }
            .pet-select-title { font-size: 1.1rem; }
            .pet-select-subtitle { font-size: 0.7rem; }
            .pet-options { gap: 0.25rem; }
            .pet-option { padding: 0.35rem 0.2rem; border-radius: 8px; }
            .pet-option-emoji { font-size: 1.4rem; }
            .pet-option-name { font-size: 0.55rem; }
            .pet-option-special { display: none; }
            .pet-name-input { padding: 0.5rem; font-size: 0.85rem; }
            .pet-select-btn { padding: 0.55rem 1rem; font-size: 0.85rem; }
        }

        /* Very small phones */
        @media (max-width: 320px) {
            .pet-select-content { padding: 0.5rem; width: 98%; }
            .pet-select-logo { display: none; }
            .pet-select-title { font-size: 1rem; }
            .pet-select-subtitle { font-size: 0.65rem; margin-bottom: 0.5rem; }
            .pet-options { gap: 0.2rem; margin-bottom: 0.5rem; }
            .pet-option { padding: 0.25rem; }
            .pet-option-emoji { font-size: 1.2rem; }
            .pet-option-name { font-size: 0.5rem; }
            .pet-name-input { padding: 0.4rem; font-size: 0.8rem; margin-bottom: 0.4rem; }
            .pet-select-btn { padding: 0.45rem 0.8rem; font-size: 0.8rem; }
        }

        /* Short screens (landscape tablets, small laptops) */
        @media (max-height: 600px) {
            .pet-select-content {
                max-height: 92vh;
                padding: 0.75rem 1rem;
            }
            .pet-select-logo { font-size: 0.75rem; margin-bottom: 0.15rem; }
            .pet-select-title { font-size: 1.1rem; margin-bottom: 0.15rem; }
            .pet-select-subtitle { font-size: 0.7rem; margin-bottom: 0.5rem; }
            .pet-options { gap: 0.3rem; margin-bottom: 0.5rem; }
            .pet-option { padding: 0.35rem 0.2rem; }
            .pet-option-emoji { font-size: 1.5rem; margin-bottom: 0.1rem; }
            .pet-option-name { font-size: 0.6rem; }
            .pet-option-special { display: none; }
            .pet-name-input { padding: 0.5rem; margin-bottom: 0.5rem; }
            .pet-select-btn { padding: 0.5rem 1.2rem; font-size: 0.85rem; }
        }

        /* Very short screens (landscape phones) */
        @media (max-height: 450px) {
            .pet-select-modal {
                align-items: flex-start;
                padding: 0.25rem;
                overflow-y: auto;
            }
            .pet-select-content {
                max-height: none;
                padding: 0.5rem 0.75rem;
                margin: 0.25rem auto;
                border-radius: 10px;
            }
            .pet-select-logo { display: none; }
            .pet-select-title { font-size: 0.95rem; margin-bottom: 0.1rem; }
            .pet-select-subtitle { font-size: 0.65rem; margin-bottom: 0.35rem; }
            .pet-options { gap: 0.2rem; margin-bottom: 0.35rem; }
            .pet-option { padding: 0.25rem 0.15rem; border-radius: 6px; }
            .pet-option-emoji { font-size: 1.2rem; margin-bottom: 0.05rem; }
            .pet-option-name { font-size: 0.5rem; }
            .pet-option-special { display: none; }
            .pet-name-input { padding: 0.4rem; font-size: 0.8rem; margin-bottom: 0.35rem; border-radius: 6px; }
            .pet-select-btn { padding: 0.4rem 0.9rem; font-size: 0.8rem; }
        }

        /* Extremely short screens */
        @media (max-height: 350px) {
            .pet-select-content { padding: 0.35rem 0.5rem; }
            .pet-select-title { font-size: 0.85rem; }
            .pet-select-subtitle { display: none; }
            .pet-options { gap: 0.15rem; margin-bottom: 0.25rem; }
            .pet-option { padding: 0.2rem; }
            .pet-option-emoji { font-size: 1rem; }
            .pet-option-name { font-size: 0.45rem; }
            .pet-name-input { padding: 0.3rem; font-size: 0.75rem; margin-bottom: 0.25rem; }
            .pet-select-btn { padding: 0.35rem 0.7rem; font-size: 0.75rem; }
        }

        /* Landscape phones - combined width and height */
        @media (max-width: 850px) and (max-height: 420px) {
            .pet-select-content {
                max-width: 85%;
            }
            .pet-options {
                width: 100%;
            }
            .pet-name-input {
                width: 70%;
                margin-left: auto;
                margin-right: auto;
            }
        }

        .pet-select-logo {
            font-family: var(--font-display);
            font-size: 0.85rem;
            font-weight: 800;
            letter-spacing: 3px;
            color: transparent;
            background: linear-gradient(135deg, #f5a623 0%, #ffd700 50%, #f5a623 100%);
            -webkit-background-clip: text;
            background-clip: text;
            text-shadow: 0 0 30px rgba(245, 166, 35, 0.5);
            margin-bottom: 0.25rem;
            animation: logoShine 3s ease-in-out infinite;
        }

        @keyframes logoShine {
            0%, 100% { filter: brightness(1); }
            50% { filter: brightness(1.3); }
        }

        .pet-select-title {
            font-family: var(--font-display);
            font-size: 1.3rem;
            color: white;
            margin-bottom: 0.25rem;
            text-shadow: 0 2px 10px rgba(0,0,0,0.3);
        }

        .pet-select-subtitle {
            color: rgba(255,255,255,0.8);
            margin-bottom: 0.75rem;
            font-size: 0.8rem;
            line-height: 1.3;
        }

        .pet-options {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 0.4rem;
            margin-bottom: 0.75rem;
        }

        .pet-option {
            background: rgba(255,255,255,0.05);
            border: 2px solid transparent;
            border-radius: 12px;
            padding: 0.5rem 0.3rem;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .pet-option:hover {
            background: rgba(255,255,255,0.1);
            transform: translateY(-2px);
        }

        .pet-option.selected {
            border-color: var(--color-golden);
            background: rgba(245, 166, 35, 0.15);
        }

        .pet-option-emoji {
            font-size: 1.8rem;
            display: block;
            margin-bottom: 0.15rem;
        }

        .pet-option-name {
            font-size: 0.65rem;
            color: rgba(255,255,255,0.8);
            font-family: var(--font-display);
        }

        .pet-option-special {
            display: block;
            font-size: 0.5rem;
            color: rgba(155, 89, 182, 0.9);
            margin-top: 0.1rem;
        }

        .pet-name-input {
            width: 100%;
            padding: 0.6rem 0.8rem;
            border: 2px solid rgba(255,255,255,0.1);
            border-radius: 10px;
            background: rgba(255,255,255,0.05);
            color: white;
            font-size: 0.95rem;
            text-align: center;
            margin-bottom: 0.6rem;
            font-family: var(--font-body);
            transition: border-color 0.2s ease;
        }

        .pet-name-input:focus {
            outline: none;
            border-color: var(--color-golden);
        }

        .pet-name-input::placeholder {
            color: rgba(255,255,255,0.4);
        }

        .pet-select-btn {
            background: linear-gradient(135deg, var(--color-golden), var(--color-sunset-orange));
            color: white;
            border: none;
            padding: 0.65rem 1.5rem;
            border-radius: 50px;
            font-size: 0.95rem;
            font-weight: 600;
            cursor: pointer;
            font-family: var(--font-display);
            transition: all 0.2s ease;
            box-shadow: 0 4px 20px rgba(245, 166, 35, 0.4);
            text-align: center;
        }

        .pet-select-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 25px rgba(245, 166, 35, 0.5);
        }

        .pet-select-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            transform: none;
        }

        /* Combo Display */
        .combo-display {
            position: fixed;
            right: 20px;
            bottom: 120px;
            display: flex;
            flex-direction: column;
            align-items: center;
            opacity: 0;
            transform: scale(0.5);
            transition: all 0.2s ease;
            pointer-events: none;
            z-index: 9995;
        }

        .combo-display.active {
            opacity: 1;
            transform: scale(1);
        }

        .combo-count {
            font-size: 3rem;
            font-weight: 900;
            font-family: var(--font-display);
            color: #ff6b00;
            text-shadow: 0 0 20px rgba(255, 107, 0, 0.8), 2px 2px 4px rgba(0,0,0,0.5);
            animation: comboPulse 0.3s ease-in-out;
        }

        .combo-display.active .combo-count {
            animation: comboPulse 0.3s ease-in-out;
        }

        .combo-label {
            font-size: 0.9rem;
            font-weight: 700;
            color: #ffaa00;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
        }

        @keyframes comboPulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.2); }
        }

        /* Achievement Popup */
        .achievement-popup {
            position: fixed;
            top: 80px;
            right: -350px;
            width: 300px;
            background: linear-gradient(135deg, #1a1a2e 0%, #2d2d44 100%);
            border: 2px solid var(--color-golden);
            border-radius: 16px;
            padding: 1rem;
            display: flex;
            align-items: center;
            gap: 1rem;
            z-index: 100002;
            transition: right 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            box-shadow: 0 10px 40px rgba(0,0,0,0.5), 0 0 30px rgba(245, 166, 35, 0.3);
        }

        .achievement-popup.show {
            right: 20px;
        }

        .achievement-icon {
            font-size: 2.5rem;
            animation: achievementBounce 0.5s ease-in-out;
        }

        @keyframes achievementBounce {
            0%, 100% { transform: scale(1) rotate(0deg); }
            25% { transform: scale(1.2) rotate(-10deg); }
            50% { transform: scale(1.3) rotate(10deg); }
            75% { transform: scale(1.1) rotate(-5deg); }
        }

        .achievement-title {
            font-family: var(--font-display);
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--color-golden);
        }

        .achievement-desc {
            font-size: 0.85rem;
            color: rgba(255,255,255,0.7);
        }

        /* Pet Modals (Stats, Achievements, Bestiary) */
        .pet-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.85);
            z-index: 100001;
            align-items: center;
            justify-content: center;
        }

        .pet-modal.active {
            display: flex;
        }

        .pet-modal-content {
            background: linear-gradient(145deg, #1a1a2e 0%, #16213e 100%);
            border-radius: 24px;
            padding: 2rem;
            max-width: 600px;
            max-height: 80vh;
            width: 90%;
            overflow-y: auto;
            box-shadow: 0 25px 80px rgba(0,0,0,0.5), 0 0 100px rgba(245, 166, 35, 0.15);
            border: 1px solid rgba(255,255,255,0.1);
            animation: modalSlideIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            position: relative;
        }

        .pet-modal-close {
            position: absolute;
            top: 1rem;
            right: 1rem;
            background: none;
            border: none;
            color: rgba(255,255,255,0.6);
            font-size: 1.5rem;
            cursor: pointer;
            transition: color 0.2s ease;
        }

        .pet-modal-close:hover {
            color: white;
        }

        .pet-modal-title {
            font-family: var(--font-display);
            font-size: 1.6rem;
            color: var(--color-golden);
            margin-bottom: 1.5rem;
            text-align: center;
        }

        /* Pet Modal Stats Grid (renamed to avoid conflict with main page stats-grid) */
        .pet-stats-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1rem;
        }

        .pet-stat-item {
            background: rgba(255,255,255,0.05);
            border-radius: 12px;
            padding: 1rem;
            text-align: center;
        }

        .stat-item-icon {
            font-size: 1.5rem;
            margin-bottom: 0.3rem;
        }

        .stat-item-value {
            font-size: 1.4rem;
            font-weight: 700;
            color: var(--color-golden);
            font-family: var(--font-display);
        }

        .stat-item-label {
            font-size: 0.75rem;
            color: rgba(255,255,255,0.6);
        }

        /* Achievements Grid */
        .achievements-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 0.75rem;
        }

        .achievement-item {
            background: rgba(255,255,255,0.05);
            border-radius: 12px;
            padding: 0.75rem;
            text-align: center;
            transition: all 0.2s ease;
            border: 2px solid transparent;
        }

        .achievement-item.unlocked {
            background: rgba(255, 215, 0, 0.1);
            border-color: rgba(255, 215, 0, 0.3);
        }

        .achievement-item.locked {
            opacity: 0.4;
            filter: grayscale(1);
        }

        .achievement-item-icon {
            font-size: 1.8rem;
            display: block;
            margin-bottom: 0.3rem;
        }

        .achievement-item-name {
            font-size: 0.65rem;
            font-weight: 600;
            color: rgba(255,255,255,0.9);
        }

        /* Bestiary Grid */
        .bestiary-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 0.75rem;
        }

        .bestiary-item {
            background: rgba(255,255,255,0.05);
            border-radius: 12px;
            padding: 1rem;
            text-align: center;
            transition: all 0.2s ease;
        }

        .bestiary-item.encountered {
            background: rgba(255, 100, 100, 0.1);
            border: 1px solid rgba(255, 100, 100, 0.3);
        }

        .bestiary-item.unknown {
            opacity: 0.3;
        }

        .bestiary-item.unknown .bestiary-emoji {
            filter: brightness(0);
        }

        .bestiary-emoji {
            font-size: 2rem;
            display: block;
            margin-bottom: 0.3rem;
        }

        .bestiary-name {
            font-size: 0.7rem;
            font-weight: 600;
            color: rgba(255,255,255,0.8);
        }

        .bestiary-kills {
            font-size: 0.6rem;
            color: rgba(255,255,255,0.5);
            margin-top: 0.2rem;
        }

        /* Equipment Display in Panel */
        .pet-equipment {
            display: flex;
            justify-content: center;
            gap: 0.5rem;
            margin-top: 0.5rem;
            padding: 0.5rem;
            background: rgba(0,0,0,0.2);
            border-radius: 10px;
        }

        .equip-slot {
            width: 36px;
            height: 36px;
            background: rgba(255,255,255,0.1);
            border: 2px solid rgba(255,255,255,0.2);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
        }

        .equip-slot.has-item {
            border-color: var(--color-golden);
            background: rgba(255,215,0,0.1);
        }

        /* Equipment Modal */
        .equip-current {
            display: flex;
            justify-content: center;
            gap: 1rem;
            margin-bottom: 1.5rem;
            padding: 1rem;
            background: rgba(0,0,0,0.3);
            border-radius: 12px;
        }

        .equip-current-slot {
            text-align: center;
        }

        .equip-current-slot .slot-icon {
            width: 50px;
            height: 50px;
            background: rgba(255,255,255,0.1);
            border: 2px solid rgba(255,255,255,0.3);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.8rem;
            margin-bottom: 0.3rem;
        }

        .equip-current-slot .slot-label {
            font-size: 0.7rem;
            color: rgba(255,255,255,0.6);
        }

        .equip-section-title {
            font-size: 0.9rem;
            color: rgba(255,255,255,0.7);
            margin-bottom: 0.75rem;
            text-align: center;
        }

        .equip-inventory {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 0.5rem;
            max-height: 300px;
            overflow-y: auto;
        }

        .equip-item {
            background: rgba(255,255,255,0.05);
            border: 2px solid transparent;
            border-radius: 10px;
            padding: 0.5rem;
            text-align: center;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .equip-item:hover {
            background: rgba(255,255,255,0.1);
            transform: translateY(-2px);
        }

        .equip-item.equipped {
            border-color: var(--color-golden);
            background: rgba(255,215,0,0.15);
        }

        .equip-item.common, .rarity-common { border-color: rgba(200,200,200,0.5); }
        .equip-item.uncommon, .rarity-uncommon { border-color: rgba(50,205,50,0.6); }
        .equip-item.rare, .rarity-rare { border-color: rgba(30,144,255,0.7); }
        .equip-item.epic, .rarity-epic { border-color: rgba(148,0,211,0.8); }
        .equip-item.legendary, .rarity-legendary { border-color: rgba(255,215,0,0.9); box-shadow: 0 0 10px rgba(255,215,0,0.3); }

        /* Equipment slot displays in modal (renamed to avoid conflict with panel slots) */
        .equip-current-slot {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 0.75rem;
            background: rgba(255,255,255,0.05);
            border: 2px solid rgba(255,255,255,0.2);
            border-radius: 12px;
            min-width: 80px;
        }

        .equip-current-slot.equipped {
            border-color: var(--color-golden);
            background: rgba(255,215,0,0.1);
        }

        .equip-slot-icon {
            font-size: 1.8rem;
            margin-bottom: 0.3rem;
        }

        .equip-slot-name {
            font-size: 0.65rem;
            color: rgba(255,255,255,0.8);
            font-weight: 600;
        }

        .equip-slot-stats {
            font-size: 0.5rem;
            color: rgba(255,255,255,0.5);
            margin-top: 0.2rem;
        }

        .equip-unequip-btn {
            margin-top: 0.3rem;
            padding: 0.2rem 0.5rem;
            font-size: 0.5rem;
            background: rgba(255,100,100,0.3);
            border: 1px solid rgba(255,100,100,0.5);
            border-radius: 5px;
            color: white;
            cursor: pointer;
        }

        .equip-unequip-btn:hover {
            background: rgba(255,100,100,0.5);
        }

        .equip-inventory-item {
            background: rgba(255,255,255,0.05);
            border: 2px solid transparent;
            border-radius: 10px;
            padding: 0.5rem;
            text-align: center;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .equip-inventory-item:hover {
            background: rgba(255,255,255,0.15);
            transform: translateY(-3px);
        }

        .equip-inv-icon {
            font-size: 1.3rem;
            display: block;
        }

        .equip-inv-name {
            font-size: 0.55rem;
            color: rgba(255,255,255,0.9);
            font-weight: 600;
        }

        .equip-inv-stats {
            font-size: 0.45rem;
            color: rgba(255,255,255,0.5);
        }

        .equip-inv-rarity {
            font-size: 0.4rem;
            color: var(--color-golden);
            text-transform: uppercase;
        }

        .no-equipment {
            text-align: center;
            color: rgba(255,255,255,0.4);
            font-size: 0.75rem;
            padding: 1.5rem;
        }

        /* Skill item additions */
        .skill-item.skilled {
            border-color: rgba(100,200,255,0.5);
            background: rgba(100,200,255,0.1);
        }

        .skill-item.can-upgrade {
            border-color: var(--color-golden);
            animation: skillPulse 1.5s ease-in-out infinite;
        }

        @keyframes skillPulse {
            0%, 100% { box-shadow: 0 0 5px rgba(255,215,0,0.3); }
            50% { box-shadow: 0 0 15px rgba(255,215,0,0.5); }
        }

        .skill-upgrade-hint {
            font-size: 0.5rem;
            color: var(--color-golden);
            text-align: center;
            margin-top: 0.2rem;
        }

        /* Daily item additions */
        .daily-item {
            padding: 0.5rem;
            background: rgba(255,255,255,0.05);
            border: 2px solid rgba(255,255,255,0.1);
            border-radius: 10px;
            min-width: 60px;
            text-align: center;
            position: relative;
        }

        .daily-item.current {
            border-color: var(--color-golden);
            background: rgba(255,215,0,0.15);
            animation: dailyPulse 1.5s ease-in-out infinite;
        }

        .daily-item.claimed {
            background: rgba(50,205,50,0.2);
            border-color: rgba(50,205,50,0.5);
        }

        .daily-claimed-mark {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 1.5rem;
            color: #4CAF50;
        }

        .daily-item.claimed .daily-icon,
        .daily-item.claimed .daily-reward {
            opacity: 0.3;
        }

        .daily-reward {
            font-size: 0.55rem;
            color: rgba(255,255,255,0.7);
        }

        /* Settings Modal */
        .settings-modal-content {
            max-width: 350px;
        }

        .settings-section {
            margin-bottom: 1.25rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid rgba(255,255,255,0.1);
        }

        .settings-section:last-of-type {
            border-bottom: none;
            margin-bottom: 0.5rem;
        }

        .settings-section-title {
            font-size: 0.85rem;
            color: var(--color-golden);
            margin-bottom: 0.75rem;
            font-weight: 600;
        }

        .settings-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 0.75rem;
        }

        .settings-label {
            font-size: 0.8rem;
            color: rgba(255,255,255,0.9);
        }

        .settings-toggle {
            padding: 0.3rem 0.8rem;
            font-size: 0.7rem;
            font-weight: 700;
            border: 2px solid rgba(255,255,255,0.3);
            border-radius: 15px;
            background: rgba(255,255,255,0.1);
            color: white;
            cursor: pointer;
            transition: all 0.2s ease;
            min-width: 50px;
        }

        .settings-toggle.active {
            background: linear-gradient(135deg, #4CAF50, #45a049);
            border-color: #4CAF50;
        }

        .settings-toggle:hover {
            background: rgba(255,255,255,0.2);
        }

        .settings-toggle.active:hover {
            background: linear-gradient(135deg, #45a049, #3d8b40);
        }

        .settings-slider-container {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .settings-slider {
            width: 100px;
            height: 6px;
            border-radius: 3px;
            background: rgba(255,255,255,0.2);
            outline: none;
            -webkit-appearance: none;
            appearance: none;
        }

        .settings-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: var(--color-golden);
            cursor: pointer;
            transition: transform 0.1s ease;
        }

        .settings-slider::-webkit-slider-thumb:hover {
            transform: scale(1.2);
        }

        .settings-slider::-moz-range-thumb {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: var(--color-golden);
            cursor: pointer;
            border: none;
        }

        .settings-value {
            font-size: 0.7rem;
            color: var(--color-golden);
            min-width: 35px;
            text-align: right;
        }

        .settings-select {
            padding: 0.3rem 0.5rem;
            font-size: 0.7rem;
            border: 2px solid rgba(255,255,255,0.3);
            border-radius: 8px;
            background: rgba(0,0,0,0.3);
            color: white;
            cursor: pointer;
            outline: none;
        }

        .settings-select:focus {
            border-color: var(--color-golden);
        }

        .settings-actions {
            text-align: center;
            margin-top: 1rem;
        }

        .equip-item-emoji {
            font-size: 1.5rem;
            display: block;
            margin-bottom: 0.2rem;
        }

        .equip-item-name {
            font-size: 0.6rem;
            color: rgba(255,255,255,0.8);
        }

        .equip-item-stats {
            font-size: 0.55rem;
            color: rgba(255,255,255,0.5);
        }

        /* Skills Modal */
        .skill-points-display {
            text-align: center;
            font-size: 1.1rem;
            color: var(--color-golden);
            margin-bottom: 1rem;
            font-weight: 700;
        }

        .skills-grid {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            max-height: 60vh;
            overflow-y: auto;
            padding-right: 0.5rem;
        }

        .skill-tier {
            margin-bottom: 0.5rem;
        }

        .skill-tier-header {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.5rem 0.75rem;
            margin-bottom: 0.5rem;
            border-radius: 8px;
            font-weight: 700;
            font-size: 0.9rem;
        }

        .skill-tier-header.tier-1 {
            background: linear-gradient(135deg, rgba(100,149,237,0.3), rgba(65,105,225,0.2));
            border-left: 4px solid #6495ED;
            color: #87CEEB;
        }

        .skill-tier-header.tier-2 {
            background: linear-gradient(135deg, rgba(138,43,226,0.3), rgba(148,0,211,0.2));
            border-left: 4px solid #9932CC;
            color: #DDA0DD;
        }

        .skill-tier-header.tier-3 {
            background: linear-gradient(135deg, rgba(255,165,0,0.3), rgba(255,140,0,0.2));
            border-left: 4px solid #FFA500;
            color: #FFD700;
        }

        .skill-tier-header.tier-4 {
            background: linear-gradient(135deg, rgba(220,20,60,0.3), rgba(178,34,34,0.2));
            border-left: 4px solid #DC143C;
            color: #FF6B6B;
        }

        .skill-tier-skills {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 0.5rem;
        }

        .skill-item {
            background: rgba(255,255,255,0.05);
            border: 2px solid rgba(255,255,255,0.1);
            border-radius: 10px;
            padding: 0.6rem;
            display: flex;
            align-items: center;
            gap: 0.6rem;
            cursor: pointer;
            transition: all 0.2s ease;
            min-height: 60px;
        }

        .skill-item:hover:not(.maxed):not(.locked) {
            background: rgba(255,255,255,0.1);
            border-color: var(--color-golden);
            transform: translateY(-2px);
        }

        .skill-item.maxed {
            border-color: rgba(50,205,50,0.5);
            background: rgba(50,205,50,0.15);
        }

        .skill-item.maxed .skill-icon {
            filter: drop-shadow(0 0 6px rgba(50,205,50,0.8));
        }

        .skill-item.locked {
            opacity: 0.4;
            cursor: not-allowed;
            filter: grayscale(50%);
        }

        .skill-item.can-upgrade {
            border-color: var(--color-golden);
            box-shadow: 0 0 10px rgba(255,215,0,0.3);
        }

        .skill-icon {
            font-size: 1.4rem;
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(0,0,0,0.3);
            border-radius: 8px;
            flex-shrink: 0;
        }

        .skill-info {
            flex: 1;
            min-width: 0;
        }

        .skill-name {
            font-weight: 700;
            font-size: 0.75rem;
            color: white;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .skill-desc {
            font-size: 0.6rem;
            color: rgba(255,255,255,0.6);
            line-height: 1.2;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .skill-level {
            font-size: 0.7rem;
            color: var(--color-golden);
            font-weight: 700;
            background: rgba(0,0,0,0.3);
            padding: 0.2rem 0.4rem;
            border-radius: 4px;
            flex-shrink: 0;
        }

        /* Mobile skill tree improvements */
        @media (max-width: 500px) {
            .skills-grid {
                max-height: 50vh;
            }

            .skill-tier-skills {
                grid-template-columns: 1fr;
            }

            .skill-item {
                padding: 0.5rem;
                min-height: 50px;
            }

            .skill-icon {
                font-size: 1.2rem;
                width: 32px;
                height: 32px;
            }

            .skill-name {
                font-size: 0.7rem;
            }

            .skill-desc {
                font-size: 0.55rem;
            }
        }

        /* Stats Allocation Modal (Diablo-style) */
        .stat-points-display {
            text-align: center;
            font-size: 1.2rem;
            color: var(--color-golden);
            margin-bottom: 1rem;
            font-weight: 700;
            text-shadow: 0 0 10px rgba(255,215,0,0.5);
        }

        .stats-allocation-grid {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
        }

        .stat-row {
            background: linear-gradient(135deg, rgba(139,69,19,0.3), rgba(160,82,45,0.2));
            border: 2px solid rgba(205,133,63,0.4);
            border-radius: 12px;
            padding: 1rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: all 0.3s ease;
        }

        .stat-row:hover {
            border-color: var(--color-golden);
            background: linear-gradient(135deg, rgba(139,69,19,0.5), rgba(160,82,45,0.3));
            transform: translateX(5px);
        }

        .stat-info {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .stat-icon {
            font-size: 1.8rem;
            filter: drop-shadow(0 0 5px rgba(255,255,255,0.3));
        }

        .stat-name {
            font-weight: 700;
            font-size: 1rem;
            color: white;
            display: block;
        }

        .stat-desc {
            font-size: 0.7rem;
            color: rgba(255,255,255,0.6);
        }

        .stat-controls {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .stat-value {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--color-golden);
            min-width: 40px;
            text-align: center;
        }

        .stat-btn {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            border: 2px solid var(--color-golden);
            background: linear-gradient(135deg, rgba(255,215,0,0.3), rgba(255,140,0,0.3));
            color: white;
            font-size: 1.2rem;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .stat-btn:hover:not(:disabled) {
            background: linear-gradient(135deg, rgba(255,215,0,0.6), rgba(255,140,0,0.6));
            transform: scale(1.1);
            box-shadow: 0 0 15px rgba(255,215,0,0.5);
        }

        .stat-btn:disabled {
            opacity: 0.3;
            cursor: not-allowed;
        }

        .stat-hint {
            text-align: center;
            font-size: 0.8rem;
            color: rgba(255,255,255,0.5);
            margin-top: 1rem;
            font-style: italic;
        }

        /* Daily Rewards Modal */
        .daily-modal-content {
            text-align: center;
        }

        .daily-streak {
            font-size: 1rem;
            color: var(--color-golden);
            margin-bottom: 1rem;
        }

        .daily-rewards-grid {
            display: flex;
            justify-content: center;
            gap: 0.5rem;
            margin-bottom: 1.5rem;
            flex-wrap: wrap;
        }

        .daily-reward-item {
            width: 60px;
            padding: 0.5rem;
            background: rgba(255,255,255,0.05);
            border: 2px solid rgba(255,255,255,0.1);
            border-radius: 10px;
            text-align: center;
        }

        .daily-reward-item.claimed {
            background: rgba(50,205,50,0.2);
            border-color: rgba(50,205,50,0.5);
        }

        .daily-reward-item.today {
            border-color: var(--color-golden);
            background: rgba(255,215,0,0.15);
            animation: dailyPulse 1.5s ease-in-out infinite;
        }

        .daily-reward-item.locked {
            opacity: 0.4;
        }

        @keyframes dailyPulse {
            0%, 100% { box-shadow: 0 0 5px rgba(255,215,0,0.3); }
            50% { box-shadow: 0 0 15px rgba(255,215,0,0.6); }
        }

        .daily-day {
            font-size: 0.6rem;
            color: rgba(255,255,255,0.5);
        }

        .daily-icon {
            font-size: 1.5rem;
            display: block;
            margin: 0.3rem 0;
        }

        .daily-claim-btn {
            background: linear-gradient(135deg, var(--color-golden), var(--color-sunset-orange));
            color: white;
            border: none;
            padding: 0.8rem 2rem;
            border-radius: 12px;
            font-size: 1rem;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .daily-claim-btn:hover:not(:disabled) {
            transform: translateY(-2px);
            box-shadow: 0 5px 20px rgba(245,166,35,0.4);
        }

        .daily-claim-btn:disabled {
            background: #555;
            cursor: not-allowed;
            opacity: 0.6;
        }

        .pet-btn-daily.has-reward {
            animation: dailyBtnPulse 1s ease-in-out infinite;
            background: linear-gradient(135deg, var(--color-golden), var(--color-sunset-orange)) !important;
            color: white !important;
        }

        @keyframes dailyBtnPulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.05); }
        }

        /* Shiny/Golden Enemies */
        .enemy-sprite.shiny-enemy {
            filter: drop-shadow(0 0 8px rgba(255,215,0,0.8));
        }

        .enemy-sprite.shiny-enemy .enemy-emoji {
            animation: shinyGlow 1s ease-in-out infinite alternate;
        }

        .shiny-sparkle {
            position: absolute;
            top: -10px;
            right: -5px;
            animation: shinyBadgeSpin 2s linear infinite;
        }

        @keyframes shinyGlow {
            from { filter: brightness(1) drop-shadow(0 0 5px gold); }
            to { filter: brightness(1.3) drop-shadow(0 0 15px gold); }
        }

        .shiny-badge {
            position: absolute;
            top: -8px;
            left: -8px;
            font-size: 0.8rem;
            animation: shinyBadgeSpin 2s linear infinite;
        }

        @keyframes shinyBadgeSpin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        /* Nemesis Enemy */
        .enemy-sprite.nemesis-enemy {
            filter: drop-shadow(0 0 12px rgba(255,0,0,0.7));
        }

        .enemy-sprite.nemesis-enemy .enemy-emoji {
            animation: nemesisPulse 0.5s ease-in-out infinite;
        }

        @keyframes nemesisPulse {
            0%, 100% { transform: scale(1); filter: hue-rotate(0deg); }
            50% { transform: scale(1.1); filter: hue-rotate(20deg); }
        }

        .nemesis-aura {
            position: absolute;
            top: -18px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 1rem;
            animation: nemesisAura 1s ease-in-out infinite;
        }

        @keyframes nemesisAura {
            0%, 100% { opacity: 1; transform: translateX(-50%) scale(1); }
            50% { opacity: 0.5; transform: translateX(-50%) scale(1.3); }
        }

        .nemesis-title {
            position: absolute;
            bottom: -18px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 0.5rem;
            color: #ff4444;
            font-weight: 700;
            text-shadow: 0 0 5px rgba(255,0,0,0.5);
            white-space: nowrap;
        }

        .nemesis-hp-bar {
            background: rgba(255,0,0,0.3) !important;
        }

        /* Treasure Chest */
        .treasure-chest {
            position: absolute;
            bottom: 15px;
            font-size: 2.5rem;
            cursor: pointer;
            z-index: 9992;
            animation: chestBounce 1s ease-in-out infinite, chestGlow 2s ease-in-out infinite;
            filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.6));
            transition: transform 0.2s ease;
        }

        .treasure-chest:hover {
            transform: scale(1.2);
        }

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

        @keyframes chestGlow {
            0%, 100% { filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.4)); }
            50% { filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.9)); }
        }

        .treasure-chest.opening {
            animation: chestOpen 0.5s ease-out forwards;
        }

        @keyframes chestOpen {
            0% { transform: scale(1); }
            50% { transform: scale(1.5) rotate(10deg); }
            100% { transform: scale(0) rotate(360deg); opacity: 0; }
        }

        /* Pet Evolution Glow */
        .pet-sprite.evolved-1 .pet-emoji {
            filter: drop-shadow(0 0 10px rgba(255,215,0,0.5));
        }

        .pet-sprite.evolved-2 .pet-emoji {
            filter: drop-shadow(0 0 15px rgba(255,100,0,0.6));
            animation: evolveGlow2 2s ease-in-out infinite;
        }

        .pet-sprite.evolved-3 .pet-emoji {
            filter: drop-shadow(0 0 20px rgba(255,0,255,0.7));
            animation: evolveGlow3 1.5s ease-in-out infinite;
        }

        .pet-sprite.evolved-4 .pet-emoji {
            filter: drop-shadow(0 0 25px rgba(0,255,255,0.8));
            animation: evolveGlow4 1s ease-in-out infinite;
        }

        @keyframes evolveGlow2 {
            0%, 100% { filter: drop-shadow(0 0 15px rgba(255,100,0,0.4)); }
            50% { filter: drop-shadow(0 0 25px rgba(255,100,0,0.8)); }
        }

        @keyframes evolveGlow3 {
            0%, 100% { filter: drop-shadow(0 0 20px rgba(255,0,255,0.5)); }
            50% { filter: drop-shadow(0 0 35px rgba(255,0,255,0.9)); }
        }

        @keyframes evolveGlow4 {
            0%, 100% { filter: drop-shadow(0 0 25px rgba(0,255,255,0.5)); transform: scale(1); }
            50% { filter: drop-shadow(0 0 40px rgba(0,255,255,1)); transform: scale(1.05); }
        }

        /* Idle Animations */
        .pet-sprite.idle .pet-emoji {
            animation: petIdle 3s ease-in-out infinite;
        }

        @keyframes petIdle {
            0%, 100% { transform: translateY(0) rotate(0deg); }
            25% { transform: translateY(-3px) rotate(-2deg); }
            50% { transform: translateY(0) rotate(0deg); }
            75% { transform: translateY(-3px) rotate(2deg); }
        }

        /* Victory Dance */
        .pet-sprite.victory .pet-emoji {
            animation: victoryDance 0.5s ease-in-out 3;
        }

        @keyframes victoryDance {
            0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
            25% { transform: translateY(-15px) rotate(-15deg) scale(1.1); }
            50% { transform: translateY(-5px) rotate(15deg) scale(1.05); }
            75% { transform: translateY(-10px) rotate(-10deg) scale(1.1); }
        }

        /* ===== NEW FEATURES STYLES ===== */

        /* Dodge Roll Animation */
        .pet-sprite.dodging {
            animation: dodgeRoll 0.5s ease-out;
        }

        @keyframes dodgeRoll {
            0% { transform: translateX(0) rotate(0deg); }
            50% { transform: translateX(80px) rotate(360deg); opacity: 0.5; }
            100% { transform: translateX(0) rotate(720deg); opacity: 1; }
        }

        .dodge-indicator {
            position: absolute;
            bottom: 70px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 0.6rem;
            color: #4CAF50;
            opacity: 0;
            transition: opacity 0.3s;
        }

        .dodge-indicator.ready {
            opacity: 1;
        }

        .dodge-indicator.cooldown {
            color: #ff6b6b;
        }

        /* Rage Mode */
        .pet-sprite.rage-mode {
            animation: ragePulse 0.3s ease-in-out infinite;
        }

        .pet-sprite.rage-mode .pet-emoji {
            filter: drop-shadow(0 0 15px rgba(255,0,0,0.8)) hue-rotate(-10deg) saturate(1.5);
        }

        @keyframes ragePulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.05); }
        }

        .rage-overlay {
            position: fixed;
            inset: 0;
            background: radial-gradient(circle at center, transparent 30%, rgba(255,0,0,0.1) 100%);
            pointer-events: none;
            z-index: 9990;
            opacity: 0;
            transition: opacity 0.3s;
        }

        .rage-overlay.active {
            opacity: 1;
            animation: rageVignette 0.5s ease-in-out infinite alternate;
        }

        @keyframes rageVignette {
            from { background: radial-gradient(circle at center, transparent 30%, rgba(255,0,0,0.1) 100%); }
            to { background: radial-gradient(circle at center, transparent 20%, rgba(255,0,0,0.2) 100%); }
        }

        /* Elemental Indicators */
        .enemy-element {
            position: absolute;
            top: -20px;
            right: -5px;
            font-size: 0.7rem;
            padding: 2px 4px;
            border-radius: 4px;
            background: rgba(0,0,0,0.5);
        }

        .element-fire { color: #ff6b35; text-shadow: 0 0 5px #ff6b35; }
        .element-water { color: #4fc3f7; text-shadow: 0 0 5px #4fc3f7; }
        .element-earth { color: #8bc34a; text-shadow: 0 0 5px #8bc34a; }
        .element-wind { color: #b39ddb; text-shadow: 0 0 5px #b39ddb; }

        /* Combo Finisher */
        .combo-finisher {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 3rem;
            font-weight: 900;
            color: var(--color-golden);
            text-shadow: 0 0 20px var(--color-golden), 0 0 40px var(--color-sunset-orange);
            z-index: 10000;
            animation: comboFinisher 1s ease-out forwards;
            pointer-events: none;
        }

        @keyframes comboFinisher {
            0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
            30% { transform: translate(-50%, -50%) scale(1.5); opacity: 1; }
            100% { transform: translate(-50%, -50%) scale(2); opacity: 0; }
        }

        /* Screen Shake */
        @keyframes screenShake {
            0%, 100% { transform: translateX(0); }
            10% { transform: translateX(-5px) rotate(-0.5deg); }
            20% { transform: translateX(5px) rotate(0.5deg); }
            30% { transform: translateX(-5px) rotate(-0.5deg); }
            40% { transform: translateX(5px) rotate(0.5deg); }
            50% { transform: translateX(-3px); }
            60% { transform: translateX(3px); }
            70% { transform: translateX(-2px); }
            80% { transform: translateX(2px); }
            90% { transform: translateX(-1px); }
        }

        .screen-shake {
            animation: screenShake 0.5s ease-out;
        }

        /* Mini-boss styling */
        .enemy-sprite.mini-boss {
            filter: drop-shadow(0 0 8px rgba(255,165,0,0.7));
        }

        .enemy-sprite.mini-boss .enemy-emoji {
            animation: miniBossPulse 1s ease-in-out infinite;
        }

        @keyframes miniBossPulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.08); }
        }

        .mini-boss-crown {
            position: absolute;
            top: -12px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 0.7rem;
        }

        /* Boss Telegraph */
        .boss-telegraph {
            position: absolute;
            bottom: 0;
            width: 150px;
            height: 30px;
            background: linear-gradient(to right, transparent, rgba(255,0,0,0.3), transparent);
            animation: telegraphWarn 0.5s ease-in-out infinite;
            pointer-events: none;
        }

        @keyframes telegraphWarn {
            0%, 100% { opacity: 0.3; }
            50% { opacity: 0.7; }
        }

        /* Pet Skins */
        .pet-sprite.skin-golden .pet-emoji {
            filter: drop-shadow(0 0 15px rgba(255,215,0,0.8)) brightness(1.1);
        }

        .pet-sprite.skin-flame .pet-emoji {
            filter: drop-shadow(0 0 15px rgba(255,100,0,0.8));
            animation: flameSkin 0.5s ease-in-out infinite alternate;
        }

        @keyframes flameSkin {
            from { filter: drop-shadow(0 0 15px rgba(255,100,0,0.6)) hue-rotate(0deg); }
            to { filter: drop-shadow(0 0 25px rgba(255,50,0,0.9)) hue-rotate(10deg); }
        }

        .pet-sprite.skin-cosmic .pet-emoji {
            filter: drop-shadow(0 0 20px rgba(150,100,255,0.8));
            animation: cosmicSkin 3s linear infinite;
        }

        @keyframes cosmicSkin {
            0% { filter: drop-shadow(0 0 20px rgba(150,100,255,0.8)) hue-rotate(0deg); }
            100% { filter: drop-shadow(0 0 20px rgba(150,100,255,0.8)) hue-rotate(360deg); }
        }

        .pet-sprite.skin-shadow .pet-emoji {
            filter: drop-shadow(0 0 15px rgba(0,0,0,0.9)) brightness(0.7) contrast(1.2);
        }

        .pet-sprite.skin-crystal .pet-emoji {
            filter: drop-shadow(0 0 15px rgba(150,200,255,0.9)) brightness(1.2);
            animation: crystalSkin 2s ease-in-out infinite;
        }

        @keyframes crystalSkin {
            0%, 100% { filter: drop-shadow(0 0 15px rgba(150,200,255,0.9)) brightness(1.2); }
            50% { filter: drop-shadow(0 0 25px rgba(200,230,255,1)) brightness(1.4); }
        }

        .pet-sprite.skin-celestial .pet-emoji {
            filter: drop-shadow(0 0 20px rgba(255,215,100,0.9)) drop-shadow(0 0 40px rgba(200,150,255,0.6)) brightness(1.3);
            animation: celestialSkin 3s ease-in-out infinite;
        }

        @keyframes celestialSkin {
            0%, 100% { filter: drop-shadow(0 0 20px rgba(255,215,100,0.9)) drop-shadow(0 0 40px rgba(200,150,255,0.6)) brightness(1.3); }
            50% { filter: drop-shadow(0 0 30px rgba(255,230,150,1)) drop-shadow(0 0 50px rgba(230,180,255,0.8)) brightness(1.5); }
        }

        .pet-sprite.skin-rainbow .pet-emoji {
            animation: rainbowSkin 2s linear infinite;
        }

        @keyframes rainbowSkin {
            0% { filter: drop-shadow(0 0 15px red) hue-rotate(0deg); }
            100% { filter: drop-shadow(0 0 15px red) hue-rotate(360deg); }
        }

        /* Pet Emotions */
        .pet-sprite.emotion-happy .pet-emoji::after {
            content: '✨';
            position: absolute;
            top: -10px;
            right: -5px;
            font-size: 0.8rem;
            animation: sparkle 1s ease-in-out infinite;
        }

        .pet-sprite.emotion-determined .pet-emoji {
            animation: determinedShake 0.1s linear infinite;
        }

        @keyframes determinedShake {
            0%, 100% { transform: translateX(0); }
            50% { transform: translateX(1px); }
        }

        .pet-sprite.emotion-hurt::after {
            content: '💢';
            position: absolute;
            top: -15px;
            right: 0;
            font-size: 0.7rem;
        }

        /* Prestige Modal */
        .prestige-stars {
            display: flex;
            justify-content: center;
            gap: 0.5rem;
            margin: 1rem 0;
        }

        .prestige-star {
            font-size: 1.5rem;
            opacity: 0.3;
        }

        .prestige-star.earned {
            opacity: 1;
            animation: starShine 2s ease-in-out infinite;
        }

        @keyframes starShine {
            0%, 100% { filter: drop-shadow(0 0 5px gold); }
            50% { filter: drop-shadow(0 0 15px gold); }
        }

        .prestige-bonus {
            display: flex;
            justify-content: space-between;
            padding: 0.5rem;
            background: rgba(255,255,255,0.05);
            border-radius: 8px;
            margin-bottom: 0.5rem;
        }

        /* Weekly Challenges */
        .challenge-item {
            background: rgba(255,255,255,0.05);
            border: 2px solid rgba(255,255,255,0.1);
            border-radius: 10px;
            padding: 0.75rem;
            margin-bottom: 0.5rem;
        }

        .challenge-item.completed {
            border-color: #4CAF50;
            background: rgba(76,175,80,0.1);
        }

        .challenge-progress {
            height: 6px;
            background: rgba(255,255,255,0.1);
            border-radius: 3px;
            margin-top: 0.5rem;
            overflow: hidden;
        }

        .challenge-progress-fill {
            height: 100%;
            background: linear-gradient(90deg, var(--color-golden), var(--color-sunset-orange));
            border-radius: 3px;
            transition: width 0.3s ease;
        }

        /* Leaderboard */
        .leaderboard-entry {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.5rem;
            background: rgba(255,255,255,0.05);
            border-radius: 8px;
            margin-bottom: 0.4rem;
        }

        .leaderboard-entry.current {
            border: 2px solid var(--color-golden);
            background: rgba(255,215,0,0.1);
        }

        .leaderboard-rank {
            font-size: 1rem;
            font-weight: 700;
            min-width: 30px;
            text-align: center;
        }

        .leaderboard-rank.gold { color: gold; }
        .leaderboard-rank.silver { color: silver; }
        .leaderboard-rank.bronze { color: #cd7f32; }

        /* Skins Grid */
        .skins-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 0.75rem;
            margin-top: 1rem;
        }

        /* Set Bonus Display */
        .set-bonus-active {
            background: linear-gradient(135deg, rgba(255,215,0,0.2), rgba(255,165,0,0.2));
            border: 1px solid var(--color-golden);
            border-radius: 8px;
            padding: 0.5rem;
            margin-top: 0.5rem;
            font-size: 0.7rem;
            text-align: center;
        }

        /* Pet Menu Button */
        .pet-menu-btn {
            position: fixed;
            bottom: 120px;
            right: 20px;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: linear-gradient(135deg, #667eea, #764ba2);
            border: 3px solid rgba(255,255,255,0.3);
            color: white;
            font-size: 1.5rem;
            cursor: pointer;
            z-index: 9999;
            pointer-events: auto;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
        }

        .pet-menu-btn:hover {
            transform: scale(1.1);
            box-shadow: 0 6px 25px rgba(102, 126, 234, 0.6);
        }

        .pet-menu-btn:active {
            transform: scale(0.95);
        }

        .pet-menu-indicators {
            position: absolute;
            top: -5px;
            right: -5px;
            display: flex;
            gap: 2px;
        }

        .pet-menu-indicators .indicator {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: linear-gradient(135deg, #ff6b6b, #ee5a24);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.7rem;
            animation: indicatorPulse 1s ease-in-out infinite;
            cursor: pointer;
            border: 2px solid white;
            box-shadow: 0 2px 8px rgba(0,0,0,0.3);
        }

        .pet-menu-indicators .stat-indicator {
            background: linear-gradient(135deg, #f39c12, #e74c3c);
        }

        .pet-menu-indicators .skill-indicator {
            background: linear-gradient(135deg, #9b59b6, #3498db);
        }

        @keyframes indicatorPulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.15); }
        }

        .pet-menu-btn.has-notifications {
            animation: menuPulse 2s ease-in-out infinite;
        }

        @keyframes menuPulse {
            0%, 100% { box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4); }
            50% { box-shadow: 0 4px 25px rgba(255, 107, 107, 0.6), 0 0 30px rgba(255, 107, 107, 0.3); }
        }

        /* Auto Battle Indicator */
        .pet-sprite.auto-battle::after {
            content: '⚔️';
            position: absolute;
            top: -20px;
            right: -10px;
            font-size: 0.8rem;
            animation: autoBattlePulse 1s ease-in-out infinite;
        }

        @keyframes autoBattlePulse {
            0%, 100% { opacity: 0.5; transform: scale(1); }
            50% { opacity: 1; transform: scale(1.2); }
        }

        /* Level Up Animation */
        .level-up-effect {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 3rem;
            font-family: var(--font-display);
            font-weight: 700;
            color: var(--color-golden);
            text-shadow: 0 0 30px var(--color-golden), 0 0 60px var(--color-sunset-orange);
            z-index: 100000;
            animation: levelUpBurst 1.5s ease-out forwards;
            pointer-events: none;
        }

        @keyframes levelUpBurst {
            0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
            20% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
            40% { transform: translate(-50%, -50%) scale(1); }
            100% { opacity: 0; transform: translate(-50%, -50%) scale(1.5) translateY(-50px); }
        }

        /* Mobile adjustments */
        @media (max-width: 600px) {
            .pet-options {
                grid-template-columns: repeat(4, 1fr);
                gap: 0.5rem;
            }

            .pet-option-emoji {
                font-size: 2rem;
            }

            .pet-panel {
                left: 10px;
                right: 10px;
                min-width: auto;
                max-height: 70vh;
                overflow-y: auto;
            }

            .pet-stat-row {
                flex-wrap: wrap;
                gap: 0.3rem;
            }

            /* Pet menu button mobile positioning */
            .pet-menu-btn {
                bottom: 80px;
                right: 10px;
                width: 50px;
                height: 50px;
                font-size: 1.2rem;
            }

            .pet-menu-indicators .indicator {
                width: 20px;
                height: 20px;
                font-size: 0.6rem;
            }

            /* Combo finisher mobile */
            .combo-finisher {
                font-size: 2rem;
            }

            /* Modal mobile adjustments */
            .pet-modal-content {
                margin: 5% auto;
                max-height: 85vh;
                width: 95%;
            }

            /* Skins grid mobile */
            .skins-grid {
                grid-template-columns: repeat(2, 1fr) !important;
            }

            /* Prestige stars mobile */
            .prestige-stars {
                flex-wrap: wrap;
            }

            .prestige-star {
                font-size: 1.2rem;
            }

            /* Challenge items mobile */
            .challenge-item {
                padding: 0.5rem;
                font-size: 0.8rem;
            }

            /* Combat log mobile */
            .combat-log {
                max-width: 200px;
                font-size: 0.65rem;
            }

            /* Pet sprite mobile touch area */
            .pet-sprite {
                min-width: 60px;
                min-height: 60px;
            }

            /* Enemy sprites mobile */
            .enemy-sprite {
                transform: scale(0.85);
            }

            .enemy-level {
                font-size: 0.55rem;
            }

            /* Mini HP bar mobile */
            .pet-hp-mini {
                width: 40px;
            }
        }

        /* Very small screens */
        @media (max-width: 380px) {
            .pet-menu-btn {
                width: 45px;
                height: 45px;
                bottom: 70px;
            }

            .pet-menu-indicators .indicator {
                width: 18px;
                height: 18px;
                font-size: 0.5rem;
            }

        }

        /* Touch device optimizations */
        @media (hover: none) and (pointer: coarse) {
            .pet-menu-btn:active {
                transform: scale(0.95);
            }

            .pet-btn:active {
                transform: scale(0.98);
            }

            .pet-sprite:active {
                transform: scale(0.95);
            }

            .pet-tab:active {
                transform: scale(0.95);
            }

            /* Prevent double-tap zoom on buttons */
            .pet-menu-btn,
            .pet-btn,
            .pet-modal-close,
            .pet-sprite,
            .pet-tab,
            .pet-special-btn,
            .inventory-slot {
                touch-action: manipulation;
            }

            /* Larger touch targets on mobile */
            .pet-tab {
                min-height: 44px;
            }

            .pet-btn {
                min-height: 44px;
            }
        }

        /* Floating Elements */
        .floating-elements {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 0;
        }

        .leaf {
            position: absolute;
            font-size: 2rem;
            opacity: 0.3;
            animation: leafFloat 15s ease-in-out infinite;
        }

        .leaf:nth-child(1) { top: 20%; left: 10%; animation-delay: 0s; }
        .leaf:nth-child(2) { top: 60%; left: 5%; animation-delay: 3s; }
        .leaf:nth-child(3) { top: 30%; right: 8%; animation-delay: 6s; }
        .leaf:nth-child(4) { top: 70%; right: 12%; animation-delay: 9s; }

        @keyframes leafFloat {
            0%, 100% { transform: translateY(0) rotate(0deg); }
            25% { transform: translateY(-20px) rotate(10deg); }
            50% { transform: translateY(-10px) rotate(-5deg); }
            75% { transform: translateY(-30px) rotate(5deg); }
        }

        /* Scroll Animations */
        .fade-in {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.6s ease, transform 0.6s ease;
        }

        .fade-in.visible {
            opacity: 1;
            transform: translateY(0);
        }

        .fade-in-left {
            opacity: 0;
            transform: translateX(-40px);
            transition: all 0.8s ease;
        }

        .fade-in-left.visible {
            opacity: 1;
            transform: translateX(0);
        }

        .fade-in-right {
            opacity: 0;
            transform: translateX(40px);
            transition: all 0.8s ease;
        }

        .fade-in-right.visible {
            opacity: 1;
            transform: translateX(0);
        }

        .stagger-1 { transition-delay: 0.1s; }
        .stagger-2 { transition-delay: 0.2s; }
        .stagger-3 { transition-delay: 0.3s; }
        .stagger-4 { transition-delay: 0.4s; }
        .stagger-5 { transition-delay: 0.5s; }
        .stagger-6 { transition-delay: 0.6s; }

        /* Mobile Responsive */
        @media (max-width: 1024px) {
            .mechanic-row {
                grid-template-columns: 1fr;
                gap: 2rem;
            }

            .mechanic-row:nth-child(even) {
                direction: ltr;
            }

            .about-content {
                grid-template-columns: 1fr;
            }

            .developer-card {
                position: static;
                max-width: 400px;
                margin: 0 auto;
            }
        }

        @media (max-width: 768px) {
            .nav-links {
                display: none;
                position: fixed;
                top: 0;
                right: -100%;
                width: 280px;
                height: 100vh;
                background: var(--color-cream);
                flex-direction: column;
                padding: 5rem 2rem 2rem;
                gap: 1.5rem;
                box-shadow: -4px 0 30px rgba(0,0,0,0.1);
                transition: right 0.4s ease;
            }

            .nav-links.active {
                display: flex;
                right: 0;
            }

            .menu-toggle {
                display: block;
                z-index: 1001;
            }

            .nav-links.active .menu-close {
                display: block;
            }

            /* Mobile: flatten dropdown */
            .nav-dropdown {
                display: contents;
            }

            .nav-dropdown > a {
                display: none;
            }

            .nav-dropdown-menu {
                position: static;
                opacity: 1;
                visibility: visible;
                background: none;
                box-shadow: none;
                padding: 0;
                transform: none;
                margin: 0;
                display: contents;
            }

            .nav-dropdown-menu a {
                padding: 0;
                font-size: 1rem;
            }

            .nav-dropdown-menu a:hover {
                background: none;
            }

            .about-content {
                grid-template-columns: 1fr;
                gap: 2rem;
            }

            .hero-logo {
                max-width: 280px;
            }

            .video-container {
                border-radius: 15px;
            }

            .badges {
                gap: 0.5rem;
            }

            .badge {
                font-size: 0.8rem;
                padding: 0.4rem 0.8rem;
            }

            .footer-top {
                flex-direction: column;
                text-align: center;
            }

            .footer-links {
                flex-direction: column;
                gap: 2rem;
            }

            .footer-brand {
                max-width: 100%;
            }
        }

        @media (max-width: 480px) {
            .hero {
                padding: 6rem 1.5rem 3rem;
            }

            .hero-cta {
                flex-direction: column;
                align-items: center;
            }

            .btn {
                width: 100%;
                max-width: 300px;
                justify-content: center;
            }

            .stats-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .community-links {
                flex-direction: column;
                align-items: center;
            }

            .community-btn {
                width: 100%;
                max-width: 280px;
                justify-content: center;
            }
        }

        /* ========================================
           ACCESSIBILITY
        ======================================== */
        .skip-link {
            position: absolute;
            top: -100px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--color-golden, #f4a460);
            color: #000;
            padding: 12px 24px;
            border-radius: 0 0 8px 8px;
            font-weight: 600;
            z-index: 10000;
            text-decoration: none;
            transition: top 0.3s ease;
        }

        .skip-link:focus {
            top: 0;
            outline: 3px solid #fff;
            outline-offset: 2px;
        }

        /* Visible focus styles for all interactive elements */
        a:focus-visible,
        button:focus-visible,
        input:focus-visible,
        select:focus-visible,
        textarea:focus-visible {
            outline: 3px solid var(--color-golden, #f4a460);
            outline-offset: 2px;
        }

        /* Reduced motion for users who prefer it */
        @media (prefers-reduced-motion: reduce) {
            *,
            *::before,
            *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
            }
        }

        /* ========================================
           CO-OP CHAT & BUFF ANIMATIONS
        ======================================== */
        @keyframes pulseGlow {
            0%, 100% { box-shadow: 0 0 5px #88ddff; }
            50% { box-shadow: 0 0 20px #ffdd88, 0 0 30px #ffdd88; }
        }

        .coop-chat-toggle:hover {
            transform: scale(1.1);
            transition: transform 0.2s;
        }

        .coop-chat-container::-webkit-scrollbar {
            width: 4px;
        }

        .coop-chat-container::-webkit-scrollbar-track {
            background: transparent;
        }

        .coop-chat-container::-webkit-scrollbar-thumb {
            background: rgba(136, 221, 255, 0.5);
            border-radius: 2px;
        }

        .coop-buff-display > div {
            animation: fadeIn 0.3s ease;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateX(20px); }
            to { opacity: 1; transform: translateX(0); }
        }