*{margin:0;padding:0;box-sizing:border-box}
        .translatable{min-height:1em}

        :root{
            --bg-deep:#0a0e1a;
            --bg-mid:#0f1425;
            --card-bg:#1a1f35;
            --card-border:rgba(0,255,136,0.12);
            --gold:#00ff88;
            --copper:#ffd700;
            --accent-green:#00ff88;
            --accent-yellow:#ffd700;
            --primary-brown:#00cc6a;
            --text-light:#ffffff;
            --text-muted:#e0e4f0;
            --text-dim:#b0b8d4;
            --sidebar-bg:#0d1126;
            --gradient:linear-gradient(135deg,#00ff88,#00d4ff);
            --accent-red:#ff6b6b;
        }

        html{scroll-behavior:smooth;overflow-x:hidden}

        body{
            font-family:'Inter',sans-serif;
            background:var(--bg-deep);
            color:var(--text-muted);
            line-height:1.7;
            overflow-x:hidden;
            margin-left:260px;
        }

        /* Typography */
        .retro-title{
            font-family:'Press Start 2P',cursive;
            color:var(--accent-green);
            text-shadow:0 0 20px rgba(0,255,136,0.5);
            line-height:1.4;
        }

        h1{font-size:clamp(1.5rem,4vw,3rem)}
        h2{font-size:clamp(1.2rem,3vw,2rem);margin-bottom:1rem}
        h3{font-size:clamp(1rem,2vw,1.5rem);margin-bottom:0.5rem}

        p{
            color:var(--text-dim);
            max-width:800px;
            margin:0 auto 1rem;
        }

        /* ===== PARTICLE CANVAS ===== */
        #particle-canvas{
            position:fixed;top:0;left:260px;width:calc(100% - 260px);height:100%;
            z-index:0;pointer-events:none;
        }

        /* ===== SIDEBAR ===== */
        .sidebar{
            position:fixed;top:0;left:0;width:260px;height:100vh;
            background:var(--sidebar-bg);z-index:1000;
            display:flex;flex-direction:column;padding:2rem 1.5rem;
            overflow-y:auto;border-right:1px solid var(--card-border);
        }
        .sidebar-logo{text-align:center;margin-bottom:1.5rem;padding-bottom:1.5rem;border-bottom:1px solid var(--card-border)}
        .sidebar-logo a{text-decoration:none;display:flex;align-items:center;justify-content:center;gap:0.6rem}
        .sidebar-logo img{width:48px;height:auto;filter:drop-shadow(0 0 10px rgba(0,255,136,0.5))}
        .sidebar-logo span{font-family:'Press Start 2P',cursive;font-size:0.75rem;color:var(--accent-green)}
        .nav-group{margin-bottom:0.5rem}
        .nav-group-label{
            display:block;font-size:0.7rem;font-weight:700;text-transform:uppercase;
            letter-spacing:1.2px;color:var(--gold);padding:0 1rem;margin-bottom:0.3rem;
            font-variant:small-caps;
        }
        .sidebar-nav{list-style:none}
        .sidebar-nav li{margin-bottom:0.1rem}
        .sidebar-nav a{
            display:block;padding:0.5rem 1rem;color:var(--text-muted);
            text-decoration:none;font-weight:500;font-size:0.92rem;
            border-radius:8px;transition:all 0.3s;
        }
        .sidebar-nav a:hover{background:rgba(0,255,136,0.08);color:var(--gold)}
        .sidebar-nav a.active{background:rgba(0,255,136,0.12);color:var(--gold)}
        .sidebar-nav a[target="_blank"]::after{content:" \2197";font-size:0.7em;opacity:0.6}
        .sidebar-bottom{padding-top:1rem;border-top:1px solid var(--card-border);margin-top:auto}
        .sidebar-legal a{
            display:block;padding:0.35rem 1rem;font-size:0.8rem;
            color:var(--text-dim);text-decoration:none;transition:color 0.2s;
        }
        .sidebar-legal a:hover{color:var(--gold)}

        /* Language Switcher in Sidebar */
        .lang-switcher{
            display:flex;gap:0.5rem;padding:0.5rem 1rem;margin-top:0.3rem;
        }
        .lang-btn{
            width:auto;min-width:50px;height:32px;border-radius:16px;
            border:2px solid rgba(0,255,136,0.6);
            background:rgba(26,31,53,0.8);cursor:pointer;
            transition:all 0.3s;font-size:0.85rem;
            display:flex;align-items:center;justify-content:center;
            padding:0 0.6rem;gap:0.3rem;color:var(--accent-green);
            font-family:'Inter',sans-serif;font-weight:600;
        }
        .lang-btn:hover{
            border-color:var(--accent-green);
            background:rgba(0,255,136,0.2);
            transform:scale(1.05);
            box-shadow:0 0 15px rgba(0,255,136,0.4);
        }
        .lang-btn.active{
            border-color:var(--accent-green);
            background:rgba(0,255,136,0.25);
            box-shadow:0 0 10px rgba(0,255,136,0.4);
        }
        .lang-text{
            font-size:0.75rem;font-weight:600;
            color:var(--accent-green);letter-spacing:0.5px;
        }

        /* Sound Toggle */
        .sound-toggle{
            display:flex;align-items:center;gap:0.5rem;
            padding:0.5rem 1rem;margin-top:0.8rem;cursor:pointer;
            background:rgba(0,255,136,0.05);border:1px solid rgba(0,255,136,0.2);
            border-radius:8px;color:var(--text-dim);font-size:0.8rem;
            transition:all 0.3s;font-family:'Inter',sans-serif;width:100%;
        }
        .sound-toggle:hover{background:rgba(0,255,136,0.1);color:var(--gold)}

        /* ===== FLOATING DOT NAV ===== */
        .dot-nav{
            position:fixed;right:1.5rem;top:50%;transform:translateY(-50%);
            z-index:999;display:flex;flex-direction:column;gap:1rem;
        }
        .dot-nav a{
            width:12px;height:12px;border-radius:50%;
            background:rgba(255,255,255,0.2);border:1px solid rgba(255,255,255,0.3);
            transition:all 0.3s;display:block;position:relative;
        }
        .dot-nav a::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 44px;
            height: 44px;
            border-radius: 50%;
        }
        .dot-nav a:hover,.dot-nav a.active{
            background:var(--gold);border-color:var(--gold);
            box-shadow:0 0 10px rgba(0,255,136,0.4);transform:scale(1.3);
        }

        /* ===== MOBILE TOPBAR ===== */
        .mobile-topbar{
            display:none;position:fixed;top:0;left:0;width:100%;height:56px;
            background:var(--sidebar-bg);z-index:1001;padding:0 1rem;
            align-items:center;justify-content:space-between;
            border-bottom:1px solid var(--card-border);
        }
        .mobile-topbar .mobile-logo{display:flex;align-items:center;gap:0.6rem;text-decoration:none}
        .mobile-topbar .mobile-logo img{height:36px;width:auto;filter:drop-shadow(0 0 10px rgba(0,255,136,0.5))}
        .mobile-topbar .mobile-logo span{font-family:'Press Start 2P',cursive;font-size:0.65rem;color:var(--accent-green)}
        .mobile-menu-btn{
            width:40px;height:40px;background:transparent;
            border:1px solid rgba(0,255,136,0.3);border-radius:8px;cursor:pointer;
            display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;
            transition:all 0.3s;
        }
        .mobile-menu-btn:hover{background:rgba(0,255,136,0.1)}
        .mobile-menu-btn span{display:block;width:20px;height:2px;background:var(--gold);transition:all 0.3s}
        .sidebar-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.6);z-index:999;opacity:0;transition:opacity 0.3s}
        .sidebar-overlay.active{display:block;opacity:1;pointer-events:auto}

        /* ===== SECTIONS ===== */
        section{position:relative;z-index:1}
        .container{max-width:1400px;margin:0 auto;padding:5rem 2rem}
        .section-title{text-align:center;margin-bottom:3rem}
        .section-subtitle{text-align:center;font-style:italic;color:var(--text-dim);max-width:700px;margin:-1rem auto 3rem}

        /* Scroll Reveal */
        .reveal{opacity:0;transform:translateY(40px);transition:opacity 0.8s ease,transform 0.8s ease}
        .reveal.visible{opacity:1;transform:translateY(0)}
        .reveal-delay-1{transition-delay:0.15s}
        .reveal-delay-2{transition-delay:0.3s}
        .reveal-delay-3{transition-delay:0.45s}

        /* ===== HERO ===== */
        #hero{
            min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
            text-align:center;padding:4rem 2rem 2rem;position:relative;overflow:hidden;
            background:radial-gradient(ellipse at 50% 50%,rgba(0,255,136,0.03) 0%,transparent 70%);
        }

        #hero::before{
            content:'';position:absolute;top:0;left:0;right:0;bottom:0;
            background:
                linear-gradient(135deg,rgba(0,255,136,0.1) 0%,rgba(0,212,255,0.1) 100%),
                radial-gradient(circle at 20% 50%,rgba(0,255,136,0.15) 0%,transparent 50%),
                radial-gradient(circle at 80% 50%,rgba(255,215,0,0.15) 0%,transparent 50%);
            animation:heroGradient 10s ease infinite;
        }

        @keyframes heroGradient{
            0%,100%{opacity:1}
            50%{opacity:0.8}
        }

        .hero-content{position:relative;z-index:1;width:100%;max-width:1400px}

        /* Hero 3-Spalten Layout */
        .hero-layout{
            display:flex;align-items:center;justify-content:center;
            gap:3rem;width:100%;
        }
        .hero-banner-left,.hero-banner-right{flex:0 0 auto}
        .hero-text-center{flex:1;max-width:600px;text-align:center}

        /* Banner Styling */
        .steam-announcement,.googleplay-announcement{
            display:flex;flex-direction:column;align-items:center;
            gap:0.8rem;padding:1.5rem 1.2rem;border-radius:12px;
            min-width:160px;max-width:180px;text-align:center;
        }
        .steam-announcement{
            background:linear-gradient(135deg,#1b2838,#2a475e);
            border:2px solid var(--accent-yellow);
        }
        .googleplay-announcement{
            background:linear-gradient(135deg,#01875f,#34a853);
            border:2px solid var(--accent-green);
        }
        .banner-badge{
            padding:0.3rem 0.8rem;border-radius:4px;
            font-weight:700;font-size:0.75rem;letter-spacing:0.05em;
        }
        .banner-text{font-size:0.85rem;line-height:1.4;color:var(--text-light)}
        .banner-btn{padding:0.5rem 1rem;font-size:0.8rem;width:100%;text-align:center}
        .googleplay-announcement .banner-btn{
            background:linear-gradient(135deg,#01875f,#34a853);
            border-color:var(--accent-green);
        }

        .hero-tagline{
            font-size:clamp(0.9rem,2vw,1.2rem);
            margin-bottom:2rem;color:var(--accent-yellow);
        }
        .hero-subtitle{
            font-size:clamp(1rem,2.5vw,1.5rem);
            margin:2rem 0;color:var(--text-dim);
        }
        .infoline{
            font-size:clamp(0.8rem,1.5vw,0.9rem);
            color:rgba(0,255,136,0.7);margin-top:1rem;
            font-family:'Courier New',monospace;letter-spacing:0.5px;
        }

        /* CTA Buttons */
        .cta-buttons{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-top:3rem}
        .btn{
            padding:1rem 2rem;border:none;border-radius:8px;font-weight:700;
            font-size:1rem;cursor:pointer;transition:all 0.3s;text-decoration:none;
            display:inline-block;font-family:'Inter',sans-serif;
        }
        .btn-primary{background:var(--gradient);color:var(--bg-deep)}
        .btn-primary:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(0,255,136,0.4)}
        .btn-secondary{background:transparent;border:2px solid var(--accent-green);color:var(--accent-green)}
        .btn-secondary:hover{background:var(--accent-green);color:var(--bg-deep)}

        /* Scroll indicator */
        .scroll-indicator{
            margin-top:auto;padding-bottom:1rem;
            text-align:center;animation:float-bounce 3s ease-in-out infinite;
        }
        .scroll-indicator::before{
            content:'\2B07';font-size:2rem;color:var(--accent-green);
        }
        @keyframes float-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

        /* About Section */
        .about-grid{
            display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
            gap:2rem;margin-top:3rem;
        }
        .about-card{
            background:var(--card-bg);padding:2rem;border-radius:12px;
            border:1px solid rgba(0,255,136,0.2);transition:all 0.3s;
        }
        .about-card:hover{
            border-color:var(--accent-green);transform:translateY(-5px);
            box-shadow:0 10px 30px rgba(0,255,136,0.2);
        }
        .about-card h3{color:var(--accent-green);margin-bottom:1rem}

        /* Features Grid */
        .features-grid{
            display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
            gap:2rem;margin-top:3rem;
        }
        .feature-card{
            background:var(--card-bg);padding:2rem;border-radius:12px;
            text-align:center;border:1px solid rgba(0,255,136,0.1);transition:all 0.3s;
        }
        .feature-card:hover{border-color:var(--accent-green);transform:translateY(-5px)}
        .feature-icon{font-size:3rem;margin-bottom:1rem}

        /* Screenshots Gallery */
        .screenshots-grid{
            display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
            gap:1rem;margin-top:3rem;
        }
        .screenshot-item{
            position:relative;overflow:hidden;border-radius:12px;
            cursor:pointer;aspect-ratio:16/9;background:var(--card-bg);
        }
        .screenshot-item img{
            width:100%;height:100%;object-fit:cover;transition:transform 0.3s;
        }
        .screenshot-item:hover img{transform:scale(1.05)}

        /* Lightbox */
        .lightbox{
            display:none;position:fixed;top:0;left:0;width:100%;height:100%;
            background:rgba(0,0,0,0.95);z-index:9999;
            align-items:center;justify-content:center;padding:2rem;
        }
        .lightbox.active{display:flex}
        .lightbox img{max-width:90%;max-height:90%;border-radius:8px}
        .lightbox-close{
            position:absolute;top:2rem;right:2rem;font-size:2rem;
            color:white;cursor:pointer;background:rgba(255,255,255,0.1);
            padding:0.5rem 1rem;border-radius:8px;
        }

        /* Download Section */
        .download-grid{
            display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
            gap:2rem;margin-top:3rem;
        }
        .download-card{
            background:var(--card-bg);padding:2rem;border-radius:12px;
            text-align:center;border:2px solid rgba(0,255,136,0.2);
        }
        .download-card.disabled{opacity:0.5;filter:grayscale(100%);pointer-events:none}
        .download-card.disabled .btn{background:#666;cursor:not-allowed}
        .download-icon{font-size:4rem;margin-bottom:1rem}

        /* Support/Donation Section */
        #support{
            background:linear-gradient(135deg,rgba(0,255,136,0.05) 0%,rgba(0,212,255,0.05) 100%);
            padding:4rem 0;
        }
        .support-panel{
            max-width:700px;margin:0 auto;background:var(--card-bg);
            padding:3rem;border-radius:16px;border:2px solid var(--accent-green);
            box-shadow:0 10px 40px rgba(0,255,136,0.2);text-align:center;
        }
        .support-icon{font-size:4rem;margin-bottom:1.5rem;animation:float 3s ease-in-out infinite}
        @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
        .support-panel h2{color:var(--accent-green);margin-bottom:1rem}
        .support-panel p{color:var(--text-dim);margin-bottom:1.5rem;line-height:1.8}
        .support-note{font-size:0.9rem;color:var(--text-dim);font-style:italic;margin-top:1.5rem}

        /* Social Media Icons */
        .social-icons{display:flex;gap:1.5rem;justify-content:center;margin:2rem 0}
        .social-icon{
            display:inline-flex;align-items:center;justify-content:center;
            width:48px;height:48px;background:var(--card-bg);
            border:2px solid var(--accent-green);border-radius:50%;
            color:var(--accent-green);font-size:1.5rem;
            text-decoration:none;transition:all 0.3s;
        }
        .social-icon:hover{
            background:var(--accent-green);color:var(--bg-deep);
            transform:translateY(-5px);box-shadow:0 10px 30px rgba(0,255,136,0.4);
        }

        /* Footer */
        footer{
            background:var(--card-bg);padding:3rem 2rem;text-align:center;
            border-top:2px solid var(--accent-green);position:relative;z-index:1;
        }
        .footer-links{display:flex;gap:2rem;justify-content:center;flex-wrap:wrap;margin:2rem 0}
        .footer-links a{color:var(--text-dim);text-decoration:none;transition:color 0.3s}
        .footer-links a:hover{color:var(--accent-green)}
        .footer-credit{margin-top:2rem;font-size:0.9rem;color:var(--text-dim)}
        .footer-credit .heart{color:var(--accent-green);animation:heartbeat 1.5s infinite}
        @keyframes heartbeat{0%,100%{transform:scale(1)}25%{transform:scale(1.2)}}

        /* ===== KLARO CUSTOM STYLING ===== */
        .klaro .cookie-modal,.klaro .cookie-notice{
            background:var(--card-bg) !important;border:2px solid var(--accent-green) !important;
            box-shadow:0 10px 40px rgba(0,255,136,0.3) !important;
        }
        .klaro .cm-btn,.klaro .cn-buttons button{
            background:var(--gradient) !important;color:var(--bg-deep) !important;
            font-family:'Inter',sans-serif !important;font-weight:700 !important;
            border:none !important;border-radius:8px !important;
            padding:0.8rem 1.5rem !important;transition:all 0.3s !important;
        }
        .klaro .cm-btn:hover,.klaro .cn-buttons button:hover{
            transform:translateY(-2px) !important;box-shadow:0 5px 20px rgba(0,255,136,0.4) !important;
        }
        .klaro .cm-btn.cm-btn-decline{
            background:transparent !important;border:2px solid var(--accent-green) !important;
            color:var(--accent-green) !important;
        }
        .klaro .cm-btn.cm-btn-decline:hover{
            background:var(--accent-green) !important;color:var(--bg-deep) !important;
        }
        .klaro h1,.klaro h2,.klaro h3{color:var(--accent-green) !important;font-family:'Inter',sans-serif !important}
        .klaro p,.klaro span,.klaro label{color:var(--text-dim) !important}
        .klaro .cookie-notice{border-radius:12px !important}
        .klaro .cm-switch.cm-toggle-all input:checked+label,
        .klaro .cm-app-input:checked+label .slider{background:var(--accent-green) !important}
        .klaro .cookie-modal,.klaro .cookie-notice{z-index:2001 !important}

        /* ===== REUSABLE CARD & TEXT CLASSES ===== */
        .card{background:rgba(26,31,53,0.6);padding:1.5rem;border-radius:12px}
        .card--green{border:2px solid var(--accent-green)}
        .card--green-left{border-left:4px solid var(--accent-green)}
        .card--yellow{border:2px solid var(--accent-yellow)}
        .card--yellow-left{border-left:4px solid var(--accent-yellow)}
        .card--red{border:2px solid var(--accent-red)}
        .card-title--green{color:var(--accent-green);margin-bottom:0.8rem;font-size:1.2rem}
        .card-title--yellow{color:var(--accent-yellow);margin-bottom:0.8rem;font-size:1.2rem}
        .card-title--red{color:var(--accent-red);margin-bottom:0.8rem;font-size:1.2rem}
        .card-text{color:var(--text-dim);line-height:1.7}
        .highlight{color:var(--text-light)}
        .text-center{text-align:center}
        .grid-auto{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem}
        .mb-1{margin-bottom:1rem}
        .mb-15{margin-bottom:1.5rem}
        .mb-2{margin-bottom:2rem}
        .mb-3{margin-bottom:3rem}

        /* Focus States for Accessibility */
        a:focus-visible, button:focus-visible {
            outline: 2px solid var(--accent-green);
            outline-offset: 2px;
            border-radius: 4px;
        }
        .dot-nav a:focus-visible {
            outline: 2px solid var(--accent-green);
            outline-offset: 4px;
        }
        .sidebar-nav a:focus-visible {
            outline: 2px solid var(--accent-green);
            outline-offset: 2px;
        }
        .social-icon:focus-visible {
            outline: 2px solid var(--accent-green);
            outline-offset: 4px;
        }
        .btn:focus-visible {
            outline: 2px solid var(--accent-yellow);
            outline-offset: 3px;
        }

        /* ===== RESPONSIVE ===== */

        /* Mobile (<=768px) */
        @media(max-width:768px){
            body{margin-left:0;padding-top:56px;max-width:100vw}
            html{scroll-padding-top:70px}
            #particle-canvas{left:0;width:100%}
            .sidebar{transform:translateX(-100%);transition:transform 0.3s ease;z-index:1002;width:280px}
            .sidebar.open{transform:translateX(0)}
            .sidebar-overlay{pointer-events:none}.sidebar-overlay.active{display:block;pointer-events:auto}
            .mobile-topbar{display:flex}
            .dot-nav{display:none}
            #hero{padding:2rem 1rem 3rem;min-height:85vh;align-items:center;text-align:center}
            .hero-layout{flex-direction:column;gap:1.5rem}
            .hero-banner-left,.hero-banner-right{order:2}
            .hero-text-center{order:1;max-width:100%}
            .steam-announcement,.googleplay-announcement{flex-direction:row;min-width:auto;max-width:100%;padding:0.8rem 1.5rem}
            .banner-btn{width:auto;margin-left:0.5rem}
            .hero-content h1{font-size:1.2rem}
            .cta-buttons{flex-direction:column;gap:0.8rem;justify-content:center}
            .btn{width:100%;padding:0.8rem 1.5rem;font-size:0.9rem}
            section{padding:3rem 0}
            .container{padding:2rem 1rem}
            .section-title{font-size:1.5rem;margin-bottom:2rem}
            .about-grid,.features-grid{grid-template-columns:1fr;gap:1.5rem}
            .download-grid{grid-template-columns:1fr;gap:1.5rem}
            .download-card{padding:1.5rem}
            .download-icon{font-size:3rem}
            .screenshots-grid{grid-template-columns:1fr}
            .support-panel{padding:2rem 1.5rem;margin:0 1rem}
            .support-panel h2{font-size:1.3rem}
            .support-panel p{font-size:0.9rem}
            .support-icon{font-size:3rem}
            .social-icons{gap:1rem;flex-wrap:wrap}
            .social-icon{width:44px;height:44px;font-size:1.2rem}
            footer{padding:2rem 1rem}
            .footer-links{flex-direction:column;gap:1rem}
            .footer-credit{font-size:0.8rem}
            .feature-icon,.download-icon{font-size:2.5rem}
            .lightbox-close{font-size:1.2rem;padding:0.4rem 0.8rem;top:1rem;right:1rem}
            .scroll-indicator{align-self:center}
        }

        /* Small phones (<=480px) */
        @media(max-width:480px){
            #hero{padding:1.5rem 0.6rem 2rem}
            h1{font-size:1.6rem}
            .section-title{margin-bottom:2rem}
            .about-card,.feature-card,.download-card{padding:1rem}
            section{padding:2rem 0}
            .container{padding:1.5rem 0.75rem}
            .hero-content h1{font-size:1rem;line-height:1.6}
            .btn{padding:0.7rem 1rem;font-size:0.85rem}
            .feature-icon,.download-icon{font-size:2rem}
            .support-icon{font-size:2.2rem}
            .support-panel{padding:1.5rem 1rem}
            .steam-announcement,.googleplay-announcement{flex-direction:column;padding:1rem}
            .banner-btn{margin-left:0;width:100%}
        }

        /* Tablet (769px - 1024px) */
        @media(max-width:1024px) and (min-width:769px){
            .container{max-width:95%;padding:2rem 1rem}
            .features-grid{grid-template-columns:repeat(2,1fr);gap:1.2rem}
            .feature-card{padding:1.2rem}
            .feature-icon{font-size:2rem}
            .download-grid{grid-template-columns:repeat(2,1fr);gap:1.2rem}
            .download-card{padding:1.2rem}
            .about-grid{grid-template-columns:repeat(2,1fr);gap:1.2rem}
            .screenshots-grid{grid-template-columns:repeat(2,1fr)}
            #hero{padding:4rem 1.5rem 3rem;min-height:90vh}
            .support-panel{max-width:500px;padding:1.5rem}
            .hero-layout{flex-direction:column;gap:1.5rem}
            .hero-banner-left,.hero-banner-right{order:2}
            .hero-text-center{order:1}
            .steam-announcement,.googleplay-announcement{flex-direction:row;min-width:auto;max-width:100%;padding:0.8rem 1.5rem}
            .banner-btn{width:auto;margin-left:0.5rem}
        }

        /* Laptops (1025px - 1440px) */
        @media(min-width:1025px) and (max-width:1440px){
            .container{padding:4rem 1.5rem;max-width:95%}
            .features-grid{grid-template-columns:repeat(3,1fr);gap:1.5rem}
            .feature-card{padding:1.5rem}
            .feature-icon{font-size:2.5rem}
            .feature-card h3{font-size:1rem}
            .feature-card p{font-size:0.9rem}
            .download-grid{grid-template-columns:repeat(3,1fr);gap:1.5rem}
            .download-card{padding:1.5rem}
            .download-icon{font-size:3rem}
            .about-grid{grid-template-columns:repeat(3,1fr);gap:1.5rem}
            .about-card{padding:1.5rem}
            .screenshots-grid{grid-template-columns:repeat(3,1fr)}
            .support-panel{max-width:600px;padding:2rem}
            .hero-layout{gap:1.5rem}
            .steam-announcement,.googleplay-announcement{min-width:140px;max-width:160px;padding:1rem 0.8rem}
            .hero-text-center{max-width:500px}
        }

        /* Desktop screens (1200px+) - hero stays centered */
        @media(min-width:1200px){
            .hero-content{max-width:100%}
        }

        /* Mid-large desktops (1441px - 1919px) */
        @media(min-width:1441px) and (max-width:1919px){
            .container{max-width:1400px;padding:5rem 2.5rem}
            .hero-content{max-width:1400px}
            .hero-text-center{max-width:600px}
            .hero-layout{gap:2.5rem}
            .features-grid{grid-template-columns:repeat(3,1fr)}
            .screenshots-grid{grid-template-columns:repeat(3,1fr)}
        }

        /* Full HD+ (1920px - 2559px) */
        @media(min-width:1920px){
            .sidebar{width:280px}
            body{margin-left:280px}
            #particle-canvas{left:280px;width:calc(100% - 280px)}
            .container{max-width:1600px;padding:5rem 3rem}
            .hero-content{max-width:1600px}
            .hero-text-center{max-width:650px}
            .hero-layout{gap:3rem}
            h1{font-size:3.5rem}
            h2{font-size:2.4rem}
            h3{font-size:1.7rem}
            p{font-size:1.1rem;max-width:900px}
            .features-grid{grid-template-columns:repeat(4,1fr)}
            .screenshots-grid{grid-template-columns:repeat(4,1fr)}
            .download-grid{grid-template-columns:repeat(4,1fr)}
            .about-grid{grid-template-columns:repeat(3,1fr)}
        }

        /* 4K / Ultra-wide (2560px+) */
        @media(min-width:2560px){
            .sidebar{width:300px}
            body{margin-left:300px}
            #particle-canvas{left:300px;width:calc(100% - 300px)}
            .container{max-width:2000px;padding:6rem 3rem}
            .hero-content{max-width:2000px}
            .hero-text-center{max-width:700px}
            .hero-layout{gap:4rem}
            h1{font-size:4.5rem}
            h2{font-size:3rem}
            h3{font-size:2.2rem}
            p{font-size:1.25rem;max-width:1000px}
            .section-title{margin-bottom:4rem}
            .features-grid{grid-template-columns:repeat(4,1fr);gap:2.5rem}
            .feature-card{padding:2.5rem}
            .feature-icon{font-size:4rem}
            .screenshots-grid{grid-template-columns:repeat(4,1fr);gap:1.5rem}
            .download-grid{grid-template-columns:repeat(4,1fr);gap:2rem}
            .download-card{padding:2.5rem}
            .download-icon{font-size:4.5rem}
            .about-card{padding:2.5rem}
            .support-panel{max-width:800px;padding:3rem}
            .btn{font-size:1.1rem;padding:1.1rem 2.5rem}
            .social-icon{width:56px;height:56px;font-size:1.8rem}
            .dot-nav a{width:14px;height:14px}
        }

        /* Reduced motion */
        @media(prefers-reduced-motion:reduce){
            .reveal{opacity:1;transform:none;transition:none}
            .scroll-indicator{animation:none}
            .about-card,.feature-card,.download-card{transition:none}
            #particle-canvas{display:none}
            *{animation-duration:0.01ms!important;transition-duration:0.01ms!important}
        }