/* r336 ordered CSS; unchanged declarations. */
/* /assets/diamond-guide-parity-r225.css */
/* Match the Diamond x2 explanation panel to the Weekly Pass panel. */
html body[data-ui-layout] .store-dialog.bonus-dialog:not(.weekly-dialog) {
  width:min(410px,calc(100vw - 24px))!important;
  max-width:calc(100vw - 24px)!important;
}
html body[data-ui-layout] .store-dialog.bonus-dialog:not(.weekly-dialog) .bonus-guide {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:7px!important;
  border-color:#278dbd!important;
  background:radial-gradient(circle at 18% 0%,#16638a77,transparent 42%),radial-gradient(circle at 95% 92%,#0a47745e,transparent 45%),linear-gradient(145deg,#020b17 0%,#08263c 58%,#020d19 100%)!important;
  box-shadow:inset 0 1px 0 #9be9ff38,inset 0 0 30px #0e5a9230,0 10px 24px #0005;
}
html body[data-ui-layout] .store-dialog.bonus-dialog:not(.weekly-dialog) .bonus-guide::before {
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(115deg,transparent 34%,#2ca9e91b 35%,#adf1ff0b 42%,transparent 43%,transparent 64%,#2094d719 65%,transparent 70%);
}
html body[data-ui-layout] .store-dialog.bonus-dialog:not(.weekly-dialog) .bonus-guide-image {
  border:1px solid #23759d;
  background:#071d31;
}
html body[data-ui-layout] .store-dialog.bonus-dialog:not(.weekly-dialog) .bonus-guide-image > rect[fill="#030c16"] {
  fill:#071d31;
}
html body[data-ui-layout] .store-dialog.bonus-dialog:not(.weekly-dialog) .bonus-guide-image stop[stop-color="#030c16"] {
  stop-color:#08263c;
}

/* /assets/readability-r226.css */
/* Readability polish across public pages. Keep the existing blue layout and motion. */
html body[data-ui-layout] .search-stage .search-heading .ticker-track {
  color:#d9effb!important;
  font-size:11px!important;
  line-height:1.65!important;
}
html body.home-page[data-ui-layout][data-ui-layout] #catalog-scroll .game > b {
  color:#f4fbff!important;
  font-size:13px!important;
  line-height:1.4!important;
}
html body.home-page[data-ui-layout] .app-install-banner small {
  color:#d5e9f4!important;
  font-size:11px!important;
  line-height:1.4!important;
}
html body[data-ui-layout] #packages .pack b {
  color:#f4fbff!important;
  font-size:13px!important;
  line-height:1.45!important;
}
html body[data-ui-layout] #packages .pack .pack-ribbon {
  color:#d8f0ff!important;
  font-size:9px!important;
  line-height:1.35!important;
}
html body[data-ui-layout] .payment-panel .payment-option small {
  color:#d3e8f5!important;
  font-size:11.5px!important;
  line-height:1.5!important;
}
html body[data-ui-layout] .store-dialog.bonus-dialog :is(p,li) {
  color:#e6f3fb!important;
  font-size:13.5px!important;
  line-height:1.65!important;
}
html body[data-ui-layout] .store-dialog.bonus-dialog .bonus-guide figcaption,
html body[data-ui-layout] .store-dialog.weekly-dialog .weekly-guide-summary {
  color:#d8effc!important;
  font-size:12px!important;
  line-height:1.6!important;
}
html body[data-ui-layout] .store-dialog.weekly-dialog .weekly-guide-metric small,
html body[data-ui-layout] .store-dialog.weekly-dialog .weekly-guide-daily {
  color:#c8eeff!important;
  font-size:11px!important;
  line-height:1.5!important;
}
@media(max-width:600px) {
  html body.home-page[data-ui-layout][data-ui-layout] #catalog-scroll .game > b {
    font-size:12px!important;
  }
  html body[data-ui-layout] #packages .pack b {
    font-size:12px!important;
  }
  html body[data-ui-layout] #packages .pack .pack-ribbon {
    font-size:8px!important;
  }
}
/* These controls fit the existing header/search rows without enlarging them. */
html body[data-ui-layout][data-ui-layout] > header :is(.member-trigger,.member-language-quick) {
  height:44px!important;
  min-height:44px!important;
  min-width:44px!important;
}
html body[data-ui-layout][data-ui-layout] > header .member-language-quick {
  width:44px!important;
}
html body.home-page[data-ui-layout][data-ui-layout] #clear-game-search {
  height:44px!important;
  min-height:44px!important;
}
/* The existing search ID matches the specificity inherited by legacy resets.
   r263: clicking/tapping a text field keeps its normal border without an extra
   blue frame. Tab navigation retains a separate neutral focus indicator. */
html.ht-keyboard-navigation body[data-ui-layout][data-ui-layout][data-ui-layout] :is(#game-search,a[href],button,input,select,textarea,summary,[tabindex]):focus-visible:focus:not(:disabled):not([data-ht-pressed]) {
  outline:2px solid #a2e4ff!important;
  outline-offset:3px!important;
}
/* The repeated field group also beats the two ID branches inherited by the
   legacy keyboard stylesheet, without changing which elements match. */
html.ht-keyboard-navigation body[data-ui-layout][data-ui-layout][data-ui-layout] :is(#game-search,input:not([type=checkbox]):not([type=radio]):not([type=file]),textarea,select):is(#game-search,input,textarea,select):focus-visible:focus:not(:disabled) {
  outline:2px solid #e2e8f0!important;
  outline-offset:3px!important;
}
html:not(.ht-keyboard-navigation) body[data-ui-layout][data-ui-layout][data-ui-layout] :is(#game-search,input:not([type=checkbox]):not([type=radio]):not([type=file]),textarea,select):focus:not(:disabled) {
  outline:none!important;
  outline-offset:0!important;
}
@media(forced-colors:active) {
  html.ht-keyboard-navigation body[data-ui-layout][data-ui-layout][data-ui-layout] :is(#game-search,a[href],button,input,select,textarea,summary,[tabindex]):focus-visible:focus:not(:disabled):not([data-ht-pressed]),
  html.ht-keyboard-navigation body[data-ui-layout][data-ui-layout][data-ui-layout] :is(#game-search,input:not([type=checkbox]):not([type=radio]):not([type=file]),textarea,select):is(#game-search,input,textarea,select):focus-visible:focus:not(:disabled) {
    outline-color:Highlight!important;
  }
}
/* r261: retain the shared blue action style, with readable white labels even
   at the brighter gradient edge. Limit the existing press light on these
   actions so it cannot wash out their small white text. No semantic state
   colours (success, errors, selected packages or destructive actions) change. */
html body[data-ui-layout] :is(.member-auth,.member-tools-panel) .member-primary,
html body[data-ui-layout] .app-install-banner .install-now {
  background:linear-gradient(115deg,#0b6ca9,#2068c2)!important;
  color:#fff!important;
  filter:none!important;
}
html body[data-ui-layout] :is(.member-auth,.member-tools-panel) .member-primary > .ht-control-light-r259,
html body[data-ui-layout] .app-install-banner .install-now > .ht-control-light-r259 {
  background:radial-gradient(ellipse at var(--ht-press-x,50%) var(--ht-press-y,50%),rgba(233,250,255,.08) 0%,rgba(233,250,255,.035) 32%,rgba(233,250,255,0) 72%)!important;
}

/* /assets/weekly-match-diamond-r229.css */
/* Diamond x2 is the visual reference. Leave Diamond unchanged; match Weekly to it. */
html body[data-ui-layout] .store-dialog.weekly-dialog {
  max-width:calc(100vw - 24px)!important;
}
html body[data-ui-layout] .store-dialog.weekly-dialog .weekly-guide-scene {
  background:#071d31!important;
}
html body[data-ui-layout] .store-dialog.weekly-dialog .weekly-guide-metric:not(.weekly-guide-metric-full) {
  border-color:#258dbe!important;
  background:linear-gradient(135deg,#103a50,#030c16)!important;
}

/* /assets/restore-popups-r232.css */
/* Use the visible Diamond x2 colors after its SVG/CSS gradient override. */
html body[data-ui-layout] .store-dialog.weekly-dialog {
  width:min(410px,calc(100vw - 24px))!important;
  max-width:calc(100vw - 24px)!important;
  max-height:calc(100dvh - 64px)!important;
}
html body[data-ui-layout] .store-dialog.weekly-dialog .weekly-guide-scene {
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr) auto;
  gap:4px;
  aspect-ratio:640/440;
  padding:7px!important;
  background:#071d31!important;
}
html body[data-ui-layout] .store-dialog.weekly-dialog .weekly-guide-route {
  font-size:11px;
  font-weight:700;
  gap:7px;
}
html body[data-ui-layout] .store-dialog.weekly-dialog .weekly-guide-route span {
  padding:4px 7px;
  background:#075f96;
  border-color:#38bdf8;
  color:#d7ecff;
  box-shadow:none;
}
html body[data-ui-layout] .store-dialog.weekly-dialog .weekly-guide-route span:last-child {
  background:#b91c1c;
  border-color:#b91c1c;
  color:#eaf6ff;
}
html body[data-ui-layout] .store-dialog.weekly-dialog .weekly-guide-route b {color:#f87171}
html body[data-ui-layout] .store-dialog.weekly-dialog .weekly-guide-product {
  margin:0;
  padding:0;
  gap:8px;
  border:0;
}
html body[data-ui-layout] .store-dialog.weekly-dialog .weekly-guide-product img {
  width:40px;
  height:40px;
}
html body[data-ui-layout] .store-dialog.weekly-dialog .weekly-guide-product strong {
  font-size:15px;
  line-height:1.35;
}
html body[data-ui-layout] .store-dialog.weekly-dialog .weekly-guide-grid {gap:5px}
html body[data-ui-layout][data-ui-layout] .store-dialog.weekly-dialog .weekly-guide-metric {
  min-height:50px;
  padding:5px 8px;
  border-color:#258dbe!important;
  background:linear-gradient(135deg,#103a50,#08263c)!important;
  box-shadow:none;
}
html body[data-ui-layout] .store-dialog.weekly-dialog .weekly-guide-metric-full {min-height:48px}
html body[data-ui-layout] .store-dialog.weekly-dialog .weekly-guide-metric strong {
  margin-top:2px;
  font-size:20px;
  line-height:1.1;
  text-shadow:none;
}
html body[data-ui-layout] .store-dialog.weekly-dialog .weekly-guide-daily {margin-top:0}
html body[data-ui-layout] .store-dialog.weekly-dialog .weekly-guide-links {padding-bottom:8px}

html body[data-ui-layout] header > a.site-brand > img[src*="hourtopup-icon-r167"],
html body[data-ui-layout] .app-install-banner > img[src*="hourtopup-icon-r167"] {
  filter:contrast(1.3) saturate(1.4) brightness(1.08)!important;
}
@media(max-width:340px) {
  html body[data-ui-layout] .store-dialog.weekly-dialog .weekly-guide-scene {gap:3px;padding:5px!important}
  html body[data-ui-layout] .store-dialog.weekly-dialog .weekly-guide-route {font-size:9px;gap:4px}
  html body[data-ui-layout] .store-dialog.weekly-dialog .weekly-guide-route span {padding:3px 5px}
  html body[data-ui-layout] .store-dialog.weekly-dialog .weekly-guide-product img {width:32px;height:32px}
  html body[data-ui-layout] .store-dialog.weekly-dialog .weekly-guide-product strong {font-size:13px}
  html body[data-ui-layout] .store-dialog.weekly-dialog .weekly-guide-metric {min-height:45px;padding:4px 6px}
  html body[data-ui-layout] .store-dialog.weekly-dialog .weekly-guide-metric-full {min-height:42px}
  html body[data-ui-layout] .store-dialog.weekly-dialog .weekly-guide-metric strong {font-size:18px}
}

/* /assets/package-sections-r240.css */
/* Category bars only. Existing package cards, prices, artwork and selection stay untouched. */
html body[data-ui-layout] #packages > .package-section-heading {
  grid-column:1 / -1!important;
  box-sizing:border-box!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  width:100%!important;
  min-width:0!important;
  min-height:31px!important;
  margin:9px 0 1px!important;
  padding:3px 1px 5px!important;
  gap:10px!important;
  border:0!important;
  border-bottom:1px solid #168fca!important;
  background:transparent!important;
  color:#f6f8ff!important;
  box-shadow:none!important;
}

html body[data-ui-layout] #packages > .package-section-heading:first-child {
  margin-top:0!important;
}

html body[data-ui-layout] #packages > .package-section-heading[hidden] {
  display:none!important;
}

html body[data-ui-layout] #packages .package-section-title {
  display:inline-flex!important;
  align-items:center!important;
  min-width:0!important;
  gap:7px!important;
  color:#f6f8ff!important;
  font-size:12px!important;
  font-weight:800!important;
  line-height:1.25!important;
  letter-spacing:.3px!important;
  white-space:nowrap!important;
}

html body[data-ui-layout] #packages .package-section-mark {
  display:grid!important;
  place-items:center!important;
  flex:0 0 23px!important;
  width:23px!important;
  height:23px!important;
  border:1px solid #38bdf8!important;
  border-radius:50%!important;
  background:radial-gradient(circle at 35% 30%,#208ec2,#0b3150)!important;
  color:#c3efff!important;
  font-size:11px!important;
  line-height:1!important;
  box-shadow:inset 0 1px 0 #d7f5ff3b,0 0 10px #2fafe829!important;
}

html body[data-ui-layout] #packages .package-section-count {
  flex:0 0 auto!important;
  max-width:45%!important;
  padding:3px 8px!important;
  overflow:hidden!important;
  border:1px solid #277ba8!important;
  border-radius:999px!important;
  background:#0c2a42!important;
  color:#a9e4ff!important;
  font-size:9px!important;
  font-weight:800!important;
  line-height:1.2!important;
  letter-spacing:.25px!important;
  white-space:nowrap!important;
  text-overflow:ellipsis!important;
  box-shadow:inset 0 1px 0 #ffffff12!important;
}

@media(max-width:480px) {
  html body[data-ui-layout] #packages > .package-section-heading {
    min-height:29px!important;
    margin-top:7px!important;
    padding-bottom:4px!important;
  }
  html body[data-ui-layout] #packages .package-section-title {
    gap:6px!important;
    font-size:10px!important;
  }
  html body[data-ui-layout] #packages .package-section-mark {
    flex-basis:20px!important;
    width:20px!important;
    height:20px!important;
    font-size:9px!important;
  }
  html body[data-ui-layout] #packages .package-section-count {
    padding:3px 6px!important;
    font-size:8px!important;
  }
}

/* /assets/account-profile-r239.css */
/* r239: account headings use one quiet, familiar profile mark on every app. */
html body[data-ui-layout] :is(.mlbb-shell,.telegram-shell)
  .checkout-panel > .title.account-step > .account-profile-icon {
  display:grid!important;
  place-items:center!important;
  flex:0 0 30px!important;
  width:30px!important;
  height:30px!important;
  min-width:30px!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  outline:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#39b9ff!important;
  font-size:0!important;
}

html body[data-ui-layout] :is(.mlbb-shell,.telegram-shell)
  .checkout-panel > .title.account-step > .account-profile-icon > svg {
  display:block;
  width:24px;
  height:24px;
  overflow:visible;
  filter:none;
}

html body[data-ui-layout] :is(.mlbb-shell,.telegram-shell)
  .checkout-panel > .title.account-step > div {
  justify-content:flex-start!important;
}

@media(max-width:650px) {
  html body[data-ui-layout] :is(.mlbb-shell,.telegram-shell)
    .checkout-panel > .title.account-step > .account-profile-icon {
    flex-basis:25px!important;
    width:25px!important;
    height:25px!important;
    min-width:25px!important;
  }

  html body[data-ui-layout] :is(.mlbb-shell,.telegram-shell)
    .checkout-panel > .title.account-step > .account-profile-icon > svg {
    width:21px;
    height:21px;
  }
}

/* /assets/weekly-route-parity-r233.css */
/* r233: Diamond route geometry, kept 4% smaller for the Weekly dialog. */
html body[data-ui-layout] .store-dialog.weekly-dialog svg.weekly-guide-route {
  display:block;
  width:96%;
  height:auto;
  margin-inline:auto;
  overflow:visible;
  background:transparent;
}

@media(max-width:340px) {
  html body[data-ui-layout] .store-dialog.weekly-dialog svg.weekly-guide-route {
    width:100%;
  }
}

/* /assets/popup-reveal-parity-r234.css */
/* Weekly Pass and Diamond x2 use the same entrance as the Redeem Code dialog. */
@media (prefers-reduced-motion:no-preference) {
  html body[data-ui-layout] .store-dialog.bonus-dialog[open]:not(.ht-slow-closing) {
    animation-name:ht-redeem-in-r202!important;
  }
  html body[data-ui-layout] .store-dialog.bonus-dialog[open]:not(.ht-slow-closing)::backdrop {
    animation-name:ht-redeem-backdrop-r202!important;
  }
}

/* /assets/package-art-background-r239.css */
/* r248: retain the dark black-blue artwork slot and normalize every package
   image inside it. Card size, slot size, text, spacing and states stay intact. */
html body[data-ui-layout][data-ui-layout] :is(.mlbb-shell,.telegram-shell) .topup #packages.packages .pack .pack-artplate {
  background-color:#040a13!important;
  background-image:
    radial-gradient(circle at 78% 18%,rgba(31,139,203,.24) 0,rgba(31,139,203,0) 46%),
    linear-gradient(145deg,#02060d 0%,#061522 48%,#0a2d49 100%)!important;
}

/* Absolute sizing prevents square source files from resolving to 72px high
   inside a 72x60 phone slot. Contain shows the complete original artwork. */
html body[data-ui-layout][data-ui-layout] #packages.packages .pack .pack-artplate > img.pack-icon {
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  box-sizing:border-box!important;
  object-fit:contain!important;
  object-position:center!important;
  transform:none!important;
  transform-origin:center!important;
}

