/* -------------------- CSS RESET -------------------- */*,
*::before,
*::after {
  box-sizing: border-box;
}@media (hover: none), (pointer: coarse) {
  *,
  *::before,
  *::after {
    -webkit-tap-highlight-color: transparent;
  }

  a,
  button,
  input,
  select,
  textarea,
  label,
  summary,
  [role="button"],
  [tabindex],
  .btn,
  .p-btn,
  .glass-button,
  .icon-button,
  .game-card,
  .allgames-card,
  .flash-sale-card,
  .tools-home-card,
  .topup-other-game-card,
  .pay {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
}html,
body {
  min-height: 100%;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}html {
  scroll-behavior: smooth;
  scroll-padding-top: 86px;
  scrollbar-gutter: stable;
  min-height: 100%;
  background: var(--app-safe-zone-color, #857a5b);
  background-color: var(--app-safe-zone-color, #857a5b);
}@media (min-width: 769px) {
  html {
    overflow-y: scroll;
  }
}@supports (overflow: clip) {
  html,
  body {
    overflow-x: clip;
  }
}* {
  scroll-behavior: smooth;
}body {
  min-height: 100%;
  margin: 0;
  font-family:
    "Plus Jakarta Sans",
    ui-sans-serif,
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    Ubuntu,
    Cantarell,
    Noto Sans,
    Helvetica Neue,
    Arial,
  "Apple Color Emoji",
  "Segoe UI Emoji";
  color: var(--body-text-color, #2b271d);
  background: transparent;
  background-color: transparent;
}@supports (height: 100dvh) {
  html,
  body {
    min-height: 100dvh;
  }
}img {
  max-width: 100%;
  display: block;
}button {
  font: inherit;
  cursor: pointer;
}a {
  color: inherit;
  text-decoration: none;
}.material-symbols-rounded {
  font-family: "Material Symbols Rounded" !important;
  font-weight: normal;
  font-style: normal;
  font-size: 22px;
  line-height: 1;
  display: inline-block;
  white-space: nowrap;
  text-transform: none;
  letter-spacing: normal;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "liga";
  overflow: hidden;
  vertical-align: middle;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}[data-number-flow-ready] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}[data-number-flow-ready].is-number-flowing {
  text-shadow: 0 0 16px rgba(255, 255, 255, 0.26);
  transition: text-shadow 180ms ease;
}input[type="search"] {
  -webkit-appearance: none;
  appearance: none;
}input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  display: none;
  -webkit-appearance: none;
  appearance: none;
}/* -------------------- SHARED LAYOUT -------------------- */:where(.container) {
  width: min(1200px, 92vw);
  margin: 0 auto;
}:where([class~="container-main"]) {
  width: var(--container-main-width, min(1200px, 92vw));
  max-width: var(--container-main-max-width, calc(100% - 24px));
  margin: var(--container-main-margin, 20px auto 80px);
}@media (min-width: 769px) {
  .container,
  .container-main {
    padding-left: 24px;
    padding-right: 24px;
  }
}/* Keep browser autofill from overriding shared field styles */input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  caret-color: inherit;
  transition: background-color 9999s ease-in-out 0s, color 9999s ease-in-out 0s;
}/* -------------------- THEME -------------------- */:root {
  --red-900: #1a0003;
  --red-700: #9b0a1a;
  --red-600: #c3162b;
  --red-500: #e01931;
  --red-400: #ff2e3a;
  --black: #0b0b0b;
  --white: #ffffff;

  /* color.md: Light Contrast Theme */
  --body-text-color: #2B2418;
  --text-muted: #5F523B;
  --shadow-strong: 0 18px 42px rgba(24, 32, 51, 0.12);
  --shadow-soft: 0 10px 26px rgba(24, 32, 51, 0.08);
  --site-panel-bg: rgba(255, 255, 255, 0.94);
  --site-panel-border: rgba(24, 32, 51, 0.13);
  --site-panel-divider: rgba(24, 32, 51, 0.10);
  --site-panel-shadow: rgba(24, 32, 51, 0.10);
  --site-panel-surface: rgba(246, 248, 252, 0.92);
  --site-panel-surface-strong: #ffffff;
  --site-panel-accent: rgba(224, 25, 49, 0.10);
  --site-panel-accent-strong: rgba(224, 25, 49, 0.20);
  --site-primary-button: #3A2B16;
  --site-primary-button-hover: #2B2418;
  --site-primary-button-text: #FFF9EA;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-3xl: 36px;
  --transition: 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --app-bg-color: #FAF5EB;
  --app-safe-zone-color: var(--nav-cream-50, #FCF9F1);
  --app-bg-pattern:
    radial-gradient(900px 420px at 12% 0%, rgba(224, 25, 49, 0.08), transparent 58%),
    linear-gradient(180deg, #FAF5EB 0%, #F5ECE0 100%);
}/* -------------------- BACKGROUND -------------------- */.app-bg {
  overflow: hidden;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: auto;
  z-index: -1;
  width: 100%;
  height: 100vh;
  min-height: 100vh;
  background: var(--app-bg-pattern);
  background-color: var(--app-bg-color);
  filter: none;
  pointer-events: none;
}@supports (height: 100svh) {
  .app-bg {
    height: 100svh;
    min-height: 100svh;
  }
}@supports (height: 100dvh) {
  .app-bg {
    height: 100dvh;
    min-height: 100dvh;
  }
}@supports (height: 100lvh) {
  .app-bg {
    height: 100lvh;
    min-height: 100lvh;
  }
}@supports (padding: max(0px)) {
  html {
    background: var(--app-safe-zone-color);
    background-color: var(--app-safe-zone-color);
  }

  .app-bg {
    top: calc(env(safe-area-inset-top, 0px) * -1);
    height: calc(100lvh + env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px) + 96px);
    min-height: calc(100lvh + env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px) + 96px);
  }
}.app-bg::before,
.app-bg::after,
.app-bg-base {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  border-radius: 50%;
  background: transparent;
  transform: translate3d(0, 0, 0);
  will-change: transform;
  pointer-events: none;
}.app-bg::before {
  z-index: 1;
  box-shadow:
    56.93vw 708px 0 rgba(255, 255, 255, 0.9),
    56.93vw 2708px 0 rgba(255, 255, 255, 0.9),
    54.69vw 1222px 0 rgba(255, 255, 255, 0.9),
    54.69vw 3222px 0 rgba(255, 255, 255, 0.9),
    63.66vw 669px 0 rgba(255, 255, 255, 0.9),
    63.66vw 2669px 0 rgba(255, 255, 255, 0.9),
    88.12vw 1911px 0 rgba(255, 255, 255, 0.9),
    88.12vw 3911px 0 rgba(255, 255, 255, 0.9),
    68.17vw 262px 0 rgba(255, 255, 255, 0.9),
    68.17vw 2262px 0 rgba(255, 255, 255, 0.9),
    56.3vw 672px 0 rgba(255, 255, 255, 0.9),
    56.3vw 2672px 0 rgba(255, 255, 255, 0.9),
    24.31vw 1796px 0 rgba(255, 255, 255, 0.9),
    24.31vw 3796px 0 rgba(255, 255, 255, 0.9),
    66.48vw 1452px 0 rgba(255, 255, 255, 0.9),
    66.48vw 3452px 0 rgba(255, 255, 255, 0.9),
    25.93vw 1962px 0 rgba(255, 255, 255, 0.9),
    25.93vw 3962px 0 rgba(255, 255, 255, 0.9),
    97.39vw 1884px 0 rgba(255, 255, 255, 0.9),
    97.39vw 3884px 0 rgba(255, 255, 255, 0.9),
    77.65vw 1575px 0 rgba(255, 255, 255, 0.9),
    77.65vw 3575px 0 rgba(255, 255, 255, 0.9),
    7.37vw 1009px 0 rgba(255, 255, 255, 0.9),
    7.37vw 3009px 0 rgba(255, 255, 255, 0.9),
    35.64vw 1742px 0 rgba(255, 255, 255, 0.9),
    35.64vw 3742px 0 rgba(255, 255, 255, 0.9),
    81.91vw 670px 0 rgba(255, 255, 255, 0.9),
    81.91vw 2670px 0 rgba(255, 255, 255, 0.9),
    84.98vw 819px 0 rgba(255, 255, 255, 0.9),
    84.98vw 2819px 0 rgba(255, 255, 255, 0.9),
    10.85vw 1953px 0 rgba(255, 255, 255, 0.9),
    10.85vw 3953px 0 rgba(255, 255, 255, 0.9),
    53.38vw 1776px 0 rgba(255, 255, 255, 0.9),
    53.38vw 3776px 0 rgba(255, 255, 255, 0.9),
    41.26vw 51px 0 rgba(255, 255, 255, 0.9),
    41.26vw 2051px 0 rgba(255, 255, 255, 0.9),
    81.13vw 26px 0 rgba(255, 255, 255, 0.9),
    81.13vw 2026px 0 rgba(255, 255, 255, 0.9),
    94.1vw 1158px 0 rgba(255, 255, 255, 0.9),
    94.1vw 3158px 0 rgba(255, 255, 255, 0.9),
    74.78vw 1275px 0 rgba(255, 255, 255, 0.9),
    74.78vw 3275px 0 rgba(255, 255, 255, 0.9),
    9.34vw 1879px 0 rgba(255, 255, 255, 0.9),
    9.34vw 3879px 0 rgba(255, 255, 255, 0.9),
    68.2vw 335px 0 rgba(255, 255, 255, 0.9),
    68.2vw 2335px 0 rgba(255, 255, 255, 0.9),
    4.53vw 1804px 0 rgba(255, 255, 255, 0.9),
    4.53vw 3804px 0 rgba(255, 255, 255, 0.9),
    40.99vw 225px 0 rgba(255, 255, 255, 0.9),
    40.99vw 2225px 0 rgba(255, 255, 255, 0.9),
    20.22vw 1581px 0 rgba(255, 255, 255, 0.9),
    20.22vw 3581px 0 rgba(255, 255, 255, 0.9),
    93.05vw 330px 0 rgba(255, 255, 255, 0.9),
    93.05vw 2330px 0 rgba(255, 255, 255, 0.9),
    50.59vw 1563px 0 rgba(255, 255, 255, 0.9),
    50.59vw 3563px 0 rgba(255, 255, 255, 0.9),
    28.06vw 84px 0 rgba(255, 255, 255, 0.9),
    28.06vw 2084px 0 rgba(255, 255, 255, 0.9),
    25.46vw 1530px 0 rgba(255, 255, 255, 0.9),
    25.46vw 3530px 0 rgba(255, 255, 255, 0.9),
    51.57vw 1091px 0 rgba(255, 255, 255, 0.9),
    51.57vw 3091px 0 rgba(255, 255, 255, 0.9),
    10.57vw 543px 0 rgba(255, 255, 255, 0.9),
    10.57vw 2543px 0 rgba(255, 255, 255, 0.9),
    2.29vw 1172px 0 rgba(255, 255, 255, 0.9),
    2.29vw 3172px 0 rgba(255, 255, 255, 0.9),
    80.23vw 709px 0 rgba(255, 255, 255, 0.9),
    80.23vw 2709px 0 rgba(255, 255, 255, 0.9),
    48.55vw 1277px 0 rgba(255, 255, 255, 0.9),
    48.55vw 3277px 0 rgba(255, 255, 255, 0.9),
    91.5vw 491px 0 rgba(255, 255, 255, 0.9),
    91.5vw 2491px 0 rgba(255, 255, 255, 0.9);
  animation: animStar 50s linear infinite;
}.app-bg-base {
  z-index: 2;
  width: 2px;
  height: 2px;
  box-shadow:
    4.01vw 788px 0 rgba(255, 255, 255, 0.72),
    4.01vw 2788px 0 rgba(255, 255, 255, 0.72),
    19.44vw 277px 0 rgba(255, 255, 255, 0.72),
    19.44vw 2277px 0 rgba(255, 255, 255, 0.72),
    69.44vw 267px 0 rgba(255, 255, 255, 0.72),
    69.44vw 2267px 0 rgba(255, 255, 255, 0.72),
    82.26vw 377px 0 rgba(255, 255, 255, 0.72),
    82.26vw 2377px 0 rgba(255, 255, 255, 0.72),
    82.6vw 1834px 0 rgba(255, 255, 255, 0.72),
    82.6vw 3834px 0 rgba(255, 255, 255, 0.72),
    92.56vw 1473px 0 rgba(255, 255, 255, 0.72),
    92.56vw 3473px 0 rgba(255, 255, 255, 0.72),
    20.78vw 635px 0 rgba(255, 255, 255, 0.72),
    20.78vw 2635px 0 rgba(255, 255, 255, 0.72),
    4.64vw 737px 0 rgba(255, 255, 255, 0.72),
    4.64vw 2737px 0 rgba(255, 255, 255, 0.72),
    38.23vw 1262px 0 rgba(255, 255, 255, 0.72),
    38.23vw 3262px 0 rgba(255, 255, 255, 0.72),
    74.54vw 1538px 0 rgba(255, 255, 255, 0.72),
    74.54vw 3538px 0 rgba(255, 255, 255, 0.72),
    75.88vw 351px 0 rgba(255, 255, 255, 0.72),
    75.88vw 2351px 0 rgba(255, 255, 255, 0.72),
    6.37vw 404px 0 rgba(255, 255, 255, 0.72),
    6.37vw 2404px 0 rgba(255, 255, 255, 0.72),
    53.22vw 1643px 0 rgba(255, 255, 255, 0.72),
    53.22vw 3643px 0 rgba(255, 255, 255, 0.72),
    91.7vw 191px 0 rgba(255, 255, 255, 0.72),
    91.7vw 2191px 0 rgba(255, 255, 255, 0.72),
    36.56vw 1380px 0 rgba(255, 255, 255, 0.72),
    36.56vw 3380px 0 rgba(255, 255, 255, 0.72),
    41.65vw 1542px 0 rgba(255, 255, 255, 0.72),
    41.65vw 3542px 0 rgba(255, 255, 255, 0.72),
    19.79vw 1912px 0 rgba(255, 255, 255, 0.72),
    19.79vw 3912px 0 rgba(255, 255, 255, 0.72),
    75.09vw 1072px 0 rgba(255, 255, 255, 0.72),
    75.09vw 3072px 0 rgba(255, 255, 255, 0.72),
    97.08vw 734px 0 rgba(255, 255, 255, 0.72),
    97.08vw 2734px 0 rgba(255, 255, 255, 0.72),
    8.72vw 293px 0 rgba(255, 255, 255, 0.72),
    8.72vw 2293px 0 rgba(255, 255, 255, 0.72),
    21.96vw 132px 0 rgba(255, 255, 255, 0.72),
    21.96vw 2132px 0 rgba(255, 255, 255, 0.72),
    93.93vw 1197px 0 rgba(255, 255, 255, 0.72),
    93.93vw 3197px 0 rgba(255, 255, 255, 0.72);
  animation: animStar 100s linear infinite;
}.app-bg::after {
  z-index: 3;
  width: 3px;
  height: 3px;
  box-shadow:
    62.02vw 737px 1px rgba(255, 208, 137, 0.56),
    62.02vw 2737px 1px rgba(255, 208, 137, 0.56),
    6.39vw 1410px 1px rgba(255, 208, 137, 0.56),
    6.39vw 3410px 1px rgba(255, 208, 137, 0.56),
    53.98vw 867px 1px rgba(255, 208, 137, 0.56),
    53.98vw 2867px 1px rgba(255, 208, 137, 0.56),
    97.26vw 1708px 1px rgba(255, 208, 137, 0.56),
    97.26vw 3708px 1px rgba(255, 208, 137, 0.56),
    89.34vw 291px 1px rgba(255, 208, 137, 0.56),
    89.34vw 2291px 1px rgba(255, 208, 137, 0.56),
    48.69vw 1728px 1px rgba(255, 208, 137, 0.56),
    48.69vw 3728px 1px rgba(255, 208, 137, 0.56),
    33.07vw 1984px 1px rgba(255, 208, 137, 0.56),
    33.07vw 3984px 1px rgba(255, 208, 137, 0.56),
    60.63vw 1745px 1px rgba(255, 208, 137, 0.56),
    60.63vw 3745px 1px rgba(255, 208, 137, 0.56),
    21.69vw 1453px 1px rgba(255, 208, 137, 0.56),
    21.69vw 3453px 1px rgba(255, 208, 137, 0.56),
    82.29vw 271px 1px rgba(255, 208, 137, 0.56),
    82.29vw 2271px 1px rgba(255, 208, 137, 0.56),
    50.06vw 309px 1px rgba(255, 208, 137, 0.56),
    50.06vw 2309px 1px rgba(255, 208, 137, 0.56),
    53.9vw 502px 1px rgba(255, 208, 137, 0.56),
    53.9vw 2502px 1px rgba(255, 208, 137, 0.56);
  animation: animStar 150s linear infinite;
}.app-starfield {
  position: absolute;
  inset: -24vh -8vw calc(-24vh - env(safe-area-inset-bottom, 0px) - 96px);
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}.app-starfield::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse at 50% 86%, rgba(237, 232, 208, 0.5) 0%, rgba(118, 113, 96, 0.28) 28%, rgba(16, 11, 0, 0) 68%);
  opacity: 0.72;
  pointer-events: none;
}.app-starfield-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  contain: strict;
  pointer-events: none;
}.app-star {
  position: absolute;
  top: 100%;
  left: var(--star-x, 50vw);
  width: var(--star-size, 1px);
  height: var(--star-size, 1px);
  z-index: 1;
  border-radius: var(--star-radius, 999px);
  color: var(--star-color, rgba(255, 255, 255, 0.9));
  background: currentColor;
  opacity: var(--star-opacity, 0.75);
  box-shadow: 0 0 var(--star-glow, 0) currentColor;
  animation: appStarFloat var(--star-duration, 52s) linear infinite;
  animation-delay: var(--star-delay, 0s);
  transform: translate3d(var(--star-drift-start, 0), 0, 0);
  will-change: transform;
}.app-bg-overlay {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('assets/bgred.svg');
  background-size: cover;
  background-position: center var(--app-bg-overlay-y, 0%);
  background-repeat: no-repeat;
  opacity: 0.7;
  pointer-events: none;
  z-index: 1;
}@keyframes animStar {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(0, -2000px, 0);
  }
}@keyframes appStarFloat {
  from {
    transform: translate3d(var(--star-drift-start, 0), var(--star-start, 0), 0);
  }
  to {
    transform: translate3d(var(--star-drift-end, 0), calc(-124vh - var(--star-start, 0)), 0);
  }
}@supports (height: 100lvh) {
  @keyframes appStarFloat {
    from {
      transform: translate3d(var(--star-drift-start, 0), var(--star-start, 0), 0);
    }
    to {
      transform: translate3d(var(--star-drift-end, 0), calc(-124lvh - var(--star-start, 0)), 0);
    }
  }
}.center {
  align-items: center;
  justify-content: center;
}.game-title-flag {
  box-shadow: 0 0 0 1px rgba(138, 125, 95, 0.2);
}/* ====== QUICK UTILITIES TOOLS CARDS ====== */html body .tools-home-card {
  --tool-accent: #B8872A;
  --tool-accent-bg: rgba(239, 229, 201, 0.45);
  background: var(--site-panel-bg);
  border: 1px solid var(--site-panel-border);
  box-shadow: 0 6px 18px var(--site-panel-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  color: var(--body-text-color);
}html body .tools-home-card::before {
  background: radial-gradient(112px 112px at 100% 0%, rgba(184, 135, 42, 0.14), transparent 66%);
}html body .tools-home-card:hover {
  border-color: var(--site-panel-border, rgba(24, 32, 51, 0.13));
  box-shadow: 0 14px 32px var(--site-panel-shadow, rgba(24, 32, 51, 0.10)), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}html body .tools-home-index {
  color: var(--text-muted, #5F523B);
  opacity: 1;
}html body .tools-home-icon {
  border: 1px solid var(--nav-line, #DDD0AE);
  background: var(--nav-cream-100, #efe5c9);
}html body .tools-home-icon .material-symbols-rounded {
  color: var(--site-primary-button, #3A2B16);
}html body .tools-home-type {
  color: var(--site-primary-button, #3A2B16);
  font-weight: 800;
}html body .tools-home-copy strong {
  color: var(--body-text-color);
  font-weight: 900;
}html body .tools-home-copy small {
  color: var(--text-muted, #5F523B);
  opacity: 1;
}html body .tools-home-arrow {
  color: var(--text-muted, #5F523B);
  opacity: 1;
}/* ====== QUICK UTILITIES KICKER & SECTION BUTTON ====== */html body .tools-section-kicker {
  color: var(--text-muted, #5F523B);
}html body .tools-section-head h3 {
  color: var(--body-text-color, #2B2418);
}html body .tools-section-link,
html body .home-section-link,
html body .allgames-section-link,
html body .allgames-empty-action,
html body .btn-ghost,
html body .home-game-show-more {
  color: var(--nav-ink-900, #1c1410);
  background: var(--nav-cream-100, #efe5c9);
  border: 1px solid var(--nav-line, #DDD0AE);
  box-shadow: 0 2px 8px rgba(28, 20, 16, 0.04);
  text-decoration: none;
  border-radius: 14px;
}html body .tools-section-link:hover,
html body .home-section-link:hover,
html body .allgames-section-link:hover,
html body .allgames-empty-action:hover,
html body .btn-ghost:hover,
html body .home-game-show-more:hover {
  background: var(--nav-cream-200, #e9ddb9);
  border-color: var(--nav-line, #DDD0AE);
  color: var(--nav-ink-900, #1c1410);
}/* ====== GAME CARD HOVER (white glass overlay -> white text is OK) ====== */.game-card:hover .card-overlay,
.game-card:focus-within .card-overlay,
.game-card:hover .allgames-card-overlay,
.game-card:focus-within .allgames-card-overlay {
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  opacity: 1;
}.game-card:hover .card-overlay .game-title,
.game-card:focus-within .card-overlay .game-title {
  color: var(--site-primary-button-text);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}.game-card:hover .card-overlay .game-developer,
.game-card:focus-within .card-overlay .game-developer {
  color: rgba(255, 255, 255, 0.78);
}/* ====== FLASH SALE CARD TEXT ====== */html body .flash-sale-game,
html body .flash-sale-original {
  color: var(--text-muted, #5F523B);
}html body .flash-sale-item,
html body .flash-sale-price {
  color: var(--body-text-color, #2B2418);
}/* ====== HOMEPAGE GAME CARDS REPACKING ====== */.page-home .game-card.card {
  gap: 9px;
  min-height: 0;
  height: auto;
}/* Disable red background overlay gradient/shadow on mobile screens */@media (max-width: 767px) {
  .app-bg-overlay {
    display: none;
  }
}/* Light text selection */html body ::selection {
  background: rgba(24, 32, 51, 0.18);
  color: #2B2418;
  text-shadow: none;
}html body ::-moz-selection {
  background: rgba(24, 32, 51, 0.18);
  color: #2B2418;
  text-shadow: none;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.page-title, .section-title, .title,
[class*="-title"], [class*="-head"] h1, [class*="-head"] h2, [class*="-head"] h3,
.logo, .brand-logo, .nav-logo {
  font-family: "Space Grotesk", "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
}@media (prefers-reduced-motion: reduce) {
  html,
  * {
    scroll-behavior: auto;
  }
}input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-text-fill-color: inherit;
  -webkit-box-shadow: 0 0 0 1000px transparent inset;
  box-shadow: 0 0 0 1000px transparent inset;
}.app-bg-base {
  display: block;
  opacity: 1;
}.app-bg.is-random-stars::before,
.app-bg.is-random-stars::after,
.app-bg.is-random-stars .app-bg-base {
  display: none;
  animation: none;
  box-shadow: none;
}@media (prefers-reduced-motion: reduce) {
  .app-bg::before,
  .app-bg::after,
  .app-bg-base,
  .app-star {
    animation: none;
  }
}.flash-sale-media::after {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 62%, rgba(255, 255, 255, 0.1) 100%),
              linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.05));
}.page-home .tools-home-card {
  background: var(--nav-cream-50, #fcf9f1);
  border: 1px solid var(--nav-cream-300, #e7dbba);
  box-shadow: none;
}.page-home .tools-home-card:hover {
  border-color: var(--nav-cream-300, #e7dbba);
  background: var(--nav-cream-100, #faf6ec);
  box-shadow: var(--shadow-soft);
}

/* Match homepage game-card depth on related-game and MLBB hub cards. */
@media (hover: hover) and (pointer: fine) {
  .topup-other-game-media,
  .mlbb-card-media {
    position: relative;
    transform-origin: center;
    transform: perspective(800px) rotateX(var(--game-card-rotate-x, 0deg)) rotateY(var(--game-card-rotate-y, 0deg)) scale(1);
    transform-style: preserve-3d;
    will-change: transform;
    transition: transform 90ms cubic-bezier(0.2, 0.65, 0.3, 1), box-shadow 120ms ease-out;
  }

  .topup-other-game-media::before,
  .mlbb-card-media::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(
      circle at var(--game-card-light-x, 72%) var(--game-card-light-y, 28%),
      rgba(255, 255, 255, 0.3),
      transparent 58%
    );
    transition: opacity 90ms ease-out;
  }

  .topup-other-game-media.is-3d-tilting,
  .mlbb-card-media.is-3d-tilting {
    transform: perspective(800px) rotateX(var(--game-card-rotate-x, 0deg)) rotateY(var(--game-card-rotate-y, 0deg)) scale(1.05);
    box-shadow: 0 24px 40px rgba(28, 20, 16, 0.28);
  }

  .topup-other-game-card:hover .topup-other-game-media,
  .topup-other-game-card:focus-within .topup-other-game-media,
  .mlbb-hub-card:hover .mlbb-card-media,
  .mlbb-hub-card:focus-visible .mlbb-card-media,
  .mlbb-hub-card:focus-within .mlbb-card-media {
    --game-card-rotate-x: 9deg;
    --game-card-rotate-y: -9deg;
    --game-card-light-x: 72%;
    --game-card-light-y: 28%;
    transform: perspective(800px) rotateX(var(--game-card-rotate-x)) rotateY(var(--game-card-rotate-y)) scale(1.06);
    box-shadow: 0 28px 46px rgba(28, 20, 16, 0.3);
  }

  .topup-other-game-card:hover .topup-other-game-media::before,
  .topup-other-game-card:focus-within .topup-other-game-media::before,
  .mlbb-hub-card:hover .mlbb-card-media::before,
  .mlbb-hub-card:focus-visible .mlbb-card-media::before,
  .mlbb-hub-card:focus-within .mlbb-card-media::before,
  .topup-other-game-media.is-3d-tilting::before,
  .mlbb-card-media.is-3d-tilting::before {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .topup-other-game-media,
  .mlbb-card-media,
  .topup-other-game-media.is-3d-tilting,
  .mlbb-card-media.is-3d-tilting,
  .topup-other-game-card:hover .topup-other-game-media,
  .topup-other-game-card:focus-within .topup-other-game-media,
  .mlbb-hub-card:hover .mlbb-card-media,
  .mlbb-hub-card:focus-visible .mlbb-card-media,
  .mlbb-hub-card:focus-within .mlbb-card-media {
    transform: none;
    transition: none;
    box-shadow: none;
  }

  .topup-other-game-media::before,
  .mlbb-card-media::before {
    opacity: 0;
    transition: none;
  }
}