/* BILSTORE_CATALOG_MOBILE_V1
 * Shared by every Top Up Games card, including cards added during catalog sync.
 * Keep desktop rules and the existing click targets intact.
 */
@media (max-width: 900px) {
  #games.poster-grid[data-category="topup"],
  #posterWall.poster-wall[data-category="topup"] {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
    align-items: stretch;
  }
  #games .product-poster.reference-card.topup-game-card,
  #posterWall .product-poster.reference-card.topup-game-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    width: 100%;
    min-width: 0;
    min-height: 0;
    height: auto;
    aspect-ratio: auto;
    padding: 0;
    gap: 0;
    border-radius: 14px;
    border-color: #a6658266;
    background: linear-gradient(150deg, #422132, #291b26);
    box-shadow: 0 6px 18px #00000024;
    text-align: left;
    -webkit-tap-highlight-color: #ee92bc24;
  }
  #games .topup-game-card::before,
  #posterWall .topup-game-card::before {
    display: none;
  }
  #games .topup-game-card .product-thumbnail,
  #posterWall .topup-game-card .product-thumbnail {
    position: relative;
    display: block;
    flex: 0 0 auto;
    width: 100%;
    height: 0;
    min-height: 0;
    /* A ratio box also reserves artwork space in older iPhone Safari. */
    padding: 75% 0 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: #281726;
    box-shadow: none;
    overflow: hidden;
  }
  #games .topup-game-card .product-picture,
  #posterWall .topup-game-card .product-picture {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    object-fit: cover;
    object-position: center 24%;
    transform: none;
  }
  #games .topup-game-card .product-picture.is-logo,
  #posterWall .topup-game-card .product-picture.is-logo {
    padding: 14%;
    object-fit: contain;
    object-position: center;
  }
  #games .reference-card.topup-game-card .product-copy,
  #posterWall .reference-card.topup-game-card .product-copy {
    display: flex;
    flex: 1 0 auto;
    width: 100%;
    min-width: 0;
    align-items: flex-start;
    gap: 6px;
    padding: 12px;
    text-align: left;
  }
  #games .reference-card.topup-game-card .product-name,
  #posterWall .reference-card.topup-game-card .product-name {
    width: 100%;
    min-width: 0;
    min-height: 2.7em;
    font-size: 15px !important;
    line-height: 1.35;
    font-weight: 600;
    letter-spacing: normal;
    text-align: left;
    text-wrap: wrap;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
  }
  #games .reference-card.topup-game-card .product-availability,
  #posterWall .reference-card.topup-game-card .product-availability {
    width: 100%;
    min-height: 2.9em;
    margin-top: auto;
    color: #e9c9db;
    font-size: 13px;
    line-height: 1.45;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}
@media (max-width: 600px) {
  #games.poster-grid[data-category="topup"],
  #posterWall.poster-wall[data-category="topup"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  #games .reference-card.topup-game-card .product-name,
  #posterWall .reference-card.topup-game-card .product-name {
    font-size: 14px !important;
  }
}
@media (max-width: 360px) {
  #games .reference-card.topup-game-card .product-copy,
  #posterWall .reference-card.topup-game-card .product-copy {
    padding: 10px;
  }
  #games .reference-card.topup-game-card .product-availability,
  #posterWall .reference-card.topup-game-card .product-availability {
    font-size: 12px;
  }
}
/* BILSTORE_GAME_VISUAL_V1: original game art, package icons, responsive layout. */
#games .topup-game-card .product-picture,
#posterWall .topup-game-card .product-picture {object-position:center; filter:none;}
@media(max-width:900px){
 #games .topup-game-card .product-thumbnail,
 #posterWall .topup-game-card .product-thumbnail {padding-top:100%;}
}
.original-game-mosaic {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;height:180px;margin-bottom:12px;overflow:hidden;}
.original-game-mosaic img {display:block;width:100%;height:100%;object-fit:cover;object-position:center;border:1px solid #ffffff26;border-radius:12px;}
.hero-visual .logo-cloud img {object-fit:contain;filter:none;border-radius:8px;}
.hero-visual .event-panel img {height:80px;width:80px;object-fit:contain;border-radius:12px;}
.hero-visual .mini-card img {object-fit:contain;filter:none;border-radius:8px;}
.game-artwork-original .purchase-game-identity {aspect-ratio:1 / 1;}
.game-artwork-original .purchase-game-cover {object-fit:contain;object-position:center;}
.game-artwork-original .purchase-game-cover-shade,
.game-artwork-original .purchase-game-cover-name,
.game-artwork-original .purchase-game-logo {display:none!important;}
.purchase-route.game-artwork-original .purchase-route-banner {background-position:center;}
#packs .pack {display:flex;align-items:center;gap:10px;min-width:0;text-align:left;}
#packs .pack .pack-visual {display:flex;align-items:center;justify-content:center;flex:0 0 42px;width:42px;height:48px;}
#packs .pack .pack-item-icon {display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 3px 5px #0002);}
#packs .pack .pack-text {display:block;flex:1 1 auto;min-width:0;overflow-wrap:anywhere;line-height:1.4;}
#packs .pack .pack-text small {display:block;margin-top:7px;}
@media(max-width:560px){
 .original-game-mosaic {height:140px;gap:6px;}
 #packs .pack {gap:7px;padding:10px 8px;}
 #packs .pack .pack-visual {flex-basis:32px;width:32px;height:38px;}
 .purchase-route.game-artwork-original .purchase-route-banner {height:clamp(170px,46vw,245px);}
}
@media(max-width:360px){#packs .pack .pack-visual{flex-basis:27px;width:27px;height:33px;}}
/* Feedback never intercepts links or form submission. */
:where(a,button,[role="button"],summary){-webkit-tap-highlight-color:rgba(244,137,191,.16);}
:where(a,button,[role="button"],summary):focus-visible {outline:2px solid #f4afd3;outline-offset:3px;}
@media(prefers-reduced-motion:no-preference){
 :where(a,button,[role="button"],summary){transition:background-color .16s ease,border-color .16s ease,box-shadow .16s ease;}
 :where(button,[role="button"],.quick-tool,.pill,.banner-link):active {filter:brightness(1.12);}
 body>main {animation:bilstore-page-in .24s ease-out;}
 .purchase-route .purchase-game-header {animation:bilstore-page-in .26s ease-out;}
 .purchase-route .purchase-route-inner {animation:bilstore-page-in .3s ease-out;}
 .modal.open .box, dialog[open], .bilstore-enter {animation:bilstore-page-in .22s ease-out;}
 .bilstore-click-glow {position:fixed;z-index:2147483647;pointer-events:none;border:2px solid #f6afcf;border-radius:50%;width:24px;height:24px;box-shadow:0 0 15px #f398c36b;animation:bilstore-click-glow .34s ease-out forwards;}
 @keyframes bilstore-page-in {from{opacity:.45;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
 @keyframes bilstore-click-glow {from{opacity:.7;transform:scale(.6)}to{opacity:0;transform:scale(2.1)}}
}
@media(prefers-reduced-motion:reduce){
 html {scroll-behavior:auto!important;}
 .bilstore-click-glow {display:none;}
 body>main,.purchase-route .purchase-game-header,.purchase-route .purchase-route-inner,.modal.open .box,dialog[open],.bilstore-enter {animation:none!important;}
 :where(a,button,[role="button"],summary) {transition:none!important;}
}
/* The live QRIS adapter adds its availability note as a direct child. */
#packs .pack {display:grid;grid-template-columns:42px minmax(0,1fr);gap:5px 10px;align-content:center;}
#packs .pack .pack-visual {grid-column:1;grid-row:1 / span 2;}
#packs .pack .pack-text {grid-column:2;grid-row:1;}
#packs .pack > [data-qris-stock] {grid-column:2;grid-row:2;margin:0;line-height:1.35;overflow-wrap:anywhere;}
@media(max-width:560px){#packs .pack{grid-template-columns:32px minmax(0,1fr);gap:4px 7px;}}
@media(max-width:360px){#packs .pack{grid-template-columns:27px minmax(0,1fr);}}

/* BILSTORE_GAME_ICONS_3D_V2
 * Shared selectors cover every game, including future catalog additions.
 * All highlights are decorative and cannot intercept a click or touch.
 */
.purchase-route .purchase-game-identity {
  overflow:visible; border:0; border-radius:22px;
  background:linear-gradient(140deg,#fff0f6,#93677e 42%,#352338);
  transform:perspective(900px) rotateY(-9deg) rotateX(5deg) rotateZ(-2deg);
  transform-origin:center;
  box-shadow:1px 1px 0 #c39bac,2px 2px 0 #997085,3px 3px 0 #90677d,4px 4px 0 #80596f,5px 5px 0 #704c64,6px 6px 0 #634058,7px 7px 0 #57364e,8px 8px 0 #462b40,9px 9px 0 #362133,18px 25px 27px #09051188,inset 1px 1px 1px #ffffffb0;
}
.purchase-route .purchase-game-identity::before,
.purchase-route .purchase-game-identity::after {
  content:''; position:absolute; pointer-events:none; border-radius:inherit;
}
.purchase-route .purchase-game-identity::before {
  inset:0; z-index:2; border:1px solid #ffffffa0;
  box-shadow:inset 2px 2px 2px #ffffffa6,inset -3px -3px 4px #0d0615a8;
}
.purchase-route .purchase-game-identity::after {
  inset:4px; z-index:3; border-radius:18px;
  background:linear-gradient(130deg,#ffffff38 0%,#ffffff0d 28%,transparent 47%,#ffffff06 76%,#00000014);
}
.purchase-route .purchase-game-identity .purchase-game-cover {
  inset:4px; width:calc(100% - 8px); height:calc(100% - 8px);
  border-radius:18px; object-fit:cover;
}
#games .topup-game-card .product-thumbnail,
#posterWall .topup-game-card .product-thumbnail {
  overflow:hidden; border-radius:14px; background:#321c2d;
  transform:perspective(600px) rotateY(-8deg) rotateX(5deg) rotateZ(-2deg);
  transform-origin:center;
  box-shadow:1px 1px 0 #d1a5b9,2px 2px 0 #9e7089,3px 3px 0 #7c4e69,4px 4px 0 #58334d,5px 5px 0 #3e2338,9px 12px 14px #130a1db3;
}
#games .topup-game-card .product-thumbnail::after,
#posterWall .topup-game-card .product-thumbnail::after {
  content:''; position:absolute; inset:0; z-index:2; border-radius:inherit;
  border:1px solid #ffe4f2a6; pointer-events:none;
  background:linear-gradient(130deg,#ffffff3d,transparent 43%,transparent 66%,#08041326);
  box-shadow:inset 2px 2px 2px #ffffff63,inset -2px -2px 3px #100817b3;
}
#games .reference-card.topup-game-card,
#posterWall .reference-card.topup-game-card {padding-top:16px; gap:16px;}
@media (max-width:900px) {
  #games .topup-game-card .product-thumbnail,
  #posterWall .topup-game-card .product-thumbnail {
    width:calc(100% - 24px); height:0; padding-top:calc(100% - 24px);
    margin:0 12px; flex:0 0 auto; border-radius:16px;
  }
  #games .reference-card.topup-game-card,
  #posterWall .reference-card.topup-game-card {gap:4px;}
}
@media (max-width:600px) {
  .purchase-route .purchase-game-identity {border-radius:16px; transform:perspective(600px) rotateY(-7deg) rotateX(4deg) rotateZ(-2deg);}
  .purchase-route .purchase-game-identity .purchase-game-cover,
  .purchase-route .purchase-game-identity::after {border-radius:13px; inset:3px;}
  .purchase-route .purchase-game-identity .purchase-game-cover {width:calc(100% - 6px); height:calc(100% - 6px);}
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  .purchase-route .purchase-game-identity,
  #games .topup-game-card .product-thumbnail,
  #posterWall .topup-game-card .product-thumbnail {transition:transform .24s ease,box-shadow .24s ease;}
  .purchase-route .purchase-game-identity:hover {transform:perspective(900px) rotateY(-4deg) rotateX(2deg) rotateZ(-1deg) translateY(-3px);}
  #games .topup-game-card:hover .product-thumbnail,
  #posterWall .topup-game-card:hover .product-thumbnail,
  #games .topup-game-card:focus-visible .product-thumbnail,
  #posterWall .topup-game-card:focus-visible .product-thumbnail {transform:perspective(600px) rotateY(-3deg) rotateX(2deg) translateY(-3px);}
}
@media (prefers-reduced-motion:reduce) {
  .purchase-route .purchase-game-identity,
  #games .topup-game-card .product-thumbnail,
  #posterWall .topup-game-card .product-thumbnail {transition:none;}
}