@font-face {
  font-family: "GemBet Inter";
  src: url("/assets/inter-regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
.playgem-header li[data-category="rewards"] > a[aria-current] { color: #307dff; }
body:has(.rewards-vip) {
  background: radial-gradient(circle at 8% -60%, #19387e, transparent 65%),
              linear-gradient(to right, #0e192d, #070d18);
  background-attachment: fixed;
}
.rewards-vip .rewards-nav { margin: 0 0 24px; }
.rewards-vip .reward-tabs { padding: 8px; gap: 8px; font-family: "GemBet Inter", Arial, sans-serif; }
.rewards-vip .reward-tabs a { padding: 8px 16px; line-height: 18px; }
.rewards-vip .reward-tabs img { height: 16px; width: 16px; }
.vip-tour {
  display: flex; flex-direction: column; align-items: center; gap: 48px;
  width: min(940px, 100%); margin: 0 auto; padding: 24px 0 34px;
  position: relative; color: #e5eafa; text-align: center;
  font: 400 16px/20px "GemBet Inter", Arial, sans-serif;
}
.tour-controls { width: 100%; height: 40px; display: grid; place-items: center; }
.tour-controls [data-tour-skip] {
  position: absolute; right: 0; top: 22px; padding: 10px 0 10px 8px;
  color: inherit; background: transparent; border: 0; font: 400 14px/16px Arial, sans-serif;
  text-decoration: underline;
}
.tour-progress { display: flex; gap: 4px; }
.tour-progress button {
  display: grid; place-items: center; width: 27px; height: 32px; padding: 0; border: 0; background: transparent;
}
.tour-progress button::before { content: ""; width: 100%; height: 4px; border-radius: 2px; background: #070d18; }
.tour-progress [aria-current="step"]::before { background: #e5eafa; }
.tour-slide { scroll-margin-top: 40px; display: flex; flex-direction: column; align-items: center; width: 100%; gap: 48px; }
.tour-heading { display: grid; justify-items: center; gap: 8px; max-width: 380px; }
.tour-heading h2 { margin: 0; font: 700 36px/40px "GemBet Inter", Arial, sans-serif; letter-spacing: normal; }
.tour-heading p { margin: 0; font-size: 16px; line-height: 20px; color: inherit; }
.vip-orbit { position: relative; width: min(326px, 100%); aspect-ratio: 326/276; overflow: hidden; }
.vip-orbit img {
  position: absolute; top: 50%; left: 50%; width: 30.48%; height: auto; aspect-ratio: 1;
  translate: -50% -50%; object-fit: fill; pointer-events: none;
}
/* The same composition is available before JS and when reduced motion is enabled. */
.vip-orbit img:nth-child(1) { transform: translateX(-102%) scale(.8); opacity: .7; filter: blur(2px); }
.vip-orbit img:nth-child(2) { transform: scale(1.15); z-index: 2; }
.vip-orbit img:nth-child(3) { transform: translateX(102%) scale(.8); opacity: .7; filter: blur(2px); }
.vip-orbit img:nth-child(4) { transform: scale(.45); opacity: .35; filter: blur(4px); }
.tour-gold {
  display: inline-grid; place-items: center; min-width: 200px; min-height: 48px; padding: 8px 20px;
  color: #070d18; border: 0; border-radius: 100px;
  background: radial-gradient(121.64% 100.25% at 50% 0%, #e5eafab3, transparent 30%, #8f620a00 50%, #8f570a 100%), #f2d33d;
  box-shadow: inset 0 0 0 1px #ffffff65; font: 700 16px/20px "GemBet Inter", Arial, sans-serif;
}
.tour-gold:hover { filter: brightness(1.07); }
.vip-benefit-list, .reward-badges { display: grid; justify-content: center; width: 100%; margin: 0; padding: 0; list-style: none; }
.vip-benefit-list { grid-template-columns: repeat(4, 133px); gap: 24px; padding-top: 32px; }
.vip-benefit-list li { position: relative; padding: 24px 12px 12px; border: 1px solid #23345a; border-radius: 16px; background: linear-gradient(#101a2e, #1a2c50); }
.vip-benefit-list img { position: absolute; top: -25px; left: 50%; transform: translateX(-50%); }
.reward-badges { grid-template-columns: repeat(4, 142px); gap: 16px; }
.reward-badges li { display: grid; justify-items: center; gap: 6px; padding: 12px; border-radius: 12px; background: #ffffff0b; }
.reward-badges img { object-fit: contain; }
#vip-guide { margin-top: 64px; scroll-margin-top: 84px; }
@media (max-width: 1024px) {
  .vip-tour { max-width: 380px; padding: 16px 16px 26px; gap: 32px; }
  .tour-controls [data-tour-skip] { top: 18px; right: 24px; }
  .tour-slide { gap: 32px; }
  .vip-orbit { width: min(218px, 100%); aspect-ratio: 218/184; }
  .vip-benefit-list { grid-template-columns: repeat(2, minmax(0, 133px)); gap: 40px 24px; }
  .reward-badges { display: flex; gap: 12px; justify-content: flex-start; overflow-x: auto; padding-bottom: 8px; }
  .reward-badges li { flex: 0 0 142px; }
  .rewards-vip .reward-tabs { max-width: 100%; gap: 4px; }
  .rewards-vip .reward-tabs a { padding-inline: 10px; font-size: 13px; }
  #vip-guide { margin-top: 32px; }
}
@media (max-width: 360px) {
  .rewards-vip .reward-tabs { gap: 2px; padding-inline: 3px; }
  .rewards-vip .reward-tabs a { padding-inline: 5px; }
  .tour-heading h2 { font-size: 31px; line-height: 36px; }
}