:root{--bg-dark:#02030a;--bg-med:#07101e;--bg-card:#0d1626;--gold:#f5a623;--gold-glow:rgba(245,166,35,.25);--gold-lite:#ffd460;--red:#dc2626;--blue:#3b82f6;--white:#fff;--gray:#9ca3af;--muted:#4b5563;--border:rgba(245,166,35,.18);--border-w:rgba(255,255,255,.07);--radius:12px}
    *,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{background:var(--bg-dark);color:var(--white);font-family:'Inter',sans-serif;overflow-x:hidden}
    a{color:inherit;text-decoration:none}ul{list-style:none}
    .bebas{font-family:'Bebas Neue',sans-serif;letter-spacing:.04em}
    .rajdh{font-family:'Rajdhani',sans-serif}
    .gold{color:var(--gold)}
    ::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:var(--bg-dark)}::-webkit-scrollbar-thumb{background:var(--gold);border-radius:99px}
    @keyframes glowPulse{0%,100%{box-shadow:0 0 20px var(--gold-glow)}50%{box-shadow:0 0 40px rgba(245,166,35,.5)}}
    @keyframes fadeUp{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}
    @keyframes scanLine{0%{transform:translateY(-100%)}100%{transform:translateY(100vh)}}
    @keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
    @keyframes rotateRing{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
    @keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
    @keyframes dmgFloat{0%{opacity:1;transform:translateY(0) translateX(-50%)}100%{opacity:0;transform:translateY(-60px) translateX(-50%)}}

    /* NAV */
    #navbar{position:fixed;top:0;left:0;right:0;z-index:1000;background:rgba(2,3,10,.85);backdrop-filter:blur(16px);border-bottom:1px solid var(--border);transition:background .3s}
    .nav-container{max-width:1280px;margin:0 auto;padding:0 24px;height:68px;display:flex;align-items:center;justify-content:space-between}
    .nav-logo{font-family:'Bebas Neue',sans-serif;font-size:1.5rem;letter-spacing:.12em;display:flex;align-items:center;gap:2px}
    .nav-logo .logo-t{color:var(--gold);font-size:1.9rem;line-height:1}
    .nav-logo .sub{font-size:.55rem;letter-spacing:.2em;color:var(--gray);display:block}
    .nav-links{display:flex;align-items:center;gap:32px}
    .nav-links a{font-family:'Rajdhani',sans-serif;font-weight:600;font-size:.9rem;letter-spacing:.1em;color:var(--gray);transition:color .2s}
    .nav-links a:hover{color:var(--white)}
    .nav-links .nav-cta{background:var(--gold);color:#000;padding:8px 20px;border-radius:4px;font-weight:700;letter-spacing:.08em;transition:background .2s,transform .1s}
    .nav-links .nav-cta:hover{background:var(--gold-lite);transform:translateY(-1px)}
    .nav-toggle{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:4px}
    .nav-toggle span{display:block;width:24px;height:2px;background:var(--white);border-radius:2px}
    .mobile-menu{display:none;background:rgba(7,16,30,.98);backdrop-filter:blur(16px);position:fixed;top:68px;left:0;right:0;z-index:999;padding:20px 24px;border-bottom:1px solid var(--border)}
    .mobile-menu.open{display:block}
    .mobile-menu ul{display:flex;flex-direction:column;gap:4px}
    .mobile-menu ul li a{display:block;padding:12px 0;font-family:'Rajdhani',sans-serif;font-weight:600;font-size:1.1rem;letter-spacing:.1em;color:var(--gray);border-bottom:1px solid var(--border-w)}

    /* HERO */
    #hero{position:relative;height:100vh;min-height:640px;display:flex;align-items:center;justify-content:center;overflow:hidden}
    #heroCanvas{position:absolute;inset:0;width:100%;height:100%}
    .hero-scanline{position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,rgba(245,166,35,.4),transparent);animation:scanLine 6s linear infinite;pointer-events:none}
    .hero-content{position:relative;z-index:2;text-align:center;padding:0 24px;animation:fadeUp .8s ease both}
    .hero-eyebrow{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:.8rem;letter-spacing:.28em;color:var(--gold);text-transform:uppercase;margin-bottom:16px}
    .hero-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(3.5rem,9vw,8rem);line-height:.9;letter-spacing:.04em;color:var(--white);text-shadow:0 0 80px rgba(245,166,35,.2)}
    .hero-title .highlight{color:var(--gold)}
    .hero-sub{font-family:'Rajdhani',sans-serif;font-size:clamp(1rem,2vw,1.3rem);font-weight:600;letter-spacing:.14em;color:var(--gray);text-transform:uppercase;margin-top:16px;margin-bottom:36px}
    .hero-badges{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:40px}
    .h-badge{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:.78rem;letter-spacing:.12em;padding:5px 14px;border-radius:4px;background:rgba(245,166,35,.1);border:1px solid rgba(245,166,35,.3);color:var(--gold)}
    .hero-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
    .btn-hero-primary{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:.9rem;letter-spacing:.12em;padding:14px 36px;background:var(--gold);color:#000;border-radius:4px;border:none;cursor:pointer;transition:all .2s}
    .btn-hero-primary:hover{background:var(--gold-lite);transform:translateY(-2px);box-shadow:0 8px 24px var(--gold-glow)}
    .btn-hero-secondary{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:.9rem;letter-spacing:.12em;padding:14px 36px;background:transparent;color:var(--white);border:1px solid rgba(255,255,255,.2);border-radius:4px;cursor:pointer;transition:all .2s}
    .btn-hero-secondary:hover{border-color:var(--gold);color:var(--gold)}
    .hero-stats{position:absolute;bottom:48px;left:0;right:0;display:flex;justify-content:center;gap:clamp(20px,4vw,56px);flex-wrap:wrap}
    .h-stat{text-align:center}
    .h-stat-n{font-family:'Bebas Neue',sans-serif;font-size:2.2rem;color:var(--gold);line-height:1}
    .h-stat-l{font-size:.65rem;letter-spacing:.18em;color:var(--gray);text-transform:uppercase;margin-top:2px}

    /* SECTION */
    section{padding:100px 0}
    .section-inner{max-width:1280px;margin:0 auto;padding:0 24px}
    .section-label{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:.75rem;letter-spacing:.3em;color:var(--gold);text-transform:uppercase;margin-bottom:10px}
    .section-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(2.4rem,5vw,4rem);color:var(--white);line-height:1.05;margin-bottom:16px}
    .section-sub{color:var(--gray);font-size:.95rem;line-height:1.75;max-width:520px}
    .section-header{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:52px;flex-wrap:wrap}
    .section-header-left{}
    .see-all{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:.82rem;letter-spacing:.14em;color:var(--gold);border:1px solid rgba(245,166,35,.3);padding:9px 20px;border-radius:4px;cursor:pointer;transition:all .2s;white-space:nowrap}
    .see-all:hover{background:rgba(245,166,35,.1)}
    .divider{width:60px;height:3px;background:linear-gradient(90deg,var(--gold),transparent);margin-bottom:20px;border-radius:2px}

    /* reveal animation */
    .reveal{opacity:0;transform:translateY(32px);transition:opacity .6s ease,transform .6s ease}
    .reveal.visible{opacity:1;transform:none}

    /* UNIVERSE / LEGACY BANNER */
    #universe{background:linear-gradient(180deg,var(--bg-dark) 0%,var(--bg-med) 50%,var(--bg-dark) 100%)}
    .legacy-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:2px;background:var(--border);border:1px solid var(--border);border-radius:12px;overflow:hidden;margin-top:60px}
    .legacy-stat{background:var(--bg-card);padding:36px 24px;text-align:center;transition:background .2s}
    .legacy-stat:hover{background:rgba(13,22,38,.8)}
    .big{font-family:'Bebas Neue',sans-serif;font-size:3rem;color:var(--gold);line-height:1}
    .lbl{font-size:.7rem;letter-spacing:.18em;color:var(--gray);text-transform:uppercase;margin-top:6px}
    .universe-text{max-width:680px}
    .universe-text p{color:var(--gray);line-height:1.85;font-size:.95rem;margin-bottom:16px}

    /* CHARACTERS */
    #characters{background:var(--bg-dark)}
    .chars-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px}
    .char-card{background:var(--bg-card);border:1px solid var(--border-w);border-radius:var(--radius);overflow:hidden;cursor:pointer;transition:transform .25s,box-shadow .25s,border-color .25s}
    .char-card:hover{transform:translateY(-6px);box-shadow:0 20px 48px rgba(0,0,0,.6),0 0 0 1px rgba(245,166,35,.2);border-color:rgba(245,166,35,.3)}
    .char-card-top{position:relative;height:220px;background:var(--bg-med);overflow:hidden}
    .char-card-top img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;transition:transform .4s}
    .char-card:hover .char-card-top img{transform:scale(1.05)}
    .char-card-top-inner{position:absolute;inset:0;background:linear-gradient(0deg,rgba(7,16,30,.95) 0%,rgba(7,16,30,.2) 60%,transparent 100%)}
    .char-year-badge{position:absolute;top:12px;right:12px;font-family:'Rajdhani',sans-serif;font-weight:700;font-size:.72rem;letter-spacing:.12em;background:rgba(245,166,35,.9);color:#000;padding:3px 10px;border-radius:3px}
    .char-play-hint{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);font-family:'Rajdhani',sans-serif;font-weight:700;font-size:.75rem;letter-spacing:.14em;color:var(--gold);opacity:0;transition:opacity .2s;white-space:nowrap}
    .char-card:hover .char-play-hint{opacity:1}
    .char-card-body{padding:20px}
    .char-film{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:.7rem;letter-spacing:.16em;color:var(--gold);text-transform:uppercase;margin-bottom:4px}
    .char-name{font-family:'Bebas Neue',sans-serif;font-size:1.7rem;color:var(--white);margin-bottom:4px}
    .char-genre{font-family:'Rajdhani',sans-serif;font-weight:600;font-size:.78rem;letter-spacing:.1em;color:var(--gray);text-transform:uppercase;margin-bottom:10px}
    .char-desc{font-size:.82rem;color:var(--gray);line-height:1.65;margin-bottom:14px}
    .char-stats{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
    .stat-row{display:flex;align-items:center;gap:8px}
    .stat-label-sm{font-size:.62rem;letter-spacing:.1em;color:var(--muted);width:78px;text-transform:uppercase}
    .stat-track{flex:1;height:4px;background:rgba(255,255,255,.07);border-radius:99px;overflow:hidden}
    .stat-fill{height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-lite));border-radius:99px;width:0;transition:width 1s ease}
    .stat-val{font-size:.7rem;font-weight:700;color:var(--gold);width:24px;text-align:right}
    .char-features{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
    .feat-tag{font-size:.65rem;letter-spacing:.06em;padding:3px 9px;border-radius:3px;background:rgba(245,166,35,.08);border:1px solid rgba(245,166,35,.18);color:var(--gold)}
    .char-btn{display:flex;align-items:center;justify-content:space-between;background:var(--gold);color:#000;padding:11px 16px;border-radius:6px;font-family:'Rajdhani',sans-serif;font-weight:700;font-size:.82rem;letter-spacing:.1em;transition:background .2s}
    .char-card:hover .char-btn{background:var(--gold-lite)}

    /* TIMELINE */
    #timeline{background:linear-gradient(180deg,var(--bg-dark) 0%,var(--bg-med) 100%)}
    .timeline-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
    .tl-item{background:var(--bg-card);border:1px solid var(--border-w);border-radius:8px;padding:12px;text-align:center;transition:border-color .2s,transform .2s}
    .tl-item:hover{border-color:rgba(245,166,35,.35);transform:translateY(-3px)}
    .featured-tl{border-color:rgba(245,166,35,.25);background:rgba(245,166,35,.04)}
    .tl-year{font-family:'Bebas Neue',sans-serif;font-size:1.3rem;color:var(--gold);margin-bottom:2px}
    .tl-film{font-size:.7rem;font-weight:600;color:var(--white);margin-bottom:2px}
    .tl-role{font-size:.62rem;color:var(--gray)}

    /* FEATURES */
    #gameplay{background:var(--bg-dark)}
    .features-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px}
    .feat-card{background:var(--bg-card);border:1px solid var(--border-w);border-radius:var(--radius);padding:28px;transition:border-color .2s,transform .2s}
    .feat-card:hover{border-color:rgba(245,166,35,.3);transform:translateY(-4px)}
    .feat-icon{font-size:1.8rem;margin-bottom:14px}
    .feat-title{font-family:'Bebas Neue',sans-serif;font-size:1.2rem;color:var(--white);margin-bottom:8px}
    .feat-desc{font-size:.82rem;color:var(--gray);line-height:1.65}

    /* ACHIEVEMENTS */
    #achievements{background:linear-gradient(180deg,var(--bg-dark) 0%,var(--bg-med) 100%)}
    .ach-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
    .ach-card{background:var(--bg-card);border:1px solid var(--border-w);border-radius:var(--radius);padding:20px;display:flex;gap:14px;align-items:flex-start;transition:border-color .2s}
    .ach-card:hover{border-color:rgba(245,166,35,.2)}
    .ach-icon{font-size:1.6rem;flex-shrink:0}
    .ach-name{font-weight:700;font-size:.9rem;color:var(--white);margin-bottom:3px}
    .ach-desc{font-size:.78rem;color:var(--gray);line-height:1.5;margin-bottom:8px}
    .ach-rarity{font-size:.62rem;letter-spacing:.12em;padding:2px 8px;border-radius:3px;font-weight:700;text-transform:uppercase}
    .rarity-legendary{background:rgba(245,166,35,.15);color:var(--gold);border:1px solid rgba(245,166,35,.3)}
    .rarity-epic{background:rgba(168,85,247,.15);color:#c084fc;border:1px solid rgba(168,85,247,.3)}
    .rarity-rare{background:rgba(59,130,246,.12);color:#60a5fa;border:1px solid rgba(59,130,246,.25)}

    /* NEWSROOM */
    #newsroom{background:var(--bg-dark); border-top:1px solid var(--border-w); padding: 100px 0;}
    .news-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:24px; margin-top:40px;}
    .news-card{background:var(--bg-card); border:1px solid var(--border-w); border-radius:var(--radius); overflow:hidden; transition:transform 0.2s, border-color 0.2s;}
    .news-card:hover{transform:translateY(-5px); border-color:rgba(245,166,35,0.3);}
    .news-img{width:100%; height:180px; object-fit:cover; border-bottom:1px solid var(--border-w);}
    .news-body{padding:20px;}
    .news-meta{font-size:0.7rem; color:var(--gold); font-family:'Rajdhani', sans-serif; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; margin-bottom:8px; display:flex; justify-content:space-between;}
    .news-title{font-family:'Bebas Neue', sans-serif; font-size:1.4rem; color:var(--white); margin-bottom:10px; line-height:1.2;}
    .news-excerpt{font-size:0.85rem; color:var(--gray); line-height:1.6; margin-bottom:16px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;}
    .news-link{font-family:'Rajdhani', sans-serif; font-weight:700; font-size:0.8rem; color:var(--gold); text-transform:uppercase; letter-spacing:0.1em; display:flex; align-items:center; gap:5px;}
    .news-link:hover{color:var(--white);}
    .ad-placeholder{background:rgba(255,255,255,0.03); border:1px dashed var(--border); display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:0.7rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase;}

    /* ═══════════ CM COMMAND CENTER ═══════════ */
    #newsroom{background:var(--bg-dark); position:relative; border-top:1px solid var(--border-w); padding:100px 0;}
    .command-center-header{background:rgba(13,22,38,0.8); border:1px solid var(--border); border-radius:8px; overflow:hidden; display:flex; align-items:stretch;}
    .live-indicator{background:var(--red); padding:12px 24px; display:flex; align-items:center; gap:10px; font-family:'Rajdhani', sans-serif; font-weight:700; font-size:0.8rem; letter-spacing:0.1em;}
    .ticker-wrap{flex:1; display:flex; align-items:center; background:rgba(0,0,0,0.5); overflow:hidden; position:relative;}
    .ticker-label{background:var(--gold); color:#000; padding:12px 15px; font-family:'Bebas Neue', sans-serif; font-size:1.1rem; z-index:2;}
    .ticker-content{display:flex; gap:50px; padding:0 30px; animation:tickerScroll 60s linear infinite; white-space:nowrap; align-items:center;}
    .ticker-content span{font-family:'Rajdhani', sans-serif; font-weight:600; font-size:0.9rem; color:var(--white); opacity:0.9;}
    @keyframes tickerScroll{0%{transform:translateX(0);} 100%{transform:translateX(-100%);}}

    .social-pulse-box{background:rgba(245,166,35,0.05); border:1px solid var(--border); padding:20px; border-radius:var(--radius); min-width:240px;}
    .pulse-title{font-family:'Bebas Neue', sans-serif; font-size:1.2rem; color:var(--gold); margin-bottom:12px; display:flex; align-items:center; gap:8px;}
    .hashtag{display:inline-block; background:rgba(255,255,255,0.05); color:var(--white); padding:4px 10px; border-radius:4px; font-size:0.75rem; margin:2px; font-family:'Rajdhani', sans-serif; font-weight:600; border:1px solid var(--border-w);}

    /* CM Card Styles */
    .news-card{border-left:4px solid var(--gold); background:linear-gradient(135deg, var(--bg-card) 0%, rgba(13,22,38,0.5) 100%);}
    .news-meta span:first-child{background:var(--gold); color:#000; padding:2px 6px; border-radius:2px; font-weight:800;}

    /* LEADERBOARD */
    .leaderboard-box{background:rgba(13,22,38,0.8); border:1px solid var(--border); border-radius:var(--radius); padding:24px; position:sticky; top:100px;}
    .lb-header{border-bottom:1px solid var(--border-w); padding-bottom:15px; margin-bottom:15px;}
    .lb-title{font-family:'Bebas Neue', sans-serif; font-size:1.4rem; color:var(--gold);}
    .lb-meta{font-family:'Rajdhani', sans-serif; font-size:0.75rem; color:var(--gray); font-weight:700; letter-spacing:0.1em;}
    .lb-list{display:flex; flex-direction:column; gap:8px;}
    .lb-item{background:rgba(255,255,255,0.03); border:1px solid var(--border-w); padding:10px 15px; border-radius:6px; display:flex; align-items:center; gap:12px; font-family:'Rajdhani', sans-serif; font-weight:600;}
    .lb-rank{color:var(--gold); width:20px; font-weight:800;}
    .lb-user{flex:1; color:var(--white); font-size:0.9rem;}
    .lb-score{color:var(--gray); font-size:0.85rem;}
    .lb-item.current-user{background:rgba(245,166,35,0.1); border-color:var(--border);}
    .lb-btn{width:100%; margin-top:20px; background:transparent; border:1px solid var(--gold); color:var(--gold); padding:10px; border-radius:4px; font-family:'Rajdhani', sans-serif; font-weight:700; font-size:0.8rem; cursor:pointer; transition:all 0.2s;}
    .lb-btn:hover{background:var(--gold); color:#000;}

    /* ═══════════ VIRAL ENGAGEMENT ═══════════ */
    .viral-share-float{position:fixed; bottom:30px; right:30px; z-index:1100; display:flex; flex-direction:column; gap:12px; transition:transform 0.3s;}
    .share-btn-wa{background:#25d366; color:white; width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.8rem; box-shadow:0 10px 25px rgba(37,211,102,0.3); cursor:pointer; border:none; transition:all 0.2s;}
    .share-btn-wa:hover{transform:scale(1.1) rotate(10deg);}
    .share-btn-tg{background:#0088cc; color:white; width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.4rem; box-shadow:0 8px 20px rgba(0,136,204,0.3); cursor:pointer; border:none; transition:all 0.2s; align-self:center;}
    
    .fan-pulse{position:fixed; top:75px; right:24px; z-index:900; background:rgba(220,38,38,0.15); border:1px solid rgba(220,38,38,0.3); padding:6px 12px; border-radius:99px; display:flex; align-items:center; gap:8px; font-family:'Rajdhani', sans-serif; font-size:0.75rem; font-weight:700; color:#fff; backdrop-filter:blur(8px); animation:fadeUp 0.5s ease both;}
    .pulse-dot{width:8px; height:8px; background:#ef4444; border-radius:50%; animation:blink 1s infinite;}
    .trending-tag{background:var(--gold); color:#000; padding:2px 8px; border-radius:4px; font-size:0.65rem; margin-right:8px;}

    /* FOOTER */
    footer{background:var(--bg-dark);border-top:1px solid var(--border-w);padding:60px 0 32px}
    .footer-inner{max-width:1280px;margin:0 auto;padding:0 24px}
    .footer-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;margin-bottom:48px}
    .footer-brand .footer-logo{font-family:'Bebas Neue',sans-serif;font-size:1.6rem;letter-spacing:.1em;color:var(--gold);margin-bottom:12px}
    .footer-brand p{font-size:.8rem;color:var(--gray);line-height:1.75}
    .footer-col h5{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:.72rem;letter-spacing:.2em;color:var(--gold);text-transform:uppercase;margin-bottom:16px}
    .footer-col ul li{margin-bottom:8px}
    .footer-col ul li a{font-size:.82rem;color:var(--gray);transition:color .2s}
    .footer-col ul li a:hover{color:var(--white)}
    .footer-bottom{border-top:1px solid var(--border-w);padding-top:24px;display:flex;justify-content:space-between;align-items:center;flex-wrap:gap;gap:12px}
    .footer-note{font-size:.72rem;color:var(--muted)}
    .footer-tally{font-family:'Bebas Neue',sans-serif;font-size:1rem;letter-spacing:.16em;color:var(--gold);opacity:.5}

    /* RESPONSIVE */
    @media(max-width:768px){
      .nav-links{display:none}.nav-toggle{display:flex}
      .footer-top{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}
      .section-header{flex-direction:column;align-items:flex-start}
      .hero-stats{gap:20px}
    }
    @media(max-width:480px){.footer-top{grid-template-columns:1fr}}

    /* ═══════════ CINEMATIC GAME OVERLAY ═══════════ */
    #gameOverlay{
      position:fixed;inset:0;z-index:2000;display:none;
      background:#000;
    }
    #gameOverlay.active{display:block}
    #gameCanvas3d{position:absolute;inset:0;width:100%;height:100%;display:block}

    /* Cinematic Loading — POSTER BACKGROUND */
    #gLoading{
      position:absolute;inset:0;z-index:10;
      background:#000;
      display:flex;flex-direction:column;align-items:center;justify-content:center;
      transition:opacity .6s;overflow:hidden;
    }
    #gLoading.out{opacity:0;pointer-events:none}
    /* Poster BG image */
    #gLoadBg{
      position:absolute;inset:0;
      background-size:cover;background-position:center top;
      filter:blur(2px) brightness(.35) saturate(1.4);
      transform:scale(1.08);
      transition:background-image .4s;
    }
    /* Cinematic vignette */
    #gLoading::before{
      content:'';position:absolute;inset:0;z-index:1;
      background:radial-gradient(ellipse at 50% 40%,transparent 30%,rgba(0,0,0,.7) 100%);
    }
    #gLoading::after{
      content:'';position:absolute;inset:0;z-index:1;
      background:linear-gradient(0deg,rgba(0,0,0,.95) 0%,transparent 40%,transparent 60%,rgba(0,0,0,.6) 100%);
    }
    /* Left character portrait strip */
    #gPortrait{
      position:absolute;left:0;top:0;bottom:0;width:42%;z-index:2;
      background-size:cover;background-position:center top;
      mask-image:linear-gradient(90deg,black 60%,transparent 100%);
      -webkit-mask-image:linear-gradient(90deg,black 60%,transparent 100%);
      filter:brightness(.8) contrast(1.1) saturate(1.2);
      transition:background-image .5s;
    }
    .gl-inner{position:relative;z-index:3;text-align:center}
    .gl-icon{font-size:5rem;margin-bottom:12px;filter:drop-shadow(0 0 30px var(--load-color,rgba(220,38,38,.5)))}
    .gl-film{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:.75rem;letter-spacing:.28em;color:rgba(255,255,255,.5);text-transform:uppercase;margin-bottom:8px}
    .gl-name{font-family:'Bebas Neue',sans-serif;font-size:5rem;letter-spacing:.06em;color:#fff;line-height:.9;margin-bottom:8px;text-shadow:0 4px 24px rgba(0,0,0,.8)}
    .gl-genre{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:.82rem;letter-spacing:.18em;color:var(--load-color-txt,#e8192c);text-transform:uppercase;margin-bottom:32px}
    .gl-track{width:320px;height:2px;background:rgba(255,255,255,.08);border-radius:99px;overflow:hidden;margin:0 auto}
    .gl-fill{height:100%;border-radius:99px;width:0;transition:width .08s linear}
    .gl-tip{margin-top:20px;font-size:.78rem;color:rgba(255,255,255,.3);letter-spacing:.06em}

    /* Intro card — POSTER BACKGROUND */
    #gIntro{
      position:absolute;inset:0;z-index:9;
      background:linear-gradient(180deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,.92) 100%);
      display:none;flex-direction:column;align-items:center;justify-content:center;
      gap:8px;text-align:center;padding:32px;cursor:pointer;overflow:hidden;
    }
    #gIntroBg{
      position:absolute;inset:0;
      background-size:cover;background-position:center top;
      filter:blur(3px) brightness(.25) saturate(1.3);
      transform:scale(1.06);z-index:0;
    }
    #gIntro.show{display:flex}
    #gIntro.out{animation:introOut .4s forwards}
    @keyframes introOut{to{opacity:0;transform:scale(1.04)}}
    .gi-icon{font-size:4rem;margin-bottom:4px;filter:drop-shadow(0 0 24px rgba(255,255,255,.3));position:relative;z-index:1}
    .gi-film{font-size:.72rem;letter-spacing:.25em;color:rgba(255,255,255,.5);text-transform:uppercase;position:relative;z-index:1}
    .gi-name{font-family:'Bebas Neue',sans-serif;font-size:5rem;letter-spacing:.06em;color:#fff;line-height:.9;margin:8px 0 4px;position:relative;z-index:1;text-shadow:0 4px 24px rgba(0,0,0,.9)}
    .gi-genre{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:.82rem;letter-spacing:.18em;color:var(--gold);text-transform:uppercase;position:relative;z-index:1}
    .gi-quote{font-style:italic;color:rgba(255,255,255,.7);font-size:.95rem;max-width:520px;margin:16px 0;line-height:1.7;border-left:2px solid var(--gold);padding-left:16px;text-align:left;position:relative;z-index:1;background:rgba(0,0,0,.3);border-radius:0 6px 6px 0;padding:12px 16px}
    .gi-controls{margin-top:16px;font-size:.78rem;color:rgba(255,255,255,.5);line-height:2.1;position:relative;z-index:1}
    .gi-press{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:.78rem;letter-spacing:.22em;color:rgba(255,255,255,.4);text-transform:uppercase;margin-top:24px;animation:blink 1.6s infinite;position:relative;z-index:1}

    /* HUD */
    #gHUD{position:absolute;inset:0;z-index:8;pointer-events:none;display:none}
    #gHUD.active{display:block}
    .hud-tl{
      position:absolute;top:20px;left:20px;
      background:rgba(0,0,0,.5);backdrop-filter:blur(12px);
      padding:10px 16px;border-radius:10px;
      border:1px solid rgba(255,255,255,.08);
    }
    .hud-char{font-family:'Bebas Neue',sans-serif;font-size:1rem;letter-spacing:.1em;color:#fff;margin-bottom:6px}
    .hud-hp-wrap{display:flex;align-items:center;gap:8px}
    .hud-hp-track{width:160px;height:5px;background:rgba(255,255,255,.12);border-radius:99px;overflow:hidden}
    .hud-hp-fill{height:100%;background:linear-gradient(90deg,#22c55e,#4ade80);border-radius:99px;transition:width .2s,background .3s}
    .hud-hp-txt{font-size:.72rem;font-weight:700;color:rgba(255,255,255,.65);min-width:44px}
    .hud-tr{
      position:absolute;top:20px;right:20px;text-align:right;
      background:rgba(0,0,0,.5);backdrop-filter:blur(12px);
      padding:10px 16px;border-radius:10px;
      border:1px solid rgba(255,255,255,.08);
    }
    .hud-obj{font-size:.68rem;letter-spacing:.1em;color:rgba(255,255,255,.45);text-transform:uppercase;margin-bottom:4px}
    .hud-kills{font-family:'Bebas Neue',sans-serif;font-size:1.1rem;letter-spacing:.06em;color:#fff}
    .hud-bl{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);font-size:.68rem;letter-spacing:.1em;color:rgba(255,255,255,.28);white-space:nowrap}
    .hud-wave{
      position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
      font-family:'Bebas Neue',sans-serif;font-size:1.5rem;letter-spacing:.2em;
      color:rgba(255,255,255,.18);pointer-events:none;
    }
    .hud-notif{
      position:absolute;top:40%;left:50%;transform:translate(-50%,-50%);
      font-family:'Bebas Neue',sans-serif;font-size:2.5rem;letter-spacing:.1em;
      color:var(--gold);text-shadow:0 0 30px var(--gold-glow);
      opacity:0;transition:opacity .3s;pointer-events:none;
    }
    .hud-notif.show{opacity:1}
    #gHitFlash{
      position:absolute;inset:0;
      background:radial-gradient(ellipse at center,rgba(220,38,38,.3) 0%,rgba(220,38,38,.15) 60%,transparent 100%);
      opacity:0;pointer-events:none;z-index:7;transition:opacity .12s;
    }
    #gHitFlash.on{opacity:1}
    .dmg-float{position:absolute;font-family:'Bebas Neue',sans-serif;font-size:1.6rem;pointer-events:none;animation:dmgFloat .9s forwards;z-index:12;text-shadow:0 2px 8px rgba(0,0,0,.8)}
    .score-float{color:#f5a623!important;font-size:1.2rem!important}

    /* End screen */
    #gEndScreen{
      position:absolute;inset:0;z-index:11;
      background:rgba(0,0,0,.88);backdrop-filter:blur(16px);
      display:none;flex-direction:column;align-items:center;justify-content:center;
      gap:12px;text-align:center;padding:32px;
    }
    #gEndScreen.show{display:flex}
    .end-title{font-family:'Bebas Neue',sans-serif;font-size:5rem;letter-spacing:.06em;color:#ef4444;text-shadow:0 0 40px rgba(239,68,68,.4)}
    .end-sub{font-family:'Rajdhani',sans-serif;font-weight:600;font-size:1.1rem;letter-spacing:.08em;color:rgba(255,255,255,.55)}
    .end-stats{font-size:.88rem;color:rgba(255,255,255,.45);line-height:2.2;margin:8px 0}
    .end-btns{display:flex;gap:12px;margin-top:16px;flex-wrap:wrap;justify-content:center}
    .btn-primary,.btn-secondary{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:.88rem;letter-spacing:.12em;padding:13px 30px;border-radius:6px;cursor:pointer;border:none;transition:all .2s}
    .btn-primary{background:var(--gold);color:#000}.btn-primary:hover{background:var(--gold-lite)}
    .btn-secondary{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.15)}.btn-secondary:hover{background:rgba(255,255,255,.15)}

    #gExitBtn{
      position:absolute;top:20px;left:50%;transform:translateX(-50%);
      font-family:'Rajdhani',sans-serif;font-weight:700;font-size:.75rem;letter-spacing:.14em;
      background:rgba(0,0,0,.55);backdrop-filter:blur(8px);
      color:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.12);
      padding:8px 22px;border-radius:99px;cursor:pointer;display:none;z-index:15;transition:all .2s;
    }
    #gExitBtn.show{display:block}
    #gExitBtn:hover{background:rgba(220,38,38,.4);color:#fff;border-color:rgba(220,38,38,.5)}

    /* Touch controls */
    #gTouchControls{position:absolute;bottom:24px;z-index:15;width:100%;display:flex;justify-content:space-between;padding:0 20px;pointer-events:none}
    .touch-dpad{display:grid;grid-template-columns:repeat(3,52px);grid-template-rows:repeat(3,52px);gap:4px;pointer-events:all}
    .touch-dpad button:nth-child(1){grid-column:2;grid-row:1}
    .touch-dpad button:nth-child(2){grid-column:2;grid-row:3}
    .touch-dpad button:nth-child(3){grid-column:1;grid-row:2}
    .touch-dpad button:nth-child(4){grid-column:3;grid-row:2}
    .touch-dpad button,.touch-actions button{
      width:52px;height:52px;border-radius:50%;
      background:rgba(255,255,255,.12);backdrop-filter:blur(8px);
      border:1px solid rgba(255,255,255,.2);color:#fff;font-size:1.1rem;
      cursor:pointer;display:flex;align-items:center;justify-content:center;pointer-events:all;
    }
    .touch-actions{display:flex;align-items:center;pointer-events:all}
    .touch-actions button{background:rgba(245,166,35,.25);border-color:rgba(245,166,35,.4);font-size:1.4rem}