/* KOYCASH mobile scroll performance stage 3
   Focus: reduce repaint while keeping the same layout and visual identity. */
@media (max-width: 820px){
  html{scroll-behavior:auto !important;}
  body{
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
    -webkit-filter:none !important;
    transition:none !important;
    background:
      radial-gradient(circle at 50% -8%, rgba(255,25,92,.16), transparent 30%),
      linear-gradient(180deg, #22000a 0%, #0b0210 18%, #050008 100%) !important;
  }
  body.loaded, body.leaving{
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
    -webkit-filter:none !important;
    transition:none !important;
  }

  /* Fixed / animated backgrounds are expensive on phones while scrolling. */
  .ambient,
  .ambient::before,
  .ambient::after,
  .desktop-chibi-decor,
  .floating-glow,
  .bg-orb,
  .decor-layer,
  .decor-blur,
  .animated-bg,
  .bg-blur,
  .particles,
  .spark-layer{
    display:none !important;
    animation:none !important;
    filter:none !important;
    -webkit-filter:none !important;
  }

  /* Keep the same dark glass feeling, but remove mobile repaint-heavy blur. */
  .header,
  .header-actions,
  .desktop-top,
  .mobile-nav-shell,
  .mobile-nav-inner,
  .desktop-nav-shell,
  .desktop-nav-inner,
  .cyber-menu,
  .cyber-menu-inner,
  .side-menu-backdrop,
  .modal-card,
  .favorite-login-card,
  .support-report-card,
  .help-hero,
  .help-mini-card,
  .main-card,
  .section,
  .card,
  .mini-card,
  .list-card,
  .top-card,
  .related-card,
  .donasi-card,
  .message,
  .contact-card,
  .hero,
  .rail,
  .all-premium-grid,
  .cards,
  .top-grid,
  .platform-icon{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  .brand,
  .title span,
  .hero-title span,
  .section-title,
  .nav-item.active svg,
  .search-btn svg,
  .notif-btn svg,
  .chibi,
  .chibi-wrap::after,
  .gamepad-mini,
  .platform-icon,
  .premium-status-badge,
  .update-badge,
  .lang-badge{
    filter:none !important;
    -webkit-filter:none !important;
  }

  /* Disable continuous animation/transitions in scrolling card UI. */
  .card,
  .card *,
  .card::before,
  .card::after,
  .card-info::before,
  .card-info::after,
  .premium-badge,
  .premium-badge::before,
  .premium-badge::after,
  .premium-status-badge,
  .premium-status-badge::after,
  .new-badge,
  .update-badge,
  .lang-badge,
  .platform-icon,
  .nav-item,
  .nav-item::before,
  .nav-item::after,
  .nav-item .glow{
    animation:none !important;
    transition:none !important;
  }

  .card{
    opacity:1 !important;
    transform:none !important;
    cursor:pointer;
    box-shadow:0 5px 10px rgba(0,0,0,.32) !important;
    contain:layout paint style;
    content-visibility:auto;
    contain-intrinsic-size:178px 316px;
    will-change:auto !important;
  }
  .card.is-premium{
    box-shadow:0 5px 10px rgba(0,0,0,.34), 0 0 0 1px rgba(255,196,54,.35) inset !important;
  }
  .card img{
    transform:none !important;
    transition:none !important;
    will-change:auto !important;
    backface-visibility:hidden;
  }
  .card:hover img,
  .card:active,
  .nav-item:hover,
  .nav-item:active{
    transform:none !important;
  }
  .card.is-premium .card-info::before,
  .card.is-premium .card-info::after,
  .card.is-premium .premium-badge::after,
  .card.is-premium .premium-status-badge::after,
  .premium-badge::after,
  .premium-status-badge::after,
  .new-badge::after,
  .update-badge::after{
    display:none !important;
  }
  .card.is-premium::after{
    box-shadow:inset 0 -72px 58px rgba(0,0,0,.70), inset 0 -12px 22px rgba(255,186,39,.12) !important;
  }

  .cards{
    contain:layout paint;
    isolation:isolate;
  }
  .mobile-render-sentinel{min-height:80px !important;}

  .search-btn,
  .notif-btn,
  .mobile-nav-shell,
  .top-btn{
    box-shadow:0 6px 14px rgba(0,0,0,.28), 0 0 0 1px rgba(255,70,120,.18) inset !important;
  }
  .nav-item .glow{display:none !important;}

  img{
    image-rendering:auto;
  }
}


/* Premium nav keeps a lightweight lightning/glow effect on mobile only.
   This restores the Premium icon sparkle without re-enabling heavy global animations. */
@media (max-width: 820px){
  .nav-premium-item{
    isolation:isolate;
  }
  .nav-premium-item .premium-spark{
    display:block !important;
    position:absolute;
    inset:7px 14px 20px;
    border-radius:999px;
    pointer-events:none;
    opacity:0;
    z-index:1;
    background:linear-gradient(115deg, transparent 0%, rgba(255,235,145,.72) 45%, rgba(255,198,55,.58) 52%, transparent 72%);
    transform:translateX(-135%) skewX(-18deg);
    animation:premiumNavLightning 2.35s cubic-bezier(.35,.06,.25,.99) infinite !important;
    will-change:transform, opacity;
  }
  .nav-item.nav-premium-item .premium-menu-icon,
  .nav-item.nav-premium-item .keep-premium-spark{
    position:relative;
    z-index:2;
    animation:premiumNavSpark 1.95s ease-in-out infinite !important;
    transition:none !important;
    will-change:transform, filter;
  }
  .nav-premium-item .glow{
    display:block !important;
    opacity:.55 !important;
    filter:none !important;
    -webkit-filter:none !important;
    background:rgba(255,202,62,.34) !important;
    animation:none !important;
    transition:none !important;
  }
  @keyframes premiumNavLightning{
    0%{transform:translateX(-135%) skewX(-18deg);opacity:0;}
    32%{opacity:0;}
    42%{opacity:.82;}
    58%{transform:translateX(135%) skewX(-18deg);opacity:0;}
    100%{transform:translateX(135%) skewX(-18deg);opacity:0;}
  }
  @keyframes premiumNavSpark{
    0%,100%{transform:scale(1);filter:drop-shadow(0 0 2px rgba(255,210,84,.28));}
    48%{transform:scale(1.035);filter:drop-shadow(0 0 7px rgba(255,220,95,.72));}
    62%{transform:scale(1.015);filter:drop-shadow(0 0 5px rgba(255,185,45,.48));}
  }
}

/* Premium CARD badge sparkle restored on mobile.
   Only this small badge shine is re-enabled; card/background heavy animations stay disabled. */
@media (max-width: 820px){
  .card.is-premium .premium-badge{
    position:relative !important;
    overflow:hidden !important;
    isolation:isolate !important;
    animation:premiumBadgeMobileSoftGlow 2.35s ease-in-out infinite !important;
    will-change:filter;
  }

  .card.is-premium .premium-badge::before{
    display:block !important;
    content:"" !important;
    position:absolute !important;
    inset:1px !important;
    border-radius:inherit !important;
    pointer-events:none !important;
    z-index:-1 !important;
    opacity:.78 !important;
    background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 48%) !important;
    animation:none !important;
    filter:none !important;
    -webkit-filter:none !important;
  }

  .card.is-premium .premium-badge::after{
    display:block !important;
    content:"" !important;
    position:absolute !important;
    top:-82% !important;
    left:-58% !important;
    width:38% !important;
    height:265% !important;
    pointer-events:none !important;
    z-index:1 !important;
    opacity:0;
    border-radius:999px;
    background:linear-gradient(90deg,
      transparent 0%,
      rgba(255,246,184,.05) 20%,
      rgba(255,238,124,.90) 48%,
      rgba(255,255,255,.72) 52%,
      rgba(255,232,105,.10) 78%,
      transparent 100%) !important;
    filter:none !important;
    -webkit-filter:none !important;
    transform:translateX(-160%) rotate(23deg);
    animation:premiumBadgeMobileShine 2.05s cubic-bezier(.36,.06,.26,.99) infinite !important;
    will-change:transform, opacity;
  }

  .card.is-premium .premium-badge > *{
    position:relative;
    z-index:2;
  }

  @keyframes premiumBadgeMobileShine{
    0%{transform:translateX(-170%) rotate(23deg);opacity:0;}
    10%{opacity:.95;}
    42%{opacity:.95;}
    58%,100%{transform:translateX(380%) rotate(23deg);opacity:0;}
  }

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


/* ===== FINAL FORCE: mobile premium badge shine via real child element =====
   This is intentionally limited to the small PREMIUM badge in game cards.
   It does not re-enable card/background heavy animation, so mobile scroll stays light. */
@media (max-width: 820px){
  .card.is-premium .premium-badge{
    position:relative !important;
    overflow:hidden !important;
    isolation:isolate !important;
    transform:translateZ(0) !important;
    animation:premiumBadgeFinalGlow 2.25s ease-in-out infinite !important;
    will-change:filter !important;
  }

  .card.is-premium .premium-badge > svg,
  .card.is-premium .premium-badge .premium-word{
    position:relative !important;
    z-index:3 !important;
  }

  .card.is-premium .premium-badge .premium-mobile-shine{
    display:block !important;
    position:absolute !important;
    top:-90% !important;
    left:-70% !important;
    width:40% !important;
    height:285% !important;
    z-index:2 !important;
    pointer-events:none !important;
    opacity:0;
    border-radius:999px !important;
    background:linear-gradient(90deg,
      transparent 0%,
      rgba(255,244,170,.08) 24%,
      rgba(255,244,125,.95) 47%,
      rgba(255,255,255,.88) 52%,
      rgba(255,224,88,.12) 75%,
      transparent 100%) !important;
    filter:none !important;
    -webkit-filter:none !important;
    transform:translate3d(-180%,0,0) rotate(23deg) !important;
    animation:premiumBadgeFinalSweep 1.85s cubic-bezier(.36,.06,.26,.99) infinite !important;
    will-change:transform, opacity !important;
  }

  /* Override the previous performance rule that hides ::after.
     Keep it as a fallback, but the real .premium-mobile-shine span above is the main effect. */
  .card.is-premium .premium-badge::after{
    display:block !important;
    content:"" !important;
    position:absolute !important;
    top:-80% !important;
    left:-65% !important;
    width:34% !important;
    height:270% !important;
    z-index:1 !important;
    opacity:0;
    pointer-events:none !important;
    background:linear-gradient(90deg, transparent, rgba(255,242,150,.75), transparent) !important;
    filter:none !important;
    -webkit-filter:none !important;
    transform:translate3d(-160%,0,0) rotate(23deg) !important;
    animation:premiumBadgeFinalSweep 2.15s cubic-bezier(.36,.06,.26,.99) infinite !important;
    will-change:transform, opacity !important;
  }

  @keyframes premiumBadgeFinalSweep{
    0%{transform:translate3d(-190%,0,0) rotate(23deg);opacity:0;}
    12%{opacity:.95;}
    45%{opacity:.95;}
    62%,100%{transform:translate3d(390%,0,0) rotate(23deg);opacity:0;}
  }

  @keyframes premiumBadgeFinalGlow{
    0%,100%{filter:brightness(1) drop-shadow(0 0 2px rgba(255,205,70,.20));}
    50%{filter:brightness(1.12) drop-shadow(0 0 6px rgba(255,220,95,.48));}
  }
}

/* PREMIUM MOBILE SHINE FORCE v1004 */
@media (max-width: 820px) {
  .premium-badge,
  .premium-lock-badge,
  .sale-lock,
  .card-premium-badge,
  .game-card .premium-badge,
  .film-thumbnail .premium-badge,
  .card.is-premium .premium-badge,
  .card .premium-badge {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
    animation: none !important;
    -webkit-animation: none !important;
  }

  .premium-mobile-shine {
    display: block !important;
    position: absolute !important;
    top: -45% !important;
    left: -85% !important;
    width: 60% !important;
    height: 190% !important;
    z-index: 5 !important;
    pointer-events: none !important;
    opacity: 1 !important;
    border-radius: inherit !important;
    background: linear-gradient(
      120deg,
      transparent 0%,
      rgba(255, 255, 255, 0.10) 28%,
      rgba(255, 255, 210, 0.95) 48%,
      rgba(255, 210, 70, 0.75) 55%,
      rgba(255, 255, 255, 0.12) 70%,
      transparent 100%
    ) !important;
    filter: none !important;
    -webkit-filter: none !important;
    transform: skewX(-24deg) translateX(0) translateZ(0) !important;
    -webkit-transform: skewX(-24deg) translateX(0) translateZ(0) !important;
    animation: premiumMobileShineForce 2.2s ease-in-out infinite !important;
    -webkit-animation: premiumMobileShineForce 2.2s ease-in-out infinite !important;
    animation-play-state: running !important;
    -webkit-animation-play-state: running !important;
    will-change: transform, opacity !important;
  }

  @keyframes premiumMobileShineForce {
    0% {
      left: -90%;
      opacity: 0;
      transform: skewX(-24deg) translateX(0) translateZ(0);
    }
    18% {
      opacity: 0;
    }
    35% {
      opacity: 1;
    }
    55% {
      left: 130%;
      opacity: 0;
      transform: skewX(-24deg) translateX(0) translateZ(0);
    }
    100% {
      left: 130%;
      opacity: 0;
      transform: skewX(-24deg) translateX(0) translateZ(0);
    }
  }

  @-webkit-keyframes premiumMobileShineForce {
    0% {
      left: -90%;
      opacity: 0;
      -webkit-transform: skewX(-24deg) translateX(0) translateZ(0);
    }
    18% {
      opacity: 0;
    }
    35% {
      opacity: 1;
    }
    55% {
      left: 130%;
      opacity: 0;
      -webkit-transform: skewX(-24deg) translateX(0) translateZ(0);
    }
    100% {
      left: 130%;
      opacity: 0;
      -webkit-transform: skewX(-24deg) translateX(0) translateZ(0);
    }
  }

  .premium-badge *,
  .premium-lock-badge *,
  .sale-lock *,
  .card-premium-badge * {
    position: relative;
    z-index: 6;
  }

  .premium-badge .premium-mobile-shine,
  .premium-lock-badge .premium-mobile-shine,
  .sale-lock .premium-mobile-shine,
  .card-premium-badge .premium-mobile-shine,
  .card.is-premium .premium-badge .premium-mobile-shine {
    z-index: 5 !important;
    animation: premiumMobileShineForce 2.2s ease-in-out infinite !important;
    -webkit-animation: premiumMobileShineForce 2.2s ease-in-out infinite !important;
    animation-play-state: running !important;
    -webkit-animation-play-state: running !important;
  }

  body.is-scrolling .premium-mobile-shine {
    animation-play-state: running !important;
    -webkit-animation-play-state: running !important;
  }

  .card.is-premium .premium-badge::after {
    display: none !important;
    animation: none !important;
    -webkit-animation: none !important;
  }
}

/* PREMIUM MOBILE SHINE FORCE v1005 - real DOM span + mobile override */
@media (max-width: 820px){
  .card.is-premium .premium-badge,
  .card .premium-badge,
  .premium-badge{
    position:relative !important;
    overflow:hidden !important;
    isolation:isolate !important;
    contain:paint !important;
    transform:translate3d(0,0,0) !important;
    -webkit-transform:translate3d(0,0,0) !important;
  }
  .card.is-premium .premium-badge > svg,
  .card.is-premium .premium-badge .premium-word,
  .card .premium-badge > svg,
  .card .premium-badge .premium-word{
    position:relative !important;
    z-index:10 !important;
  }
  .card.is-premium .premium-badge .premium-mobile-shine,
  .card .premium-badge .premium-mobile-shine,
  .premium-badge .premium-mobile-shine{
    display:block !important;
    visibility:visible !important;
    position:absolute !important;
    top:-78% !important;
    left:-42% !important;
    width:48% !important;
    height:260% !important;
    min-width:28px !important;
    z-index:7 !important;
    pointer-events:none !important;
    opacity:.95 !important;
    border-radius:999px !important;
    background:linear-gradient(105deg, transparent 0%, transparent 20%, rgba(255,255,255,.12) 32%, rgba(255,255,225,.98) 47%, rgba(255,220,55,.95) 54%, rgba(255,255,255,.18) 68%, transparent 100%) !important;
    mix-blend-mode:screen !important;
    filter:none !important;
    -webkit-filter:none !important;
    transform:translate3d(-170%,0,0) skewX(-22deg) !important;
    -webkit-transform:translate3d(-170%,0,0) skewX(-22deg) !important;
    animation:koyPremiumMobileShineVisibleV1005 1.55s linear infinite !important;
    -webkit-animation:koyPremiumMobileShineVisibleV1005 1.55s linear infinite !important;
    animation-play-state:running !important;
    -webkit-animation-play-state:running !important;
    will-change:transform, opacity !important;
  }
  .card.is-premium .premium-badge .premium-mobile-shine-2,
  .card .premium-badge .premium-mobile-shine-2,
  .premium-badge .premium-mobile-shine-2{
    animation-delay:.72s !important;
    -webkit-animation-delay:.72s !important;
    opacity:.65 !important;
    width:32% !important;
  }
  body.is-scrolling .premium-mobile-shine{
    animation:koyPremiumMobileShineVisibleV1005 1.55s linear infinite !important;
    -webkit-animation:koyPremiumMobileShineVisibleV1005 1.55s linear infinite !important;
    animation-play-state:running !important;
    -webkit-animation-play-state:running !important;
  }
  @keyframes koyPremiumMobileShineVisibleV1005{
    0%{transform:translate3d(-180%,0,0) skewX(-22deg);opacity:0;}
    8%{opacity:.95;}
    42%{opacity:.95;}
    66%,100%{transform:translate3d(420%,0,0) skewX(-22deg);opacity:0;}
  }
  @-webkit-keyframes koyPremiumMobileShineVisibleV1005{
    0%{-webkit-transform:translate3d(-180%,0,0) skewX(-22deg);opacity:0;}
    8%{opacity:.95;}
    42%{opacity:.95;}
    66%,100%{-webkit-transform:translate3d(420%,0,0) skewX(-22deg);opacity:0;}
  }
}



/* PREMIUM THUMBNAIL SHINE ONLY v1010
   - Nav Premium sparkle OFF.
   - Card/thumbnail PREMIUM badge prepared for JS RAF shine.
   - No heavy global animation re-enabled. */
@media (max-width: 820px), (hover: none), (pointer: coarse){
  .nav-premium-item .premium-spark,
  .nav-premium-item .keep-premium-spark,
  .nav-item.nav-premium-item .premium-spark{
    display:none !important;
    animation:none !important;
    -webkit-animation:none !important;
  }
  .nav-item.nav-premium-item .premium-menu-icon,
  .nav-premium-item svg{
    animation:none !important;
    -webkit-animation:none !important;
    filter:none !important;
    -webkit-filter:none !important;
  }
  .card.is-premium .premium-badge{
    position:relative !important;
    overflow:hidden !important;
    isolation:isolate !important;
    contain:paint !important;
    -webkit-transform:translateZ(0) !important;
    transform:translateZ(0) !important;
  }
  .card.is-premium .premium-badge > svg,
  .card.is-premium .premium-badge > .premium-badge-text,
  .card.is-premium .premium-badge > .premium-word{
    position:relative !important;
    z-index:20 !important;
  }
  .card.is-premium .premium-badge .premium-mobile-shine,
  .card.is-premium .premium-badge .premium-mobile-shine-raf{
    display:block !important;
    visibility:visible !important;
    position:absolute !important;
    top:-90% !important;
    left:0 !important;
    width:72% !important;
    height:280% !important;
    z-index:18 !important;
    pointer-events:none !important;
    border-radius:inherit !important;
    background:linear-gradient(112deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.14) 23%,rgba(255,255,255,1) 43%,rgba(255,235,90,1) 52%,rgba(255,255,255,.65) 61%,rgba(255,255,255,0) 78%) !important;
    box-shadow:0 0 12px rgba(255,220,90,.8) !important;
    mix-blend-mode:screen !important;
    will-change:transform, opacity !important;
  }
}
/* PREMIUM THUMBNAIL SHINE ONLY v1010 END */