/* Top-up hero: same card as catalog pages, with a moving wall of game icons (test, 2026-10-01) */
.topup-page>.catalog-hero.tph{margin-top:22px!important}
.catalog-hero.tph{background:linear-gradient(#0f0b24,#0f0b24) padding-box,linear-gradient(135deg,rgba(124,92,255,.75),rgba(255,90,122,.45) 55%,rgba(124,92,255,.2)) border-box!important;color:#fff}
.tph-wall{position:absolute;inset:0;z-index:-2;display:flex;flex-direction:column;justify-content:center;gap:12px;direction:ltr;transform:rotate(-8deg) scale(1.15);transform-origin:30% 50%;-webkit-mask-image:linear-gradient(90deg,#000 0,#000 45%,transparent 72%);mask-image:linear-gradient(90deg,#000 0,#000 45%,transparent 72%)}
[dir=ltr] .tph-wall{-webkit-mask-image:linear-gradient(270deg,#000 0,#000 45%,transparent 72%);mask-image:linear-gradient(270deg,#000 0,#000 45%,transparent 72%);transform-origin:70% 50%}
.tph-row{overflow:hidden}
.tph-track{display:flex;gap:12px;width:max-content;animation:tphScroll 38s linear infinite}
.tph-row-1 .tph-track{animation-direction:reverse;animation-duration:44s}
.tph-row-2 .tph-track{animation-duration:52s}
.tph-wall:hover .tph-track{animation-play-state:paused}
@keyframes tphScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tph-icon{flex:0 0 auto;width:62px;height:62px;padding:0;border:1px solid rgba(255,255,255,.14);border-radius:16px;background:#1a1538;overflow:hidden;cursor:pointer;box-shadow:0 8px 20px rgba(0,0,0,.4);transition:transform .2s,border-color .2s,box-shadow .2s}
.tph-icon img{width:100%;height:100%;object-fit:cover;display:block}
.tph-icon:hover,.tph-icon:focus-visible{transform:translateY(-3px) scale(1.06);border-color:#b9a8ff;box-shadow:0 10px 26px rgba(124,92,255,.45);outline:none}
.catalog-hero.tph .ffh-copy{margin-inline-start:0}
.catalog-hero.tph .ffh-copy::before{inset:-90px -40px -90px -120px;background:linear-gradient(270deg,rgba(15,11,36,.97) 55%,rgba(15,11,36,.75) 78%,transparent)}
[dir=ltr] .catalog-hero.tph .ffh-copy::before{inset:-90px -120px -90px -40px;background:linear-gradient(90deg,rgba(15,11,36,.97) 55%,rgba(15,11,36,.75) 78%,transparent)}
@media(max-width:680px){
  .catalog-hero.tph{flex-direction:column;align-items:stretch!important;justify-content:flex-end;min-height:210px!important;padding-top:96px!important}
  .tph-wall{inset:0 0 auto 0;height:96px;transform:none;gap:8px;padding-top:10px;-webkit-mask-image:linear-gradient(180deg,#000 60%,transparent);mask-image:linear-gradient(180deg,#000 60%,transparent)}
  .tph-row-1,.tph-row-2{display:none}
  .tph-icon{width:52px;height:52px;border-radius:13px}
  .catalog-hero.tph .ffh-copy::before{inset:-20px -20px -24px -20px;background:linear-gradient(0deg,rgba(15,11,36,.97) 60%,transparent)}
}
@media(prefers-reduced-motion:reduce){.tph-track{animation:none}}
.catalog-hero.tph>.tph-wall{position:absolute!important;inset:0!important;margin:0!important;padding:0!important;background:none!important;border:0!important;max-width:none!important;width:auto!important}
@media(max-width:680px){.catalog-hero.tph>.tph-wall{inset:0 0 auto 0!important;height:96px;padding-top:10px!important}}

/* Market tabs as a small segmented switch (2026-10-01) */
.topup-page .market-tabs{display:inline-flex!important;grid-template-columns:none!important;gap:2px!important;margin:16px 0 0!important;padding:3px;border-radius:999px;border:1px solid rgba(169,163,212,.28);background:#120e2a}
.topup-page .market-tabs button{display:inline-flex!important;grid-template-columns:none!important;align-items:center;gap:7px!important;padding:6px 14px!important;min-height:0!important;border:0!important;border-radius:999px!important;background:transparent!important;box-shadow:none!important;color:#a9a3d4!important;font:inherit;font-size:.8rem;font-weight:700;text-align:center!important;transition:background .2s,color .2s}
.topup-page .market-tabs button>span{width:auto!important;height:auto!important;margin:0!important;background:none!important;border-radius:0!important;font-size:.95rem!important}
.topup-page .market-tabs button>div{display:block!important}
.topup-page .market-tabs button strong{font-weight:700;font-size:.8rem}
.topup-page .market-tabs button small{display:none!important}
.topup-page .market-tabs button:hover{color:#fff!important}
.topup-page .market-tabs button.active{background:linear-gradient(135deg,#7c5cff,#ff5a7a)!important;color:#fff!important;box-shadow:0 6px 16px rgba(124,92,255,.35)!important}
.topup-page .market-tabs button:focus-visible{outline:2px solid #b9a8ff;outline-offset:2px}

/* Sharper icons: no rotate/scale on the wall (2026-10-01) */
.catalog-hero.tph>.tph-wall{transform:none!important}
.tph-track{will-change:transform;backface-visibility:hidden}
.tph-icon img{image-rendering:auto;backface-visibility:hidden}

/* Compact game & app tiles (2026-10-01) */
.topup-page .topup-section-title{margin:18px 0 10px!important;gap:8px!important}
.topup-page .topup-section-title>span{width:24px!important;height:24px!important;border-radius:7px!important;font-size:.62rem!important;background:rgba(124,92,255,.2)!important;color:#cfc3ff!important}
.topup-page .topup-section-title small{display:none}
.topup-page .topup-section-title h2{margin:0!important;font-size:1.05rem!important;font-weight:800}
.topup-page .games-market-grid,.topup-page .apps-market-grid{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(112px,1fr))!important;gap:10px!important}
.topup-page .games-market-grid .game-choice{position:relative;width:auto!important;display:flex!important;flex-direction:column;align-items:center;gap:7px!important;padding:12px 8px 10px!important;border-radius:16px!important;border:1px solid rgba(169,163,212,.2)!important;background:#161233!important;box-shadow:none!important;text-align:center!important;transition:border-color .2s,transform .2s,background .2s}
.topup-page .games-market-grid .game-choice img{width:56px!important;height:56px!important;border-radius:14px!important;box-shadow:0 6px 16px rgba(0,0,0,.35)}
.topup-page .games-market-grid .game-choice>span{align-items:center;gap:1px}
.topup-page .games-market-grid .game-choice strong{font-size:.78rem;line-height:1.3;color:#fff}
.topup-page .games-market-grid .game-choice small{font-size:.64rem;color:#a9a3d4}
.topup-page .games-market-grid .game-choice>b{position:absolute;top:7px;inset-inline-end:7px;padding:2px 7px!important;font-size:.58rem!important;border-radius:999px;background:rgba(43,220,143,.16)!important;color:#6ff0b4!important}
.topup-page .games-market-grid .game-choice:hover{transform:translateY(-2px);border-color:rgba(124,92,255,.6)!important}
.topup-page .games-market-grid .game-choice.active{border-color:#7c5cff!important;background:linear-gradient(160deg,rgba(124,92,255,.22),rgba(255,90,122,.08)),#161233!important;box-shadow:0 0 0 1px #7c5cff inset!important}
.topup-page .apps-market-grid>button{padding:12px 8px 10px!important;gap:6px!important;border-radius:16px!important;border:1px solid rgba(169,163,212,.2)!important;background:#161233!important}
.topup-page .apps-market-grid .market-app-icon{width:56px!important;height:56px!important;border-radius:14px!important}
.topup-page .apps-market-grid strong{font-size:.78rem}
.topup-page .apps-market-grid small{font-size:.64rem}
@media(max-width:560px){.topup-page .games-market-grid,.topup-page .apps-market-grid{grid-template-columns:repeat(3,1fr)!important;gap:8px!important}.topup-page .games-market-grid .game-choice small{display:none}.topup-page .games-market-grid .game-choice img{width:50px!important;height:50px!important}}
.topup-page .games-market-grid,.topup-page .apps-market-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))!important}
.topup-page .games-market-grid .game-choice{padding:20px 6px 10px!important}
.topup-page .games-market-grid .game-choice>b{top:5px!important;inset-inline-end:5px!important;font-size:.55rem!important;padding:1px 6px!important}
@media(max-width:560px){.topup-page .games-market-grid,.topup-page .apps-market-grid{grid-template-columns:repeat(3,1fr)!important}}
.catalog-hero.tph[hidden],.topup-page .market-tabs[hidden]{display:none!important}
.tph-icon[data-hero-type="app"]{background:#fff}
.tph-icon[data-hero-type="app"] img[src$=".svg"]{object-fit:contain;padding:10px;background:#000}
