/* BilStore: compact storefront, mobile-first.
   Reference palette: berry #C92049 and deep maroon #6A0D25. */
:root {
  color-scheme: dark;
  --maroon: #c92049;
  --maroon2: #6a0d25;
  --ink: #fbf7f9;
  --muted: #c7b8c0;
  --line: #41313a;
  --background: #211d20;
  --surface: #2b252a;
  --shadow: 0 12px 32px rgba(0,0,0,.16);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  font: 16px/1.55 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--background);
}
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; }
button:focus-visible, a:focus-visible {
  outline: 3px solid #ff9eb6;
  outline-offset: 4px;
}
.wrap { width: min(1180px, calc(100% - 32px)); margin: auto; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Header */
.nav {
  position: sticky; top: 0; z-index: 20;
  background: rgba(30,24,28,.96); backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}
.navin { min-height: 70px; display: flex; align-items: center; gap: 24px; }
.brand {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: #fff;
  font-size: 1.35rem; font-weight: 900; letter-spacing: -.04em;
}
.mark {
  display: grid; place-items: center; width: 36px; height: 36px;
  border-radius: 11px; background: var(--maroon); color: #fff; font-weight: 900;
}
.links { display: flex; gap: 22px; margin-right: auto; }
.links a { color: #ddd0d8; text-decoration: none; font-size: .9rem; font-weight: 650; }
.links a:hover { color: #ffadbf; }
.pill { border: 0; border-radius: 12px; padding: 10px 15px; font-weight: 750; font-size: .875rem; }
.ghost { background: #432a34; color: #ffd1de; }
.primary { background: var(--maroon); color: #fff; }

/* Self-contained navigation and accessible two-second carousel. */
.quick-tools { padding: 8px 0 0; }
.quick-tools-row { display:flex; gap:20px; overflow-x:auto; scrollbar-width:thin; border-bottom:1px solid var(--line); }
.quick-tool { display:inline-flex; align-items:center; gap:12px; padding:12px 14px 15px; flex:0 0 auto; color:#e9e5e7; text-decoration:none; border-bottom:3px solid transparent; font-weight:650; }
.quick-tool.active, .quick-tool:hover { color:#d2b38a; border-bottom-color:#d2b38a; }
.quick-ico { display:inline-flex; width:26px; height:26px; }
.quick-ico svg { width:100%; height:100%; }
.hero { padding:18px 0 0; }
.hero-card { position:relative; padding:0; border:1px solid #723247; border-radius:22px; overflow:hidden; color:#fff; box-shadow:var(--shadow); background:linear-gradient(125deg,#581428,#170d15 80%); }
.hero-slides { display:grid; }
.hero-slide { grid-area:1 / 1; min-width:0; padding:26px 34px 62px; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:28px; align-items:center; min-height:335px; opacity:0; visibility:hidden; transform:translateX(28px); transition:opacity .38s ease,transform .38s ease,visibility .38s; }
.hero-slide.is-active { opacity:1; visibility:visible; transform:none; }
.hero-slide--event.mlpubg { background:linear-gradient(125deg,#431226,#111c2e); }
.hero-slide--event.other-games { background:linear-gradient(125deg,#2d1229,#172542); }
.hero-copy { min-width:0; width:100%; padding:0; max-width:620px; }
.eyebrow { display:block; font-size:.75rem; font-weight:800; letter-spacing:.12em; color:#ffd7e0; }
.hero h1 { margin:10px 0 12px; font-size:clamp(1.65rem,3vw,2.8rem); line-height:1.12; letter-spacing:-.035em; }
.hero h1 span { color:#fff; }
.hero-desc { margin:0 0 16px; color:#f4dde5; font-size:.91rem; max-width:49ch; }
.hero-actions { display:flex; gap:10px; flex-wrap:wrap; }
.banner-link { display:inline-flex; align-items:center; gap:14px; padding:10px 14px; border:1px solid #ffffff66; border-radius:10px; font-size:.87rem; font-weight:750; background:#ffffff10; text-decoration:none; }
.hero-visual { min-width:0; }
.all-games-art { display:block; width:100%; height:132px; object-fit:cover; object-position:center; border-radius:14px; border:1px solid #ffffff24; margin-bottom:10px; }
.logo-cloud { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; }
.logo-cloud img { width:100%; height:43px; max-height:none; padding:7px; object-fit:contain; border:1px solid #ffffff22; border-radius:9px; background:#ffffff0e; }
.hero-panels { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.event-panel,.mini-card { min-width:0; border:1px solid #ffffff24; border-radius:15px; background:#ffffff0b; }
.event-panel { display:flex; flex-direction:column; justify-content:center; gap:18px; padding:18px 14px; min-height:190px; }
.event-panel img { width:100%; height:64px; object-fit:contain; }
.event-panel strong { font-size:.96rem; line-height:1.3; }
.event-panel small { color:#e2ccd7; font-size:.78rem; }
.event-panel.ml { background:linear-gradient(135deg,#69434377,#1f2335cc); }
.event-panel.pubg { background:linear-gradient(135deg,#24436399,#1f2335cc); }
.hero-tags { display:flex; flex-wrap:wrap; gap:7px; }
.hero-tags span { padding:6px 10px; border-radius:30px; background:#ffffff0d; border:1px solid #ffffff20; font-size:.69rem; font-weight:750; }
.stack-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.mini-card { padding:12px; display:flex; flex-direction:column; gap:9px; min-height:93px; align-items:center; justify-content:center; }
.mini-card img { width:100%; height:36px; object-fit:contain; }
.mini-card span { font-size:.74rem; font-weight:650; text-align:center; }
.hero-dots { position:absolute; left:28px; bottom:14px; display:flex; align-items:center; gap:4px; z-index:2; }
.hero-dot { width:28px; height:32px; border:0; background:transparent; padding:0; display:grid; place-items:center; }
.hero-dot::before { content:""; display:block; height:7px; width:7px; border-radius:8px; background:#ffffff50; transition:width .2s; }
.hero-dot.is-active::before { width:25px; background:#fff; }
.hero-controls { position:absolute; right:26px; bottom:14px; display:flex; gap:6px; z-index:3; }
.hero-controls button { display:grid; place-items:center; min-width:34px; height:32px; padding:0 10px; border:1px solid #ffffff30; border-radius:8px; color:#fff; background:#ffffff0a; font-size:1.1rem; }
.hero-controls #heroPause { font-size:.72rem; min-width:58px; }

/* Games sit immediately below the banner. */
section { padding: 44px 0; }
.catalog { padding: 28px 0 40px; }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 18px; margin-bottom: 20px; }
.section-head h2 { margin: 0; font-size: 1.6rem; line-height: 1.3; letter-spacing: -.025em; }
.catalog h2 { font-size: 1.35rem; letter-spacing: .025em; text-transform: uppercase; }
.section-head p { margin: 6px 0 0; color: var(--muted); font-size: .9rem; }
.search, .field {
  min-width: 0; color: var(--ink); background: #211a1f;
  border: 1px solid #57404c; border-radius: 11px; padding: 11px 13px; outline: none;
}
.search { width: 250px; font-size: .9rem; }
.search::placeholder, .field::placeholder { color: #bcaab3; opacity: 1; }
.search:focus, .field:focus { border-color: #f186a3; box-shadow: 0 0 0 3px rgba(201,32,73,.2); }
.grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
.game {
  position: relative; display: flex; align-items: center; gap: 12px;
  min-width: 0; min-height: 104px; padding: 12px;
  text-align: left; color: var(--ink); font: inherit;
  background: linear-gradient(130deg,#3e2530,#4c2837 74%,#583345 74%);
  border: 1px solid #694052; border-radius: 16px;
  transition: transform .18s, border-color .18s, background .18s;
}
.game:hover { transform: translateY(-3px); border-color: #dd7193; background-color: #6a0d25; }
.art {
  width: 70px; height: 70px; flex: 0 0 70px; padding: 5px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 11px; background: rgba(15,9,14,.45);
}
.game-logo { display: block; width: 100%; height: 100%; object-fit: contain; }
.game-logo--white { filter: brightness(0) invert(1); }
.game-info { display: block; min-width: 0; }
.game-name { display: block; font-size: .875rem; font-weight: 750; line-height: 1.4; overflow-wrap: anywhere; }
.game-price { display: block; margin-top: 5px; font-size: .8125rem; color: #dfc8d3; }
#games > p { grid-column: 1 / -1; color: var(--muted); }

/* Existing guide and news stay below the games. */
.steps {
  background-color: var(--maroon2);
  background-image: linear-gradient(110deg,rgba(106,13,37,.96),rgba(36,10,23,.94)),url("/assets/mlbb-poster.webp");
  background-position: center; background-size: cover;
}
.steps .section-head p { color: #f7dce3; }
.stepgrid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.step { padding: 24px; border: 1px solid #865166; border-radius: 16px; background: rgba(41,9,23,.45); }
.num { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: #fff; color: var(--maroon2); font-weight: 900; }
.step h3 { margin: 16px 0 6px; font-size: 1.1rem; }
.step p { margin: 0; color: #f1d5df; font-size: .9rem; }
.newsgrid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.article { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.thumb { height: 132px; background: linear-gradient(135deg,var(--maroon2),var(--maroon)); display: grid; place-items: center; color: #fff; font-weight: 900; font-size: 1.3rem; }
.article-body { padding: 20px; }
.article small { color: #ffafc4; font-weight: 800; }
.article h3 { margin: 8px 0 0; line-height: 1.4; font-size: 1.15rem; }
.transaction-panel { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.transaction-panel h2 { font-size: 1.4rem; }
.transaction-form { display: flex; gap: 8px; flex: 1; max-width: 430px; min-width: min(100%,280px); }
.transaction-form .field { width: 100%; }

/* Footer */
footer { background: #180e14; color: #d5b7c0; padding: 36px 0 24px; border-top: 1px solid var(--line); }
.footergrid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; }
.footbrand { color: #fff; }
.footergrid p { max-width: 480px; color: #bd9da6; font-size: .9rem; }
.footergrid h4 { color: #fff; margin: 0 0 12px; }
.footergrid a:not(.brand) { display: block; color: #c7a8b1; text-decoration: none; margin: 7px 0; font-size: .9rem; }
.copy { border-top: 1px solid var(--line); margin-top: 28px; padding-top: 18px; font-size: .8125rem; }

/* Footer contact links use local icons and wrap on narrow screens. */
.footer-social { margin-top:22px; position:relative; }
.footergrid .social-heading { margin:0 0 10px; color:var(--muted); font-size:.8rem; font-weight:600; }
.social-links { display:flex; align-items:center; flex-wrap:wrap; gap:12px; }
.footergrid .social-links .social-link {
  display:inline-flex; align-items:center; justify-content:center;
  flex:0 0 46px; width:46px; height:46px; margin:0;
  border:1px solid var(--line); border-radius:12px; background:#241a20;
  transition:background .15s, border-color .15s;
}
.social-link svg { width:28px; height:28px; display:block; }
.footergrid .social-links .social-link:hover { background:#38242f; border-color:#bc6886; }
.footergrid .social-links .social-link:focus-visible { outline:3px solid #ff9eb6; outline-offset:4px; }
.email-contact { flex:0 0 46px; }
.email-contact summary { cursor:pointer; list-style:none; }
.email-contact summary::-webkit-details-marker { display:none; }
.email-contact[open] summary { outline:2px solid #bc6886; outline-offset:2px; }
.email-contact-panel {
  position:absolute; z-index:30; left:0; bottom:calc(100% + 12px);
  width:min(340px,100%); padding:18px; border:1px solid #75515f;
  border-radius:16px; background:#2b1d25; color:#fff; box-shadow:0 12px 32px #0008;
}
.email-contact-address {
  display:block; width:100%; min-height:44px; margin:12px 0;
  padding:10px; border:1px solid #75515f; border-radius:8px;
  background:#180e14; color:#fff; font:inherit; font-size:.85rem;
}
.footergrid .email-contact-panel a, .email-contact-copy {
  display:block; width:100%; min-height:44px; margin:8px 0 0; padding:10px 12px;
  border:1px solid #75515f; border-radius:8px; text-align:center;
  background:#38242f; color:#fff; font:inherit; font-size:.85rem;
  text-decoration:none; cursor:pointer;
}
.footergrid .email-contact-panel a.email-contact-gmail { background:#be174b; border-color:#be174b; }
.footergrid .email-contact-status { margin:10px 0 0; color:#ead8e0; font-size:.8rem; }
.email-contact-status:empty { display:none; }
@media(prefers-reduced-motion:reduce) { .footergrid .social-links .social-link { transition:none; } }

/* Checkout and order status */
[hidden] { display: none !important; }
.store-notice { margin-top: 16px; padding: 10px 14px; background: #482334; border: 1px solid #99506b; border-radius: 10px; font-size: .875rem; }
.help { font-size: .875rem; color: var(--muted); }
.sandbox-note { font-size: .875rem; color: #ffb9cc; }
.confirm { display: flex; align-items: flex-start; gap: 10px; font-size: .875rem; }
.confirm input { width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--maroon); }
button:disabled { opacity: .55; cursor: not-allowed; }
.pack small { display: block; margin-top: 5px; font-weight: 500; }
.order-result { width: 100%; padding-top: 16px; border-top: 1px solid var(--line); }
.order-result p { margin: 8px 0; }
.order-heading { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; }
.order-heading h3 { margin: 0; }
.order-id { overflow-wrap: anywhere; font-size: .875rem; color: var(--muted); }
.order-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.payment-link { display: inline-flex; text-decoration: none; align-items: center; }
.modal { position: fixed; inset: 0; background: rgba(10,2,7,.78); z-index: 50; display: none; place-items: center; padding: 18px; }
.modal.open { display: grid; }
.box { width: min(480px,100%); max-height: calc(100dvh - 36px); overflow-y: auto; background: var(--surface); border: 1px solid #684556; border-radius: 22px; padding: 26px; box-shadow: 0 30px 80px rgba(0,0,0,.3); }
.box-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.box h3 { margin: 0; }
.close { border: 0; background: #4b2f3b; color: #fff; border-radius: 50%; width: 38px; height: 38px; flex-shrink: 0; font-size: 1.2rem; }
.label { display: block; font-size: .875rem; font-weight: 800; margin: 18px 0 7px; }
.field { width: 100%; }
.packs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.pack-group-title { grid-column: 1 / -1; margin: 16px 0 2px; padding-top: 14px; border-top: 1px solid #6f4b5c; color: #f5dce5; font-size: 15px; font-weight: 750; }
.pack-group-title:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.pack { border: 1px solid #6f4b5c; background: #34252e; color: #fff; border-radius: 11px; padding: 10px; font-weight: 750; }
.pack.active { border-color: #ff9aba; background: #6a0d25; }
.pay { width: 100%; margin-top: 20px; padding: 14px; border: 0; border-radius: 12px; background: var(--maroon); color: #fff; font-weight: 850; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%,30px); width: max-content; max-width: calc(100% - 32px); background: #fff3f8; color: #401325; padding: 12px 18px; border-radius: 12px; opacity: 0; pointer-events: none; transition: .25s; z-index: 70; box-shadow: var(--shadow); }
.toast.show { opacity: 1; transform: translate(-50%,0); }

/* Tablets and phones: two compact game columns, banner stays landscape. */
@media (max-width: 900px) {
  .links { display: none; }
  .navin { gap: 12px; }
  .navin .ghost { margin-left: auto; }

  .grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
  .stepgrid, .newsgrid { grid-template-columns: 1fr; }
  .footergrid { grid-template-columns: 1fr 1fr; }
  .footergrid > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .wrap { width: calc(100% - 28px); }
  .navin { min-height: 64px; }
  .navin .ghost { display: none; }
  .navin .primary { margin-left: auto; padding: 10px 12px; }
  .brand { font-size: 1.25rem; }
  .mark { width: 32px; height: 32px; border-radius: 10px; }
  .hero { padding-top: 18px; }


  .eyebrow { font-size: .75rem; letter-spacing: .035em; }
  .hero h1 { font-size: 1.5rem; margin: 6px 0 8px; line-height: 1.12; }
  .banner-link { padding: 0; background: none; border: 0; font-size: .8125rem; gap: 8px; }
  .catalog { padding: 22px 0 30px; }
  .section-head { align-items: stretch; flex-direction: column; gap: 12px; margin-bottom: 14px; }
  .catalog h2 { font-size: 1.15rem; }
  .section-head p { font-size: .875rem; margin-top: 5px; }
  .search { width: 100%; padding: 9px 12px; }
  .grid { gap: 10px; }
  .game { min-height: 92px; padding: 9px; gap: 8px; border-radius: 13px; }
  .art { width: 49px; height: 58px; flex-basis: 49px; padding: 3px; border-radius: 9px; }
  .game-name { font-size: .875rem; line-height: 1.3; }
  .game-price { font-size: .75rem; margin-top: 4px; }
  section { padding: 32px 0; }
  .transaction-panel { padding: 20px; }
  .transaction-form { min-width: 100%; }
  .footergrid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .box { padding: 20px; }
}
@media (max-width: 350px) {
  .navin .primary { font-size: .8125rem; padding: 9px; }
  .brand { gap: 7px; font-size: 1.15rem; }

  .game { gap: 6px; padding: 8px; }
  .art { width: 40px; flex-basis: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .game, .toast { transition: none; }
}

[hidden] { display:none !important; }
.brand,.pill { white-space:nowrap; }
.navin .primary { margin-left:auto; }
.leaderboard-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.leader-card,.calc-card { background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:20px; }
.leader-card { display:flex; flex-direction:column; gap:8px; }
.leader-card strong { color:#d2b38a; font-size:1.2rem; }
.leader-card small { color:var(--muted); font-size:.8rem; }
.calc-card { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.calc-row { min-width:0; }
.calc-row .label { margin:0 0 8px; }
.calc-result { grid-column:1/-1; display:flex; justify-content:space-between; gap:18px; align-items:center; border-top:1px solid var(--line); padding:18px 0 0; }
.calc-result strong { overflow-wrap:anywhere; text-align:right; color:#ffc0d2; }
@media(max-width:1100px) { .navin .links { display:none; } .navin .ghost { margin-left:auto; } .navin .primary { margin-left:0; } }
@media(max-width:760px) {
  .quick-tools-row { gap:8px; }
  .quick-tool { font-size:.85rem; padding:12px 10px; gap:8px; }
  .quick-ico { width:23px; height:23px; }
  .hero-slide { grid-template-columns:1fr; gap:18px; padding:24px 22px 62px; align-content:start; min-height:0; }
  .hero-copy { width:100%; padding:0; }
  .hero h1 { font-size:1.7rem; }
  .hero-desc { max-width:none; font-size:.84rem; }
  .all-games-art { height:115px; }
  .hero-panels { grid-template-columns:1fr 1fr; }
  .event-panel { min-height:160px; padding:14px 12px; gap:13px; }
  .event-panel img { height:52px; }
  .hero-dots { left:18px; }
  .hero-controls { right:18px; }
  .leaderboard-grid { grid-template-columns:1fr; }
}
@media(max-width:520px) {
  .hero-slide { padding:20px 18px 58px; gap:16px; }
  .hero-copy { width:100%; padding:0; }
  .hero-card { border-radius:17px; }
  .hero h1 { font-size:1.58rem; }
  .hero .banner-link { border:1px solid #ffffff55; padding:8px 11px; background:#ffffff10; }
  .all-games-art { height:100px; }
  .logo-cloud { gap:6px; }
  .logo-cloud img { height:40px; padding:5px; }
  .stack-cards { gap:7px; }
  .mini-card { padding:8px; min-height:88px; }
  .mini-card span { font-size:.68rem; }
  .calc-card { grid-template-columns:1fr; }
  .navin .primary { margin-left:auto; }
  .transaction-form { flex-wrap:wrap; }
  .transaction-form .field { flex-basis:150px; }
}
@media(prefers-reduced-motion:reduce) { .hero-slide,.hero-dot::before { transition:none; transform:none; } }


/* OURASTORE-inspired category strip and poster cards */
.catalog-filter { padding: 10px 0 6px; }
.store-tab-shell { display: grid; grid-template-columns: 56px 1fr 56px; gap: 12px; align-items: center; }
.store-tab-nav {
  height: 54px; border-radius: 16px; border: 0; cursor: pointer;
  background: #c7ab84; color: #fff; font-size: 2rem; line-height: 1;
  box-shadow: 0 10px 25px rgba(0,0,0,.18);
}
.store-tab-strip {
  display: flex; gap: 14px; overflow-x: auto; padding: 2px;
  scrollbar-width: none; scroll-behavior: smooth;
}
.store-tab-strip::-webkit-scrollbar { display: none; }
.store-tab {
  flex: 0 0 auto; min-width: max-content; padding: 15px 28px; border-radius: 18px;
  border: 1px solid rgba(255,255,255,.05); background: #31363e; color: #f3f2ef;
  font-size: 1.05rem; font-weight: 800; letter-spacing: -.01em; cursor: pointer;
}
.store-tab.is-active { background: #c7ab84; color: #fff; }
.poster-grid { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 22px; }
.poster-card {
  position: relative; display: flex; align-items: flex-end; min-height: 470px; overflow: hidden;
  border-radius: 28px; border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 18px 35px rgba(0,0,0,.22); text-align: left; isolation: isolate;
  background: linear-gradient(180deg, #41556d 0%, #0f1219 95%);
}
.poster-card::before {
  content: ''; position: absolute; inset: 0; z-index: -3;
  background: radial-gradient(circle at 50% 18%, rgba(255,255,255,.35), transparent 22%), linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.05));
}
.poster-card::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.16) 38%, rgba(12,13,18,.88) 100%);
}
.poster-sheen { position:absolute; inset:auto -24% 22% auto; width:62%; height:28%; background:rgba(255,255,255,.07); filter:blur(30px); transform:rotate(-18deg); z-index:-2; }
.poster-logo {
  position: absolute; left: 18px; right: 18px; top: 18px; display:flex; justify-content:center;
}
.poster-logo img { max-width: 88%; max-height: 82px; object-fit: contain; filter: drop-shadow(0 8px 20px rgba(0,0,0,.45)); }
.poster-content { display:flex; flex-direction:column; gap:8px; width:100%; padding: 24px 20px 22px; }
.poster-title { font-size: 1.65rem; line-height: 1.02; font-weight: 900; letter-spacing: -.03em; color:#fff; text-shadow:0 6px 20px rgba(0,0,0,.4); }
.poster-subtitle { font-size:.98rem; color: rgba(255,255,255,.82); }
.poster-price { display:inline-flex; width:max-content; padding:8px 12px; border-radius:999px; background: rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.12); font-size:.92rem; font-weight:800; color:#fff; }
.poster-mlbb { background: linear-gradient(160deg, #87d2ff 0%, #4f81bb 36%, #15263d 100%); }
.poster-mlbb::before { background: radial-gradient(circle at 34% 18%, rgba(255,255,255,.6), transparent 24%), radial-gradient(circle at 75% 30%, rgba(70,171,255,.38), transparent 23%), linear-gradient(180deg, rgba(255,255,255,.1), rgba(0,0,0,.08)); }
.poster-mcgg { background: linear-gradient(160deg, #6e4a9c 0%, #3c2b62 45%, #161320 100%); }
.poster-pubg { background: linear-gradient(160deg, #4f9be4 0%, #1f5a97 42%, #0f1a2b 100%); }
.poster-ff { background: linear-gradient(160deg, #6767ff 0%, #30307a 44%, #111222 100%); }
.poster-hok { background: linear-gradient(160deg, #c73e49 0%, #6d1025 50%, #180b12 100%); }
.poster-valorant { background: linear-gradient(160deg, #ff5d67 0%, #7d1f2e 48%, #140d12 100%); }
.poster-bloodstrike { background: linear-gradient(160deg, #ff6d36 0%, #7a2710 48%, #170f0b 100%); }
.poster-codm { background: linear-gradient(160deg, #878b92 0%, #3b4049 48%, #101216 100%); }
.poster-roblox { background: linear-gradient(160deg, #36a0ff 0%, #18477a 48%, #0f1521 100%); }
.poster-genshin { background: linear-gradient(160deg, #5ec3ff 0%, #2c5f9c 45%, #0f1930 100%); }
.poster-hsr { background: linear-gradient(160deg, #8892ff 0%, #454da6 45%, #111632 100%); }
.poster-fcmobile { background: linear-gradient(160deg, #4ae5bb 0%, #157661 45%, #0e1715 100%); }
.poster-joki-mlbb, .poster-joki-mlbb-2 { background: linear-gradient(160deg, #d5b184 0%, #8a6234 44%, #24180f 100%); }
.poster-joki-hok, .poster-joki-hok-2 { background: linear-gradient(160deg, #e19b6b 0%, #7d3c1f 44%, #25140e 100%); }
.poster-link-mlbb, .poster-link-pubg { background: linear-gradient(160deg, #86a8ff 0%, #43539b 44%, #161a31 100%); }
.poster-pulsa { background: linear-gradient(160deg, #ef4d65 0%, #80263d 44%, #221019 100%); }
.poster-data { background: linear-gradient(160deg, #3fb6ff 0%, #1f5781 44%, #111927 100%); }
.poster-voucher-google { background: linear-gradient(160deg, #49c277 0%, #246a41 44%, #0f1712 100%); }
.poster-voucher-steam { background: linear-gradient(160deg, #335dff 0%, #173083 44%, #0e1324 100%); }
@media (max-width: 1180px) { .poster-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 860px) {
  .store-tab-shell { grid-template-columns: 48px 1fr 48px; gap:10px; }
  .store-tab { padding: 14px 20px; font-size: .98rem; }
  .poster-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
  .poster-card { min-height: 400px; border-radius: 24px; }
  .poster-title { font-size: 1.38rem; }
}
@media (max-width: 520px) {
  .catalog-filter { padding-top: 6px; }
  .store-tab-shell { grid-template-columns: 44px 1fr 44px; gap:8px; }
  .store-tab-nav { height: 48px; border-radius: 14px; font-size: 1.75rem; }
  .store-tab { padding: 13px 18px; border-radius: 16px; }
  .poster-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
  .poster-card { min-height: 290px; border-radius: 22px; }
  .poster-logo { left: 10px; right:10px; top: 12px; }
  .poster-logo img { max-height: 54px; }
  .poster-content { padding: 18px 14px 16px; gap: 6px; }
  .poster-title { font-size: 1rem; }
  .poster-subtitle { font-size: .78rem; }
  .poster-price { font-size: .72rem; padding: 6px 9px; }
}

/* Hosting repair: bounded scroll areas, complete cards, no external fonts. */
.wrap { min-width:0; }
.quick-tools-row { min-width:0; }
.store-tab-shell { grid-template-columns:48px minmax(0,1fr) 48px; }
.store-tab-strip { position:relative; min-width:0; }
.store-tab-nav { height:52px; border-radius:13px; }
.store-tab { padding:13px 22px; border-radius:13px; font-size:.96rem; }
.catalog .section-head > div { min-width:0; }
.catalog .section-head p { max-width:56ch; }
.catalog .search { width:300px; flex-shrink:0; }
.catalog-count { display:block; margin-top:10px; font-size:.78rem; color:var(--muted); }
.poster-card { min-height:380px; aspect-ratio:2 / 3; padding:0; gap:0; width:100%; align-items:flex-end; }
.poster-card:hover { border-color:#d2b38a; }
.poster-card::before { z-index:0; pointer-events:none; }
.poster-card::after { z-index:1; pointer-events:none; }
.poster-art { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:56% center; z-index:0; }
.poster-sheen { z-index:0; }
.poster-content { position:relative; z-index:3; padding:24px 20px; min-width:0; }
.poster-title { font-size:1.42rem; line-height:1.17; overflow-wrap:break-word; }
.poster-subtitle { font-size:.8rem; line-height:1.4; }
.poster-price { font-size:.77rem; max-width:100%; }
.poster-logo { z-index:2; top:16%; left:20px; right:20px; pointer-events:none; }
.poster-logo img { width:100%; height:100px; max-height:100px; max-width:100%; }
.poster-logo .game-logo--white { filter:brightness(0) invert(1); }
.poster-wordmark { position:absolute; left:22px; right:22px; top:17%; z-index:2; font-size:2rem; font-weight:900; line-height:1.1; letter-spacing:-.04em; text-align:center; color:#ffffffd9; text-transform:uppercase; }
.poster-mlbb .poster-logo { top:12%; }
noscript .store-notice { margin-bottom:20px; }
@media(max-width:860px) {
  .poster-card { min-height:310px; }
  .poster-title { font-size:1.25rem; }
}
@media(max-width:520px) {
  .store-tab-shell { grid-template-columns:36px minmax(0,1fr) 36px; gap:7px; }
  .store-tab-nav { height:46px; }
  .store-tab { padding:12px 14px; font-size:.85rem; }
  .poster-card { min-height:260px; aspect-ratio:auto; padding:0; border-radius:18px; }
  .poster-content { padding:16px 12px; gap:7px; }
  .poster-title { font-size:1rem; }
  .poster-subtitle { font-size:.72rem; }
  .poster-price { padding:6px 8px; font-size:.65rem; }
  .poster-logo { left:12px; right:12px; top:12%; }
  .poster-logo img { height:70px; max-height:70px; }
  .poster-wordmark { left:12px; right:12px; top:16%; font-size:1.3rem; }
  .catalog .search { width:100%; }
}
@media(max-width:350px) {
  .poster-card { min-height:245px; }
  .poster-title { font-size:.9rem; }
  .poster-price { padding:5px 6px; font-size:.61rem; }
  .hero-controls { right:12px; gap:3px; }
  .hero-dots { left:12px; }
  .hero-dot { width:24px; }
}

/* 2026-09-20 compact poster refresh */
.catalog-filter + .catalog .section-head { margin-bottom: 16px; }
.poster-grid { grid-template-columns: repeat(5, minmax(0,1fr)); gap: 16px; }
.poster-card {
  min-height: 310px !important;
  aspect-ratio: 3 / 4;
  border-radius: 22px;
  overflow: hidden;
}
.poster-card::before {
  background: radial-gradient(circle at 50% 12%, rgba(255,255,255,.18), transparent 22%), linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.08));
}
.poster-art {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top;
  opacity: .32; filter: saturate(1.05) contrast(1.05);
}
.poster-logo { left: 10px; right: 10px; top: 12px; }
.poster-logo img { max-height: 48px; max-width: 82%; }
.poster-wordmark {
  position: absolute; top: 16px; left: 14px; right: 14px; z-index: 2;
  font-weight: 900; font-size: .84rem; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.84); text-align: center;
}
.poster-emblem {
  position: absolute; inset: 22% 8% auto 8%; z-index: 1;
  font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 900; letter-spacing: .06em; text-transform: uppercase;
  color: rgba(255,255,255,.18); text-align: center; line-height: .95;
  text-shadow: 0 8px 28px rgba(0,0,0,.15);
}
.poster-content { padding: 16px 14px 14px; gap: 5px; }
.poster-kicker {
  display: inline-flex; width: max-content; padding: 4px 8px; border-radius: 999px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.16);
  font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.9);
}
.poster-title { font-size: 1.02rem; line-height: 1.08; }
.poster-subtitle { font-size: .76rem; line-height: 1.35; }
.poster-price { font-size: .72rem; padding: 6px 9px; }
.poster-joki-mlbb, .poster-joki-mlbb-2, .poster-joki-mlbb-3, .poster-joki-mlbb-4 {
  background: linear-gradient(160deg, #5f8dff 0%, #26478f 48%, #121c34 100%);
}
.poster-joki-hok, .poster-joki-hok-2, .poster-joki-hok-3, .poster-joki-hok-4 {
  background: linear-gradient(160deg, #e0a24c 0%, #8f4a18 46%, #27150d 100%);
}
.poster-link-mlbb, .poster-link-pubg, .poster-link-ff, .poster-link-valorant {
  background: linear-gradient(160deg, #74adff 0%, #3252a0 46%, #131a35 100%);
}
.poster-pulsa-tsel, .poster-pulsa-xl {
  background: linear-gradient(160deg, #ff6f6f 0%, #a62847 46%, #241018 100%);
}
.poster-data-tsel, .poster-data-xl {
  background: linear-gradient(160deg, #41d0ff 0%, #236caa 46%, #101827 100%);
}
.poster-voucher-google {
  background: linear-gradient(160deg, #42c878 0%, #236b44 46%, #0f1712 100%);
}
.poster-voucher-steam {
  background: linear-gradient(160deg, #4772ff 0%, #223c97 46%, #10152a 100%);
}
.poster-voucher-razer {
  background: linear-gradient(160deg, #65dc85 0%, #256c39 46%, #111812 100%);
}
.poster-voucher-psn {
  background: linear-gradient(160deg, #608fff 0%, #2f4997 46%, #0f1325 100%);
}
@media (max-width: 1200px) {
  .poster-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
}
@media (max-width: 920px) {
  .poster-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
  .poster-card { min-height: 280px !important; border-radius: 20px; }
}
@media (max-width: 620px) {
  .poster-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
  .poster-card { min-height: 235px !important; border-radius: 18px; }
  .poster-logo img { max-height: 36px; }
  .poster-wordmark { top: 12px; left: 10px; right: 10px; font-size: .72rem; }
  .poster-emblem { inset: 24% 8% auto 8%; font-size: 1.42rem; }
  .poster-content { padding: 14px 12px 12px; }
  .poster-title { font-size: .92rem; }
  .poster-subtitle { font-size: .7rem; }
  .poster-price { font-size: .68rem; }
}


/* Popular section refresh — OURASTORE-inspired compact cards */
.catalog .section-head h2 { letter-spacing: .02em; text-transform: uppercase; }
.catalog .section-head p { max-width: 62ch; }
.poster-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 22px !important;
}
.poster-card {
  position: relative;
  min-height: 176px !important;
  aspect-ratio: auto !important;
  width: 100%;
  display: grid !important;
  grid-template-columns: 162px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  padding: 14px 18px 14px 14px !important;
  border-radius: 30px !important;
  overflow: hidden;
  border: 1px solid rgba(213,177,132,.55);
  background:
    linear-gradient(135deg, rgba(255,255,255,.07) 0 18%, transparent 18% 54%, rgba(255,255,255,.045) 54% 74%, transparent 74% 100%),
    linear-gradient(90deg, #2e2f33 0%, #262729 100%) !important;
  box-shadow: 0 14px 28px rgba(0,0,0,.18);
}
.poster-card::before,
.poster-card::after,
.poster-sheen,
.poster-wordmark,
.poster-emblem,
.poster-kicker,
.poster-logo,
.poster-art { display: none !important; }
.popular-card-thumb {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 146px;
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(160deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.popular-thumb-art,
.popular-thumb-logo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.popular-thumb-logo {
  object-fit: contain;
  padding: 18px;
}
.popular-thumb-fallback {
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: .08em;
  color: rgba(255,255,255,.92);
  text-transform: uppercase;
}
.popular-card-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  align-items: flex-start;
  gap: 6px;
}
.popular-card-kicker {
  display: inline-flex;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(213,177,132,.14);
  border: 1px solid rgba(213,177,132,.28);
  font-size: .68rem;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #e1c19c;
}
.poster-title {
  font-size: 1.12rem !important;
  line-height: 1.15 !important;
  letter-spacing: -.02em;
  margin-top: 4px;
}
.poster-subtitle {
  font-size: .88rem !important;
  color: rgba(255,255,255,.84) !important;
}
.poster-price {
  margin-top: 6px;
  font-size: .76rem !important;
  padding: 6px 10px !important;
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
}
@media (max-width: 1140px) {
  .poster-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 680px) {
  .poster-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  .poster-card {
    grid-template-columns: 118px minmax(0,1fr);
    min-height: 136px !important;
    gap: 14px;
    padding: 10px 12px 10px 10px !important;
    border-radius: 22px !important;
  }
  .popular-card-thumb {
    height: 116px;
    border-radius: 18px;
  }
  .popular-thumb-logo { padding: 14px; }
  .poster-title { font-size: .98rem !important; }
  .poster-subtitle { font-size: .78rem !important; }
  .poster-price { font-size: .68rem !important; padding: 5px 8px !important; }
  .popular-card-kicker { font-size: .62rem; padding: 4px 8px; }
}


/* Poster showcase section */
.poster-showcase { padding: 10px 0 34px; }
.poster-showcase-head { margin-bottom: 18px; }
.poster-showcase-head h2 { text-transform: uppercase; letter-spacing: .02em; }
.poster-showcase-head p { max-width: 64ch; }
.poster-wall {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 22px;
}
.gallery-card {
  position: relative;
  min-height: 460px;
  border: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 26px;
  background: linear-gradient(160deg, #1a365e 0%, #0e2139 50%, #0a1525 100%);
  box-shadow: 0 18px 40px rgba(0,0,0,.24);
  isolation: isolate;
  text-align: left;
}
.gallery-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 30%, rgba(0,0,0,.38) 72%, rgba(6,10,18,.92) 100%);
  z-index: 1;
}
.gallery-visual {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.gallery-art, .gallery-logo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.gallery-logo {
  object-fit: contain;
  padding: 42px 26px 124px;
  filter: drop-shadow(0 20px 38px rgba(0,0,0,.36));
}
.gallery-fallback {
  font-size: clamp(2rem, 4vw, 3.35rem);
  font-weight: 900;
  letter-spacing: .06em;
  color: rgba(255,255,255,.88);
  text-transform: uppercase;
  text-align: center;
  padding: 0 18px;
}
.gallery-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 16%, rgba(255,255,255,.18), transparent 26%),
    radial-gradient(circle at 82% 12%, rgba(255,255,255,.12), transparent 18%),
    linear-gradient(180deg, transparent 0%, transparent 45%, rgba(5,8,14,.18) 60%, rgba(5,8,14,.72) 100%);
  z-index: 0;
}
.gallery-copy {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 18px 18px;
}
.gallery-kicker {
  display: inline-flex;
  align-self: flex-start;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.18);
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.94);
}
.gallery-title {
  display: block;
  font-size: 1.16rem;
  line-height: 1.12;
  font-weight: 900;
  letter-spacing: -.02em;
  color: #fff;
}
.gallery-subtitle {
  display: block;
  font-size: .82rem;
  color: rgba(255,255,255,.84);
}
.gallery-card.poster-mlbb { background: linear-gradient(160deg, #4a78cb 0%, #203961 48%, #0d1729 100%); }
.gallery-card.poster-mcgg { background: linear-gradient(160deg, #5f75dc 0%, #33418f 48%, #13192e 100%); }
.gallery-card.poster-pubg { background: linear-gradient(160deg, #7f8f9d 0%, #3b4b5f 48%, #151a22 100%); }
.gallery-card.poster-ff { background: linear-gradient(160deg, #625ef5 0%, #2a2f73 48%, #101223 100%); }
.gallery-card.poster-hok { background: linear-gradient(160deg, #c86f4a 0%, #74351e 48%, #21110c 100%); }
.gallery-card.poster-valorant { background: linear-gradient(160deg, #ff6075 0%, #8c2135 48%, #1b0f14 100%); }
.gallery-card.poster-bloodstrike { background: linear-gradient(160deg, #f07a45 0%, #8b3319 48%, #1f120d 100%); }
.gallery-card.poster-codm { background: linear-gradient(160deg, #8f96a1 0%, #43474f 48%, #14161a 100%); }
.gallery-card.poster-roblox { background: linear-gradient(160deg, #4f91ff 0%, #244b90 48%, #101729 100%); }
.gallery-card.poster-genshin { background: linear-gradient(160deg, #73c1ff 0%, #35659a 48%, #101b2e 100%); }
.gallery-card.poster-hsr { background: linear-gradient(160deg, #858dff 0%, #454aa9 48%, #121735 100%); }
.gallery-card.poster-fcmobile { background: linear-gradient(160deg, #43d0ab 0%, #23745f 48%, #101915 100%); }
.gallery-card.poster-joki-mlbb, .gallery-card.poster-joki-mlbb-2, .gallery-card.poster-joki-mlbb-3, .gallery-card.poster-joki-mlbb-4 { background: linear-gradient(160deg, #5081ff 0%, #263d8c 48%, #121b35 100%); }
.gallery-card.poster-joki-hok, .gallery-card.poster-joki-hok-2, .gallery-card.poster-joki-hok-3, .gallery-card.poster-joki-hok-4 { background: linear-gradient(160deg, #e0a14f 0%, #85421a 48%, #24130c 100%); }
.gallery-card.poster-link-mlbb, .gallery-card.poster-link-pubg, .gallery-card.poster-link-ff, .gallery-card.poster-link-valorant { background: linear-gradient(160deg, #63a0ff 0%, #3354a1 48%, #121935 100%); }
.gallery-card.poster-pulsa-tsel, .gallery-card.poster-pulsa-xl { background: linear-gradient(160deg, #ff7474 0%, #a6304b 48%, #261019 100%); }
.gallery-card.poster-data-tsel, .gallery-card.poster-data-xl { background: linear-gradient(160deg, #53d4ff 0%, #2a73ae 48%, #111928 100%); }
.gallery-card.poster-voucher-google { background: linear-gradient(160deg, #47c977 0%, #246d43 48%, #111813 100%); }
.gallery-card.poster-voucher-steam { background: linear-gradient(160deg, #4b78ff 0%, #24409b 48%, #101428 100%); }
.gallery-card.poster-voucher-razer { background: linear-gradient(160deg, #5dd67a 0%, #29703e 48%, #101713 100%); }
.gallery-card.poster-voucher-psn { background: linear-gradient(160deg, #6691ff 0%, #314ea0 48%, #111528 100%); }
@media (max-width: 1180px) {
  .poster-wall { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 860px) {
  .poster-wall { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
  .gallery-card { min-height: 390px; border-radius: 22px; }
}
@media (max-width: 560px) {
  .poster-showcase { padding: 4px 0 26px; }
  .poster-wall { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
  .gallery-card { min-height: 262px; border-radius: 18px; }
  .gallery-logo { padding: 26px 14px 88px; }
  .gallery-copy { gap: 4px; padding: 14px 12px 12px; }
  .gallery-title { font-size: .92rem; }
  .gallery-subtitle { font-size: .72rem; }
  .gallery-kicker { font-size: .58rem; padding: 4px 7px; }
}


/* Additional poster themes for extended catalog */
.poster-higgs, .gallery-card.poster-higgs { background: linear-gradient(160deg, #f3b052 0%, #9b5f12 48%, #27170d 100%); }
.poster-zzz, .gallery-card.poster-zzz { background: linear-gradient(160deg, #e59fff 0%, #7a3aa1 48%, #21102b 100%); }
.poster-minecraft, .gallery-card.poster-minecraft { background: linear-gradient(160deg, #71cc63 0%, #2f7b2a 48%, #111d10 100%); }
.poster-aov, .gallery-card.poster-aov { background: linear-gradient(160deg, #ffb15e 0%, #99551c 48%, #23150b 100%); }
.poster-pointblank, .gallery-card.poster-pointblank { background: linear-gradient(160deg, #a9b1be 0%, #4f5666 48%, #15181f 100%); }
.poster-lordsmobile, .gallery-card.poster-lordsmobile { background: linear-gradient(160deg, #9b8cff 0%, #4b429e 48%, #17152c 100%); }
.poster-coc, .gallery-card.poster-coc { background: linear-gradient(160deg, #e0a05f 0%, #9a5d25 48%, #24150c 100%); }
.poster-clashroyale, .gallery-card.poster-clashroyale { background: linear-gradient(160deg, #5eb0ff 0%, #285eaa 48%, #101827 100%); }
.poster-brawlstars, .gallery-card.poster-brawlstars { background: linear-gradient(160deg, #ffd35f 0%, #b57714 48%, #291a08 100%); }
.poster-wildrift, .gallery-card.poster-wildrift { background: linear-gradient(160deg, #39d3d3 0%, #1e6d8b 48%, #101824 100%); }
.poster-ragel, .gallery-card.poster-ragel { background: linear-gradient(160deg, #f6b6dd 0%, #9d4e79 48%, #26111c 100%); }
.poster-aura, .gallery-card.poster-aura { background: linear-gradient(160deg, #6bd6ff 0%, #2974ac 48%, #111a29 100%); }
.poster-sausageman, .gallery-card.poster-sausageman { background: linear-gradient(160deg, #ff8c75 0%, #9c432b 48%, #24120d 100%); }
.poster-stumble, .gallery-card.poster-stumble { background: linear-gradient(160deg, #ffc15f 0%, #b36c14 48%, #291906 100%); }
.poster-eggyparty, .gallery-card.poster-eggyparty { background: linear-gradient(160deg, #ffd2aa 0%, #f18b34 48%, #2c160b 100%); }
.poster-growtopia, .gallery-card.poster-growtopia { background: linear-gradient(160deg, #67d69e 0%, #297757 48%, #101a16 100%); }
.poster-ragorigin, .gallery-card.poster-ragorigin { background: linear-gradient(160deg, #86b5ff 0%, #4065b2 48%, #11182b 100%); }
.poster-pulsa-indosat, .gallery-card.poster-pulsa-indosat { background: linear-gradient(160deg, #ff6767 0%, #c31f3b 48%, #2b0f17 100%); }
.poster-pulsa-tri, .gallery-card.poster-pulsa-tri { background: linear-gradient(160deg, #b495ff 0%, #6133b3 48%, #1d112d 100%); }
.poster-pulsa-axis, .gallery-card.poster-pulsa-axis { background: linear-gradient(160deg, #d36cff 0%, #8233a4 48%, #211028 100%); }
.poster-pulsa-smartfren, .gallery-card.poster-pulsa-smartfren { background: linear-gradient(160deg, #ff7ca7 0%, #c33366 48%, #2b0f1c 100%); }
.poster-data-indosat, .gallery-card.poster-data-indosat { background: linear-gradient(160deg, #61c8ff 0%, #2f6db3 48%, #111a29 100%); }
.poster-data-tri, .gallery-card.poster-data-tri { background: linear-gradient(160deg, #67d0ff 0%, #2f76b3 48%, #111929 100%); }
.poster-data-axis, .gallery-card.poster-data-axis { background: linear-gradient(160deg, #68caff 0%, #2d6ea4 48%, #101827 100%); }
.poster-data-smartfren, .gallery-card.poster-data-smartfren { background: linear-gradient(160deg, #7ad6ff 0%, #2d7bb0 48%, #111929 100%); }
.poster-ewallet-dana, .gallery-card.poster-ewallet-dana { background: linear-gradient(160deg, #4db2ff 0%, #245b9f 48%, #101729 100%); }
.poster-ewallet-ovo, .gallery-card.poster-ewallet-ovo { background: linear-gradient(160deg, #aa7aff 0%, #5d36ac 48%, #19122a 100%); }
.poster-ewallet-shopeepay, .gallery-card.poster-ewallet-shopeepay { background: linear-gradient(160deg, #ff8d57 0%, #b34a20 48%, #27150d 100%); }
.poster-ewallet-gopay, .gallery-card.poster-ewallet-gopay { background: linear-gradient(160deg, #53c3ff 0%, #2f75b3 48%, #111929 100%); }
.poster-token-pln, .gallery-card.poster-token-pln { background: linear-gradient(160deg, #ffe36a 0%, #b08f22 48%, #241d09 100%); }


/* Popular split + richer artwork */
#games.poster-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 18px !important; }
.catalog-count { display: inline-flex; margin-top: 10px; }
.popular-card-thumb {
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
}
.popular-thumb-art { object-fit: cover; object-position: center; }
.gallery-art { object-fit: cover; object-position: center; }
#posterWall .gallery-card { cursor: pointer; }
#posterWall .gallery-card:hover, #games .poster-card:hover { transform: translateY(-3px); transition: transform .18s ease; }
@media (max-width: 900px) {
  #games.poster-grid { grid-template-columns: 1fr !important; }
}


/* Embedded generated logo for brand */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.mark.mark-logo {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: transparent;
  overflow: hidden;
  flex: 0 0 42px;
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
}
.mark.mark-logo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.brand-wordmark {
  display: inline-block;
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  font-weight: 900;
  font-size: 1.2rem;
  line-height: 1;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .1em;
  transform: skewX(-10deg);
  text-shadow: 0 1px 0 rgba(255,255,255,.08), 0 8px 18px rgba(0,0,0,.2);
}
@media (max-width: 640px) {
  .mark.mark-logo { width: 36px; height: 36px; flex-basis: 36px; border-radius: 10px; }
  .brand-wordmark { font-size: 1rem; }
}


/* Popular section like reference screenshot */
.catalog .section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 470px);
  gap: 22px;
  align-items: start;
  margin-bottom: 18px;
}
.catalog .section-head h2 {
  font-size: clamp(1.85rem, 2.8vw, 2.8rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -.02em;
  margin-bottom: 10px;
}
.catalog .section-head p {
  color: rgba(255,255,255,.82);
  font-size: 1rem;
  max-width: 28rem;
}
.catalog .search {
  justify-self: end;
  width: 100%;
  min-height: 84px;
  padding: 0 26px;
  border-radius: 24px;
  border: 1px solid rgba(255,110,170,.28);
  background: rgba(37,24,35,.72);
  color: #f7edf2;
  font-size: 1.1rem;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}
.catalog .search::placeholder { color: rgba(255,232,244,.74); }
#games.poster-grid {
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  gap: 20px !important;
}
#games .poster-card {
  min-height: 150px !important;
  display: grid !important;
  grid-template-columns: 132px minmax(0,1fr);
  gap: 20px;
  align-items: center;
  padding: 18px 22px !important;
  border-radius: 28px !important;
  border: 1px solid rgba(255,109,169,.38);
  background:
    linear-gradient(135deg, rgba(255,255,255,.06) 0 52%, rgba(255,255,255,.12) 52% 72%, rgba(255,255,255,.02) 72% 100%),
    linear-gradient(90deg, rgba(104,33,62,.90) 0%, rgba(86,31,56,.92) 52%, rgba(121,63,91,.9) 100%) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.04);
  text-align: left;
}
#games .poster-card::before,
#games .poster-card::after,
#games .poster-card .poster-kicker,
#games .poster-card .poster-price,
#games .poster-card .poster-subtitle,
#games .poster-card .poster-wordmark,
#games .poster-card .poster-emblem,
#games .poster-card .poster-art,
#games .poster-card .poster-logo,
#games .poster-card .poster-sheen { display: none !important; }
.popular-card-thumb {
  width: 132px;
  height: 132px;
  border-radius: 22px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: rgba(38,17,31,.88);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}
.popular-thumb-logo {
  width: 76%;
  height: 76%;
  object-fit: contain;
  display: block;
}
.popular-thumb-fallback {
  font-size: 1.6rem;
  font-weight: 900;
  color: #fff;
  letter-spacing: .06em;
}
.popular-card-copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  min-width: 0;
}
#games .poster-title {
  font-size: clamp(1.18rem, 2vw, 1.45rem) !important;
  line-height: 1.1 !important;
  color: #fff;
  font-weight: 900;
}
.poster-status {
  font-size: clamp(1rem, 1.7vw, 1.12rem);
  color: rgba(255,236,244,.86);
  font-weight: 500;
}
.catalog-count { display: none !important; }
@media (max-width: 980px) {
  .catalog .section-head { grid-template-columns: 1fr; }
  .catalog .search { justify-self: stretch; min-height: 72px; }
  #games.poster-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 560px) {
  #games .poster-card {
    grid-template-columns: 92px minmax(0,1fr);
    min-height: 116px !important;
    gap: 14px;
    padding: 12px 14px !important;
    border-radius: 22px !important;
  }
  .popular-card-thumb {
    width: 92px;
    height: 92px;
    border-radius: 18px;
  }
  .catalog .search { min-height: 62px; padding: 0 18px; border-radius: 18px; }
  #games .poster-title { font-size: 1.02rem !important; }
  .poster-status { font-size: .92rem; }
}


@font-face{font-family:"BILSTORE Tactical";src:url(/assets/embedded/24723e323c12b80e.woff) format("woff");font-weight:400;font-style:normal;font-display:swap;}
/* BILSTORE poster collection: every product has a complete visual cover. */
:root { --display-font: 'BILSTORE Tactical', 'Arial Black', sans-serif; }
.brand-wordmark, .hero h1, h2, .product-name, .service-wordmark,
.section-head h2, .thumb, .footbrand {
  font-family: var(--display-font);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .025em;
}
.brand-wordmark { transform:none; font-size:1.25rem; letter-spacing:.08em; }
.hero h1 { line-height:1.2; letter-spacing:.015em; }
.catalog .section-head { align-items:center; margin-bottom:24px; }
.catalog .section-head h2 { font-size:clamp(1.45rem,2.8vw,2.3rem); line-height:1.2; letter-spacing:.025em; }
.catalog .section-head p { margin-top:8px; font-size:.94rem; }
.catalog .search { min-height:58px; border-radius:12px; font-size:.94rem; padding:0 20px; }
.catalog-count { display:inline-block !important; margin-top:8px; font-size:.72rem; color:#e2a3b5; letter-spacing:.1em; text-transform:uppercase; }
.store-tab { letter-spacing:.02em; }
#games.poster-grid, #posterWall.poster-wall {
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:20px !important;
}
.product-poster {
  position:relative; display:block; isolation:isolate; min-width:0; width:100%;
  aspect-ratio:2 / 3; padding:0; border:1px solid #ffffff26; border-radius:16px;
  overflow:hidden; background:#10151f; text-align:left; color:#fff;
  box-shadow:0 12px 25px #00000024;
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.product-poster::after {
  content:''; position:absolute; z-index:4; inset:0; pointer-events:none;
  border:1px solid #ffffff0d; border-radius:inherit;
}
.product-picture { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; display:block; transition:transform .45s ease; }
.product-shade { position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,#06091070 0%,transparent 27%,transparent 42%,#090b1466 59%,#090b14f5 82%,#090b14 100%); }
.product-topline { position:absolute; z-index:2; top:15px; left:15px; right:15px; display:flex; align-items:center; justify-content:space-between; gap:6px; }
.product-category { color:#fff; border:1px solid #ffffff40; border-left:2px solid var(--poster-accent,#ff4565); padding:5px 7px; background:#11152290; backdrop-filter:blur(8px); font-size:.56rem; line-height:1.2; font-weight:750; letter-spacing:.11em; text-transform:uppercase; }
.product-signature { color:#fff; font-size:.5rem; font-weight:800; letter-spacing:.2em; text-shadow:0 1px 5px #000; }
.product-copy { position:absolute; z-index:3; left:18px; right:18px; bottom:17px; display:flex; flex-direction:column; align-items:flex-start; }
.product-hook { display:block; margin-bottom:7px; color:var(--poster-accent,#ffadbd); font-size:.58rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; line-height:1.3; }
.product-name { display:block; font-size:clamp(1rem,1.55vw,1.3rem); line-height:1.16; color:#fff; overflow-wrap:anywhere; text-wrap:balance; text-shadow:0 2px 14px #00000080; }
.product-subtitle { display:block; margin-top:7px; font-size:.73rem; line-height:1.4; color:#dedee7; }
.product-bottom { width:100%; display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:13px; padding-top:11px; border-top:1px solid #ffffff29; }
.product-cta { font-size:.67rem; line-height:1.2; color:#fff; font-weight:750; }
.product-arrow { width:27px; height:24px; display:grid; place-items:center; background:var(--poster-accent,#ff4565); color:#11131e; font-size:1rem; line-height:1; clip-path:polygon(0 0,80% 0,100% 24%,100% 100%,0 100%); }
.product-rank { position:absolute; z-index:2; right:16px; top:28%; display:grid; place-items:center; width:68px; height:76px; clip-path:polygon(50% 0,100% 25%,85% 78%,50% 100%,15% 78%,0 25%); background:linear-gradient(140deg,#ffedbb,#b78131); box-shadow:0 7px 24px #0005; color:#382212; font-size:.7rem; font-weight:900; transform:rotate(8deg); }
.poster-showcase { padding:12px 0 42px; }
.poster-showcase-head { margin-bottom:23px; display:flex; align-items:end; justify-content:space-between; gap:20px; }
.poster-showcase-head h2 { font-size:clamp(1.15rem,2vw,1.55rem); line-height:1.25; margin:0 0 7px; }
.poster-showcase-head p { font-size:.87rem; color:var(--muted); margin:0; }
.poster-showcase[hidden] { display:none; }
.poster-empty { grid-column:1 / -1; padding:25px; border:1px dashed #ffffff30; border-radius:12px; color:var(--muted); }
.service-wordmark { fill:#fff; }
@media (hover:hover) {
  .product-poster:hover { transform:translateY(-5px); border-color:var(--poster-accent,#ff4565); box-shadow:0 16px 30px #0005; }
  .product-poster:hover .product-picture { transform:scale(1.045); }
}
.product-poster:focus-visible { outline:3px solid #ff9eb6; outline-offset:4px; border-color:#fff; }
@media(max-width:980px) {
  #games.poster-grid, #posterWall.poster-wall { grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:16px !important; }
  .catalog .section-head { grid-template-columns:1fr; gap:16px; }
  .product-name { font-size:1.2rem; }
}
@media(max-width:600px) {
  #games.poster-grid, #posterWall.poster-wall { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:12px !important; }
  .product-poster { aspect-ratio:2 / 3.3; border-radius:12px; }
  .product-topline { top:10px; left:10px; right:10px; }
  .product-category { padding:4px 5px; font-size:.46rem; letter-spacing:.055em; }
  .product-signature { font-size:.4rem; letter-spacing:.1em; }
  .product-copy { left:11px; right:11px; bottom:11px; }
  .product-hook { margin-bottom:5px; font-size:.47rem; letter-spacing:.08em; }
  .product-name { font-size:clamp(.9rem,3.8vw,1.1rem); line-height:1.2; }
  .product-subtitle { margin-top:5px; font-size:.63rem; line-height:1.35; }
  .product-bottom { margin-top:8px; padding-top:8px; gap:3px; }
  .product-cta { font-size:.59rem; }
  .product-arrow { width:23px; height:21px; font-size:.9rem; }
  .product-rank { width:50px; height:60px; font-size:.6rem; right:10px; }
  .catalog .search { min-height:50px; }
  .catalog .section-head h2 { font-size:1.45rem; }
  .brand-wordmark { font-size:1.03rem; }
  .poster-showcase-head { margin-bottom:16px; }
}
@media(prefers-reduced-motion:reduce) { .product-poster,.product-picture { transition:none; } .product-poster:hover,.product-poster:hover .product-picture { transform:none; } }




/* Horizontal cards based on the supplied BILSTORE reference. */
#games.poster-grid, #posterWall.poster-wall {
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:20px !important;
}
.product-poster.reference-card {
  display:grid; grid-template-columns:112px minmax(0,1fr); align-items:center;
  gap:24px; min-height:148px; height:auto; aspect-ratio:auto;
  padding:17px 22px; border-radius:24px; border:1px solid #cc7fa366;
  background:linear-gradient(108deg,#61273f 0%,#73304e 58%,#8c4262 100%);
  box-shadow:0 8px 20px #0000001f,inset 0 0 0 1px #ffffff06;
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
.reference-card::before {
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(125deg,#ffffff04,#ec87b05c);
  clip-path:polygon(90% 0,100% 0,100% 100%,66% 100%);
}
.reference-card::after { border:none; }
.product-thumbnail {
  position:relative; z-index:1; display:grid; place-items:center;
  width:112px; height:112px; overflow:hidden; border-radius:18px;
  background:#3c1930; box-shadow:inset 0 0 0 1px #ffffff06;
}
.reference-card .product-picture {
  position:static; inset:auto; width:100%; height:100%; object-fit:cover;
  object-position:center 32%; transition:none;
}
.reference-card .product-picture.is-logo {
  width:80%; height:80%; object-fit:contain; object-position:center;
}
.reference-card .product-picture.is-service { object-position:center 26%; transform:scale(1.17); }
.reference-card .product-copy {
  position:relative; inset:auto; z-index:1; min-width:0;
  display:flex; flex-direction:column; align-items:flex-start; gap:8px;
}
.reference-card .product-name {
  font-family:var(--display-font); font-size:clamp(1rem,1.6vw,1.22rem);
  font-weight:400; line-height:1.25; letter-spacing:.01em;
  text-align:left; text-wrap:pretty; overflow-wrap:normal; text-shadow:none;
}
.reference-card .product-availability {
  color:#f2dfeb; font-size:1rem; line-height:1.4; font-weight:550;
}
.catalog .section-head { grid-template-columns:minmax(0,1fr) minmax(260px,430px); gap:22px; align-items:center; }
.catalog .section-head p { max-width:none; }
.catalog .search { min-height:58px; border-radius:15px; }
.catalog-count { display:none !important; }
@media(hover:hover) {
  .product-poster.reference-card:hover {
    transform:none; border-color:#ff9aca;
    background:linear-gradient(108deg,#71304b 0%,#a63865 62%,#d74784 100%);
    box-shadow:0 0 0 1px #f778b933,0 10px 24px #00000026;
  }
  .reference-card:hover .product-picture { transform:none; }
  .reference-card:hover .product-picture.is-service { transform:scale(1.17); }
}
.product-poster.reference-card:focus-visible { outline:3px solid #ffc0dc; outline-offset:4px; }
@media(max-width:980px) {
  .product-poster.reference-card { grid-template-columns:90px minmax(0,1fr); gap:16px; padding:16px; min-height:124px; border-radius:20px; }
  .product-thumbnail { width:90px; height:90px; border-radius:15px; }
  .reference-card .product-name { font-size:1rem; }
  .reference-card .product-availability { font-size:.9rem; }
}
@media(max-width:700px) {
  #games.poster-grid, #posterWall.poster-wall { grid-template-columns:1fr !important; gap:13px !important; }
  .catalog .section-head { grid-template-columns:1fr; gap:16px; }
  .catalog .search { min-height:52px; }
  .product-poster.reference-card { grid-template-columns:88px minmax(0,1fr); min-height:118px; padding:14px 16px; gap:18px; border-radius:19px; }
  .product-thumbnail { width:88px; height:88px; }
  .reference-card .product-copy { gap:7px; }
  .reference-card .product-name { font-size:1rem; line-height:1.3; }
  .reference-card .product-availability { font-size:.9rem; }
}
@media(max-width:360px) {
  .product-poster.reference-card { grid-template-columns:72px minmax(0,1fr); gap:13px; padding:12px; min-height:98px; border-radius:17px; }
  .product-thumbnail { width:72px; height:72px; border-radius:12px; }
  .reference-card .product-name { font-size:.88rem; }
  .reference-card .product-availability { font-size:.82rem; }
}
@media(prefers-reduced-motion:reduce) { .product-poster.reference-card { transition:none; } }




/* Compact square icons apply only to the Top Up Games category. */
#games.poster-grid[data-category="topup"],
#posterWall.poster-wall[data-category="topup"] {
  grid-template-columns:repeat(8,minmax(0,1fr)) !important;
  gap:12px !important;
}
.product-poster.reference-card.topup-game-card {
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  gap:10px; min-height:158px; padding:12px 8px; border-radius:8px;
}
.topup-game-card .product-thumbnail {
  width:72px; height:72px; flex:0 0 72px; border-radius:0;
}
.reference-card.topup-game-card .product-copy {
  width:100%; align-items:center; gap:6px;
}
.reference-card.topup-game-card .product-name {
  font-size:.72rem; line-height:1.35; text-align:center;
  overflow-wrap:anywhere; text-wrap:balance;
}
.reference-card.topup-game-card .product-availability {
  font-size:.64rem; line-height:1.35; text-align:center;
}
@media(max-width:1180px) {
  #games.poster-grid[data-category="topup"],
  #posterWall.poster-wall[data-category="topup"] {
    grid-template-columns:repeat(6,minmax(0,1fr)) !important;
  }
}
@media(max-width:900px) {
  #games.poster-grid[data-category="topup"],
  #posterWall.poster-wall[data-category="topup"] {
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  }
}
@media(max-width:600px) {
  #games.poster-grid[data-category="topup"],
  #posterWall.poster-wall[data-category="topup"] {
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:9px !important;
  }
  .product-poster.reference-card.topup-game-card {
    min-height:144px; padding:10px 6px; gap:8px;
  }
  .topup-game-card .product-thumbnail {
    width:60px; height:60px; flex-basis:60px;
  }
  .reference-card.topup-game-card .product-name { font-size:.66rem; }
  .reference-card.topup-game-card .product-availability { font-size:.6rem; }
}
@media(max-width:360px) {
  .topup-game-card .product-thumbnail { width:56px; height:56px; flex-basis:56px; }
  .reference-card.topup-game-card .product-name { font-size:.62rem; }
  .reference-card.topup-game-card .product-availability { font-size:.56rem; }
}

.supplier-serial{white-space:pre-wrap;overflow-wrap:anywhere;padding:12px;background:#21171c;border-radius:10px}


/* Purchase view modeled on the supplied game top-up page. */
.purchase-shell{position:relative;width:min(1120px,100%);padding:0;overflow-x:hidden;background:#302d32;border:1px solid #6c3a57;border-radius:15px}
.purchase-banner{position:relative;min-height:190px;display:flex;align-items:flex-end;overflow:hidden;background-image:var(--purchase-art),linear-gradient(120deg,#69213f,#242335 68%,#16151e);background-position:center;background-size:cover;isolation:isolate}
.purchase-banner::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(22,9,20,.95),rgba(33,17,30,.76) 42%,rgba(14,17,29,.34))}
.purchase-banner-shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(15,10,16,.92),transparent 70%)}
.purchase-banner-copy{position:relative;z-index:1;display:flex;flex-direction:column;gap:5px;max-width:62%;padding:28px 28px 23px}
.purchase-eyebrow{color:#ffd1e6;font-size:.65rem;font-weight:850;letter-spacing:.18em}.purchase-banner-copy strong{color:#fff;font-family:var(--display-font);font-size:clamp(1.35rem,3vw,2.15rem);font-weight:400;letter-spacing:.03em;line-height:1.08;text-transform:uppercase}.purchase-banner-copy small{color:#f1dce8;font-size:.82rem}
.purchase-shell>.box-head{margin:0 330px 0 0;padding:18px 25px 13px;border-bottom:1px solid #4d414a}.purchase-shell>#topupForm{padding:0 330px 25px 25px}.purchase-shell .packs{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.purchase-shell .pack-group-title{margin-top:13px;padding-top:11px;font-size:.78rem}.purchase-shell .pack{min-height:53px;padding:8px;border-radius:7px;background:#3d3940;border-color:#62525e;font-size:.7rem}.purchase-shell .pack.active{background:linear-gradient(135deg,#ca317d,#7e1f51);border-color:#ff8cc6;box-shadow:inset 0 0 0 1px #ffffff20}.purchase-shell .pack small{font-size:.65rem;color:#f4dce8}
.purchase-summary{position:absolute;z-index:2;top:214px;right:22px;width:278px;padding:17px;border:1px solid #765467;border-radius:11px;background:linear-gradient(165deg,#3d353d,#2a282e);box-shadow:0 13px 28px #09060b66}.purchase-summary-head{display:flex;align-items:center;justify-content:space-between;color:#fff;font-size:.8rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.purchase-summary-dot{width:8px;height:8px;border-radius:50%;background:#ef5da4;box-shadow:0 0 0 4px #ef5da422}.purchase-summary-product{display:flex;flex-direction:column;gap:5px;margin-top:17px;padding-bottom:14px;border-bottom:1px solid #5a4a55}.purchase-summary-game{color:#cdbdca;font-size:.66rem;text-transform:uppercase;letter-spacing:.08em}.purchase-summary-product strong{color:#fff;font-size:.8rem;line-height:1.3}.purchase-summary dl{margin:13px 0 0;display:grid;gap:9px}.purchase-summary dl div{display:flex;justify-content:space-between;gap:12px}.purchase-summary dt{color:#b9aab5;font-size:.72rem}.purchase-summary dd{max-width:64%;overflow-wrap:anywhere;margin:0;color:#f4e6ee;font-size:.72rem;text-align:right}.purchase-summary-total{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:16px;padding-top:13px;border-top:1px solid #5a4a55;color:#dacbd5;font-size:.72rem}.purchase-summary-total strong{color:#ff9aca;font-size:1rem}.purchase-summary-help{margin:14px 0 0;color:#bcaeb8;font-size:.66rem;line-height:1.45}.purchase-shell .pay{border-radius:8px;background:linear-gradient(135deg,#ed4b9e,#b91f6a)}
@media(max-width:760px){.purchase-shell>.box-head{margin-right:0;padding:16px 18px 12px}.purchase-shell>#topupForm{padding:0 18px 20px}.purchase-banner{min-height:155px}.purchase-banner-copy{max-width:82%;padding:22px 18px 18px}.purchase-banner-copy strong{font-size:1.35rem}.purchase-summary{position:static;width:auto;margin:0 18px 18px}.purchase-shell .packs{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:420px){.purchase-shell .packs{grid-template-columns:1fr 1fr;gap:6px}.purchase-shell .pack{font-size:.65rem}.purchase-banner-copy small{font-size:.72rem}}


/* Dedicated purchase route: clicking a game opens a full detail page instead of a popup. */
body.purchase-route-active{overflow:hidden}
.purchase-route{position:fixed;inset:0;z-index:45;overflow:auto;background:#26282a;color:#f9f7f8;font-family:var(--display-font),ui-sans-serif,system-ui,sans-serif}
.purchase-route-top{height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 max(22px,calc((100% - 1250px)/2));background:#202123;border-bottom:1px solid #3d4042}.purchase-route-brand{font-size:.82rem;letter-spacing:.12em;color:#d4d5d5}.purchase-back{border:0;background:none;color:#eee;font:inherit;font-size:.8rem;cursor:pointer}.purchase-back:hover{color:#efb2d0}
.purchase-route-inner{width:min(1250px,calc(100% - 34px));margin:0 auto 60px}.purchase-route-banner{position:relative;min-height:275px;margin-top:18px;display:flex;align-items:flex-end;overflow:hidden;border-radius:14px 14px 0 0;background-image:var(--route-art),linear-gradient(120deg,#6a1d40,#202536 70%,#16171e);background-position:center;background-size:cover;isolation:isolate}.purchase-route-banner:before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#13141dcc,#26242d88 48%,#12162222)}.purchase-route-banner-shade{position:absolute;inset:0;background:linear-gradient(0deg,#1f2124,transparent 65%)}.purchase-route-banner-copy{position:relative;z-index:1;padding:28px 30px 26px}.purchase-route-banner-copy span{font-size:.68rem;letter-spacing:.18em;color:#ffd6e8}.purchase-route-banner-copy h1{margin:6px 0 2px;font-size:clamp(1.7rem,4vw,3rem);letter-spacing:.05em}.purchase-route-banner-copy p{margin:0;color:#eddae4;font-size:.86rem}.purchase-route-game-meta{display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding:18px 25px;background:repeating-linear-gradient(135deg,#282b2d 0 16px,#242628 16px 32px);border-bottom:1px solid #414446}.purchase-route-game-meta strong{font-size:1.02rem;letter-spacing:.04em}.purchase-route-game-meta small{color:#babdc0;margin-right:auto}.route-benefit{color:#e1e2e3;font-size:.7rem}.route-benefit:first-letter{color:#ffd45b}.purchase-route-grid{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:25px;margin-top:28px}.purchase-route-form{min-width:0}.route-step-title{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 16px;margin-bottom:0;border-radius:8px 8px 0 0;background:#62686d;color:#fff;font-size:.82rem}.route-step-title b{display:grid;place-items:center;align-self:stretch;min-width:38px;margin-left:-16px;background:#b59b7b;color:#fff;font-size:1rem}.route-step-two{margin-top:24px}.purchase-route-form #topupForm{display:block;padding:0 16px 20px;background:#414548;border-radius:0 0 9px 9px}.purchase-route-form #topupForm>.label{margin-top:0;padding-top:18px;font-size:.72rem}.purchase-route-form #topupForm>.label~.label{margin-top:13px}.purchase-route-form #packs{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding-bottom:12px}.purchase-route-form .pack-group-title{font-size:.76rem;color:#fff;margin-top:13px;padding-top:13px;border-color:#62686d}.purchase-route-form .pack{min-height:92px;padding:12px;border:1px solid #697076;border-radius:11px;background:linear-gradient(#687078,#4e555b);color:#fff;font-size:.72rem;text-align:left}.purchase-route-form .pack.active{border-color:#d6b8cc;background:linear-gradient(145deg,#b82c6e,#74244e);box-shadow:0 0 0 2px #efabd044}.purchase-route-form .pack small{margin-top:8px;color:#efc7d9;font-size:.68rem}.purchase-route-form .field{border-color:#697076;background:#60686e;border-radius:6px;color:#fff}.purchase-route-form .field::placeholder{color:#d1d4d5}.purchase-route-form .help,.purchase-route-form #checkoutNote{color:#c8cbcc;font-size:.7rem}.purchase-route-form .confirm{font-size:.73rem;margin-top:14px}.purchase-route-side{display:flex;flex-direction:column;gap:15px}.route-rating,.route-help,.route-summary-card{padding:18px;border-radius:10px;background:#454a4e;border:1px solid #555b5f}.route-rating{display:flex;flex-direction:column;gap:5px}.route-rating small{font-size:.72rem;color:#e1e2e4}.route-rating strong{font-family:ui-sans-serif,system-ui,sans-serif;font-size:2.2rem;line-height:1}.route-rating strong span{font-size:1.25rem;color:#ffcf3c;letter-spacing:.06em}.route-rating em{font-style:normal;font-size:.67rem;color:#d2d5d6}.route-help{display:flex;flex-direction:column;gap:5px;font-size:.75rem}.route-help span{font-size:.68rem;color:#c9ccce}.route-summary-card{min-height:210px;background:transparent;border-style:dashed}.route-summary-heading{font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.route-summary-card>p{margin:22px 0;color:#e4e5e6;font-size:.77rem;line-height:1.35}.route-summary-card dl{display:grid;gap:9px;margin:0}.route-summary-card dl div{display:flex;justify-content:space-between;gap:12px}.route-summary-card dt{font-size:.7rem;color:#b9bdc0}.route-summary-card dd{max-width:62%;margin:0;text-align:right;overflow-wrap:anywhere;font-size:.7rem}.route-summary-total{display:flex;justify-content:space-between;gap:10px;margin-top:17px;padding-top:12px;border-top:1px solid #5b6063;font-size:.7rem}.route-summary-total strong{color:#ffd0e3;font-size:.95rem}.purchase-route .route-summary-card #payButton{width:100%;margin-top:20px;padding:12px;border:0;border-radius:7px;background:#b89d7e;color:#fff;font:inherit;font-size:.78rem;font-weight:800;cursor:pointer}.purchase-route .route-summary-card #payButton:disabled{opacity:.55}
@media(max-width:850px){.purchase-route-grid{grid-template-columns:1fr}.purchase-route-side{display:grid;grid-template-columns:1fr 1fr}.route-summary-card{grid-column:1/-1}.purchase-route-form #packs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.purchase-route-top{padding:0 14px}.purchase-route-inner{width:calc(100% - 20px)}.purchase-route-banner{min-height:210px;margin-top:10px}.purchase-route-banner-copy{padding:22px 18px}.purchase-route-game-meta{padding:14px;gap:8px}.purchase-route-game-meta small{flex-basis:100%;margin:0}.route-benefit{font-size:.62rem}.purchase-route-grid{margin-top:15px;gap:15px}.purchase-route-side{display:flex}.purchase-route-form #packs{grid-template-columns:1fr 1fr;gap:7px}.purchase-route-form .pack{min-height:78px;padding:9px;font-size:.65rem}.purchase-route-form .pack small{font-size:.61rem}}

/* BILSTORE CATALOG THEME 20260926 START */
.purchase-route {
  --route-accent: #8aa0ff;
  --route-tone: #4a5fb0;
  --route-base: #161d33;
  --route-art: none;
  background-color: var(--route-base);
  background-image: linear-gradient(180deg, #080c17d9, #080c17ef 70%), var(--route-art);
  background-size: cover;
  background-position: center 25%;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.purchase-route-top { position: sticky; top: 0; z-index: 5; background: #0b101af5; border-bottom-color: #ffffff24; gap: 12px; }
.purchase-route .purchase-back { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; line-height: 1.4; }
.purchase-route .purchase-back:hover { color: var(--route-accent); }
.purchase-route .purchase-back:focus-visible { outline: 2px solid var(--route-accent); outline-offset: 4px; border-radius: 3px; }
.purchase-route-banner { min-height: 315px; background-color: var(--route-base); background-image: var(--route-art), linear-gradient(120deg, var(--route-tone), var(--route-base)); background-position: center 28%; }
.purchase-route-banner:before { background: linear-gradient(90deg, #080c17c7, #080c1733 68%, #080c1712); }
.purchase-route-banner-shade { background: linear-gradient(0deg, #0d1420ee, #0d142000 80%); }
.purchase-route-banner-copy { max-width: 85%; }
.purchase-route-banner-copy h1 { overflow-wrap: anywhere; text-shadow: 0 2px 15px #0009; }
.purchase-route-banner-copy span { color: var(--route-accent); }
.purchase-route-banner-copy p { color: #edf2fa; }
.purchase-route-game-meta { background: #111a28ee; border-bottom-color: #ffffff20; }
.purchase-route .route-step-title { background: var(--route-tone); }
.purchase-route .route-step-title b { background: var(--route-accent); color: #0c1322; }
.purchase-route-form #topupForm { background: #151f2ef2; border: 1px solid #ffffff18; border-top: 0; }
.purchase-route-form .field { background: #202d40; border-color: #526075; }
.purchase-route-form .pack { background: linear-gradient(145deg, #27364c, #1b2738); border-color: #506079; }
.purchase-route-form .pack:hover { border-color: var(--route-accent); }
.purchase-route-form .pack.active { border-color: var(--route-accent); background: linear-gradient(145deg, var(--route-tone), var(--route-base)); box-shadow: inset 0 0 0 1px var(--route-accent); }
.purchase-route-form .pack small { color: #e0eafb; }
.purchase-route .route-rating, .purchase-route .route-help, .purchase-route .route-summary-card { background: #151f2ef2; border-color: #ffffff26; }
.purchase-route .route-summary-total strong { color: var(--route-accent); }
.purchase-route .route-summary-card #payButton { background: var(--route-accent); color: #101827; }
.purchase-route .route-summary-card #payButton:disabled { cursor: not-allowed; }
@media(max-width:560px) {
  .purchase-route-banner { min-height: 235px; background-position: center 24%; }
  .purchase-route-banner-copy { max-width: 100%; }
  .purchase-route-top { height: auto; min-height: 58px; }
  .purchase-route-brand { font-size: .62rem; text-align: right; flex-shrink: 0; }
  .purchase-route .purchase-back { font-size: .72rem; }
}
/* BILSTORE CATALOG THEME 20260926 END */

/* BILSTORE GAME BANNER V2 20260926 START */
.purchase-route { --route-content-width: 1440px; }
.purchase-route .purchase-route-top { padding-inline: max(24px, calc((100% - var(--route-content-width)) / 2)); }
.purchase-route .purchase-route-inner { width: min(var(--route-content-width), calc(100% - 48px)); }
.purchase-route .purchase-game-header { width: 100%; }
.purchase-route .purchase-route-banner {
  width: 100%; height: clamp(275px, 26vw, 460px); min-height: 0;
  margin: 0; border-radius: 0;
  background-size: cover; background-position: center 25%;
}
.purchase-route .purchase-route-banner:before { background: linear-gradient(90deg, #060a1426, #060a1400 60%, #060a1426); }
.purchase-route .purchase-route-banner-shade { background: linear-gradient(0deg, #10131b66, transparent 52%); }
.purchase-game-profile {
  position: relative; border-bottom: 1px solid #ffffff1c;
  background: repeating-linear-gradient(135deg, #ffffff03 0 84px, #0000000d 84px 160px), linear-gradient(115deg, #2b2c32, #1b1e25);
}
.purchase-game-profile-inner {
  width: min(var(--route-content-width), calc(100% - 48px)); margin: 0 auto;
  display: grid; grid-template-columns: clamp(180px, 17vw, 280px) minmax(0, 1fr);
  grid-template-rows: auto auto; column-gap: clamp(24px, 3vw, 56px); row-gap: 22px;
  align-items: start; padding: 30px 0 32px; min-height: 174px;
}
.purchase-game-identity {
  position: relative; grid-column: 1; grid-row: 1 / span 2; align-self: start;
  width: 100%; aspect-ratio: 1 / 1.1; margin-top: -142px;
  overflow: hidden; isolation: isolate; border: 3px solid #ffffffbd;
  border-radius: 18px; background: linear-gradient(145deg, var(--route-tone), var(--route-base));
  box-shadow: 0 15px 35px #0006;
}
.purchase-route .purchase-game-cover {
  display: block; width: 100%; height: 100%; object-fit: cover;
  object-position: center 23%; position: absolute; inset: 0;
}
.purchase-game-cover-shade { position: absolute; inset: 0; background: linear-gradient(0deg, #070c1ce6, #070c1c00 58%); }
.purchase-route .purchase-game-logo {
  position: absolute; bottom: 14px; left: 9%; width: 82%; height: 28%;
  object-fit: contain; object-position: center bottom; filter: drop-shadow(0 3px 5px #0009);
}
.purchase-route .purchase-game-logo.game-logo--white { filter: brightness(0) invert(1) drop-shadow(0 3px 5px #0009); }
.purchase-route .purchase-game-cover-name {
  position: absolute; inset: auto 12px 14px; color: #fff; text-align: center;
  font-weight: 800; font-size: clamp(.8rem, 1.4vw, 1.2rem); line-height: 1.3;
  text-shadow: 0 2px 5px #0009; overflow-wrap: anywhere;
}
.purchase-route .purchase-game-cover[hidden], .purchase-route .purchase-game-logo[hidden], .purchase-route .purchase-game-cover-name[hidden] { display: none; }
.purchase-game-heading { grid-column: 2; grid-row: 1; min-width: 0; }
.purchase-game-eyebrow { display: block; color: var(--route-accent); font-size: .65rem; letter-spacing: .14em; line-height: 1.5; }
.purchase-game-heading h1 { margin: 10px 0 8px; color: #fff; font-size: clamp(1.35rem, 2.5vw, 2.1rem); line-height: 1.2; overflow-wrap: anywhere; }
.purchase-game-heading p { margin: 0; color: #dce0e9; font-size: .82rem; line-height: 1.5; }
.purchase-game-benefits { grid-column: 2; grid-row: 2; display: flex; gap: 15px 28px; flex-wrap: wrap; align-items: center; }
.purchase-game-benefits span { display: inline-flex; align-items: center; gap: 9px; color: #f3f4f8; font-size: .73rem; line-height: 1.4; }
.purchase-game-benefits b { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 1px solid #ffffff3d; border-radius: 50%; color: var(--route-accent); font-size: .65rem; }
.purchase-route .purchase-route-grid { margin-top: 32px; }
@media(max-width:850px) {
  .purchase-game-profile-inner { grid-template-columns: 170px minmax(0, 1fr); gap: 18px 26px; }
  .purchase-game-identity { margin-top: -115px; }
  .purchase-game-benefits { gap: 12px 18px; }
}
@media(max-width:560px) {
  .purchase-route .purchase-route-top { padding-inline: 14px; }
  .purchase-route .purchase-route-inner, .purchase-game-profile-inner { width: calc(100% - 28px); }
  .purchase-route .purchase-route-banner { height: 190px; background-position: center 25%; }
  .purchase-game-profile-inner { grid-template-columns: 104px minmax(0, 1fr); column-gap: 16px; row-gap: 18px; padding: 18px 0 20px; min-height: 0; }
  .purchase-game-identity { grid-row: 1; margin-top: -66px; border-width: 2px; border-radius: 12px; }
  .purchase-game-heading h1 { margin: 5px 0 7px; font-size: 1.1rem; line-height: 1.3; }
  .purchase-game-eyebrow { font-size: .52rem; letter-spacing: .06em; }
  .purchase-game-heading p { font-size: .7rem; }
  .purchase-game-benefits { grid-column: 1 / -1; gap: 8px 14px; }
  .purchase-game-benefits span { font-size: .62rem; gap: 6px; }
  .purchase-game-benefits b { width: 22px; height: 22px; font-size: .56rem; }
  .purchase-route .purchase-game-logo { bottom: 8px; }
  .purchase-route .purchase-game-cover-name { inset: auto 5px 8px; font-size: .62rem; }
  .purchase-route .purchase-route-grid { margin-top: 22px; }
}
/* BILSTORE GAME BANNER V2 20260926 END */