html,
body{
width:100%;
max-width:100%;
overflow-x:hidden;
scroll-behavior:smooth;
}

body{
background:#02040a;
}

@media (max-width:767px){
body{
padding-bottom:92px;
}

/* Automatic low-power rendering for older phones and data-saver users. */
.lite-mode *{scroll-behavior:auto!important;animation:none!important}
.performance-mode .tournament-card-character,.performance-mode .topup-card-item,.performance-mode .jersey-card-item,.performance-mode .gnex-esport-card-logo,.performance-mode .gnex-esport-card-kelly{filter:none!important;backface-visibility:hidden}
.performance-mode .electric-card::before,.performance-mode .tournament-card-button::before,.performance-mode .topup-card-button::before,.performance-mode .jersey-card-button::before,.performance-mode .gnex-esport-card-button::before{box-shadow:none!important}
.performance-mode .promo-slide{filter:none!important;box-shadow:0 10px 28px rgba(0,0,0,.32)!important;will-change:transform,opacity}
.performance-mode .backdrop-blur-xl,.performance-mode .game-list-menu a,.performance-mode .image-lightbox{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.performance-mode .is-performance-offscreen,.performance-mode .is-performance-offscreen *,html.is-performance-hidden *{animation-play-state:paused!important}
.performance-mode .is-performance-offscreen::before,.performance-mode .is-performance-offscreen::after,.performance-mode .is-performance-offscreen *::before,.performance-mode .is-performance-offscreen *::after{animation-play-state:paused!important}
.performance-mode .hero-glow,.performance-mode .promo-carousel,.performance-mode .card-button-grid{contain:layout paint style}
.performance-mode .modal-panel{overscroll-behavior:contain}
.performance-mode .game-card,.performance-mode .price-jersey-card{contain:layout paint style}
.performance-mode .game-card>img{filter:none!important}
.balanced-mode .hero-video,.balanced-mode .hero-red-motion{display:none!important}
.balanced-mode .tournament-card-button::before,.balanced-mode .topup-card-button::before,.balanced-mode .jersey-card-button::before,.balanced-mode .gnex-esport-card-button::before,.balanced-mode .tournament-card-button::after,.balanced-mode .topup-card-button::after,.balanced-mode .jersey-card-button::after,.balanced-mode .gnex-esport-card-button::after{animation:none!important;display:none!important}
.balanced-mode .tournament-card-character,.balanced-mode .topup-card-item,.balanced-mode .jersey-card-item,.balanced-mode .gnex-esport-card-logo,.balanced-mode .gnex-esport-card-kelly{filter:none!important;will-change:transform,opacity}
.lite-mode .tournament-card-character:not(.is-kelly),.lite-mode .topup-card-item.is-pubg,.lite-mode .topup-card-item.is-weekly,.lite-mode .jersey-card-item:not(.is-front),.lite-mode .gnex-esport-card-kelly,.lite-mode .gnex-esport-card-logo.is-repeat{display:none!important}
.lite-mode .tournament-card-character.is-kelly{opacity:1;transform:none}
.lite-mode .topup-card-item:not(.is-pubg):not(.is-weekly){opacity:1;transform:translate(0,-44%)}
.lite-mode .jersey-card-item.is-front{opacity:1;transform:none}
.lite-mode .gnex-esport-card-logo:not(.is-repeat){opacity:1;transform:none}
.balanced-mode .backdrop-blur-xl,.balanced-mode .game-list-menu a,.balanced-mode .image-lightbox,.balanced-mode .bottom-app-nav{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.balanced-mode .tournament-card-button,.balanced-mode .topup-card-button,.balanced-mode .jersey-card-button,.balanced-mode .gnex-esport-card-button{filter:none!important;box-shadow:0 0 0 1px rgba(103,241,253,.55)!important}
.balanced-mode .promo-slide{filter:none!important;box-shadow:none!important}
.balanced-mode .bottom-app-nav{background:#050a12!important;box-shadow:0 8px 20px rgba(0,0,0,.45)!important}
.lite-mode .promo-slide,.lite-mode .bottom-nav-item,.lite-mode .bottom-nav-item.is-active{transition:none!important}

}

/* Desktop rendering path: keep the same visuals while reducing paint work. */
.performance-mode .tournament-card-character,.performance-mode .topup-card-item,.performance-mode .jersey-card-item,.performance-mode .gnex-esport-card-logo,.performance-mode .gnex-esport-card-kelly{filter:none!important;backface-visibility:hidden}
.performance-mode .electric-card::before,.performance-mode .tournament-card-button::before,.performance-mode .topup-card-button::before,.performance-mode .jersey-card-button::before,.performance-mode .gnex-esport-card-button::before{box-shadow:none!important}
.performance-mode .promo-slide{filter:none!important;box-shadow:0 10px 28px rgba(0,0,0,.32)!important}
.performance-mode .backdrop-blur-xl,.performance-mode .game-list-menu a,.performance-mode .image-lightbox{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.performance-mode .is-performance-offscreen,.performance-mode .is-performance-offscreen *,html.is-performance-hidden *{animation-play-state:paused!important}
.performance-mode .is-performance-offscreen::before,.performance-mode .is-performance-offscreen::after,.performance-mode .is-performance-offscreen *::before,.performance-mode .is-performance-offscreen *::after{animation-play-state:paused!important}
.performance-mode .hero-glow,.performance-mode .promo-carousel,.performance-mode .card-button-grid,.performance-mode .game-card,.performance-mode .price-jersey-card{contain:layout paint style}
.performance-mode .modal-panel{overscroll-behavior:contain}
.performance-mode .game-card>img{filter:none!important}
.performance-mode #payment,.performance-mode footer{content-visibility:auto;contain-intrinsic-size:auto 800px}

body.modal-open{
overflow:hidden;
}

.topup-store-standalone{position:relative;display:block;min-height:100vh;padding-top:81px;background:#02040a;color:#fff}
.topup-store-standalone .modal-backdrop,.topup-store-standalone .modal-close{display:none!important}
.topup-store-standalone .modal-panel{position:relative;height:auto;min-height:calc(100vh - 81px);overflow:visible;border:0;background:radial-gradient(circle at 12% 0%,rgba(34,211,238,.1),transparent 34%),linear-gradient(180deg,rgba(2,6,23,.98),rgba(2,4,10,.99))}
.topup-store-standalone .price-list-shell{padding-top:48px!important;padding-bottom:70px!important}

@media(max-width:767px){
.topup-store-standalone{padding-top:75px}
.topup-store-standalone .modal-panel{min-height:calc(100vh - 75px);padding-bottom:20px}
.topup-store-standalone .price-list-shell{padding:30px 18px 110px!important}
}

.modal-view{
position:fixed;
inset:81px 0 0;
z-index:45;
display:none;
background:rgba(2,4,10,.82);
}

.modal-view.is-open{
display:block;
}

.modal-backdrop{
position:absolute;
inset:0;
background:rgba(2,4,10,.84);
backdrop-filter:blur(10px);
}

.modal-panel{
position:relative;
z-index:1;
height:calc(100vh - 81px);
overflow-y:auto;
background:
radial-gradient(circle at 12% 0%, rgba(34,211,238,.1), transparent 34%),
linear-gradient(180deg, rgba(2,6,23,.98), rgba(2,4,10,.99));
border-left:1px solid rgba(34,211,238,.22);
border-right:1px solid rgba(34,211,238,.22);
}

@media (max-width:767px){
.modal-panel{
height:calc(100dvh - 81px);
padding-bottom:104px;
}

.modal-view{
top:81px;
z-index:45;
background:#02040a;
}

.modal-backdrop{
display:none;
}

.modal-close{
display:none;
}

.modal-panel > .max-w-7xl{
padding-top:28px;
padding-left:18px;
padding-right:18px;
}
}

.modal-close{
position:fixed;
top:103px;
right:16px;
z-index:90;
width:44px;
height:44px;
display:flex;
align-items:center;
justify-content:center;
border-radius:10px;
border:1px solid rgba(34,211,238,.6);
background:rgba(2,6,23,.94);
color:white;
font-weight:900;
box-shadow:0 0 24px rgba(34,211,238,.16);
transition:border-color .2s ease, color .2s ease, transform .2s ease;
}

.modal-close:hover{
border-color:rgba(34,211,238,1);
color:#22d3ee;
transform:translateY(-1px);
}

@media (max-width:767px){
.modal-close{
display:none !important;
}
}

.price-list-shell{
position:relative;
}

/* GNEX Topup chat */
.topup-chat-panel{
overflow:hidden;
background:#03070d;
}

.topup-chat-shell{
position:relative;
width:min(100%, 860px);
height:100%;
margin:0 auto;
display:grid;
grid-template-rows:72px minmax(0,1fr) 74px;
overflow:hidden;
border-inline:1px solid rgba(34,211,238,.12);
background:#05080d;
box-shadow:0 0 60px rgba(0,0,0,.5);
}

.topup-chat-header{
z-index:4;
display:flex;
align-items:center;
gap:12px;
padding:10px 18px;
border-bottom:1px solid rgba(34,211,238,.18);
background:linear-gradient(180deg,rgba(10,18,29,.98),rgba(4,9,16,.98));
}

body.topup-chat-open > nav:first-of-type{display:none}
body.topup-chat-open #chat-center{inset:0}
body.topup-chat-open .topup-chat-panel{height:100vh}

.topup-chat-back{
width:38px;
height:38px;
display:grid;
place-items:center;
border:0;
border-radius:10px;
color:#d4d4d8;
background:rgba(255,255,255,.04);
}

.topup-chat-back svg{width:22px;height:22px}
.topup-chat-avatar{width:44px;height:44px;object-fit:contain;border:1px solid #22d3ee;border-radius:50%;background:#02040a;padding:5px}
.topup-chat-identity{min-width:0;display:flex;flex-direction:column;line-height:1.15}
.topup-chat-identity strong{font-size:14px;letter-spacing:.04em}
.topup-chat-identity span{display:flex;align-items:center;gap:6px;margin-top:5px;color:#a1a1aa;font-size:11px;font-weight:700}
.topup-chat-identity i{width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 9px rgba(34,197,94,.7)}
.topup-chat-search-toggle{margin-left:auto;width:42px;height:42px;display:grid;place-items:center;border:1px solid rgba(34,211,238,.28);border-radius:12px;background:rgba(34,211,238,.07);color:#67f1fd;transition:.2s}
.topup-chat-search-toggle:hover,.topup-chat-search-toggle[aria-expanded="true"]{border-color:#22d3ee;background:rgba(34,211,238,.14)}
.topup-chat-search-toggle svg{width:20px;height:20px}
.topup-chat-search{position:absolute;inset:0 0 auto;z-index:8;height:72px;display:grid;grid-template-columns:22px minmax(0,1fr) 34px;align-items:center;gap:10px;padding:10px 16px;background:linear-gradient(180deg,#08121d,#040910);opacity:0;visibility:hidden;transform:translateY(-8px);transition:.2s}
.topup-chat-search.is-open{opacity:1;visibility:visible;transform:none}
.topup-chat-search svg{width:20px;height:20px;color:#67f1fd}
.topup-chat-search input{width:100%;height:42px;padding:0 13px;border:1px solid #27272a;border-radius:11px;outline:0;background:#090e16;color:white;font-size:13px;font-weight:700}
.topup-chat-search input:focus{border-color:#22d3ee}
.topup-chat-search button{width:34px;height:34px;border:0;border-radius:9px;background:#18181b;color:#a1a1aa;font-size:11px;font-weight:900}
.chat-row.is-search-hidden{display:none}

.topup-ranking-view{position:absolute;inset:0;z-index:9;display:flex;flex-direction:column;background:#04080e;opacity:0;visibility:hidden;transform:translateX(24px);transition:opacity .22s ease,transform .22s ease,visibility .22s}
.topup-ranking-view.is-open{opacity:1;visibility:visible;transform:none}
.topup-ranking-header{height:72px;flex:0 0 auto;display:flex;align-items:center;gap:12px;padding:10px 18px;border-bottom:1px solid rgba(34,211,238,.25);background:linear-gradient(180deg,#08131f,#050b13)}
.topup-ranking-header button{width:38px;height:38px;display:grid;place-items:center;border:1px solid rgba(34,211,238,.2);border-radius:10px;background:#0b1420;color:#d4d4d8}
.topup-ranking-header button svg{width:21px;height:21px}
.topup-ranking-header span,.topup-ranking-kicker{color:#22d3ee;font-size:9px;font-weight:900;letter-spacing:.18em}
.topup-ranking-header h2{margin-top:4px;color:white;font-size:17px;font-weight:1000;line-height:1}
.topup-ranking-content{flex:1;overflow-y:auto;padding:28px 20px 34px;background:radial-gradient(circle at 90% 0,rgba(34,211,238,.09),transparent 32%),#04080e}
.topup-ranking-content>h3{margin-top:7px;color:white;font-size:26px;font-weight:1000;line-height:1.1}
.topup-ranking-copy{margin-top:8px;color:#71717a;font-size:12px;line-height:1.5}
.topup-ranking-games{display:grid;gap:12px;margin-top:24px}
.topup-ranking-game{position:relative;min-height:112px;display:flex;align-items:center;overflow:hidden;padding:16px;border:1px solid rgba(34,211,238,.25);border-radius:15px;background:#07101a;color:white;isolation:isolate;transition:.2s}
.topup-ranking-game:hover{border-color:#22d3ee;transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.3)}
.topup-ranking-game>img:first-child{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;opacity:.34}
.topup-ranking-game-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(2,6,13,.98),rgba(2,6,13,.76) 62%,rgba(2,6,13,.38))}
.topup-ranking-game>div{display:grid;grid-template-columns:54px 1fr;grid-template-rows:auto auto;align-items:center;column-gap:13px;min-width:0}
.topup-ranking-game>div img{grid-row:1/3;width:54px;height:46px;object-fit:contain}
.topup-ranking-game strong{font-size:14px;font-weight:1000;letter-spacing:.03em}
.topup-ranking-game small{margin-top:3px;color:#67f1fd;font-size:10px;font-weight:800}
.topup-ranking-game>svg{width:22px;height:22px;margin-left:auto;color:#67f1fd}
.topup-ranking-game.is-disabled{filter:saturate(.45);opacity:.7}
.topup-ranking-game.is-disabled:hover{border-color:rgba(34,211,238,.25);transform:none;box-shadow:none}
.topup-ranking-soon{margin-left:auto;padding:5px 8px;border:1px solid #3f3f46;border-radius:999px;background:#18181b;color:#a1a1aa;font-size:8px;font-weight:900;letter-spacing:.1em}
body:has(.topup-ranking-view.is-open) .game-list-fab-wrap{display:none}
body:has(.topup-ranking-view.is-open) .topup-chat-header,
body:has(.topup-ranking-view.is-open) 

.topup-chat-composer{visibility:hidden}

.topup-profile-view{position:absolute;inset:0;z-index:9;display:flex;flex-direction:column;background:#04080e;opacity:0;visibility:hidden;transform:translateX(24px);transition:opacity .22s ease,transform .22s ease,visibility .22s}
.topup-profile-view.is-open{opacity:1;visibility:visible;transform:none}
.topup-profile-header{height:72px;flex:0 0 auto;display:flex;align-items:center;gap:12px;padding:10px 18px;border-bottom:1px solid rgba(34,211,238,.25);background:linear-gradient(180deg,#08131f,#050b13)}
.topup-profile-header button{width:38px;height:38px;display:grid;place-items:center;border:1px solid rgba(34,211,238,.2);border-radius:10px;background:#0b1420;color:#d4d4d8}
.topup-profile-header button svg{width:21px;height:21px}
.topup-profile-header span{color:#22d3ee;font-size:9px;font-weight:900;letter-spacing:.18em}
.topup-profile-header h2{margin-top:4px;color:white;font-size:17px;font-weight:1000;line-height:1}
.topup-profile-content{flex:1;overflow-y:auto;padding:34px 20px;background:radial-gradient(circle at 50% 0,rgba(34,211,238,.11),transparent 32%),#04080e}
.topup-profile-intro{text-align:center}
.topup-profile-icon{width:72px;height:72px;display:grid;place-items:center;margin:0 auto 17px;border:1px solid rgba(34,211,238,.45);border-radius:24px;background:linear-gradient(145deg,rgba(34,211,238,.18),rgba(34,211,238,.04));color:#67f1fd;box-shadow:0 16px 38px rgba(0,0,0,.35),0 0 26px rgba(34,211,238,.12)}
.topup-profile-icon svg{width:34px;height:34px}
.topup-profile-intro>p{color:#22d3ee;font-size:9px;font-weight:900;letter-spacing:.2em}
.topup-profile-intro h3{margin-top:8px;color:white;font-size:25px;font-weight:1000;line-height:1.15}
.topup-profile-intro>span{display:block;max-width:420px;margin:9px auto 0;color:#71717a;font-size:12px;line-height:1.55}
.topup-profile-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;max-width:650px;margin:28px auto 0}
.topup-profile-card{position:relative;min-height:178px;display:flex;flex-direction:column;align-items:flex-start;padding:20px;border:1px solid rgba(63,63,70,.85);border-radius:17px;overflow:hidden;background:linear-gradient(145deg,#0b121d,#060a11);color:white;text-align:left;transition:.22s}
.topup-profile-card::after{content:"";position:absolute;right:-35px;bottom:-45px;width:120px;height:120px;border-radius:50%;background:rgba(34,211,238,.08);filter:blur(3px)}
.topup-profile-card:hover,.topup-profile-card.is-selected{border-color:#22d3ee;transform:translateY(-3px);box-shadow:0 16px 34px rgba(0,0,0,.3),0 0 22px rgba(34,211,238,.1)}
.topup-profile-card-icon{width:46px;height:46px;display:grid;place-items:center;border:1px solid rgba(34,211,238,.28);border-radius:13px;background:rgba(34,211,238,.08);color:#67f1fd}
.topup-profile-card-icon svg{width:23px;height:23px}
.topup-profile-card-copy{display:flex;flex-direction:column;margin-top:18px}
.topup-profile-card-copy small{color:#71717a;font-size:8px;font-weight:900;letter-spacing:.13em}
.topup-profile-card-copy strong{margin-top:4px;font-size:20px;font-weight:1000;line-height:1}
.topup-profile-card-copy em{margin-top:7px;color:#a1a1aa;font-size:10px;font-style:normal;font-weight:700}
.topup-profile-card-arrow{position:absolute;right:17px;top:18px;color:#67f1fd;font-size:24px;line-height:1}
.topup-profile-note{margin:18px auto 0;color:#52525b;font-size:10px;font-weight:700;text-align:center}
body:has(.topup-profile-view.is-open) .game-list-fab-wrap{display:none}
body:has(.topup-profile-view.is-open) .topup-chat-header,
body:has(.topup-profile-view.is-open) 

.topup-chat-composer{
  visibility:hidden
}

.topup-auth-card{
  width:min(100%,760px);
  min-height:470px;
  display:grid;
  grid-template-columns:.9fr 1.25fr;
  margin:6px auto 0;overflow:hidden;
  border:1px solid rgba(34,211,238,.28);
  border-radius:24px;
  background:#080d15;
  box-shadow:0 24px 70px rgba(0,0,0,.5),0 0 34px rgba(34,211,238,.08)
}

.topup-auth-welcome{position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  padding:35px 26px;
  text-align:center;
  background:linear-gradient(145deg,rgba(8,145,178,.96),rgba(8,65,86,.98));
  isolation:isolate
}

.topup-auth-welcome::before{content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background:linear-gradient(rgba(0,29,40,.54),rgba(0,29,40,.7)),url('images/optimized/chat-gaming-pattern-home.webp') center/460px auto
}

.topup-auth-welcome::after{content:"";
  position:absolute;
  right:-85px;
  bottom:-90px;
  z-index:-1;
  width:250px;
  height:250px;
  border:1px solid rgba(103,241,253,.25);
  border-radius:50%;
  box-shadow:0 0 0 38px rgba(103,241,253,.05),0 0 0 78px rgba(103,241,253,.035)
}

.topup-auth-welcome>img{
  width:88px;
  height:88px;
  margin-bottom:10px;
  border:1px solid rgba(255,255,255,.35);
  border-radius:50%;
  background:#02040a;
  padding:10px;
  object-fit: contain;
  box-shadow:0 12px 30px rgba(0,0,0,.3)
}

.topup-auth-eyebrow{color:#a5f3fc;
  font-size:8px;
  font-weight:1000;
  letter-spacing:.18em
}

.topup-auth-welcome h3{margin-top:9px;
  color:white;
  font-size:27px;
  font-weight:1000;
  line-height:1.05
}

.topup-auth-welcome>p:not(.topup-auth-eyebrow){max-width:245px;
  margin-top:12px;
  color:rgba(236,254,255,.72);
  font-size:11px;
  line-height:1.55
}

.topup-auth-welcome>button{min-width:128px;
  margin-top:22px;
  padding:10px 18px;
  border:1px solid rgba(255,255,255,.72);
  border-radius:999px;
  background:rgba(0,0,0,.14);
  color:white;
  font-size:10px;
  font-weight:1000;
  letter-spacing:.08em;
  transition:.2s
}

.topup-auth-welcome>button:hover{background:white;color:#083344}

.register-welcome-copy,.topup-auth-card.is-register-mode .login-welcome-copy{display:none}

.topup-auth-card.is-register-mode .register-welcome-copy{display:block}

.topup-auth-form-side{display:flex;align-items:center;justify-content:center;padding:38px 42px;background:radial-gradient(circle at 100% 0,rgba(34,211,238,.08),transparent 34%),linear-gradient(145deg,#0b111b,#060a11)}

.topup-auth-form{width:100%;max-width:340px}

.topup-auth-form>p:first-child{color:#22d3ee;font-size:8px;font-weight:1000;letter-spacing:.18em}

.topup-auth-form>h3{margin-top:7px;color:white;font-size:27px;font-weight:1000;line-height:1.1}

.topup-auth-form>span{display:block;margin-top:7px;color:#71717a;font-size:11px}

.topup-auth-form>label{display:block;margin-top:18px}

.topup-auth-form>label small{
  display:block;
  margin:0 0 7px 2px;
  color:#a1a1aa;
  font-size:9px;
  font-weight:800}

.topup-auth-form>label>div{height:45px;display:grid;grid-template-columns:20px minmax(0,1fr);align-items:center;gap:9px;padding:0 12px;border:1px solid #27272a;border-radius:11px;background:#060a10;transition:.2s}

.topup-auth-form>label>div:focus-within{border-color:#22d3ee;box-shadow:0 0 0 3px rgba(34,211,238,.07)}

.topup-auth-form>label svg{width:17px;height:17px;color:#52525b}

.topup-auth-form input:not([type="checkbox"]){min-width:0;width:100%;height:100%;border:0;outline:0;background:transparent;color:white;font-size:16px;font-weight:700}

.topup-auth-form>label>div.topup-password-field{grid-template-columns:20px minmax(0,1fr) auto}
.topup-password-toggle{min-width:42px;padding:6px 7px;border:1px solid rgba(34,211,238,.35);border-radius:7px;background:rgba(34,211,238,.08);color:#67e8f9;font-size:8px;font-weight:1000;letter-spacing:.04em}
.topup-password-toggle:hover,.topup-password-toggle[aria-pressed="true"]{border-color:#22d3ee;background:rgba(34,211,238,.18);color:#fff}
.profile-invite{grid-column:1/-1;width:100%;display:grid;gap:10px;padding:16px;margin-top:12px;border:1px solid #234155;border-radius:14px;background:#07131d}.profile-invite[hidden]{display:none}.profile-invite small{color:#8fa6b9;font-size:10px}.profile-invite strong{color:#67e8f9;letter-spacing:.08em}.profile-invite input{width:100%;min-width:0;padding:10px;border:1px solid #294557;border-radius:8px;background:#040911;color:#c4d4df;font-size:12px}.profile-invite button{padding:10px;border:0;border-radius:8px;background:#22d3ee;color:#02131c;font-weight:800}.profile-invite a{color:#67e8f9;font-size:11px;text-align:center}

.topup-auth-form select{width:100%;height:100%;border:0;outline:0;background:#060a10;color:white;font-size:11px;font-weight:800}.topup-auth-form select option{background:#090e16}.topup-auth-form small em{color:#52525b;font-style:normal;font-weight:700}.topup-register-game-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:10px}.topup-register-game-grid>label{display:block;margin-top:14px}.topup-register-game-grid small{display:block;margin:0 0 7px 2px;color:#a1a1aa;font-size:9px;font-weight:800}.topup-register-game-grid>label>div{height:45px;display:flex;align-items:center;padding:0 12px;border:1px solid #27272a;border-radius:11px;background:#060a10}.topup-register-game-grid>label>div:focus-within{border-color:#22d3ee;box-shadow:0 0 0 3px rgba(34,211,238,.07)}

.topup-auth-options{display:flex;align-items:center;justify-content:space-between;margin-top:12px;color:#71717a;font-size:9px;font-weight:700}

.topup-auth-options label{display:flex;align-items:center;gap:6px}.topup-auth-options input{accent-color:#22d3ee}

.topup-auth-options button,.topup-auth-switch button{border:0;background:transparent;color:#22d3ee;font-weight:900}

.topup-auth-submit{width:100%;height:44px;margin-top:19px;border:0;border-radius:11px;background:linear-gradient(90deg,#22d3ee,#67f1fd);color:#02040a;font-size:10px;font-weight:1000;letter-spacing:.08em;box-shadow:0 10px 24px rgba(34,211,238,.18)}

.topup-auth-switch{margin-top:14px!important;color:#71717a!important;font-size:9px!important;font-weight:700!important;letter-spacing:0!important;text-align:center}

.topup-auth-status{min-height:18px;margin-top:12px;color:#67f1fd;font-size:9px;font-weight:800;text-align:center}

.topup-auth-status.is-error{color:#fb7185}

.topup-auth-submit:disabled{cursor:wait;filter:saturate(.35);opacity:.65}
.topup-auth-divider{display:flex;align-items:center;gap:10px;margin:14px 0 10px;color:#525b69;font-size:7px;font-weight:900}.topup-auth-divider::before,.topup-auth-divider::after{content:"";height:1px;flex:1;background:#202938}
.topup-google-auth{min-height:44px;display:flex;align-items:center;justify-content:center}.topup-google-auth>div{max-width:100%}.topup-google-auth>button{width:100%;height:44px;border:1px solid #303a49;border-radius:10px;background:#fff;color:#172033;font-size:11px;font-weight:900}.topup-google-auth>button::before{content:"G";display:inline-grid;width:21px;height:21px;margin-right:9px;place-items:center;border-radius:50%;background:#4285f4;color:#fff;font-weight:1000}
.topup-register-security{display:grid;gap:5px;margin-top:14px;padding:11px 12px;border:1px solid rgba(251,191,36,.3);border-radius:10px;background:rgba(120,53,15,.14);color:#a8b1bf}.topup-register-security strong{color:#fbbf24;font-size:8px;letter-spacing:.08em}.topup-register-security span{font-size:8px;font-weight:650;line-height:1.45}

.is-register-form,.topup-auth-card.is-register-mode .is-login-form{display:none}

.topup-auth-card.is-register-mode .is-register-form{display:block}

.topup-auth-mobile-tabs{display:none}

.topup-chat-messages{
overflow-y:auto;
padding:22px 20px 150px;
background:
linear-gradient(rgba(1,5,10,.68),rgba(1,5,10,.76)),
url('images/optimized/chat-gaming-pattern-home.webp') center/520px auto repeat;
scrollbar-color:rgba(34,211,238,.35) transparent;
}

.chat-date-chip{width:max-content;margin:0 auto 22px;padding:6px 12px;border:1px solid rgba(255,255,255,.08);border-radius:999px;background:rgba(7,14,24,.88);color:#71717a;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.chat-row{display:flex;align-items:flex-start;gap:9px;max-width:78%;margin-bottom:14px}
.chat-row.is-user{margin-left:auto;justify-content:flex-end}
.chat-avatar{width:30px;height:30px;flex:0 0 auto;object-fit:contain;border:1px solid rgba(34,211,238,.35);border-radius:50%;background:#02040a;padding:4px}
.chat-name{margin:0 0 5px 3px;color:#67f1fd;font-size:10px;font-weight:900}
.chat-bubble{padding:11px 13px;border:1px solid rgba(34,211,238,.18);border-radius:5px 16px 16px 16px;background:linear-gradient(145deg,rgba(12,23,37,.97),rgba(5,12,21,.97));color:#e4e4e7;font-size:13px;line-height:1.5;box-shadow:0 8px 24px rgba(0,0,0,.22)}
.chat-row.is-user .chat-bubble{border-color:rgba(34,211,238,.42);border-radius:16px 5px 16px 16px;background:linear-gradient(135deg,#0891b2,#0e7490);color:white}
.chat-row time{display:block;margin:4px 4px 0;color:#52525b;font-size:9px}
.chat-row.is-user time{text-align:right}

.topup-chat-composer{
z-index:6;
display:grid;
grid-template-columns:38px minmax(0,1fr) 44px;
align-items:center;
gap:8px;
padding:10px 16px;
border-top:1px solid rgba(34,211,238,.16);
background:rgba(4,9,16,.98);
}
.topup-chat-composer input{
  width:100%;
  height:44px;
  padding:0 15px;
  border:1px solid #27272a;
  border-radius:13px;
  outline:0;
  background:#0b1018;
  color:white;
  font-size:13px;
  font-weight:700;
  transition:.2s
}

.topup-chat-composer input:focus{
  border-color:#22d3ee;
  box-shadow:0 0 0 3px rgba(34,211,238,.08)
}

.chat-attach,.chat-send{display:grid;place-items:center;border:0;color:#a1a1aa}
.chat-attach{width:38px;height:38px;border-radius:50%;background:#141a23;font-size:25px;font-weight:300}
.chat-send{width:44px;height:44px;border-radius:13px;background:linear-gradient(135deg,#67f1fd,#22d3ee);color:#02040a;box-shadow:0 8px 22px rgba(34,211,238,.2)}
.chat-send svg{width:20px;height:20px}

.game-list-fab-wrap{position:fixed;right:max(20px,calc((100vw - 860px)/2 + 20px));bottom:94px;z-index:98;display:flex;flex-direction:column;align-items:flex-end;gap:9px;pointer-events:none}
.game-list-toggle,.game-list-menu{pointer-events:auto}
.game-list-toggle{height:45px;display:flex;align-items:center;gap:8px;padding:0 14px;border:1px solid rgba(103,241,253,.7);border-radius:13px;background:linear-gradient(135deg,#67f1fd,#22d3ee);color:#02040a;font-size:11px;font-weight:1000;letter-spacing:.05em;box-shadow:0 12px 30px rgba(0,0,0,.45),0 0 22px rgba(34,211,238,.25)}
.game-list-toggle svg{width:19px;height:19px}
.game-list-menu{display:flex;flex-direction:column;gap:7px;opacity:0;visibility:hidden;transform:translateY(12px) scale(.96);transform-origin:bottom right;transition:.2s}
.game-list-menu.is-open{opacity:1;visibility:visible;transform:none}
.game-list-menu a{width:176px;height:48px;display:flex;align-items:center;gap:10px;padding:6px 12px;border:1px solid rgba(34,211,238,.24);border-radius:12px;background:rgba(7,14,24,.97);color:#e4e4e7;font-size:11px;font-weight:900;box-shadow:0 10px 28px rgba(0,0,0,.4);backdrop-filter:blur(12px)}
.game-list-menu a:hover{border-color:#22d3ee;color:#67f1fd;transform:translateX(-3px)}
.game-list-menu img{width:32px;height:26px;object-fit:contain}

@media(max-width:767px){
.topup-chat-panel,body.topup-chat-open .topup-chat-panel{height:calc(100dvh - 92px);padding-bottom:0}
.topup-chat-shell{grid-template-rows:64px minmax(0,1fr) 72px;border:0}
.topup-chat-header{padding:8px 12px;gap:9px}
.topup-chat-back{display:none}
.topup-chat-avatar{width:42px;height:42px}
.topup-chat-search{height:64px;padding:8px 12px}
.topup-ranking-view{inset:0}
.topup-ranking-header{height:64px;padding:8px 13px}
.topup-ranking-content{padding:24px 14px 30px}
.topup-ranking-content>h3{font-size:23px}
.topup-ranking-game{min-height:104px;padding:13px}
.topup-profile-header{height:64px;padding:8px 13px}
.topup-profile-content{padding:27px 14px 30px}
.topup-profile-content{scroll-padding-top:6px;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.topup-profile-icon{width:64px;height:64px;border-radius:20px}
.topup-profile-intro h3{font-size:23px}
.topup-profile-cards{grid-template-columns:1fr;gap:11px;margin-top:23px}
.topup-profile-card{min-height:112px;display:grid;grid-template-columns:46px minmax(0,1fr);align-items:center;column-gap:14px;padding:15px}
.topup-profile-card-copy{margin-top:0}
.topup-profile-card-arrow{top:50%;transform:translateY(-50%)}
.topup-auth-card{
  min-height:0;
  display:block;
  margin-top:0;
  border-radius:18px
}
.topup-auth-welcome{
  min-height:142px;
  padding:18px 20px
}

.topup-auth-welcome>img{
  width:44px;
  height:44px;
  margin-bottom:9px;
  padding:5px
}

.topup-auth-welcome h3{
  font-size:21px;
  margin-top:5px
}

.topup-auth-welcome>p:not(.topup-auth-eyebrow){
  margin-top:6px;
  font-size:9px
}

.topup-auth-welcome>button{
  display:none!important}

.topup-auth-form-side{
  width: 100%;
  max-width: none;
  flex:1 1 auto; 
  box-sizing: border-box;
  display:block;
  padding:18px 18px 22px;
}

.topup-auth-mobile-tabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5px;
  margin-bottom:18px;
  padding:4px;
  border:1px solid #27272a;
  border-radius:11px;
  background:#05080d}

.topup-auth-mobile-tabs button{
  height:34px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:#71717a;
  font-size:9px;
  font-weight:1000}

.topup-auth-mobile-tabs button.is-active{
  background:rgba(34,211,238,.14);
  color:#67f1fd;
  box-shadow:inset 0 0 0 1px rgba(34,211,238,.2)}

.topup-auth-form{
   width: 100%;
   max-width: none;
   box-sizing: border-box;

}

.topup-auth-form>h3{
  font-size:22px;
}

.topup-auth-form>span{font-size:10px}

.topup-auth-form>label{margin-top:13px}

.topup-auth-form>label>small {
  width: max-content;
}

.topup-auth-form>label>div{height:42px}

.topup-register-game-grid{grid-template-columns:1fr 1fr;gap:8px}.topup-register-game-grid>label{margin-top:12px}.topup-register-game-grid>label>div{height:42px}.topup-profile-content{padding-bottom:110px}

.topup-chat-messages{padding:18px 13px 135px;background-size:430px auto}

.chat-row{max-width:88%}

:root{
  --bottom-nav-height:89px;
  --keyboard-height:0px;
}

.topup-chat-composer{
  width:100%;
  min-width:0;

  position:fixed;
  left:0;
  right:0;

  bottom:var(--bottom-nav-height);

  z-index:9999;
  box-sizing:border-box;

  display:grid;
  grid-template-columns:38px minmax(0,1fr) 44px;
  gap:7px;

  padding:
    9px
    max(12px, env(safe-area-inset-right))
    9px
    max(12px, env(safe-area-inset-left));
}

/* keyboard buka */
body.keyboard-open .topup-chat-composer{
  bottom:var(--keyboard-height);
}

/* bila keyboard buka, nav jangan bergerak */
body.keyboard-open .topup-bottom-nav{
  transform:none;
}

.topup-chat-composer input{
  min-width:0;
  font-size:16px;
  line-height:1
}

.topup-chat-composer .chat-send{
  min-width:44px;
  max-width:44px;
  justify-self:end
}

.game-list-fab-wrap{
  right:18px;bottom:176px
}

.bottom-nav-item[data-nav="ranking"] 
span{font-size:9px}
}

@media (min-width:768px){
.modal-panel > .price-list-shell{
padding-top:48px !important;
}

.price-card-grid{
display:grid !important;
grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
gap:24px !important;
}

.game-card{
width:100% !important;
max-width:100% !important;
min-width:0 !important;
box-sizing:border-box;
overflow:hidden !important;
}
}

.price-card-grid{
align-items:stretch;
gap:24px !important;
}

.game-card{
isolation:isolate;
min-height:195px !important;
aspect-ratio:auto;
border-radius:10px !important;
border:1px solid rgba(34,211,238,.42) !important;
padding:18px !important;
background:
linear-gradient(135deg, rgba(4,11,23,.98), rgba(3,7,18,.94) 54%, rgba(0,0,0,.98)) !important;
box-shadow:0 18px 34px rgba(0,0,0,.32);
filter:none;
transition:transform .25s ease, border-color .25s ease, background .25s ease !important;
}

.game-card::before{
content:"";
position:absolute;
inset:0;
z-index:1;
padding:0;
border-radius:inherit;
background:
linear-gradient(90deg, rgba(34,211,238,.72), transparent 24%) top left / 100% 1px no-repeat,
linear-gradient(180deg, rgba(34,211,238,.72), transparent 42%) top left / 1px 100% no-repeat,
linear-gradient(135deg, rgba(34,211,238,.12), transparent 34%);
pointer-events:none;
animation:none;
mask:none;
-webkit-mask:none;
}

.game-card::after{
content:"";
position:absolute;
right:0;
top:0;
z-index:1;
width:38%;
height:100%;
background:
linear-gradient(135deg, transparent 0 44%, rgba(34,211,238,.18) 45% 47%, transparent 48%),
linear-gradient(90deg, transparent, rgba(34,211,238,.08));
clip-path:polygon(18% 0, 100% 0, 100% 100%, 0 100%);
pointer-events:none;
}

.game-card:hover{
transform:translateY(-3px) !important;
border-color:rgba(103,241,253,.72) !important;
box-shadow:0 20px 38px rgba(0,0,0,.38);
}

.game-card > img{
opacity:.46 !important;
filter:saturate(1.08) contrast(1.06);
transform:scale(1.02);
}

.game-card:hover > img{
transform:scale(1.07);
}

.game-card > div.absolute{
background:
linear-gradient(90deg, rgba(0,0,0,.94), rgba(0,0,0,.68) 48%, rgba(0,0,0,.34)),
linear-gradient(0deg, rgba(0,0,0,.94), transparent 66%) !important;
}

.game-card .relative.z-10{
gap:12px;
min-height:169px;
}

.game-card span{
border-color:rgba(34,211,238,.72) !important;
background:rgba(0,0,0,.62) !important;
border-radius:5px !important;
box-shadow:none;
}

.game-card h3{
font-size:clamp(24px, 1.7vw, 30px) !important;
line-height:.95 !important;
text-shadow:none;
}

.game-card p{
max-width:82%;
}

.game-card a{
position:relative;
z-index:2;
overflow:hidden;
display:flex !important;
align-items:center;
justify-content:center;
width:100% !important;
max-width:100% !important;
box-sizing:border-box;
min-height:32px;
line-height:1.05 !important;
border-radius:6px !important;
background:linear-gradient(90deg, #22d3ee, #67f1fd) !important;
box-shadow:none !important;
}

.game-card a::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(90deg, rgba(255,255,255,.18), transparent);
opacity:0;
transition:opacity .2s ease;
pointer-events:none;
}

.roblox-card-bg{
background:
radial-gradient(circle at 72% 22%, rgba(255,255,255,.16), transparent 18%),
linear-gradient(135deg, rgba(20,25,36,.98), rgba(3,7,18,.96) 55%, rgba(0,0,0,.98));
}

.roblox-card-bg::after{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(135deg, transparent 0 43%, rgba(34,211,238,.18) 44% 46%, transparent 47%),
repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 34px);
opacity:.7;
}

@media (max-width:767px){
.modal-panel{
padding-bottom:96px;
}

.price-card-grid{
display:grid !important;
grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
gap:10px !important;
}

.game-card{
aspect-ratio:auto;
width:100% !important;
max-width:none !important;
min-height:170px !important;
padding:12px !important;
border-radius:8px !important;
}

.game-card .relative.z-10{
justify-content:flex-start !important;
gap:6px;
min-height:auto;
}

.game-card span{
font-size:10px !important;
padding:4px 8px !important;
}

.game-card .flex.justify-between img{
width:54px !important;
height:28px !important;
}

.game-card h3{
margin-top:13px !important;
font-size:21px !important;
line-height:1 !important;
}

.game-card p{
max-width:100%;
font-size:9px !important;
line-height:1.25 !important;
margin-top:5px !important;
}

.game-card a{
min-height:29px;
margin-top:12px !important;
padding-top:0 !important;
padding-bottom:0 !important;
font-size:10px !important;
}
}

.game-card:hover a::after{
opacity:1;
}

.price-jersey-card{
position:relative;
isolation:isolate;
border:1px solid rgba(34,211,238,.42) !important;
border-radius:10px !important;
background:linear-gradient(120deg, rgba(3,12,26,.98), rgba(2,4,10,.98)) !important;
box-shadow:0 18px 34px rgba(0,0,0,.32);
filter:none;
}

.price-jersey-card::before{
content:"";
position:absolute;
inset:0;
z-index:5;
padding:0;
border-radius:inherit;
background:
linear-gradient(90deg, rgba(34,211,238,.72), transparent 24%) top left / 100% 1px no-repeat,
linear-gradient(180deg, rgba(34,211,238,.72), transparent 42%) top left / 1px 100% no-repeat;
animation:none;
pointer-events:none;
mask:none;
-webkit-mask:none;
}

.mobile-inline-search{
position:relative;
width:min(34vw, 132px);
height:32px;
display:flex;
align-items:center;
gap:6px;
border:1px solid rgba(63,63,70,.9);
border-radius:12px;
background:rgba(0,0,0,.42);
padding:0 9px;
box-shadow:0 0 18px rgba(34,211,238,.08);
transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

@media (min-width:768px){
.mobile-inline-search{
display:none !important;
}
}

.mobile-inline-search:focus-within{
border-color:rgba(34,211,238,.8);
background:rgba(2,6,23,.78);
box-shadow:0 0 22px rgba(34,211,238,.16);
}

.mobile-inline-search-icon{
flex:0 0 auto;
width:16px;
height:16px;
color:#67f1fd;
}

.mobile-inline-search-input{
min-width:0;
width:100%;
height:100%;
border:0;
outline:0;
background:transparent;
color:white;
font-size:12px;
font-weight:800;
}

.mobile-inline-search-input::placeholder{
color:rgba(212,212,216,.58);
}

.mobile-search-suggestions{position:absolute;top:calc(100% + 10px);right:0;z-index:100;width:min(82vw,320px);max-height:min(58vh,420px);padding:6px;overflow-y:auto;border:1px solid rgba(34,211,238,.24);border-radius:14px;background:rgba(4,10,18,.98);box-shadow:0 18px 45px rgba(0,0,0,.48);backdrop-filter:blur(18px)}
.mobile-search-suggestions[hidden]{display:none!important}
.mobile-search-option{width:100%;display:flex;align-items:center;gap:10px;padding:10px;border:0;border-radius:10px;background:transparent;color:#f8fafc;text-align:left}
.mobile-search-option:hover,.mobile-search-option.is-active{background:linear-gradient(90deg,rgba(14,165,233,.22),rgba(37,99,235,.12))}
.mobile-search-option i{width:31px;height:31px;display:grid;place-items:center;flex:0 0 auto;border-radius:9px;background:#0c2234;color:#67e8f9;font-size:13px;font-style:normal;font-weight:1000}
.mobile-search-option span{min-width:0;display:grid;gap:3px}.mobile-search-option strong{font-size:11px;font-weight:1000}.mobile-search-option small{overflow:hidden;color:#94a3b8;font-size:8px;font-weight:700;white-space:nowrap;text-overflow:ellipsis}
.mobile-search-empty{padding:18px 10px;color:#94a3b8;font-size:10px;font-weight:800;text-align:center}

.footer-simple-title{
color:white;
font-size:12px;
font-weight:900;
letter-spacing:.12em;
text-transform:uppercase;
}

.footer-simple-list{
display:flex;
flex-direction:column;
gap:7px;
margin-top:10px;
font-size:12px;
font-weight:800;
}

.footer-simple-list a{
color:#a1a1aa;
transition:color .2s ease;
}

.footer-simple-list a:hover{
color:#67f1fd;
}

.bottom-app-nav{
position:fixed;
left:50%;
bottom:14px;
z-index:95;
display:none;
width:min(calc(100% - 28px), 430px);
height:70px;
transform:translateX(-50%);
align-items:center;
justify-content:space-around;
gap:4px;
padding:8px;
border:1px solid rgba(34,211,238,.26);
border-radius:22px;
background:linear-gradient(180deg, rgba(8,13,24,.96), rgba(2,4,10,.98));
box-shadow:0 18px 46px rgba(0,0,0,.48), 0 0 26px rgba(34,211,238,.16);
backdrop-filter:blur(14px);
}

.bottom-nav-item{
position:relative;
width:25%;
height:54px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:4px;
border:0;
border-radius:16px;
background:transparent;
color:#a1a1aa;
font-size:10px;
font-weight:900;
line-height:1;
transition:color .2s ease, transform .2s ease;
}

.bottom-nav-item svg{
width:22px;
height:22px;
}

.bottom-nav-item.is-active{
color:#02040a;
transform:translateY(-14px);
}

.bottom-nav-item.is-active::before{
content:"";
position:absolute;
inset:1px 50% auto auto;
top:0;
left:50%;
z-index:-1;
width:48px;
height:48px;
border-radius:999px;
background:#fff;
box-shadow:0 8px 18px rgba(255,255,255,.16), 0 0 0 8px rgba(2,4,10,.94);
transform:translateX(-50%);
}

.bottom-nav-item.is-active span{
display:none;
}

.bottom-nav-item .profile-login-note{
position:absolute;
right:2px;
top:-13px;
z-index:4;
display:flex !important;
align-items:center;
gap:5px;
width:max-content;
padding:5px 7px;
border:1px solid rgba(251,191,36,.65);
border-radius:7px 7px 7px 2px;
background:#171006;
color:#fbbf24;
font-size:7px;
font-weight:1000;
line-height:1;
letter-spacing:.08em;
box-shadow:0 7px 18px rgba(0,0,0,.45),0 0 12px rgba(251,191,36,.12);
pointer-events:none;
animation:profileLoginNudge 2.2s ease-in-out infinite;
}

.bottom-nav-item .profile-login-note::after{
content:"";
position:absolute;
right:8px;
bottom:-5px;
width:8px;
height:8px;
border-right:1px solid rgba(251,191,36,.65);
border-bottom:1px solid rgba(251,191,36,.65);
background:#171006;
transform:rotate(45deg);
}

.profile-login-note i{
width:5px;
height:5px;
border-radius:50%;
background:#fbbf24;
box-shadow:0 0 8px rgba(251,191,36,.85);
}

body.topup-user-logged-in .profile-login-note{display:none !important}

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

@media (max-width:767px){

  .bottom-app-nav{
    display:flex;
  }

  .topup-bottom-nav{
    display:none;
  }

  body.topup-chat-open .main-bottom-nav{
    display:none;
  }

body.topup-chat-open .topup-bottom-nav{
    display:flex;
  }

}

@media (max-width:767px){
  body.topup-chat-open .main-bottom-nav{
    display:none !important;
  }

  .topup-bottom-nav,
  body.topup-chat-open .topup-bottom-nav{
    display:none !important;
  }

  .chat-bottom-nav{
    display:none;
  }

  body.topup-chat-open .chat-bottom-nav{
    display:flex !important;
    position:fixed;
    left:50%;
    bottom:14px;
    z-index:9999;
    transform:translateX(-50%);
  }

  body.topup-chat-open.chat-focus-mode .chat-bottom-nav{
    display:none !important;
  }
}

@media (min-width:768px){
  body:not(.topup-chat-open) .main-bottom-nav{
    display:flex;
  }

  body:not(.topup-chat-open){
    padding-bottom:98px;
  }

  body.topup-chat-open .main-bottom-nav{
    display:none !important;
  }
}


body.topup-chat-open{
  scroll-behavior:auto;
  position:fixed;
  inset:0;
  width:100%;
  height:100dvh;
  overflow:hidden !important;
  overscroll-behavior:none;
}

body.topup-chat-open #chat-center{
  position:fixed;
  inset:0;
  width:100%;
  height:100dvh;
  overflow:hidden !important;
}

body.topup-chat-open .topup-chat-panel{
  height:100dvh !important;
  overflow:hidden !important;
  padding-bottom:0 !important;
}

body.topup-chat-open .topup-chat-shell{
  height:100%;
  min-height:0;
  overflow:hidden;

  display:grid;
  grid-template-rows:
    64px
    minmax(0,1fr)
    72px;
}

body.topup-chat-open .topup-chat-messages{
  overflow-anchor:none;
  min-height:0;
  height:100%;
  overflow-y:auto !important;
  overflow-x:hidden;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}



footer a[href*="tiktok.com"] span{
font-size:0;
}

footer a[href*="tiktok.com"] span::before{
content:"T";
font-size:12px;
font-weight:900;
line-height:1;
}

.hero-glow{
background:
radial-gradient(circle at 18% 18%, rgba(34, 211, 238, 0.22), transparent 28%),
radial-gradient(circle at 82% 8%, rgba(168, 85, 247, 0.16), transparent 26%),
linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(2, 6, 23, 0.98) 55%, rgba(10, 5, 20, 0.98));
}

.hero-video{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
opacity:.34;
filter:saturate(1.25) contrast(1.08);
}

.hero-red-motion{
position:absolute;
inset:0;
background:
radial-gradient(circle at var(--x, 72%) var(--y, 28%), rgba(239, 68, 68, .2), transparent 24%),
radial-gradient(circle at 20% 80%, rgba(34, 211, 238, .14), transparent 30%);
mix-blend-mode:screen;
animation:redMotion 9s ease-in-out infinite alternate;
}

@keyframes redMotion{
0%{
--x:68%;
--y:24%;
transform:scale(1);
}

100%{
--x:86%;
--y:52%;
transform:scale(1.08);
}
}

.promo-carousel{
position:relative;
width:min(100%, 1120px);
height:auto;
aspect-ratio:4 / 1;
overflow:hidden;
border-radius:14px;
}

.promo-slide{
appearance:none;
position:absolute;
top:50%;
left:50%;
width:100%;
height:100%;
overflow:hidden;
border-radius:14px;
border:1px solid rgba(34, 211, 238, .45);
background:
linear-gradient(135deg, rgba(34, 211, 238, .22), rgba(0,0,0,.82)),
linear-gradient(160deg, #06121f, #02040a 58%, #1b0710);
box-shadow:0 20px 70px rgba(0,0,0,.48);
transform:translate(-50%, -50%) scale(.72);
opacity:.28;
transition:transform .45s ease, opacity .45s ease, filter .45s ease;
filter:blur(.5px);
color:inherit;
cursor:pointer;
text-decoration:none;
padding:0;
font:inherit;
text-align:inherit;
}

.promo-slide.is-active{
z-index:4;
opacity:1;
transform:translate(-50%, -50%) scale(1);
filter:blur(0);
}

.promo-slide.is-left{
z-index:1;
opacity:0;
pointer-events:none;
transform:translate(calc(-50% - 430px), -50%) scale(.78) rotate(-4deg);
}

.promo-slide.is-right{
z-index:1;
opacity:0;
pointer-events:none;
transform:translate(calc(-50% + 430px), -50%) scale(.78) rotate(4deg);
}

.promo-slide.is-hidden{
z-index:1;
opacity:0;
pointer-events:none;
transform:translate(calc(-50% + 680px), -50%) scale(.64) rotate(8deg);
}

.promo-slide-inner{
position:absolute;
inset:0;
z-index:1;
display:flex;
flex-direction:column;
justify-content:space-between;
padding:18px;
background:linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.9));
}

.promo-slide-image{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
object-position:center;
}

.promo-dot{
width:8px;
height:8px;
border-radius:999px;
background:rgba(255,255,255,.28);
transition:width .25s ease, background .25s ease;
}

.promo-dot.is-active{
width:22px;
background:#22d3ee;
}

.promo-nav-button{
position:absolute;
top:50%;
z-index:8;
width:30px;
height:30px;
display:flex;
align-items:center;
justify-content:center;
border-radius:999px;
border:1px solid rgba(34,211,238,.56);
background:rgba(2,6,23,.72);
color:#67f1fd;
box-shadow:0 8px 20px rgba(0,0,0,.32);
transform:translateY(-50%);
transition:background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}

.promo-nav-button:hover{
border-color:rgba(103,241,253,.95);
background:rgba(34,211,238,.16);
color:white;
transform:translateY(-50%) scale(1.06);
}

.promo-nav-button svg{
width:16px;
height:16px;
}

.promo-nav-button.is-prev{
left:10px;
}

.promo-nav-button.is-next{
right:10px;
}

.electric-card{
isolation:isolate;
}

.electric-card::before{
content:"";
position:absolute;
inset:0;
z-index:20;
padding:1px;
border-radius:inherit;
pointer-events:none;
background:
linear-gradient(110deg, transparent 0 18%, rgba(34,211,238,.95) 28%, rgba(255,255,255,.9) 34%, rgba(34,211,238,.65) 42%, transparent 54%),
linear-gradient(90deg, rgba(34,211,238,.55), rgba(56,189,248,.08), rgba(34,211,238,.75));
background-size:220% 100%, 100% 100%;
-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite:xor;
mask-composite:exclude;
animation:electricBorder 2.2s linear infinite;
box-shadow:0 0 18px rgba(34,211,238,.35);
}

.electric-card::after{
content:"";
position:absolute;
inset:-1px;
z-index:1;
border-radius:inherit;
pointer-events:none;
opacity:.55;
background:
radial-gradient(circle at 18% 0%, rgba(34,211,238,.16), transparent 32%),
radial-gradient(circle at 86% 100%, rgba(34,211,238,.12), transparent 34%);
}

.tournament-logo-stack{
position:absolute;
right:16px;
top:16px;
z-index:12;
display:flex;
align-items:center;
gap:8px;
}

.tournament-logo-stack img{
--logo-scale:1;
width:32px;
height:32px;
object-fit:contain;
object-position:center;
transform:scale(var(--logo-scale));
transition:transform .35s ease, filter .35s ease;
}

.tournament-logo-stack .cs-logo{
--logo-scale:.74;
}

.tournament-logo-stack .gtml-logo{
--logo-scale:1.18;
}

.group:hover .tournament-logo-stack img{
transform:translateY(-2px) scale(calc(var(--logo-scale) * 1.06));

}

.tournament-card-button{
position:relative;
display:block;
width:100%;
aspect-ratio:3264 / 1077;
height:auto;
min-height:0;
overflow:hidden;
border-radius:12px;
align-self:center;
transition:transform .25s ease, filter .25s ease;
}

.tournament-card-button:hover{
transform:translateY(-4px);
filter:brightness(1.08);
}

.tournament-card-button::before,
.topup-card-button::before,
.jersey-card-button::before,
.gnex-esport-card-button::before{
content:"";
position:absolute;
inset:0;
z-index:4;
padding:1px;
border-radius:inherit;
background:linear-gradient(110deg, transparent 0 18%, rgba(103,241,253,.72) 30%, rgba(255,255,255,.55) 36%, rgba(103,241,253,.58) 44%, transparent 58%);
background-size:320% 100%;
animation:cardCyanLine 1.8s linear infinite;
pointer-events:none;
-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite:xor;
mask-composite:exclude;
box-shadow:0 0 8px rgba(103,241,253,.24);
}

.tournament-card-button::before{
-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite:xor;
mask-composite:exclude;
}

.topup-card-button::before{
-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite:xor;
mask-composite:exclude;
}

.jersey-card-button::before{
-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite:xor;
mask-composite:exclude;
}

.gnex-esport-card-button::before{
-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite:xor;
mask-composite:exclude;
}

.tournament-card-bg{
position:absolute;
left:0;
top:-34.9%;
width:100%;
height:170.5%;
object-fit:cover;
object-position:center center;
transition:transform .55s ease;
}

.tournament-card-button:hover .tournament-card-bg{
transform:scale(1.03);
}

.tournament-card-character{
position:absolute;
z-index:2;
object-fit:contain;
opacity:0;
filter:drop-shadow(0 18px 22px rgba(0,0,0,.42)) drop-shadow(0 0 18px rgba(56,189,248,.4));
animation:tournamentCharacterSwap 9s cubic-bezier(.2,.8,.2,1) infinite;
pointer-events:none;
}

.tournament-card-character.is-kelly{
left:8%;
bottom:1%;
width:40%;
max-height:87%;
}

.tournament-card-character.is-granger{
left:9%;
bottom:3%;
width:37%;
max-height:86%;
animation-delay:3s;
}

.tournament-card-character.is-kelly-repeat{
left:8%;
bottom:1%;
width:40%;
max-height:87%;
animation-delay:6s;
}



.tournament-card-button::after{
  content:"";
  position:absolute;

  /* ikut kedudukan card sebenar */
  left:0;
  top:0;
  width:100%;
  height:100%;

  z-index:3;
  background:linear-gradient(
    105deg,
    transparent 0 38%,
    rgba(103,241,253,.1) 48%,
    transparent 58%
  );
  transform:translateX(-115%);
  animation:tournamentLightSweep 4s ease-in-out infinite;
  pointer-events:none;
  mix-blend-mode:screen;

  -webkit-mask:url("Card design/CUT SIZE ESPORTS TOUR CARD.png") center / 100% 100% no-repeat;
  mask:url("Card design/CUT SIZE ESPORTS TOUR CARD.png") center / 100% 100% no-repeat;
}

@keyframes tournamentCharacterSwap{
0%{
opacity:0;
transform:translateX(-22%) translateY(8%) scale(.88) rotate(-4deg);
}

8%,
27%{
opacity:1;
transform:translateX(0) translateY(0) scale(1) rotate(0deg);
}

35%,
100%{
opacity:0;
transform:translateX(18%) translateY(4%) scale(.92) rotate(3deg);
}
}

@keyframes tournamentLightSweep{
0%,
46%{
transform:translateX(-115%);
opacity:0;
}

58%{
opacity:.8;
}

72%,
100%{
transform:translateX(115%);
opacity:0;
}
}

@keyframes cardCyanLine{
0%{
background-position:180% 0;
opacity:.38;
}

50%{
opacity:.72;
}

100%{
background-position:-180% 0;
opacity:.38;
}
}

.topup-card-button{
position:relative;
display:block;
width:100%;
aspect-ratio:3264 / 1077;
height:auto;
min-height:0;
overflow:hidden;
border-radius:12px;
border:0;
padding:0;
background:transparent;
cursor:pointer;
align-self:center;
transition:transform .25s ease, filter .25s ease;
}

.topup-card-button:hover{
transform:translateY(-4px);
filter:brightness(1.08);
}

.topup-card-bg{
position:absolute;
left:0;
top:-34.9%;
width:100%;
height:170.5%;
object-fit:cover;
object-position:center center;
transition:transform .55s ease;
}

.topup-card-button:hover .topup-card-bg{
transform:scale(1.03);
}

.topup-card-item{
position:absolute;
left:12%;
top:50%;
z-index:2;
width:33%;
max-height:78%;
object-fit:contain;
opacity:0;
filter:drop-shadow(0 18px 22px rgba(0,0,0,.42)) drop-shadow(0 0 18px rgba(56,189,248,.35));
transform:translate(-18%, -44%) scale(.88) rotate(-2deg);
animation:topupItemSwap 9s cubic-bezier(.2,.8,.2,1) infinite;
}

.topup-card-item.is-pubg{
animation-delay:3s;
}

.topup-card-item.is-weekly{
animation-delay:6s;
}

.topup-card-button::after{
content:"";
position:absolute;
left:5%;
top:12%;
z-index:1;
width:40%;
height:76%;
border-radius:999px;
background:radial-gradient(circle, rgba(56,189,248,.2), transparent 68%);
filter:blur(10px);
opacity:.75;
animation:topupPulse 3s ease-in-out infinite;
pointer-events:none;
}

.jersey-card-button{
position:relative;
display:block;
width:100%;
aspect-ratio:3264 / 1077;
height:auto;
min-height:0;
overflow:hidden;
border-radius:12px;
background:transparent;
cursor:pointer;
align-self:center;
transition:transform .25s ease, filter .25s ease;
}

.jersey-card-button:hover{
transform:translateY(-4px);
filter:brightness(1.08);
}

.jersey-card-bg{
position:absolute;
left:0;
top:-34.9%;
width:100%;
height:170.5%;
object-fit:cover;
object-position:center center;
transition:transform .55s ease;
}

.jersey-card-button:hover .jersey-card-bg{
transform:scale(1.03);
}

.jersey-card-logo{
position:absolute;
left:1%;
top:5%;
z-index:3;
width:10%;
max-width:54px;
min-width:32px;
height:auto;
object-fit:contain;
filter:drop-shadow(0 8px 12px rgba(0,0,0,.48)) drop-shadow(0 0 12px rgba(34,211,238,.34));
pointer-events:none;
}

.jersey-card-button:hover .jersey-card-logo{
filter:drop-shadow(0 10px 14px rgba(0,0,0,.52)) drop-shadow(0 0 16px rgba(34,211,238,.46));
}

.jersey-card-item{
position:absolute;
z-index:2;
object-fit:contain;
opacity:0;
filter:drop-shadow(0 14px 20px rgba(0,0,0,.42)) drop-shadow(0 0 16px rgba(34,211,238,.28));
animation:jerseyItemSwap 9s cubic-bezier(.2,.8,.2,1) infinite;
pointer-events:none;
}

.jersey-card-item.is-front{
left:12%;
bottom:-11%;
width:28%;
max-height:118%;
}

.jersey-card-item.is-back{
left:15%;
bottom:-12%;
width:26%;
max-height:120%;
animation-delay:3s;
}

.jersey-card-item.is-front-repeat{
left:12%;
bottom:-11%;
width:28%;
max-height:118%;
animation-delay:6s;
}

.jersey-card-button::after{
content:"";
position:absolute;
left:8%;
top:9%;
z-index:1;
width:28%;
height:84%;
border-radius:999px;
background:radial-gradient(circle, rgba(34,211,238,.18), transparent 68%);
filter:blur(9px);
opacity:.72;
animation:topupPulse 3.2s ease-in-out infinite;
pointer-events:none;
}

@keyframes jerseyItemSwap{
0%{
opacity:0;
transform:translateX(-18%) translateY(5%) scale(.9) rotate(-3deg);
}

8%,
27%{
opacity:1;
transform:translateX(0) translateY(0) scale(1) rotate(0deg);
}

35%,
100%{
opacity:0;
transform:translateX(16%) translateY(4%) scale(.92) rotate(3deg);
}
}

.gnex-esport-card-button{
position:relative;
display:block;
width:100%;
aspect-ratio:3264 / 1077;
height:auto;
background-color: antiquewhite;
min-height:0;
overflow:hidden;
border-radius:12px;
background:transparent;
align-self:center;
transition:transform .25s ease, filter .25s ease;
}

.gnex-esport-card-button:hover{
transform:translateY(-4px);
filter:brightness(1.08);
}

.gnex-esport-card-bg{
position:absolute;
left:0;
top:-34.9%;
width:100%;
height:170.5%;
object-fit:cover;
object-position:center center;
pointer-events:none;
}

.gnex-esport-card-bg{
  position: relative;
  z-index: 1;
  transition: transform .55s ease;
}

.gnex-esport-card-button:hover .gnex-esport-card-bg{
transform:scale(1.03);
}

.image-lightbox{
position:fixed;
inset:0;
z-index:1200;
display:none;
align-items:center;
justify-content:center;
padding:18px;
background:rgba(0,0,0,.84);
backdrop-filter:blur(14px);
}

.image-lightbox.is-open{
display:flex;
}

.image-lightbox-backdrop{
position:absolute;
inset:0;
border:0;
background:transparent;
cursor:pointer;
}

.image-lightbox-panel{
position:relative;
z-index:1;
width:min(94vw, 860px);
max-height:calc(100vh - 48px);
display:flex;
align-items:center;
justify-content:center;
}

.image-lightbox-img{
display:block;
width:100%;
max-height:calc(100vh - 48px);
object-fit:contain;
border-radius:10px;
border:1px solid rgba(34,211,238,.42);
box-shadow:0 28px 90px rgba(0,0,0,.72), 0 0 36px rgba(34,211,238,.16);
background:#02040a;
}

.image-lightbox-close{
position:absolute;
top:-14px;
right:-14px;
z-index:2;
width:42px;
height:42px;
display:flex;
align-items:center;
justify-content:center;
border-radius:10px;
border:1px solid rgba(34,211,238,.66);
background:rgba(2,6,23,.96);
color:#fff;
font-weight:900;
box-shadow:0 12px 32px rgba(0,0,0,.45);
transition:transform .2s ease, border-color .2s ease, color .2s ease;
}

.image-lightbox-close:hover{
transform:translateY(-1px);
border-color:#22d3ee;
color:#22d3ee;
}

@media (max-width:640px){
.image-lightbox{
padding:10px;
}

.image-lightbox-panel{
width:96vw;
}

.image-lightbox-close{
top:8px;
right:8px;
}
}

.gnex-esport-card-logo{
position:absolute;
left:15%;
top:2%;
z-index:3;
width:17%;
max-width:90px;
min-width:90px;
height:auto;
object-fit:contain;
filter:drop-shadow(0 10px 14px rgba(0,0,0,.5)) drop-shadow(0 0 16px rgba(34,211,238,.38));
animation:gnexEsportLogoEnter 9s cubic-bezier(.2,.8,.2,1) infinite;
pointer-events:none;
}

.gnex-esport-card-logo.is-repeat{
opacity:0;
animation:cardLogoSlot 9s cubic-bezier(.2,.8,.2,1) infinite;
animation-delay:6s;
}

@media (max-width:640px){
  .gnex-esport-card-logo{

    left:14%;
    top:2%;
    width:31%;
    max-width:none;
    min-width:0;
  }

  .gnex-esport-card-logo.is-repeat{

    left:14%;
    top:2%;
    width:31%;
    max-width:none;
    min-width:0;
  }
}

.gnex-esport-card-kelly{
position:absolute;
left:14%;
bottom:0;
top:2%;
z-index:3;
width:33%;
max-height:92%;
object-fit:contain;
opacity:0;
filter:drop-shadow(0 18px 22px rgba(0,0,0,.42)) drop-shadow(0 0 18px rgba(56,189,248,.4));
animation:gnexEsportKellyEnter 9s cubic-bezier(.2,.8,.2,1) infinite;
animation-delay:3s;
pointer-events:none;
}

.gnex-esport-card-button::after{
content:"";
position:absolute;
inset:0;
z-index:3;
background:linear-gradient(105deg, transparent 0 40%, rgba(103,241,253,.28) 49%, transparent 59%);
transform:translateX(-115%);
animation:tournamentLightSweep 7s ease-in-out infinite;
pointer-events:none;
mix-blend-mode:screen;
}

.tournament-card-button::after,
.gnex-esport-card-button::after{
display:none;
}

.tournament-card-button,
.topup-card-button,
.jersey-card-button,
.gnex-esport-card-button{
filter:
drop-shadow(1px 0 0 #67F1FD)
drop-shadow(-1px 0 0 #67F1FD)
drop-shadow(0 1px 0 #67F1FD)
drop-shadow(0 -1px 0 #67F1FD)
drop-shadow(0 0 4px rgba(103, 241, 253, .32));
}

.tournament-card-button:hover,
.topup-card-button:hover,
.jersey-card-button:hover,
.gnex-esport-card-button:hover{
transform:translateY(-4px) scale(1.01);
filter:
brightness(1.08)
drop-shadow(1px 0 0 #67F1FD)
drop-shadow(-1px 0 0 #67F1FD)
drop-shadow(0 1px 0 #67F1FD)
drop-shadow(0 -1px 0 #67F1FD)
drop-shadow(0 0 4px rgba(103, 241, 253, .32));
}

.tour-transition-active{
overflow:hidden;
}

.tour-transition-stage{
position:fixed;
inset:0;
z-index:9999;
background:rgba(0,0,0,.08);
pointer-events:none;
overflow:hidden;
transition:background .5s ease;
}

.tour-transition-stage.is-opening-view{
background:radial-gradient(circle at center, rgba(103,241,253,.1), rgba(0,0,0,.28) 58%, rgba(0,0,0,.46));
}

.tour-transition-stage.is-title-view{
background:radial-gradient(circle at center, rgba(34,211,238,.08), rgba(0,0,0,.78) 52%, #000 100%);
}

.tour-transition-clone{
position:fixed !important;
display:block;
margin:0 !important;
z-index:2;
overflow:hidden;
box-shadow:0 0 12px rgba(103,241,253,.24);
will-change:left, top, width, height, transform, opacity;
}

.tour-transition-clone.tournament-card-button{
z-index:4;
}

.tour-transition-clone.is-opening-view{
z-index:5;
box-shadow:0 0 0 1px rgba(103,241,253,.42), 0 0 34px rgba(103,241,253,.24);
backface-visibility:hidden;
}

.tour-transition-clone.is-opening-view .tournament-card-bg{
top:0;
height:100%;
object-fit:cover;
}

.tour-title-view{
position:absolute;
inset:0;
z-index:8;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:12px;
opacity:0;
animation:tourTitleFade .26s ease forwards;
}

.tour-title-kicker{
color:#67f1fd;
font-size:clamp(12px, 1.1vw, 16px);
font-weight:900;
letter-spacing:.34em;
text-transform:uppercase;
opacity:.86;
}

.tour-title-type{
width:max-content;
max-width:max-content;
overflow:hidden;
white-space:nowrap;
color:white;
font-size:clamp(58px, 8vw, 132px);
font-weight:1000;
line-height:.9;
letter-spacing:.02em;
text-shadow:0 0 18px rgba(103,241,253,.26), 0 0 42px rgba(34,211,238,.14);
border-right:4px solid #67f1fd;
clip-path:inset(0 100% 0 0);
animation:tourTitleType .86s steps(10,end) .18s forwards, tourTitleCaret .7s step-end infinite;
}

@keyframes tourTitleFade{
to{
opacity:1;
}
}

@keyframes tourTitleType{
from{
clip-path:inset(0 100% 0 0);
}

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

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

.is-transition-source-hidden{
visibility:hidden !important;
}

.gnex-esport-card-button{
transform:scale(1.008);
}

@keyframes gnexEsportLogoEnter{
0%{
opacity:0;
transform:translateX(-28%) scale(.82) rotate(-8deg);
}

8%,
27%{
opacity:1;
transform:translateX(0) scale(1) rotate(0deg);
}

35%,
100%{
opacity:0;
transform:translateX(10%) scale(.92) rotate(4deg);
}
}

@keyframes gnexEsportKellyEnter{
0%{
opacity:0;
transform:translateX(-22%) translateY(8%) scale(.88) rotate(-4deg);
}

8%,
27%{
opacity:1;
transform:translateX(0) translateY(0) scale(1) rotate(0deg);
}

35%,
100%{
opacity:0;
transform:translateX(18%) translateY(4%) scale(.92) rotate(3deg);
}
}

@keyframes cardLogoSlot{
0%{
opacity:0;
transform:translateX(-24%) scale(.82) rotate(-8deg);
}

8%,
27%{
opacity:1;
transform:translateX(0) scale(1) rotate(0deg);
}

35%,
100%{
opacity:0;
transform:translateX(10%) scale(.92) rotate(4deg);
}
}

@keyframes topupItemSwap{
0%{
opacity:0;
transform:translate(-22%, -42%) scale(.82) rotate(-5deg);
}

8%,
27%{
opacity:1;
transform:translate(0, -50%) scale(1) rotate(0deg);
}

35%,
100%{
opacity:0;
transform:translate(16%, -56%) scale(.9) rotate(4deg);
}
}

@keyframes topupPulse{
0%,
100%{
opacity:.48;
transform:scale(.92);
}

50%{
opacity:.9;
transform:scale(1.06);
}
}

@keyframes electricBorder{
0%{
background-position:220% 0, 0 0;
filter:hue-rotate(0deg);
}

100%{
background-position:-80% 0, 0 0;
filter:hue-rotate(18deg);
}
}

@media (min-width:768px){
.tournament-card-button,
.topup-card-button,
.jersey-card-button,
.gnex-esport-card-button{
height:auto;
aspect-ratio:3264 / 1077;
align-self:center;
}

.tournament-logo-stack{
top:auto;
right:16px;
bottom:16px;
gap:9px;
}

.tournament-logo-stack img{
width:30px;
height:30px;
}
}



@media (min-width:1280px){
.tournament-card-button{
height:auto;
aspect-ratio:3264 / 1077;
}



}

@media (min-width:768px){
  .tournament-card-character.is-kelly{
    bottom:4%;
  }

  .tournament-card-character.is-granger{
    bottom:3%;
  }
}


.card-button-grid{
/* Extra paint area for borders, glow and hover lift; keep card tracks unchanged. */
box-sizing:border-box;
padding:12px;
margin-left:-12px;
margin-right:-12px;
}

@media (max-width:640px){
.card-button-grid{
width:calc(95% + 24px);
margin-left:auto;
margin-right:auto;
}

.promo-carousel{
width:100%;
height:auto;
aspect-ratio:4 / 1;
}

.promo-slide{
width:100%;
}

.promo-slide.is-left{
opacity:.5;
pointer-events:auto;
transform:translate(calc(-50% - 220px), -50%) scale(.72) rotate(-5deg);
}

.promo-slide.is-right{
opacity:.5;
pointer-events:auto;
transform:translate(calc(-50% + 220px), -50%) scale(.72) rotate(5deg);
}

.promo-slide.is-hidden{
opacity:.18;
pointer-events:none;
transform:translate(calc(-50% + 390px), -50%) scale(.56) rotate(8deg);
}

.tournament-logo-stack{
right:12px;
top:12px;
gap:6px;
}

.tournament-logo-stack img{
width:44px;
height:44px;
}
}

.card-glass{
background:linear-gradient(180deg, rgba(24, 24, 27, 0.88), rgba(9, 9, 11, 0.92));
border:1px solid rgba(63, 63, 70, 0.8);
box-shadow:0 24px 80px rgba(0, 0, 0, 0.35);
}

.cyan-line{
background:linear-gradient(90deg, rgba(34, 211, 238, 0), rgba(34, 211, 238, 0.9), rgba(34, 211, 238, 0));
}

@keyframes popCard{
0%{
transform:translateY(32px) scale(0.96);
opacity:0;
}

100%{
transform:translateY(0) scale(1);
opacity:1;
}
}

.animate-card{
animation:popCard 700ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.topup-notification-btn{width:100%;min-height:42px;margin-top:10px;border:1px solid rgba(34,211,238,.4);border-radius:11px;background:#071827;color:#67f1fd;font-size:9px;font-weight:1000}.topup-notification-btn.is-on{border-color:rgba(34,197,94,.5);background:#0b3a2b;color:#4ade80}
.topup-user-logout-btn{display:none;width:100%;min-height:42px;margin-top:8px;border:1px solid rgba(244,63,94,.45);border-radius:11px;background:#260b12;color:#fb7185;font-size:9px;font-weight:1000}.topup-user-logged-in .topup-user-logout-btn{display:block}
.topup-user-profile-card{position:relative;isolation:isolate;width:min(100%,620px);margin:42px auto 18px;padding:100px 28px 24px;overflow:visible;border:0;border-radius:42px;background:linear-gradient(135deg,#b9d8ec 0%,#f6ae58 43%,#dc91ad 72%,#b9c8df 100%);box-shadow:0 28px 65px rgba(0,0,0,.32),0 12px 30px rgba(34,211,238,.12);color:#111827}.topup-user-profile-card::after{content:"";position:absolute;inset:72px 14px 14px;z-index:-1;border-radius:44px 44px 32px 32px;background:rgba(255,255,255,.96);box-shadow:0 10px 26px rgba(15,23,42,.12)}.topup-user-profile-card[hidden]{display:none!important}.topup-user-profile-avatar{position:absolute;left:42px;top:40px;width:94px;height:94px;display:grid;place-items:center;border:5px solid rgba(255,255,255,.94);border-radius:50%;background:linear-gradient(145deg,#062b3a,#0e7490);color:#cffafe;font-size:35px;font-weight:1000;box-shadow:0 8px 20px rgba(15,23,42,.26)}.topup-user-profile-main{min-height:74px;margin-left:124px;padding-top:0}.topup-user-profile-main small{color:#0891b2;font-size:8px;font-weight:1000;letter-spacing:.14em}.topup-user-profile-main h3{margin:6px 0 0;color:#09090b;font-size:26px;font-weight:900}.topup-user-profile-main p{margin:5px 0 0;color:#64748b;font-size:11px;font-weight:800;letter-spacing:.04em}.topup-user-profile-status{position:absolute;right:38px;top:98px;padding:5px 9px;border-radius:999px;background:#ecfdf5;color:#16a34a;font-size:8px;font-weight:1000}.topup-user-profile-status i{display:inline-block;width:7px;height:7px;margin-right:4px;border-radius:50%;background:#22c55e;box-shadow:0 0 8px #22c55e}.topup-user-profile-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:24px}.topup-user-profile-stats article{padding:15px 8px;border:1px solid #e2e8f0;border-radius:18px;background:#f8fafc;text-align:center}.topup-user-profile-stats b,.topup-user-profile-stats span{display:block}.topup-user-profile-stats b{color:#0f172a;font-size:15px}.topup-user-profile-stats span{margin-top:5px;color:#94a3b8;font-size:7px;font-weight:1000}.topup-user-profile-game-id{margin-top:10px;padding:12px;border:1px solid #e2e8f0;border-radius:16px;background:#f8fafc;color:#475569;font-size:10px;font-weight:900;text-align:center}.topup-user-profile-card .topup-notification-btn{display:inline-block;width:63%;min-height:50px;margin-top:14px;border:0;border-radius:999px;background:#050505;color:#fff;font-size:10px}.topup-user-profile-card .topup-notification-btn.is-on{background:#052e24;color:#4ade80}.topup-user-profile-card .topup-user-logout-btn{width:34%;min-height:50px;margin:14px 0 0 2%;border:1px solid #fecdd3;border-radius:999px;background:#fff1f2;color:#e11d48;font-size:9px}@media(max-width:560px){.topup-user-profile-card{margin-top:32px;padding:88px 18px 20px;border-radius:32px}.topup-user-profile-card::after{inset:62px 9px 9px;border-radius:36px 36px 26px 26px}.topup-user-profile-avatar{left:27px;top:31px;width:78px;height:78px;font-size:28px}.topup-user-profile-main{min-height:66px;margin-left:92px}.topup-user-profile-main h3{max-width:150px;font-size:20px}.topup-user-profile-status{right:24px;top:82px}.topup-user-profile-stats{margin-top:18px}.topup-user-profile-card .topup-notification-btn{width:61%}.topup-user-profile-card .topup-user-logout-btn{width:36%}}
.topup-user-logged-in .topup-user-profile-card .topup-user-logout-btn{display:inline-block}
.topup-profile-view{background:#f4f7fb}
.topup-profile-header{border-bottom-color:#d8e3ec;background:#fff;box-shadow:0 2px 12px rgba(15,23,42,.06)}
.topup-profile-header button{border-color:#d5e0e9;background:#f8fafc;color:#172033}
.topup-profile-header h2{color:#111827}
.topup-profile-content{background:radial-gradient(circle at 50% 0,rgba(14,165,233,.13),transparent 34%),#f4f7fb}
.topup-user-profile-card{background:linear-gradient(135deg,#38bdf8 0%,#0ea5e9 38%,#2563eb 72%,#172554 100%);box-shadow:0 26px 60px rgba(37,99,235,.2),0 10px 25px rgba(15,23,42,.12)}
.topup-user-profile-actions{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(105px,1fr);align-items:stretch;gap:9px;margin-top:14px}
.topup-user-profile-card .topup-user-profile-actions .topup-notification-btn,.topup-user-profile-card .topup-user-profile-actions .topup-user-logout-btn{box-sizing:border-box;width:100%;min-width:0;min-height:50px;margin:0}
.topup-user-profile-card .topup-user-profile-actions .topup-notification-btn{background:linear-gradient(135deg,#0ea5e9,#2563eb)}
.topup-user-profile-card .topup-user-profile-actions .topup-notification-btn.is-on{background:linear-gradient(135deg,#0369a1,#1d4ed8);color:#fff}
.topup-user-logged-in .topup-user-profile-actions .topup-user-logout-btn{display:block}
@media(max-width:380px){.topup-user-profile-actions{grid-template-columns:minmax(0,1.45fr) minmax(92px,1fr);gap:7px}.topup-user-profile-card .topup-user-profile-actions .topup-notification-btn,.topup-user-profile-card .topup-user-profile-actions .topup-user-logout-btn{font-size:8px}}
.topup-user-profile-stats b{font-size:12px;line-height:1.2}
@media(max-width:560px){.topup-user-profile-stats b{font-size:10px}.topup-user-profile-stats span{font-size:6px}}
.topup-history-card{display:none;box-sizing:border-box;width:min(100%,620px);margin:18px auto 28px;padding:20px;border:1px solid #d9e5ee;border-radius:28px;background:#fff;box-shadow:0 18px 44px rgba(15,23,42,.1);color:#0f172a}
.topup-user-profile-card:not([hidden]) ~ .topup-history-card{display:block}
.topup-user-profile-card[hidden] ~ .topup-history-card{display:none!important}
.topup-history-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.topup-history-head small{display:block;color:#0284c7;font-size:7px;font-weight:1000;letter-spacing:.16em}.topup-history-head h3{margin:4px 0 0;font-size:16px;font-weight:1000}.topup-history-head>span{padding:6px 9px;border-radius:999px;background:#e0f2fe;color:#0369a1;font-size:7px;font-weight:1000;letter-spacing:.08em}
.topup-history-columns{display:grid;grid-template-columns:1.1fr .8fr .7fr 1.35fr;gap:6px;margin-top:17px;padding:10px 9px;border-radius:11px;background:#f1f5f9;color:#64748b;font-size:7px;font-weight:1000;text-align:center}.topup-history-columns span:first-child{text-align:left}
.topup-history-empty{display:grid;place-items:center;padding:27px 12px 20px;text-align:center}.topup-history-empty i{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,#0ea5e9,#2563eb);color:#fff;font-size:16px;font-style:normal;box-shadow:0 8px 18px rgba(37,99,235,.22)}.topup-history-empty strong{margin-top:10px;color:#0f172a;font-size:11px;font-weight:1000;letter-spacing:.1em}.topup-history-empty p{margin:6px 0 0;color:#94a3b8;font-size:9px;font-weight:700;line-height:1.5}
.topup-history-row{border-bottom:1px solid #e2e8f0}.topup-history-row:last-child{border-bottom:0}.topup-history-row>summary{display:grid;grid-template-columns:1.1fr 1.8fr .7fr 1.1fr;align-items:center;gap:7px;padding:12px 9px;list-style:none;cursor:pointer}.topup-history-row>summary::-webkit-details-marker{display:none}.topup-history-row summary span{min-width:0}.topup-history-row summary b,.topup-history-row summary small{display:block;overflow:hidden;text-overflow:ellipsis}.topup-history-row summary b{color:#172033;font-size:9px;white-space:nowrap}.topup-history-row summary small{margin-top:3px;color:#7b8ba0;font-size:7px;white-space:nowrap}.topup-history-row summary>strong{text-align:center;color:#0f172a;font-size:9px}.topup-history-row summary>em{padding:5px 4px;border-radius:999px;background:#e0f2fe;color:#0369a1;text-align:center;font-size:6px;font-style:normal;font-weight:1000}.topup-history-row.is-completed summary>em{background:#dcfce7;color:#15803d}.topup-history-row.is-failed summary>em,.topup-history-row.is-refunded summary>em{background:#ffe4e6;color:#be123c}.topup-history-row>div{display:grid;gap:7px;margin:0 9px 11px;padding:10px;border-radius:11px;background:#f1f5f9}.topup-history-row>div p{display:flex;justify-content:space-between;gap:12px;margin:0;color:#64748b;font-size:7px;font-weight:900}.topup-history-row>div b{max-width:68%;color:#172033;text-align:right;overflow-wrap:anywhere}
.topup-history-row.is-submitting summary>em,.topup-history-row.is-processing summary>em{display:flex;align-items:center;justify-content:center;gap:5px}.topup-history-row.is-submitting summary>em::before,.topup-history-row.is-processing summary>em::before{content:"";width:7px;height:7px;border:2px solid rgba(3,105,161,.25);border-top-color:#0284c7;border-radius:50%;animation:topup-history-spin .75s linear infinite}.topup-history-row.just-completed summary>em{animation:topup-history-done 1.15s ease-out}.topup-history-row.just-completed{animation:topup-history-row-done 1.15s ease-out}@keyframes topup-history-spin{to{transform:rotate(360deg)}}@keyframes topup-history-done{0%{transform:scale(.82);box-shadow:0 0 0 0 rgba(34,197,94,.5)}55%{transform:scale(1.08);box-shadow:0 0 0 8px rgba(34,197,94,0)}100%{transform:scale(1)}}@keyframes topup-history-row-done{0%,100%{background:transparent}35%{background:rgba(220,252,231,.85)}}
@media(max-width:560px){.topup-history-card{margin-top:14px;padding:16px;border-radius:23px}.topup-history-head h3{font-size:14px}.topup-history-columns{grid-template-columns:1fr 1.55fr .6fr 1fr;padding-inline:6px;font-size:6px}.topup-history-row>summary{grid-template-columns:1fr 1.55fr .6fr 1fr;padding-inline:6px}.topup-history-row summary b{font-size:8px}.topup-history-row summary>strong{font-size:8px}}
.topup-user-wallet-card{position:relative;box-sizing:border-box;width:min(100%,620px);min-height:158px;margin:18px auto 0;padding:22px;overflow:hidden;border:1px solid #bae6fd;border-radius:28px;background:linear-gradient(135deg,#082f49 0%,#075985 46%,#2563eb 100%);box-shadow:0 18px 44px rgba(37,99,235,.18);color:#fff}.topup-user-wallet-card[hidden]{display:none!important}.topup-wallet-copy{position:relative;z-index:2;max-width:72%}.topup-wallet-copy small{display:block;color:#67e8f9;font-size:8px;font-weight:1000;letter-spacing:.17em}.topup-wallet-copy span{display:block;margin-top:15px;color:#bae6fd;font-size:8px;font-weight:900;letter-spacing:.1em}.topup-wallet-copy strong{display:block;margin-top:3px;font-size:28px;font-weight:1000;line-height:1.1}.topup-wallet-copy p{margin:8px 0 0;color:#dbeafe;font-size:9px;font-weight:650}.topup-wallet-icon{position:absolute;right:20px;top:20px;width:53px;height:53px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.2);border-radius:18px;background:rgba(255,255,255,.1);color:#cffafe}.topup-wallet-icon svg{width:27px;height:27px}.topup-wallet-button{position:relative;z-index:2;min-height:42px;margin-top:17px;padding:0 21px;border:1px solid rgba(255,255,255,.65);border-radius:999px;background:#fff;color:#075985;font-size:9px;font-weight:1000;letter-spacing:.04em;box-shadow:0 8px 20px rgba(3,7,18,.18)}.topup-wallet-button:active{transform:scale(.98)}@media(max-width:560px){.topup-user-wallet-card{min-height:148px;margin-top:14px;padding:18px;border-radius:23px}.topup-wallet-copy strong{font-size:24px}.topup-wallet-icon{right:17px;top:17px;width:46px;height:46px;border-radius:15px}.topup-wallet-icon svg{width:23px;height:23px}.topup-wallet-button{min-height:39px;margin-top:14px}}
.topup-google-profile-card{box-sizing:border-box;width:min(100%,620px);margin:18px auto 0;padding:21px;border:1px solid #cbddeb;border-radius:25px;background:#fff;color:#0f172a;box-shadow:0 16px 38px rgba(15,23,42,.1)}.topup-google-profile-card[hidden]{display:none!important}.topup-google-profile-card>header{display:flex;align-items:start;justify-content:space-between;gap:12px}.topup-google-profile-card>header small{color:#0284c7;font-size:7px;font-weight:1000;letter-spacing:.14em}.topup-google-profile-card>header h3{margin:4px 0 0;font-size:17px;font-weight:1000}.topup-google-profile-card>header>span{padding:6px 8px;border-radius:999px;background:#e0f2fe;color:#0369a1;font-size:7px;font-weight:1000}.topup-google-profile-card>p{margin:8px 0 0;color:#64748b;font-size:9px;font-weight:700}.topup-google-profile-card form{display:grid;gap:11px;margin-top:16px}.topup-google-profile-card label{display:grid;gap:6px}.topup-google-profile-card label>span{color:#64748b;font-size:8px;font-weight:900}.topup-google-profile-card label em{color:#94a3b8;font-style:normal;font-weight:700}.topup-google-profile-row{display:grid;grid-template-columns:.8fr 1.2fr;gap:10px}.topup-google-profile-card input,.topup-google-profile-card select{box-sizing:border-box;width:100%;height:43px;padding:0 12px;border:1px solid #d6e1ea;border-radius:11px;outline:0;background:#f8fafc;color:#0f172a;font-size:11px;font-weight:800}.topup-google-profile-card input:focus,.topup-google-profile-card select:focus{border-color:#0ea5e9;box-shadow:0 0 0 3px rgba(14,165,233,.1)}.topup-google-profile-card output{min-height:12px;color:#0284c7;font-size:8px;font-weight:900}.topup-google-profile-card output.is-error{color:#e11d48}.topup-google-profile-card form>button{height:44px;border:0;border-radius:12px;background:linear-gradient(135deg,#0ea5e9,#2563eb);color:#fff;font-size:9px;font-weight:1000}.topup-google-profile-card form>button:disabled{cursor:wait;opacity:.6}@media(max-width:560px){.topup-google-profile-card{margin-top:14px;padding:17px;border-radius:22px}.topup-google-profile-card>header h3{font-size:15px}.topup-google-profile-row{grid-template-columns:1fr}}
.topup-profile-content{padding-top:16px}
.topup-user-profile-card{margin-top:12px}
@media(max-width:560px){.topup-profile-content{padding-top:8px}.topup-user-profile-card{margin-top:7px}}

/* Keep the GNEX Esport promo aligned with the other cards on iPhone. */
@media (max-width:767px){
  .gnex-esport-card-button{width:100%;aspect-ratio:3264 / 1077;min-height:0;transform:none}
  .gnex-esport-card-bg{position:absolute;left:0;top:-34.9%;width:100%;height:170.5%;object-fit:cover;object-position:center}
  .gnex-esport-card-logo,.gnex-esport-card-logo.is-repeat{left:13%;top:7%;width:25%;max-width:none;min-width:0}
  .gnex-esport-card-kelly{left:12%;top:7%;bottom:auto;width:27%;max-height:84%}
}

/* Pilihan game ringkas ala katalog ikon. */
.price-card-grid:has(.game-icon-card){grid-template-columns:repeat(auto-fill,minmax(120px,145px))!important;align-items:start;justify-content:start;gap:16px!important}
.game-icon-card{position:relative;display:flex;height:198px;min-width:0;overflow:hidden;flex-direction:column;border:1px solid rgba(34,211,238,.3);border-radius:17px;background:#081426;color:#fff;text-decoration:none;box-shadow:0 12px 28px rgba(0,0,0,.22);transition:transform .2s ease,color .2s ease,border-color .2s ease}
.game-icon-card>img{display:block;width:100%;aspect-ratio:1/1;flex:0 0 auto;border:0;border-radius:0;object-fit:cover;background:#07111f;transition:filter .2s ease}
.game-icon-card>strong{box-sizing:border-box;height:30px;padding:6px 10px 0;overflow:hidden;font-size:12px;font-weight:900;line-height:1.05}
.game-icon-card>span{box-sizing:border-box;height:23px;margin-top:auto;padding:3px 10px 7px;color:#7f91a8;font-size:9px;font-weight:700}
.game-icon-meta{display:flex;align-items:center;justify-content:space-between;gap:4px;min-width:0;margin-top:auto}.game-icon-meta i{overflow:hidden;font-style:normal;text-overflow:ellipsis;white-space:nowrap}.game-icon-meta small{flex:0 0 auto;color:#45cffa;font-size:6px;font-weight:900;white-space:nowrap}
.game-icon-card:hover{transform:translateY(-4px);color:#42d8ff}
.game-icon-card:hover{border-color:#42d8ff;box-shadow:0 15px 34px rgba(34,211,238,.14)}
.game-icon-card:hover>img{filter:brightness(1.06)}
.game-icon-card.is-coming-soon{cursor:not-allowed;opacity:1}
.game-icon-card-instant{border-color:rgba(66,216,255,.68);box-shadow:0 12px 28px rgba(19,136,255,.16)}
.game-icon-cover-link{position:absolute;z-index:2;inset:0;border-radius:inherit}
.game-icon-actions{display:flex;align-items:center;padding:0 9px 9px;margin-top:auto}
.game-icon-actions>a,.game-icon-actions summary{display:flex;align-items:center;justify-content:center;height:24px;border:1px solid rgba(66,216,255,.65);border-radius:7px;background:#0d8fea;color:#fff;font-size:8px;font-weight:950;letter-spacing:.08em;text-decoration:none;cursor:pointer}
.game-icon-actions>a{flex:1;padding:0 8px}
.game-icon-help{position:absolute;z-index:4;top:8px;right:8px}.game-icon-help summary{display:grid;place-items:center;width:24px;height:24px;border:1px solid rgba(66,216,255,.75);border-radius:7px;background:rgba(2,10,22,.9);color:#67e8f9;font-size:10px;font-weight:1000;list-style:none;cursor:pointer;box-shadow:0 5px 15px rgba(0,0,0,.35)}.game-icon-help summary::-webkit-details-marker{display:none}.game-icon-help p{position:absolute;top:29px;right:0;width:126px;margin:0;padding:8px;border:1px solid rgba(66,216,255,.55);border-radius:8px;background:#020a16;color:#dff8ff;font-size:8px;font-weight:700;line-height:1.35;box-shadow:0 10px 25px rgba(0,0,0,.55)}
@media(max-width:767px){
  .price-card-grid:has(.game-icon-card){grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important}
  .game-icon-card{border-radius:14px}
  .game-icon-card{height:auto;min-height:0}
  .game-icon-card>strong{height:28px;padding:5px 8px 0;font-size:10px}
  .game-icon-card>span{height:21px;padding:3px 8px 6px;font-size:8px}
  .game-icon-actions{padding:0 7px 8px;gap:5px}
  .game-icon-actions>a{height:22px}
  .game-icon-help{top:6px;right:6px}.game-icon-help summary{width:22px;height:22px}.game-icon-help p{top:27px;width:116px}
  .game-icon-meta small{font-size:5px}
}

/* =========================================================
   TOPUP WALLET TNG MODAL
   FINAL CLEAN VERSION
   ========================================================= */

body.wallet-modal-open{
  overflow:hidden;
}

.topup-wallet-modal{
  position:fixed;
  z-index:10050;
  inset:0;

  display:flex;
  align-items:center;
  justify-content:center;

  box-sizing:border-box;
  padding:16px;

  overflow:hidden;
  isolation:isolate;
}

.topup-wallet-modal[hidden]{
  display:none!important;
}

/* Backdrop tidak menerima touch */
.topup-wallet-modal-backdrop{
  position:absolute;
  inset:0;

  background:rgba(2,6,12,.92);

  pointer-events:none;
}

/* Main card */
.topup-wallet-modal-card{
  position:relative;
  z-index:2;

  box-sizing:border-box;

  width:min(100%,460px);
  max-height:calc(100svh - 32px);

  overflow-y:auto;
  overflow-x:hidden;

  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;

  padding:26px 22px;

  border:1px solid rgba(34,211,238,.35);
  border-radius:24px;

  background:linear-gradient(
    165deg,
    #071424,
    #030a14
  );

  box-shadow:
    0 24px 60px rgba(0,0,0,.65),
    0 0 40px rgba(14,165,233,.12);

  color:#fff;

  pointer-events:auto;
}

/* Close button */
.topup-wallet-modal-close{
  position:absolute;
  top:16px;
  right:16px;

  z-index:20;

  width:34px;
  height:34px;

  display:grid;
  place-items:center;

  border:1px solid rgba(255,255,255,.15);
  border-radius:50%;

  background:rgba(255,255,255,.05);

  color:#94a3b8;

  font-size:20px;
  line-height:1;

  cursor:pointer;
  touch-action:manipulation;

  transition:
    color .15s,
    background .15s,
    border-color .15s;
}

.topup-wallet-modal-close:hover{
  color:#fff;
  background:rgba(255,255,255,.15);
  border-color:#38bdf8;
}

/* Badge */
.topup-wallet-modal-badge{
  display:inline-flex;
  align-items:center;
  gap:7px;

  padding:4px 10px;

  border:1px solid rgba(14,165,233,.4);
  border-radius:999px;

  background:rgba(14,165,233,.12);

  color:#38bdf8;

  font-size:9px;
  font-weight:900;
  letter-spacing:.08em;
}

.topup-wallet-modal-badge img{
  width:18px;
  height:18px;
  object-fit:contain;
}

/* Title */
.topup-wallet-modal-card h2{
  margin:12px 0 4px;

  color:#f8fafc;

  font-size:20px;
  font-weight:900;
}

.topup-wallet-modal-sub{
  margin:0 0 18px;

  color:#94a3b8;

  font-size:11px;
  line-height:1.45;
}

.topup-wallet-modal-sub strong{
  color:#38bdf8;
}

/* Form */
.topup-wallet-form{
  display:grid;
  gap:13px;
}

.topup-wallet-form label{
  display:grid;
  gap:6px;
}

.topup-wallet-form label>span{
  color:#cbd5e1;

  font-size:11px;
  font-weight:800;
}

/* Input */
.topup-wallet-form input{
  position:relative;
  z-index:3;

  box-sizing:border-box;

  width:100%;
  height:44px;

  padding:0 13px;

  border:1px solid #1e293b;
  border-radius:12px;

  outline:0;

  background:#06101d;
  color:#fff;

  font-size:16px;
  font-weight:700;

  pointer-events:auto!important;
  touch-action:manipulation;

  -webkit-user-select:text;
  user-select:text;

  -webkit-appearance:none;
  appearance:none;

  transition:
    border-color .15s,
    box-shadow .15s;
}

.topup-wallet-form input:focus{
  border-color:#38bdf8;

  box-shadow:
    0 0 0 3px rgba(56,189,248,.15);
}

/* readonly untuk nama acc GNEX */
.topup-wallet-form input[readonly]{
  color:#7dd3fc;
  background:#07182a;

  cursor:default;

  -webkit-user-select:none;
  user-select:none;
}

/* Amount */
.topup-wallet-amount-wrap{
  position:relative;

  display:flex;
  align-items:center;
}

.topup-wallet-amount-wrap em{
  position:absolute;
  left:13px;
  z-index:5;

  color:#38bdf8;

  font-style:normal;
  font-size:13px;
  font-weight:900;

  pointer-events:none;
}

.topup-wallet-amount-wrap input{
  padding-left:42px;

  font-size:16px;
  font-weight:900;
}

/* Quick amount */
.topup-wallet-chips{
  display:flex;
  flex-wrap:wrap;

  gap:6px;

  margin-top:-2px;
}

.topup-wallet-chips button{
  padding:6px 12px;

  border:1px solid #1e3a5f;
  border-radius:999px;

  background:#0a1a2e;

  color:#7dd3fc;

  font-size:11px;
  font-weight:800;

  cursor:pointer;
  touch-action:manipulation;

  transition:
    border-color .15s,
    background .15s,
    color .15s,
    transform .15s;
}

.topup-wallet-chips button:hover{
  border-color:#38bdf8;
  background:rgba(56,189,248,.18);
  color:#fff;
}

.topup-wallet-chips button:active{
  transform:scale(.97);
}

/* Status */
.topup-wallet-status{
  min-height:16px;

  color:#38bdf8;

  font-size:11px;
  font-weight:800;

  text-align:center;
}

/* Submit */
.topup-wallet-submit-btn{
  height:48px;

  display:flex;
  align-items:center;
  justify-content:center;

  gap:8px;

  border:0;
  border-radius:14px;

  background:linear-gradient(
    90deg,
    #0284c7,
    #06b6d4
  );

  color:#020617;

  font-size:14px;
  font-weight:950;
  letter-spacing:.04em;

  cursor:pointer;
  touch-action:manipulation;

  box-shadow:
    0 10px 24px rgba(6,182,212,.3);

  transition:
    transform .15s,
    box-shadow .15s;
}

.topup-wallet-submit-btn:hover{
  transform:translateY(-1px);

  box-shadow:
    0 14px 28px rgba(6,182,212,.4);
}

.topup-wallet-submit-btn:active{
  transform:scale(.98);
}

.topup-wallet-submit-btn:disabled{
  opacity:.6;
  cursor:wait;
}

/* Note */
.topup-wallet-modal-note{
  margin:4px 0 0;

  color:#64748b;

  font-size:10px;
  line-height:1.45;

  text-align:center;
}

/* Request list */
.topup-wallet-request-list{
  display:grid;
  gap:6px;
}

.topup-wallet-request{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:10px;

  padding:9px 11px;

  border:1px solid #17263a;
  border-radius:10px;

  background:#050d18;

  color:#94a3b8;

  font-size:9px;
}

.topup-wallet-request strong{
  display:block;

  color:#e2e8f0;

  font-size:10px;
}

.topup-wallet-request small{
  display:block;

  margin-top:2px;

  color:#64748b;
}

.topup-wallet-request b{
  padding:4px 7px;

  border-radius:999px;

  font-size:8px;

  white-space:nowrap;
}

.topup-wallet-request b.pending{
  background:#422006;
  color:#fbbf24;
}

.topup-wallet-request b.confirmed{
  background:#052e25;
  color:#4ade80;
}

.topup-wallet-request b.rejected{
  background:#3f1016;
  color:#fb7185;
}


/* =========================================================
   MOBILE FIX
   ========================================================= */

@media(max-width:767px){

  .topup-wallet-modal{
    align-items:flex-start;
    justify-content:center;

    overflow-y:auto;

    padding-top:max(
      12px,
      env(safe-area-inset-top)
    );

    padding-right:12px;

    padding-bottom:max(
      12px,
      env(safe-area-inset-bottom)
    );

    padding-left:12px;
  }

  .topup-wallet-modal-card{
    width:100%;

    max-height:calc(
      100svh
      - 24px
      - env(safe-area-inset-top)
      - env(safe-area-inset-bottom)
    );

    padding:20px 16px;

    border-radius:20px;
  }

  .topup-wallet-modal-card h2{
    font-size:18px;
  }

  .topup-wallet-form{
    padding-bottom:12px;
  }

}


/* =========================================================
   IOS / SAFARI FIX
   ========================================================= */

@supports (-webkit-touch-callout:none){

  .topup-wallet-modal{
    min-height:100svh;
  }

  .topup-wallet-modal-card{
    -webkit-overflow-scrolling:touch;
  }

  .topup-wallet-form input{
    font-size:16px;
  }

}

/* =========================================
   IOS / IPHONE WALLET MODAL FIX
   ========================================= */

@supports (-webkit-touch-callout:none){

  body.wallet-modal-open{
    overflow:hidden!important;
  }

  .topup-wallet-modal{
    position:fixed!important;
    inset:0!important;

    min-height:0!important;
    height:100dvh!important;

    overflow-y:auto!important;
    overflow-x:hidden!important;

    align-items:flex-start!important;
    justify-content:center!important;

    padding:
      max(12px,env(safe-area-inset-top))
      12px
      max(20px,env(safe-area-inset-bottom))!important;
  }

  .topup-wallet-modal-card{
    position:relative!important;

    width:100%!important;
    max-width:460px!important;

    max-height:none!important;
    height:auto!important;

    overflow:visible!important;

    margin:0 auto!important;

    -webkit-overflow-scrolling:auto!important;
  }

  .topup-wallet-form input{
    position:relative!important;

    z-index:10!important;

    font-size:16px!important;

    pointer-events:auto!important;

    touch-action:auto!important;

    -webkit-user-select:text!important;
    user-select:text!important;

    -webkit-appearance:none;
    appearance:none;
  }

  .topup-wallet-form input:focus{
    outline:none!important;
  }

}
.profile-invite form{display:grid;gap:10px}.profile-invite form[hidden]{display:none}.profile-invite p{font-size:12px;line-height:1.65;color:#a6bbce}.profile-invite label{font-size:12px;color:#d2e8f8}.invite-code-dialog{width:min(420px,calc(100% - 32px));max-height:85dvh;margin:auto;padding:24px;border:1px solid #28647a;border-radius:20px;background:#07131f;color:#eefaff;box-shadow:0 25px 80px #0009}.invite-code-dialog::backdrop{background:#000b}.invite-code-form{display:grid;gap:16px}.invite-code-form h3{margin:0;font-size:22px}.invite-code-form p{margin:0;color:#a8c2d5;line-height:1.6;font-size:13px}.invite-code-form label{display:grid;gap:8px;font-size:13px}.invite-code-form input{padding:13px;border:1px solid #2b566a;border-radius:9px;background:#020d18;color:#fff;font-size:16px;width:100%;box-sizing:border-box}.invite-code-form button{padding:13px;border:0;border-radius:9px;background:#22d3ee;color:#031421;font-weight:800}.invite-code-form .invite-code-skip{background:#152b3b;color:#bcd8e8}.invite-code-form .invite-code-status{color:#fda4af}.invite-code-form button:disabled{opacity:.5}
.home-giveaway-promo{grid-column:1/-1;display:flex;align-items:center;gap:12px;padding:14px 16px;margin-bottom:8px;min-width:0;border:1px solid #226080;border-radius:14px;background:radial-gradient(ellipse at top left,#0d4479,transparent 75%),#08162c;color:#f7faff}.home-giveaway-promo>svg{width:46px;height:42px;flex-shrink:0;filter:drop-shadow(0 0 10px #22d3ee55)}.home-giveaway-promo>div{flex:1;min-width:0}.home-giveaway-promo small,.home-giveaway-promo strong,.home-giveaway-promo div>span{display:block}.home-giveaway-promo small{font-size:9px;letter-spacing:.1em;color:#67e8f9;font-weight:800}.home-giveaway-promo strong{font-family:"Barlow Condensed",Impact,sans-serif;font-size:26px;line-height:1.2;margin:3px 0}.home-giveaway-promo div>span{font-size:10px;color:#a5b4c8}.home-giveaway-promo>a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 16px;border-radius:5px 12px 5px 12px;background:linear-gradient(110deg,#147df2,#2abcec);color:#fff;text-decoration:none;font-size:12px;font-weight:900}.home-giveaway-promo>a:hover{filter:brightness(1.15)}.home-giveaway-promo>a:focus-visible{outline:2px solid #fff;outline-offset:3px}@media(max-width:360px){.home-giveaway-promo{padding:12px;gap:8px}.home-giveaway-promo>svg{width:32px}.home-giveaway-promo strong{font-size:22px}.home-giveaway-promo>a{padding:10px 12px}}

/* Animated profile asset supplied by the site owner. */
.bottom-nav-item .profile-nav-animation{display:block;width:30px;height:30px;object-fit:contain;border-radius:7px;flex-shrink:0}

/* Actual delivery progress, including partially fulfilled bundles. */
.topup-history-row.has-delivery summary>em{display:flex;flex-direction:column;gap:3px;border-radius:9px;padding:6px 3px;font-size:9px}
.topup-history-row.has-delivery summary>em::before{content:none;animation:none}
.topup-history-row.has-delivered summary>em{background:#dcfce7;color:#166534}
.topup-history-row summary .history-delivery-count{display:flex;align-items:center;justify-content:center;gap:3px;white-space:nowrap;font-variant-numeric:tabular-nums}
.history-diamond{width:12px;height:12px;flex-shrink:0;color:#0284c7}
.history-delivery-tick{font-style:normal;color:#16a34a;font-size:12px}
.topup-history-row summary>em>small{white-space:normal;overflow:visible;color:inherit;font-size:7px;line-height:1.3;margin:0;font-weight:600}
.history-delivery-items{font-size:8px}
#topup-google-link-controls{margin-top:14px}
#topup-google-link-controls label{margin-bottom:7px;font-size:11px;font-weight:700}
#topup-google-link-controls .topup-google-auth{margin-top:12px;max-width:100%;overflow:hidden}
.topup-history-row summary .history-delivery-processing{display:flex;align-items:center;justify-content:center;gap:5px}
.history-delivery-spinner{display:inline-block;flex-shrink:0;width:9px;height:9px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:topup-history-spin .75s linear infinite}
@media(prefers-reduced-motion:reduce){.history-delivery-spinner{animation:none}}
@media(max-width:380px){.topup-history-row.has-delivery summary>em{font-size:8px}.history-diamond{width:10px;height:10px}}

/* Google guidance matches the GNEX Laga account card. */
.topup-google-recommend{padding:12px;background:#073b43;border:1px solid #2a9e9b;border-radius:9px}
.topup-google-recommend>strong{display:block;font-size:10px;font-weight:700;letter-spacing:.7px;color:#84f5d9}
.topup-google-recommend>p{margin:7px 0;font-size:11px;line-height:1.5;color:#d4e9ed}
.topup-google-recommend .topup-google-auth{margin-top:10px;min-height:44px;max-width:100%}

/* Desktop navigation follows the GNEX Laga navigation style. */
.home-primary-nav{background:rgba(2,8,23,.96)!important;border-bottom-color:#15283f!important;backdrop-filter:blur(15px)}
.home-desktop-nav{gap:8px!important}
.home-desktop-nav>a,.home-desktop-nav>button{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:10px 16px!important;border:1px solid transparent!important;border-radius:9px!important;background:transparent!important;color:#a5b4c8!important;font:700 10px Inter,Arial,sans-serif!important;letter-spacing:.04em;box-shadow:none!important;white-space:nowrap;text-decoration:none}
.home-desktop-nav>a>svg,.home-desktop-nav>button>svg{display:none}
.home-desktop-nav>a:hover,.home-desktop-nav>button:hover{color:#33d7ff!important;border-color:#274867!important;background:#09192c!important}
.home-desktop-nav>button:first-child{border-color:#258cb3!important;background:#0b3046!important;color:#55ddff!important}
.home-desktop-nav>a[href^="https://wa.me/"]{border-color:#274867!important;color:#33d7ff!important}.home-gnex-people{background:#030c17;padding:32px 24px;border-top:1px solid #173347}.home-people-shell{max-width:1232px;margin:auto}.home-people-eyebrow{color:#56dbf8;font-size:9px;font-weight:800;letter-spacing:.17em}.home-people-shell h2{font-size:28px;font-weight:900;margin:8px 0 19px}.home-people-shell h2>span{color:#33d7ff}.home-people-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.home-person-card{display:flex;align-items:center;gap:18px;padding:12px 20px 0;border:1px solid #26536d;border-radius:17px;background:linear-gradient(120deg,#0d2c42,#081626);color:white;text-decoration:none;overflow:hidden;transition:border-color .2s}.home-person-card:hover{border-color:#42d9fa}.home-person-photo{width:85px;height:112px;overflow:hidden;flex:none}.home-person-photo img{display:block;width:145px;max-width:none;margin-left:-30px}.home-person-card:nth-child(2) .home-person-photo img{width:245px;margin-left:-80px;margin-top:-10px}.home-person-card small{color:#61dff7;font-size:9px;font-weight:800;letter-spacing:.15em}.home-person-card h3{font-size:17px;font-weight:900;margin:5px 0}.home-person-card p{font-size:11px;color:#a1bed0;margin:0 0 12px}.home-person-arrow{margin-left:auto;color:#65def7;font-size:23px}.home-person-card:focus-visible{outline:2px solid #40d9fa;outline-offset:3px}@media(max-width:600px){.home-gnex-people{padding:24px 20px}.home-people-shell h2{font-size:23px;margin-bottom:14px}.home-people-grid{grid-template-columns:1fr;gap:10px}.home-person-card{padding:8px 13px 0;gap:14px}.home-person-photo{height:90px;width:67px}.home-person-photo img{width:118px;margin-left:-26px}.home-person-card:nth-child(2) .home-person-photo img{width:200px;margin-left:-67px}.home-person-card h3{font-size:15px}.home-person-card p{font-size:10px}}
.game-icon-card .store-card-views{display:flex;align-items:center;gap:3px;padding:3px 7px 6px;color:#8fb3c8;pointer-events:none;line-height:1}.store-card-views svg{width:10px;height:10px;fill:none;stroke:#65cce4;stroke-width:1.5}.store-card-views small{font-size:7px;font-weight:500}

/* Promote animated card layers without changing layout during scroll. */
.performance-mode .tournament-card-character,.performance-mode .topup-card-item,.performance-mode .jersey-card-item,.performance-mode .gnex-esport-card-logo,.performance-mode .gnex-esport-card-kelly{will-change:transform,opacity}
.topup-wallet-request{flex-wrap:wrap}.wallet-payment-resume{flex:0 0 100%;display:grid;gap:5px;margin-top:7px}.wallet-payment-resume button{padding:9px 12px;border:1px solid #1ca9c4;border-radius:8px;background:#083143;color:#78eaff;font-size:11px;font-weight:700;cursor:pointer}.wallet-payment-resume button:disabled{opacity:.55;cursor:wait}.wallet-payment-resume small{font-size:10px;color:#91a5b6}

@media(min-width:768px){body .bottom-app-nav{display:none!important}}

/* Avoid sampling the entire desktop background while scrolling a modal. */
@media(min-width:768px){
 .performance-mode .modal-backdrop,.performance-mode .home-primary-nav{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
 .performance-mode .modal-backdrop{background:#020610}
 .performance-mode .hero-red-motion{animation:none!important}
 body.modal-open .hero-glow *,body.modal-open .hero-glow *::before,body.modal-open .hero-glow *::after,
 body.topup-chat-open .hero-glow *,body.topup-chat-open .hero-glow *::before,body.topup-chat-open .hero-glow *::after{animation-play-state:paused!important}
 .performance-mode .modal-panel{isolation:isolate;overscroll-behavior:contain}
}

/* Desktop masked border sweeps repaint on every frame; keep a static cyan edge. */
@media(min-width:768px){
 .performance-mode .electric-card::before,
 .performance-mode .tournament-card-button::before,.performance-mode .topup-card-button::before,
 .performance-mode .jersey-card-button::before,.performance-mode .gnex-esport-card-button::before{animation:none!important;background-size:100% 100%!important}
 .performance-mode .tournament-card-button::after,.performance-mode .topup-card-button::after,
 .performance-mode .jersey-card-button::after,.performance-mode .gnex-esport-card-button::after{animation:none!important;filter:none!important}
 .performance-mode .gnex-esport-card-button{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
 html.is-desktop-scrolling .hero-glow *,html.is-desktop-scrolling .hero-glow *::before,html.is-desktop-scrolling .hero-glow *::after{animation-play-state:paused!important}
 .performance-mode .promo-slide{box-shadow:none!important}
}

/* Lightweight tournament transition: composite opacity and transforms only. */
.tour-transition-clone{will-change:transform,opacity;box-shadow:none!important;backface-visibility:hidden}
.tour-transition-clone *{animation:none!important;backdrop-filter:none!important;filter:none!important;box-shadow:none!important}
.tour-title-type{clip-path:none;border-right:0;text-shadow:0 0 12px #67f1fd25;animation:tourTitleSmooth .38s cubic-bezier(.22,1,.36,1) both;will-change:transform,opacity}
@keyframes tourTitleSmooth{from{opacity:0;transform:translate3d(0,12px,0) scale(.97)}to{opacity:1;transform:translate3d(0,0,0) scale(1)}}