:root {
  --bg: #080514;
  --panel: #110830;
  --panel-soft: rgba(17, 8, 48, 0.82);
  --border: rgba(160, 80, 255, 0.22);
  --text: #f0eaff;
  --muted: #9580c8;
  --green: #d946ef;
  --yellow: #ffd95a;
  --pink: #f43f5e;
  --violet: #7c3aed;
  --danger: #ef4444;
  --shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
  --radius-lg: 20px;
  --radius-md: 14px;
  --sidebar-width: 272px;
  --app-banner-height: 72px;
  --app-banner-safe-top: env(safe-area-inset-top, 0px);
  --app-banner-offset: 0px;
  font-family: "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
}

.has-app-banner {
  --app-banner-offset: calc(var(--app-banner-height) + var(--app-banner-safe-top));
}

.reward-pool-overlay {
  --rp-space-1: var(--space-1);
  --rp-space-2: var(--space-2);
  --rp-space-3: var(--space-3);
  --rp-space-4: var(--space-4);
  --rp-space-5: var(--space-5);
  --rp-space-6: var(--space-6);
  --rp-space-8: var(--space-8);
  --rp-radius-sm: var(--radius-sm);
  --rp-radius-md: var(--radius-md);
  --rp-radius-lg: var(--radius-lg);
  --rp-radius-xl: var(--radius-xl);
  --rp-radius-pill: var(--radius-pill);
  --rp-text-main: var(--text-primary);
  --rp-text-sub: var(--text-secondary);
  --rp-text-muted: var(--text-tertiary);
  --rp-text-accent: var(--text-money);
  --rp-border-subtle: var(--border-subtle);
  --rp-border-default: var(--border-default);
  --rp-border-strong: var(--border-strong);
  --rp-surface-base: color-mix(in srgb, var(--surface-base) 84%, var(--surface-overlay));
  --rp-surface-card: color-mix(in srgb, var(--surface-overlay) 90%, var(--surface-raised));
  --rp-surface-card-soft: color-mix(in srgb, var(--surface-overlay) 76%, transparent);
  --rp-surface-chip: color-mix(in srgb, var(--neutral-0) 10%, transparent);
  --rp-surface-accent: color-mix(in srgb, var(--surface-brand-soft) 54%, var(--surface-overlay));
  --rp-shadow-soft: var(--elevation-2);
  --rp-shadow-strong: var(--elevation-4);
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--money-gold-light) 14%, transparent), transparent 28%),
    radial-gradient(circle at 84% 12%, color-mix(in srgb, var(--brand-500) 20%, transparent), transparent 34%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface-overlay) 94%, var(--neutral-950)) 0%, color-mix(in srgb, var(--surface-base) 92%, var(--neutral-950)) 100%);
  color: var(--rp-text-main);
  overflow: hidden;
}

@media (min-width: 901px) {
  .reward-pool-overlay {
    top: 90px;
    left: calc(12px + 228px + 18px);
    z-index: 18;
    border-top-left-radius: var(--radius-lg);
    border-left: 1px solid var(--border-default);
  }

  .has-app-banner .reward-pool-overlay {
    top: calc(var(--app-banner-offset) + 90px);
  }
}

@media (min-width: 1201px) {
  .reward-pool-overlay {
    left: calc(max(16px, (100vw - 1440px) / 2) + 272px + 18px);
  }
}

.rp-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-bottom: calc(var(--rp-space-8) + var(--rp-space-1) + env(safe-area-inset-bottom, 0px));
}

.rp-header {
  display: flex;
  align-items: center;
  gap: var(--rp-space-3);
  padding: var(--rp-space-3) calc(var(--rp-space-4) + var(--rp-space-1));
  padding-top: calc(var(--rp-space-3) + env(safe-area-inset-top, 0px));
  background: color-mix(in srgb, var(--surface-overlay) 92%, transparent);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--rp-border-default);
  flex-shrink: 0;
}

.rp-header__close {
  width: calc(var(--rp-space-6) + var(--rp-space-2));
  height: calc(var(--rp-space-6) + var(--rp-space-2));
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--neutral-0) 7%, transparent);
  border: 1px solid var(--rp-border-default);
  border-radius: var(--rp-radius-sm);
  color: var(--rp-text-main);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 160ms ease-out, border-color 160ms ease-out;
}

.rp-header__close:active {
  background: var(--state-pressed);
}

.rp-header__title {
  flex: 1;
  text-align: center;
  font-size: var(--fs-heading-sm);
  font-weight: var(--fw-black);
  color: var(--rp-text-main);
  letter-spacing: 0.01em;
}

.rp-header__spacer {
  width: calc(var(--rp-space-6) + var(--rp-space-2));
  flex-shrink: 0;
}

.reward-pool-modal {}

.reward-pool-modal--loading {
  min-height: 360px;
}

.reward-pool__close {
  z-index: 5;
}

.reward-pool__hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  height: 210px;
  padding: calc(var(--rp-space-6) + var(--rp-space-1)) calc(var(--rp-space-6) + var(--rp-space-1)) var(--rp-space-6);
  background-image: url("./img/pool_bg.jpg");
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
  cursor: pointer;
}

.reward-pool__hero::after {
  content: none;
}

.reward-pool__hero-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  text-align: center;
  transform: translateY(46px);
}

.reward-pool__hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: calc(var(--rp-space-4) + var(--rp-space-1));
  width: 100%;
}

.reward-pool__copy-shade {
  display: none;
  position: absolute;
  z-index: 0;
  top: calc(-1 * (var(--rp-space-3) + 2px));
  left: calc(-1 * var(--rp-space-4));
  width: min(460px, 78%);
  height: calc(100% + 18px);
  min-height: 168px;
  border-radius: var(--rp-radius-xl);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--neutral-950) 78%, transparent) 0%, color-mix(in srgb, var(--surface-base) 56%, transparent) 52%, transparent 100%),
    radial-gradient(circle at 22% 34%, color-mix(in srgb, var(--neutral-950) 42%, transparent), transparent 58%);
  filter: blur(0.2px);
  pointer-events: none;
}

.reward-pool__tag {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 26px;
  padding: 0 calc(var(--rp-space-2) + 3px);
  border: 1px solid color-mix(in srgb, var(--money-gold) 42%, transparent);
  border-radius: var(--rp-radius-pill);
  background: linear-gradient(90deg, color-mix(in srgb, var(--money-gold) 18%, transparent), color-mix(in srgb, var(--neutral-0) 8%, transparent));
  color: color-mix(in srgb, var(--money-gold-light) 88%, var(--neutral-0));
  font-size: var(--fs-caption);
  font-weight: var(--fw-black);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  box-shadow: 0 0 18px color-mix(in srgb, var(--money-gold) 16%, transparent);
}

.reward-pool__eyebrow {
  margin-top: var(--rp-space-2);
  color: var(--rp-text-main);
  font-family: var(--font-display);
  font-size: var(--fs-heading-xl);
  font-weight: var(--fw-black);
  line-height: 1.08;
  text-transform: uppercase;
  text-shadow: 0 4px 18px color-mix(in srgb, var(--neutral-950) 42%, transparent);
}

.reward-pool__title {
  margin-top: var(--rp-space-1);
  color: var(--rp-text-main);
  font-family: var(--font-display);
  font-size: var(--fs-display-md);
  font-weight: var(--fw-black);
  line-height: 1.02;
}

.reward-pool__pool-amount {
  display: flex;
  align-items: baseline;
  gap: var(--rp-space-2);
  margin-top: calc(var(--rp-space-1) + 3px);
  color: var(--rp-text-accent);
  font-family: var(--font-display);
  font-size: clamp(36px, 6.8vw, 46px);
  font-weight: var(--fw-black);
  line-height: 0.96;
  letter-spacing: -0.02em;
  text-shadow:
    var(--money-text-shadow),
    0 0 24px color-mix(in srgb, var(--money-gold) 30%, transparent);
}

.reward-pool__pool-amount span {
  color: inherit;
  font-size: clamp(16px, 3vw, 18px);
  font-weight: var(--fw-black);
  text-shadow: var(--money-text-shadow);
}

.reward-pool__hero-title {
  margin-top: 4px;
  color: var(--rp-text-main);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  text-shadow: 0 2px 10px color-mix(in srgb, var(--neutral-950) 48%, transparent);
}

.reward-pool__vip-pill {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--rp-space-2) + 1px);
  width: fit-content;
  min-height: 36px;
  margin-top: var(--rp-space-3);
  padding: 4px 10px 4px 6px;
  border: 1px solid color-mix(in srgb, var(--money-gold) 28%, var(--rp-border-default));
  border-radius: var(--rp-radius-pill);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--surface-overlay) 92%, transparent), color-mix(in srgb, var(--surface-base) 88%, transparent));
  color: var(--rp-text-sub);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--neutral-0) 8%, transparent);
}

.reward-pool__vip-pill-badge {
  width: 28px;
  height: 28px;
  object-fit: contain;
  filter: drop-shadow(0 6px 16px color-mix(in srgb, var(--brand-500) 34%, transparent));
}

.reward-pool__vip-pill span {
  color: var(--rp-text-muted);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  line-height: 1.25;
}

.reward-pool__vip-pill strong {
  color: var(--rp-text-accent);
  font-size: 13px;
  font-weight: var(--fw-black);
  line-height: 1.1;
  text-shadow: var(--money-text-shadow);
}

.reward-pool__vip-pill svg {
  color: color-mix(in srgb, var(--money-gold-light) 76%, var(--rp-text-main));
}

.reward-pool__body {
  padding: var(--rp-space-4) var(--rp-space-5) var(--rp-space-5);
}

.reward-pool__body-vip {
  display: flex;
  justify-content: center;
  margin: 0 0 var(--rp-space-3);
}

.reward-pool__body .vc-unlock-card {
  margin: 0 0 var(--rp-space-3);
}

.reward-pool__body-vip .reward-pool__vip-pill {
  margin-top: 0;
  cursor: pointer;
}

.reward-pool__body--loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}

.reward-pool__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--rp-space-3);
}

.reward-pool__stat-card,
.reward-pool__login,
.reward-task {
  border: 1px solid var(--rp-border-default);
  border-radius: var(--rp-radius-md);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--surface-brand-soft) 18%, transparent), color-mix(in srgb, var(--overlay-brand) 14%, transparent)),
    var(--rp-surface-card-soft);
  box-shadow: var(--rp-shadow-soft);
}

.reward-pool__stat-card {
  padding: var(--rp-space-3);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.reward-pool__stat-icon {
  width: calc(var(--rp-space-6) + var(--rp-space-1));
  height: calc(var(--rp-space-6) + var(--rp-space-1));
  border-radius: var(--rp-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 5px;
}

.rp-stat--remaining { background: color-mix(in srgb, var(--warning-400) 16%, transparent); color: var(--warning-400); }
.rp-stat--claimed   { background: color-mix(in srgb, var(--success-500) 16%, transparent); color: var(--success-400); }
.rp-stat--mult      { background: color-mix(in srgb, var(--brand-500) 16%, transparent); color: var(--brand-300); }
.rp-stat--tiers     { background: color-mix(in srgb, var(--info-500) 16%, transparent); color: var(--info-400); }

.reward-pool__stat-card span {
  font-size: var(--fs-caption);
  color: var(--rp-text-muted);
  font-weight: var(--fw-semibold);
  line-height: 1.35;
}

.reward-pool__stat-card strong {
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-black);
  color: var(--rp-text-main);
  margin-top: 2px;
  letter-spacing: -0.01em;
}

.reward-pool__login {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rp-space-4);
  margin-top: var(--rp-space-4);
  padding: var(--rp-space-4);
}

.reward-pool__section-title,
.rp-section-title,
.reward-pool__challenges-title {
  font-size: var(--fs-body-md);
  font-weight: var(--fw-black);
  color: var(--rp-text-main);
}

.rp-section-title,
.reward-pool__challenges-title {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--rp-space-2);
}

.rp-section-title::before,
.reward-pool__challenges-title::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 15px;
  background: linear-gradient(180deg, var(--brand-500), var(--money-gold));
  border-radius: 2px;
  flex-shrink: 0;
}

.reward-pool__login p,
.reward-pool__note {
  margin: var(--rp-space-1) 0 0;
  color: var(--rp-text-sub);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
}

.reward-pool__summary {
  display: flex;
  justify-content: space-between;
  gap: var(--rp-space-3);
  margin: var(--rp-space-4) 0 var(--rp-space-3);
  color: var(--rp-text-sub);
  font-size: var(--fs-body-sm);
}

.reward-pool__vip-link,
.reward-pool__btn,
.reward-task__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: var(--rp-space-3) var(--rp-space-4);
  border-radius: var(--rp-radius-pill);
  border: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body-md);
  font-weight: var(--fw-semibold);
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 160ms ease-out, box-shadow 160ms ease-out, background 160ms ease-out, border-color 160ms ease-out, opacity 160ms ease-out;
}

.reward-pool__vip-link,
.reward-pool__btn {
  background: color-mix(in srgb, var(--money-gold) 18%, transparent);
  color: var(--rp-text-accent);
  border: 1px solid color-mix(in srgb, var(--money-gold-deep) 40%, transparent);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--money-gold-deep) 22%, transparent);
  text-shadow: var(--money-text-shadow);
}

.reward-task__btn {
  background: var(--money-gradient);
  color: var(--text-on-brand);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--money-gold-deep) 36%, transparent);
}

.reward-task__btn {
  width: 100%;
  margin-top: var(--rp-space-3);
  border-radius: var(--rp-radius-md);
}

.reward-task__btn:active:not(:disabled) {
  transform: scale(0.98);
}

.reward-task__btn.is-loading {
  opacity: 0.7;
  cursor: default;
}

.reward-task__btn:disabled,
.reward-pool__btn:disabled {
  cursor: default;
  color: var(--text-disabled);
  background: var(--neutral-600);
  border-color: var(--rp-border-subtle);
  box-shadow: none;
  text-shadow: none;
}

.reward-pool__tasks {
  display: grid;
  gap: var(--rp-space-3);
}

.reward-task {
  padding: var(--rp-space-4);
}

.reward-task--claimable {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--money-gold) 10%, transparent), color-mix(in srgb, var(--brand-500) 8%, transparent)),
    var(--rp-surface-card-soft);
  border-color: color-mix(in srgb, var(--money-gold) 38%, var(--rp-border-default));
  box-shadow:
    0 2px 20px color-mix(in srgb, var(--money-gold) 10%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--money-gold-light) 10%, transparent);
}

.reward-task--claimed {
  opacity: 0.68;
}

.reward-task--vip-locked {
  opacity: 0.55;
  border-style: dashed;
  cursor: pointer;
}

.reward-task--vip-locked:active {
  opacity: 0.7;
}

.reward-task__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--rp-space-3);
}

.reward-task__meta {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.reward-task__tier {
  font-size: var(--fs-heading-sm);
  font-weight: var(--fw-black);
  color: var(--rp-text-main);
  line-height: 1.15;
}

.reward-task__status {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--rp-space-2);
  border-radius: var(--rp-radius-pill);
  font-size: var(--fs-caption);
  font-weight: var(--fw-black);
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: color-mix(in srgb, var(--neutral-0) 8%, transparent);
  color: var(--rp-text-muted);
  margin-top: 0;
}

.reward-task__status--claimable {
  background: color-mix(in srgb, var(--warning-400) 18%, transparent);
  color: var(--warning-400);
}

.reward-task__status--claimed {
  background: color-mix(in srgb, var(--success-500) 15%, transparent);
  color: var(--success-400);
}

.reward-task__status--locked {
  background: color-mix(in srgb, var(--neutral-0) 5%, transparent);
  color: var(--text-disabled);
}

.reward-task__reward {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}

.reward-task__reward-label {
  font-size: 10px;
  font-weight: var(--fw-bold);
  color: color-mix(in srgb, var(--rp-text-accent) 60%, transparent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.reward-task__reward-amount {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: var(--fw-black);
  color: var(--rp-text-accent);
  line-height: 1;
  text-shadow: var(--money-text-shadow);
  white-space: nowrap;
}

.reward-task__reward-amount span {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-bold);
  color: var(--rp-text-accent);
}

.reward-task__progress {
  margin-top: var(--rp-space-3);
}

.reward-task__progress-row {
  display: flex;
  justify-content: space-between;
  gap: var(--rp-space-3);
  color: var(--rp-text-sub);
  font-size: var(--fs-body-sm);
  line-height: 1.35;
}

.reward-task__progress-row strong {
  color: var(--rp-text-main);
  font-weight: var(--fw-bold);
}

.reward-task__bar {
  height: var(--space-2);
  margin-top: 6px;
  border-radius: var(--rp-radius-pill);
  overflow: hidden;
  background: color-mix(in srgb, var(--neutral-0) 10%, transparent);
}

.reward-task__bar span {
  display: block;
  height: 100%;
  min-width: 5px;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand-500), var(--money-gold));
}

.reward-task__progress-row strong {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.reward-task__progress-check {
  display: inline-grid;
  place-items: center;
  width: 15px;
  height: 15px;
  border-radius: 999px;
  color: #062813;
  background: var(--brand-400, #4ade80);
  box-shadow: 0 0 10px color-mix(in srgb, var(--brand-500) 50%, transparent);
  flex-shrink: 0;
}

.reward-task__progress.is-complete .reward-task__progress-row strong {
  color: var(--brand-300);
}

.reward-task__progress.is-complete .reward-task__bar span {
  background: linear-gradient(90deg, var(--brand-600, #15803d), var(--brand-300));
  box-shadow: 0 0 10px color-mix(in srgb, var(--brand-500) 40%, transparent);
}

.reward-task--claimable .reward-task__btn:not(:disabled) {
  background: var(--money-gradient-rich);
  color: var(--text-on-brand);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--money-gold-deep) 42%, transparent);
}

.reward-task__btn--vip-upgrade {
  background: color-mix(in srgb, var(--brand-500) 24%, transparent);
  color: var(--brand-300);
  border: 1px solid color-mix(in srgb, var(--brand-500) 40%, transparent);
  box-shadow: none;
}

.reward-pool__loading,
.reward-pool__empty {
  display: flex;
  min-height: 120px;
  align-items: center;
  justify-content: center;
  gap: var(--rp-space-3);
  color: var(--rp-text-sub);
  font-size: var(--fs-body-md);
}

.reward-pool__challenges-header {
  margin: var(--rp-space-2) 0 var(--rp-space-3);
}

.reward-pool__challenges-title {
  margin-bottom: 5px;
}

.reward-pool__challenges-date {
  margin-left: auto;
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  color: var(--rp-text-muted);
  letter-spacing: 0.02em;
}

.reward-pool__challenges-sub {
  font-size: var(--fs-body-sm);
  color: var(--rp-text-sub);
  margin-left: 11px;
  line-height: var(--lh-body);
}

.reward-pool__challenges-progress {
  font-size: var(--fs-caption);
  color: var(--rp-text-muted);
  margin-top: 6px;
  margin-left: 11px;
}

.reward-pool__note {
  margin-top: var(--rp-space-3);
  display: none;
}

@media (max-width: 640px) {
  .rp-header {
    padding: var(--rp-space-3) var(--rp-space-4);
  }

  .reward-pool-modal {
    width: 100vw;
    max-width: 100vw;
    max-height: 96vh;
    border-radius: 0 0 18px 18px;
  }

  .reward-pool__hero {
    height: 230px;
    display: block;
    padding: calc(var(--rp-space-6) + 2px) var(--rp-space-5) var(--rp-space-6);
    background-size: 430px auto;
  }

  .reward-pool__hero-inner {
    gap: calc(var(--rp-space-4) + 2px);
  }

  .reward-pool__pool-amount {
    font-size: 42px;
  }

  .reward-pool__vip-card {
    width: 100%;
    min-width: 0;
    align-self: end;
  }

  .reward-pool__body {
    padding: var(--rp-space-4);
  }

  .reward-pool__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .reward-pool__login,
  .reward-pool__summary {
    display: grid;
  }
}

/* ── end Reward Pool redesign ─────────────────────────────────────────── */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  overflow-x: clip;
  color: var(--text);
  background: radial-gradient(circle at 15% 15%, rgba(120, 40, 220, .3), transparent 38%), radial-gradient(circle at 85% 85%, rgba(60, 20, 180, .22), transparent 38%), linear-gradient(180deg, #0e0620 0%, #080413 50%, #04020e 100%);
}

button,
input {
  font: inherit;
}

img {
  display: block;
  max-width: 100%;
}

button {
  cursor: pointer;
  border: 0;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
}

.app-shell {
  min-height: 100vh;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  min-height: 72px;
  padding: 0 24px;
  border-bottom: 1px solid rgba(160, 60, 255, .15);
  background: rgba(8, 4, 22, .88);
  backdrop-filter: blur(20px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.brand__badge {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: linear-gradient(145deg, #f43f5e, #c026d3);
  color: #fff;
  font-weight: 800;
}

.brand__title {
  font-size: 22px;
  font-weight: 800;
}

.brand__subtitle {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.topbar__left,
.topbar__center,
.topbar__actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.topbar__left {
  flex-shrink: 0;
  min-width: 0;
}

.topbar__center {
  min-width: 0;
  width: min(100%, 760px);
  justify-self: center;
  justify-content: flex-start;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  touch-action: pan-x pan-y;
}

.topbar__actions {
  flex-shrink: 0;
  min-width: 0;
  justify-content: flex-end;
}

.topbar__center::-webkit-scrollbar {
  display: none;
}

.topbar__icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(25, 12, 52, .7);
  color: var(--muted);
  flex-shrink: 0;
  transition: background .15s, color .15s;
}

.topbar__icon-btn:hover {
  background: rgba(160, 80, 255, .2);
  color: #ddd0ff;
}

.topbar__bgm-toggle {
  position: relative;
  width: 88px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(160, 80, 255, .35);
  background: rgba(25, 12, 52, .7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 11px;
  gap: 8px;
  flex-shrink: 0;
  color: #e9ddff;
  transition: border-color .2s ease, background .2s ease;
}

.topbar__bgm-toggle-text {
  position: relative;
  z-index: 2;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color .2s ease, opacity .2s ease;
}

.topbar__bgm-toggle-text svg {
  width: 15px;
  height: 15px;
  display: block;
}
.topbar__bgm-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 48px;
  height: 32px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(109, 252, 181, .25), rgba(65, 207, 255, .24));
  border: 1px solid rgba(109, 252, 181, .44);
  box-shadow: 0 4px 12px rgba(4, 25, 22, .34);
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}

.topbar__bgm-toggle.is-on .topbar__bgm-toggle-text--on {
  color: #cffff0;
}

.topbar__bgm-toggle.is-on .topbar__bgm-toggle-text--off {
  opacity: .62;
}

.topbar__bgm-toggle.is-off .topbar__bgm-toggle-thumb {
  transform: translateX(36px);
  background: linear-gradient(135deg, rgba(255, 166, 188, .24), rgba(255, 132, 182, .2));
  border-color: rgba(255, 164, 196, .42);
}

.topbar__bgm-toggle.is-off .topbar__bgm-toggle-text--on {
  opacity: .62;
}

.topbar__bgm-toggle.is-off .topbar__bgm-toggle-text--off {
  color: #ffd9e7;
}

/* Gift/promotions button in topbar 锟?eye-catching gradient */
.topbar__promotions-btn {
  background: linear-gradient(135deg, rgba(244, 63, 94, .22), rgba(168, 85, 247, .28));
  color: #f9a8d4;
  border: 1px solid rgba(244, 63, 94, .35);
}

.topbar__promotions-btn:hover {
  background: linear-gradient(135deg, rgba(244, 63, 94, .4), rgba(168, 85, 247, .45));
  color: #fce7f3;
  border-color: rgba(244, 63, 94, .6);
}

/* Hide gift button from PC topbar on mobile (already accessible via tabbar Bonus) */
@media (max-width: 900px) {
  .topbar__promotions-btn {
    display: none;
  }
  .topbar__bgm-toggle {
    display: none;
  }
}

@media (max-width: 767px) {
  .topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }

  .hero__inner {
    grid-template-columns: 1fr;
  }
}

.topbar__tasks-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  min-width: 118px;
  padding: 8px 14px;
  border-radius: 14px;
}

.topbar__tasks-btn.is-ready {
  background: linear-gradient(135deg, #16a34a, #22c55e);
  box-shadow: 0 4px 18px rgba(34, 197, 94, .35);
}

.tasks-btn__top {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.tasks-btn__badge {
  margin-left: auto;
  font-size: 10px;
  font-weight: 800;
  background: rgba(255, 255, 255, .22);
  border-radius: 99px;
  padding: 1px 7px;
  line-height: 16px;
}

.tasks-btn__badge--loading {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  padding: 0 6px;
}

.tasks-btn__spinner {
  width: 10px;
  height: 10px;
  border: 2px solid rgba(255, 255, 255, .28);
  border-top-color: #fff;
  border-radius: 50%;
  animation: captcha-spin .8s linear infinite;
}

.tasks-btn__bar {
  width: 100%;
  height: 3px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .18);
  overflow: hidden;
}

.tasks-btn__bar-fill {
  height: 100%;
  border-radius: inherit;
  background: rgba(255, 255, 255, .75);
  transition: width .4s ease;
}

.nav-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  background: rgba(28, 14, 55, .82);
  color: var(--muted);
}

.nav-pill.is-active {
  color: var(--text);
  box-shadow: 0 0 0 1px rgba(200, 80, 255, .3) inset;
}

.nav-pill__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.balance-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 170px;
  height: 42px;
  padding: 0 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, #f59e0b, #f97316, #fbbf24);
  box-shadow: 0 8px 24px rgba(249, 115, 22, .32);
  color: #5a2500;
  -webkit-text-fill-color: #5a2500;
  white-space: nowrap;
}

.balance-chip__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.currency-symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.9em;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
}

.balance-chip__icon .currency-symbol {
  min-width: 24px;
  color: inherit;
}

.balance-chip__value {
  flex: 1;
  min-width: 0;
  font-weight: 700;
  font-size: clamp(12px, 3.25vw, 14px);
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  color: #5a2500;
  -webkit-text-fill-color: #5a2500;
}

.balance-chip__add {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(120, 45, 0, .18);
  color: #fff8e6;
  font-size: 16px;
  line-height: 1;
}

.sidebar-login-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  margin-top: 12px;
  padding: 0 14px;
  min-height: 50px;
  border: 1px solid rgba(244, 114, 182, .38);
  border-radius: 14px;
  background:
    radial-gradient(circle at top left, rgba(255, 203, 112, .24), transparent 42%),
    linear-gradient(135deg, rgba(95, 29, 149, .98), rgba(190, 24, 93, .92));
  box-shadow:
    0 12px 28px rgba(131, 24, 67, .28),
    inset 0 1px 0 rgba(255, 255, 255, .18);
  color: #fff7ed;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .01em;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, filter .18s ease;
}

.sidebar-login-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 210, 140, .48);
  box-shadow:
    0 16px 34px rgba(190, 24, 93, .32),
    inset 0 1px 0 rgba(255, 255, 255, .22);
}

.sidebar-login-btn:active {
  transform: scale(.985);
}

.sidebar-login-btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 10px;
  background: rgba(255, 248, 237, .14);
  color: #fde68a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
  flex-shrink: 0;
}

.sidebar-login-btn__label {
  flex: 1;
  text-align: left;
}

.sidebar-login-btn__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 247, 237, .9);
  flex-shrink: 0;
}

.sidebar-cta {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

/* 闄愭椂浼樻儬绾㈢偣 锟?sidebar DEPOSIT 澶ф寜閽彸涓婅 */
.sidebar-deposit-btn {
  position: relative;
}

.deposit-btn__offer-badge {
  position: absolute;
  top: 6px;
  right: 8px;
  min-width: 30px;
  height: 16px;
  padding: 0 6px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ffd54a, #ff9f1a);
  border: 1px solid rgba(255, 255, 255, .28);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .22);
  color: #452100;
  font-size: 9px;
  font-weight: 900;
  line-height: 16px;
  letter-spacing: .08em;
  text-align: center;
  text-transform: uppercase;
}

/* 闄愭椂浼樻儬绾㈢偣 锟?mobile tabbar DEPOSIT */
.tabbar-deposit-wrap {
  position: relative;
}

.tabbar-offer-badge {
  position: absolute;
  top: 2px;
  right: calc(50% - 24px);
  min-width: 28px;
  height: 14px;
  padding: 0 5px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ffd54a, #ff9f1a);
  border: 1px solid rgba(255, 255, 255, .24);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .22);
  color: #452100;
  font-size: 8px;
  font-weight: 900;
  line-height: 14px;
  letter-spacing: .08em;
  text-align: center;
  text-transform: uppercase;
}

.sidebar-deposit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 50px;
  padding: 0 16px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .04em;
  box-shadow: 0 6px 22px rgba(245, 158, 11, .4);
  cursor: pointer;
  transition: filter .15s;
}

.sidebar-deposit-btn:hover {
  filter: brightness(1.1);
}

.sidebar-deposit-btn__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .25);
  flex-shrink: 0;
}

.sidebar-deposit-btn__arrow {
  margin-left: auto;
  opacity: .7;
}

.sidebar-withdraw-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid rgba(160, 80, 255, .3);
  border-radius: 12px;
  background: rgba(255, 255, 255, .04);
  color: #9580c8;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, color .15s;
}

.sidebar-withdraw-btn:hover {
  background: rgba(160, 80, 255, .12);
  color: #ddd0ff;
}

.balance-card {
  border-radius: 14px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(160, 80, 255, .18);
  overflow: hidden;
}

.balance-card__header {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  cursor: pointer;
  user-select: none;
}

.balance-card__dollar {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #ffe05c;
  color: #5b4100;
  font-size: 13px;
  font-weight: 900;
  flex-shrink: 0;
}

.balance-card__amount {
  font-size: 16px;
  font-weight: 800;
  color: #f0eaff;
  letter-spacing: -.02em;
  flex: 1;
}

.balance-card__chevron {
  flex-shrink: 0;
  color: var(--muted);
  transition: transform .22s ease;
}

.balance-card__chevron.is-open {
  transform: rotate(180deg);
}

.balance-card__rows {
  padding: 0 8px 8px;
  border-top: 1px solid rgba(255, 255, 255, .07);
}

.balance-rows {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  margin-top: 8px;
}

.balance-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .04);
  min-width: 0;
  overflow: hidden;
}

.balance-row--actionable {
  cursor: pointer;
  transition: background .15s, transform .15s;
}

.balance-row--actionable:hover {
  background: rgba(255, 255, 255, .08);
}

.balance-row--actionable:active {
  transform: scale(.99);
}

.balance-row__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 26px;
  height: 26px;
  border-radius: 8px;
}

.balance-row__icon--withdraw {
  color: #4ade80;
  background: rgba(74, 222, 128, .12);
}

.balance-row__icon--bonus {
  color: #fbbf24;
  background: rgba(251, 191, 36, .12);
}

.balance-row__icon .currency-symbol,
.sidebar-item__icon-shell .currency-symbol {
  min-width: 0;
  font-size: 11px;
}

.balance-row__icon--bj {
  background: rgba(255, 255, 255, .06);
}

.balance-row__icon--fruit {
  background: rgba(255, 255, 255, .06);
}

.balance-row__amount {
  font-size: 13px;
  font-weight: 700;
  color: #f0eaff;
  white-space: nowrap;
  flex-shrink: 0;
}

.balance-row__label {
  font-size: 11px;
  color: transparent;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.balance-row:not(:has(.balance-row__action)) .balance-row__label {
  color: #7c6aaa;
}

.balance-row__action {
  border: 0;
  border-radius: 999px;
  padding: 6px 10px;
  background: linear-gradient(135deg, #ffb81e, #ff8a00);
  color: #5a2b00;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(255, 138, 0, .2);
}

.sidebar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 0 10px;
  border: 0;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  box-sizing: border-box;
  cursor: pointer;
  transition: background .15s, color .15s;
}

.sidebar-item__badge {
  margin-left: auto;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #e53e3e;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
  flex-shrink: 0;
}

.sidebar-item__badge--success {
  background: linear-gradient(135deg, #ca8a04 0%, #facc15 48%, #f97316 100%);
  color: #5a2b00;
  box-shadow: 0 6px 16px rgba(249, 115, 22, .24);
}

.sidebar-item__badge--claim {
  background: linear-gradient(135deg, #ec4899 0%, #db2777 46%, #c026d3 100%);
  color: #fff;
  box-shadow: 0 6px 16px rgba(219, 39, 119, .28);
}

.sidebar-item__badge-gift {
  display: block;
  margin: 3px auto 0;
}

.sidebar-item--active .sidebar-item__badge {
  background: #22c55e;
}

.sidebar-item--active {
  background: rgba(100, 40, 200, .85);
  color: #e0c4ff;
}

.sidebar-item--active:hover {
  background: rgba(120, 50, 220, .95);
  color: #f0d8ff;
}

.sidebar-item--normal {
  background: rgba(255, 255, 255, .02);
  color: #9580c8;
}

.sidebar-item--normal:hover {
  background: rgba(160, 80, 255, .12);
  color: #ddd0ff;
}

.sidebar-item--ghost {
  background: rgba(255, 255, 255, .03);
  color: #7c6aaa;
}

.sidebar-item--ghost:hover {
  background: rgba(160, 80, 255, .1);
  color: #b8a4e8;
}

.sidebar-sub {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  padding: 0 12px;
  border: 0;
  border-radius: 12px;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: background .15s, color .15s;
}

.sidebar-sub--selected {
  background: linear-gradient(180deg, rgba(90, 20, 160, .9), rgba(50, 10, 100, .9));
  color: #f0c4ff;
}

.sidebar-sub--selected:hover {
  background: linear-gradient(180deg, rgba(110, 30, 180, .95), rgba(65, 15, 120, .95));
  color: #fff;
}

.sidebar-sub--default {
  background: rgba(255, 255, 255, .04);
  color: #9580c8;
}

.sidebar-sub--default:hover {
  background: rgba(160, 80, 255, .14);
  color: #ddd0ff;
}
.sidebar-sub__spin-hint {
  margin-left: auto;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 0 8px rgba(244, 114, 182, .35));
}

.sidebar-sub__spin-hint svg {
  display: block;
  transform-origin: 50% 50%;
  animation: sidebarSpinHintRotate 2.4s linear infinite;
}

@keyframes sidebarSpinHintRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.sidebar-group-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 0 10px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #ddd0ff;
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: background .15s;
}

.sidebar-group-btn--open {
  background: rgba(80, 30, 150, .76);
}

.sidebar-group-btn:hover {
  background: rgba(160, 80, 255, .18);
}

.ghost-btn,
.primary-btn,
.secondary-btn,
.outline-btn {
  border-radius: 12px;
  padding: 12px 16px;
  font-weight: 700;
}

.ghost-btn {
  color: var(--muted);
  background: rgba(25, 12, 52, .7);
}

.topbar__switch-account-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 14px;
  color: #b694f5;
  background: rgba(30, 12, 62, .88);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

.topbar__switch-account-btn:hover {
  color: #eadbff;
  background: rgba(88, 38, 168, .45);
}

.sidebar-profile__switch-account-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sidebar-profile__vip-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 30px;
  max-width: 86px;
  padding: 0 8px 0 5px;
  border: 1px solid rgba(255, 217, 90, .34);
  border-radius: 999px;
  background:
    radial-gradient(circle at 25% 20%, rgba(255, 244, 184, .24), transparent 36%),
    linear-gradient(135deg, rgba(124, 58, 237, .28), rgba(245, 158, 11, .18));
  color: #ffe9a3;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 4px 12px rgba(245, 158, 11, .12);
}

.sidebar-profile__vip-badge img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex: 0 0 20px;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .3));
}

.sidebar-profile__vip-badge span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-profile__vip-badge--locked {
  border-color: rgba(160, 80, 255, 0.18);
  background: rgba(160, 80, 255, 0.07);
  color: rgba(240, 234, 255, 0.38);
  box-shadow: none;
}

.sidebar-profile__switch-account-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 14px;
  color: #b694f5;
  background: rgba(30, 12, 62, .88);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

.sidebar-profile__switch-account-btn:hover {
  color: #eadbff;
  background: rgba(88, 38, 168, .45);
}

  @media (min-width: 901px) {
  .sidebar-profile__switch-account-wrap {
    justify-content: flex-end;
  }

  .sidebar-profile__switch-account-btn {
    display: none;
  }
}

.primary-btn {
  color: #fff;
  background: linear-gradient(135deg, #f43f5e, #c026d3);
}

.secondary-btn {
  color: #fff;
  background: linear-gradient(135deg, #7c3aed, #a855f7);
}

.outline-btn {
  color: var(--text);
  background: transparent;
  border: 1px solid rgba(160, 60, 255, .28);
}

.workspace {
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  gap: 18px;
  width: min(1440px, calc(100vw - 32px));
  margin: 18px auto 0;
  padding-bottom: var(--mobile-tabbar-reserve, 120px);
}

.sidebar {
  position: sticky;
  top: 90px;
  z-index: 2;
  display: grid;
  gap: 12px;
  align-self: start;
}

.content {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

.panel {
  background: linear-gradient(180deg, rgba(20, 10, 44, .95), rgba(10, 6, 28, .95));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.profile-card,
.section,
.aside-card,
.footer {
  padding: 16px;
}

.section {
  display: grid;
  align-content: start;
}

.avatar {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, .08);
}

.avatar img,
.wins-card__avatar img,
.shop-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.game-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
}

.profile-card__name {
  font-size: 14px;
  font-weight: 700;
}

.profile-card__uid {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.verify-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  border-radius: 14px;
  font-weight: 800;
  color: #062d1c;
  background: linear-gradient(135deg, #13bc74, #4af4a7);
}

.verify-card__gift {
  position: absolute;
  top: -8px;
  right: 12px;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 10px;
  color: #203226;
  background: var(--yellow);
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 0 10px;
}

.sidebar-brand__grid {
  display: grid;
  grid-template-columns: repeat(2, 8px);
  gap: 4px;
}

.sidebar-brand__grid span {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  border: 1px solid rgba(213, 231, 222, 0.45);
}

.sidebar-brand__wordmark {
  display: flex;
  align-items: center;
  gap: 0;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
}

.sidebar-brand__ox {
  color: #ffd94d;
}

.sidebar-brand__jackpot {
  color: #25e282;
}

.sidebar-brand__slot {
  color: #ff48b6;
}

.sidebar-shell__section {
  display: block;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(24, 12, 52, 0.96), rgba(15, 8, 34, 0.96));
  border: 1px solid rgba(110, 50, 200, 0.28);
  border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
}

.sidebar-profile {
  padding: 14px 12px 16px;
}

.sidebar-profile__row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.sidebar-profile__avatar {
  display: block;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, .08);
  background: #254438;
  flex: 0 0 44px;
}

.sidebar-profile__avatar img {
  display: block;
  width: 44px;
  height: 44px;
  object-fit: cover;
}

.sidebar-profile__meta {
  min-width: 0;
}

.sidebar-profile__name {
  overflow: hidden;
  color: #edf7f2;
  font-size: 14px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-profile__uid {
  margin-top: 4px;
  color: #a7b8b0;
  font-size: 12px;
}

.sidebar-profile__progress {
  margin-top: 14px;
  height: 6px;
  border-radius: 999px;
  background: rgba(60, 20, 100, 0.95);
  overflow: hidden;
}

.sidebar-profile__bar {
  width: 86%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #f43f5e, #a855f7);
}

.sidebar-profile__level {
  margin-top: 8px;
  color: #99a89f;
  font-size: 12px;
}

.sidebar-verify {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 14px;
  padding: 0 12px;
  min-height: 44px;
  border-radius: 14px;
  background: linear-gradient(135deg, #f43f5e, #c026d3);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.sidebar-balance {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-top: 12px;
  padding: 0 12px;
  min-height: 48px;
  border-radius: 16px;
  background: linear-gradient(90deg, #f43f5e 0%, #7c3aed 100%);
  color: #fff;
  box-shadow: 0 10px 28px rgba(160, 40, 180, 0.4);
}

.sidebar-balance__coin,
.sidebar-balance__plus {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-weight: 900;
}

.sidebar-balance__coin {
  background: #ffe05c;
  color: #5b4100;
}

.sidebar-balance__plus {
  margin-left: auto;
  background: rgba(255, 255, 255, .18);
  color: #f1efff;
  font-size: 24px;
  line-height: 1;
}

.sidebar-balance__value {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.sidebar-menu {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.sidebar-menu__primary,
.sidebar-menu__secondary {
  display: grid;
  gap: 8px;
  padding: 6px;
  border-radius: 14px;
}

.sidebar-menu__primary {
  background: linear-gradient(180deg, rgba(22, 10, 46, 0.94), rgba(14, 7, 30, 0.94));
}

.sidebar-menu__secondary {
  background: linear-gradient(180deg, rgba(38, 18, 60, 0.78), rgba(28, 12, 45, 0.78));
}

.sidebar-menu__item,
.sidebar-menu__group-title,
.sidebar-menu__sub {
  display: flex !important;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 0 10px;
  border: 0;
  border-radius: 12px;
  text-align: left;
  transition: background .18s ease, color .18s ease;
  box-sizing: border-box;
}

.sidebar-menu__item {
  color: #b0a0d0;
  background: rgba(255, 255, 255, .02);
  font-size: 13px;
  font-weight: 700;
}

.secondary-btn {
  height: 42px;
  padding: 0 24px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 14px;
  background: linear-gradient(135deg, #7c3aed, #4f46e5);
  color: #fff;
  border: 0;
  box-shadow: 0 4px 12px rgba(99, 102, 241, .3);
  cursor: pointer;
  transition: all .2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.secondary-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(99, 102, 241, .45);
  filter: brightness(1.1);
}

.outline-btn {
  height: 40px;
  padding: 0 18px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 13px;
  background: transparent;
  color: #a78bfa;
  border: 1.5px solid rgba(167, 139, 250, .35);
  cursor: pointer;
  transition: all .2s;
}

.outline-btn:hover {
  background: rgba(167, 139, 250, .1);
  border-color: rgba(167, 139, 250, .6);
  color: #fff;
}

.sidebar-menu__group.is-collapsed .sidebar-menu__group-title {
  background: transparent;
}

.sidebar-menu__group-body {
  display: grid;
  gap: 6px;
  margin-top: 6px;
  padding: 6px 0 0;
}

.sidebar-menu__arrow {
  margin-left: auto;
  color: #8de2b4;
  font-size: 11px;
  font-weight: 900;
}

.sidebar-menu__sub {
  min-height: 40px;
  padding-left: 12px;
  color: #aeb6b2;
  background: rgba(255, 255, 255, .03);
  font-size: 13px;
}

.sidebar-menu__sub.is-selected {
  color: #ffd95a;
  background: linear-gradient(180deg, #1e0840, #280d58);
}

.sidebar-menu__sub+.sidebar-menu__sub {
  background: rgba(255, 255, 255, .045);
}

.sidebar-menu__hint {
  padding: 2px 4px 0;
  color: #7f9188;
  font-size: 11px;
}

.sidebar-icon,
.sidebar-menu__sub-badge {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 900;
  flex: 0 0 auto;
}

.sidebar-icon--daily {
  color: #fff;
  background: linear-gradient(135deg, #f43f5e, #fb923c);
}

.sidebar-icon--recharge,
.sidebar-icon--pool,
.sidebar-icon--mail {
  color: #d0c4f0;
  background: rgba(160, 80, 255, .18);
}

.sidebar-icon--relief {
  color: #fff;
  background: linear-gradient(135deg, #3b82f6, #7c3aed);
}

.sidebar-icon--share {
  color: #fff;
  background: linear-gradient(135deg, #a855f7, #ec4899);
}

.sidebar-icon--help {
  color: #fff;
  background: linear-gradient(135deg, #06b6d4, #3b82f6);
}

.sidebar-menu__sub-badge--shares {
  color: #ff8b1c;
  background: #fff0c8;
}

.sidebar-menu__sub-badge--reward {
  color: #ffad40;
  background: #ffe1cb;
}

.sidebar-menu__sub-badge--whatsapp {
  color: #0d7b47;
  background: #dbffe7;
}

.sidebar-menu__sub-badge--telegram {
  color: #177dbf;
  background: #dff5ff;
}

.sidebar-help-promo {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  margin: 0 2px 4px;
  padding: 6px 10px 7px;
  border-radius: 9px;
  background:
    linear-gradient(90deg, rgba(145, 24, 24, .96), rgba(220, 38, 38, .9) 42%, rgba(249, 115, 22, .88)),
    linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0));
  color: #fff7ef;
  box-shadow:
    inset 0 1px 0 rgba(255, 244, 234, .14),
    0 6px 14px rgba(127, 29, 29, .16);
}

.sidebar-help-promo__dot {
  width: 7px;
  height: 7px;
  margin-top: 5px;
  border-radius: 999px;
  background: #fff7c2;
  box-shadow: 0 0 0 3px rgba(255, 247, 194, .14);
  animation: sidebarHelpPromoPulse 1.8s ease-in-out infinite;
}

.sidebar-help-promo__copy {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.sidebar-help-promo__title {
  min-width: 0;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: .01em;
}

.sidebar-help-promo__desc {
  min-width: 0;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: .01em;
  color: rgba(255, 240, 230, .88);
}

@keyframes sidebarHelpPromoPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.18); opacity: .78; }
}

.sidebar-vip-promo {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 8px 0 0;
  padding: 7px 10px 8px;
  border-radius: 9px;
  border: 0;
  background:
    linear-gradient(90deg, rgba(88, 28, 135, .98), rgba(124, 58, 237, .92) 45%, rgba(161, 100, 10, .9)),
    linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0));
  box-shadow:
    inset 0 1px 0 rgba(253, 230, 138, .16),
    0 6px 14px rgba(88, 28, 135, .22);
  cursor: pointer;
  text-align: left;
  transition: opacity .15s;
}

.sidebar-vip-promo:hover {
  opacity: .88;
}

.sidebar-vip-promo__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}

.sidebar-vip-promo__copy {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.sidebar-vip-promo__title {
  min-width: 0;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: .02em;
  color: #fde68a;
}

.sidebar-vip-promo__desc {
  min-width: 0;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.18;
  color: rgba(253, 230, 138, .72);
}

.sidebar-vip-promo__progress {
  display: block;
  width: 100%;
  height: 4px;
  margin-top: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(15, 23, 42, .46);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .28);
}

.sidebar-vip-promo__progress span {
  display: block;
  height: 100%;
  min-width: 6%;
  border-radius: inherit;
  background: linear-gradient(90deg, #38bdf8, #60a5fa 48%, #818cf8);
  box-shadow: 0 0 10px rgba(56, 189, 248, .45);
  transition: width .36s ease;
}

.sidebar-vip-promo__exp {
  display: block;
  margin-top: 3px;
  color: rgba(219, 234, 254, .78);
  font-size: 9px;
  font-weight: 800;
  line-height: 1.1;
}

.hero {
  min-height: 332px;
  padding: 28px;
  background: radial-gradient(circle at top right, rgba(90, 195, 255, .4), transparent 30%), linear-gradient(118deg, rgba(34, 77, 56, .92), rgba(18, 37, 64, .62)), linear-gradient(180deg, #14382b, #0b1f18);
  overflow: hidden;
}

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(280px, .95fr);
  gap: 28px;
  align-items: center;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.hero__title {
  margin: 18px 0 10px;
  font-size: clamp(34px, 4vw, 56px);
  line-height: .98;
}

.hero__desc,
.aside-card__desc,
.modal__desc {
  color: #d2eadc;
  font-size: 13px;
  line-height: 1.7;
}

.hero__cta,
.hero__stats,
.actions-row,
.footer__chips,
.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hero__stats {
  margin-top: 18px;
}

.stat-card {
  min-width: 128px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(8, 25, 19, .45);
  border: 1px solid rgba(255, 255, 255, .08);
}

.stat-card__label,
.section__sub,
.aside-card__label,
.field__label,
.platform-btn__meta,
.status-banner__desc,
.footer__text,
.footer__fine {
  color: var(--muted);
}

.stat-card__label,
.aside-card__label,
.field__label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.stat-card__value {
  margin-top: 6px;
  font-size: 20px;
  font-weight: 800;
}

.hero__visual-card {
  position: relative;
  width: min(100%, 420px);
  padding: 18px;
  border-radius: 30px;
  background: linear-gradient(180deg, rgba(16, 39, 31, .72), rgba(7, 23, 17, .94));
  border: 1px solid rgba(187, 255, 224, .12);
}

.hero__visual-card img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 20px;
}

.hero__visual-badge {
  position: absolute;
  left: 22px;
  bottom: 22px;
  min-width: 220px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(6, 18, 13, .86);
}

.hero__visual-badge strong {
  display: block;
  font-size: 15px;
}

.hero__visual-badge span {
  color: var(--muted);
  font-size: 12px;
}

.page-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 14px;
}

.stack,
.shop-drawer,
.payment-platforms,
.qr-card,
.field {
  display: grid;
  gap: 12px;
}

.section__header,
.modal__header,
.status-banner,
.mini-item,
.shop-item,
.platform-btn {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.section__header {
  margin-bottom: 8px;
  align-items: flex-start;
}

.section__header--solo {
  justify-content: flex-start;
  margin-bottom: 12px;
}

.modal__header {
  position: relative;
  align-items: flex-start;
  padding-right: 52px;
}

.modal__header .login-modal__close {
  top: 0;
  right: 0;
}

.section__header>div {
  min-width: 0;
}

.section__title {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.05;
}

.section__sub {
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.35;
}

.section--games.section--all {
  padding-bottom: 20px;
}

.all-games-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 68px;
  margin-top: 14px;
  padding: 14px 18px;
  border-radius: 18px;
  border: 1px solid rgba(222, 123, 255, .18);
  background: linear-gradient(180deg, rgba(40, 14, 88, .9), rgba(22, 8, 52, .94));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}

.all-games-loading__spinner {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .15);
  border-top-color: rgba(255, 209, 102, .95);
  border-right-color: rgba(255, 111, 195, .9);
  flex: 0 0 auto;
  animation: ppSpinnerRotate .9s linear infinite;
}

.all-games-loading__copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.all-games-loading__copy strong {
  color: #f8f1ff;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .01em;
}

.all-games-loading__copy span {
  color: rgba(205, 190, 232, .9);
  font-size: 12px;
  line-height: 1.4;
}

.section__more {
  padding: 10px 14px;
  min-height: 42px;
}

.wins-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(148px, 1fr));
  gap: 8px;
}

.wins-card,
.mini-item,
.shop-item,
.platform-btn,
.status-banner {
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(25, 12, 52, .7);
  border: 1px solid rgba(160, 80, 255, .1);
}

.wins-card {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 14px;
}

.wins-card>div:last-child {
  min-width: 0;
}

.wins-card__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.wins-card__name,
.mini-item__name,
.shop-item__name,
.platform-btn__name {
  font-weight: 700;
}

.wins-card__name {
  font-size: 13px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
}

.wins-card__game,
.mini-item__meta,
.shop-item__desc,
.shop-item__price span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.wins-card__amount,
.mini-item__value {
  margin-top: 6px;
  color: var(--yellow);
  font-weight: 800;
}

.wins-leaderboard-panel {
  padding: 10px 14px 14px;
  background: linear-gradient(rgba(0, 0, 0, .68), rgba(0, 0, 0, .68));
  border-radius: 0 0 16px 16px;
  border-top: 1px solid rgba(214, 171, 255, .26);
}

.wins-leaderboard-panel__season-hero {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 8px;
}

.wins-leaderboard-panel__season-pill {
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #0d3a53;
  border: 1px solid rgba(113, 181, 215, .55);
  background: linear-gradient(180deg, rgba(208, 242, 255, .96), rgba(176, 226, 247, .96));
  box-shadow: 0 6px 14px rgba(115, 185, 221, .24), 0 0 0 1px rgba(255, 255, 255, .55) inset;
}

.wins-leaderboard-panel__season-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #63b7dd;
  box-shadow: 0 0 0 0 rgba(99, 183, 221, .45);
  animation: winsSpotlightPulse 1.8s ease-out infinite;
}

.wins-leaderboard-panel__tabs {
  display: flex;
  width: 100%;
  justify-content: center;
  gap: 8px;
}

.wins-leaderboard-panel__tab {
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(143, 122, 199, .4);
  background: rgba(122, 82, 187, .25);
  color: #dccbff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: 0 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.wins-leaderboard-panel__tab-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  color: rgba(244, 235, 255, .92);
  line-height: 1;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .24);
}

.wins-leaderboard-panel__tab-icon svg {
  display: block;
}

.wins-leaderboard-panel__tab--daily.is-active {
  border-color: rgba(255, 219, 143, .75);
  background: linear-gradient(180deg, rgba(255, 161, 59, .94), rgba(212, 115, 26, .96));
  color: #fff8df;
  box-shadow: 0 8px 18px rgba(244, 139, 38, .32);
}

.wins-leaderboard-panel__tab--weekly.is-active {
  border-color: rgba(120, 250, 243, .6);
  background: linear-gradient(180deg, rgba(28, 196, 189, .94), rgba(17, 136, 171, .96));
  color: #eaffff;
  box-shadow: 0 8px 18px rgba(22, 158, 173, .32);
}

.wins-leaderboard-panel__period {
  margin-top: 8px;
  color: rgba(225, 208, 247, .86);
  font-size: 10px;
  line-height: 1.3;
  text-align: center;
}

.wins-leaderboard-panel__header-row,
.wins-leaderboard-panel__row,
.wins-leaderboard-panel__myrank-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) minmax(150px, 1.2fr) 126px;
  align-items: center;
  gap: 8px;
}

.wins-leaderboard-panel__header-row {
  margin-top: 10px;
  padding: 0 8px;
  color: rgba(202, 184, 241, .82);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.wins-leaderboard-panel__rows {
  margin-top: 6px;
  border: 1px solid rgba(173, 132, 247, .28);
  border-radius: 12px;
  overflow: hidden;
}

.wins-leaderboard-panel__row {
  min-height: 34px;
  padding: 0 8px;
  background: rgba(40, 15, 84, .46);
  color: #efe4ff;
  font-size: 12px;
}

.wins-leaderboard-panel__row.is-even {
  background: rgba(59, 24, 92, .52);
}

.wins-leaderboard-panel__row + .wins-leaderboard-panel__row {
  border-top: 1px solid rgba(173, 132, 247, .16);
}

.wins-leaderboard-panel__row.is-mine {
  background: linear-gradient(180deg, rgba(28, 196, 189, .94), rgba(17, 136, 171, .96));
  box-shadow: inset 0 0 0 1px rgba(120, 250, 243, .52);
}

.wins-leaderboard-panel__row.is-mine .wins-leaderboard-panel__cell--name,
.wins-leaderboard-panel__row.is-mine .wins-leaderboard-panel__cell--score,
.wins-leaderboard-panel__row.is-mine .wins-leaderboard-panel__reward-dash {
  color: #ffffff;
}

.wins-leaderboard-panel__row.is-mine .wins-leaderboard-panel__reward-chip {
  background: rgba(255, 255, 255, .16);
  border-color: rgba(225, 248, 255, .45);
}

.wins-leaderboard-panel__row.is-mine .wins-leaderboard-panel__reward-chip span {
  color: #ffffff;
}

.wins-leaderboard-panel__myrank-inline {
  color: rgba(240, 234, 255, .92);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
  white-space: nowrap;
}

.wins-leaderboard-panel__myrank-inline strong {
  color: #ffffff;
  font-weight: 900;
}

.wins-leaderboard-panel__cell--rank {
  color: #eadaff;
  font-weight: 800;
}

.wins-leaderboard-panel__rank-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .02em;
}

.wins-leaderboard-panel__rank-badge--1 {
  background: linear-gradient(180deg, rgba(255, 206, 88, .95), rgba(238, 163, 25, .95));
  color: #3f2500;
}

.wins-leaderboard-panel__rank-badge--2 {
  background: linear-gradient(180deg, rgba(233, 239, 255, .95), rgba(181, 197, 235, .95));
  color: #1f2e56;
}

.wins-leaderboard-panel__rank-badge--3 {
  background: linear-gradient(180deg, rgba(252, 182, 123, .95), rgba(216, 115, 44, .95));
  color: #421f00;
}

.wins-leaderboard-panel__rank-badge--4 {
  background: linear-gradient(180deg, rgba(199, 141, 255, .92), rgba(132, 76, 218, .96));
  color: #f8f0ff;
}

.wins-leaderboard-panel__rank-cup {
  font-size: 11px;
}

.wins-leaderboard-panel__rank-plain {
  color: #ffd98a;
  font-weight: 900;
}

.wins-leaderboard-panel__cell--name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #e4d8fb;
}

.wins-leaderboard-panel__cell--score {
  text-align: right;
  color: #ffdcb1;
  font-weight: 800;
}

.wins-leaderboard-panel__cell--reward {
  min-width: 0;
}

.wins-leaderboard-panel__reward-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(82, 45, 160, .66), rgba(58, 27, 121, .66));
  border: 1px solid rgba(186, 151, 255, .34);
}

.wins-leaderboard-panel__reward-chip img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  flex-shrink: 0;
}

.wins-leaderboard-panel__reward-chip span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #f6ecff;
  font-size: 11px;
  font-weight: 700;
}

.wins-leaderboard-panel__reward-dash {
  color: rgba(206, 190, 241, .68);
}

.wins-leaderboard-panel__empty,
.wins-leaderboard-panel__myrank-empty {
  min-height: 40px;
  display: grid;
  place-items: center;
  color: rgba(206, 190, 241, .78);
  font-size: 12px;
}

.wins-leaderboard-panel__myrank {
  margin-top: 10px;
  border: 1px solid rgba(120, 250, 243, .6);
  border-radius: 12px;
  padding: 6px 10px;
  background: linear-gradient(180deg, rgba(28, 196, 189, .94), rgba(17, 136, 171, .96));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

.wins-leaderboard-panel__myrank-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 34px;
}

.wins-leaderboard-panel__myrank-row--compact {
  min-height: 30px;
}

.wins-leaderboard-panel__myrank-label {
  color: rgba(240, 234, 255, .92);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wins-leaderboard-panel__myrank-label strong {
  color: #ffffff;
  font-weight: 900;
}

.wins-leaderboard-panel__myrank-score {
  text-align: right;
  color: #ffffff;
  font-weight: 900;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .18);
}

.tournament-leaderboard-modal {
  width: min(1160px, 96vw);
  max-width: 1160px;
  max-height: min(88vh, 920px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px;
  border-radius: 20px;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.tournament-leaderboard-modal__body {
  margin-top: 0;
}

.tournament-leaderboard-modal__loading {
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tournament-leaderboard-modal .wins-leaderboard-panel {
  border-radius: 0;
  border: 0;
  padding: 12px 14px 14px;
  background: transparent;
}

.leaderboard-rules-modal {
  width: min(760px, 95vw);
  max-height: 90vh;
  overflow: auto;
  padding: 0;
  border-radius: 24px;
  border: 1px solid rgba(147, 108, 226, .35);
  background: linear-gradient(180deg, rgba(32, 14, 72, .98), rgba(18, 8, 48, .98));
  box-shadow: 0 24px 52px rgba(6, 1, 19, .62);
}

.leaderboard-rules-modal .login-modal__close {
  top: 12px;
  right: 12px;
}

.leaderboard-rules-modal__body {
  padding: 0;
  display: grid;
  gap: 10px;
}

.leaderboard-prev-modal .leaderboard-rules-modal__body {
  padding: 0;
}

.leaderboard-rules-modal__tabs {
  margin-top: 2px;
}

.leaderboard-rules-modal .wins-leaderboard-panel__tabs {
  gap: var(--space-2);
}

.leaderboard-rules-modal .wins-leaderboard-panel__tab {
  flex: 1 1 0;
  min-width: 0;
  min-height: calc(var(--space-6) + var(--space-3));
  padding: 0 var(--space-4);
  gap: var(--space-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  border: 1px solid var(--leaderboard-tab-border);
  background: var(--leaderboard-tab-bg);
  color: var(--text-secondary);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  text-align: center;
  letter-spacing: .04em;
  box-shadow: none;
}

.leaderboard-rules-modal .wins-leaderboard-panel__tab-icon {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  color: var(--icon-primary);
  background: color-mix(in srgb, var(--neutral-0) 10%, transparent);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
}

.leaderboard-rules-modal .wins-leaderboard-panel__tab--daily.is-active,
.leaderboard-rules-modal .wins-leaderboard-panel__tab--weekly.is-active {
  border-color: var(--leaderboard-tab-active-border);
  background: var(--leaderboard-tab-active-bg);
  color: var(--leaderboard-tab-active-text);
  box-shadow: var(--elevation-2);
}

.leaderboard-rules__jackpot {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--brand-700) 70%, var(--surface-base)) 0%,
    color-mix(in srgb, var(--brand-600) 62%, var(--surface-overlay)) 46%,
    color-mix(in srgb, var(--brand-500) 52%, var(--surface-base)) 100%
  );
  border: 1px solid var(--border-brand);
  box-shadow: var(--elevation-2), inset 0 1px 0 color-mix(in srgb, var(--neutral-0) 20%, transparent);
}

.leaderboard-rules__jackpot-eyebrow {
  color: var(--text-primary);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.leaderboard-rules__jackpot-amount {
  margin-top: var(--space-1);
  line-height: 1;
  font-size: clamp(30px, 5.2vw, 44px);
  font-weight: var(--fw-black);
  letter-spacing: .01em;
  color: var(--text-money);
  text-shadow: var(--money-text-shadow);
}

.leaderboard-rules__jackpot-sub {
  margin-top: var(--space-1);
  color: var(--text-primary);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-bold);
}

.leaderboard-rules__jackpot-chips {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.leaderboard-rules__jackpot-chips span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(16, 6, 42, .36);
  border: 1px solid rgba(255, 230, 171, .38);
  color: #fff2d7;
  font-size: 11px;
  font-weight: 700;
}

.leaderboard-rules__jackpot-chips em {
  font-style: normal;
  margin-right: 5px;
  font-size: 12px;
}

.leaderboard-rules__jackpot-chips strong {
  margin-left: 4px;
  color: #ffe48b;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.leaderboard-rules__jackpot-chips strong img {
  width: 14px;
  height: 14px;
  object-fit: contain;
}

.leaderboard-rules__hot-stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
}

.leaderboard-rules__hot-stat {
  min-height: 62px;
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  background: color-mix(in srgb, var(--surface-overlay) 88%, var(--surface-base));
  border: 1px solid var(--border-default);
  display: grid;
  align-content: center;
  gap: var(--space-2);
}

.leaderboard-rules__hot-stat--top1 {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--brand-500) 28%, var(--surface-overlay)),
    color-mix(in srgb, var(--brand-700) 44%, var(--surface-base))
  );
}

.leaderboard-rules__hot-stat--threshold {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}

.leaderboard-rules__hot-stat--metric {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}

.leaderboard-rules__hot-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.leaderboard-rules__hot-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  font-size: 12px;
  line-height: 1;
  background: color-mix(in srgb, var(--surface-overlay) 70%, transparent);
  border: 1px solid var(--border-default);
}

.leaderboard-rules__hot-icon--top1 {
  background: rgba(255, 205, 92, .18);
  border-color: rgba(255, 205, 92, .4);
}

.leaderboard-rules__hot-icon--threshold {
  background: rgba(255, 165, 110, .18);
  border-color: rgba(255, 165, 110, .4);
}

.leaderboard-rules__hot-icon--metric {
  background: rgba(118, 184, 255, .18);
  border-color: rgba(118, 184, 255, .4);
}

.leaderboard-rules__hot-title {
  color: var(--text-secondary);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: .03em;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.leaderboard-rules__top1-tag {
  height: 16px;
  padding: 0 7px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  font-style: normal;
  color: #fff4cc;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .04em;
  background: linear-gradient(180deg, rgba(128, 83, 214, .9), rgba(94, 58, 172, .96));
  border: 1px solid rgba(245, 204, 116, .55);
}

.leaderboard-rules__hot-stat strong {
  color: var(--text-money);
  font-size: 14px;
  font-weight: var(--fw-black);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.leaderboard-rules__hot-stat strong img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.leaderboard-rules__card {
  border-radius: 0;
  border: 0;
  background: transparent;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.leaderboard-rules__season {
  color: var(--text-primary);
  font-size: 13px;
  font-weight: var(--fw-black);
}

.leaderboard-rules__line {
  display: grid;
  grid-template-columns: 178px minmax(0, 1fr);
  align-items: baseline;
  gap: var(--space-2);
}

.leaderboard-rules__line span {
  color: var(--text-secondary);
  font-size: 12px;
}

.leaderboard-rules__line strong {
  color: var(--text-primary);
  font-size: 12px;
  font-weight: var(--fw-bold);
}

.leaderboard-rules__desc {
  color: rgba(226, 210, 248, .88);
  font-size: 12px;
  line-height: 1.5;
}

.leaderboard-rules__list {
  margin: var(--space-1) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-2);
}

.leaderboard-rules__list li {
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.42;
}

.leaderboard-rules__section-title {
  margin-top: 2px;
  color: #ffdca5;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.leaderboard-rules__prizes {
  display: grid;
  gap: 6px;
}

.leaderboard-rules__prize-item {
  min-height: 46px;
  padding: 0 12px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: color-mix(in srgb, var(--surface-overlay) 86%, var(--surface-base));
  border: 1px solid var(--border-default);
}

.leaderboard-rules__prize-rank {
  color: #efe1ff;
  font-size: 12px;
  font-weight: 800;
}

.leaderboard-rules__prize-item .wins-leaderboard-panel__rank-badge {
  min-width: 62px;
  height: 28px;
  padding: 0 10px;
  font-size: 11px;
}

.leaderboard-rules__prize-item strong {
  color: var(--text-money);
  font-size: 12px;
  font-weight: var(--fw-black);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.leaderboard-rules__prize-item strong img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.leaderboard-rules__prize-empty {
  color: rgba(210, 190, 238, .8);
  font-size: 12px;
}

.leaderboard-rules__deposit-btn--inline {
  margin-top: 12px;
}

.leaderboard-rules__prev-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

.leaderboard-rules__prev-btn {
  text-decoration: none;
  white-space: nowrap;
}

/* ---- Previous Season Modal ---- */
.leaderboard-prev__header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.leaderboard-prev__title {
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}

.leaderboard-prev__tag {
  background: rgba(174, 136, 245, .22);
  border: 1px solid rgba(174, 136, 245, .45);
  border-radius: 6px;
  color: #d4afff;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  letter-spacing: .04em;
}

.leaderboard-prev__info {
  background: rgba(255, 255, 255, .04);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 10px;
  display: grid;
  gap: 6px;
}

.leaderboard-prev__line {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 6px;
  font-size: 12px;
}

.leaderboard-prev__line span {
  color: rgba(210, 190, 238, .7);
}

.leaderboard-prev__line strong {
  color: #f0e6ff;
  font-weight: 500;
}

.leaderboard-prev__table-head {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 100px;
  gap: 4px;
  padding: 0 10px 6px;
  color: rgba(210, 190, 238, .6);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(174, 136, 245, .18);
  margin-bottom: 4px;
}

.leaderboard-prev__rows {
  display: grid;
  gap: 2px;
}

.leaderboard-prev__row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 100px;
  gap: 4px;
  align-items: center;
  min-height: 42px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .03);
}

.leaderboard-prev__row:nth-child(even) {
  background: rgba(255, 255, 255, .055);
}

.leaderboard-prev__row.is-mine {
  background: linear-gradient(180deg, rgba(28, 196, 189, .94), rgba(17, 136, 171, .96));
  box-shadow: inset 0 0 0 1px rgba(120, 250, 243, .52);
}

.leaderboard-prev__row.is-mine .leaderboard-prev__col--name,
.leaderboard-prev__row.is-mine .leaderboard-prev__col--score {
  color: #ffffff;
}

.leaderboard-prev__myrank-card {
  margin-top: 10px;
}

.leaderboard-prev__col {
  font-size: 12px;
  color: #e8deff;
}

.leaderboard-prev__col--name {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leaderboard-prev__col--score {
  text-align: right;
  font-weight: 600;
  color: #fff1bf;
}

.leaderboard-prev__rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 24px;
  border-radius: 6px;
  background: rgba(174, 136, 245, .15);
  border: 1px solid rgba(174, 136, 245, .28);
  color: rgba(210, 190, 238, .8);
  font-size: 11px;
  font-weight: 600;
}

.leaderboard-prev__loading,
.leaderboard-prev__empty {
  padding: 32px 0;
  text-align: center;
  color: rgba(210, 190, 238, .6);
  font-size: 13px;
}

.leaderboard-rules__deposit-btn {
  width: 100%;
  text-transform: uppercase;
}

@media (max-width: 680px) {
  .leaderboard-rules-modal {
    width: min(98vw, 98vw);
    border-radius: 18px;
  }

  .leaderboard-rules-modal__body {
    padding: 0;
    gap: 8px;
  }

  .leaderboard-rules__jackpot-amount {
    font-size: clamp(26px, 7.5vw, 34px);
  }

  .leaderboard-rules__jackpot-sub {
    font-size: 12px;
  }

  .leaderboard-rules__hot-stats {
    gap: 6px;
  }

  .leaderboard-rules__line {
    grid-template-columns: 132px minmax(0, 1fr);
    gap: 8px;
  }

  .leaderboard-rules__line span,
  .leaderboard-rules__line strong,
  .leaderboard-rules__list li,
  .leaderboard-rules__desc,
  .leaderboard-rules__prize-item span,
  .leaderboard-rules__prize-item strong {
    font-size: 11px;
  }
}

@media (max-width: 680px) {
  .tournament-leaderboard-modal {
    width: min(98vw, 98vw);
    max-height: 92vh;
    padding: 6px;
    border-radius: 16px;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .tournament-leaderboard-modal__body {
    margin-top: 6px;
  }

  .tournament-leaderboard-modal .wins-leaderboard-panel {
    padding: 8px;
    border-radius: 10px;
  }
}


.withdraw-rail {
  position: relative;
  overflow: visible;
  margin-top: 14px;
  padding: 18px 20px 18px 22px;
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(45, 18, 92, .96), rgba(23, 9, 53, .98)),
    radial-gradient(circle at top left, rgba(255, 131, 70, .18), transparent 38%);
  border: 1px solid rgba(255, 128, 95, .16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 18px 36px rgba(8, 2, 22, .28);
}

.withdraw-rail::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(20, 7, 47, .28) 0%, rgba(20, 7, 47, .16) 42%, rgba(20, 7, 47, .48) 100%),
    radial-gradient(circle at 12% 50%, rgba(255, 208, 102, .12), transparent 24%),
    radial-gradient(circle at 82% 18%, rgba(255, 82, 119, .12), transparent 26%);
  pointer-events: none;
}

.withdraw-rail__bg,
.withdraw-rail__gift {
  position: absolute;
  pointer-events: none;
}

.withdraw-rail__bg {
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  overflow: hidden;
}

.withdraw-rail__bg--desktop {
  background:
    radial-gradient(circle at 78% 34%, rgba(255, 184, 77, .28), transparent 18%),
    radial-gradient(circle at 88% 16%, rgba(255, 101, 132, .22), transparent 18%),
    linear-gradient(115deg, rgba(72, 25, 145, .3), rgba(20, 7, 47, .02) 38%, rgba(255, 161, 76, .12) 100%),
    linear-gradient(135deg, rgba(45, 18, 92, .18), rgba(23, 9, 53, .04));
}

.withdraw-rail__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(18, 8, 42, .78) 0%, rgba(18, 8, 42, .46) 38%, rgba(18, 8, 42, .22) 62%, rgba(18, 8, 42, .56) 100%);
}

.withdraw-rail__gift {
  z-index: 1;
  left: 180px;
  top: -34px;
  bottom: auto;
  width: 92px;
  height: 82px;
  transform: rotate(-17deg);
  transform-origin: center bottom;
  filter: drop-shadow(0 14px 20px rgba(5, 1, 16, .3));
}

.withdraw-rail__gift::before,
.withdraw-rail__gift::after {
  content: '';
  position: absolute;
}

.withdraw-rail__gift::before {
  right: -4px;
  bottom: 4px;
  width: 34px;
  height: 34px;
  background:
    radial-gradient(circle at 22% 26%, rgba(255, 245, 204, .95) 0 11%, transparent 12%),
    radial-gradient(circle at 66% 18%, rgba(255, 232, 158, .9) 0 8%, transparent 9%),
    radial-gradient(circle at 72% 72%, rgba(255, 241, 190, .88) 0 7%, transparent 8%),
    radial-gradient(circle at 50% 50%, rgba(255, 225, 150, .32), transparent 62%);
  opacity: .86;
  filter: drop-shadow(0 0 6px rgba(255, 214, 122, .28));
  animation: withdrawGiftSparkle 2.6s ease-in-out infinite;
}

.withdraw-rail__gift::after {
  inset: 26% -8% -18% 8%;
  height: auto;
  background: radial-gradient(circle at center, rgba(255, 188, 82, .28), transparent 68%);
  filter: blur(14px);
}

.withdraw-rail__gift-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left bottom;
  display: block;
}

.withdraw-rail__gift-img--mobile {
  display: none;
}

@keyframes withdrawGiftSparkle {
  0%,
  100% {
    opacity: .42;
    transform: scale(.88) rotate(0deg);
  }

  40% {
    opacity: .96;
    transform: scale(1.04) rotate(6deg);
  }

  70% {
    opacity: .7;
    transform: scale(.95) rotate(-4deg);
  }
}

@keyframes withdrawRailSpin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.withdraw-rail.is-ready {
  border-color: rgba(45, 212, 191, .22);
}

.withdraw-rail__toolbar {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  user-select: none;
  transition: transform .2s ease, opacity .2s ease;
}

.withdraw-rail__toolbar:hover {
  transform: translateY(-1px);
}

.withdraw-rail__toolbar-actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.withdraw-rail__refresh,
.withdraw-rail__toggle {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
}

.withdraw-rail__refresh {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  color: #e8dcff;
  background: rgba(87, 49, 145, .35);
  border: 1px solid rgba(175, 121, 255, .24);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .03em;
  cursor: pointer;
  transition: transform .2s ease, background .2s ease, border-color .2s ease, opacity .2s ease;
}

.withdraw-rail__refresh:hover {
  transform: translateY(-1px);
  background: rgba(109, 60, 188, .45);
  border-color: rgba(210, 168, 255, .34);
}

.withdraw-rail__refresh:disabled {
  cursor: wait;
  opacity: .88;
}

.withdraw-rail__refresh-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.withdraw-rail__refresh.is-loading .withdraw-rail__refresh-icon {
  animation: withdrawRailSpin .8s linear infinite;
}

.withdraw-rail__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 999px;
  cursor: pointer;
  background: rgba(87, 49, 145, .18);
  border: 1px solid rgba(175, 121, 255, .16);
  transition: background .2s ease, border-color .2s ease;
}

.withdraw-rail__toggle:hover {
  background: rgba(109, 60, 188, .28);
  border-color: rgba(210, 168, 255, .26);
}

.withdraw-rail__chevron {
  width: 16px;
  height: 16px;
  object-fit: contain;
  transition: transform .25s ease;
  transform: rotate(0deg);
}

.withdraw-rail__chevron.is-open {
  transform: rotate(180deg);
}

/* ---- Global Collapse / Expand (default collapsed) ---- */
.withdraw-rail__main,
.withdraw-rail__bg,
.withdraw-rail::before {
  display: none;
}

.withdraw-rail.is-expanded .withdraw-rail__main {
  display: grid;
  margin-top: 12px;
}

.withdraw-rail.is-expanded .withdraw-rail__bg {
  display: block;
}

.withdraw-rail.is-expanded::before {
  display: block;
}

.withdraw-rail__alert {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  color: #ffd58f;
  background: rgba(255, 136, 68, .12);
  border: 1px solid rgba(255, 144, 88, .22);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.withdraw-rail.is-ready .withdraw-rail__alert {
  color: #8ff4db;
  background: rgba(20, 184, 166, .12);
  border-color: rgba(45, 212, 191, .22);
}

.withdraw-rail__alert-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffb84d;
  box-shadow: 0 0 0 0 rgba(255, 184, 77, .45);
  animation: winsSpotlightPulse 1.8s ease-out infinite;
}

.withdraw-rail.is-ready .withdraw-rail__alert-dot {
  background: #34d399;
  box-shadow: 0 0 0 0 rgba(52, 211, 153, .45);
}

.withdraw-rail__main {
  position: relative;
  z-index: 2;
  grid-template-columns: minmax(300px, 1.2fr) minmax(280px, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding-left: 0;
  padding-bottom: 0;
}

.withdraw-rail__loading {
  display: grid;
  place-items: center;
  grid-column: 1 / -1;
  justify-self: center;
  width: 100%;
  gap: 12px;
  min-height: 120px;
  padding: 18px;
}

.withdraw-rail__loading-text {
  color: #cbb8f2;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
}

.withdraw-rail__copy {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.withdraw-rail__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  color: #ff936f;
  background: linear-gradient(180deg, rgba(255, 132, 89, .18), rgba(126, 34, 206, .18));
  border: 1px solid rgba(255, 147, 111, .22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
  flex-shrink: 0;
}

.withdraw-rail.is-ready .withdraw-rail__icon {
  color: #5eead4;
  background: linear-gradient(180deg, rgba(45, 212, 191, .18), rgba(37, 99, 235, .18));
  border-color: rgba(45, 212, 191, .22);
}

.withdraw-rail__text {
  min-width: 0;
}

.withdraw-rail__headline {
  color: #fff;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -.02em;
  text-shadow: 0 10px 24px rgba(8, 2, 22, .34);
}

.withdraw-rail__sub {
  margin-top: 4px;
  color: rgba(232, 217, 255, .78);
  font-size: 14px;
  line-height: 1.35;
}

.withdraw-rail__tasks {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(220px, .92fr);
  gap: 12px;
  min-width: 0;
}

.withdraw-rail__task {
  min-width: 0;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(18, 7, 43, .38);
  border: 1px solid rgba(255, 255, 255, .09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 12px 24px rgba(9, 2, 26, .16);
  backdrop-filter: blur(10px);
}

.withdraw-rail__task--flow {
  background: linear-gradient(180deg, rgba(61, 24, 126, .34), rgba(25, 11, 57, .4));
}

.withdraw-rail__task--recharge {
  background: linear-gradient(180deg, rgba(81, 24, 90, .32), rgba(27, 10, 49, .4));
}

.withdraw-rail__task-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.withdraw-rail__task-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}

.withdraw-rail__task-value,
.withdraw-rail__task-meta {
  color: rgba(225, 204, 255, .78);
  font-size: 12px;
  font-weight: 700;
}

@media (min-width: 681px) {
  .withdraw-rail__task--flow .withdraw-rail__task-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 10px;
  }

  .withdraw-rail__task--flow .withdraw-rail__task-title {
    white-space: normal;
    line-height: 1.18;
    padding-right: 0;
  }

  .withdraw-rail__task--recharge {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .withdraw-rail__task--recharge .withdraw-rail__task-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 10px;
  }

  .withdraw-rail__task--recharge .withdraw-rail__task-title {
    white-space: normal;
    line-height: 1.18;
    padding-right: 0;
  }

  .withdraw-rail__task--recharge .withdraw-rail__task-meta {
    margin-top: 6px;
  }
}

@media (min-width: 1281px) {
  .withdraw-rail__task--flow .withdraw-rail__task-head {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }

  .withdraw-rail__task--flow .withdraw-rail__task-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .withdraw-rail__task--flow .withdraw-rail__task-value {
    margin-top: 2px;
  }
}

.withdraw-rail__progress {
  position: relative;
  overflow: hidden;
  height: 8px;
  margin: 10px 0 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
}

.withdraw-rail__progress-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #8b5cf6, #d946ef 55%, #fb7185);
  box-shadow: 0 0 18px rgba(217, 70, 239, .3);
}

.withdraw-rail__task-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 74px;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  color: #ffcc91;
  background: rgba(255, 146, 89, .14);
  border: 1px solid rgba(255, 150, 100, .2);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.withdraw-rail__task-badge.is-done {
  color: #8ff4db;
  background: rgba(20, 184, 166, .12);
  border-color: rgba(45, 212, 191, .2);
}

.withdraw-rail__actions {
  display: grid;
  gap: 10px;
  justify-items: stretch;
  min-width: 172px;
  position: relative;
  z-index: 2;
}

.withdraw-rail__cta,
.withdraw-rail__rules {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 14px;
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 900;
}

.withdraw-rail__cta {
  color: #fff;
  border: 0;
  overflow: hidden;
  background: linear-gradient(90deg, #7c3aed, #c026d3 62%, #ec4899);
  box-shadow: 0 12px 24px rgba(168, 85, 247, .24);
}

.withdraw-rail__rules {
  color: rgba(220, 199, 255, .9);
  background: rgba(34, 14, 72, .68);
  border-color: rgba(168, 120, 255, .22);
}

@keyframes winsSpotlightPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 207, 95, .42);
  }

  70% {
    box-shadow: 0 0 0 10px rgba(255, 207, 95, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(255, 207, 95, 0);
  }
}

/* Shared motion for withdraw reward gift visuals */
@keyframes promoCoinGiftFloat {
  0%, 100% { transform: rotate(8deg) translateY(0); }
  50% { transform: rotate(6deg) translateY(-6px); }
}

@keyframes promoCoinGiftGlow {
  0%, 100% {
    filter: drop-shadow(0 14px 22px rgba(5, 1, 16, .32));
  }

  50% {
    filter: drop-shadow(0 18px 28px rgba(5, 1, 16, .34)) drop-shadow(0 0 18px rgba(255, 195, 86, .22));
  }
}

/* ---- PromoCoin Withdraw Modal (step 3: deposit CTA) ---- */

.withdraw-modal-burst {
  inset: -12px -8px -8px;
  z-index: 2;
  opacity: .95;
}

.withdraw-modal-burst--promo {
  inset: 6px -6px -8px;
}

.withdraw-modal-burst--overlay {
  inset: -2px -8px -8px;
}

.withdraw-modal-burst--registration {
  inset: -12px -10px -8px;
}

.withdraw-modal-burst .register-burst__piece {
  transform: translate3d(-50%, -50%, 0) rotate(0deg) scale(1);
  offset-distance: 0%;
  offset-rotate: 0deg;
  will-change: offset-distance, transform, opacity;
  animation:
    withdrawModalBurstTravelCoin var(--rb-dur, 5600ms) linear forwards,
    withdrawModalBurstFadeCoin var(--rb-dur, 5600ms) ease-out forwards;
  animation-delay: var(--rb-delay, 0s), var(--rb-delay, 0s);
}

.withdraw-modal-burst .register-burst__piece--cash {
  animation:
    withdrawModalBurstTravelCash var(--rb-dur, 7600ms) linear forwards,
    withdrawModalBurstFadeCash var(--rb-dur, 7600ms) ease-out forwards;
  animation-delay: var(--rb-delay, 0s), var(--rb-delay, 0s);
}

.withdraw-modal-gift {
  position: relative;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 3;
  transform: rotate(8deg);
  transform-origin: center bottom;
  filter: drop-shadow(0 14px 22px rgba(5, 1, 16, .32));
  animation: promoCoinGiftFloat 3s ease-in-out infinite, promoCoinGiftGlow 2.4s ease-in-out infinite;
}

.game-overlay-withdraw-modal .withdraw-modal-gift {
  width: 118px;
  height: 118px;
}

.withdraw-modal-gift::before {
  content: '';
  position: absolute;
  right: -3px;
  bottom: 7px;
  width: 40px;
  height: 40px;
  background:
    radial-gradient(circle at 22% 26%, rgba(255, 245, 204, .95) 0 11%, transparent 12%),
    radial-gradient(circle at 66% 18%, rgba(255, 232, 158, .9) 0 8%, transparent 9%),
    radial-gradient(circle at 72% 72%, rgba(255, 241, 190, .88) 0 7%, transparent 8%),
    radial-gradient(circle at 50% 50%, rgba(255, 225, 150, .32), transparent 62%);
  opacity: .9;
  filter: drop-shadow(0 0 6px rgba(255, 214, 122, .3));
  animation: withdrawGiftSparkle 2.4s ease-in-out infinite;
}

.withdraw-modal-gift::after {
  content: '';
  position: absolute;
  inset: 20% -16% -22% 6%;
  background:
    radial-gradient(circle at 35% 65%, rgba(255, 208, 112, .44), transparent 58%),
    radial-gradient(circle at 62% 42%, rgba(255, 176, 74, .34), transparent 62%);
  filter: blur(14px);
  opacity: .86;
  animation: withdrawModalGiftAuraPulse 2.2s ease-in-out infinite;
}

.withdraw-modal-gift__img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.promo-coin-withdraw-modal__header {
  display: grid;
  gap: 10px;
  padding: 4px 20px 12px;
  text-align: center;
  justify-items: center;
}

.promo-coin-withdraw-modal__step-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 200, 87, .45);
  background: rgba(255, 200, 87, .12);
  color: #ffd36d;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.promo-coin-withdraw-modal__title {
  font-size: clamp(19px, 4.5vw, 22px);
  font-weight: 900;
  line-height: 1.15;
  color: #fff;
  letter-spacing: -.02em;
  text-align: center;
}

.promo-coin-withdraw-modal__amount-wrap {
  justify-self: center;
  display: grid;
  gap: 4px;
  padding: 10px 18px;
  border-radius: 18px;
  background: rgba(255, 200, 87, .1);
  border: 1px solid rgba(255, 200, 87, .22);
  text-align: center;
}

.promo-coin-withdraw-modal__amount-label {
  color: rgba(255, 222, 153, .88);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.promo-coin-withdraw-modal__amount {
  color: #ffd36d;
  font-size: clamp(28px, 6vw, 38px);
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1;
}

.promo-coin-withdraw-modal__headline {
  font-size: 22px;
  line-height: 1.08;
  font-weight: 800;
  text-align: center;
  color: #fff;
  letter-spacing: -.02em;
}

.promo-coin-withdraw-modal__desc {
  text-align: center;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(216, 224, 255, .78);
}

.promo-coin-withdraw-modal__features {
  display: grid;
  gap: 7px;
}

.promo-coin-withdraw-modal__feature {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 200, 87, .14);
}

.promo-coin-withdraw-modal__feature-index {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #ffd36d, #ffb800);
  color: #4d2800;
  font-size: 11px;
  font-weight: 900;
  flex-shrink: 0;
}

.promo-coin-withdraw-modal__feature-text {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, .95);
  line-height: 1.35;
}

.promo-coin-withdraw-modal__note {
  font-size: 12px;
  color: rgba(178, 189, 224, .72);
  line-height: 1.42;
  text-align: center;
}

.promo-coin-withdraw-modal__deposit-btn,
.promo-coin-withdraw-modal__later-btn {
  width: 100%;
}

.promo-cashout-modal__body {
  display: grid;
  gap: 14px;
  justify-items: center;
  text-align: center;
  padding: 0;
}

.promo-cashout-modal__amount {
  line-height: 1;
  color: var(--text-money);
  font-size: 34px;
  font-weight: 900;
  letter-spacing: 0;
  text-shadow: var(--money-text-shadow);
}

.promo-cashout-modal__amount-label {
  margin-top: -8px;
  color: rgba(255, 243, 190, .88);
  font-size: 13px;
  font-weight: 800;
}

.promo-cashout-modal__header-desc {
  margin-top: var(--space-2);
  max-width: 320px;
}

.promo-cashout-modal__title {
  font-size: 28px;
  line-height: 1.08;
  font-weight: 800;
  color: #ffe680;
  letter-spacing: -.02em;
}

.promo-cashout-modal__title-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 13px 5px 9px;
  border-radius: 999px;
  background: rgba(255, 216, 80, .1);
  border: 1px solid rgba(255, 216, 80, .28);
  color: #ffd850;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .02em;
}
.promo-cashout-modal__tag-icon {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}
.promo-cashout-modal__tag-icon .currency-symbol {
  min-width: 0;
  font-size: .72em;
  font-weight: 900;
}
.promo-cashout-modal__tag-icon--promo { color: #fbbf24; }
.promo-cashout-modal__tag-icon--cash  { color: #4ade80; }

.promo-cashout-modal__title-token-icon {
  width: 16px;
  height: 16px;
  object-fit: contain;
  flex-shrink: 0;
  vertical-align: middle;
}

.promo-cashout-modal__desc-rule,
.promo-cashout-modal__desc-rule-extra {
  display: block;
}

.promo-cashout-modal__desc-rule {
  width: 100%;
  margin-top: 0;
  text-align: center;
  color: var(--text-secondary);
  font-size: 11.5px;
  line-height: 1.35;
}

.promo-cashout-modal__desc-rule-extra {
  margin-top: 2px;
}

.promo-cashout-modal__desc-rule--below {
  margin-top: 2px;
}

.promo-cashout-modal__stats {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.promo-cashout-modal__stat {
  min-width: 0;
  padding: 9px 8px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .08);
}

.promo-cashout-modal__stat span,
.promo-cashout-modal__stat strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.promo-cashout-modal__stat span {
  color: rgba(205, 214, 244, .62);
  font-size: 10.5px;
  font-weight: 700;
}

.promo-cashout-modal__stat strong {
  margin-top: 4px;
  color: rgba(255, 255, 255, .92);
  font-size: 12px;
  font-weight: 900;
}

.promo-cashout-modal__stat:nth-child(1) strong {
  color: var(--text-money);
}

.promo-cashout-modal__stat:nth-child(2) strong {
  color: var(--text-brand);
}

.promo-cashout-modal__stat:nth-child(3) strong {
  color: var(--danger-500);
}

.promo-cashout-modal__flow-note {
  width: 100%;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 214, 102, .1);
  color: rgba(255, 230, 168, .9);
  font-size: 13px;
  line-height: 1.5;
}

/* 鈹€鈹€ Flow warning redesign 鈹€鈹€ */
.promo-cashout-modal__flow-warn {
  width: 100%;
  padding: 10px 12px 9px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--money-gold) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--money-gold-light) 38%, transparent);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}

.promo-cashout-modal__flow-warn-head {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-money);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.promo-cashout-modal__flow-nums {
  display: flex;
  align-items: center;
  gap: 8px;
}

.promo-cashout-modal__flow-num {
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
}

.flow-num--from {
  color: color-mix(in srgb, var(--text-money) 54%, transparent);
  text-decoration: line-through;
  font-size: 13px;
}

/* Lock / unlock icon between the two numbers */
.promo-cashout-modal__flow-lock-icon {
  position: relative;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.flow-lock-svg {
  position: absolute;
  transition: opacity .3s ease, transform .42s cubic-bezier(.34, 1.56, .64, 1);
}

/* Default: locked visible, unlocked hidden */
.flow-lock-svg--locked   { opacity: 1; transform: scale(1); color: color-mix(in srgb, var(--text-money) 80%, transparent); }
.flow-lock-svg--unlocked { opacity: 0; transform: scale(.3) rotate(-25deg); color: var(--text-money); }

/* Hold phase: swap icons 锟?unlock bounces in with glow */
[data-flow-ready="1"] .flow-lock-svg--locked   { opacity: 0; transform: scale(.3); }
[data-flow-ready="1"] .flow-lock-svg--unlocked {
  opacity: 1;
  transform: scale(1) rotate(0deg);
  color: var(--text-money);
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--money-gold) 70%, transparent));
  animation: flowUnlockPop .45s cubic-bezier(.34, 1.56, .64, 1) forwards,
             flowUnlockPulse 1.1s .45s ease-in-out infinite;
}

@keyframes flowUnlockPop {
  0%   { transform: scale(.3) rotate(-25deg); }
  100% { transform: scale(1) rotate(0deg); }
}

@keyframes flowUnlockPulse {
  0%, 100% { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--money-gold) 60%, transparent)); transform: scale(1); }
  50%      { filter: drop-shadow(0 0 14px color-mix(in srgb, var(--money-gold) 90%, transparent)); transform: scale(1.15); }
}

.flow-num--to {
  color: var(--text-money);
  font-size: 18px;
  transition: color .3s ease, text-shadow .3s ease;
}

/* Hold phase: target number glows gold */
[data-flow-ready="1"] .flow-num--to {
  color: var(--text-money);
  text-shadow: 0 0 16px color-mix(in srgb, var(--money-gold) 72%, transparent);
}

/* Bar track */
.promo-cashout-modal__flow-bar {
  position: relative;
  width: 100%;
  height: 6px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--money-gold-deep) 18%, transparent);
  overflow: hidden;
}

/* Baseline (current requirement, static) */
.promo-cashout-modal__flow-bar-base {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 5px;
  background: color-mix(in srgb, var(--money-gold-light) 36%, transparent);
  min-width: 6px;
}

/* Growth bar: JS drives --bar-scale via counter animation for sync with number */
.promo-cashout-modal__flow-bar-grow {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  border-radius: 5px;
  background: linear-gradient(90deg, var(--money-gold-deep) 0%, var(--money-gold) 55%, var(--money-gold-light) 100%);
  transform-origin: left center;
  transform: scaleX(var(--bar-scale, 0));
  box-shadow: 0 0 10px color-mix(in srgb, var(--money-gold-deep) 48%, transparent);
}

.promo-cashout-modal__flow-detail {
  font-size: 11px;
  color: color-mix(in srgb, var(--text-money) 76%, transparent);
  letter-spacing: .02em;
}

@keyframes promoCashoutWarnPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(255, 120, 30, 0);
    border-color: rgba(255, 120, 30, .4);
  }
  50% {
    box-shadow: 0 0 14px 2px rgba(255, 120, 30, .18);
    border-color: rgba(255, 120, 30, .72);
  }
}



/* CTA with icon */
.promo-cashout-modal__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.promo-cashout-modal__cta-icon {
  font-size: 18px;
  line-height: 1;
}

.promo-cashout-modal__actions,
.promo-cashout-modal__cta {
  width: 100%;
}

.promo-cashout-modal__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 8px;
}

.promo-cashout-modal__actions > .btn {
  width: 100%;
}

.promo-cashout-modal__actions--single {
  grid-template-columns: minmax(0, 1fr);
}

.promo-cashout-modal__footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  justify-items: stretch;
  gap: var(--space-3);
}

.promo-cashout-modal__later {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 112px;
  justify-self: center;
  border: 0;
  box-shadow: none;
  background: transparent;
  padding-left: var(--space-5);
  padding-right: var(--space-5);
}

.promo-cashout-modal__footer .promo-cashout-modal__later.btn.secondary,
.promo-cashout-modal__footer .promo-cashout-modal__later.btn.secondary:hover,
.promo-cashout-modal__footer .promo-cashout-modal__later.btn.secondary:active,
.promo-cashout-modal__footer .promo-cashout-modal__later.btn.secondary:focus-visible {
  border: 0;
  border-color: transparent;
  box-shadow: none;
}

.promo-cashout-modal__cta--disabled {
  opacity: .62;
  cursor: not-allowed;
}

.game-overlay-withdraw-modal__body {
  display: grid;
  gap: var(--space-3);
  justify-items: center;
  text-align: center;
  padding: 0;
}

.game-overlay-withdraw-modal__amount {
  line-height: 1;
  color: var(--text-money);
  font-size: 34px;
  font-weight: 900;
  letter-spacing: -.01em;
  text-shadow: 0 6px 20px rgba(255, 188, 81, .22);
}

.game-overlay-withdraw-modal__title {
  font-size: 28px;
  line-height: 1.08;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -.02em;
}

.game-overlay-withdraw-modal__desc {
  max-width: 290px;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(231, 237, 255, .88);
}

.game-overlay-withdraw-modal__footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: var(--space-3);
}

.game-overlay-withdraw-modal__cta {
  width: 100%;
}

.game-overlay-withdraw-modal__later {
  width: auto;
  justify-self: center;
}

@media (max-width: 480px) {
  .promo-cashout-modal__amount {
    font-size: 28px;
  }

  .promo-cashout-modal__title {
    font-size: 24px;
  }

  .game-overlay-withdraw-modal__title {
    font-size: 24px;
  }

  .game-overlay-withdraw-modal__amount {
    font-size: 28px;
  }
}

@media (max-width: 520px) and (max-height: 760px) {
  .promo-cashout-modal__body {
    gap: 10px;
  }

  .promo-cashout-modal__amount,
  .game-overlay-withdraw-modal__amount {
    font-size: 26px;
  }

  .promo-cashout-modal__title-tag {
    min-height: 28px;
    padding: 3px 10px;
    font-size: 12px;
  }

  .promo-cashout-modal__flow-warn {
    padding: 9px 10px;
  }

  .promo-cashout-modal__stats {
    gap: 6px;
  }

  .promo-cashout-modal__stat {
    padding: 8px 6px;
  }

  .promo-cashout-modal__flow-nums {
    gap: 6px;
  }

  .promo-cashout-modal__flow-num {
    font-size: 14px;
  }

  .flow-num--to {
    font-size: 16px;
  }

  .promo-cashout-modal__flow-detail {
    font-size: 10px;
  }

  .promo-cashout-modal__cta {
    min-height: 42px;
  }
}

@media (max-width: 520px) and (max-height: 640px) {
  .promo-cashout-modal__body {
    gap: 8px;
  }

  .promo-cashout-modal__amount,
  .game-overlay-withdraw-modal__amount {
    font-size: 24px;
  }

  .promo-cashout-modal__amount-label,
  .promo-cashout-modal__stat strong,
  .promo-cashout-modal__flow-warn-head {
    font-size: 11px;
  }

  .promo-cashout-modal__desc-rule,
  .promo-cashout-modal__stat span,
  .promo-cashout-modal__flow-detail {
    font-size: 10px;
  }
}

@media (max-width: 480px) {
  .promo-coin-withdraw-modal__amount-wrap {
    padding: 8px 16px;
  }

  .promo-coin-withdraw-modal__amount {
    font-size: 30px;
  }

  .promo-coin-withdraw-modal__headline {
    font-size: 20px;
  }
}

@keyframes withdrawModalGiftAuraPulse {
  0%, 100% {
    opacity: .58;
    transform: scale(.94);
  }

  50% {
    opacity: .95;
    transform: scale(1.06);
  }
}

@keyframes withdrawModalBurstTravelCoin {
  0% {
    offset-distance: 0%;
    transform: translate3d(-50%, -50%, 0) rotate(0deg) scale(.98);
  }

  100% {
    offset-distance: 100%;
    transform: translate3d(-50%, -50%, 0) rotate(var(--rb-rotate, 260deg)) scale(1);
  }
}

@keyframes withdrawModalBurstTravelCash {
  0% {
    offset-distance: 0%;
    transform: translate3d(-50%, -50%, 0) rotate(0deg) scale(1.02);
  }

  100% {
    offset-distance: 100%;
    transform: translate3d(-50%, -50%, 0) rotate(var(--rb-rotate, 260deg)) scale(1.04);
  }
}

@keyframes withdrawModalBurstFadeCoin {
  0% {
    opacity: 0;
  }

  7% {
    opacity: .98;
  }

  62% {
    opacity: .94;
  }

  82% {
    opacity: .5;
  }

  100% {
    opacity: 0;
  }
}

@keyframes withdrawModalBurstFadeCash {
  0% {
    opacity: 0;
  }

  9% {
    opacity: .98;
  }

  68% {
    opacity: .92;
  }

  88% {
    opacity: .46;
  }

  100% {
    opacity: 0;
  }
}

.game-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.game-card {
  position: relative;
  --game-card-tag-top: 5px;
  overflow: hidden;
  border-radius: 16px;
  aspect-ratio: 1 / 1.1;
  background: #1a0840;
  cursor: pointer;
  transition: transform .22s cubic-bezier(.4, 0, .2, 1), box-shadow .22s ease;
}

.game-card:hover {
  transform: translateY(-6px) scale(1.03);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .55), 0 0 0 2px rgba(192, 100, 255, .45);
}



.game-card:hover img {
  transform: scale(1.06);
  transition: transform .35s ease;
}

.game-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center top;
  display: block;
  transition: transform .35s ease;
}

.game-card:active {
  transform: translateY(-2px) scale(.98);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .4);
  transition-duration: .1s;
}

.game-card__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
  padding: 26px 7px 10px;
  background: linear-gradient(to bottom, transparent 22%, rgba(0, 0, 0, .72) 58%, rgba(0, 0, 0, .9) 100%);
}

.game-card__title {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  flex: 1;
  min-width: 0;
  color: rgba(255, 255, 255, .92);
}

.game-card__overlay .game-card__tag {
  flex-shrink: 0;
  padding: 2px 5px;
  font-size: 9px;
}

.game-card__meta {
  display: none;
}

.game-card__tags {
  position: absolute;
  top: var(--game-card-tag-top);
  left: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: calc(100% - 16px);
  z-index: 2;
}

.game-card__tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  color: var(--text-secondary);
  background: color-mix(in srgb, var(--neutral-900) 82%, transparent);
}

.game-card__tag--state.game-card__tag--hot {
  color: var(--danger-400);
}

.game-card__tag--state.game-card__tag--new {
  color: var(--success-400);
}

.game-card__tag-icon {
  font-size: 10px;
  line-height: 1;
  color: inherit;
}

.game-card__tag--brand {
  border: 1px solid rgba(255, 255, 255, .14);
  background: linear-gradient(135deg, rgba(17, 24, 39, .9), rgba(55, 65, 81, .82));
}

.game-card__tag--brand.game-card__tag--pg {
  background: linear-gradient(135deg, #0f766e, #14b8a6);
}

.game-card__tag--brand.game-card__tag--pp {
  background: linear-gradient(135deg, #7c2d12, #f97316);
}

.game-card__tag--brand.game-card__tag--jl {
  background: linear-gradient(135deg, #1d4ed8, #60a5fa);
}

.game-card__tag--brand.game-card__tag--sp {
  background: linear-gradient(135deg, #4c1d95, #8b5cf6);
}

.game-card__tag--brand.game-card__tag--bg {
  background: linear-gradient(135deg, #9a3412, #fb7185);
}

.game-card__tag--brand.game-card__tag--jd {
  background: linear-gradient(135deg, #1f2937, #059669);
}

.game-card__tag--brand.game-card__tag--ev {
  background: linear-gradient(135deg, #0f172a, #334155);
}

.game-card__tag--brand.game-card__tag--gm,
.game-card__tag--brand.game-card__tag--default {
  background: linear-gradient(135deg, #312e81, #6d28d9);
}

.offer-card {
  background: radial-gradient(circle at top right, rgba(200, 40, 255, .3), transparent 30%), linear-gradient(160deg, rgba(40, 15, 80, .9), rgba(20, 10, 55, .84));
}

.offer-card__price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 14px 0 18px;
}

.offer-card__price strong {
  font-size: 32px;
}

.offer-card__price span {
  color: var(--muted);
  text-decoration: line-through;
  font-size: 14px;
}

.footer__top {
  display: grid;
  grid-template-columns: 1.45fr 1fr 1.1fr 1.05fr;
  gap: var(--space-6) calc(var(--space-6) + var(--space-1));
  align-items: start;
}

.footer__block {
  padding: 0 calc(var(--space-6) + var(--space-1));
  border-left: 1px solid var(--border-default);
}

.footer__block:first-child {
  padding-left: 0;
  border-left: 0;
}

.footer__brand-logo {
  display: block;
  width: auto;
  height: 64px;
  max-width: 100%;
}

.footer__brand-sub {
  margin-top: var(--space-1);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.footer__text {
  margin-top: var(--space-3);
  font-size: var(--fs-body-sm);
  line-height: 1.8;
  color: var(--text-secondary);
}

.footer__text--compact {
  margin-top: var(--space-2);
  line-height: 1.7;
}

.footer__block-label {
  margin-bottom: var(--space-3);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.footer__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.footer__social {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  align-self: start;
}

.footer__social-label {
  margin-bottom: 0;
  flex-shrink: 0;
}

.footer__social-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.footer__social-link {
  display: grid;
  place-items: center;
  width: var(--space-12);
  height: var(--space-12);
  border-radius: var(--radius-full);
  color: var(--neutral-0);
  text-decoration: none;
  transition: transform .18s ease, filter .18s ease;
}

.footer__social-link:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
}

.footer__social-link--x {
  background: #0f0f18;
}

.footer__social-link--tg {
  background: #229ed9;
}

.footer__social-link--fb {
  background: #1877f2;
}

.footer__social-link--ig {
  background: #e4405f;
}

.footer__social-link i {
  font-size: var(--space-6);
  line-height: 1;
}

.footer__sep {
  margin: var(--space-5) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-default);
}

.footer__badge-sections {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4) var(--space-6);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-default);
}

.footer__badge-section {
  min-width: 0;
}

.footer__badge-section:nth-child(2) {
  grid-row: span 2;
}

.footer__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.footer__badges--providers {
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-3);
}

.footer__fine {
  font-size: var(--fs-caption);
  line-height: 1.7;
  color: var(--text-secondary);
  opacity: 0.7;
}

.footer__fine--secondary {
  margin-top: var(--space-2);
}

.footer__links {
  justify-content: center;
  font-size: var(--fs-caption);
  margin-top: var(--space-3);
  color: var(--text-secondary);
  gap: var(--space-2);
}

.footer__links a,
.footer__links span {
  color: var(--text-primary);
  opacity: 1;
  transition: color .15s;
  cursor: pointer;
}

.footer__links a:hover,
.footer__links span:hover {
  color: var(--text-brand);
  opacity: 1;
}





.footer__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: calc(var(--space-8) + var(--space-2));
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--surface-overlay) 92%, transparent);
  border: 1px solid var(--border-default);
  color: var(--text-secondary);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-bold);
}

.footer__chip--mail {
  background: #ea4335;
  border-color: transparent;
  color: var(--neutral-0);
}

.footer__chip--alert {
  justify-content: center;
  min-width: calc(var(--space-12) + var(--space-1));
  background: color-mix(in srgb, var(--danger-500) 18%, var(--surface-overlay));
  border-color: color-mix(in srgb, var(--danger-400) 40%, var(--border-default));
  color: var(--danger-400);
}

.footer__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: calc(var(--space-8) + var(--space-2));
  padding: 0 var(--space-3);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, color-mix(in srgb, var(--neutral-0) 8%, transparent), color-mix(in srgb, var(--neutral-0) 4%, transparent));
  border: 1px solid var(--border-default);
  color: var(--text-primary);
  font-size: var(--fs-caption);
  font-weight: var(--fw-black);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.footer__badge--logo {
  min-width: 136px;
  min-height: 48px;
  padding: var(--space-2) var(--space-4);
}

.footer__badge--alert {
  background: linear-gradient(180deg, color-mix(in srgb, var(--danger-500) 20%, transparent), color-mix(in srgb, var(--danger-500) 10%, transparent));
  border-color: color-mix(in srgb, var(--danger-400) 40%, var(--border-default));
  color: var(--danger-400);
}

.footer__badge--provider {
  min-width: auto;
  min-height: auto;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: var(--radius-none);
}

.footer__badge-logo {
  display: block;
  width: auto;
  max-width: 108px;
  height: 26px;
  object-fit: contain;
}

.footer__badge--provider .footer__badge-logo {
  max-width: 44px;
  height: 24px;
}

.lang-flag {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
}

.lang-switcher {
  position: relative;
  flex-shrink: 0;
}

.lang-switcher__btn {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 10px;
  border: 1px solid rgba(160, 80, 255, .25);
  border-radius: 999px;
  background: rgba(40, 16, 85, .7);
  cursor: pointer;
  transition: background .18s, border-color .18s;
}

.lang-switcher__btn:hover {
  background: rgba(80, 30, 150, .75);
  border-color: rgba(192, 100, 255, .5);
}

.lang-switcher__arrow {
  color: var(--muted);
  transition: transform .22s ease;
  flex-shrink: 0;
}

.lang-switcher.is-open .lang-switcher__arrow {
  transform: rotate(180deg);
}

.lang-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 160px;
  padding: 6px;
  border-radius: 16px;
  background: var(--surface-overlay);
  border: 1px solid var(--border-default);
  box-shadow: var(--elevation-4);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px) scale(.97);
  transition: opacity .2s ease, transform .2s ease;
  z-index: 25;
}

.lang-switcher.is-open .lang-dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.lang-dropdown__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 42px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, color .15s;
}

.lang-dropdown__item:hover {
  background: var(--state-hover);
  color: var(--text-primary);
}

.lang-dropdown__item.is-active {
  color: var(--text-primary);
  background: var(--state-selected);
}

.lang-dropdown__check {
  margin-left: auto;
  color: var(--icon-brand);
  font-size: 14px;
  line-height: 1;
}

@media (max-width: 900px) {
  .lang-switcher__btn {
    padding: 0 8px;
    gap: 0;
  }

  .lang-switcher__arrow {
    display: none;
  }

  .lang-dropdown {
    right: 0;
  }
}

.contact-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .18s ease, filter .18s ease;
}

.contact-btn--wa {
  background: #25D366;
}

.contact-btn--tg {
  background: #229ED9;
}

.contact-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
}

.contact-btn:active {
  transform: translateY(0) scale(.97);
}

.contact-btn i,
.footer__chip i {
  font-size: var(--fs-heading-sm);
  line-height: 1;
}

.shop-item {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
}

.shop-item img {
  width: 72px;
  height: 72px;
  border-radius: 16px;
}

.shop-item__meta {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.shop-item__price {
  min-width: 108px;
  text-align: right;
}

.shop-item__price strong {
  display: block;
  font-size: 20px;
}

.pill {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  color: var(--muted);
  background: rgba(255, 255, 255, .05);
  font-size: 12px;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  grid-template-areas: "dialog";
  padding: 20px;
  background: rgba(0, 0, 0, .56);
  backdrop-filter: blur(14px);
  z-index: 60;
}

html.blocking-overlay-open,
html.blocking-overlay-open body {
  overflow: hidden;
}

html.game-overlay-open .modal-backdrop {
  z-index: 1300;
  background: rgba(0, 0, 0, .34);
  backdrop-filter: blur(8px);
}

html.game-overlay-open .modal-backdrop--shop-in-game {
  z-index: 1450;
}

html.game-overlay-open .modal-backdrop--payment-in-game {
  z-index: 1450;
}

.modal-backdrop__dismiss {
  grid-area: dialog;
  align-self: stretch;
  justify-self: stretch;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.modal-backdrop > .modal,
.modal-backdrop > .fr-dialog,
.modal-backdrop > .pp-dialog,
.modal-backdrop > .promo-dialog,
.modal-backdrop > .reward-upgrade-confirm,
.modal-backdrop > .phone-bound-confirm {
  grid-area: dialog;
  position: relative;
  z-index: 1;
}

.global-loading {
  position: fixed;
  inset: 0;
  min-height: 100vh;
  z-index: 160;
  display: grid;
  place-items: center;
  pointer-events: all;
}

html.game-overlay-open .global-loading {
  z-index: 1450;
}

.global-loading__backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--money-gold) 24%, transparent), transparent 28%),
    color-mix(in srgb, var(--overlay-heavy) 86%, var(--surface-base));
  backdrop-filter: blur(10px);
}

.global-loading__center {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: min(260px, 62vw);
  aspect-ratio: 1 / 1;
}

.global-loading__halo {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--money-gold-light) 26%, transparent) 0%, color-mix(in srgb, var(--money-gold) 18%, transparent) 38%, transparent 72%);
  filter: blur(10px);
  animation: loadingLogoGlow 1.28s ease-in-out infinite;
}

.global-loading__logo {
  position: relative;
  z-index: 1;
  display: block;
  width: min(168px, 42vw);
  max-height: 116px;
  object-fit: contain;
  filter:
    drop-shadow(0 0 24px color-mix(in srgb, var(--money-gold) 30%, transparent))
    drop-shadow(0 18px 30px color-mix(in srgb, var(--neutral-950) 46%, transparent));
  transform-origin: center bottom;
  animation: loadingLogoBounce 1.08s cubic-bezier(.2, .78, .28, 1) infinite;
}

.game-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: auto;
  min-height: 100vh;
  height: 100vh;
  height: var(--vvh, 100dvh);
  min-height: var(--vvh, 100dvh);
  z-index: 1200;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background:
    radial-gradient(circle at top left, rgba(120, 32, 220, .24), transparent 30%),
    #05010f;
}

.game-overlay.is-preloading {
  /* Keep the game iframe alive but don't block UI */
  inset: auto;
  top: -9999px;
  left: -9999px;
  width: 1px;
  height: 1px;
  min-height: 1px;
  opacity: 0;
  pointer-events: none;
  background: transparent;
}

.game-overlay__topbar {
  position: absolute;
  top: max(12px, env(safe-area-inset-top, 0px));
  left: max(12px, env(safe-area-inset-left, 0px));
  right: max(12px, env(safe-area-inset-right, 0px));
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: none;
}

.game-overlay__controls {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 34px;
  pointer-events: auto;
}

.game-overlay--landscape-portrait .game-overlay__topbar {
  left: auto;
  right: max(12px, env(safe-area-inset-right, 0px));
  justify-content: flex-end;
}

.game-overlay--landscape-portrait .game-overlay__controls {
  flex-direction: row-reverse;
  gap: 20px;
}

.game-overlay--landscape-portrait .game-overlay__progress {
  position: relative;
  width: 69px;
  min-width: 69px;
  gap: 0;
}

.game-overlay--landscape-portrait .game-overlay__progress-ring {
  transform: rotate(90deg);
}

.game-overlay--landscape-portrait .game-overlay__progress-value {
  position: absolute;
  top: 50%;
  left: 6px;
  transform: translate(-100%, -50%) rotate(90deg);
  transform-origin: center;
  margin-top: 0;
}

.game-overlay--landscape-portrait .game-overlay__progress-arc-label {
  width: 100px;
  height: 40px;
  top: 50%;
  left: calc(100% - 8px);
  transform: translate(-50%, -50%) rotate(90deg);
  transform-origin: center center;
}

.game-overlay--landscape-portrait .game-overlay__close svg {
  transform: rotate(90deg);
  transform-origin: center;
}

.game-overlay--landscape-portrait .game-overlay__frame {
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  width: var(--vvh, 100vh);
  height: var(--vvw, 100vw);
  transform: translate(-50%, -50%) rotate(90deg);
  transform-origin: center center;
}

.game-overlay__close {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(7, 3, 20, .72);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .35);
  backdrop-filter: blur(12px);
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
}

.game-overlay__close svg {
  width: 24px !important;
  height: 24px !important;
  flex-shrink: 0;
  display: block;
}

.game-overlay__progress {
  --game-overlay-progress: 0%;
  width: 75px;
  min-width: 75px;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  color: #fff;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  position: relative;
}

.game-overlay__progress-ring {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: conic-gradient(#16a34a var(--game-overlay-progress), rgba(4, 18, 8, 0.88) 0);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .42);
}

.game-overlay__progress-ring::before {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(5, 28, 14, .95), rgba(2, 12, 5, .98));
}

.game-overlay__progress-core {
  position: relative;
  z-index: 1;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: radial-gradient(circle at 25% 25%, rgba(255, 255, 255, .22), rgba(255, 255, 255, .04));
  border: 1px solid rgba(134, 239, 172, .46);
  box-shadow: inset 0 0 0 1px rgba(22, 163, 74, .35);
}

.game-overlay__progress-core-lock {
  color: #86efac;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.game-overlay__progress-core-lock svg {
  display: block;
}

.game-overlay__progress-core-value {
  color: #fff3bf;
  font-size: 11px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .01em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
  white-space: nowrap;
}

.game-overlay__progress-arc-label {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 118px;
  height: 40px;
  pointer-events: none;
  z-index: 2;
}

.game-overlay__progress-arc-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.game-overlay__progress-arc-track {
  display: none;
}

.game-overlay__progress-arc-text-path {
  fill: none;
}

.game-overlay__progress-arc-text {
  fill: url(#gameOverlayArcTextGradientBlue);
  font-size: 11.5px;
  font-weight: 900;
  letter-spacing: .15px;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .98)) drop-shadow(0 2px 4px rgba(0, 0, 0, .85));
  dominant-baseline: middle;
}

.game-overlay__progress.is-ready .game-overlay__progress-arc-text {
  fill: url(#gameOverlayArcTextGradientYellow);
}

.game-overlay__progress-value {
  min-width: 66px;
  max-width: 160px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .2);
  background: rgba(6, 3, 18, .7);
  color: rgba(255, 245, 222, .95);
  font-size: 10px;
  line-height: 1.2;
  text-align: center;
  font-weight: 700;
  letter-spacing: .01em;
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 3px;
  white-space: nowrap;
}

.game-overlay__progress-value-amount {
  font-size: 14px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0;
}

.game-overlay__progress-value--ready {
  white-space: normal;
  display: inline-flex;
  flex-wrap: wrap;
  row-gap: 2px;
  column-gap: 4px;
  justify-content: center;
}

.game-overlay__progress-value--ready .game-overlay__progress-value-prefix,
.game-overlay__progress-value--ready .game-overlay__progress-value-amount,
.game-overlay__progress-value--ready .game-overlay__progress-value-suffix {
  white-space: nowrap;
}

.game-overlay__progress.is-ready .game-overlay__progress-ring {
  background: conic-gradient(
    from 88deg,
    #ffe47a 0deg,
    #ffc550 120deg,
    #ff9f34 240deg,
    #ffd965 360deg
  );
  animation: gameOverlayProgressGlow 1.35s ease-in-out infinite;
}

.game-overlay__progress.is-ready .game-overlay__progress-ring::before {
  background: radial-gradient(circle at 30% 28%, #f5c842, #c97d08);
}

.game-overlay__progress.is-ready .game-overlay__progress-core {
  background: radial-gradient(circle at 28% 28%, #ffe87a, #d98a0a);
  border-color: rgba(255, 240, 160, .85);
  box-shadow: inset 0 0 0 1px rgba(255, 200, 60, .5), inset 0 2px 6px rgba(255, 255, 180, .3);
}

.game-overlay__progress.is-ready .game-overlay__progress-core-lock {
  color: #ffffff;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .35));
}

.game-overlay__progress.is-ready .game-overlay__progress-value {
  border-color: rgba(255, 198, 88, .86);
  color: #ffeec2;
  background: linear-gradient(180deg, rgba(67, 27, 2, .78), rgba(34, 13, 2, .86));
}

@keyframes gameOverlayProgressGlow {
  0%,
  100% {
    box-shadow: 0 8px 18px rgba(0, 0, 0, .4), 0 0 6px rgba(255, 183, 69, .28);
    filter: brightness(.92) saturate(1);
  }

  50% {
    box-shadow: 0 12px 26px rgba(0, 0, 0, .48), 0 0 20px rgba(255, 183, 69, .85), 0 0 34px rgba(255, 145, 45, .46);
    filter: brightness(1.18) saturate(1.12);
  }
}

.game-overlay__frame {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
}

html.game-overlay-open,
html.game-overlay-open body {
  overflow: hidden;
}

@keyframes loadingLogoBounce {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  34% {
    transform: translateY(-18px) scale(1.06, .94);
  }

  52% {
    transform: translateY(0) scale(.95, 1.08);
  }

  68% {
    transform: translateY(-6px) scale(1.02, .98);
  }
}

@keyframes loadingLogoGlow {
  0%,
  100% {
    opacity: .66;
    transform: scale(.92);
  }

  52% {
    opacity: 1;
    transform: scale(1.04);
  }
}

.modal {
  width: min(720px, 100%);
  max-height: calc(100vh - 40px);
  overflow: auto;
  padding: var(--space-5);
  border-radius: 26px;
  background: linear-gradient(180deg, #170a38, #0c0620);
  border: 1px solid rgba(160, 60, 255, .2);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
}

.modal,
.fr-dialog,
.pp-dialog,
.promo-dialog,
.reward-upgrade-confirm,
.phone-bound-confirm {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.4) transparent;
}

.modal::-webkit-scrollbar,
.fr-dialog::-webkit-scrollbar,
.pp-dialog::-webkit-scrollbar,
.promo-dialog::-webkit-scrollbar,
.reward-upgrade-confirm::-webkit-scrollbar,
.phone-bound-confirm::-webkit-scrollbar {
  width: 6px;
  display: block !important;
}

.modal::-webkit-scrollbar-track,
.fr-dialog::-webkit-scrollbar-track,
.pp-dialog::-webkit-scrollbar-track,
.promo-dialog::-webkit-scrollbar-track,
.reward-upgrade-confirm::-webkit-scrollbar-track,
.phone-bound-confirm::-webkit-scrollbar-track {
  background: transparent;
}

.modal::-webkit-scrollbar-thumb,
.fr-dialog::-webkit-scrollbar-thumb,
.pp-dialog::-webkit-scrollbar-thumb,
.promo-dialog::-webkit-scrollbar-thumb,
.reward-upgrade-confirm::-webkit-scrollbar-thumb,
.phone-bound-confirm::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.4);
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  background-clip: padding-box;
}

.modal::-webkit-scrollbar-thumb:hover,
.fr-dialog::-webkit-scrollbar-thumb:hover,
.pp-dialog::-webkit-scrollbar-thumb:hover,
.promo-dialog::-webkit-scrollbar-thumb:hover,
.reward-upgrade-confirm::-webkit-scrollbar-thumb:hover,
.phone-bound-confirm::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.6);
}

.modal--narrow {
  width: min(460px, 100%);
}

.modal--withdraw-apply {
  width: min(560px, 100%);
  padding: 0;
  overflow: hidden;
}

/* Keep leaderboard rules hero flush to modal top/left/right like login hero. */
.modal.leaderboard-rules-modal {
  width: min(760px, 95vw);
  max-height: 90vh;
  overflow: auto;
  padding: 0;
  border-radius: 24px;
  border: 1px solid rgba(147, 108, 226, .35);
  background: linear-gradient(180deg, rgba(32, 14, 72, .98), rgba(18, 8, 48, .98));
  box-shadow: 0 24px 52px rgba(6, 1, 19, .62);
}

.withdraw-apply__hero {
  position: relative;
  overflow: hidden;
  padding: 0;
  background: linear-gradient(180deg, rgba(29, 11, 66, .98), rgba(17, 7, 40, .96));
}

.withdraw-apply__hero-art {
  display: block;
  min-height: 200px;
  border-radius: 0;
  border: 0;
  background: linear-gradient(135deg, rgba(95, 35, 180, .32), rgba(35, 14, 80, .82));
  color: rgba(255, 236, 188, .74);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-align: center;
  padding: 0;
  overflow: hidden;
}

.withdraw-apply__hero-img {
  display: block;
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.cert-info-modal {
  padding: 22px 22px 24px;
}

.cert-info-form {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}

.cert-info-form__field {
  gap: 6px;
}

.cert-info-form__field--wide {
  grid-column: 1 / -1;
}

.cert-info-form__field input.is-error {
  border-color: rgba(255, 117, 117, .9);
  box-shadow: 0 0 0 1px rgba(255, 117, 117, .24);
}

.cert-info-method,
.cert-info-note {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(36, 14, 76, .88);
  border: 1px solid rgba(162, 93, 255, .18);
}

.cert-info-method--compact {
  padding: 12px 14px;
}

.cert-info-method__icon,
.cert-info-note__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  flex-shrink: 0;
  font-size: 20px;
  font-weight: 900;
}

.cert-info-method__icon {
  background: linear-gradient(180deg, rgba(34, 197, 94, .22), rgba(21, 128, 61, .18));
  color: #8ff0a4;
  box-shadow: inset 0 0 0 1px rgba(134, 239, 172, .2);
}


.cert-info-method__icon--pix {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(44, 182, 183, .18), inset 0 0 0 1px rgba(44, 182, 183, .22);
}

.cert-info-method__logo {
  width: 32px;
  height: 32px;
  object-fit: contain;
  display: block;
}

.cert-info-method__copy,
.cert-info-note > div:last-child {
  min-width: 0;
}

.cert-info-method__value,
.cert-info-note__title,
.cert-info-section__title {
  color: #f5ebff;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.2;
}

.cert-info-method__hint,
.cert-info-section__desc,
.cert-info-note__desc {
  margin-top: 4px;
  color: rgba(205, 183, 240, .76);
  font-size: 12px;
  line-height: 1.45;
}

.cert-info-field__hint {
  margin-top: 4px;
  color: rgba(205, 183, 240, .72);
  font-size: 12px;
  line-height: 1.45;
}

.cert-info-section {
  display: grid;
  gap: 12px;
}

.cert-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
}

.cert-info-grid--compact {
  align-items: start;
}

.cert-info-form__field--picker {
  position: relative;
}

.cert-info-picker {
  position: relative;
}

.cert-info-picker__trigger {
  width: 100%;
  min-height: 52px;
  padding: 0 16px;
  border-radius: 14px;
  color: var(--text);
  background: rgba(20, 10, 45, .88);
  border: 1px solid rgba(160, 60, 255, .2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 16px;
  font-weight: 700;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.cert-info-picker__trigger.is-open {
  border-color: rgba(215, 164, 255, .42);
  box-shadow: 0 0 0 1px rgba(166, 98, 255, .18);
  background: rgba(28, 12, 60, .96);
}

.cert-info-picker__trigger-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cert-info-picker__trigger-icon {
  color: rgba(236, 225, 255, .82);
  flex-shrink: 0;
  transition: transform .18s ease;
}

.cert-info-picker__trigger.is-open .cert-info-picker__trigger-icon {
  transform: rotate(180deg);
}

.cert-info-picker__menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 12;
  display: grid;
  gap: 6px;
  padding: 8px;
  border-radius: 16px;
  background: rgba(33, 14, 69, .98);
  border: 1px solid rgba(199, 155, 255, .22);
  box-shadow: 0 18px 38px rgba(2, 0, 10, .45);
  backdrop-filter: blur(18px);
}

.cert-info-picker__option {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #f3ebff;
  background: transparent;
  border: 1px solid transparent;
  font-size: 15px;
  font-weight: 700;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}

.cert-info-picker__option:hover {
  background: rgba(134, 79, 255, .12);
}

.cert-info-picker__option.is-active {
  background: linear-gradient(180deg, rgba(86, 34, 170, .34), rgba(52, 19, 110, .82));
  border-color: rgba(215, 164, 255, .24);
}

.cert-info-contact {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.cert-info-contact__option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 14px;
  border-radius: 16px;
  background: rgba(31, 12, 67, .86);
  border: 1px solid rgba(162, 93, 255, .16);
  cursor: pointer;
}

.cert-info-contact__option.is-active {
  background: linear-gradient(180deg, rgba(86, 34, 170, .42), rgba(52, 19, 110, .92));
  border-color: rgba(215, 164, 255, .34);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04);
}

.cert-info-contact__option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.cert-info-contact__mark {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(194, 171, 236, .34);
  color: #ffefaa;
  font-size: 12px;
  font-weight: 900;
  flex-shrink: 0;
}

.cert-info-contact__option.is-active .cert-info-contact__mark {
  background: linear-gradient(180deg, rgba(255, 194, 88, .3), rgba(247, 147, 26, .18));
  border-color: rgba(255, 214, 170, .34);
}

.cert-info-contact__label {
  color: #f4eaff;
  font-size: 14px;
  font-weight: 700;
}

.cert-info-note {
  align-items: flex-start;
  background: rgba(26, 10, 58, .82);
}

.cert-info-note__icon {
  background: linear-gradient(180deg, rgba(250, 204, 21, .26), rgba(245, 158, 11, .2));
  color: #ffe08f;
  box-shadow: inset 0 0 0 1px rgba(255, 216, 134, .2);
}

.cert-info-modal__actions {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}

.cert-info-modal__actions .outline-btn,
.cert-info-modal__actions .cert-info-modal__save-btn {
  width: 100%;
  min-height: 50px;
  padding: 0 18px;
  border-radius: 14px;
  font-size: 15px;
  justify-content: center;
}

.cert-info-modal__actions .outline-btn {
  font-weight: 700;
}

.cert-info-modal__actions .cert-info-modal__save-btn {
  font-weight: 800;
}

.withdraw-apply__hero-copy {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 44px 18px 18px;
  background: linear-gradient(180deg, rgba(6, 3, 15, 0) 0%, rgba(6, 3, 15, .42) 28%, rgba(6, 3, 15, .82) 68%, rgba(6, 3, 15, .96) 100%);
  pointer-events: none;
}

.withdraw-apply__eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(255, 176, 59, .14);
  border: 1px solid rgba(255, 188, 82, .2);
  color: #ffd58f;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.withdraw-apply__title {
  margin-top: 12px;
  font-size: 30px;
  font-weight: 900;
  letter-spacing: -.03em;
  text-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}

.withdraw-apply__desc {
  margin-top: 8px;
  color: rgba(228, 213, 255, .78);
  font-size: 13px;
  line-height: 1.6;
  text-shadow: 0 4px 18px rgba(0, 0, 0, .35);
}

.withdraw-apply__body {
  display: grid;
  gap: 16px;
  padding: 12px 18px 18px;
}

.withdraw-apply__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.withdraw-apply__stat-card {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 12px 13px;
  border-radius: 18px;
  background: rgba(26, 10, 58, .74);
  border: 1px solid rgba(171, 122, 255, .16);
}

.withdraw-apply__stat-card--ready {
  background: linear-gradient(180deg, rgba(24, 80, 69, .28), rgba(14, 37, 32, .78));
  border-color: rgba(74, 222, 128, .18);
}

.withdraw-apply__stat-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  font-size: 18px;
  background: rgba(255, 255, 255, .08);
}

.withdraw-apply__stat-icon--coins {
  background: rgba(245, 158, 11, .16);
}

.withdraw-apply__stat-icon--prize {
  background: rgba(236, 72, 153, .14);
}

.withdraw-apply__stat-icon--ready {
  background: rgba(34, 197, 94, .16);
}

.withdraw-apply__stat-icon .currency-symbol {
  min-width: 0;
  color: #86efac;
  font-size: 15px;
  font-weight: 900;
}

.withdraw-apply__stat-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}

.withdraw-apply__stat-label {
  display: block;
  min-height: 0;
  line-height: 1.15;
}

.withdraw-apply__stat-label,
.withdraw-apply__hint,
.withdraw-apply__bank-meta,
.withdraw-apply__tips {
  color: rgba(194, 171, 236, .66);
  font-size: 10px;
}

.withdraw-apply__stat-value {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  column-gap: 5px;
  margin-top: 0;
  letter-spacing: -.02em;
  min-width: 0;
  white-space: nowrap;
}

.withdraw-apply__stat-currency {
  color: rgba(255, 235, 179, .78);
  font-size: 12px;
  font-weight: 800;
}

.withdraw-apply__stat-number {
  color: #fff3c2;
  font-size: clamp(13px, 1.2vw, 17px);
  font-weight: 800;
  line-height: 1.05;
  min-width: 0;
  text-wrap: nowrap;
}

.withdraw-apply__stat-card:nth-child(2) .withdraw-apply__stat-currency,
.withdraw-apply__stat-card:nth-child(2) .withdraw-apply__stat-number {
  color: #ffe1b3;
}

.withdraw-apply__stat-card--ready .withdraw-apply__stat-currency,
.withdraw-apply__stat-card--ready .withdraw-apply__stat-number {
  color: #e9ffe0;
}

.withdraw-apply__stat-card--ready .withdraw-apply__stat-currency {
  font-size: 12px;
}

.withdraw-apply__stat-card--ready .withdraw-apply__stat-number {
  font-size: clamp(13px, 1.12vw, 16px);
  letter-spacing: -.03em;
}

.withdraw-apply__alert {
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: linear-gradient(180deg, rgba(82, 19, 46, .96), rgba(64, 15, 39, .94));
  border-color: rgba(244, 63, 94, .34);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 12px 28px rgba(80, 10, 35, .2);
}

.withdraw-apply__alert .outline-btn {
  border-color: rgba(250, 116, 154, .28);
  color: #f7bdd0;
  background: rgba(92, 22, 52, .34);
  min-width: 110px;
  white-space: nowrap;
}

.withdraw-apply__alert-tag {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(244, 63, 94, .14);
  border: 1px solid rgba(251, 113, 133, .26);
  color: #ffb6c8;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.withdraw-apply__alert-main {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 8px;
}

.withdraw-apply__alert-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: rgba(244, 63, 94, .16);
  color: #ff9eb5;
  font-size: 16px;
  font-weight: 900;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(251, 113, 133, .18) inset;
}

.withdraw-apply__body .status-banner__title {
  font-size: 17px;
  font-weight: 800;
  line-height: 1.15;
  color: #fff3f7;
  white-space: nowrap;
}

.withdraw-apply__body .status-banner__desc {
  color: rgba(240, 198, 216, .86);
  font-size: 11px;
  line-height: 1.55;
}

.withdraw-apply__form-grid {
  display: grid;
  gap: 14px;
}

.withdraw-apply__field {
  gap: 10px;
}

.withdraw-apply__field-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 12px;
}

.withdraw-apply__field-header .input-label {
  margin: 0;
}

.withdraw-apply__amount-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.withdraw-apply__max-btn {
  min-width: 72px;
  min-height: 52px;
  padding: 0 16px;
  border-radius: 14px;
  border: 1px solid rgba(255, 188, 82, .24);
  color: #ffd58f;
  background: rgba(255, 176, 59, .12);
  font-size: 13px;
  font-weight: 900;
}

.withdraw-apply__hint {
  margin-top: -2px;
  min-width: 0;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.withdraw-apply-modal .withdraw-apply__fee-breakdown {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.withdraw-apply-modal .withdraw-apply__fee-row--payout {
  padding-top: 0;
  border-top: 0;
}

.withdraw-apply__bank {
  padding: 16px;
  border-radius: 18px;
  background: rgba(26, 10, 58, .68);
  border: 1px solid rgba(171, 122, 255, .14);
}

.withdraw-apply__bank.is-missing {
  background: linear-gradient(180deg, rgba(82, 19, 46, .62), rgba(50, 14, 35, .76));
  border-color: rgba(244, 63, 94, .24);
}

.withdraw-apply__bank-top {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
}

.withdraw-apply__bank-copy {
  min-width: 0;
}

.withdraw-apply__bank-tag {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  margin-bottom: 10px;
  border-radius: 999px;
  background: rgba(244, 63, 94, .14);
  border: 1px solid rgba(251, 113, 133, .26);
  color: #ffb6c8;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.withdraw-apply__bank-title {
  margin-top: 6px;
  color: #fff;
  font-size: 16px;
  font-weight: 800;
}

.withdraw-apply__bank-meta {
  margin-top: 6px;
  line-height: 1.5;
}

.withdraw-apply__bank-account {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(171, 122, 255, .12);
}

.withdraw-apply__bank-account-text {
  margin-top: 6px;
  color: #f3e8ff;
  font-size: 13px;
  line-height: 1.5;
}

.withdraw-apply__bank.is-missing .withdraw-apply__bank-account-text {
  color: #fff3f7;
}

.withdraw-apply__bank-btn {
  min-width: 148px;
}

.withdraw-apply__footer-inner {
  display: grid;
  width: 100%;
  gap: 6px;
}

.withdraw-apply__tips {
  line-height: 1.5;
}

.withdraw-apply__actions {
  width: 100%;
  grid-template-columns: minmax(0, 1fr);
  justify-content: stretch;
  justify-items: stretch;
}


.withdraw-apply__bank-inline {
  display: grid;
  grid-template-columns: minmax(124px, .74fr) minmax(0, 1.26fr);
  gap: 14px;
  align-items: center;
}

.withdraw-apply__bank-channel,
.withdraw-apply__bank-account {
  min-width: 0;
}

.withdraw-apply__bank-account {
  margin-top: 0;
  padding-top: 0;
  padding-left: 14px;
  border-top: 0;
  border-left: 1px solid rgba(171, 122, 255, .12);
}

.withdraw-apply__bank-btn {
  min-width: 78px;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(216, 180, 254, .22);
  color: rgba(235, 222, 255, .82);
  background: rgba(255, 255, 255, .05);
  font-size: 12px;
  font-weight: 800;
}

.withdraw-apply__bank-btn:hover {
  color: #fff;
  border-color: rgba(216, 180, 254, .36);
  background: rgba(255, 255, 255, .08);
}

.withdraw-apply__support {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.withdraw-apply__rules-link {
  border: 0;
  padding: 2px 0;
  color: rgba(216, 180, 254, .66);
  background: transparent;
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(216, 180, 254, .3);
}

.withdraw-apply__rules-link:hover {
  color: rgba(216, 180, 254, 1);
  text-decoration-color: rgba(216, 180, 254, .7);
}

.withdraw-apply__submit-group {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: stretch;
}

.withdraw-apply__submit-group > .withdraw-apply__submit-btn {
  width: 100%;
}

.withdraw-apply__submit-btn--disabled {
  opacity: .4;
  cursor: not-allowed;
  filter: grayscale(.5);
}

/* Unlock hint line shown above CTA */
.withdraw-apply__unlock-row {
  padding: 0 0 4px;
}

.waf-hint {
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: rgba(235, 222, 255, .65);
  line-height: 1.5;
}

.waf-hint__num {
  color: #fbbf24;
  font-weight: 800;
}

.waf-hint--ready {
  color: #4ade80;
}

/* Play-to-unlock CTA: keep primary shape but signal action */
.withdraw-apply__submit-btn--play {
  background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
}

.withdraw-apply__tasks-btn {
  border-color: rgba(251, 191, 36, .5);
  color: #fbbf24;
  white-space: nowrap;
}

.withdraw-apply__tasks-btn:hover {
  border-color: rgba(251, 191, 36, .85);
  background: rgba(251, 191, 36, .08);
}

@media (max-width: 680px) {
  .modal--withdraw-apply {
    width: min(100%, 100%);
    max-height: calc(100dvh - 116px);
    align-self: start;
    margin-top: 12px;
    margin-bottom: calc(92px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overflow-x: hidden;
  }

  .withdraw-apply__hero {
    padding: 0;
  }

  .withdraw-apply__hero-art {
    min-height: 150px;
    font-size: 11px;
  }

  .withdraw-apply__hero-img {
    height: 150px;
  }

  .withdraw-apply__hero-copy {
    padding: 38px 14px 14px;
  }

  .withdraw-apply__title {
    font-size: 24px;
  }

  .withdraw-apply__body {
    padding: 10px 14px 14px;
    gap: 14px;
  }

  .withdraw-apply__stats {
    grid-template-columns: 1fr;
  }

  .withdraw-apply__stat-card {
    grid-template-columns: 38px minmax(0, 1fr);
    padding: 12px;
  }

  .withdraw-apply__stat-icon {
    width: 38px;
    height: 38px;
    font-size: 18px;
    border-radius: 12px;
  }

  .withdraw-apply__stat-value {
    gap: 5px;
  }

  .withdraw-apply__stat-currency {
    font-size: 14px;
  }

  .withdraw-apply__stat-number {
    font-size: 17px;
  }

  .withdraw-apply__amount-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .withdraw-apply__bank-btn {
    width: 100%;
  }

  .withdraw-apply__max-btn {
    width: auto;
    min-width: 88px;
  }

  .withdraw-apply__bank-top {
    flex-direction: column;
    align-items: stretch;
  }

  .withdraw-apply__alert {
    padding: 14px;
    display: grid;
    gap: 12px;
    align-items: stretch;
  }

  .withdraw-apply__alert > div {
    min-width: 0;
  }

  .withdraw-apply__alert-main {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
  }

  .withdraw-apply__body .status-banner__title {
    font-size: 15px;
    line-height: 1.12;
    white-space: normal;
  }

  .withdraw-apply__body .status-banner__desc {
    font-size: 10px;
    line-height: 1.45;
  }

  .withdraw-apply__alert .outline-btn {
    width: 100%;
    order: 2;
  }

  .withdraw-apply__footer-inner {
    gap: 6px;
  }

  .withdraw-apply__actions {
    flex-direction: column;
  }

  .withdraw-apply__submit-group {
    width: 100%;
    flex-direction: column;
  }

  .withdraw-apply__submit-btn,
  .withdraw-apply__tasks-btn {
    width: 100%;
  }

  .cert-info-grid,
  .cert-info-contact {
    grid-template-columns: 1fr;
  }

  .cert-info-method,
  .cert-info-note {
    padding: 12px 14px;
  }
}

.modal--login {
  width: min(400px, 100%);
  padding: 0;
  overflow: hidden;
  border-radius: 28px;
}

.login-modal__hero {
  position: relative;
  height: 200px;
  background: linear-gradient(135deg, #2d0a6e 0%, #6b1fa8 50%, #c026d3 100%);
  overflow: hidden;
  flex-shrink: 0;
}

.login-modal__hero-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: rgba(255, 255, 255, .35);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.login-modal__close,
.modal-close-corner {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: rgba(0, 0, 0, .35);
  backdrop-filter: blur(8px);
  color: rgba(255, 255, 255, .85);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .18s, transform .18s, border-color .18s;
  z-index: 100;
  -webkit-appearance: none;
  appearance: none;
  font-size: 16px;
  line-height: 1;
}

.login-modal__close:hover,
.modal-close-corner:hover {
  background: rgba(0, 0, 0, .6);
  transform: scale(1.08);
}

.modal-close-corner {
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
  background: #1a0b35;
  border: 1px solid rgba(160, 80, 255, 0.8);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8);
}

.modal-close-corner:hover {
  transform: translate(50%, -50%) scale(1.1);
  background: #2a1255;
  border-color: rgba(160, 80, 255, 1);
}

.login-modal__body {
  padding: 24px 24px 28px;
  display: grid;
  gap: 14px;
}

.login-modal__title {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -.02em;
}

.login-modal__sub {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
  margin-top: -6px;
}

.login-modal__field {
  display: flex;
  align-items: stretch;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(160, 80, 255, .22);
  background: rgba(255, 255, 255, .04);
}

.login-modal__field:focus-within {
  border-color: rgba(192, 100, 255, .55);
  box-shadow: 0 0 0 3px rgba(160, 60, 255, .12);
}

.login-modal__prefix {
  display: flex;
  align-items: center;
  padding: 0 12px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  border-right: 1px solid rgba(160, 80, 255, .18);
  white-space: nowrap;
  flex-shrink: 0;
}

.login-modal__input {
  flex: 1;
  min-width: 0;
  height: 48px;
  padding: 0 14px;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 14px;
  outline: none;
}

.login-modal__input::placeholder {
  color: var(--muted);
}

.login-modal__input.is-error {
  color: #ff6b6b;
}

.login-modal__field-error {
  padding: 4px 14px 0;
  font-size: 11px;
  color: #ff6b6b;
  line-height: 1.4;
}

.login-modal__send {
  flex-shrink: 0;
  height: 48px;
  padding: 0 16px;
  border: 0;
  border-left: 1px solid rgba(160, 80, 255, .18);
  background: rgba(160, 80, 255, .14);
  color: #c084fc;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background .18s;
}

.login-modal__send:hover {
  background: rgba(160, 80, 255, .28);
}

.login-modal__send--loading {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 82px;
  cursor: wait;
}

.login-modal__send-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(192, 132, 252, .24);
  border-top-color: currentColor;
  animation: ppSpinnerRotate .75s linear infinite;
}

.login-modal__primary {
  height: 50px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, #f43f5e, #c026d3);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  transition: transform .18s, box-shadow .18s;
  box-shadow: 0 6px 20px rgba(192, 38, 211, .35);
}

.login-modal__primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(192, 38, 211, .5);
}

.login-modal__primary:active {
  transform: scale(.98);
  transition-duration: .08s;
}

.login-modal__primary--loading {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: wait;
  transform: none;
}

.login-modal__primary--loading:hover,
.login-modal__primary--loading:active {
  transform: none;
}

.login-modal__action-dots {
  min-height: 18px;
}

.login-modal__divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-size: 12px;
}

.login-modal__divider::before,
.login-modal__divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(160, 80, 255, .15);
}

.login-modal__secondary {
  height: 46px;
  border: 1px solid rgba(160, 80, 255, .3);
  border-radius: 14px;
  background: transparent;
  color: #c084fc;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background .18s, border-color .18s;
}

.login-modal__secondary:hover {
  background: rgba(160, 80, 255, .1);
  border-color: rgba(160, 80, 255, .5);
}

.modal--upgrade {
  border-radius: 28px;
}

.upgrade-modal__hero {
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 215, 0, .28), transparent 26%),
    radial-gradient(circle at 82% 16%, rgba(255, 136, 0, .22), transparent 24%),
    linear-gradient(135deg, #2d0a6e 0%, #6b1fa8 55%, #4c1d95 100%);
}

.upgrade-modal__hero::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 132px;
  background: linear-gradient(180deg, rgba(14, 7, 34, 0), rgba(14, 7, 34, .18) 18%, rgba(14, 7, 34, .78) 72%, rgba(14, 7, 34, .96));
}

.upgrade-modal__hero-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: end;
  gap: 8px;
  padding: 24px;
  color: rgba(255, 255, 255, .88);
  z-index: 1;
}

.upgrade-modal__hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.upgrade-modal__hero-copy {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 0 24px 24px;
}

.upgrade-modal__hero-title-stack {
  display: grid;
  align-content: end;
  gap: 8px;
  min-width: 0;
  padding-right: 72px;
}

.upgrade-modal__hero-title {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1;
  color: #fff;
  white-space: nowrap;
  max-width: 100%;
}

.upgrade-modal__badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f59e0b, #f97316);
  color: #fff7ed;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .02em;
  box-shadow: 0 10px 28px rgba(249, 115, 22, .35);
  white-space: nowrap;
  flex: 0 0 auto;
}

.upgrade-modal__hint {
  min-height: 28px;
  width: fit-content;
  padding: 0 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  background: rgba(13, 6, 32, .74);
  border: 1px solid rgba(255, 255, 255, .14);
  color: rgba(236, 231, 255, .86);
  font-size: 11px;
  font-weight: 700;
  flex: 0 0 auto;
}

@media (max-width: 480px) {
  .upgrade-modal__hero {
    height: 188px;
  }

  .upgrade-modal__hero::after {
    height: 136px;
  }

  .upgrade-modal__hero-copy {
    gap: 10px;
    padding: 0 18px 18px;
  }

  .upgrade-modal__hero-title-stack {
    gap: 6px;
    padding-right: 56px;
  }

  .upgrade-modal__hero-title {
    font-size: 18px;
  }

  .upgrade-modal__badge {
    min-height: 26px;
    padding: 0 9px;
    font-size: 9px;
  }

  .upgrade-modal__hint {
    min-height: 26px;
    padding: 0 10px;
    font-size: 10px;
  }

  .upgrade-modal__reward {
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 10px;
    padding: 12px;
  }

  .upgrade-modal__reward-icon {
    width: 46px;
    height: 46px;
    font-size: 18px;
  }
}

.upgrade-modal__body {
  gap: 16px;
  padding-top: 18px;
}

.upgrade-modal__reward {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(84, 33, 168, .28), rgba(45, 16, 92, .44));
  border: 1px solid rgba(195, 117, 255, .24);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}

.upgrade-modal__reward-icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 30% 30%, #fde68a, #f59e0b 70%);
  color: #4a2100;
  box-shadow: 0 10px 24px rgba(245, 158, 11, .28);
}

.upgrade-modal__reward-icon svg {
  display: block;
}

.upgrade-modal__reward-copy {
  display: grid;
  gap: 4px;
}

.upgrade-modal__reward-copy strong {
  font-size: 14px;
  color: #fff;
}

.upgrade-modal__reward-copy span {
  font-size: 12px;
  line-height: 1.5;
  color: rgba(223, 212, 255, .78);
}

.upgrade-modal__reward-highlight {
  display: inline-block;
  margin: 0 2px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: .02em;
  color: #fff4bf;
  background: linear-gradient(180deg, #fff7cc 0%, #ffd86b 38%, #ffb300 72%, #fff0a8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, .18),
    0 0 8px rgba(255, 201, 71, .42),
    0 0 18px rgba(255, 153, 0, .24);
  filter: drop-shadow(0 2px 6px rgba(255, 181, 46, .22));
}

.upgrade-modal__primary {
  margin-top: 4px;
}

.modal__title {
  font-size: 24px;
  font-weight: 800;
}

.modal__close {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  color: var(--muted);
  background: rgba(255, 255, 255, .06);
}

.field input,
.field select {
  width: 100%;
  min-height: 52px;
  padding: 0 16px;
  border-radius: 14px;
  color: var(--text);
  background: rgba(20, 10, 45, .88);
  border: 1px solid rgba(160, 60, 255, .2);
}

.qr-panel {
  display: grid;
  gap: 14px;
  justify-items: center;
  padding: 20px;
  border-radius: 22px;
  background: rgba(255, 255, 255, .04);
}

.qr-box--placeholder {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(246, 242, 255, .98));
}

.qr-box__placeholder-grid {
  width: 78%;
  height: 78%;
  border-radius: 18px;
  background:
    linear-gradient(90deg, rgba(17, 24, 39, .92) 8%, transparent 8% 16%, rgba(17, 24, 39, .92) 16% 24%, transparent 24% 34%, rgba(17, 24, 39, .92) 34% 40%, transparent 40% 52%, rgba(17, 24, 39, .92) 52% 60%, transparent 60% 72%, rgba(17, 24, 39, .92) 72% 82%, transparent 82%),
    linear-gradient(rgba(17, 24, 39, .92) 8%, transparent 8% 16%, rgba(17, 24, 39, .92) 16% 24%, transparent 24% 34%, rgba(17, 24, 39, .92) 34% 40%, transparent 40% 52%, rgba(17, 24, 39, .92) 52% 60%, transparent 60% 72%, rgba(17, 24, 39, .92) 72% 82%, transparent 82%);
  box-shadow: inset 0 0 0 10px #fff;
}

.qr-box__placeholder-badge {
  position: absolute;
  right: 16px;
  bottom: 16px;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  background: rgba(91, 33, 182, .88);
  color: #f5ecff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
}

.qr-box__value {
  display: grid;
  place-items: center;
  width: 75%;
  height: 75%;
  padding: 18px;
  color: #0b1712;
  border-radius: 20px;
  background: #fff;
  text-align: center;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.4;
}

.qr-code {
  width: 100%;
  padding: 14px 16px;
  border-radius: 16px;
  color: var(--muted);
  background: rgba(9, 24, 18, .9);
  word-break: break-all;
  font-size: 12px;
  line-height: 1.6;
}

.status-banner.is-danger {
  background: rgba(120, 20, 40, .4);
  border-color: rgba(255, 60, 100, .22);
}

.status-banner__title {
  font-weight: 800;
}

.modal--payment {
  width: min(560px, calc(100vw - 40px));
  max-height: min(90vh, 820px);
  overflow: auto;
  padding: 18px 18px 20px;
}

.payment-sheet__header {
  position: relative;
  align-items: start;
  padding-right: 64px;
  margin-bottom: 10px;
}

.payment-sheet__body {
  display: grid;
  gap: 12px;
}

.payment-sheet__hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 166px;
  gap: 12px;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

.payment-sheet__hero--redirect {
  grid-template-columns: minmax(0, 1.2fr) minmax(220px, .8fr);
}

.payment-sheet__hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
}

.payment-sheet__pix-brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  background: #4bbaaa;
  border: 1px solid rgba(102, 228, 214, .18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

.payment-sheet__pix-logo-image {
  display: block;
  height: 28px;
  width: auto;
  object-fit: contain;
}

.payment-sheet__eyebrow {
  color: #ffcc66;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.payment-sheet__hero-title {
  color: #fff8fb;
  font-size: 24px;
  font-weight: 900;
  line-height: 1.06;
}

.payment-sheet__hero-desc {
  max-width: 34ch;
  color: #e0d2fb;
  font-size: 13px;
  line-height: 1.45;
}

.payment-sheet__meta-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  width: min(230px, 100%);
}

.payment-sheet__meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 7px 9px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}

.payment-sheet__meta-pill small {
  display: block;
  color: #d7c9f4;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.payment-sheet__meta-pill strong {
  display: block;
  margin-top: 1px;
  color: #fff8dd;
  font-size: 14px;
  font-weight: 900;
}

.payment-sheet__meta-pill > div {
  display: grid;
  gap: 2px;
}

.payment-sheet__meta-pill--timer {
  background: linear-gradient(135deg, rgba(84, 39, 7, .82), rgba(141, 64, 6, .78));
  border-color: rgba(255, 200, 86, .28);
}

.payment-sheet__meta-pill--channel {
  background: linear-gradient(135deg, rgba(27, 45, 93, .7), rgba(45, 22, 96, .72));
  border-color: rgba(119, 175, 255, .22);
}

.payment-sheet__icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  flex: 0 0 auto;
}

.payment-sheet__hero-panel {
  display: grid;
  align-content: start;
  gap: 10px;
}

.payment-sheet__hero-panel--qr {
  justify-items: center;
  align-content: center;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

.payment-sheet__hero-panel--redirect {
  align-content: stretch;
}

.payment-sheet__hero-panel-label {
  color: #d7fff9;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.payment-sheet__hero-panel-label-bar {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 6px 8px 0;
}

.payment-sheet__hero-panel-label-bar .payment-sheet__hero-panel-label {
  min-height: 24px;
  padding: 0 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  background: linear-gradient(135deg, rgba(26, 159, 144, .28), rgba(49, 188, 173, .42));
  color: #0c7d72;
  border: 1px solid rgba(26, 159, 144, .14);
}

.payment-sheet__hero-panel-actions {
  width: 100%;
  padding: 0 12px;
}

.payment-sheet__hero-panel--qr .payment-sheet__hero-panel-actions {
  display: none;
}

.payment-sheet__summary {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(15, 9, 32, .78), rgba(11, 7, 28, .7));
  border: 1px solid rgba(172, 115, 255, .2);
}

.payment-sheet__summary-grid {
  display: grid;
  grid-template-columns: minmax(160px, 200px) minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
}

.payment-sheet__amount-card {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 6px;
  min-height: 96px;
  padding: 14px;
  border-radius: 0;
  background: transparent;
  border: 0;
  text-align: center;
}

.payment-sheet__amount-label {
  color: var(--text-secondary);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.payment-sheet__amount-value {
  color: var(--text-money);
  font-family: var(--font-display);
  font-size: var(--fs-heading-xl);
  font-weight: var(--fw-black);
  letter-spacing: -.03em;
}

.payment-sheet__summary-details {
  display: grid;
  gap: 10px;
  align-content: center;
  justify-items: center;
}

.payment-sheet__summary-row {
  display: grid;
  gap: 2px;
  justify-items: center;
  align-items: center;
  color: var(--text-secondary);
  font-size: var(--fs-body-sm);
  text-align: center;
}

.payment-sheet__summary-row strong {
  color: var(--text-primary);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-bold);
  text-align: center;
  word-break: break-word;
  white-space: normal;
}

.payment-sheet__section,
.payment-sheet__code-panel {
  display: grid;
  gap: 14px;
}

.payment-sheet__section-title {
  color: #fff4d8;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .02em;
}

.payment-platforms--sheet {
  gap: 14px;
}

.platform-btn--sheet {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 4px;
  min-height: 74px;
  padding: 16px 18px;
  border-radius: var(--radius-lg);
  background: var(--surface-overlay);
  border: 1px solid var(--border-default);
  color: var(--text-primary);
  text-align: center;
}

.platform-btn--sheet > div {
  display: grid;
  gap: 2px;
  justify-items: center;
}

.platform-btn--sheet .platform-btn__meta {
  color: var(--text-secondary);
}

.platform-btn--sheet > span {
  color: var(--text-brand);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.payment-sheet__instruction-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.payment-sheet__info-card {
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(183, 121, 255, .16);
}

.payment-sheet__info-card--scan {
  background: linear-gradient(180deg, rgba(30, 27, 79, .82), rgba(23, 18, 61, .72));
}

.payment-sheet__copy-panel {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(22, 45, 68, .72), rgba(18, 28, 52, .72));
  border: 1px solid rgba(85, 190, 255, .16);
}

.payment-sheet__info-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.payment-sheet__icon-badge--scan {
  background: rgba(168, 85, 247, .18);
  color: #e9d5ff;
}

.payment-sheet__icon-badge--copy {
  background: rgba(56, 189, 248, .18);
  color: #d8f3ff;
}

.payment-sheet__icon-badge--shield {
  width: 24px;
  height: 24px;
  border-radius: 10px;
  background: rgba(34, 197, 94, .16);
  color: #c7f9d5;
}

.payment-sheet__copy-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(8, 15, 28, .42);
  color: #d7e9ff;
  font-size: 11px;
  line-height: 1.45;
}

.payment-sheet__info-card--full {
  padding: 18px 20px;
}

.payment-sheet__info-title {
  color: #fff5d6;
  font-size: 15px;
  font-weight: 800;
}

.payment-sheet__info-desc {
  margin-top: 6px;
  color: #cdbdf0;
  font-size: 13px;
  line-height: 1.6;
}

.actions-row--payment {
  gap: 12px;
}

.actions-row--payment > * {
  flex: 1 1 0;
}

.payment-sheet__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.payment-sheet__action--copy {
  width: 100%;
  min-height: 58px;
  padding: 14px 20px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, #32bcad, #1a9e90);
  color: #fff;
  font-size: 16px;
  font-weight: 900;
  border: none;
  box-shadow: 0 4px 18px rgba(50, 188, 173, .38);
  box-sizing: border-box;
}

.payment-sheet__action--copy-hero {
  min-height: 48px;
  padding: 12px 16px;
  border-radius: 14px;
  font-size: 14px;
  box-shadow: 0 4px 14px rgba(50, 188, 173, .28);
}

.payment-sheet__action--copy:hover {
  background: linear-gradient(135deg, #3dd4c4, #24b0a0);
  box-shadow: 0 6px 24px rgba(50, 188, 173, .52);
}

.payment-sheet__action--copy .ph {
  font-size: 18px;
  line-height: 1;
}

.payment-sheet__hero-amount {
  color: #fff6d9;
  font-size: 32px;
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1;
  text-shadow: 0 6px 18px rgba(255, 199, 105, .16);
}

.payment-sheet__info-bar {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr) 104px;
  gap: 8px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: none;
}

.payment-sheet__info-bar--compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.payment-sheet__info-chip {
  display: grid;
  gap: 2px;
  padding: 4px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .05);
  flex: 0 0 auto;
}

.payment-sheet__info-bar--compact .payment-sheet__info-chip {
  justify-items: center;
  text-align: center;
}

.payment-sheet__info-chip--hidden {
  display: none;
}

.payment-sheet__info-chip--grow {
  flex: 1 1 0;
  min-width: 0;
}

.payment-sheet__info-chip small {
  color: #d7c9f4;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.payment-sheet__info-chip strong {
  color: #fff4d1;
  font-size: 13px;
  font-weight: 900;
  max-width: 100%;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.payment-sheet__footer {
  padding: 0;
}

.payment-sheet__footer-action {
  width: 100%;
}

.payment-sheet__steps {
  display: grid;
  gap: 0;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(172, 115, 255, .18);
}

.payment-sheet__step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  color: #d4c4f0;
  font-size: 12.5px;
  line-height: 1.5;
  background: rgba(15, 9, 32, .72);
}

.payment-sheet__step + .payment-sheet__step {
  border-top: 1px solid rgba(172, 115, 255, .12);
  background: rgba(11, 7, 26, .72);
}

.payment-sheet__step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: rgba(168, 85, 247, .2);
  color: #d8b4fe;
  margin-top: 1px;
}

.payment-sheet__step-num--copy {
  background: rgba(50, 188, 173, .2);
  color: #6ee7df;
}

.payment-sheet__redirect-card {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  min-height: 100%;
  padding: 24px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 214, 120, .18), transparent 32%),
    rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 199, 110, .24);
  text-align: center;
}

.payment-sheet__redirect-icon {
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  background: linear-gradient(180deg, #f97316, #fbbf24);
  color: #2f1102;
  font-size: 34px;
  font-weight: 900;
  box-shadow: 0 16px 28px rgba(249, 115, 22, .22);
}

.payment-sheet__redirect-label {
  color: #fff7df;
  font-size: 20px;
  font-weight: 900;
}

.payment-sheet__redirect-sub {
  color: #cebce9;
  font-size: 13px;
}

@media (max-width: 680px) {
  .modal--payment {
    width: min(100%, 100%);
    max-height: calc(100dvh - 64px);
    padding: 14px 12px 16px;
    border-radius: 26px;
  }

  .payment-sheet__header {
    padding-right: 52px;
  }

  .payment-sheet__body {
    gap: 10px;
  }

  .payment-sheet__hero,
  .payment-sheet__hero--redirect {
    grid-template-columns: 1fr;
    padding: 14px;
    gap: 12px;
  }

  /* QR panel: top, centered, comfortably large */
  .payment-sheet__hero-panel--qr {
    order: -1;
    width: min(220px, 70vw);
    margin: 0 auto;
  }

  .payment-sheet__hero-panel-actions {
    padding: 0 10px;
  }

  /* hero-copy: row layout 锟?logo left, amount right */
  .payment-sheet__hero-copy {
    order: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .payment-sheet__pix-logo {
    min-height: 34px;
    padding: 0 12px 0 10px;
  }

  .payment-sheet__hero-amount {
    width: 100%;
    text-align: left;
    font-size: 28px;
  }

  .payment-sheet__pix-brand {
    min-height: 42px;
    padding: 0 14px;
  }

  .payment-sheet__pix-logo-image {
    height: 24px;
  }

  .payment-sheet__meta-strip {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .payment-sheet__action--copy-hero {
    min-height: 46px;
    padding: 11px 14px;
    font-size: 13px;
  }

  .payment-sheet__meta-pill {
    flex: 1;
    min-height: 38px;
    padding: 6px 10px;
  }

  .payment-sheet__info-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .payment-sheet__info-chip--grow {
    grid-column: 1 / -1;
  }

  .payment-sheet__info-chip strong {
    max-width: 100%;
  }

  .payment-sheet__action--copy {
    min-height: 52px;
    padding: 14px 16px;
    font-size: 15px;
  }

  .actions-row--payment {
    grid-template-columns: 1fr;
  }

  .actions-row--payment > * {
    width: 100%;
  }
}

.toast-stack {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1405;
  display: grid;
  gap: 10px;
  pointer-events: none;
}

.toast {
  --toast-accent: var(--info-500);
  --toast-accent-soft: color-mix(in srgb, var(--toast-accent) 12%, transparent);
  min-width: 260px;
  max-width: 360px;
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  overflow: hidden;
  padding: 14px 16px 14px 18px;
  border-radius: var(--radius-lg);
  background: linear-gradient(90deg, var(--toast-accent-soft), transparent 42%), color-mix(in srgb, var(--surface-overlay) 92%, var(--surface-base));
  border: 1px solid color-mix(in srgb, var(--toast-accent) 34%, var(--border-default));
  box-shadow: var(--elevation-4);
  color: var(--text-primary);
  pointer-events: auto;
}

.toast::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--toast-accent);
}

.toast--success {
  --toast-accent: var(--success-500);
}

.toast--warning {
  --toast-accent: var(--warning-500);
}

.toast--error {
  --toast-accent: var(--danger-500);
}

.toast--info {
  --toast-accent: var(--info-500);
}

.toast__icon {
  display: inline-flex;
  width: 28px;
  min-width: 28px;
  padding-top: 1px;
  color: var(--toast-accent);
  line-height: 1;
}

.toast__icon-glyph {
  display: block;
  font-size: 26px;
  line-height: 1;
}

.toast__body {
  min-width: 0;
}

.toast__title {
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.toast__desc {
  margin-top: 4px;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

@media (max-width: 680px) {
  .toast-stack {
    top: 14px;
    right: 12px;
    left: 12px;
    bottom: auto;
  }

  .toast {
    min-width: 0;
    max-width: none;
  }
}

.mobile-tabbar {
  display: none;
}

.topbar__hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border: 0;
  border-radius: 12px;
  background: rgba(160, 80, 255, .15);
  color: #ddd0ff;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  font-size: 0;
  line-height: 1;
}

.brand-wrap {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  height: 40px;
}

.brand-logo {
  display: block;
  height: 100%;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
  margin-right: 10px;
}

.brand-logo--h5 {
  display: none;
  height: 100%;
  max-width: none;
}

@media (max-width: 900px) {
  .brand-wrap {
    height: 50px;
  }

  .brand-logo--full {
    display: none;
  }

  .brand-logo--h5 {
    display: block;
    height: 100%;
    width: auto;
    max-width: none;
  }
}

.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 49;
  background: rgba(0, 0, 0, .6);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
}

@media (max-width: 1200px) {
  .workspace {
    grid-template-columns: 228px minmax(0, 1fr);
    width: calc(100vw - 24px);
  }

  .page-grid,
  .footer__top,
  .footer__badge-sections {
    grid-template-columns: 1fr;
  }

  .wins-grid {
    grid-template-columns: repeat(4, minmax(120px, 1fr));
  }

  .game-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .footer__block {
    padding: 0;
    border: 0;
  }
}

@media (max-width: 900px) {
  .topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 44;
    grid-template-columns: auto 1fr auto;
    padding: 0 14px;
    min-height: 60px;
    padding-top: env(safe-area-inset-top, 0px);
  }

  .topbar__left {
    gap: 4px;
  }

  .topbar__center {
    display: none;
  }

  .topbar__actions .ghost-btn {
    display: none;
  }

  .topbar__actions .topbar__icon-btn {
    display: none;
  }

  .topbar__tasks-btn {
    min-width: 0;
    padding: 6px 10px;
  }

  .tasks-btn__top span:not(.tasks-btn__badge) {
    display: none;
  }

  .topbar__hamburger {
    display: flex;
  }

  .workspace {
    grid-template-columns: 1fr;
    margin-top: 0;
    padding-top: 84px;
  }

  .workspace.workspace--mobile-subpage {
    padding-top: 0;
  }

  .hero__inner {
    grid-template-columns: 1fr;
  }

  .wins-grid {
    grid-template-columns: repeat(4, minmax(110px, 1fr));
  }

  .game-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .all-games-loading {
    min-height: 62px;
    gap: 12px;
    padding: 12px 14px;
  }

  .all-games-loading__copy strong {
    font-size: 13px;
  }

  .all-games-loading__copy span {
    font-size: 11px;
  }

  .sidebar {
    position: fixed !important;
    top: 0;
    left: 0;
    z-index: 50;
    width: 300px;
    max-width: 85vw;
    height: 100dvh;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
    border-radius: 0 20px 20px 0 !important;
    box-shadow: none;
    transform: translateX(calc(-100% - 2px));
    transition: transform .28s cubic-bezier(.4, 0, .2, 1), box-shadow .28s;
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.4) transparent;
  }

  .sidebar::-webkit-scrollbar {
    width: 6px;
    display: block !important;
  }

  .sidebar::-webkit-scrollbar-track {
    background: transparent;
  }

  .sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.4);
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    background-clip: padding-box;
  }

  .sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.6);
  }

  .sidebar.is-open {
    transform: translateX(0);
    box-shadow: 4px 0 40px rgba(0, 0, 0, .6);
  }

  .sidebar-backdrop {
    display: block;
  }

  .sidebar-backdrop.is-visible {
    opacity: 1;
    pointer-events: auto;
  }
}

@media (max-width: 680px) {
  .wins-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .game-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .all-games-loading {
    align-items: flex-start;
    justify-content: flex-start;
    min-height: 0;
    margin-top: 12px;
    border-radius: 16px;
    padding: 12px 13px;
  }

  .all-games-loading__spinner {
    width: 20px;
    height: 20px;
    margin-top: 1px;
  }
}

@media (max-width: 680px) {
  .balance-chip {
    min-width: 0;
    flex: 1;
    max-width: 180px;
  }

  .workspace {
    width: calc(100vw - 16px);
  }

  .wins-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .game-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .game-card__title {
    font-size: 10px;
  }

  .game-card__tag {
    padding: 3px 6px;
    font-size: 9px;
  }

  .section__header--solo {
    margin-bottom: 10px;
  }

  .section__title {
    font-size: 18px;
  }

  .section__sub {
    margin-top: 3px;
    font-size: 10px;
  }

  .hero,
  .section,
  .aside-card,
  .footer {
    padding: 16px;
  }

  .mobile-tabbar {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(-1 * var(--app-mobile-bottom-visual-gap, 0px));
    z-index: 50;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: start;
    align-content: start;
    gap: 4px;
    padding: 8px 6px calc(8px + var(--app-mobile-bottom-visual-gap, 0px));
    border-radius: 28px;
    background: #13211d;
    border: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .5);
  }

  .mobile-tabbar button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: #94a3b8;
    background: transparent;
    padding: 6px 0;
    font-size: 10px;
    font-weight: 600;
    border: 0;
    transition: color .2s;
  }

  .mobile-tabbar__play {
    position: relative;
    width: 68px !important;
    height: 68px !important;
    margin-top: -38px;
    background: linear-gradient(145deg, #fff2cc 0%, #ffbf00 45%, #e6ac00 70%, #997300 100%) !important;
    border-radius: 18px !important;
    /* Squircle/Rounded Square */
    color: #332200 !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45), 0 0 0 5px rgba(18, 10, 45, 1), inset 0 2px 2px rgba(255, 255, 255, 0.8) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden;
    padding-top: 4px !important;
    border: 1px solid #ffd700 !important;
  }

  .mobile-tabbar__play svg {
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.25));
  }

  .mobile-tabbar__play span {
    font-size: 10px !important;
    font-weight: 900 !important;
    margin-top: -1px;
    letter-spacing: 0.05em;
    color: #332200;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
  }

  .mobile-tabbar button.is-active {
    color: #fff;
    background: transparent;
  }

  .mobile-tabbar button.mobile-tabbar__home.is-active {
    color: var(--money-on-brand);
  }

  .mobile-tabbar button.mobile-tabbar__home.is-active .nav-mobilebar__icon {
    color: var(--money-on-brand);
  }

  @keyframes bonus-badge-ping {
    0%   { transform: scale(1); opacity: 0.6; }
    70%  { transform: scale(1.9); opacity: 0; }
    100% { transform: scale(1.9); opacity: 0; }
  }

  .tabbar-bonus-wrap {
    position: relative;
  }

  /* badge 锟?scale+opacity only, GPU composited */
  .tabbar-bonus-badge {
    position: absolute;
    top: 2px;
    right: calc(50% - 14px);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff5c2b;
    border: 1.5px solid rgba(18,10,45,1);
    z-index: 2;
  }

  .tabbar-bonus-badge::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #ff5c2b;
    animation: bonus-badge-ping 2.4s ease-out infinite;
    will-change: transform, opacity;
  }

  .tabbar-vip-btn {
    position: relative;
    -webkit-tap-highlight-color: transparent;
    transition: transform .15s;
  }

  .tabbar-vip-btn:active {
    transform: scale(0.92);
  }

  @keyframes vip-glow-pulse {
    0%, 100% { filter: drop-shadow(0 0 6px rgba(255, 217, 90, 0.5)); }
    50%       { filter: drop-shadow(0 0 16px rgba(255, 217, 90, 1)) drop-shadow(0 0 6px rgba(255, 185, 0, 0.8)); }
  }

  @keyframes vip-dot-ping {
    0%   { transform: scale(1); opacity: 0.7; }
    70%  { transform: scale(2); opacity: 0; }
    100% { transform: scale(2); opacity: 0; }
  }

  .tabbar-vip-btn--notify {
    position: relative;
  }

  .tabbar-vip-btn--notify svg {
    animation: vip-glow-pulse 2s ease-in-out infinite;
  }

  .tabbar-vip-btn--notify::after {
    content: '';
    position: absolute;
    top: 3px;
    right: calc(50% - 14px);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff5c2b;
    border: 1.5px solid rgba(18, 10, 45, 1);
    animation: vip-dot-ping 2s ease-out infinite;
  }
}

.avatar--lg {
  width: 64px;
  height: 64px;
}

.uid-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  padding: 0;
  background: none;
  border: none;
  color: #9580c8;
  font-size: 12px;
  cursor: pointer;
  line-height: 1;
}

.uid-copy-btn:active {
  opacity: 0.7;
}

.uid-copy-btn__icon {
  opacity: 0.6;
  flex-shrink: 0;
}

.profile-pop-backdrop {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: rgba(0, 0, 0, 0.18);
}

.profile-pop {
  position: fixed;
  top: 84px;
  right: max(16px, calc((100vw - min(1440px, calc(100vw - 32px))) / 2));
  z-index: 46;
  width: 278px;
  padding: 16px;
}

.profile-pop__row {
  display: flex;
  gap: 12px;
  align-items: center;
}

.profile-pop__verify {
  width: 100%;
  margin-top: 14px;
}

.profile-pop__balance {
  width: 100%;
  margin-top: 12px;
}

.profile-pop__list {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.profile-pop__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  border-radius: 12px;
  color: var(--muted);
  background: rgba(50, 20, 90, 0.72);
  text-align: left;
}

.mobile-quickbar {
  display: none;
}

.bigwins-mobile {
  display: none;
}

.bigwins-desktop {
  display: block;
}

.bigwins-desktop .withdraw-rail,
.bigwins-desktop .promo-coin-banner {
  display: block;
  margin-top: 14px;
}

.bigwins-wrapper > .withdraw-rail,
.bigwins-wrapper > .promo-coin-banner {
  display: none;
}

@media (max-width: 1280px) {
  .topbar__center {
    display: none;
  }

  .bigwins-desktop .section__header {
    display: none;
  }

  .bigwins-desktop .section {
    padding-top: 12px;
  }

  .bigwins-desktop .wins-spotlight,
  .bigwins-desktop .wins-ticker {
    margin-top: 0;
  }

  .withdraw-rail__main {
    grid-template-columns: minmax(260px, 1.02fr) minmax(360px, 1.24fr) minmax(188px, auto);
    gap: 14px;
  }

  .withdraw-rail__tasks {
    grid-template-columns: minmax(0, 1fr) minmax(240px, 1fr);
    gap: 10px;
  }

  .withdraw-rail__actions {
    min-width: 188px;
  }
}

@media (max-width: 1160px) {
  .withdraw-rail {
    padding: 14px 16px;
  }

  .withdraw-rail__gift {
    left: 160px;
    top: -26px;
    width: 82px;
    height: 74px;
    transform: rotate(-16deg);
  }

  .withdraw-rail__main {
    grid-template-columns: minmax(180px, 1fr) minmax(240px, 1fr) auto;
    padding-left: 0;
  }

  .withdraw-rail__tasks {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 900px) {
  .withdraw-rail__gift {
    left: 140px;
    top: -22px;
    width: 74px;
    height: 66px;
    transform: rotate(-15deg);
  }

  .withdraw-rail__main {
    grid-template-columns: minmax(0, 1fr) auto;
    padding-left: 0;
  }

  .withdraw-rail__copy {
    grid-column: 1 / -1;
  }

  .withdraw-rail__tasks {
    grid-template-columns: minmax(0, 1fr);
  }

  .withdraw-rail__task--recharge {
    display: none;
  }

  .withdraw-rail__actions {
    min-width: 132px;
  }
}

@media (max-width: 680px) {
  .hero {
    min-height: 0;
    padding: 18px 16px;
  }

  .hero__eyebrow {
    font-size: 10px;
  }

  .hero__title {
    font-size: 28px;
  }

  .hero__stats {
    gap: 10px;
  }

  .stat-card {
    flex: 1 1 100px;
    min-width: 0;
  }

  .profile-pop-backdrop {
    background: rgba(0, 0, 0, 0.46);
  }

  .profile-pop {
    left: 12px;
    right: 12px;
    top: auto;
    bottom: 94px;
    width: auto;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 80px;
    border-radius: 24px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
  }

  .profile-pop::-webkit-scrollbar {
    width: 6px;
    display: block !important;
  }

  .profile-pop::-webkit-scrollbar-track {
    background: transparent;
  }

  .profile-pop::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.4);
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    background-clip: padding-box;
  }

  .profile-pop::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.6);
  }

  .topbar__tasks-btn {
    display: none !important;
  }

  .mobile-quickbar--compact {
    display: flex !important;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    justify-content: space-between;
    gap: 6px;
    margin: 0 0 6px;
  }

  .content,
  .stack,
  .bigwins-wrapper {
    min-width: 0;
    overflow-x: hidden;
  }

  .content,
  .stack {
    gap: 10px;
  }

  .content.content--mobile-page {
    padding-bottom: var(--mobile-tabbar-reserve, 120px);
  }

  .workspace.workspace--mobile-subpage {
    padding-top: 0 !important;
  }

  .mobile-page-card {
    display: grid;
    gap: 14px;
    min-width: 0;
    padding: var(--space-4);
    box-sizing: border-box;
  }

  .shop-page__header,
  .promo-page__header,
  .mobile-menu-page__header {
    display: grid;
    gap: 6px;
    padding: 0;
  }

  .shop-page__title,
  .promo-page__title,
  .mobile-menu-page__title {
    color: #fff8de;
    font-size: 24px;
    font-weight: 900;
    line-height: 1.05;
  }

  .shop-page__desc {
    color: rgba(238, 232, 255, .74);
    font-size: 13px;
    line-height: 1.5;
  }

  .shop-page__card {
    display: grid;
    gap: 0;
    border-radius: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    overflow: visible;
  }

  .shop-page__body-shell {
    padding: 0;
  }

  .shop-page .shop-dialog__body-shell,
  .shop-page .shop-dialog__main,
  .shop-page .shop-dialog__main--list-only {
    overflow: visible;
  }

  .shop-page .shop-dialog__main--list-only {
    padding-top: 0;
  }

  .shop-page .shop-dialog__main {
    min-width: 0;
  }

  .shop-page .shop-dialog__footer,
  .shop-page .shop-dialog__footer--first-recharge {
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  }

  .promo-modal__list--page {
    display: grid;
    gap: 14px;
  }

  .mobile-menu-page__content {
    display: grid;
    gap: 12px;
  }

  .mobile-menu-page .sidebar-profile-card,
  .mobile-menu-page .sidebar-menu-card {
    margin: 0;
  }

  .reward-pool-page .reward-pool-overlay--page {
    position: relative;
    inset: auto;
    z-index: 0;
    display: block;
    min-height: auto;
    padding: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
  }

  .vip-page .vip-center-overlay--page {
    position: relative;
    inset: auto;
    z-index: 0;
    display: grid;
    gap: 14px;
    min-height: auto;
    padding: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
  }

  .mobile-page-card.mobile-page-card--reward-pool {
    padding: 0;
    gap: 0;
  }

  .mobile-page-card.mobile-page-card--vip {
    padding: var(--space-4);
    gap: 14px;
  }

  .reward-pool-page__header,
  .vip-page .vc-header--page {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-4) var(--space-3);
    background: transparent;
    border: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .reward-pool-page__title {
    color: #fff8de;
    font-size: 24px;
    font-weight: 900;
    line-height: 1.05;
  }

  .vip-page .vc-header--page {
    justify-content: space-between;
    padding: 0;
  }

  .vip-page .vc-header__title {
    flex: 1;
    text-align: center;
    color: #fff8de;
    font-size: 24px;
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: 0;
  }

  .vip-page .vc-body {
    display: grid;
    gap: 14px;
    flex: initial;
    overflow: visible;
    overscroll-behavior: auto;
    padding-bottom: var(--mobile-tabbar-reserve, calc(120px + env(safe-area-inset-bottom, 0px)));
  }

  .vip-page .vc-progress-wrap,
  .vip-page .vc-unlock-card,
  .vip-page .vc-section {
    margin: 0;
  }

  .vip-page .vc-section {
    padding: 0;
  }

  .reward-pool-page .reward-pool__body {
    padding-bottom: var(--mobile-tabbar-reserve, calc(120px + env(safe-area-inset-bottom, 0px)));
  }

  .bigwins-desktop {
    display: none !important;
  }

  .bigwins-wrapper > .withdraw-rail,
  .bigwins-wrapper > .promo-coin-banner {
    display: block;
    margin-bottom: 10px;
  }

  .bigwins-wrapper > .promo-coin-banner {
    overflow: visible;
  }

  .wins-leaderboard-panel--mobile {
    padding: 8px;
    border-radius: 10px;
    border: 1px solid rgba(146, 134, 193, .24);
    background: linear-gradient(rgba(0, 0, 0, .72), rgba(0, 0, 0, .72));
  }

  .wins-leaderboard-panel--mobile .wins-leaderboard-panel__tabs {
    display: flex;
    width: auto;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
  }

  .wins-leaderboard-panel--mobile .wins-leaderboard-panel__tab {
    flex: 0 1 auto;
    min-width: 128px;
    height: 28px;
    font-size: 10px;
    padding: 0 8px;
  }

  .wins-leaderboard-panel--mobile .wins-leaderboard-panel__period {
    margin-top: 6px;
    margin-bottom: 2px;
    line-height: 1.25;
    text-align: center;
  }

  .wins-leaderboard-panel--mobile .wins-leaderboard-panel__header-row,
  .wins-leaderboard-panel--mobile .wins-leaderboard-panel__row {
    grid-template-columns: 52px minmax(68px, 1fr) minmax(94px, 1fr) 90px;
    gap: 6px;
  }

  .wins-leaderboard-panel--mobile .wins-leaderboard-panel__header-row {
    margin-top: 8px;
    padding: 0 6px;
    font-size: 9px;
  }

  .wins-leaderboard-panel--mobile .wins-leaderboard-panel__row {
    min-height: 34px;
    padding: 0 6px;
    font-size: 10px;
  }

  .wins-leaderboard-panel--mobile .wins-leaderboard-panel__reward-chip {
    height: 21px;
    padding: 0 6px;
  }

  .wins-leaderboard-panel--mobile .wins-leaderboard-panel__reward-chip img {
    width: 14px;
    height: 14px;
  }

  .wins-leaderboard-panel--mobile .wins-leaderboard-panel__reward-chip span {
    font-size: 9px;
  }

  @media (max-width: 420px) {
    .wins-leaderboard-panel--mobile .wins-leaderboard-panel__tab {
      min-width: 118px;
      height: 26px;
      font-size: 9px;
    }

    .wins-leaderboard-panel--mobile .wins-leaderboard-panel__header-row,
    .wins-leaderboard-panel--mobile .wins-leaderboard-panel__row {
      grid-template-columns: 48px minmax(54px, 1fr) minmax(78px, 1fr) 82px;
      gap: 5px;
    }

    .wins-leaderboard-panel--mobile .wins-leaderboard-panel__row {
      font-size: 10px;
    }

    .wins-leaderboard-panel--mobile .wins-leaderboard-panel__reward-chip {
      height: 20px;
      padding: 0 5px;
    }

    .wins-leaderboard-panel--mobile .wins-leaderboard-panel__reward-chip span {
      font-size: 8px;
    }
  }

  @media (max-width: 360px) {
    .wins-leaderboard-panel--mobile .wins-leaderboard-panel__header-row,
    .wins-leaderboard-panel--mobile .wins-leaderboard-panel__row {
      grid-template-columns: 44px minmax(0, 1fr) minmax(60px, 1fr) 68px;
      gap: 4px;
    }

    .wins-leaderboard-panel--mobile .wins-leaderboard-panel__header-row {
      font-size: 8px;
    }

    .wins-leaderboard-panel--mobile .wins-leaderboard-panel__row {
      font-size: 9px;
    }

    .wins-leaderboard-panel--mobile .wins-leaderboard-panel__cell--name,
    .wins-leaderboard-panel--mobile .wins-leaderboard-panel__cell--score {
      font-size: 9px;
    }

    .wins-leaderboard-panel--mobile .wins-leaderboard-panel__rank-badge {
      font-size: 9px;
      height: 19px;
      padding: 0 5px;
    }

    .wins-leaderboard-panel--mobile .wins-leaderboard-panel__reward-chip {
      height: 18px;
      padding: 0 4px;
      gap: 3px;
    }

    .wins-leaderboard-panel--mobile .wins-leaderboard-panel__reward-chip img {
      width: 12px;
      height: 12px;
    }

    .wins-leaderboard-panel--mobile .wins-leaderboard-panel__reward-chip span {
      font-size: 7px;
    }
  }


  .quick-widget {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: transparent;
    border: none;
    padding: 0;
    gap: 4px;
    cursor: pointer;
    min-width: 0;
  }

  .quick-widget__icon {
    position: relative;
    width: 42px;
    height: 42px;
    overflow: visible;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s, box-shadow 0.2s;
  }

  .quick-widget:active .quick-widget__icon {
    transform: scale(0.95);
  }

  .quick-widget__icon svg {
    width: 20px;
    height: 20px;
    position: relative;
    z-index: 2;
  }

  .quick-widget__icon.color-bonus-cash svg {
    width: 30px;
    height: 23px;
  }

  .quick-widget__icon .currency-symbol {
    min-width: 0;
    font-size: 14px;
    font-weight: 900;
    position: relative;
    z-index: 2;
  }

  .color-bonus {
    background: linear-gradient(135deg, rgba(244, 63, 94, 0.7), rgba(192, 38, 211, 0.15));
    color: #f43f5e;
    box-shadow: inset 0 0 0 1px rgba(244, 63, 94, 0.3), 0 4px 12px rgba(244, 63, 94, 0.2);
  }

  .color-bonus-cash {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.72), rgba(244, 114, 182, 0.16));
    color: #fbbf24;
    box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.34), 0 4px 12px rgba(251, 191, 36, 0.18);
  }

  .color-reward-pool {
    background:
      radial-gradient(circle at 30% 18%, rgba(255, 244, 184, 0.42), transparent 100%),
      linear-gradient(145deg, rgba(250, 204, 21, 0.32), rgba(168, 85, 247, 0.34) 52%, rgba(236, 72, 153, 0.24));
    color: #ffe580;
    box-shadow:
      inset 0 0 0 1px rgba(255, 226, 139, 0.52),
      inset 0 12px 20px rgba(255, 255, 255, 0.08),
      0 6px 16px rgba(245, 158, 11, 0.24),
      0 0 18px rgba(168, 85, 247, 0.18);
  }

  .quick-widget__icon.color-reward-pool svg {
    width: 30px;
    height: 23px;
  }

  .color-recharge {
    background: linear-gradient(135deg, rgba(255, 214, 102, 0.86), rgba(245, 158, 11, 0.3));
    color: #fef3c7;
    box-shadow:
      inset 0 0 0 1px rgba(255, 221, 143, 0.52),
      inset 0 10px 18px rgba(255, 244, 184, 0.12),
      0 6px 16px rgba(245, 158, 11, 0.28);
  }

  .color-msg {
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.85), rgba(59, 130, 246, 0.15));
    color: #38bdf8;
    box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.3), 0 4px 12px rgba(56, 189, 248, 0.2);
  }

  .color-withdraw {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.85), rgba(20, 184, 166, 0.15));
    color: #10b981;
    box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.3), 0 4px 12px rgba(16, 185, 129, 0.2);
  }

  .color-upgrade {
    background:
      radial-gradient(circle at top left, rgba(255, 226, 163, 0.34), transparent 100%),
      linear-gradient(135deg, rgba(190, 24, 93, 0.24), rgba(245, 158, 11, 0.24));
    color: #fde7f3;
    box-shadow:
      inset 0 0 0 1px rgba(251, 191, 36, 0.38),
      inset 0 12px 20px rgba(255, 255, 255, 0.05),
      0 8px 18px rgba(190, 24, 93, 0.2);
  }

  .quick-widget__label {
    font-size: 9.5px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  .quick-widget--bonus-withdraw .quick-widget__label {
    width: 100%;
    line-height: 11px;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .quick-widget--reward-pool .quick-widget__label {
    color: #ffe9a3;
  }

  .quick-widget__val {
    font-size: 10px;
    font-weight: 900;
    color: #ffd94d;
    white-space: nowrap;
  }

  .qw-badge {
    position: absolute;
    top: 1px;
    right: 1px;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    padding: 0 4px;
    font-size: 9px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    z-index: 3;
  }

  .qw-badge--danger {
    background: linear-gradient(135deg, #ef4444, #b91c1c);
    color: #fff;
  }

  .qw-badge--warn {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
  }

  .qw-badge--success {
    background: #10b981;
    color: #fff;
    width: 12px;
    height: 12px;
    min-width: 12px;
    top: 2px;
    right: 2px;
    box-shadow: 0 0 6px #10b981;
    font-size: 8px;
    line-height: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .28);
  }

  .qw-progress {
    position: relative;
    width: 100%;
    max-width: 48px;
    height: 14px;
    background: rgba(0, 0, 0, 0.4);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.08);
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  .qw-progress--loading {
    justify-content: center;
    background: rgba(0, 0, 0, 0.32);
  }

  .qw-progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: linear-gradient(90deg, #10b981, #059669);
    border-radius: 7px;
    transition: width 0.3s;
  }

  .qw-progress-text {
    position: relative;
    z-index: 1;
    font-size: 9px;
    font-weight: 900;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  }

  .qw-progress__spinner {
    width: 10px;
    height: 10px;
    border: 2px solid rgba(255, 255, 255, .24);
    border-top-color: #ffd94d;
    border-radius: 50%;
    animation: captcha-spin .8s linear infinite;
  }

  .withdraw-rail {
    margin-top: 0;
    padding: 14px;
    border-radius: 18px;
    min-height: 0;
  }

  .withdraw-rail__alert {
    font-size: 10px;
  }

  .withdraw-rail__toolbar {
    gap: 10px;
  }

  .withdraw-rail__toolbar-actions {
    gap: 8px;
  }

  .withdraw-rail__bg--desktop {
    background:
      radial-gradient(circle at 82% 18%, rgba(255, 196, 82, .24), transparent 18%),
      radial-gradient(circle at 88% 36%, rgba(255, 89, 138, .18), transparent 18%),
      linear-gradient(180deg, rgba(90, 38, 167, .18), rgba(22, 8, 52, .08)),
      linear-gradient(135deg, rgba(45, 18, 92, .18), rgba(23, 9, 53, .04));
  }

  .withdraw-rail__bg::after {
    background:
      linear-gradient(180deg, rgba(18, 8, 42, .72) 0%, rgba(18, 8, 42, .28) 34%, rgba(18, 8, 42, .46) 100%);
  }

  .withdraw-rail__gift {
    left: auto;
    right: 34px;
    top: 8px;
    bottom: auto;
    width: 78px;
    height: 70px;
    transform: rotate(15deg);
    transform-origin: center bottom;
  }

  .withdraw-rail__gift-img--desktop {
    display: none;
  }

  .withdraw-rail__gift-img--mobile {
    display: block;
    object-position: center center;
  }

  .withdraw-rail__gift::before {
    right: auto;
    left: -6px;
    bottom: -6px;
    width: 40px;
    height: 40px;
  }

  .withdraw-rail__gift::after {
    inset: 20% -10% -20% 2%;
    filter: blur(18px);
  }

  .withdraw-rail__main {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding-left: 0;
    padding-bottom: 0;
  }

  .withdraw-rail__copy {
    align-items: flex-start;
    gap: 12px;
    padding-right: 54px;
  }

  .withdraw-rail__refresh {
    width: 38px;
    min-width: 38px;
    height: 38px;
    min-height: 38px;
    padding: 0;
    margin-right: 44px;
    justify-content: center;
    border-radius: 12px;
  }

  .withdraw-rail__refresh-label {
    display: none;
  }

  .withdraw-rail__toggle {
    width: 38px;
    height: 38px;
    border-radius: 12px;
  }

  .withdraw-rail__icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
  }

  .withdraw-rail__headline {
    font-size: 17px;
  }

  .withdraw-rail__sub {
    font-size: 12px;
  }

  .withdraw-rail__tasks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .withdraw-rail__task {
    padding: 12px;
  }

  .withdraw-rail__task--recharge {
    display: block;
  }

  .withdraw-rail__task-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .withdraw-rail__task-title,
  .withdraw-rail__task-meta,
  .withdraw-rail__task-value {
    white-space: normal;
  }

  .withdraw-rail__actions {
    grid-template-columns: minmax(0, 1fr) auto;
    min-width: 0;
  }

  .withdraw-rail__cta,
  .withdraw-rail__rules {
    min-height: 44px;
  }

  .withdraw-rail__alert {
    min-height: 32px;
  }
}

.task-list {
  display: grid;
  gap: 14px;
}

.modal--withdraw-tasks {
  width: min(520px, 100%);
  padding: 0;
  overflow: hidden;
}
.wtask-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 24px 24px 0;
}

.wtask-header__title {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -.02em;
}

.wtask-header__sub {
  margin-top: 4px;
  font-size: 13px;
  color: var(--muted);
}

.wtask-header .login-modal__close {
  position: static;
  flex-shrink: 0;
  background: rgba(255, 255, 255, .07);
}

.wtask-list {
  display: grid;
  gap: 10px;
  padding: 20px 24px;
}

.wtask-list__loading {
  display: grid;
  place-items: center;
  gap: 14px;
  min-height: 220px;
  padding: 28px 18px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(30, 12, 63, 0.92), rgba(21, 8, 45, 0.88));
  border: 1px solid rgba(160, 80, 255, .12);
}

.wtask-list__loading-text {
  color: #bda9eb;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .02em;
}

.wtask-list__empty {
  display: grid;
  justify-items: center;
  gap: 10px;
  min-height: 220px;
  padding: 28px 22px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(30, 12, 63, 0.92), rgba(21, 8, 45, 0.88));
  border: 1px solid rgba(160, 80, 255, .12);
  text-align: center;
}

.wtask-list__empty-icon {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 20px;
  color: #ffd666;
  background: radial-gradient(circle at 30% 30%, rgba(255, 230, 160, .28), rgba(255, 170, 0, .08));
  border: 1px solid rgba(255, 214, 102, .2);
}

.wtask-list__empty-title {
  font-size: 18px;
  font-weight: 800;
  color: #f3e8ff;
}

.wtask-list__empty-desc {
  max-width: 360px;
  font-size: 14px;
  line-height: 1.5;
  color: #bda9eb;
}

.wtask-list__empty-btn {
  min-width: 164px;
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid rgba(168, 85, 247, .34);
  border-radius: 999px;
  background: rgba(124, 58, 237, .14);
  color: #f5f3ff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
  cursor: pointer;
}

.wtask-card {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(160, 80, 255, .12);
  transition: border-color .18s;
}

.wtask-card:hover {
  border-color: rgba(160, 80, 255, .28);
}

.wtask-card--done {
  background: rgba(74, 222, 128, .05);
  border-color: rgba(74, 222, 128, .2);
}

.wtask-card__icon-wrap {
  position: relative;
  flex-shrink: 0;
}

.wtask-card__img-placeholder {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(124, 58, 237, .3), rgba(192, 38, 211, .2));
  border: 1px solid rgba(160, 80, 255, .2);
  display: grid;
  place-items: center;
  color: rgba(200, 160, 255, .7);
}

.wtask-card--done .wtask-card__img-placeholder {
  background: linear-gradient(135deg, rgba(74, 222, 128, .15), rgba(34, 197, 94, .08));
  border-color: rgba(74, 222, 128, .25);
}

.floating-actions__btn svg {
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0 !important;
}

.wtask-card__check {
  position: absolute;
  bottom: -4px;
  right: -4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #22c55e;
  display: grid;
  place-items: center;
  border: 2px solid #0c0620;
}

.wtask-card__body {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 10px;
}

.wtask-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.wtask-card__heading {
  min-width: 0;
}

.wtask-card__title {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.3;
}

.wtask-card__status {
  flex-shrink: 0;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.wtask-card__status--done {
  color: #4ade80;
  background: rgba(22, 163, 74, .14);
  border: 1px solid rgba(74, 222, 128, .24);
}

.wtask-card__status--progress {
  color: #f5d0fe;
  background: rgba(124, 58, 237, .2);
  border: 1px solid rgba(192, 132, 252, .24);
}

.wtask-card__status--locked {
  color: #c4b5fd;
  background: rgba(88, 28, 135, .22);
  border: 1px solid rgba(167, 139, 250, .18);
}

.wtask-card__meta {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.wtask-card__pct {
  color: #a78bfa;
  font-weight: 700;
}

.wtask-progress {
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  overflow: hidden;
}

.wtask-progress__bar {
  height: 100%;
  background: linear-gradient(90deg, #7c3aed, #d946ef);
  border-radius: inherit;
  transition: width .4s ease;
}

.wtask-card__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  height: 38px;
  padding: 0 14px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, #7c3aed, #c026d3);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .18s, box-shadow .18s;
}

.wtask-card__btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(160, 40, 220, .4);
}

.wtask-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 24px;
  margin: 0;
  background: rgba(248, 113, 113, .08);
  border-top: 1px solid rgba(248, 113, 113, .15);
}

.wtask-footer--ready {
  background: rgba(74, 222, 128, .07);
  border-color: rgba(74, 222, 128, .2);
}

.wtask-header__sub--ready {
  color: #4ade80;
  font-weight: 600;
}

.wtask-footer__cta--ready {
  background: linear-gradient(135deg, #16a34a, #4ade80);
  box-shadow: 0 0 18px rgba(74, 222, 128, .45);
  animation: wtask-cta-pulse 2s ease-in-out infinite;
}

@keyframes wtask-cta-pulse {
  0%, 100% { box-shadow: 0 0 18px rgba(74, 222, 128, .45); }
  50% { box-shadow: 0 0 28px rgba(74, 222, 128, .75); }
}

.wtask-footer__body {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.wtask-footer__icon {
  flex-shrink: 0;
}

.wtask-footer__copy {
  min-width: 0;
}

.wtask-footer__title {
  font-size: 14px;
  font-weight: 800;
}

.wtask-footer__sub {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}

.wtask-footer__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.wtask-footer__rules {
  flex-shrink: 0;
  height: 36px;
  padding: 0 14px;
  border: 1px solid rgba(160, 80, 255, .3);
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.wtask-footer__cta {
  flex-shrink: 0;
  height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, #f43f5e, #c026d3);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: transform .18s;
}

.wtask-footer__cta:hover {
  transform: scale(1.04);
}

@media (max-width: 600px) {
  .modal--withdraw-tasks {
    width: 100%;
    max-height: calc(100dvh - 24px);
  }

  .wtask-header {
    padding: 20px 18px 0;
    gap: 14px;
  }

  .wtask-header__title {
    font-size: 20px;
  }

  .wtask-header__sub {
    font-size: 12px;
    line-height: 1.5;
  }

  .wtask-list {
    gap: 12px;
    padding: 18px;
  }

  .wtask-card {
    align-items: flex-start;
    gap: 12px;
    padding: 16px 14px;
  }

  .wtask-card__img-placeholder {
    width: 56px;
    height: 56px;
    border-radius: 14px;
  }

  .wtask-card__title {
    font-size: 16px;
  }

  .wtask-card__btn {
    width: 100%;
    min-height: 42px;
    justify-content: center;
    padding: 0 16px;
    font-size: 13px;
  }

  .wtask-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 16px 18px 18px;
  }

  .wtask-footer__actions {
    margin-left: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wtask-footer__rules,
  .wtask-footer__cta {
    width: 100%;
    justify-content: center;
  }
}

.withdraw-rules {
  width: min(560px, 100%);
  max-height: calc(100vh - 32px);
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.withdraw-rules__hero {
  position: relative;
  padding: 24px 24px 18px;
  background:
    radial-gradient(circle at top left, rgba(255, 184, 108, .18), transparent 34%),
    linear-gradient(180deg, #2a0d61 0%, #170737 100%);
  border-bottom: 1px solid rgba(200, 120, 255, .16);
}

.withdraw-rules__hero-copy {
  display: grid;
  gap: 10px;
  max-width: calc(100% - 72px);
}

.withdraw-rules__pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 190, 110, .28);
  background: rgba(255, 190, 110, .12);
  color: #ffd78a;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.withdraw-rules__title {
  font-size: 30px;
  font-weight: 900;
  line-height: 1.05;
  color: #fff;
}

.withdraw-rules__desc {
  color: rgba(225, 213, 255, .74);
  font-size: 14px;
  line-height: 1.55;
}

.withdraw-rules__body {
  display: grid;
  flex: 1 1 auto;
  min-height: 0;
  gap: 14px;
  padding: 20px 24px 24px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.4) transparent;
}

.withdraw-rules__group {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 14px;
  align-items: start;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(168, 120, 255, .14);
  background: linear-gradient(180deg, rgba(38, 16, 78, .96), rgba(18, 8, 42, .98));
  box-shadow: 0 10px 24px rgba(0, 0, 0, .16);
}

.withdraw-rules__group--highlight {
  border-color: rgba(255, 112, 152, .16);
  background:
    radial-gradient(circle at top right, rgba(255, 164, 195, .1), transparent 36%),
    linear-gradient(180deg, rgba(77, 25, 48, .9), rgba(44, 14, 30, .96));
  box-shadow:
    inset 0 0 0 1px rgba(255, 214, 226, .04),
    0 12px 28px rgba(0, 0, 0, .2);
}

.withdraw-rules__group-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 206, 123, .18), rgba(160, 74, 255, .14));
  color: #ffd37f;
  font-size: 24px;
  box-shadow: inset 0 0 0 1px rgba(255, 211, 127, .16);
}

.withdraw-rules__group--highlight .withdraw-rules__group-icon {
  background: linear-gradient(180deg, rgba(255, 181, 204, .16), rgba(145, 61, 100, .18));
  color: #ffdca9;
  box-shadow: inset 0 0 0 1px rgba(255, 206, 222, .18);
}

.withdraw-rules__group-icon svg {
  width: 26px;
  height: 26px;
}

.withdraw-rules__group-copy {
  display: grid;
  gap: 6px;
}

.withdraw-rules__group-title {
  color: #fff;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.2;
}

.withdraw-rules__group-text {
  color: rgba(220, 208, 255, .84);
  font-size: 14px;
  line-height: 1.6;
}

.withdraw-rules__steps {
  display: grid;
  gap: 10px;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
}

.withdraw-rules__step {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  align-items: start;
}

.withdraw-rules__step-index {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(255, 211, 127, .14);
  border: 1px solid rgba(255, 218, 147, .2);
  color: #ffe3a2;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
}

.withdraw-rules__step-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.withdraw-rules__step-label {
  color: rgba(255, 223, 170, .94);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.withdraw-rules__step-text {
  color: rgba(232, 220, 255, .9);
  font-size: 14px;
  line-height: 1.55;
}

.withdraw-rules__body::-webkit-scrollbar {
  width: 6px;
  display: block !important;
}

.withdraw-rules__body::-webkit-scrollbar-track {
  background: transparent;
}

.withdraw-rules__body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.4);
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  background-clip: padding-box;
}

.withdraw-rules__body::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.6);
}

@media (max-width: 680px) {
  .withdraw-rules__hero {
    padding: 20px 18px 16px;
  }

  .withdraw-rules__hero-copy {
    max-width: calc(100% - 62px);
    gap: 8px;
  }

  .withdraw-rules__title {
    font-size: 24px;
  }

  .withdraw-rules__desc {
    font-size: 13px;
  }

  .withdraw-rules__body {
    padding: 16px 18px 18px;
    gap: 12px;
  }

  .withdraw-rules__group {
    grid-template-columns: 44px 1fr;
    gap: 12px;
    padding: 14px;
    border-radius: 16px;
  }

  .withdraw-rules__group-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    font-size: 20px;
  }

  .withdraw-rules__group-title {
    font-size: 15px;
  }

  .withdraw-rules__group-text {
    font-size: 13px;
    line-height: 1.5;
  }

  .withdraw-rules__steps {
    gap: 8px;
  }

  .withdraw-rules__step {
    grid-template-columns: 24px 1fr;
    gap: 8px;
  }

  .withdraw-rules__step-index {
    width: 24px;
    height: 24px;
    font-size: 12px;
  }

  .withdraw-rules__step-label {
    font-size: 10px;
  }

  .withdraw-rules__step-text {
    font-size: 13px;
  }

  .task-card {
    grid-template-columns: 1fr;
  }

  .task-card__icon {
    width: 64px;
    height: 64px;
  }

  .task-card__btn {
    width: 100%;
    min-width: 0;
  }
}


.empty-state {
  display: grid;
  place-items: center;
  min-height: 180px;
  padding: 24px;
  border-radius: 20px;
  color: var(--muted);
  background: rgba(25, 10, 50, .4);
  border: 1px dashed rgba(160, 60, 255, .2);
  text-align: center;
}

.notice-detail {
  display: grid;
  gap: 16px;
}

.notice-detail__body {
  padding: 16px 18px;
  border-radius: 18px;
  color: #d9efe1;
  background: rgba(19, 48, 37, .72);
  border: 1px solid rgba(255, 255, 255, .05);
  line-height: 1.8;
  white-space: pre-wrap;
}

.support-grid {
  display: grid;
  gap: 14px;
}

/* 鈹€鈹€ Inbox modal 鈹€鈹€ */
.modal--inbox {
  position: relative;
  width: min(560px, 100%);
  padding: 0;
  overflow: visible;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 40px);
  background: linear-gradient(180deg, #180a3a 0%, #0d061f 100%);
  border: 1px solid rgba(160, 80, 255, .32);
}

.inbox-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 24px 16px;
  flex-shrink: 0;
}

.inbox-hd__title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: #fff;
}

.inbox-hd__title svg {
  color: #c084fc;
  filter: drop-shadow(0 0 8px rgba(192, 132, 252, .4));
}

.inbox-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 99px;
  background: #f43f5e;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 2px 10px rgba(244, 63, 94, .45);
}

.inbox-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px 14px;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(160, 60, 255, .15);
}

.inbox-toolbar__count {
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
}

.inbox-del-btn {
  font-size: 12px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 10px;
  background: rgba(239, 68, 68, .06);
  border: 1px solid rgba(239, 68, 68, .2);
  color: #f87171;
  cursor: pointer;
  transition: all .18s;
}

.inbox-del-btn:hover {
  background: rgba(239, 68, 68, .14);
  border-color: rgba(239, 68, 68, .45);
  color: #fff;
}

.inbox-list {
  overflow-y: auto;
  flex: 1;
  padding: 0;
}

.modal--settings {
  position: relative;
  width: min(560px, 100%);
  padding: 0;
  overflow: visible;
  background: linear-gradient(180deg, #180a3a 0%, #0d061f 100%);
  border: 1px solid rgba(160, 80, 255, .32);
}

.settings-hd {
  padding-bottom: 12px;
}

.settings-list {
  display: grid;
  gap: 12px;
  padding: 0 24px 24px;
}

.settings-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(31, 14, 66, .72);
  border: 1px solid rgba(160, 80, 255, .22);
}

.settings-item__copy {
  min-width: 0;
}

.settings-item__title {
  font-size: 14px;
  font-weight: 700;
  color: #efe6ff;
}

.settings-item__ctrl {
  display: inline-flex;
  align-items: center;
}

.settings-switch {
  height: 38px;
  min-width: 96px;
  padding: 0 12px 0 8px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  color: rgba(244, 235, 255, .84);
  display: inline-flex;
  align-items: center;
  flex-direction: row-reverse;
  gap: 8px;
  cursor: pointer;
  transition: all .18s ease;
}

.settings-switch:hover {
  border-color: rgba(192, 132, 252, .5);
}

.settings-switch.is-on {
  background: linear-gradient(135deg, rgba(244, 63, 94, .95), rgba(192, 38, 211, .95));
  border-color: rgba(255, 255, 255, .28);
  color: #fff;
  flex-direction: row;
}

.settings-switch__thumb {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .28);
  transition: transform .18s ease, background .18s ease;
}

.settings-switch.is-on .settings-switch__thumb {
  transform: translateX(2px);
  background: #fff;
}

.settings-switch__text {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
}

.inbox-list__loading {
  min-height: 260px;
  display: grid;
  place-items: center;
  gap: 14px;
  align-content: center;
  justify-items: center;
  padding: 32px 24px 40px;
}

.inbox-list__loading-text {
  font-size: 14px;
  font-weight: 700;
  color: rgba(225, 214, 255, .78);
  text-align: center;
}

.inbox-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 24px;
  cursor: pointer;
  transition: all .2s;
  border-bottom: 1px solid rgba(160, 80, 255, .08);
  position: relative;
  background: transparent;
}

.inbox-item:nth-child(even) {
  background: rgba(160, 80, 255, 0.15) !important;
}

.inbox-item:hover {
  background: rgba(160, 80, 255, .25) !important;
}

.inbox-item:last-child {
  border-bottom: none;
}

.inbox-item__dot {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-top: 6px;
  background: transparent;
}

.inbox-item--unread .inbox-item__dot {
  background: #d946ef;
  box-shadow: 0 0 10px rgba(217, 70, 239, .8);
}

.inbox-item__body {
  flex: 1;
  min-width: 0;
}

.inbox-item__row1 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.inbox-item__type {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 6px;
  flex-shrink: 0;
}

.inbox-item__type--system {
  background: rgba(100, 116, 139, .2);
  color: #94a3b8;
  border: 1px solid rgba(148, 163, 184, .15);
}

.inbox-item__type--event {
  background: rgba(234, 179, 8, .12);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, .15);
}

.inbox-item__type--reward {
  background: rgba(34, 197, 94, .12);
  color: #4ade80;
  border: 1px solid rgba(74, 222, 128, .15);
}

.inbox-item__time {
  font-size: 11px;
  color: var(--muted);
  margin-left: auto;
  flex-shrink: 0;
  white-space: nowrap;
  font-weight: 500;
}

.inbox-item__del {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  color: var(--muted);
  background: transparent;
  font-size: 14px;
  line-height: 1;
  transition: all .18s;
  opacity: 0;
}

.inbox-item:hover .inbox-item__del {
  opacity: 1;
}

.inbox-item__del:hover {
  background: rgba(239, 68, 68, .12);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, .2);
}

.inbox-item__title {
  font-size: 15px;
  font-weight: 700;
  color: #f0eaff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}

.inbox-item--unread .inbox-item__title {
  font-weight: 900;
  color: #fff;
}

.inbox-item__preview {
  font-size: 13px;
  color: #9580c8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}

/* Notice detail */
.inbox-detail-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 14px;
}

.inbox-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .06);
  cursor: pointer;
  transition: background .15s, color .15s;
}

.inbox-back-btn:hover {
  background: rgba(255, 255, 255, .1);
  color: var(--text);
}

.notice-detail__type-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.notice-detail__time {
  font-size: 12px;
  color: var(--muted);
  margin-left: auto;
}

.notice-detail__title {
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 14px;
  line-height: 1.3;
}

.notice-detail__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}

.support-card {
  display: grid;
  gap: 10px;
  padding: 16px 18px;
  border-radius: 18px;
  background: rgba(19, 48, 37, .72);
  border: 1px solid rgba(255, 255, 255, .05);
}

.support-card__title {
  font-size: 18px;
  font-weight: 800;
}

.support-card__meta {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

/* 鈹€鈹€ First Recharge Dialog 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ */
.fr-dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(400px, 92vw);
  max-height: calc(100dvh - 24px);
  background: linear-gradient(180deg, #1a0840 0%, #0d0424 100%);
  border: 1px solid rgba(200, 80, 255, .35);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .04) inset;
}

.fr-dialog__close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 10;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: rgba(0, 0, 0, .35);
  backdrop-filter: blur(8px);
  color: rgba(255, 255, 255, .85);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  transition: background .18s, transform .18s;
}

.fr-dialog__close svg,
.login-modal__close svg,
.modal__close svg,
.pp-dialog__close svg {
  width: 24px !important;
  height: 24px !important;
  flex-shrink: 0;
  display: block;
  pointer-events: none;
}

.fr-dialog__close:hover {
  background: rgba(0, 0, 0, .6);
  transform: scale(1.08);
}

.fr-dialog__banner {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  height: 200px;
  background: linear-gradient(135deg, rgba(120, 30, 200, .4), rgba(40, 10, 100, .6));
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fr-dialog__banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fr-dialog__banner-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 100%;
  border: 2px dashed rgba(160, 60, 255, .35);
  color: rgba(160, 100, 255, .6);
  font-size: 12px;
  text-align: center;
  padding: 12px;
}

.fr-dialog__banner-placeholder svg {
  opacity: .5;
}

.modal--reward-claim {
  width: min(440px, 92vw);
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: visible;
}

.modal--spin-win-claim {
  width: min(420px, 92vw);
}

.spin-win-card {
  position: relative;
  width: 100%;
  max-width: 380px;
  background: linear-gradient(135deg, rgba(34, 16, 62, .98) 0%, rgba(16, 8, 35, .98) 100%);
  border: 2px solid rgba(251, 191, 36, 0.3);
  border-radius: 24px;
  padding: 35px 25px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 20px rgba(251, 191, 36, 0.1);
  animation: spin-win-modal-pop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes spin-win-modal-pop {
  from {
    transform: scale(0.8);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.spin-win-card .login-modal__close {
  top: 10px;
  right: 15px;
  width: 34px;
  height: 34px;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.5);
}

.spin-win-card__icon {
  font-size: 50px;
  margin-bottom: 15px;
  filter: drop-shadow(0 0 10px rgba(251, 191, 36, 0.5));
}

.spin-win-card__title {
  color: #fbbf24;
  font-size: 28px;
  font-weight: 900;
  margin-bottom: 10px;
  text-shadow: 0 0 15px rgba(251, 191, 36, 0.4);
  letter-spacing: .02em;
}

.spin-win-card__desc {
  color: rgba(255, 255, 255, 0.9);
  font-size: 16px;
  margin-bottom: 15px;
}

.spin-win-card__reward {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(251, 191, 36, 0.5);
  border-radius: 12px;
  padding: 15px 30px;
  margin-bottom: 20px;
  width: 100%;
}

.spin-win-card__reward span {
  color: #fbbf24;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0.5px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.spin-win-card__instruction {
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  margin-bottom: 25px;
  line-height: 1.5;
}

.spin-win-card__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(90deg, #fbbf24, #f59e0b);
  color: #000;
  text-decoration: none;
  padding: 15px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 5px 15px rgba(245, 158, 11, 0.4);
  transition: all 0.3s ease;
  animation: spin-win-pulse-gold 2s infinite;
}

.spin-win-card__cta-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
}

.spin-win-card__download-icon {
  width: 26px;
  height: 26px;
  color: inherit;
}

@keyframes spin-win-pulse-gold {
  0% {
    transform: scale(1);
    box-shadow: 0 5px 15px rgba(245, 158, 11, 0.4);
  }
  50% {
    transform: scale(1.03);
    box-shadow: 0 5px 25px rgba(245, 158, 11, 0.6);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 5px 15px rgba(245, 158, 11, 0.4);
  }
}

.spin-win-card__cta span {
  font-size: 18px;
  letter-spacing: 1px;
}

.spin-win-card__cta small {
  font-size: 11px;
  opacity: 0.8;
  margin-top: 2px;
}

.spin-win-card__cta:active {
  transform: scale(0.95);
}

.spin-win-card__close-link {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  font-size: 13px;
  margin-top: 20px;
  cursor: pointer;
  text-decoration: underline;
}

.reward-claim__shell {
  position: relative;
  padding: 0 22px 24px;
  border-radius: 26px;
  border: 1px solid rgba(160, 60, 255, .2);
  background: linear-gradient(180deg, #170a38, #0c0620);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
}

.login-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
}

.reward-claim__shell .login-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
}

.reward-claim-modal__body-shell {
  padding: 0;
}

.reward-claim-modal__media {
  padding-top: var(--space-2);
  padding-bottom: 0;
}

.reward-claim-modal__media-img {
  width: 128px;
  height: 128px;
  object-fit: contain;
}

.reward-claim-modal__header {
  gap: 0;
}

.reward-claim-modal__header-copy {
  display: grid;
  gap: 4px;
}

.reward-claim-modal__title {
  color: var(--text-money);
  text-shadow: var(--money-text-shadow);
}

.reward-claim__banner {
  position: relative;
  margin: 0 -22px 18px;
  height: 188px;
  overflow: hidden;
  border-radius: 26px 26px 22px 22px;
  z-index: 1;
}

.reward-claim__banner-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.reward-claim__banner-ribbon {
  position: absolute;
  left: 24px;
  bottom: 22px;
  z-index: 2;
  transform: none;
  padding: 0;
  border: 0;
  background: transparent;
  color: transparent;
  font-size: clamp(16px, 4.2vw, 20px);
  font-weight: 900;
  letter-spacing: .05em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: linear-gradient(180deg, #fffde8 0%, #ffe566 18%, #ffb800 44%, #e87e00 60%, #ffb800 78%, #ffe566 94%, #fffde8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 1px 0 rgba(120, 40, 0, 1)) drop-shadow(0 2px 6px rgba(80, 15, 0, .95)) drop-shadow(0 0 18px rgba(255, 140, 0, .6)) drop-shadow(0 0 40px rgba(200, 70, 0, .3));
}

.reward-claim__banner-gradient {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  height: 92px;
  background: linear-gradient(180deg, rgba(10, 3, 27, 0), rgba(10, 3, 27, .82));
  pointer-events: none;
}

.reward-claim__body {
  display: grid;
  justify-items: center;
  gap: 14px;
  text-align: center;
  padding: 0 var(--space-6) var(--space-5);
  position: relative;
  z-index: 1;
}

.reward-claim__intro {
  width: min(430px, 100%);
  display: grid;
  gap: 6px;
  justify-items: center;
}

.reward-claim__eyebrow {
  color: rgba(255, 206, 114, .92);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.reward-claim__desc {
  color: rgba(240, 232, 255, .82);
  max-width: 320px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
}

.reward-claim__card {
  position: relative;
  width: min(470px, 100%);
  margin-top: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  overflow: hidden;
}

.reward-claim__items {
  display: grid;
  gap: 18px;
  align-items: start;
}

.reward-claim__items--1 {
  justify-items: center;
  grid-template-columns: 1fr;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.reward-claim__items--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.reward-claim__items--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.reward-claim__item {
  display: grid;
  justify-items: center;
  gap: 10px;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.reward-claim__item--single {
  gap: 4px;
}

.reward-claim__item-media {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.reward-claim__item-icon {
  display: block;
  width: 112px;
  height: 112px;
  position: relative;
  z-index: 1;
  object-fit: contain;
  filter: none;
}

.reward-claim__item-value {
  position: relative;
  z-index: 1;
  text-align: center;
  font-size: clamp(24px, 4vw, 34px);
  font-weight: 900;
  letter-spacing: -.03em;
  white-space: nowrap;
  line-height: 1;
  background: linear-gradient(180deg, #fffde8 0%, #ffe566 20%, #ffb800 46%, #e87e00 64%, #ffbe37 82%, #fff4c6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 1px 0 rgba(120, 40, 0, .9)) drop-shadow(0 4px 12px rgba(255, 149, 30, .2));
}

.reward-claim__item-note {
  position: relative;
  z-index: 1;
  margin-top: -4px;
  color: rgba(255, 245, 255, .8);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  white-space: normal;
}

.reward-claim__items--2 .reward-claim__item-value {
  font-size: clamp(20px, 3.5vw, 30px);
}

.reward-claim__items--3 .reward-claim__item-value {
  font-size: clamp(16px, 2.6vw, 24px);
}

.reward-claim__items--2 .reward-claim__item-note,
.reward-claim__items--3 .reward-claim__item-note {
  font-size: 11px;
}

.reward-claim__item--play {
  align-content: start;
}

.reward-claim__card--voucher {
  width: min(500px, 100%);
}

.reward-claim__item-play {
  min-width: 86px;
  height: 34px;
  margin-top: 4px;
  padding: 0 16px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(180deg, #ffbd56, #ff8419);
  color: #fff8f2;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .04em;
  cursor: pointer;
  box-shadow: 0 12px 20px rgba(255, 136, 20, .2), inset 0 2px 0 rgba(255, 244, 210, .35);
  transition: transform .18s ease, filter .18s ease;
}

.reward-claim__item-play:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
}

.reward-claim__cta {
  width: 100%;
  min-width: 0;
  white-space: nowrap;
}

.reward-claim__cta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.reward-claim__terms {
  width: fit-content;
  max-width: min(92%, 360px);
  margin-top: 0;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--text-secondary);
  font-size: var(--fs-body-md);
  line-height: var(--lh-body);
}

.reward-claim__welcome-note {
  width: min(92%, 360px);
  color: var(--text-secondary);
  font-size: var(--fs-heading-sm);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
  text-align: center;
}

.reward-claim__terms-check {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  margin-top: 1px;
  border: 1px solid rgba(168, 138, 255, .56);
  border-radius: 7px;
  background: rgba(18, 9, 46, .7);
  color: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color .16s ease, background-color .16s ease, color .16s ease, box-shadow .16s ease;
}

.reward-claim__terms-check.is-checked {
  border-color: rgba(255, 194, 78, .95);
  background: linear-gradient(180deg, #ffbf5e, #ff8d1f);
  color: #fffef6;
  box-shadow: 0 6px 14px rgba(255, 140, 31, .3);
}

.reward-claim__terms-check svg {
  width: 18px;
  height: 18px;
  stroke-width: 3.1;
}

.reward-claim__terms-copy {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.reward-claim__terms-link {
  color: var(--text-brand);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.reward-claim-modal__footer {
  padding: 0 var(--space-6) var(--space-6);
}

.reward-claim__terms-prompt {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(360px, calc(100% - 24px));
  max-width: 360px;
  margin-top: 0;
  border-radius: 14px;
  border: 1px solid rgba(255, 197, 93, .44);
  background: linear-gradient(180deg, rgba(28, 14, 70, .96), rgba(16, 8, 44, .96));
  box-shadow: 0 12px 24px rgba(0, 0, 0, .3);
  padding: 12px 12px 10px;
  z-index: 12;
  text-align: center;
}

.reward-claim__terms-prompt-text {
  color: rgba(245, 240, 255, .94);
  font-size: 12px;
  line-height: 1.38;
}

.reward-claim__terms-prompt-actions {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  gap: 8px;
}

.reward-claim__terms-prompt-btn {
  border: 0;
  border-radius: 999px;
  min-height: 30px;
  padding: 0 12px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
  cursor: pointer;
}

.reward-claim__terms-prompt-btn--ghost {
  background: rgba(255, 255, 255, .08);
  color: rgba(233, 226, 255, .92);
}

.reward-claim__terms-prompt-btn--primary {
  background: linear-gradient(180deg, #ffbd56, #ff8419);
  color: #fff9ef;
}

.register-burst {
  position: absolute;
  inset: -12px -10px -8px;
  pointer-events: none;
  z-index: 6;
  overflow: visible;
}

.register-burst__piece {
  position: absolute;
  left: var(--rb-start-x, 50%);
  top: var(--rb-start-y, 78%);
  width: var(--rb-size, 28px);
  height: var(--rb-size, 28px);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .22));
  transform: translate3d(-50%, 0, 0) rotate(0deg) scale(.55);
}

.register-burst__piece--coin {
  background-image: url('img/register/coin.png');
}

.register-burst__piece--cash {
  background-image: url('img/register/cash.png');
}

@media (max-width: 640px) {
  .modal--reward-claim {
    width: min(360px, 92vw);
  }

  .reward-claim__shell {
    padding: 0;
    border-radius: 0;
  }

  .reward-claim__banner {
    margin: 0 -16px 16px;
    height: 164px;
    border-radius: 26px 26px 22px 22px;
  }

  .reward-claim__banner-image {
    height: 100%;
  }

  .reward-claim__banner-ribbon {
    left: 18px;
    bottom: 18px;
  }

  .reward-claim__banner-gradient {
    height: 78px;
  }

  .reward-claim-modal__media-img {
    width: 104px;
    height: 104px;
  }

  .reward-claim__body {
    padding: 0 var(--space-4) var(--space-4);
  }

  .reward-claim__card {
    width: 100%;
    padding-inline: 0;
  }

  .reward-claim__intro {
    width: 100%;
    gap: 4px;
  }

  .reward-claim__eyebrow {
    font-size: 11px;
    letter-spacing: .1em;
  }

  .reward-claim__desc {
    max-width: 280px;
    font-size: 13px;
  }

  .reward-claim__card--voucher {
    width: 100%;
  }

  .reward-claim__items--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }

  .reward-claim__item-icon {
    width: 88px;
    height: 88px;
  }

  .reward-claim__item-value {
    font-size: clamp(18px, 5vw, 28px);
  }

  .reward-claim__item--single .reward-claim__item-value {
    font-size: clamp(28px, 9vw, 40px);
  }

  .reward-claim__item-note {
    font-size: 13px;
  }

  .reward-claim__items--2 .reward-claim__item-value {
    font-size: clamp(18px, 4vw, 24px);
  }

  .reward-claim__items--3 .reward-claim__item-value {
    font-size: clamp(13px, 3.6vw, 18px);
  }

  .reward-claim__items--2 .reward-claim__item-note,
  .reward-claim__items--3 .reward-claim__item-note {
    font-size: 10px;
  }

  .reward-claim__item-play {
    min-width: 70px;
    height: 30px;
    padding: 0 12px;
    font-size: 11px;
  }

  .reward-claim__terms {
    width: fit-content;
    max-width: 100%;
    font-size: var(--fs-body-sm);
  }

  .reward-claim-modal__footer {
    padding: 0 var(--space-4) var(--space-4);
  }

  .reward-claim__terms-prompt {
    width: min(320px, calc(100% - 24px));
    max-width: 100%;
  }
}

.fr-dialog__body {
  min-height: 0;
  overflow-y: auto;
  padding: 20px 20px 24px;
  display: grid;
  gap: 18px;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .28) transparent;
}

.fr-dialog__body::-webkit-scrollbar {
  width: 6px;
}

.fr-dialog__body::-webkit-scrollbar-track {
  background: transparent;
}

.fr-dialog__body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .24);
  border-radius: 999px;
}

.fr-dialog__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 0;
}

.fr-dialog__loading-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid rgba(255, 255, 255, .15);
  border-top-color: #f5a623;
  border-radius: 50%;
  animation: captcha-spin .8s linear infinite;
}

/* Banner title overlay */
.fr-dialog__banner-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 75%;
  background: linear-gradient(180deg, transparent 0%, rgba(6, 1, 18, .72) 45%, rgba(4, 0, 14, .97) 100%);
  pointer-events: none;
}

.fr-dialog__banner-title {
  position: absolute;
  bottom: 16px;
  left: 20px;
  right: 20px;
  text-align: left;
  font-size: clamp(16px, 4.2vw, 20px);
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: linear-gradient(180deg, #fffde8 0%, #ffe566 18%, #ffb800 44%, #e87e00 60%, #ffb800 78%, #ffe566 94%, #fffde8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 1px 0 rgba(120, 40, 0, 1)) drop-shadow(0 2px 6px rgba(80, 15, 0, .95)) drop-shadow(0 0 18px rgba(255, 140, 0, .6)) drop-shadow(0 0 40px rgba(200, 70, 0, .3));
}

.fr-dialog__rewards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.fr-dialog__bubble {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 10px 14px;
  border-radius: 16px;
  position: relative;
}

.fr-dialog__bubble--today {
  background: linear-gradient(145deg, #5b21b6, #7c3aed);
  border: 1px solid rgba(167, 139, 250, .4);
  box-shadow: 0 4px 20px rgba(124, 58, 237, .35);
}

.fr-dialog__bubble--nextday {
  background: linear-gradient(145deg, #9d174d, #db2777);
  border: 1px solid rgba(249, 168, 212, .4);
  box-shadow: 0 4px 20px rgba(219, 39, 119, .35);
}

.fr-dialog__bubble-day {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, .15);
  color: rgba(255, 255, 255, .9);
  margin-bottom: 4px;
}

.fr-dialog__bubble-amt {
  font-size: 22px;
  font-weight: 900;
  line-height: 1.1;
  background: linear-gradient(180deg, #fffde8 0%, #ffe566 25%, #ffb800 55%, #ffb800 75%, #ffe566 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 10px rgba(255, 180, 0, .55));
}

.fr-dialog__bubble-name {
  font-size: 11px;
  font-weight: 800;
  color: rgba(255, 255, 255, .9);
  letter-spacing: .04em;
  margin-top: 4px;
}

.fr-dialog__bubble-sub {
  font-size: 9px;
  font-weight: 600;
  color: rgba(255, 255, 255, .5);
  letter-spacing: .02em;
  text-align: center;
  line-height: 1.4;
  margin-top: 2px;
}

.fr-dialog__bonus {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 6px 4px;
}

.fr-dialog__bonus-rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 190, 50, .5) 80%, rgba(255, 210, 70, .7));
}

.fr-dialog__bonus-rule--r {
  background: linear-gradient(270deg, transparent, rgba(255, 190, 50, .5) 80%, rgba(255, 210, 70, .7));
}

.fr-dialog__bonus-center {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}

.fr-dialog__bonus-num {
  font-size: 40px;
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1;
  background: linear-gradient(180deg, #fffde8 0%, #ffe566 18%, #ffb800 44%, #e87e00 62%, #ffb800 80%, #ffe566 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 18px rgba(255, 160, 0, .75)) drop-shadow(0 2px 5px rgba(80, 20, 0, .95));
}

.fr-dialog__bonus-sub {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 200, 70, .65);
}

.fr-dialog__products {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.fr-dialog__prod-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 14px 8px 12px;
  border-radius: 18px;
  border: 2px solid rgba(160, 60, 255, .3);
  background: rgba(255, 255, 255, .04);
  cursor: pointer;
  transition: border-color .18s, background .18s, transform .12s;
  width: 100%;
}

.fr-dialog__prod-btn:hover {
  border-color: rgba(200, 100, 255, .55);
  background: rgba(255, 255, 255, .08);
}

.fr-dialog__prod-btn.is-active {
  border-color: #f43f5e;
  background: linear-gradient(145deg, rgba(244, 63, 94, .15), rgba(192, 38, 211, .12));
  box-shadow: 0 0 0 1px rgba(244, 63, 94, .25) inset;
}

.fr-dialog__prod-earn-lbl {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 200, 70, .6);
}

.fr-dialog__prod-earn {
  font-size: 22px;
  font-weight: 900;
  line-height: 1.1;
  background: linear-gradient(180deg, #fffde8 0%, #ffe566 25%, #ffb800 55%, #ffb800 75%, #ffe566 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 10px rgba(255, 170, 0, .5));
}

.fr-dialog__prod-sep {
  width: 65%;
  height: 1px;
  background: rgba(255, 255, 255, .1);
  margin: 2px 0;
}

.fr-dialog__prod-deposit {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, .5);
  letter-spacing: .02em;
}

.fr-dialog__take-btn {
  width: 100%;
  min-height: 52px;
  padding: 0 18px;
  border: 0;
  border-radius: 18px;
  background: linear-gradient(135deg, #ea580c, #f97316, #fbbf24);
  color: #3d1500;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: .03em;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 6px 28px rgba(234, 88, 12, .45);
  transition: transform .14s, box-shadow .14s;
}

.fr-dialog__take-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 36px rgba(234, 88, 12, .65);
}

.fr-dialog__take-btn:active {
  transform: scale(.97);
}

.fr-dialog__take-btn--loading {
  opacity: .8;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

.fr-dialog__take-dots {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 18px;
}

.fr-dialog__take-dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 217, 125, .98), rgba(255, 130, 38, .98));
  box-shadow: 0 0 12px rgba(249, 115, 22, .32);
  animation: ppClaimDotPulse .72s ease-in-out infinite;
}

.fr-dialog__take-dots span:nth-child(2) { animation-delay: .12s; }
.fr-dialog__take-dots span:nth-child(3) { animation-delay: .24s; }

.fr-dialog__status-intro {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .07);
}

.fr-dialog__status-intro--done {
  background: rgba(255, 214, 102, .08);
  border-color: rgba(255, 214, 102, .16);
}

.fr-dialog__status-title {
  font-size: 15px;
  font-weight: 800;
  color: #f8e7ff;
}

.fr-dialog__status-sub {
  font-size: 13px;
  line-height: 1.45;
  color: rgba(255, 255, 255, .62);
}

.fr-dialog__claim-box {
  padding: 16px 18px;
  border-radius: 18px;
  display: grid;
  gap: 6px;
}

.fr-dialog__claim-reward {
  display: grid;
  gap: 8px;
}

.fr-dialog__claim-reward-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.fr-dialog__claim-reward-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, #fff5bf 0%, #f8d24a 38%, #c98a08 100%);
  color: #4a2500;
  font-size: 14px;
  box-shadow: 0 4px 12px rgba(255, 193, 7, .28);
}

.fr-dialog__claim-reward-value {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: .01em;
  background: linear-gradient(180deg, #fff7cf 0%, #ffd761 42%, #ffb300 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 3px 16px rgba(255, 200, 0, .22);
}

.fr-dialog__claim-reward--muted .fr-dialog__claim-reward-icon {
  filter: saturate(.7);
  opacity: .88;
}

.fr-dialog__claim-reward--claimed .fr-dialog__claim-reward-icon {
  background: linear-gradient(135deg, #e7d6ff, #a855f7);
  color: #fff;
}

.fr-dialog__claim-box--ready {
  background: linear-gradient(145deg, rgba(20, 80, 40, .7), rgba(10, 50, 25, .7));
  border: 1px solid rgba(74, 222, 128, .25);
}

.fr-dialog__claim-box--muted {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .07);
  opacity: .6;
}

.fr-dialog__claim-box--done {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .07);
}

.fr-dialog__claim-label {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, .6);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.fr-dialog__claim-amt {
  font-size: 28px;
  font-weight: 900;
  color: #ffd94d;
  text-shadow: 0 2px 12px rgba(255, 200, 0, .3);
}

.fr-dialog__claim-sub {
  font-size: 13px;
  color: rgba(255, 255, 255, .55);
}

.fr-dialog__action-btn {
  width: 100%;
  min-height: 52px;
  border: 0;
  border-radius: 18px;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .04em;
  cursor: pointer;
  transition: transform .14s, box-shadow .14s;
}

.fr-dialog__action-btn:hover {
  transform: translateY(-2px);
}

.fr-dialog__action-btn:active {
  transform: scale(.97);
}

.fr-dialog__action-btn--claim-today {
  background: linear-gradient(135deg, #16a34a, #22c55e);
  color: #052e16;
  box-shadow: 0 6px 28px rgba(34, 197, 94, .35);
}

.fr-dialog__action-btn--claim-today:hover {
  box-shadow: 0 10px 36px rgba(34, 197, 94, .55);
}

.fr-dialog__action-btn--claim-nextday {
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  color: #f5f3ff;
  box-shadow: 0 6px 28px rgba(124, 58, 237, .4);
}

.fr-dialog__action-btn--claim-nextday:hover {
  box-shadow: 0 10px 36px rgba(124, 58, 237, .6);
}

.fr-dialog__action-btn--close {
  background: rgba(255, 255, 255, .08);
  color: var(--muted);
  border: 1px solid rgba(160, 60, 255, .25);
}

.fr-dialog__action-btn--close:hover {
  background: rgba(255, 255, 255, .13);
}

.fr-dialog__complete {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .07);
  text-align: center;
}

.fr-dialog__complete-icon {
  font-size: 40px;
  line-height: 1;
}

.fr-dialog__complete-title {
  font-size: 18px;
  font-weight: 800;
  color: #d0b8ff;
}

.fr-dialog__complete-sub {
  font-size: 13px;
  color: var(--muted);
}

/* 鈹€鈹€ Prize Pool Dialog 鈹€鈹€ */
.pp-dialog {
  position: relative;
  width: min(420px, 94vw);
  background: linear-gradient(180deg, #0e0530 0%, #080220 100%);
  border: 1px solid rgba(180, 80, 255, .3);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .04) inset;
}

.pp-dialog__close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 10;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: rgba(0, 0, 0, .35);
  backdrop-filter: blur(8px);
  color: rgba(255, 255, 255, .85);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  transition: background .18s, transform .18s;
}

.pp-dialog__close:hover {
  background: rgba(0, 0, 0, .6);
  transform: scale(1.08);
}

.pp-dialog__banner {
  position: relative;
  width: 100%;
  height: 160px;
  background: linear-gradient(135deg, rgba(80, 20, 200, .55), rgba(20, 5, 80, .75));
  overflow: hidden;
}

.pp-dialog__banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pp-dialog__banner-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 70%;
  background: linear-gradient(180deg, transparent 0%, rgba(4, 0, 16, .82) 55%, rgba(4, 0, 16, .98) 100%);
  pointer-events: none;
}

.pp-dialog__banner-title {
  position: absolute;
  bottom: 14px;
  left: 20px;
  right: 60px;
  font-size: clamp(16px, 4.2vw, 20px);
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: linear-gradient(180deg, #fffde8 0%, #ffe566 18%, #ffb800 44%, #e87e00 60%, #ffb800 78%, #ffe566 94%, #fffde8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 1px 0 rgba(120, 40, 0, 1)) drop-shadow(0 2px 6px rgba(80, 15, 0, .95)) drop-shadow(0 0 18px rgba(255, 140, 0, .6));
}

.pp-dialog__body {
  padding: 16px 16px 20px;
  display: grid;
  gap: 14px;
}

.pp-dialog__cooldown {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 12px;
  background: rgba(255, 160, 0, .07);
  border: 1px solid rgba(255, 160, 0, .2);
  font-size: 12px;
  font-weight: 700;
}

.pp-dialog__cooldown-icon {
  font-size: 14px;
}

.pp-dialog__cooldown-label {
  flex: 1;
  color: rgba(255, 200, 80, .75);
}

.pp-dialog__cooldown-time {
  font-size: 13px;
  font-weight: 900;
  color: #ffd94d;
  letter-spacing: .06em;
}

.pp-dialog__chests {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.pp-dialog__chest {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 10px 14px;
  border-radius: 18px;
  border: 1px solid;
  position: relative;
  overflow: hidden;
  transition: opacity .3s, filter .3s;
}

.pp-dialog__chest--starter {
  background: linear-gradient(180deg, rgba(26, 12, 70, .90), rgba(44, 11, 115, 0.65));
  border-color: rgba(140, 80, 255, .35);
}

.pp-dialog__chest--mega {
  background: linear-gradient(180deg, rgba(37, 7, 7, .90), rgba(87, 24, 6, 0.65));
  border-color: rgba(255, 140, 40, .35);
}

.pp-dialog__chest--starter.is-ready {
  border-color: rgba(167, 139, 250, .55);
  box-shadow: 0 0 22px rgba(124, 58, 237, .25);
}

.pp-dialog__chest--mega.is-ready {
  border-color: rgba(251, 146, 60, .55);
  box-shadow: 0 0 22px rgba(251, 146, 60, .25);
}

.pp-dialog__chest-visual {
  position: relative;
  width: 80px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pp-dialog__chest-visual img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.pp-dialog__chest-badge {
  position: absolute;
  bottom: -4px;
  right: -4px;
  font-size: 20px;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .6));
}

.pp-dialog__chest-name {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}

.pp-dialog__chest-amt {
  font-size: 20px;
  font-weight: 900;
  line-height: 1.1;
  background: linear-gradient(180deg, #fffde8 0%, #ffe566 28%, #ffb800 60%, #ffb800 82%, #ffe566 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 8px rgba(255, 180, 0, .5));
}

.pp-dialog__chest-bar-wrap {
  width: 100%;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  overflow: hidden;
  margin-top: 2px;
}

.pp-dialog__chest-bar {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #7c3aed, #c026d3);
  transition: width .4s;
}

.pp-dialog__chest--mega .pp-dialog__chest-bar {
  background: linear-gradient(90deg, #ea580c, #fbbf24);
}

.pp-dialog__chest-cap {
  font-size: 10px;
  color: rgba(255, 255, 255, .32);
  font-weight: 600;
}

.pp-dialog__chest-btn {
  width: 100%;
  min-height: 38px;
  border: 0;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .14s, box-shadow .14s;
  margin-top: 4px;
}

.pp-dialog__chest-btn:hover {
  transform: translateY(-1px);
}

.pp-dialog__chest-btn:active {
  transform: scale(.97);
}

.pp-dialog__chest-btn--unlock {
  background: linear-gradient(135deg, #78350f, #b45309, #f59e0b);
  color: #1c0900;
  box-shadow: 0 4px 14px rgba(180, 83, 9, .4);
}

.pp-dialog__chest-btn--unlock:hover {
  box-shadow: 0 6px 20px rgba(180, 83, 9, .6);
}

.pp-dialog__chest-btn--open {
  background: linear-gradient(135deg, #166534, #16a34a, #4ade80);
  color: #052e16;
  box-shadow: 0 4px 14px rgba(22, 163, 74, .4);
  animation: ppBtnPulse 1.6s ease-in-out infinite;
}

.pp-dialog__chest-btn--open:hover {
  box-shadow: 0 6px 20px rgba(22, 163, 74, .6);
}

.pp-dialog__chest-btn--disabled {
  background: linear-gradient(135deg, rgba(90, 72, 126, .9), rgba(58, 43, 91, .96));
  color: rgba(239, 230, 255, .58);
  box-shadow: none;
  cursor: not-allowed;
  filter: grayscale(.15) saturate(.7);
}

.pp-dialog__chest-btn--disabled:hover,
.pp-dialog__chest-btn--disabled:active {
  transform: none;
  box-shadow: none;
}

@keyframes ppBtnPulse {

  0%,
  100% {
    box-shadow: 0 4px 14px rgba(22, 163, 74, .35);
  }

  50% {
    box-shadow: 0 4px 22px rgba(22, 163, 74, .65), 0 0 28px rgba(22, 163, 74, .28);
  }
}

.pp-dialog__urgency {
  display: flex;
  align-items: center;
  gap: 7px;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(255, 60, 0, .05);
  border: 1px solid rgba(255, 80, 0, .14);
  font-size: 12px;
}

.pp-dialog__urgency-label {
  color: rgba(255, 200, 100, .6);
  font-weight: 700;
}

.pp-dialog__urgency-time {
  font-size: 13px;
  font-weight: 900;
  color: #ffd94d;
  letter-spacing: .08em;
}

/* 鈹€鈹€ Prize Pool Key Panel 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ */
.pp-dialog__key-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 12px 10px 10px;
  border-radius: 18px;
  border: 2px solid rgba(255, 180, 40, .5);
  background: linear-gradient(180deg, #0a0430 0%, #160855 60%, #0d0540 100%);
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  min-width: 0;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .04) inset, 0 8px 32px rgba(0, 0, 0, .6);
}

.pp-dialog__key-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(140, 60, 255, .18) 0%, transparent 70%),
    radial-gradient(ellipse 40% 30% at 80% 80%, rgba(255, 160, 0, .08) 0%, transparent 60%);
  pointer-events: none;
}

.pp-dialog__key-panel--first {
  border-color: rgba(180, 100, 255, .55);
  background: linear-gradient(180deg, #080228 0%, #140650 55%, #0c0340 100%);
}

.pp-dialog__key-panel--big {
  border-color: rgba(255, 160, 40, .55);
  background: linear-gradient(180deg, #0e0410 0%, #240a50 55%, #100538 100%);
}

/* 鈹€鈹€ Title & sub-tag 鈹€鈹€ */
.pp-dialog__key-title {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #fffde8 0%, #ffe566 30%, #ffb800 60%, #e87e00 80%, #ffb800 92%, #ffe566 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 1px 0 rgba(120, 40, 0, .9)) drop-shadow(0 0 10px rgba(255, 140, 0, .5));
  line-height: 1.2;
  text-align: center;
  position: relative;
}

.pp-dialog__key-subtag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 12px;
  border-radius: 20px;
  background: linear-gradient(90deg, #b91c1c, #dc2626, #ef4444);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
  box-shadow: 0 2px 8px rgba(220, 38, 38, .55), 0 0 0 1px rgba(255, 150, 150, .2) inset;
  position: relative;
  white-space: nowrap;
}

.pp-dialog__key-subtag--orange {
  background: linear-gradient(90deg, #92400e, #b45309, #d97706);
  box-shadow: 0 2px 8px rgba(180, 83, 9, .55), 0 0 0 1px rgba(255, 200, 100, .2) inset;
}

/* 鈹€鈹€ Key image 鈹€鈹€ */
.pp-dialog__key-img {
  width: 90px;
  height: 68px;
  object-fit: contain;
  transform: rotate(-25deg) translateX(6px);
  filter: drop-shadow(0 0 14px rgba(255, 200, 0, .55)) drop-shadow(0 4px 8px rgba(0, 0, 0, .6));
  flex-shrink: 0;
  position: relative;
}

/* 鈹€鈹€ Countdown strip (standalone, above button) 鈹€鈹€ */
.pp-dialog__key-timer {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px 6px;
  border-radius: 8px;
  background: rgba(0, 0, 0, .35);
  border: 1px solid rgba(255, 200, 0, .2);
  font-size: 11px;
  font-weight: 900;
  color: #ffd94d;
  letter-spacing: .05em;
  text-shadow: 0 0 8px rgba(255, 200, 0, .5);
  overflow: hidden;
}

/* 鈹€鈹€ Red action button 鈹€鈹€ */
.pp-dialog__key-btn {
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
  border: 2px solid rgba(255, 200, 80, .45);
  border-radius: 14px;
  background: linear-gradient(180deg, #c41c1c 0%, #991414 100%);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 6px;
  gap: 2px;
  box-shadow: 0 4px 18px rgba(220, 38, 38, .55), 0 0 28px rgba(220, 38, 38, .2);
  transition: transform .14s, box-shadow .14s;
  position: relative;
  animation: ppRedBtnGlow 2s ease-in-out infinite;
}

@keyframes ppRedBtnGlow {
  0%, 100% { box-shadow: 0 4px 18px rgba(220, 38, 38, .5), 0 0 20px rgba(220, 38, 38, .18); }
  50%       { box-shadow: 0 6px 26px rgba(220, 38, 38, .75), 0 0 36px rgba(220, 38, 38, .32); }
}

.pp-dialog__key-btn:hover { transform: translateY(-2px) scale(1.01); }
.pp-dialog__key-btn:active { transform: scale(.97); animation: none; }

.pp-dialog__key-btn--disabled {
  cursor: not-allowed;
  opacity: .72;
  filter: grayscale(.35) saturate(.7);
  animation: none;
}

.pp-dialog__key-btn--disabled:hover,
.pp-dialog__key-btn--disabled:active {
  transform: none;
}

.pp-dialog__key-btn-main {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.3;
  text-align: center;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .5);
  word-break: break-word;
  overflow-wrap: break-word;
}

.pp-dialog__key-btn-price {
  font-size: 9px;
  font-weight: 700;
  color: #ffd94d;
  letter-spacing: .02em;
  text-align: center;
  word-break: break-word;
  overflow-wrap: break-word;
  text-shadow: 0 0 6px rgba(255, 200, 0, .5);
}

/* 鈹€鈹€ Remain label 鈹€鈹€ */
.pp-dialog__key-remain {
  font-size: 10px;
  font-weight: 700;
  color: rgba(255, 240, 160, .9);
  text-align: center;
  letter-spacing: .02em;
  text-shadow: 0 0 8px rgba(255, 200, 0, .4);
  margin-top: 1px;
  position: relative;
}

/* 鈹€鈹€ Chest locked-by-key state 鈹€鈹€ */
.pp-dialog__chest.is-key-locked {
  opacity: 0.52;
  filter: saturate(0.45) brightness(0.75);
  pointer-events: none;
  position: relative;
}

.pp-dialog__chest.is-cooldown-locked {
  opacity: 0.44;
  filter: grayscale(.55) saturate(.55) brightness(.7);
  pointer-events: none;
}

.pp-dialog__chest-lock-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  border-radius: inherit;
  background: rgba(0, 0, 0, .18);
}

.pp-dialog__chest-lock-icon {
  font-size: 28px;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .7));
  opacity: 0.85;
}

/* 鈹€鈹€ Chest collect hint 鈹€鈹€ */
.pp-dialog__chest-collect {
  font-size: 9px;
  font-weight: 700;
  color: rgba(255, 220, 100, .7);
  letter-spacing: .03em;
  text-align: center;
  margin-top: -4px;
  margin-bottom: 2px;
}

/* 鈹€鈹€ Dialog footer 鈹€鈹€ */
.pp-dialog__footer {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, .55);
  line-height: 1.6;
  padding: 4px 8px 0;
  letter-spacing: .01em;
}

.pp-dialog__body {
  position: relative;
}

.pp-dialog__chests--cooldown {
  filter: grayscale(.45) saturate(.6) brightness(.72);
}

.pp-dialog__cooldown-lock {
  position: absolute;
  inset: 68px 12px 58px;
  z-index: 6;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.pp-dialog__cooldown-lock::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background: rgba(8, 4, 20, .48);
  backdrop-filter: blur(2px);
}

.pp-dialog__cooldown-lock-badge {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 180px;
  justify-content: center;
  padding: 14px 24px;
  border-radius: 18px;
  background:
    radial-gradient(circle at top, rgba(255, 199, 84, .14), transparent 42%),
    linear-gradient(180deg, rgba(118, 38, 184, .96), rgba(63, 18, 120, .98));
  border: 2px solid rgba(183, 110, 255, .88);
  box-shadow:
    inset 0 1px 0 rgba(255, 224, 150, .22),
    0 0 0 3px rgba(255, 176, 64, .14),
    0 16px 32px rgba(22, 6, 48, .48);
}

.pp-dialog__cooldown-lock-icon {
  font-size: 26px;
  line-height: 1;
  filter: drop-shadow(0 2px 6px rgba(41, 10, 70, .38));
}

.pp-dialog__cooldown-lock-time {
  font-size: 32px;
  font-weight: 900;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  color: #fff8dc;
  text-shadow: 0 2px 8px rgba(54, 12, 90, .34);
}

/* 鈹€鈹€ Prize Pool Tier Dialog 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ */
.pp-tier-dialog-wrap {
  position: relative;
  display: inline-flex;
  z-index: 1;
}

.pp-tier-dialog-backdrop {
  position: fixed;
  inset: 0;
}

.pp-tier-dialog-backdrop__dismiss {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  cursor: default;
}

.pp-tier-dialog {
  display: flex;
  flex-direction: row;
  width: min(480px, 94vw);
  border-radius: 20px;
  overflow: visible;
  background: linear-gradient(160deg, #1e0a4a, #0d0428);
  border: 1px solid rgba(160, 80, 255, .28);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .7);
  position: relative;
}

.pp-tier-dialog__art {
  width: 42%;
  flex: 0 0 42%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px 16px;
  background: linear-gradient(180deg, #1a083a 0%, #090220 100%);
  border-right: 1px solid rgba(120, 50, 200, .2);
  overflow: hidden;
}

.pp-tier-dialog__art-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 60%, rgba(180, 80, 255, .18), transparent 70%);
  pointer-events: none;
}

.pp-tier-dialog__art-img {
  width: 120px;
  height: 120px;
  object-fit: contain;
  position: relative;
  z-index: 1;
}

.pp-tier-dialog__art-img--ready {
  animation: pp-chest-glow 2s ease-in-out infinite;
}

@keyframes pp-chest-glow {

  0%,
  100% {
    filter: drop-shadow(0 0 6px rgba(255, 200, 60, .7)) drop-shadow(0 0 14px rgba(255, 140, 0, .35));
  }

  50% {
    filter: drop-shadow(0 0 14px rgba(255, 220, 80, 1)) drop-shadow(0 0 28px rgba(255, 160, 0, .6));
  }
}

.pp-tier-dialog__badge {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.pp-tier-dialog__badge--starter {
  background: rgba(124, 58, 237, .4);
  border: 1px solid rgba(168, 85, 247, .4);
  color: #c084fc;
}

.pp-tier-dialog__badge--mega {
  background: rgba(234, 88, 12, .4);
  border: 1px solid rgba(249, 115, 22, .4);
  color: #fb923c;
}

.pp-tier-dialog__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 20px 16px;
  gap: 10px;
  position: relative;
}

.pp-tier-dialog__title {
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: linear-gradient(90deg, #e879f9, #a855f7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.pp-tier-dialog__pool-card {
  background: rgba(0, 0, 0, .35);
  border: 1px solid rgba(120, 60, 200, .2);
  border-radius: 12px;
  padding: 12px 14px;
}

.pp-tier-dialog__pool-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #9580c8;
  font-size: 11px;
  margin-bottom: 6px;
}

.pp-tier-dialog__info-btn {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex: 0 0 18px;
  background: rgba(200, 100, 255, .18);
  border: 1px solid rgba(200, 100, 255, .3);
  color: #d946ef;
  font-size: 10px;
  font-weight: 800;
  cursor: default;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pp-tier-dialog__pool-amt {
  font-size: 22px;
  font-weight: 800;
  color: #ffd95a;
  letter-spacing: -.02em;
}

.pp-tier-dialog__pool-sub {
  margin-top: 3px;
  font-size: 11px;
  color: #7c6aaa;
}

.pp-tier-dialog__pickup-card {
  background: linear-gradient(135deg, rgba(10, 4, 30, .7), rgba(20, 8, 50, .7));
  border: 1px solid rgba(120, 60, 200, .18);
  border-radius: 12px;
  padding: 12px 14px;
}

.pp-tier-dialog__pickup-label {
  color: #9580c8;
  font-size: 11px;
  letter-spacing: .04em;
  margin-bottom: 8px;
}

.pp-tier-dialog__pickup-timer {
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}

.pp-tier-dialog__pickup-ready {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #4ade80;
}

.pp-tier-dialog__pickup-ready--plain {
  color: #fef3c7;
}

.pp-tier-dialog__ready-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 8px;
  background: #4ade80;
  box-shadow: 0 0 6px #4ade80;
  animation: pp-ready-pulse 1.5s infinite;
}

@keyframes pp-ready-pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.35;
  }
}

.pp-tier-dialog__claim-btn {
  width: 100%;
  padding: 13px 0;
  border: 0;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-top: auto;
  position: relative;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease, opacity .16s ease;
}

.pp-tier-dialog__claim-btn--active {
  background: linear-gradient(135deg, #f97316, #ea580c);
  color: #fff;
  box-shadow: 0 8px 24px rgba(234, 88, 12, .4);
  cursor: pointer;
}

.pp-tier-dialog__claim-btn--active:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(234, 88, 12, .48);
  filter: saturate(1.08) brightness(1.03);
}

.pp-tier-dialog__claim-btn--active:active {
  transform: translateY(1px) scale(.985);
  box-shadow: 0 5px 16px rgba(234, 88, 12, .32);
}

.pp-tier-dialog__claim-btn--disabled {
  background: rgba(60, 30, 100, .6);
  color: #6b5a90;
  cursor: not-allowed;
  opacity: .72;
}

.pp-tier-dialog__claim-btn--loading {
  background: rgba(60, 30, 100, .6);
  cursor: not-allowed;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
}

.pp-tier-dialog__loading-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, .25);
  border-top-color: #a78bfa;
  border-radius: 50%;
  animation: ppSpinnerRotate .75s linear infinite;
}

.pp-tier-dialog__claim-dots {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 18px;
}

.pp-tier-dialog__claim-dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 217, 125, .98), rgba(255, 130, 38, .98));
  box-shadow: 0 0 12px rgba(249, 115, 22, .32);
  animation: ppClaimDotPulse .72s ease-in-out infinite;
}

.pp-tier-dialog__claim-dots span:nth-child(2) {
  animation-delay: .12s;
}

.pp-tier-dialog__claim-dots span:nth-child(3) {
  animation-delay: .24s;
}

@keyframes ppClaimDotPulse {
  0%, 80%, 100% {
    transform: translateY(0) scale(.82);
    opacity: .38;
  }

  40% {
    transform: translateY(-2px) scale(1);
    opacity: 1;
  }
}

@keyframes ppSpinnerRotate {
  to { transform: rotate(360deg); }
}

@media (max-width: 400px) {
  .pp-tier-dialog {
    flex-direction: column;
  }

  .pp-tier-dialog__art {
    width: 100%;
    flex: none;
    border-right: none;
    border-bottom: 1px solid rgba(120, 50, 200, .2);
    padding: 20px;
  }
}

/* ===================================================
   SHARE DIALOG STYLES (.share-dialog__*)
   =================================================== */

/* Shell override for Share modal */
.modal--share {
  max-width: 640px;
  max-height: 96vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0;
}

/* ---- Banner / Header ---- */
.share-dialog__banner {
  position: relative;
  flex-shrink: 0;
  background: linear-gradient(135deg, #3b0764, #6d28d9, #7c3aed);
  padding: 22px 20px 18px;
  text-align: center;
  overflow: hidden;
}

.share-dialog__banner-glow {
  position: absolute;
  inset: -40%;
  background: radial-gradient(ellipse at 50% 120%, rgba(196, 100, 255, .45) 0%, transparent 65%);
  pointer-events: none;
}

.share-dialog__banner-title {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: .1em;
  color: #f5d0fe;
  text-shadow: 0 0 20px rgba(200, 80, 255, .7), 0 2px 4px rgba(0, 0, 0, .5);
  position: relative;
}

.share-dialog__banner-title span {
  font-size: 18px;
}

.share-dialog__banner-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}

.share-dialog__banner-icon--spin {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: #ffe083;
  background: radial-gradient(circle at 32% 28%, rgba(255, 245, 186, .35), rgba(255, 194, 74, .14) 45%, rgba(255, 194, 74, .04) 100%);
  box-shadow: 0 0 8px rgba(255, 194, 74, .45);
}

/* ---- Invite Link Section ---- */
.share-dialog__link-section {
  flex-shrink: 0;
  background: rgba(20, 8, 50, .95);
  border-bottom: 1px solid rgba(120, 50, 220, .2);
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.share-dialog__link-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(150, 60, 255, .25);
  border-radius: 12px;
  padding: 10px 12px;
}

.share-dialog__link-url {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  color: #a78bfa;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.share-dialog__copy-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  background: linear-gradient(135deg, #7c3aed, #c026d3);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 7px 13px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  cursor: pointer;
  transition: opacity .18s;
}

.share-dialog__copy-btn:hover {
  opacity: .85;
}

.share-dialog__social-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.share-dialog__social-label {
  font-size: 11px;
  color: #7c6aaa;
  flex-shrink: 0;
}

.share-dialog__social-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  padding: 0;
  line-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .15s, opacity .15s;
  flex-shrink: 0;
}

.share-dialog__social-btn svg {
  width: 14px;
  height: 14px;
  display: block;
  flex-shrink: 0;
  pointer-events: none;
}

.share-dialog__social-btn:hover {
  transform: scale(1.1);
  opacity: .9;
}

.share-dialog__social-btn--fb {
  background: #1877f2;
  color: #fff;
}

.share-dialog__social-btn--x {
  background: #000;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .15);
}

.share-dialog__social-btn--wa {
  background: #25d366;
  color: #fff;
}

.share-dialog__social-btn--tg {
  background: #229ed9;
  color: #fff;
}

.share-dialog__social-btn--ig {
  background: linear-gradient(135deg, #f58529, #dd2a7b 52%, #8134af);
  color: #fff;
}

.share-dialog__social-btn--dc {
  background: #5865f2;
  color: #fff;
}

.share-dialog__social-btn--yt {
  background: #ff0000;
  color: #fff;
}

.share-dialog__social-btn--tk {
  background: #111111;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .15);
}

.share-dialog__social-btn--kw {
  background: #ff7a00;
  color: #fff;
}

.share-spin-entry__link-section {
  border-bottom: none;
  border-top: none;
  border-radius: 16px;
  margin-top: 0;
  margin-bottom: 4px;
}

/* ---- Tabs ---- */
.share-dialog__tabs {
  flex-shrink: 0;
  display: flex;
  background: rgba(15, 5, 40, .98);
  border-bottom: 1px solid rgba(120, 50, 220, .2);
}

.share-dialog__tab {
  flex: 1;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: #7c6aaa;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  padding: 11px 8px;
  cursor: pointer;
  transition: color .2s, border-color .2s;
}

.share-dialog__tab.is-active {
  color: #d8b4fe;
  border-bottom-color: #a855f7;
}

.share-dialog__tab:hover:not(.is-active) {
  color: #c084fc;
}

/* ---- Scrollable body ---- */
.share-dialog__body {
  flex: 1;
  overflow-y: auto;
  background: rgba(18, 7, 46, .98);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.4) transparent;
  scrollbar-gutter: stable;
}

.share-dialog__body::-webkit-scrollbar {
  width: 6px;
  display: block !important;
}

.share-dialog__body::-webkit-scrollbar-track {
  background: transparent;
}

.share-dialog__body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.4);
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  background-clip: padding-box;
}

.share-dialog__body::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.6);
}

.share-dialog__loading {
  min-height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- Main Panel ---- */
.share-dialog__main-panel {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.share-dialog__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.share-dialog__stat-card {
  background: rgba(50, 20, 100, .55);
  border: 1px solid rgba(140, 60, 230, .25);
  border-radius: 14px;
  padding: 14px 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.share-dialog__stat-icon {
  font-size: 36px;
  line-height: 1;
}

.share-dialog__stat-icon--svg {
  display: flex;
  align-items: center;
  justify-content: center;
}

@keyframes stat-float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-4px);
  }
}

.share-dialog__stat-value {
  font-size: 26px;
  font-weight: 900;
  color: #e9d5ff;
  line-height: 1;
}

.share-dialog__stat-label {
  font-size: 11px;
  color: #7c6aaa;
  margin-top: 4px;
}

/* Progress bar */
.share-dialog__progress-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.share-dialog__progress-label {
  font-size: 11px;
  font-weight: 700;
  color: #9d6ed4;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.share-dialog__progress-wrap {
  position: relative;
  padding-top: 14px;
  padding-bottom: 80px;
  overflow: hidden;
}

.share-dialog__progress-track {
  height: 10px;
  background: rgba(60, 20, 120, .6);
  border-radius: 5px;
  position: relative;
}

.share-dialog__progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #7c3aed, #c026d3, #ec4899);
  border-radius: 5px;
  transition: width .5s ease;
  position: relative;
}

.share-dialog__progress-fill::after {
  content: '';
  position: absolute;
  right: -5px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  background: #fff;
  border: 3px solid #c026d3;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(192, 38, 211, .8);
}

.share-dialog__progress-fill--start::after {
  left: 0;
  right: auto;
}

.share-dialog__progress-fill--end::after {
  right: 0;
}

.share-dialog__markers {
  position: absolute;
  left: 0;
  right: 0;
  top: 18px;
  overflow: visible;
}

/* Prevent last marker from overflowing the right edge */
.share-dialog__marker:last-child {
  transform: translateX(-85%);
}

.share-dialog__marker {
  position: absolute;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  cursor: pointer;
  min-width: 56px;
}

.share-dialog__marker-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  border: 2px solid transparent;
  transition: transform .2s;
}

.share-dialog__marker:hover .share-dialog__marker-icon {
  transform: scale(1.15);
}

.share-dialog__marker--claimed .share-dialog__marker-icon {
  background: linear-gradient(135deg, #16a34a, #4ade80);
  border-color: #86efac;
  color: #fff;
}

.share-dialog__marker--ready .share-dialog__marker-icon {
  background: linear-gradient(135deg, #7c3aed, #ec4899);
  border-color: #f0abfc;
  color: #fff;
  animation: share-pulse 1.4s ease-in-out infinite;
}

.share-dialog__marker--locked .share-dialog__marker-icon {
  background: rgba(50, 20, 100, .5);
  border-color: rgba(120, 60, 220, .3);
  color: #7c6aaa;
}

@keyframes share-pulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(192, 38, 211, .7);
  }

  50% {
    box-shadow: 0 0 0 7px rgba(192, 38, 211, 0);
  }
}

.share-dialog__marker-badge {
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .05em;
  color: #fde68a;
  background: rgba(124, 58, 237, .8);
  border-radius: 4px;
  padding: 1px 4px;
}

.share-dialog__marker-label {
  font-size: 9px;
  color: #9d6ed4;
  text-align: center;
  white-space: nowrap;
}

.share-dialog__marker-reward {
  font-size: 9px;
  color: #f5d0fe;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}

/* Tier list */
.share-dialog__tier-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.share-dialog__tier-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(40, 15, 85, .55);
  border: 1px solid rgba(120, 50, 200, .2);
  border-radius: 14px;
  padding: 12px 14px;
  flex-wrap: wrap;
  transition: border-color .2s;
}

.share-dialog__tier-row--ready {
  border-color: rgba(160, 80, 255, .5);
  background: rgba(60, 20, 110, .65);
  box-shadow: 0 0 12px rgba(140, 50, 240, .15);
}

.share-dialog__tier-num {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  background: linear-gradient(135deg, #6d28d9, #9333ea);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 900;
  color: #fff;
  line-height: 1;
}

.share-dialog__tier-num span {
  font-size: 8px;
  font-weight: 600;
  color: rgba(255, 255, 255, .7);
}

.share-dialog__tier-rewards {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.share-dialog__tier-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  background: rgba(255, 255, 255, .05);
  border: 1px solid currentColor;
  border-radius: 20px;
  padding: 3px 8px;
  opacity: .9;
}

/* Small inline icon inside pill */
.share-dialog__tier-pill-img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, .2));
}

/* Larger featured icon at left of the tier row */
.share-dialog__tier-main-icon {
  width: 48px;
  height: 48px;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 12px;
  filter: drop-shadow(0 2px 8px rgba(140, 60, 255, .35));
  transition: transform .2s;
}

.share-dialog__tier-row:hover .share-dialog__tier-main-icon {
  transform: scale(1.08) rotate(-4deg);
}

.share-dialog__tier-status {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  border-radius: 8px;
  padding: 3px 8px;
}

.share-dialog__tier-status--claimed {
  color: #4ade80;
  background: rgba(22, 163, 74, .15);
}

.share-dialog__tier-status--ready {
  color: #fde68a;
  background: rgba(202, 138, 4, .15);
}

.share-dialog__tier-status--locked {
  color: #9d6ed4;
  background: rgba(100, 40, 180, .15);
}

.share-dialog__claim-btn {
  flex-shrink: 0;
  background: linear-gradient(135deg, #7c3aed, #c026d3);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 7px 14px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .06em;
  cursor: pointer;
  transition: opacity .18s, transform .15s;
}

.share-dialog__claim-btn:hover {
  opacity: .85;
  transform: scale(1.04);
}

.share-dialog__claim-btn--loading {
  opacity: .7;
  cursor: not-allowed;
  pointer-events: none;
}

.share-dialog__claim-dots {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 16px;
}

.share-dialog__claim-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  animation: ppClaimDotPulse .72s ease-in-out infinite;
}

.share-dialog__claim-dots span:nth-child(2) { animation-delay: .12s; }
.share-dialog__claim-dots span:nth-child(3) { animation-delay: .24s; }

/* ---- Records Panel ---- */
.share-dialog__records-panel {
  padding: 18px;
}

.share-dialog__records-title {
  font-size: 13px;
  font-weight: 700;
  color: #d8b4fe;
  margin-bottom: 14px;
}

.share-dialog__records-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.share-dialog__records-table th {
  text-align: left;
  color: #7c6aaa;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 0 0 8px;
  border-bottom: 1px solid rgba(120, 50, 200, .25);
}

.share-dialog__records-table td {
  padding: 10px 0;
  border-bottom: 1px solid rgba(80, 30, 150, .15);
  color: #c4b5fd;
}

.share-dialog__valid-badge {
  font-size: 10px;
  font-weight: 700;
  border-radius: 6px;
  padding: 2px 8px;
}

.share-dialog__valid-badge--yes {
  color: #4ade80;
  background: rgba(22, 163, 74, .15);
}

.share-dialog__valid-badge--no {
  color: #fb923c;
  background: rgba(234, 88, 12, .15);
}

/* ---- Rules Panel ---- */
.share-dialog__rules-panel {
  padding: 18px;
}

.share-dialog__rules-title {
  font-size: 13px;
  font-weight: 700;
  color: #d8b4fe;
  margin-bottom: 14px;
}

.share-dialog__rules-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  counter-reset: rule-counter;
}

.share-dialog__rules-list li {
  counter-increment: rule-counter;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 13px;
  color: #c4b5fd;
  line-height: 1.5;
}

.share-dialog__rules-list li::before {
  content: counter(rule-counter);
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  background: linear-gradient(135deg, #6d28d9, #9333ea);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  margin-top: 1px;
}

.share-dialog__rules-list li strong {
  color: #f5d0fe;
}

/* ---- Spin Entry + Popup ---- */
.modal--share.modal--share-spin-entry {
  max-width: 790px;
}

.share-dialog__body--spin-entry {
  display: grid;
  justify-items: stretch;
  align-items: start;
  padding: 16px 14px 18px;
}

.share-spin-entry {
  width: 100%;
  max-width: 730px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 12% 8%, rgba(228, 130, 255, .18), transparent 38%),
    radial-gradient(circle at 88% 12%, rgba(129, 74, 255, .2), transparent 42%),
    linear-gradient(165deg, rgba(42, 18, 88, .92), rgba(18, 7, 46, .9));
  box-shadow: 0 20px 48px rgba(5, 0, 20, .48);
  padding: 12px;
  display: grid;
  gap: 10px;
}

.share-spin-entry__mission {
  display: grid;
  grid-template-columns: 1fr 130px;
  gap: 10px;
  align-items: stretch;
}

.share-spin-entry__mission-copy {
  border-radius: 14px;
  padding: 12px;
  background: rgba(18, 5, 46, .42);
}

.share-spin-entry__mission-title {
  font-size: 13px;
  font-weight: 900;
  color: #fde68a;
  letter-spacing: .02em;
}

.share-spin-entry__mission-sub {
  margin-top: 6px;
  color: #d8c4ff;
  font-size: 11px;
  line-height: 1.45;
}

.share-spin-entry__mission-art {
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(250, 194, 82, .18), rgba(183, 84, 255, .16));
  display: grid;
  place-content: center;
  gap: 2px;
  text-align: center;
  overflow: hidden;
}

.share-spin-entry__mission-art-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.share-spin-entry__mission-art-ph {
  font-size: 22px;
}

.share-spin-entry__mission-art-text {
  font-size: 10px;
  font-weight: 800;
  color: #fde68a;
  letter-spacing: .05em;
}

.share-spin-entry__mission-art-size {
  font-size: 10px;
  color: #e9d5ff;
}

.share-spin-entry__action-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: stretch;
}

.share-spin-entry__badge {
  min-height: 50px;
  min-width: 150px;
  padding: 6px 14px 7px;
  border-radius: 14px;
  background: rgba(248, 198, 255, .14);
  border: 1px solid rgba(241, 190, 255, .34);
  color: #f5d0fe;
  display: grid;
  align-content: center;
  justify-items: center;
  line-height: 1;
}

.share-spin-entry__badge-num {
  font-size: 28px;
  font-weight: 900;
  color: #fff2cf;
  text-shadow: 0 4px 12px rgba(251, 191, 36, .32);
}

.share-spin-entry__badge-label {
  margin-top: 2px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .03em;
  color: #edd8ff;
}

.share-spin-entry__btn {
  min-height: 50px;
  border-radius: 14px;
  border: 1px solid rgba(255, 211, 147, .58);
  background: linear-gradient(135deg, #ffcc4d, #f97316 58%, #ef4444);
  color: #fff9ef;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .05em;
  box-shadow: 0 12px 26px rgba(249, 115, 22, .36), inset 0 1px 0 rgba(255, 255, 255, .34);
  transition: transform .16s ease, filter .16s ease;
  position: relative;
  overflow: hidden;
}

.share-spin-entry__btn.is-alt {
  border-color: rgba(255, 196, 136, .65);
  background: linear-gradient(135deg, #8b5cf6 0%, #c026d3 48%, #f97316 100%);
  box-shadow: 0 14px 28px rgba(168, 85, 247, .34), inset 0 1px 0 rgba(255, 255, 255, .26);
}

.share-spin-entry__btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.03);
}

.share-spin-entry__btn:active {
  transform: scale(.98);
}

.share-spin-entry__btn-main {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.share-spin-entry__btn-icon {
  font-size: 20px;
  line-height: 1;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .28));
}

.share-spin-entry__btn-icon--end {
  font-size: 18px;
}

.share-spin-entry__hint {
  text-align: center;
  font-size: 11px;
  color: #c4b5fd;
}

.share-spin-entry__overview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.share-spin-entry__overview-card {
  border-radius: 12px;
  padding: 8px 6px;
  text-align: center;
  background: linear-gradient(180deg, rgba(37, 13, 81, .72), rgba(26, 10, 58, .48));
  position: relative;
}

.share-spin-entry__overview-card--valid_invites {
  background:
    radial-gradient(circle at 12% 18%, rgba(45, 212, 191, .16), transparent 40%),
    linear-gradient(180deg, rgba(17, 94, 89, .28), rgba(15, 50, 75, .26));
  border: 1px solid rgba(94, 234, 212, .22);
}

.share-spin-entry__overview-card--pending_invites {
  background:
    radial-gradient(circle at 12% 18%, rgba(251, 191, 36, .16), transparent 40%),
    linear-gradient(180deg, rgba(120, 53, 15, .26), rgba(56, 28, 14, .26));
  border: 1px solid rgba(252, 211, 77, .24);
}

.share-spin-entry__overview-card--unlocked_tiers {
  background:
    radial-gradient(circle at 12% 18%, rgba(147, 197, 253, .16), transparent 40%),
    linear-gradient(180deg, rgba(37, 99, 235, .2), rgba(49, 46, 129, .28));
  border: 1px solid rgba(147, 197, 253, .24);
}

.share-spin-entry__overview-card--claim_slots {
  background:
    radial-gradient(circle at 12% 18%, rgba(251, 146, 60, .16), transparent 40%),
    linear-gradient(180deg, rgba(154, 52, 18, .26), rgba(67, 20, 7, .26));
  border: 1px solid rgba(253, 186, 116, .25);
}

.share-spin-entry__overview-value {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.share-spin-entry__overview-value i {
  display: inline-flex;
  color: #f7d278;
}

.share-spin-entry__overview-card strong {
  display: block;
  color: #f5d0fe;
  font-size: 16px;
  line-height: 1;
  font-weight: 900;
}

.share-spin-entry__overview-label {
  display: block;
  color: #bba7ea;
  font-size: 10px;
}

.share-spin-entry__overview-label-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: 4px;
}

.share-spin-entry__overview-help-btn {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(247, 210, 120, .72);
  background: rgba(247, 210, 120, .14);
  color: #f7d278;
  font-size: 10px;
  font-weight: 900;
  line-height: 12px;
  text-align: center;
  padding: 0;
}

.share-spin-entry__overview-help-pop {
  position: absolute;
  left: 50%;
  top: calc(100% + 6px);
  transform: translateX(-50%);
  width: min(220px, calc(100vw - 36px));
  padding: 8px 9px;
  border-radius: 10px;
  border: 1px solid rgba(191, 148, 255, .46);
  background: linear-gradient(180deg, rgba(33, 15, 74, .96), rgba(20, 8, 52, .94));
  color: #e6d8ff;
  font-size: 10px;
  line-height: 1.45;
  text-align: left;
  box-shadow: 0 10px 22px rgba(0, 0, 0, .35);
  z-index: 8;
}

.share-spin-entry__tiers-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  color: #dbc6ff;
  font-size: 11px;
  letter-spacing: .03em;
  font-weight: 700;
}

.share-spin-entry__goal-head {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.share-spin-entry__goal-head--ready {
  color: #86efac;
}

.share-spin-entry__goal-head--ready .share-spin-entry__goal-dot {
  background: #22c55e;
  animation-name: shareSpinGoalDotBlinkReady;
}

.share-spin-entry__goal-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fbbf24;
  box-shadow: 0 0 0 rgba(251, 191, 36, 0.8);
  animation: shareSpinGoalDotBlink 1.2s ease-in-out infinite;
}

.share-spin-entry__next-goal {
  border-radius: 12px;
  border: 1px solid rgba(252, 211, 77, .38);
  background:
    radial-gradient(circle at 12% 18%, rgba(252, 211, 77, .16), transparent 42%),
    linear-gradient(140deg, rgba(63, 26, 8, .68), rgba(49, 19, 90, .72));
  padding: 9px 10px;
  display: grid;
  gap: 8px;
}

.share-spin-entry__next-goal--done {
  border-color: rgba(96, 220, 164, .36);
  background:
    radial-gradient(circle at 12% 18%, rgba(96, 220, 164, .16), transparent 42%),
    linear-gradient(140deg, rgba(16, 62, 52, .56), rgba(33, 13, 74, .72));
}

.share-spin-entry__next-goal--ready-claim {
  border-color: rgba(74, 222, 128, .45);
  background:
    radial-gradient(circle at 12% 18%, rgba(74, 222, 128, .18), transparent 44%),
    linear-gradient(140deg, rgba(18, 84, 54, .62), rgba(40, 14, 84, .76));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .12),
    0 10px 22px rgba(0, 0, 0, .3);
}

.share-spin-entry__next-goal-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.share-spin-entry__next-goal-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 4px 8px 4px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255, 211, 113, .8);
  background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .03));
}

.share-spin-entry__next-goal-chip strong {
  color: #fde68a;
  font-size: 17px;
  line-height: 1;
  font-weight: 900;
}

.share-spin-entry__next-goal-share-btn {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  border: 1px solid rgba(252, 211, 77, .62);
  background: rgba(252, 211, 77, .14);
  color: #fff3c2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.share-spin-entry__next-goal-share-btn:disabled {
  opacity: .45;
}

.share-spin-entry__next-goal-status {
  color: #fde68a;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
}

.share-spin-entry__next-goal-progress {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.share-spin-entry__next-goal-track {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: rgba(16, 7, 40, .66);
  border: 1px solid rgba(255, 226, 148, .32);
  overflow: hidden;
}

.share-spin-entry__next-goal-fill {
  --goal-scale: 0.985;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #fbbf24, #fb923c);
  box-shadow: 0 0 14px rgba(251, 191, 36, .55);
  transform-origin: left center;
  transform: scaleX(0);
  animation: shareSpinGoalFill 3.8s cubic-bezier(.08, .9, .12, 1) forwards;
  position: relative;
}

.share-spin-entry__next-goal-fill::after {
  content: "";
  position: absolute;
  right: -6px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 244, 180, .95) 0%, rgba(251, 191, 36, .9) 42%, rgba(251, 146, 60, .1) 78%, rgba(251, 146, 60, 0) 100%);
  filter: blur(.2px);
  box-shadow: 0 0 12px rgba(251, 191, 36, .9), 0 0 22px rgba(251, 146, 60, .58);
  animation: shareSpinGoalTailPulse 1.35s ease-in-out infinite;
}

.share-spin-entry__next-goal-pct {
  color: #fde68a;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .03em;
}

.share-spin-entry__next-goal-copy {
  color: #f3e8ff;
  font-size: 11px;
  line-height: 1.42;
  font-weight: 700;
}

.share-spin-entry__next-goal-copy-icon {
  display: inline-block;
  position: relative;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(251, 191, 36, .14);
  border: 1px solid rgba(252, 211, 77, .45);
  color: #fde68a;
  line-height: 18px;
  vertical-align: -3px;
}

.share-spin-entry__next-goal-copy-icon svg {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  width: 11px;
  height: 11px;
  transform: translate(-50%, -56%);
}

.share-spin-entry__next-goal-copy-reward {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #fff2cc;
  font-weight: 800;
}

.share-spin-entry__next-goal-copy-reward-icon {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  object-fit: contain;
  background: rgba(255, 255, 255, .08);
  padding: 1px;
}

.share-spin-entry__next-goal-reward {
  border-radius: 12px;
  border: 1px solid rgba(255, 211, 113, .46);
  background:
    radial-gradient(circle at 14% 20%, rgba(255, 211, 113, .22), transparent 42%),
    linear-gradient(145deg, rgba(39, 14, 84, .9), rgba(22, 8, 50, .86));
  padding: 8px 10px;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 8px 18px rgba(0, 0, 0, .26);
}

.share-spin-entry__next-goal--ready-claim .share-spin-entry__next-goal-reward {
  border-color: rgba(134, 239, 172, .42);
  background:
    radial-gradient(circle at 14% 20%, rgba(134, 239, 172, .2), transparent 44%),
    linear-gradient(145deg, rgba(32, 95, 62, .66), rgba(26, 10, 56, .82));
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
}

.share-spin-entry__next-goal-reward-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  object-fit: contain;
  background: rgba(255, 255, 255, .08);
  padding: 7px;
  box-shadow: 0 0 0 1px rgba(255, 217, 128, .34) inset, 0 0 16px rgba(251, 191, 36, .28);
}

.share-spin-entry__next-goal-reward-copy {
  min-width: 0;
}

.share-spin-entry__next-goal-ready-action {
  justify-self: end;
  align-self: center;
}

.share-spin-entry__next-goal-reward-label {
  color: #fcd68a;
  font-size: 9px;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 800;
}

.share-spin-entry__next-goal-reward-name {
  color: #fff2cc;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.2;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.share-spin-entry__next-goal-reward-value {
  color: #fbbf24;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.1;
  margin-top: 3px;
}

.share-spin-entry__claim-reminder {
  border-radius: 10px;
  border: 1px solid rgba(253, 186, 116, .42);
  background: linear-gradient(180deg, rgba(120, 53, 15, .3), rgba(45, 14, 67, .42));
  padding: 8px 10px;
  color: #fde68a;
  font-size: 10px;
  line-height: 1.45;
}

.share-spin-entry__pending-list {
  display: grid;
  gap: 7px;
  max-height: 220px;
  overflow-y: auto;
  padding-right: 2px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.4) transparent;
}

.share-spin-entry__pending-list::-webkit-scrollbar {
  width: 6px;
}

.share-spin-entry__pending-list::-webkit-scrollbar-track {
  background: transparent;
}

.share-spin-entry__pending-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.4);
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  background-clip: padding-box;
}

.share-spin-entry__pending-item {
  border-radius: 11px;
  border: 1px solid rgba(143, 107, 220, .4);
  background: linear-gradient(145deg, rgba(30, 10, 68, .82), rgba(18, 7, 45, .76));
  padding: 7px 8px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.share-spin-entry__pending-main {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.share-spin-entry__pending-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  object-fit: contain;
  background: rgba(255, 255, 255, .06);
  padding: 4px;
}

.share-spin-entry__pending-copy {
  min-width: 0;
}

.share-spin-entry__pending-name {
  color: #f3e8ff;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.share-spin-entry__pending-value {
  color: #fcd68a;
  font-size: 11px;
  font-weight: 800;
  margin-top: 1px;
}

.share-spin-entry__pending-action {
  justify-self: end;
}

.share-spin-entry__pending-lock-btn {
  height: 32px;
  min-width: 90px;
  border-radius: 10px;
  border: 1px solid rgba(168, 139, 250, .36);
  background: rgba(76, 29, 149, .34);
  color: #c4b5fd;
  font-size: 11px;
  font-weight: 700;
  padding: 0 10px;
}

.share-spin-entry__tier-spin-reward--goal {
  margin-top: -1px;
}

@keyframes shareSpinGoalFill {
  0% { transform: scaleX(0); }
  65% { transform: scaleX(calc(var(--goal-scale) * 0.9)); }
  84% { transform: scaleX(calc(var(--goal-scale) * 0.97)); }
  93% { transform: scaleX(calc(var(--goal-scale) * 0.992)); }
  100% { transform: scaleX(var(--goal-scale)); }
}

@keyframes shareSpinGoalTailPulse {
  0%, 100% { opacity: .72; transform: translateY(-50%) scale(.9); }
  50% { opacity: 1; transform: translateY(-50%) scale(1.08); }
}

@keyframes shareSpinGoalDotBlink {
  0%, 100% { opacity: .45; box-shadow: 0 0 0 rgba(251, 191, 36, 0.0); }
  50% { opacity: 1; box-shadow: 0 0 10px rgba(251, 191, 36, .95), 0 0 18px rgba(251, 191, 36, .6); }
}

@keyframes shareSpinGoalDotBlinkReady {
  0%, 100% { opacity: .45; box-shadow: 0 0 0 rgba(34, 197, 94, 0.0); }
  50% { opacity: 1; box-shadow: 0 0 10px rgba(34, 197, 94, .92), 0 0 18px rgba(34, 197, 94, .58); }
}

.share-spin-entry__tiers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  max-height: 260px;
  overflow-y: auto;
  padding-right: 2px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.4) transparent;
}

.share-spin-entry__tiers::-webkit-scrollbar {
  width: 6px;
  display: block !important;
}

.share-spin-entry__tiers::-webkit-scrollbar-track {
  background: transparent;
}

.share-spin-entry__tiers::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.4);
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  background-clip: padding-box;
}

.share-spin-entry__tiers::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.6);
}

.share-spin-entry__tier-card {
  --tier-accent: rgba(157, 110, 255, .72);
  border-radius: 12px;
  border: 1px solid rgba(155, 122, 224, .3);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0) 38%),
    linear-gradient(145deg, rgba(35, 12, 76, .88), rgba(22, 8, 52, .8));
  padding: 10px 10px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    inset 0 -1px 0 rgba(0, 0, 0, .28),
    0 8px 16px rgba(0, 0, 0, .22);
}

.share-spin-entry__tier-card.is-ready {
  --tier-accent: rgba(255, 206, 107, .88);
  border-color: rgba(255, 204, 112, .4);
  background:
    linear-gradient(180deg, rgba(255, 228, 155, .14), rgba(255, 228, 155, 0) 40%),
    linear-gradient(145deg, rgba(74, 34, 8, .7), rgba(67, 25, 97, .62));
  box-shadow:
    inset 3px 0 0 rgba(255, 206, 107, .82),
    inset 0 1px 0 rgba(255, 255, 255, .12),
    0 8px 16px rgba(0, 0, 0, .24);
}

.share-spin-entry__tier-card.is-locked {
  --tier-accent: rgba(151, 128, 214, .62);
  border-color: rgba(128, 93, 201, .28);
  background:
    linear-gradient(180deg, rgba(205, 189, 255, .08), rgba(205, 189, 255, 0) 40%),
    linear-gradient(145deg, rgba(28, 10, 64, .86), rgba(20, 8, 50, .72));
}

.share-spin-entry__tier-card.is-claimed {
  --tier-accent: rgba(96, 220, 164, .84);
  border-color: rgba(97, 211, 164, .35);
  background:
    linear-gradient(180deg, rgba(158, 255, 214, .12), rgba(158, 255, 214, 0) 40%),
    linear-gradient(145deg, rgba(16, 62, 52, .58), rgba(24, 10, 58, .68));
  box-shadow:
    inset 3px 0 0 rgba(96, 220, 164, .76),
    inset 0 1px 0 rgba(255, 255, 255, .1),
    0 8px 16px rgba(0, 0, 0, .24);
}

.share-spin-entry__tier-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.share-spin-entry__tier-head {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--tier-accent);
  background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .02));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
}

.share-spin-entry__tier-head strong {
  color: #f5d0fe;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
}

.share-spin-entry__tier-head span {
  color: #c4b5fd;
  font-size: 10px;
}

.share-spin-entry__tier-status {
  color: #b5a3de;
  font-size: 10px;
  white-space: nowrap;
}

.share-spin-entry__tier-card.is-ready .share-spin-entry__tier-status {
  color: #fde68a;
}

.share-spin-entry__tier-card.is-claimed .share-spin-entry__tier-status {
  color: #86efac;
}

.share-spin-entry__tier-spin-reward {
  border-radius: 10px;
  border: 1px solid rgba(143, 107, 220, .4);
  background: rgba(18, 7, 45, .74);
  padding: 5px 7px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  min-width: 0;
}

.share-spin-entry__tier-spin-reward-icon {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  object-fit: contain;
  background: rgba(255, 255, 255, .06);
  padding: 3px;
}

.share-spin-entry__tier-spin-reward-copy {
  min-width: 0;
}

.share-spin-entry__tier-spin-reward-name {
  color: #f3e8ff;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.share-spin-entry__tier-spin-reward-value {
  color: #fcd68a;
  font-size: 10px;
  margin-top: 1px;
}

.share-spin-entry__tier-main-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.share-spin-entry__tier-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 24px;
  border-radius: 999px;
  border: 1px solid rgba(185, 145, 255, .35);
  background: rgba(20, 8, 50, .66);
  padding: 0 9px;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.share-spin-entry__tier-pill-emoji {
  font-size: 12px;
}

.share-spin-entry__tier-action {
  justify-self: end;
}

.share-spin-entry__empty {
  border-radius: 12px;
  border: 1px dashed rgba(140, 102, 215, .5);
  padding: 12px;
  color: #baa4e8;
  text-align: center;
  font-size: 11px;
}

@media (min-width: 1200px) {
  .share-spin-entry__tiers {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.share-spin-popup {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: block;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
}

.share-spin-popup.modal-backdrop {
  background:
    radial-gradient(ellipse at 50% 46%, rgba(7, 5, 27, 0) 0%, rgba(7, 5, 27, .08) 34%, rgba(7, 5, 27, .3) 58%, rgba(7, 5, 27, .56) 80%, rgba(7, 5, 27, .74) 100%),
    linear-gradient(180deg, rgba(7, 5, 27, .56) 0%, rgba(36, 8, 46, .66) 100%);
  backdrop-filter: blur(20px) saturate(112%);
  -webkit-backdrop-filter: blur(20px) saturate(112%);
}

.share-spin-popup::before {
  content: "";
  position: absolute;
  inset: -12%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 46%, rgba(125, 81, 255, .16) 0%, rgba(125, 81, 255, .08) 26%, rgba(125, 81, 255, 0) 58%);
  filter: blur(52px);
  opacity: .72;
}

.share-spin-popup::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(7, 5, 27, .14) 0%, rgba(36, 8, 46, .2) 100%);
}

.share-spin-popup .modal-backdrop__dismiss {
  position: absolute;
  inset: 0;
}

.share-spin-popup__dialog {
  position: relative;
  z-index: 3;
  width: 100vw;
  height: 100dvh;
  max-height: none;
  border-radius: 0;
  border: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none;
  display: grid;
  place-items: center;
}

.share-spin-popup__halo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(860px, 120vw);
  height: min(860px, 120vw);
  transform: translate(-50%, -52%);
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 196, 88, .28) 0%, rgba(255, 142, 24, .2) 32%, rgba(180, 74, 255, .16) 56%, rgba(44, 12, 86, .08) 72%, rgba(44, 12, 86, 0) 100%),
    radial-gradient(circle at 50% 58%, rgba(255, 154, 34, .22) 0%, rgba(255, 110, 0, .12) 30%, rgba(128, 49, 221, .12) 58%, rgba(36, 9, 73, 0) 100%);
  filter: blur(22px) saturate(108%);
}

.share-spin-popup__sparkles {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}

.share-spin-popup__sparkles i {
  position: absolute;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  width: calc(3px * var(--s));
  height: calc(3px * var(--s));
  border-radius: 50%;
  background: #ffd87a;
  box-shadow: 0 0 12px rgba(255, 181, 60, .85), 0 0 20px rgba(255, 132, 16, .45);
  opacity: 0;
  transform: translateY(8px) scale(.7);
  animation: share-spin-sparkle 4.8s ease-in-out infinite;
  animation-delay: calc(var(--d) * -1s);
}

@keyframes share-spin-sparkle {
  0%, 100% {
    opacity: 0;
    transform: translateY(10px) scale(.72);
  }
  32% {
    opacity: .9;
    transform: translateY(0) scale(1);
  }
  62% {
    opacity: .35;
    transform: translateY(-10px) scale(.86);
  }
}

.share-spin-popup__close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 9;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: rgba(255, 239, 251, .9);
  background: rgba(42, 17, 95, .7);
  border: 1px solid rgba(189, 145, 255, .28);
  display: grid;
  place-items: center;
  padding: 0;
  line-height: 0;
}

.share-spin-popup__close svg {
  width: 21px;
  height: 21px;
  display: block;
}

.share-spin-popup__chances {
  position: absolute;
  top: 66px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
  white-space: nowrap;
}

.share-spin-popup__chances-number {
  font-weight: 900;
  font-size: clamp(46px, 8.8vw, 82px);
  line-height: .92;
  letter-spacing: .01em;
  background: linear-gradient(180deg, #fff9d7 0%, #ffe88b 18%, #ffd145 38%, #ffb420 56%, #ffcc4d 72%, #fff2b5 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow:
    0 1px 0 rgba(102, 36, 0, .92),
    0 2px 0 rgba(73, 20, 0, .58),
    0 0 8px rgba(255, 228, 132, .95),
    0 0 20px rgba(255, 175, 34, .62),
    0 0 44px rgba(255, 123, 0, .42);
}

.share-spin-popup__chances-label {
  font-size: clamp(13px, 2vw, 22px);
  line-height: 1.05;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(255, 229, 177, .95);
  text-shadow:
    0 1px 0 rgba(76, 26, 0, .9),
    0 0 12px rgba(255, 176, 42, .28);
  opacity: .94;
  transform: translateY(-2px);
}

.share-spin-popup__chances-label::before,
.share-spin-popup__chances-label::after {
  content: "\2022";
  display: inline-block;
  margin: 0 .52em;
  font-size: .9em;
  opacity: .72;
}

.share-spin-popup__chances-number,
.share-spin-popup__chances-label {
  animation: share-spin-chances-shine 2.2s ease-in-out infinite;
}

.share-spin-popup__chances.is-zero .share-spin-popup__chances-number {
  background: linear-gradient(180deg, #d9d3e6 0%, #b4acc8 42%, #8f87a7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow:
    0 1px 0 rgba(22, 14, 35, .82),
    0 0 0 rgba(0, 0, 0, 0);
  opacity: .96;
}

.share-spin-popup__chances.is-zero .share-spin-popup__chances-label {
  color: rgba(187, 177, 214, .9);
  text-shadow: 0 1px 0 rgba(22, 14, 35, .7);
  opacity: .9;
}

.share-spin-popup__chances.is-zero .share-spin-popup__chances-number,
.share-spin-popup__chances.is-zero .share-spin-popup__chances-label {
  animation: none;
  filter: none;
}

@keyframes share-spin-chances-shine {
  0%, 100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.12);
  }
}

.share-spin-win-overlay {
  position: absolute;
  inset: 0;
  z-index: 12;
  display: grid;
  place-items: center;
  pointer-events: none;
  animation: share-spin-win-fade-in .22s ease-out both;
}

.share-spin-win-overlay__glow {
  position: absolute;
  width: min(460px, 78vw);
  height: min(460px, 78vw);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 216, 118, .36) 0%, rgba(255, 140, 0, .22) 34%, rgba(168, 85, 247, .18) 58%, rgba(24, 8, 54, 0) 100%);
  filter: blur(14px);
}

.share-spin-win-overlay__card {
  position: relative;
  width: min(430px, calc(100vw - 44px));
  border-radius: 20px;
  padding: 12px 14px;
  background:
    linear-gradient(135deg, rgba(59, 20, 112, .92), rgba(122, 47, 185, .9) 52%, rgba(245, 113, 23, .9));
  box-shadow:
    0 18px 44px rgba(10, 0, 24, .5),
    0 0 44px rgba(255, 138, 28, .34);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.share-spin-win-overlay__main {
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 14px;
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(16, 6, 38, .32), rgba(16, 6, 38, .58));
}

.share-spin-win-overlay__icon {
  width: 54px;
  height: 54px;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .35));
  flex-shrink: 0;
}

.share-spin-win-overlay__copy {
  min-width: 0;
}

.share-spin-win-overlay__copy strong {
  display: block;
  color: #fff7d6;
  font-size: 19px;
  font-weight: 900;
  line-height: 1.1;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .32);
}

.share-spin-win-overlay__copy span {
  display: block;
  margin-top: 5px;
  color: rgba(250, 240, 255, .9);
  font-size: 13px;
  font-weight: 700;
}

@keyframes share-spin-win-fade-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.share-spin-popup__content {
  height: 100dvh;
  overflow: visible;
  padding: 14px 14px 18px;
  background: transparent;
  display: grid;
  place-items: center;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.4) transparent;
  scrollbar-gutter: stable;
  position: relative;
  z-index: 4;
}

.share-spin-popup__content::-webkit-scrollbar {
  width: 6px;
  display: block !important;
}

.share-spin-popup__content::-webkit-scrollbar-track {
  background: transparent;
}

.share-spin-popup__content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.4);
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  background-clip: padding-box;
}

.share-spin-popup__content::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.6);
}

.share-spin-popup__wheel-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  width: min(408px, calc(100vw - 20px));
  margin: 0 auto;
  position: relative;
  border-radius: 28px;
  border: 3px solid rgba(255, 186, 44, .94);
  background: rgba(2, 0, 8, .78);
  box-shadow:
    0 0 0 3px rgba(255, 180, 30, 0.88),
    0 0 18px 6px rgba(255, 140, 0, 0.66),
    0 0 50px 20px rgba(255, 100, 0, 0.4),
    0 0 100px 40px rgba(255, 60, 0, 0.16);
  animation: share-spin-phone-glow-pulse 2.5s ease-in-out infinite;
  z-index: 4;
}

.share-spin-popup__wheel-wrap::before {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: 34px;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(circle at 50% 50%, rgba(255, 186, 44, .14), rgba(255, 124, 0, .05) 48%, rgba(130, 68, 255, .08) 75%, rgba(130, 68, 255, 0) 100%);
  filter: blur(10px);
}

.share-spin__hero {
  position: relative;
  width: 100%;
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  z-index: 1;
}

.share-spin__hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow:
    0 0 0 1px rgba(255, 198, 92, .22) inset,
    0 0 16px 4px rgba(255, 140, 0, .34),
    0 0 46px 14px rgba(255, 96, 0, .22),
    0 0 96px 24px rgba(176, 84, 255, .18);
}

@keyframes share-spin-phone-glow-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 3px rgba(255, 180, 30, 0.9),
      0 0 18px 6px rgba(255, 140, 0, 0.7),
      0 0 50px 20px rgba(255, 100, 0, 0.4),
      0 0 100px 40px rgba(255, 60, 0, 0.15);
  }
  50% {
    box-shadow:
      0 0 0 3px rgba(255, 220, 80, 1),
      0 0 28px 12px rgba(255, 180, 0, 0.9),
      0 0 80px 35px rgba(255, 120, 0, 0.5),
      0 0 140px 60px rgba(255, 80, 0, 0.25);
  }
}

.share-spin__hero-bg {
  width: 100%;
  height: auto;
  display: block;
}

.share-spin__spin-overlay {
  position: absolute;
  top: -6.4%;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 0;
}

.share-spin__wheel-shell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.share-spin__wheel-ring {
  position: relative;
  width: 74%;
  max-width: 480px;
  aspect-ratio: 1 / 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.share-spin__wheel-pointer {
  position: absolute;
  top: -5%;
  width: 10%;
  min-width: 24px;
  z-index: 10;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .5));
}

.share-spin__wheel-image {
  width: 100%;
  height: auto;
  transition: transform 4s cubic-bezier(0.15, 0, 0.15, 1);
  z-index: 5;
  pointer-events: none;
  will-change: transform;
}

.share-spin__wheel-btn {
  position: absolute;
  width: 42%;
  height: auto;
  z-index: 15;
  cursor: pointer;
  transition: all .2s ease;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .5));
  border: 0;
  background: transparent;
  padding: 0;
}

.share-spin__wheel-btn img {
  width: 100%;
  height: auto;
  display: block;
}

.share-spin__wheel-btn:hover {
  transform: scale(1.04);
}

.share-spin__wheel-btn:disabled {
  opacity: .72;
  cursor: not-allowed;
}

.share-spin__wheel-btn:active {
  transform: scale(.92);
}

.share-spin__wheel-btn-text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 78%;
  text-align: center;
  font-size: 11px;
  color: rgba(255, 255, 255, .95);
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .55);
}

.share-spin-popup__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 8px auto 0;
  width: min(408px, calc(100vw - 20px));
}

.share-spin-popup__stat {
  border-radius: 12px;
  border: 1px solid rgba(140, 60, 230, .25);
  background: rgba(50, 20, 100, .48);
  text-align: center;
  padding: 10px 6px;
}

.share-spin-popup__stat-value {
  color: #e9d5ff;
  font-size: 19px;
  font-weight: 900;
  line-height: 1;
}

.share-spin-popup__stat-label {
  margin-top: 5px;
  color: #a78bfa;
  font-size: 10px;
  letter-spacing: .03em;
}

.share-spin-popup__last-result {
  border-radius: 12px;
  border: 1px solid rgba(94, 234, 212, .34);
  background: linear-gradient(135deg, rgba(17, 94, 89, .55), rgba(22, 78, 99, .45));
  padding: 10px 12px;
  margin: 8px auto 0;
  width: min(408px, calc(100vw - 20px));
}

.share-spin-popup__last-result-label {
  font-size: 10px;
  color: #99f6e4;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.share-spin-popup__last-result-main {
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.share-spin-popup__last-result-main img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.share-spin-popup__last-result-main strong {
  display: block;
  color: #fff;
  font-size: 12px;
}

.share-spin-popup__last-result-main span {
  display: block;
  color: #ccfbf1;
  font-size: 11px;
  margin-top: 2px;
}

.share-spin-popup__guide {
  margin: 10px auto 0;
  width: min(408px, calc(100vw - 20px));
  border-radius: 12px;
  background: linear-gradient(155deg, rgba(30, 12, 66, .82), rgba(17, 7, 46, .8));
  padding: 12px;
}

.share-spin-popup__guide-title {
  color: #f5d0fe;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.share-spin-popup__guide-list {
  margin: 8px 0 0;
  padding-left: 16px;
  display: grid;
  gap: 6px;
  color: #d8c4ff;
  font-size: 12px;
  line-height: 1.4;
}

.share-spin-popup__section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  color: #d8b4fe;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .04em;
  margin-top: 10px;
}

.share-spin-popup__refresh {
  border: 0;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 10px;
  font-weight: 700;
  color: #f5d0fe;
  background: rgba(124, 58, 237, .28);
  cursor: pointer;
}

.share-spin-popup__sub {
  color: #a78bfa;
  font-size: 10px;
  font-weight: 600;
}

.share-spin-popup__tier-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.share-spin-popup__tier-card {
  border-radius: 12px;
  border: 1px solid rgba(120, 50, 200, .22);
  background: rgba(40, 15, 85, .52);
  padding: 10px 10px;
}

.share-spin-popup__tier-head {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.share-spin-popup__tier-head strong {
  color: #f5d0fe;
  font-size: 18px;
  line-height: 1;
}

.share-spin-popup__tier-head span {
  color: #c4b5fd;
  font-size: 10px;
}

.share-spin-popup__tier-status {
  margin-top: 7px;
  font-size: 10px;
}

.share-spin-popup__tier-card.is-ready .share-spin-popup__tier-status {
  color: #fde68a;
}

.share-spin-popup__tier-card.is-claimed .share-spin-popup__tier-status {
  color: #86efac;
}

.share-spin-popup__tier-card.is-locked .share-spin-popup__tier-status {
  color: #9ca3af;
}

.share-spin-popup__pending-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.share-spin-popup__pending-item {
  border-radius: 12px;
  border: 1px solid rgba(120, 50, 200, .18);
  background: rgba(40, 15, 85, .42);
  padding: 10px 10px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.share-spin-popup__pending-main {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.share-spin-popup__pending-icon {
  width: 34px;
  height: 34px;
  object-fit: contain;
  flex-shrink: 0;
}

.share-spin-popup__pending-copy {
  min-width: 0;
}

.share-spin-popup__pending-copy strong {
  display: block;
  font-size: 12px;
  color: #f5d0fe;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.share-spin-popup__pending-copy span {
  display: block;
  margin-top: 3px;
  font-size: 10px;
  color: #a78bfa;
}

.share-spin-popup__pending-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}

.share-spin-popup__pending-lock {
  font-size: 10px;
  color: #fca5a5;
}

.share-spin-popup__empty {
  border: 1px dashed rgba(120, 50, 200, .4);
  border-radius: 12px;
  padding: 12px;
  color: #a78bfa;
  text-align: center;
  font-size: 11px;
}

/* ---- Mobile ---- */
@media (max-width: 600px) {
  .modal--inbox {
    width: 100%;
    max-width: 100%;
    max-height: calc(100dvh - 24px);
    overflow: hidden;
  }

  .inbox-hd {
    padding: 20px 18px 14px;
  }

  .inbox-hd__title {
    min-width: 0;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 20px;
  }

  .inbox-toolbar {
    flex-wrap: wrap;
    gap: 10px;
    padding: 0 18px 12px;
  }

  .inbox-toolbar__count {
    min-width: 0;
  }

  .inbox-item {
    padding: 16px 18px;
  }

  .inbox-item__row1 {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .inbox-item__time {
    margin-left: 0;
  }

  .modal--share {
    width: 100%;
    max-width: 100%;
    max-height: calc(100dvh - 8px);
    border-radius: 18px;
    margin-top: 0;
    overflow-x: hidden;
  }

  .share-dialog__banner-title {
    font-size: 17px;
  }

  .share-dialog__stat-value {
    font-size: 20px;
  }

  .share-dialog__tier-row {
    flex-wrap: wrap;
  }

  .share-dialog__tier-rewards {
    order: 2;
    width: 100%;
  }

  .share-dialog__tier-status {
    margin-left: auto;
  }

  .share-dialog__progress-wrap {
    padding: 14px 10px 96px;
    overflow: visible;
  }

  .share-dialog__markers {
    left: 10px;
    right: 10px;
    overflow: visible;
  }

  .share-dialog__marker {
    min-width: 48px;
  }

  .share-dialog__marker:first-child {
    transform: translateX(-10%);
  }

  .share-dialog__marker:last-child {
    transform: translateX(-90%);
  }

  .share-dialog__marker-label,
  .share-dialog__marker-reward {
    max-width: 64px;
    font-size: 8px;
    line-height: 1.15;
    white-space: normal;
  }

  .share-dialog__link-url {
    font-size: 11px;
  }

  .share-dialog__rules-list li strong {
    white-space: nowrap;
  }

  .share-spin-entry {
    padding: 10px;
    gap: 8px;
    min-width: 0;
    overflow-x: hidden;
  }

  .share-spin-entry > * {
    min-width: 0;
  }

  .share-dialog__body--spin-entry {
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
  }

  .share-dialog__link-row {
    min-width: 0;
    flex-wrap: wrap;
  }

  .share-dialog__copy-btn {
    margin-left: auto;
  }

  .share-spin-entry__tiers-head {
    flex-wrap: wrap;
    row-gap: 4px;
  }

  .share-spin-entry__next-goal-progress {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .share-spin-entry__next-goal-pct {
    justify-self: end;
  }

  .share-spin-entry__next-goal-reward {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 8px;
    padding: 7px 8px;
  }

  .share-spin-entry__next-goal--ready-claim .share-spin-entry__next-goal-reward {
    grid-template-columns: 40px minmax(0, 1fr) auto;
  }

  .share-spin-entry__next-goal-reward-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    padding: 6px;
  }

  .share-spin-entry__next-goal-reward-name {
    font-size: 12px;
  }

  .share-spin-entry__next-goal-reward-value {
    font-size: 14px;
  }

  .share-spin-entry__next-goal-ready-action {
    justify-self: end;
    grid-column: auto;
  }

  .share-spin-entry__pending-item {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .share-spin-entry__pending-action {
    justify-self: stretch;
  }

  .share-spin-entry__pending-action .share-dialog__claim-btn,
  .share-spin-entry__pending-lock-btn {
    width: 100%;
  }

  .share-spin-entry__mission {
    grid-template-columns: 1fr;
  }

  .share-spin-entry__mission-art {
    min-height: 72px;
  }

  .share-spin-entry__btn {
    min-height: 46px;
    font-size: 15px;
  }

  .share-spin-entry__action-row {
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 8px;
  }

  .share-spin-entry__badge {
    min-height: 46px;
    min-width: 0;
    border-radius: 12px;
    padding: 4px 8px 5px;
  }

  .share-spin-entry__badge-num {
    font-size: 24px;
  }

  .share-spin-entry__badge-label {
    font-size: 10px;
  }

  .share-spin-entry__btn-icon {
    font-size: 17px;
  }

  .share-spin-entry__tier-card {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .share-spin-entry__tiers {
    grid-template-columns: 1fr;
    max-height: 230px;
  }

  .share-spin-entry__tier-action {
    justify-self: stretch;
  }

  .share-spin-entry__tier-action .share-dialog__claim-btn {
    width: 100%;
  }

  .share-spin-popup {
    padding: 0;
  }

  .share-spin-popup__dialog {
    width: 100vw;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
  }

  .share-spin-popup__content {
    height: 100dvh;
    padding: 10px;
    overflow: visible;
  }

  .share-spin-popup__content::-webkit-scrollbar {
    width: 6px;
  }

  .share-spin-popup__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .share-spin__wheel-ring {
    width: 75%;
  }

  .share-spin__wheel-btn {
    width: 42%;
  }

  .share-spin__wheel-btn-text {
    font-size: 10px;
  }

  .share-spin-popup__guide {
    padding: 10px;
  }

  .share-spin-popup__guide-title {
    font-size: 11px;
  }

  .share-spin-popup__guide-list {
    font-size: 11px;
    gap: 5px;
  }
}

/* ---- SignIn Dialog (Daily Bonus) v2 ---- */
.signin-dialog__content {
  background: linear-gradient(180deg, #170d33 0%, #0a0418 100%);
  border: 1px solid rgba(200, 80, 255, .2);
  border-radius: 20px;
  max-width: 760px;
  width: 96%;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .05);
}

.signin-dialog__shell {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.signin-dialog__header {
  padding-right: 56px;
}

.signin-dialog__header-copy {
  display: grid;
  gap: var(--space-2);
}

.signin-dialog__hero {
  position: relative;
  width: 100%;
  height: clamp(140px, 25vw, 200px);
  background: #1f0d45;
  display: flex;
  align-items: center;
  justify-content: center;
}

.signin-dialog__hero-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.signin-dialog__hero-ph-text {
  position: relative;
  z-index: 2;
  color: rgba(255, 255, 255, 0.4);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-align: center;
  border: 2px dashed rgba(255, 255, 255, 0.2);
  padding: 10px 20px;
  border-radius: 12px;
}

.signin-dialog__hero .modal__close {
  z-index: 10;
  position: absolute;
  top: 14px;
  right: 14px;
}

.signin-dialog__body {
  position: relative;
  flex: 1;
  overflow-y: auto;
}

.signin-dialog__cards-bg {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}

.signin-dialog__cards-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.signin-dialog__card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-overlay) 92%, #4c1d95 8%) 0%, color-mix(in srgb, var(--surface-base) 90%, #312e81 10%) 100%);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  min-height: 0;
  overflow: hidden;
  box-shadow: var(--elevation-2);
  transition: transform 0.2s;
}

.signin-dialog__card-copy {
  display: grid;
  flex: 1;
  min-width: 0;
  align-items: flex-start;
  gap: var(--space-2);
}

.signin-dialog__card-title {
  color: var(--text-primary);
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  margin: 0;
  text-transform: uppercase;
}

.signin-dialog__card-ph {
  position: relative;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 64px;
}

.signin-dialog__card-ph--day7 {
  width: 76px;
  height: 76px;
  flex-basis: 76px;
}

.signin-dialog__card-ph-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.28));
}

.signin-dialog__card-ph-img--day7 {
  width: 76px;
  height: 76px;
}

.signin-dialog__coin-bg {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}

.signin-dialog__coin-icon {
  width: 14px;
  height: 14px;
}

.signin-dialog__coin-amt {
  color: var(--text-money);
  font-size: 18px;
  font-weight: 900;
  text-shadow: var(--money-text-shadow);
}

/* States */
.signin-dialog__card.is-claimable {
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-brand-soft) 78%, #5b21b6 22%) 0%, color-mix(in srgb, var(--surface-overlay) 84%, #4c1d95 16%) 100%);
  border-color: var(--border-brand);
  box-shadow: var(--elevation-brand-glow);
}

.signin-dialog__card.is-claimed {
  background: color-mix(in srgb, var(--surface-overlay) 90%, rgba(34, 197, 94, 0.2));
  border-color: color-mix(in srgb, var(--success-500) 32%, var(--border-default));
}

.signin-dialog__card-ph-check {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  background: #10b981;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  z-index: 2;
}

.signin-dialog__card--day7 {
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-overlay) 84%, rgba(239, 68, 68, 0.32)) 0%, color-mix(in srgb, var(--surface-base) 80%, rgba(127, 29, 29, 0.38)) 100%);
  border-color: color-mix(in srgb, var(--danger-500) 32%, var(--border-default));
}

.signin-dialog__card--day7.is-claimable {
  background: linear-gradient(180deg, color-mix(in srgb, var(--danger-500) 36%, var(--surface-overlay)) 0%, color-mix(in srgb, var(--surface-base) 74%, var(--danger-700) 26%) 100%);
  border-color: var(--border-brand);
  box-shadow: var(--elevation-brand-glow);
}

.signin-dialog__card--day7.is-claimed {
  background: color-mix(in srgb, var(--surface-overlay) 88%, rgba(239, 68, 68, 0.18));
  border-color: color-mix(in srgb, var(--danger-500) 24%, var(--border-default));
}

.signin-dialog__card-action {
  min-width: 112px;
  flex-shrink: 0;
  white-space: nowrap;
  justify-self: end;
}

.signin-dialog__card-action--disabled {
  box-shadow: none;
}

.signin-dialog__loading {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 180px;
}

.signin-dialog__claim-dots {
  transform: scale(1.05);
}

@media (max-width: 480px) {
  .signin-dialog__content {
    width: 94%;
    max-height: calc(100vh - 16px);
    display: flex;
    flex-direction: column;
  }

  .signin-dialog__header {
    padding-right: 44px;
  }

  .signin-dialog__hero .modal__close {
    top: 10px;
    right: 10px;
    transform: scale(0.92);
    transform-origin: top right;
  }

  .signin-dialog__body {
    padding: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.4) transparent;
  }

  .signin-dialog__body::-webkit-scrollbar {
    width: 6px;
  }

  .signin-dialog__body::-webkit-scrollbar-track {
    background: transparent;
  }

  .signin-dialog__body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.4);
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    background-clip: padding-box;
  }

  .signin-dialog__body::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.6);
  }

  .signin-dialog__cards-bg {
    padding: 0;
    border-radius: 0;
  }

  .signin-dialog__cards-grid {
    gap: var(--space-3);
  }

  .signin-dialog__card {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--space-3);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
  }

  .signin-dialog__card-title {
    font-size: var(--fs-body-md);
  }

  .signin-dialog__card-copy {
    gap: var(--space-2);
  }

  .signin-dialog__card-ph {
    width: 52px;
    height: 52px;
    flex-basis: 52px;
  }

  .signin-dialog__card-ph--day7 {
    width: 60px;
    height: 60px;
    flex-basis: 60px;
  }

  .signin-dialog__card-ph-img--day7 {
    width: 60px;
    height: 60px;
  }

  .signin-dialog__card-ph-check {
    top: -4px;
    right: -4px;
    width: 18px;
    height: 18px;
    font-size: 11px;
  }

  .signin-dialog__coin-bg {
    gap: var(--space-1);
  }

  .signin-dialog__coin-icon {
    width: 12px;
    height: 12px;
  }

  .signin-dialog__coin-amt {
    font-size: 16px;
  }

  .signin-dialog__card-action {
    min-width: 96px;
  }
}

.withdraw-apply__submit-btn--loading {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: wait;
}

.withdraw-apply__submit-dots {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.withdraw-apply__submit-dots span {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: currentColor;
  animation: pp-tier-claim-dot 1s ease-in-out infinite;
}

.withdraw-apply__submit-dots span:nth-child(2) {
  animation-delay: .14s;
}

.withdraw-apply__submit-dots span:nth-child(3) {
  animation-delay: .28s;
}

.cert-info-modal__save-btn--loading {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: wait;
}

.cert-info-modal__save-dots {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.cert-info-modal__save-dots span {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: currentColor;
  animation: pp-tier-claim-dot 1s ease-in-out infinite;
}

.cert-info-modal__save-dots span:nth-child(2) {
  animation-delay: .14s;
}

.cert-info-modal__save-dots span:nth-child(3) {
  animation-delay: .28s;
}

.seven-day-upgrade-confirm__dialog {
  max-width: 420px;
  padding: 0 24px 24px;
  background: linear-gradient(180deg, #170d33 0%, #0a0418 100%);
  border: 1px solid rgba(200, 80, 255, .2);
  border-radius: 20px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .05);
  overflow: hidden;
}

.reward-claim__loading {
  min-height: 150px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 12px;
  padding: 8px 6px;
}

.reward-claim__loading-head {
  display: grid;
  justify-items: center;
}

.reward-claim__loading-headline {
  font-size: 18px;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: .01em;
  color: #ffe7a6;
  text-shadow: 0 2px 10px rgba(255, 164, 26, .28);
}

.reward-claim__loading-dots {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 10px;
}

.reward-claim__loading-dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ffb227;
  opacity: .22;
  animation: rewardClaimDotPulse 1s ease-in-out infinite;
}

.reward-claim__loading-dots i:nth-child(2) {
  animation-delay: .18s;
}

.reward-claim__loading-dots i:nth-child(3) {
  animation-delay: .36s;
}

.reward-claim__loading-lines {
  display: grid;
  gap: 6px;
}

.reward-claim__loading-line {
  color: rgba(239, 231, 255, .92);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.28;
  text-align: center;
  animation: rewardClaimLineGlow 1.6s ease-in-out infinite;
}

.reward-claim__loading-line:nth-child(2) {
  animation-delay: .2s;
}

.reward-claim__loading-line:nth-child(3) {
  animation-delay: .4s;
}

@keyframes rewardClaimDotPulse {
  0%,
  100% {
    opacity: .2;
    transform: translateY(0) scale(.95);
  }

  45% {
    opacity: 1;
    transform: translateY(-2px) scale(1.08);
  }
}

@keyframes rewardClaimLineGlow {
  0%,
  100% {
    opacity: .62;
    filter: drop-shadow(0 0 0 rgba(255, 198, 96, 0));
  }

  50% {
    opacity: 1;
    filter: drop-shadow(0 0 10px rgba(255, 198, 96, .28));
  }
}

.seven-day-upgrade-confirm__body {
  display: grid;
  gap: 12px;
}

.seven-day-upgrade-confirm__hero {
  position: relative;
  margin: 0 -24px 16px;
  min-height: 194px;
}

.seven-day-upgrade-confirm__hero-img {
  width: 100%;
  height: 194px;
  object-fit: cover;
  display: block;
}

.seven-day-upgrade-confirm__hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(7, 2, 18, .1) 0%, rgba(7, 2, 18, .5) 58%, rgba(7, 2, 18, .9) 100%);
}

.seven-day-upgrade-confirm__hero-content {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  display: grid;
  gap: 8px;
}

.seven-day-upgrade-confirm__hero-title {
  color: #fff;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.02em;
  text-shadow: 0 6px 18px rgba(0, 0, 0, .35);
  white-space: nowrap;
}

.seven-day-upgrade-confirm__hero-badges {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.seven-day-upgrade-confirm__hero-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border-radius: 999px;
  padding: 0 10px;
  font-weight: 900;
  font-size: 10px;
  line-height: 1;
  letter-spacing: .02em;
}

.seven-day-upgrade-confirm__hero-badge--reward {
  color: #fff9df;
  border: 1px solid rgba(255, 200, 84, .9);
  background: linear-gradient(180deg, #ffaf2f 0%, #ff8800 100%);
  box-shadow: 0 10px 24px rgba(255, 136, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .35);
}

.seven-day-upgrade-confirm__hero-badge-amount {
  font-size: 16px;
  line-height: 1;
  margin-right: 4px;
}

.seven-day-upgrade-confirm__hero-badge-text {
  font-size: 10px;
  line-height: 1;
}

.seven-day-upgrade-confirm__hero-badge--hint {
  color: rgba(238, 232, 255, .92);
  border: 1px solid rgba(175, 144, 255, .4);
  background: rgba(16, 8, 43, .7);
  font-size: 11px;
  font-weight: 700;
  padding: 0 12px;
}

.seven-day-upgrade-confirm__eyebrow {
  color: #f6c15f;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.seven-day-upgrade-confirm__title {
  color: #fff;
  font-size: 24px;
  font-weight: 900;
  line-height: 1.1;
}

.seven-day-upgrade-confirm__desc {
  color: rgba(228, 220, 255, .8);
  font-size: 14px;
  line-height: 1.6;
}

.seven-day-upgrade-confirm__actions {
  margin-top: 6px;
}

.seven-day-upgrade-confirm__actions .login-modal__secondary,
.seven-day-upgrade-confirm__actions .login-modal__primary {
  min-height: 52px;
}

.seven-day-upgrade-confirm__primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 20px 0 18px;
  border-radius: 18px;
  letter-spacing: -.01em;
  box-shadow: 0 10px 30px rgba(236, 72, 153, .26), 0 0 28px rgba(192, 38, 211, .18);
}

.seven-day-upgrade-confirm__primary-icon-wrap {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.seven-day-upgrade-confirm__primary-icon {
  flex: 0 0 auto;
  font-size: 18px;
  line-height: 1;
  filter: none;
}

.seven-day-upgrade-confirm__primary-label {
  display: inline-flex;
  align-items: center;
}

@media (max-width: 768px) {
  .seven-day-upgrade-confirm__dialog {
    padding: 0 16px 18px;
  }

  .seven-day-upgrade-confirm__hero {
    margin: 0 -16px 14px;
    min-height: 146px;
  }

  .seven-day-upgrade-confirm__hero-img {
    height: 146px;
  }

  .seven-day-upgrade-confirm__hero-content {
    left: 18px;
    right: 18px;
    bottom: 18px;
    gap: 6px;
  }

  .seven-day-upgrade-confirm__hero-title {
    font-size: 18px;
  }

  .seven-day-upgrade-confirm__hero-badge {
    min-height: 26px;
    padding: 0 9px;
    font-size: 9px;
  }

  .seven-day-upgrade-confirm__hero-badge-amount {
    font-size: 14px;
    margin-right: 3px;
  }

  .seven-day-upgrade-confirm__hero-badge-text {
    font-size: 9px;
  }

  .seven-day-upgrade-confirm__hero-badge--hint {
    font-size: 10px;
    padding: 0 10px;
  }
}

/* ---- Phone Already Bound Confirm Modal ---- */
.phone-bound-confirm__dialog {
  width: min(340px, 100%);
  max-width: 340px;
  padding: 26px 22px 24px;
  background: linear-gradient(180deg, #170d33 0%, #0a0418 100%);
  border: 1px solid rgba(200, 80, 255, .22);
  border-radius: 22px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .05);
}

.phone-bound-confirm__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.phone-bound-confirm__login-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.phone-bound-confirm__login-btn .ph {
  font-size: 18px;
  line-height: 1;
  flex: 0 0 auto;
}

@media (max-width: 767px) {
  .phone-bound-confirm__dialog {
    width: 100%;
    max-width: none;
    padding: 22px 18px 20px;
  }
}

/* ---- Floating Actions ---- */
.floating-actions {
  position: fixed;
  right: 16px;
  bottom: calc(72px + env(safe-area-inset-bottom, 0px) + 16px);
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .3s, transform .3s, visibility .3s;
  visibility: hidden;
}

@media (max-width: 768px) {
  /* BGM button is always visible; search/top buttons are rendered only when scrolled */
  .floating-actions {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }
}

@media (min-width: 769px) {
  .floating-actions {
    display: none !important;
  }
}

.floating-actions.is-visible {
  pointer-events: auto;
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

.floating-actions__btn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 8, 34, 0.45);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(160, 80, 255, 0.25);
  border-radius: 12px;
  color: #fff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  padding: 0;
  transition: background .2s, transform .2s, border-color .2s;
  -webkit-tap-highlight-color: transparent;
}

.floating-actions__btn:active {
  transform: scale(0.9);
  background: rgba(30, 16, 60, .9);
  border-color: rgba(160, 80, 255, .6);
}

.floating-actions__btn svg {
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0 !important;
  stroke-width: 2.8;
}

.floating-actions__btn--bgm.is-off svg {
  opacity: .85;
}

.mobile-support-fab {
  position: fixed;
  left: var(--space-4);
  bottom: calc(72px + env(safe-area-inset-bottom, 0px) + var(--space-8));
  z-index: 52;
  width: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  background: transparent;
  color: #fff;
  cursor: pointer;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.24));
  padding: 0;
  transition: transform .2s;
  -webkit-tap-highlight-color: transparent;
}

.mobile-support-fab:active {
  transform: scale(0.9);
}

.mobile-support-fab__media {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  border: 2px solid #25D366;
  border-radius: var(--radius-full);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.mobile-support-fab__photo {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.mobile-support-fab__label {
  position: absolute;
  left: 50%;
  bottom: -16px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  background: #25D366;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.24);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  white-space: nowrap;
  z-index: 1;
}

@media (min-width: 769px) {
  .mobile-support-fab {
    display: none !important;
  }
}

/* Brand Filter Styles */
.brand-filter {
  display: flex;
  align-items: center;
  gap: 10px;
}

.topbar__center .brand-filter {
  width: max-content;
  min-width: max-content;
  flex-wrap: nowrap;
}

.brand-filter-shell--inline {
  scroll-margin-top: 80px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.brand-filter-shell--inline::-webkit-scrollbar {
  display: none;
}

/* Desktop Styles */
.brand-pill {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 72px;
  height: 72px;
  padding: 0;
  background: rgba(40, 20, 80, 0.4);
  border: 1px solid rgba(160, 80, 255, 0.15);
  border-radius: 14px;
  color: #9580c8;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  box-sizing: border-box;
}

.brand-pill__icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.brand-pill img {
  display: block;
  width: 32px;
  height: 32px;
  object-fit: contain;
  object-position: center;
  filter: brightness(0) invert(1);
  opacity: 0.7;
  transition: opacity 0.2s, transform 0.2s;
  transform: translateZ(0);
}

.brand-pill__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: inherit;
  line-height: 1;
}

.brand-pill__dot {
  width: 8px;
  height: 8px;
  background: #6e32c8;
  border-radius: 50%;
}

.brand-pill:hover {
  background: rgba(110, 50, 200, 0.15);
  border-color: rgba(160, 80, 255, 0.4);
  color: #f0eaff;
}

.brand-pill:hover img,
.brand-pill.is-active img {
  opacity: 1;
  filter: brightness(0) invert(1);
}

.brand-pill.is-active {
  background: linear-gradient(135deg, #7c3aed, #c026d3);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
}

.brand-pill.is-active img {
  opacity: 1;
  filter: brightness(0) invert(1);
}

.brand-pill.is-active .brand-pill__dot {
  background: #fff;
}

/* 鈹€鈹€ Captcha Overlay 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ */
#captcha-overlay {
  position: fixed;
  inset: 0;
  min-height: 100vh;
  background: color-mix(in srgb, var(--overlay-heavy) 86%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  visibility: hidden;
  opacity: 0;
  transition: opacity .2s, visibility .2s;
}

@supports (height: 100lvh) {
  .modal-backdrop,
  .global-loading,
  #captcha-overlay {
    height: calc(100lvh + env(safe-area-inset-bottom, 0px));
    min-height: calc(100lvh + env(safe-area-inset-bottom, 0px));
  }
}

/* iOS Safari: extend fullscreen overlays below the visual viewport so
   the bottom browser toolbar area does not reveal lobby content. */
@supports (-webkit-touch-callout: none) {
  @media (hover: none) and (pointer: coarse) {
    .modal-backdrop::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: 100%;
      height: calc(140px + env(safe-area-inset-bottom, 0px));
      background: inherit;
      pointer-events: none;
    }

    .global-loading,
    #captcha-overlay {
      top: 0;
      left: 0;
      right: 0;
      bottom: calc(-140px - env(safe-area-inset-bottom, 0px));
      width: auto;
      height: auto;
      min-height: 0;
    }

    /* iOS Safari toolbar area may ignore fixed overlay painting.
       Hide underlying layers while blocking overlays are open so no
       colorful lobby content leaks through the bottom browser bar. */
    html.blocking-overlay-open .app-shell > .app-download-banner,
    html.blocking-overlay-open .app-shell > .topbar,
    html.blocking-overlay-open .app-shell > .sidebar-backdrop,
    html.blocking-overlay-open .app-shell > .workspace,
    html.blocking-overlay-open .app-shell > .floating-actions,
    html.blocking-overlay-open .app-shell > .mobile-support-fab,
    html.blocking-overlay-open .app-shell > .nav-mobilebar,
    html.blocking-overlay-open .app-shell > .mobile-tabbar,
    html.blocking-overlay-open .app-shell > .toast-stack {
      visibility: hidden !important;
    }
  }
}

#captcha-overlay.active {
  visibility: visible;
  opacity: 1;
}

#captcha-box {
  background: color-mix(in srgb, var(--surface-overlay) 92%, var(--surface-base));
  border: 1px solid var(--border-default);
  border-radius: 16px;
  padding: 28px 24px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  min-width: 300px;
  position: relative;
}

#captcha-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--text-secondary);
  font-size: 14px;
  font-family: var(--font-body);
  min-height: 65px;
  justify-content: center;
}

#captcha-loading-text {
  color: var(--text-secondary);
  font-size: 14px;
}

#captcha-container {
  min-height: 0;
}

.captcha-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border-default);
  border-top-color: var(--brand-500);
  border-radius: 50%;
  animation: captcha-spin .8s linear infinite;
}

@keyframes captcha-spin {
  to { transform: rotate(360deg); }
}

#captcha-cancel {
  background: none;
  border: 1px solid var(--border-strong);
  color: var(--text-tertiary);
  border-radius: 6px;
  padding: 8px 20px;
  cursor: pointer;
  font-size: 14px;
  touch-action: manipulation;
  transition: border-color .15s, color .15s;
}

#captcha-cancel:hover {
  border-color: var(--border-default);
  color: var(--text-primary);
}

/* ---- App Download Banner ---- */
/* ---- App download banner push-down ---- */
/*
 * Desktop (>900px): topbar is sticky.
 *   Add padding-top to app-shell so the topbar starts below the banner,
 *   and set sticky top:72px so it sticks right under the banner while scrolling.
 *
 * Mobile (锟?00px): topbar is fixed, workspace uses padding-top:84px.
 *   Shift the fixed topbar down 72px and add the same offset to workspace padding-top.
 *   No padding-top on app-shell needed (topbar is out of flow).
 */
.app-shell {
  transition: padding-top .38s cubic-bezier(.22, 1, .36, 1);
}
.has-app-banner .app-shell {
  padding-top: var(--app-banner-offset);
}
.topbar {
  transition: top .38s cubic-bezier(.22, 1, .36, 1);
}
.has-app-banner .topbar {
  top: var(--app-banner-offset);
}

@media (max-width: 900px) {
  /* On mobile: topbar is fixed (out of flow), no app-shell padding needed */
  .has-app-banner .app-shell {
    padding-top: 0;
  }
  .workspace {
    transition: padding-top .38s cubic-bezier(.22, 1, .36, 1);
  }
  .has-app-banner .workspace {
    padding-top: calc(84px + var(--app-banner-offset));
  }
}

@keyframes appBannerSlideDown {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}

@keyframes appBannerSlideUp {
  from { transform: translateY(0); }
  to   { transform: translateY(-100%); }
}

@keyframes appBannerGlow {
  0%, 100% { opacity: .5; transform: scale(1); }
  50%       { opacity: .8; transform: scale(1.15); }
}

.app-download-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 48;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--app-banner-offset);
  padding: var(--app-banner-safe-top) 16px 0 14px;
  overflow: hidden;
  background:
    linear-gradient(100deg, rgba(20, 10, 20, .82) 0%, rgba(0, 0, 0, .65) 40%, rgba(10, 5, 25, .88) 75%),
    url('./img/download1440.png') center / cover no-repeat;
  border-bottom: 1px solid rgba(160, 60, 255, .35);
  backdrop-filter: blur(16px);
  box-shadow:
    0 8px 40px rgba(120, 40, 220, .6),
    0 2px 10px rgba(0, 0, 0, .7),
    0 0 0 1px rgba(168, 85, 247, .25),
    inset 0 1px 0 rgba(255, 255, 255, .1),
    inset 0 -1px 0 rgba(0, 0, 0, .35);
}

.app-download-banner.is-entering {
  animation: appBannerSlideDown .38s cubic-bezier(.22, 1, .36, 1) forwards;
}

.app-download-banner.is-leaving {
  animation: appBannerSlideUp .3s cubic-bezier(.55, 0, 1, .45) forwards;
}

/* decorative radial glow behind icon */
.app-download-banner__glow {
  position: absolute;
  left: -20px;
  top: 50%;
  transform: translateY(-50%);
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(168, 85, 247, .45) 0%, transparent 70%);
  pointer-events: none;
  animation: appBannerGlow 3s ease-in-out infinite;
}

/* decorative phone outline on the right */
.app-download-banner__phone {
  position: absolute;
  right: 180px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 60px;
  opacity: .25;
  pointer-events: none;
}

.app-download-banner__icon {
  position: relative;
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 13px;
  object-fit: cover;
  background: rgba(160, 60, 255, .2);
  border: 1px solid rgba(255, 255, 255, .28);
  transform: translateY(-1px);
  filter: saturate(1.12) contrast(1.06);
  box-shadow:
    0 0 0 1px rgba(160, 60, 255, .38),
    0 1px 0 rgba(255, 255, 255, .36) inset,
    0 -8px 12px rgba(255, 255, 255, .1) inset,
    0 8px 14px rgba(5, 2, 20, .62),
    0 14px 24px rgba(0, 0, 0, .46),
    0 0 18px rgba(151, 79, 255, .35);
}

.app-download-banner__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.app-download-banner__title {
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: .01em;
}

.app-download-banner__sub {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  font-size: 12px;
  font-weight: 600;
  color: rgba(210, 180, 255, .8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-download-banner__sub span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-download-banner__sub--compact {
  display: none;
}

.app-download-banner__reward {
  flex-shrink: 0;
  font-size: 1.08em;
  font-weight: 900;
  letter-spacing: .02em;
  background: linear-gradient(180deg, #fff6b0 0%, #ffd95a 30%, #ffb800 65%, #ff8a00 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 12px rgba(255, 194, 50, .28);
}

.app-download-banner__cta {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 18px;
  height: 40px;
  font-size: 13px;
  font-weight: 700;
  border-radius: 12px;
  background: linear-gradient(135deg, #c0392b, #8b0000);
  color: #fff;
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 14px rgba(160, 30, 30, .6);
  white-space: nowrap;
}

.app-download-banner__cta:hover {
  background: linear-gradient(135deg, #d44235, #a00000);
}

.app-download-banner__close {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: none;
  border: none;
  color: rgba(180, 150, 220, .7);
  cursor: pointer;
  padding: 0;
}

.app-download-banner__close:hover {
  color: #fff;
  background: rgba(255, 255, 255, .1);
}

@media (max-width: 680px) {
  .brand-filter-shell {
  }

  .brand-filter-shell--inline {
    scroll-margin-top: 154px;
  }

  .section--games.section--all {
    padding-top: 8px;
  }

  .app-download-banner {
    padding: var(--app-banner-safe-top) 12px 0 10px;
    gap: 10px;
  }

  .app-download-banner__icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
  }

  .app-download-banner__sub {
    font-size: 11px;
    gap: 3px;
  }

  .app-download-banner__cta {
    padding: 0 12px;
    height: 36px;
    font-size: 12px;
  }

  .app-download-banner__phone {
    right: 140px;
  }
}

@media (max-width: 400px) {
  .app-download-banner {
    gap: 8px;
    padding: var(--app-banner-safe-top) 10px 0 8px;
  }

  .app-download-banner__title {
    font-size: 13px;
  }

  .app-download-banner__sub {
    display: none;
  }

  .app-download-banner__sub--compact {
    display: flex;
    font-size: 10px;
    gap: 2px;
  }

  .app-download-banner__cta {
    padding: 0 10px;
    font-size: 11px;
  }

  .app-download-banner__phone {
    display: none;
  }
}

/* 鈹€鈹€ Promotions Modal 鈹€鈹€ */
.promo-modal__header {
  padding: 20px 24px 16px;
  background: linear-gradient(135deg, rgba(100, 30, 180, .18), rgba(40, 12, 80, .12));
  border-bottom: 1px solid rgba(160, 60, 255, .15);
  flex-shrink: 0;
}

.promo-modal__title {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: .06em;
  color: #e8d8ff;
  text-align: center;
}

.promo-modal__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.4) transparent;
}

.promo-modal__list::-webkit-scrollbar {
  width: 6px;
}

.promo-modal__list::-webkit-scrollbar-track {
  background: transparent;
}

.promo-modal__list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.4);
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  background-clip: padding-box;
}

.promo-modal__list::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.6);
}

/* 鈹€鈹€ Promo card 鈹€鈹€ full-width banner layout */
.promo-card {
  position: relative;
  border-radius: 16px;
  border: 1px solid rgba(140, 60, 240, .25);
  transition: border-color .18s;
}

.promo-card:hover {
  border-color: rgba(200, 100, 255, .4);
}

/* full-width banner container */
.promo-card__banner {
  position: relative;
  width: 100%;
  min-height: 170px;
  border-radius: 16px;
  overflow: hidden;
}


/* image placeholder 锟?replace src with <img> when real assets available */
/* Suggested image: full-width banner, 560脳160 px (2脳 = 1120脳320 px for retina) */
.promo-card__banner-ph {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(90, 20, 160, .7) 0%, rgba(180, 40, 220, .45) 50%, rgba(30, 10, 70, .85) 100%);
}

.promo-card__banner-img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
}

/* dark gradient overlay 锟?pure decoration, no content children */
.promo-card__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background: linear-gradient(to bottom, rgba(6, 2, 18, .08) 0%, rgba(6, 2, 18, .16) 30%, rgba(6, 2, 18, .58) 62%, rgba(4, 1, 14, .9) 82%, rgba(4, 1, 14, .98) 100%);
  pointer-events: none;
}

.promo-card__sticker {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}

.promo-card__sticker--first-deposit {
  top: 34px;
  left: 35%;
  transform: translateX(-50%) rotate(-11deg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 148px;
  min-height: 78px;
  padding: 8px 18px 10px;
  border-radius: 30px 22px 36px 20px;
  background: radial-gradient(circle at 24% 22%, rgba(255, 248, 196, .98) 0%, rgba(255, 248, 196, .98) 11%, rgba(255, 206, 72, .95) 28%, rgba(255, 153, 18, .93) 58%, rgba(196, 56, 12, .93) 100%);
  border: 3px solid rgba(93, 8, 18, .92);
  box-shadow: 0 18px 40px rgba(23, 3, 36, .46), 0 0 0 6px rgba(73, 9, 39, .24), inset 0 3px 0 rgba(255, 255, 255, .48);
}

.promo-card__sticker--first-deposit::before {
  content: "";
  position: absolute;
}

.promo-card__sticker--first-deposit::before {
  inset: -14px;
  z-index: -1;
  background: radial-gradient(circle, rgba(88, 8, 41, .56) 0%, rgba(88, 8, 41, .38) 48%, rgba(88, 8, 41, 0) 72%);
  filter: blur(4px);
}

.promo-card__sticker--first-deposit span {
  display: inline-block;
  font-family: "Arial Black", Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-size: clamp(32px, 5.8vw, 50px);
  line-height: .9;
  letter-spacing: -.07em;
  font-style: italic;
  color: #fff8d6;
  text-shadow: -2px -2px 0 #6d0f1b, 2px -2px 0 #6d0f1b, -2px 2px 0 #6d0f1b, 2px 2px 0 #6d0f1b, 0 6px 18px rgba(82, 8, 18, .55);
}

.promo-card__sticker--phone-bind {
  top: 34px;
  left: 43%;
  transform: translateX(-50%) rotate(-7deg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 108px;
  min-height: 56px;
  padding: 6px 14px 8px;
  border-radius: 20px 16px 22px 14px;
  background: linear-gradient(135deg, rgba(250, 247, 255, .96) 0%, rgba(231, 223, 255, .93) 44%, rgba(193, 156, 255, .92) 100%);
  border: 2px solid rgba(79, 32, 136, .88);
  box-shadow: 0 12px 28px rgba(15, 5, 34, .34), 0 0 0 5px rgba(98, 48, 172, .18), inset 0 1px 0 rgba(255, 255, 255, .7);
}

.promo-card__sticker--phone-bind::before {
  content: "";
  position: absolute;
  inset: -10px;
  z-index: -1;
  background: radial-gradient(circle, rgba(69, 28, 124, .38) 0%, rgba(69, 28, 124, .18) 54%, rgba(69, 28, 124, 0) 76%);
  filter: blur(4px);
}

.promo-card__sticker--phone-bind span {
  display: inline-block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(24px, 3.7vw, 34px);
  font-style: italic;
  font-weight: 900;
  line-height: .95;
  letter-spacing: -.04em;
  color: #ffffff;
  text-shadow: -1px -1px 0 #6d39b2, 1px -1px 0 #6d39b2, -1px 1px 0 #6d39b2, 1px 1px 0 #6d39b2, 0 4px 14px rgba(52, 22, 95, .38);
}

.promo-card__sticker--seven-day {
  top: 36px;
  left: 42%;
  transform: translateX(-50%) rotate(-4deg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 122px;
  min-height: 60px;
  padding: 6px 16px 8px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(36, 20, 8, .88) 0%, rgba(108, 62, 14, .92) 40%, rgba(206, 144, 36, .95) 100%);
  border: 2px solid rgba(255, 223, 145, .78);
  box-shadow: 0 12px 26px rgba(18, 10, 6, .34), inset 0 1px 0 rgba(255, 245, 214, .45);
}

.promo-card__sticker--seven-day::before {
  content: "";
  position: absolute;
  inset: -10px;
  z-index: -1;
  background: radial-gradient(circle, rgba(255, 196, 84, .34) 0%, rgba(255, 196, 84, .16) 58%, rgba(255, 196, 84, 0) 78%);
  filter: blur(5px);
}

.promo-card__sticker--seven-day span {
  display: inline-block;
  font-family: "Trebuchet MS", "Arial Black", sans-serif;
  font-size: clamp(24px, 3.9vw, 36px);
  font-weight: 900;
  line-height: .95;
  letter-spacing: -.03em;
  color: #fff4cf;
  text-shadow: -1px -1px 0 #6c3d0e, 1px -1px 0 #6c3d0e, -1px 1px 0 #6c3d0e, 1px 1px 0 #6c3d0e, 0 4px 12px rgba(76, 40, 3, .32);
}

.promo-card__sticker--daily-deposit {
  top: 38px;
  left: 40%;
  transform: translateX(-50%) rotate(-6deg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 118px;
  min-height: 58px;
  padding: 6px 16px 8px;
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(255, 114, 198, .96) 0%, rgba(255, 103, 145, .94) 34%, rgba(255, 168, 66, .96) 100%);
  border: 2px solid rgba(255, 237, 186, .82);
  box-shadow: 0 14px 28px rgba(40, 10, 48, .36), 0 0 0 5px rgba(255, 103, 170, .14), inset 0 1px 0 rgba(255, 255, 255, .55);
  border-radius: 18px;
}

.promo-card__sticker--daily-deposit::before {
  content: "";
  position: absolute;
  inset: -8px;
  z-index: -1;
  border-radius: 18px;
  background: radial-gradient(circle, rgba(255, 155, 87, .34) 0%, rgba(255, 82, 150, .18) 56%, rgba(255, 82, 150, 0) 78%);
  filter: blur(5px);
}

.promo-card__sticker--daily-deposit span {
  display: inline-block;
  font-family: "Arial Black", Impact, sans-serif;
  font-size: clamp(24px, 4vw, 38px);
  font-style: italic;
  line-height: .92;
  letter-spacing: -.05em;
  color: #fff9ef;
  text-shadow: -1px -1px 0 rgba(128, 28, 58, .92), 1px -1px 0 rgba(128, 28, 58, .92), -1px 1px 0 rgba(128, 28, 58, .92), 1px 1px 0 rgba(128, 28, 58, .92), 0 5px 12px rgba(115, 24, 62, .28);
}

.promo-card__sticker--newbie-pack {
  top: 34px;
  left: 40%;
  transform: translateX(-50%) rotate(-10deg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 94px;
  min-height: 94px;
  padding: 8px;
  border-radius: 999px;
  background: radial-gradient(circle at 32% 28%, rgba(255, 251, 216, .98) 0%, rgba(255, 219, 112, .96) 30%, rgba(255, 155, 30, .94) 62%, rgba(186, 68, 10, .94) 100%);
  border: 3px solid rgba(103, 31, 4, .88);
  box-shadow: 0 16px 30px rgba(25, 8, 32, .34), 0 0 0 7px rgba(255, 171, 38, .14), inset 0 2px 0 rgba(255, 255, 255, .52);
}

.promo-card__sticker--newbie-pack::before {
  content: "";
  position: absolute;
  inset: -10px;
  z-index: -1;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 197, 69, .34) 0%, rgba(255, 197, 69, .16) 58%, rgba(255, 197, 69, 0) 78%);
  filter: blur(6px);
}

.promo-card__sticker--newbie-pack span {
  display: inline-block;
  font-family: "Arial Black", Impact, sans-serif;
  font-size: clamp(22px, 3.6vw, 34px);
  line-height: .92;
  letter-spacing: -.05em;
  color: #fff9ea;
  text-shadow: -1px -1px 0 #7f2f08, 1px -1px 0 #7f2f08, -1px 1px 0 #7f2f08, 1px 1px 0 #7f2f08, 0 4px 10px rgba(115, 46, 6, .28);
}

.promo-card__sticker--download {
  top: 38px;
  left: 44%;
  transform: translateX(-50%) rotate(7deg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 102px;
  min-height: 52px;
  padding: 5px 14px 7px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(26, 204, 173, .96) 0%, rgba(15, 159, 203, .95) 54%, rgba(70, 101, 255, .96) 100%);
  border: 2px solid rgba(216, 250, 255, .82);
  box-shadow: 0 14px 28px rgba(9, 30, 72, .34), 0 0 0 5px rgba(33, 206, 204, .12), inset 0 1px 0 rgba(255, 255, 255, .58);
}

.promo-card__sticker--download::before {
  content: "";
  position: absolute;
  inset: -9px;
  z-index: -1;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(72, 212, 255, .28) 0%, rgba(72, 212, 255, .12) 58%, rgba(72, 212, 255, 0) 80%);
  filter: blur(5px);
}

.promo-card__sticker--download span {
  display: inline-block;
  font-family: "Trebuchet MS", "Arial Black", sans-serif;
  font-size: clamp(22px, 3.4vw, 30px);
  font-weight: 900;
  line-height: .94;
  letter-spacing: -.04em;
  color: #f4ffff;
  text-shadow: -1px -1px 0 rgba(12, 86, 142, .92), 1px -1px 0 rgba(12, 86, 142, .92), -1px 1px 0 rgba(12, 86, 142, .92), 1px 1px 0 rgba(12, 86, 142, .92), 0 4px 10px rgba(12, 86, 142, .22);
}

.promo-card__sticker--register {
  top: 36px;
  left: 42%;
  transform: translateX(-50%) rotate(-4deg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 112px;
  min-height: 56px;
  padding: 6px 14px 8px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(40, 17, 48, .94) 0%, rgba(92, 44, 134, .96) 60%, rgba(177, 93, 255, .95) 100%);
  border: 2px solid rgba(255, 224, 252, .68);
  box-shadow: 0 12px 26px rgba(20, 7, 34, .34), 0 0 0 5px rgba(171, 106, 255, .12), inset 0 1px 0 rgba(255, 255, 255, .28);
}

.promo-card__sticker--register::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px dashed rgba(255, 229, 250, .38);
  border-radius: 10px;
}

.promo-card__sticker--register span {
  display: inline-block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(24px, 3.5vw, 32px);
  font-style: italic;
  font-weight: 700;
  line-height: .94;
  letter-spacing: -.04em;
  color: #fff6ff;
  text-shadow: -1px -1px 0 rgba(81, 29, 123, .94), 1px -1px 0 rgba(81, 29, 123, .94), -1px 1px 0 rgba(81, 29, 123, .94), 1px 1px 0 rgba(81, 29, 123, .94), 0 4px 10px rgba(52, 18, 79, .24);
}

.promo-card__sticker--invite {
  top: 36px;
  left: 42%;
  transform: translateX(-50%) rotate(5deg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 116px;
  min-height: 58px;
  padding: 6px 15px 8px;
  border-radius: 20px 14px 20px 14px;
  background: linear-gradient(135deg, rgba(14, 49, 71, .96) 0%, rgba(30, 109, 145, .96) 38%, rgba(51, 192, 164, .95) 100%);
  border: 2px solid rgba(219, 255, 246, .76);
  box-shadow: 0 14px 28px rgba(8, 24, 38, .34), 0 0 0 5px rgba(50, 196, 166, .12), inset 0 1px 0 rgba(255, 255, 255, .34);
}

.promo-card__sticker--invite::before {
  content: "";
  position: absolute;
  inset: -8px;
  z-index: -1;
  border-radius: 24px;
  background: radial-gradient(circle, rgba(56, 224, 195, .28) 0%, rgba(56, 224, 195, .12) 58%, rgba(56, 224, 195, 0) 80%);
  filter: blur(5px);
}

.promo-card__sticker--invite span {
  display: inline-block;
  font-family: "Trebuchet MS", "Arial Black", sans-serif;
  font-size: clamp(24px, 3.7vw, 34px);
  font-weight: 900;
  line-height: .94;
  letter-spacing: -.04em;
  color: #f1ffff;
  text-shadow: -1px -1px 0 rgba(12, 73, 92, .94), 1px -1px 0 rgba(12, 73, 92, .94), -1px 1px 0 rgba(12, 73, 92, .94), 1px 1px 0 rgba(12, 73, 92, .94), 0 4px 10px rgba(12, 73, 92, .24);
}

/* content section 锟?normal flow below the banner */
.promo-card__body {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 56px 16px 14px;
}

.promo-card__title {
  font-size: 13px;
  font-weight: 800;
  color: #f0e6ff;
  letter-spacing: .02em;
  line-height: 1.25;
  margin-bottom: 3px;
}

.promo-card__copy {
  flex: 1;
  min-width: 0;
}

.promo-card__desc {
  font-size: 11.5px;
  color: rgba(230, 220, 255, .82);
  line-height: 1.38;
}

.promo-card__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
  min-height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff4bf 0%, #ffe27a 24%, #ffc933 56%, #f59e0b 100%);
  color: #5a2c00;
  font-size: 12px;
  font-weight: 900;
  border: 1px solid rgba(255, 226, 122, .85);
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(245, 158, 11, .26), inset 0 1px 0 rgba(255, 255, 255, .62);
  transition: transform .12s, box-shadow .18s, filter .18s;
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space: nowrap;
}

.promo-card__btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(245, 158, 11, .34), inset 0 1px 0 rgba(255, 255, 255, .7);
  filter: saturate(1.08);
}

/* completed state */
.promo-card--done {
  opacity: .55;
  filter: saturate(.35);
}

.promo-card--done:hover {
  border-color: rgba(140, 60, 240, .25);
}

.promo-card__status-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .05em;
  z-index: 3;
  backdrop-filter: blur(6px);
}

.promo-card__status-badge--done {
  background: rgba(22, 163, 74, .88);
  color: #d1fae5;
}

.promo-card__status-badge--pending {
  background: rgba(72, 56, 160, .78);
  border: 1px solid rgba(206, 190, 255, .34);
  color: #f6f0ff;
  box-shadow: 0 10px 20px rgba(18, 10, 48, .28), inset 0 1px 0 rgba(255, 255, 255, .18);
}

@media (max-width: 520px) {
  .promo-card__banner {
    min-height: 156px;
  }

  .promo-card__sticker--first-deposit {
    top: 38px;
    left: 38%;
    min-width: 126px;
    min-height: 68px;
    padding: 6px 14px 8px;
  }

  .promo-card__sticker--phone-bind {
    top: 38px;
    left: 44%;
    min-width: 94px;
    min-height: 50px;
    padding: 5px 11px 7px;
  }

  .promo-card__sticker--seven-day {
    top: 42px;
    left: 44%;
    min-width: 108px;
    min-height: 54px;
    padding: 5px 13px 7px;
  }

  .promo-card__sticker--daily-deposit {
    top: 42px;
    left: 42%;
    min-width: 102px;
    min-height: 52px;
    padding: 5px 13px 7px;
  }

  .promo-card__sticker--newbie-pack {
    top: 38px;
    left: 42%;
    min-width: 80px;
    min-height: 80px;
  }

  .promo-card__sticker--download {
    top: 42px;
    left: 46%;
    min-width: 90px;
    min-height: 46px;
    padding: 5px 12px 6px;
  }

  .promo-card__sticker--register {
    top: 40px;
    left: 44%;
    min-width: 98px;
    min-height: 50px;
    padding: 5px 12px 7px;
  }

  .promo-card__sticker--invite {
    top: 40px;
    left: 44%;
    min-width: 100px;
    min-height: 50px;
    padding: 5px 12px 7px;
  }

  .promo-card__body {
    padding: 50px 14px 12px;
    gap: 10px;
  }

  .promo-card__desc {
    font-size: 11px;
    line-height: 1.35;
  }

  .promo-card__btn {
    min-height: 36px;
    padding: 0 15px;
    font-size: 11px;
  }

.promo-modal__list {
    padding: 12px;
    gap: 10px;
  }
}

.pwa-guide-dialog,
.pwa-pc-guide-dialog,
.pwa-ios-guide-dialog {
  overflow: hidden;
  padding: 0;
}

.pwa-guide-dialog__hero {
  margin: 0;
}

.pwa-guide-dialog__hero-media {
  position: relative;
  margin: 0;
  min-height: 168px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  background: linear-gradient(120deg, rgba(122, 49, 255, 0.42), rgba(253, 142, 43, 0.33));
  overflow: hidden;
}

.pwa-guide-dialog__hero-ph {
  min-height: 168px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 238, 198, 0.95);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.06em;
}

.pwa-guide-dialog__hero-img {
  width: 100%;
  min-height: 168px;
  display: block;
  object-fit: cover;
}

.pwa-guide-dialog__hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 28%, rgba(0, 0, 0, 0.7) 100%);
  pointer-events: none;
}

.pwa-guide-dialog__hero-eyebrow {
  color: #ffd46b;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pwa-guide-dialog__hero-eyebrow-wrap {
  position: absolute;
  left: 16px;
  bottom: 12px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.pwa-guide-dialog__hero-reward-tag {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  color: #fff7dc;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
  border: 1px solid rgba(255, 216, 120, 0.88);
  background: linear-gradient(180deg, #ffb941 0%, #ff8c10 100%);
  box-shadow: 0 8px 18px rgba(255, 136, 20, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.pwa-pc-guide-dialog__hero-title,
.pwa-ios-guide-dialog__hero-title {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 28px;
  z-index: 2;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.2;
}

.pwa-pc-guide-dialog__hero-title {
  background: linear-gradient(180deg, #fff8c9 0%, #ffd24d 32%, #ffb100 62%, #ffdf7f 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 2px 6px rgba(255, 153, 0, 0.35));
}

.pwa-ios-guide-dialog__hero-title {
  color: #fff6df;
}

.pwa-guide-dialog__body {
  padding: 16px 16px 18px;
}

.pwa-guide-dialog__header-copy .modal-title {
  margin-top: 2px;
  color: #fff6df;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.2;
}

.pwa-guide-dialog__title-amount {
  background: linear-gradient(180deg, #fff6cb 0%, #ffd35e 28%, #ffaf1b 58%, #fff0a3 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 10px rgba(255, 183, 47, 0.42));
}

.pwa-guide-dialog__header-copy .modal-desc {
  margin-top: 10px;
  color: rgba(244, 235, 255, 0.88);
  font-size: 14px;
  line-height: 1.5;
}

.pwa-guide-dialog__actions {
  margin-top: 14px;
}

.pwa-guide-backdrop .login-modal__secondary {
  padding-left: 18px;
  padding-right: 18px;
}

.pwa-guide-dialog__cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 180px;
  padding-left: 20px;
  padding-right: 20px;
  justify-content: center;
  line-height: 1;
}

.pwa-guide-dialog__cta-btn > span {
  display: inline-flex;
  align-items: center;
}

.pwa-guide-dialog__cta-icon {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-1px);
}

.pwa-guide-dialog__cta-icon svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: block;
}

.pwa-guide-backdrop .login-modal__close svg {
  width: 24px !important;
  height: 24px !important;
  flex-shrink: 0;
  display: block;
}

@supports (-webkit-touch-callout: none) {
  .pwa-guide-backdrop .login-modal__close svg {
    width: 26px !important;
    height: 26px !important;
  }

  .pwa-guide-backdrop .pwa-guide-dialog__cta-icon svg {
    width: 21px;
    height: 21px;
    stroke-width: 2.1;
  }
}

.pwa-pc-guide-dialog__hero,
.pwa-ios-guide-dialog__hero {
  margin: 0;
}

.pwa-pc-guide-dialog__hero-title-backdrop {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 88px;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(4, 2, 14, 0.86) 64%, rgba(4, 2, 14, 0.98) 100%);
  pointer-events: none;
}

.pwa-pc-guide-dialog__hero-eyebrow-wrap {
  position: absolute;
  left: 14px;
  top: 12px;
  z-index: 2;
}

.pwa-pc-guide-dialog__hero-eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  color: #fff8de;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid rgba(255, 220, 138, 0.88);
  background: linear-gradient(180deg, rgba(255, 185, 65, 0.98) 0%, rgba(255, 138, 22, 0.98) 100%);
  box-shadow: 0 6px 14px rgba(255, 136, 20, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.44);
}

.pwa-pc-guide-dialog__body {
  padding: 14px 16px 20px;
  text-align: center;
}

.pwa-pc-guide-dialog__header-copy .modal-desc {
  margin-top: 0;
  color: rgba(244, 235, 255, 0.86);
  font-size: 14px;
  line-height: 1.45;
}

.pwa-pc-guide-dialog__qr {
  margin: 14px auto 0;
  width: min(320px, 100%);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  padding: 14px;
  background: rgba(255, 255, 255, 0.04);
}

.pwa-pc-guide-dialog__qr-ph {
  aspect-ratio: 1/1;
  border-radius: 10px;
  border: 1px dashed rgba(255, 255, 255, 0.26);
  color: rgba(255, 238, 198, 0.92);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pwa-pc-guide-dialog__qr-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  display: block;
  border-radius: 10px;
  background: #fff;
}

.pwa-pc-guide-dialog__hint {
  margin-top: 10px;
  color: rgba(220, 197, 255, 0.88);
  font-size: 12px;
}

.pwa-ios-guide-dialog__body {
  padding: 14px 14px 16px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.4) transparent;
}

.pwa-ios-guide-dialog__body::-webkit-scrollbar {
  width: 6px;
  display: block !important;
}

.pwa-ios-guide-dialog__body::-webkit-scrollbar-track {
  background: transparent;
}

.pwa-ios-guide-dialog__body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.4);
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  background-clip: padding-box;
}

.pwa-ios-guide-dialog__body::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.6);
}

.pwa-ios-guide-dialog__header {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pwa-ios-guide-dialog__tag {
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 212, 107, 0.35);
  background: rgba(255, 212, 107, 0.12);
  color: #ffd46b;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pwa-ios-guide-dialog__title {
  color: #fff6df;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: 0;
}

.pwa-ios-guide-dialog__steps {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pwa-ios-guide-dialog__step {
  display: block;
}

.pwa-ios-guide-dialog__num {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #ffe07e, #f0a825);
  color: #4a2300;
  font-weight: 900;
  flex: 0 0 30px;
}

.pwa-ios-guide-dialog__content {
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.04);
  padding: 8px;
}

.pwa-ios-guide-dialog__step-media {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pwa-ios-guide-dialog__step-media--left {
  flex-direction: row;
}

.pwa-ios-guide-dialog__step-media--right {
  flex-direction: row;
}

.pwa-ios-guide-dialog__step-copy {
  flex: 0 0 34%;
}

.pwa-ios-guide-dialog__step-heading {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.pwa-ios-guide-dialog__label {
  color: #fff6df;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.28;
  flex: 1 1 auto;
  padding-top: 1px;
}

.pwa-ios-guide-dialog__step-img {
  display: block;
  max-width: 360px;
  width: 60%;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
  flex: 0 0 auto;
}

.pwa-ios-guide-dialog__actions {
  margin-top: 10px;
  justify-content: center;
}

.pwa-ios-guide-dialog__gotit {
  min-width: 168px;
  min-height: 44px;
  padding: 0 20px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0;
}

@media (max-width: 768px) {
  .pwa-ios-guide-dialog__tag {
    font-size: 10px;
  }

  .pwa-ios-guide-dialog__title {
    font-size: 17px;
  }

  .pwa-ios-guide-dialog__step-media--left,
  .pwa-ios-guide-dialog__step-media--right {
    flex-direction: column;
    align-items: stretch;
  }

  .pwa-ios-guide-dialog__step-copy {
    flex: 1 1 auto;
    width: 100%;
  }

  .pwa-ios-guide-dialog__label {
    flex: 1 1 auto;
    font-size: 14px;
  }

  .pwa-ios-guide-dialog__gotit {
    min-width: 152px;
    min-height: 42px;
    font-size: 15px;
  }

  .pwa-ios-guide-dialog__step-img {
    width: 100%;
    max-width: none;
  }
}

@media (max-width: 768px) {
  .pwa-guide-dialog__header-copy .modal-title,
  .pwa-pc-guide-dialog__hero-title {
    font-size: 19px;
  }
}

/* 鈹€鈹€ Redemption Code Dialog 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ */
.rd-dialog {
  position: relative;
  grid-area: dialog;
  align-self: center;
  justify-self: center;
  width: min(92vw, 360px);
  border-radius: 20px;
  background: linear-gradient(180deg, #2e1268 0%, #1a0840 100%);
  box-shadow: 0 24px 64px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .07);
  overflow: hidden;
  padding: 0 0 20px;
}

.rd-dialog__close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
}

.rd-dialog__header {
  text-align: center;
  padding: 28px 20px 16px;
}

.rd-dialog__icon-wrap {
  font-size: 36px;
  line-height: 1;
  margin-bottom: 10px;
}

.rd-dialog__title {
  margin: 0 0 6px;
  font-size: 19px;
  font-weight: 800;
  color: #fff;
  letter-spacing: .01em;
}

.rd-dialog__desc {
  margin: 0;
  font-size: 13px;
  color: #b09fd4;
  line-height: 1.45;
}

.rd-dialog__body {
  padding: 0 16px;
}

.rd-dialog__input {
  width: 100%;
  box-sizing: border-box;
  height: 48px;
  border-radius: 12px;
  border: 1.5px solid rgba(180, 130, 255, .3);
  background: rgba(10, 2, 30, .55);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 3px;
  text-align: center;
  text-transform: uppercase;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
  margin-bottom: 12px;
}

.rd-dialog__input:focus {
  border-color: rgba(200, 160, 255, .6);
  box-shadow: 0 0 0 3px rgba(168, 85, 247, .18);
}

.rd-dialog__input::placeholder {
  color: rgba(180, 150, 220, .45);
  letter-spacing: 2px;
  font-weight: 400;
}

.rd-dialog__input:disabled {
  opacity: .6;
}

/* 2脳5 numpad grid + backspace in last cell */
.rd-dialog__numpad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}

.rd-dialog__numpad-btn {
  height: 44px;
  border-radius: 10px;
  border: 1.5px solid rgba(160, 110, 240, .22);
  background: rgba(60, 20, 110, .55);
  color: #e2d4f8;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .12s ease, transform .1s ease, border-color .12s ease;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.rd-dialog__numpad-btn:active:not(:disabled) {
  background: rgba(120, 60, 220, .65);
  transform: scale(.93);
  border-color: rgba(200, 150, 255, .4);
}

.rd-dialog__numpad-btn--back {
  font-size: 18px;
  color: #f0a0a0;
  border-color: rgba(240, 80, 80, .2);
  background: rgba(80, 20, 40, .5);
}

.rd-dialog__numpad-btn--back:active:not(:disabled) {
  background: rgba(160, 40, 60, .55);
}

.rd-dialog__numpad-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
}

/* Yellow gradient CTA 锟?matches reward-claim style */
.rd-dialog__cta {
  width: 100%;
  height: 50px;
  border: 0;
  border-radius: 13px;
  background: linear-gradient(180deg, #ffbd56, #ff8419);
  color: #fff8f0;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .04em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 10px 28px rgba(255, 136, 20, .32), inset 0 2px 0 rgba(255, 244, 210, .4);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
  -webkit-tap-highlight-color: transparent;
}

.rd-dialog__cta:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 14px 32px rgba(255, 136, 20, .38), inset 0 2px 0 rgba(255, 244, 210, .5);
}

.rd-dialog__cta:active:not(:disabled) {
  transform: translateY(1px) scale(.98);
  box-shadow: 0 6px 16px rgba(255, 136, 20, .24);
}

.rd-dialog__cta--disabled {
  background: rgba(60, 30, 100, .7);
  color: #6b5a90;
  box-shadow: none;
  cursor: not-allowed;
}

.rd-dialog__cta--loading {
  background: rgba(60, 30, 100, .7);
  box-shadow: none;
  cursor: not-allowed;
}

@media (max-width: 360px) {
  .rd-dialog {
    width: 96vw;
    border-radius: 16px;
  }

  .rd-dialog__numpad-btn {
    height: 40px;
    font-size: 16px;
  }

  .rd-dialog__input {
    height: 44px;
    font-size: 16px;
  }
}




@media (max-width: 680px) {
  .withdraw-apply__bank-inline {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .withdraw-apply__bank-account {
    padding-left: 0;
    padding-top: 10px;
    border-left: 0;
    border-top: 1px solid rgba(171, 122, 255, .12);
  }

  .withdraw-apply__bank-btn {
    width: auto;
    justify-self: start;
  }

}

/* ================================================================
   VIP Center
   ================================================================ */

.vip-center-overlay {
  --vc-space-1: var(--space-1);
  --vc-space-2: var(--space-2);
  --vc-space-3: var(--space-3);
  --vc-space-4: var(--space-4);
  --vc-space-5: var(--space-5);
  --vc-space-6: var(--space-6);
  --vc-radius-sm: var(--radius-sm);
  --vc-radius-md: var(--radius-md);
  --vc-radius-lg: var(--radius-lg);
  --vc-radius-xl: var(--radius-xl);
  --vc-radius-pill: var(--radius-pill);
  --vc-text-main: var(--text-primary);
  --vc-text-sub: var(--text-secondary);
  --vc-text-muted: var(--text-tertiary);
  --vc-text-accent: var(--text-money);
  --vc-border-subtle: var(--border-subtle);
  --vc-border-default: var(--border-default);
  --vc-border-strong: var(--border-strong);
  --vc-surface-base: color-mix(in srgb, var(--surface-base) 84%, var(--surface-overlay));
  --vc-surface-card: color-mix(in srgb, var(--surface-overlay) 90%, var(--surface-raised));
  --vc-surface-card-soft: color-mix(in srgb, var(--surface-overlay) 74%, transparent);
  --vc-surface-chip: color-mix(in srgb, var(--neutral-0) 12%, transparent);
  --vc-surface-accent: color-mix(in srgb, var(--surface-brand-soft) 54%, var(--surface-overlay));
  --vc-shadow-soft: var(--elevation-2);
  position: fixed;
  inset: 0;
  z-index: 18;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-overlay) 92%, var(--neutral-950)) 0%, color-mix(in srgb, var(--surface-base) 90%, var(--neutral-950)) 100%);
  color: var(--vc-text-main);
  overflow: hidden;
}

@media (max-width: 900px) {
  .vip-center-overlay {
    z-index: 80;
  }
}

/* Header */
.vc-header {
  display: flex;
  align-items: center;
  gap: var(--vc-space-3);
  padding: var(--vc-space-3) calc(var(--vc-space-4) + var(--vc-space-1));
  padding-top: calc(var(--vc-space-3) + env(safe-area-inset-top, 0px));
  background: color-mix(in srgb, var(--surface-overlay) 92%, transparent);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--vc-border-default);
  flex-shrink: 0;
}

.vc-header__back {
  width: calc(var(--vc-space-6) + var(--vc-space-2));
  height: calc(var(--vc-space-6) + var(--vc-space-2));
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--neutral-0) 7%, transparent);
  border: 1px solid var(--vc-border-default);
  border-radius: var(--vc-radius-sm);
  color: var(--vc-text-main);
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s;
}

.vc-header__back:active {
  background: var(--state-pressed);
}

.vc-header__title {
  flex: 1;
  text-align: center;
  font-size: var(--fs-heading-sm);
  font-weight: var(--fw-black);
  color: var(--vc-text-main);
  letter-spacing: 0.01em;
}

.vc-header__spacer {
  width: calc(var(--vc-space-6) + var(--vc-space-2));
  flex-shrink: 0;
}

/* Scrollable body */
.vc-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.4) transparent;
  padding-bottom: calc(var(--vc-space-8, 32px) + var(--vc-space-1) + env(safe-area-inset-bottom, 0px));
}

.vc-body::-webkit-scrollbar {
  width: 6px;
  display: block;
}

.vc-body::-webkit-scrollbar-track {
  background: transparent;
}

.vc-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.4);
  border-radius: 3px;
  border: 1px solid color-mix(in srgb, var(--neutral-950) 22%, transparent);
  background-clip: padding-box;
}

.vc-body::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.6);
}

/* Progress */
.vc-progress-wrap {
  margin: 0 var(--vc-space-3);
  margin-top: -6px;
  padding: var(--vc-space-4);
  background: var(--vc-surface-card-soft);
  border-radius: var(--vc-radius-md);
  border: 1px solid var(--vc-border-default);
  position: relative;
  z-index: 1;
}

.vc-progress-labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  gap: 8px;
}

.vc-progress-labels > span:first-child {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-bold);
  color: var(--vc-text-main);
}

.vc-progress-exp {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 800;
  white-space: nowrap;
}

.vc-progress-exp__current {
  color: rgba(255, 255, 255, .9);
  font-size: 12px;
}

.vc-progress-exp__slash {
  color: rgba(255, 255, 255, .42);
  font-size: 12px;
  font-weight: 700;
}

.vc-progress-exp__target {
  padding: var(--vc-space-1) calc(var(--vc-space-2) + 1px);
  border: 1px solid rgba(255, 217, 90, .35);
  border-radius: var(--vc-radius-pill);
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 245, 170, .18), transparent 34%),
    rgba(255, 217, 90, .1);
  color: var(--vc-text-accent);
  font-size: var(--fs-body-sm);
  line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

.vc-progress-track {
  height: 9px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 99px;
  overflow: visible;
  position: relative;
}

.vc-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #7c3aed 0%, #ffd95a 100%);
  border-radius: 99px;
  position: relative;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  min-width: 9px;
}

.vc-progress-fill::after {
  content: '';
  position: absolute;
  right: -5px;
  top: 50%;
  transform: translateY(-50%);
  width: 13px;
  height: 13px;
  background: #ffd95a;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(255, 217, 90, 0.9);
  border: 2px solid #090320;
}

.vc-progress-note {
  margin-top: var(--vc-space-2);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-bold);
  color: var(--vc-text-muted);
  text-align: center;
}

.vc-progress-note strong {
  color: var(--vc-text-accent);
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-black);
  margin: 0 var(--vc-space-1);
  text-shadow: 0 0 12px rgba(255, 217, 90, .28);
}

.vc-progress-wrap--locked {
  overflow: hidden;
}

.vc-progress-wrap--locked .vc-progress-labels,
.vc-progress-wrap--locked .vc-progress-track,
.vc-progress-wrap--locked .vc-progress-note {
  opacity: 0.48;
}

.vc-progress-lock-layer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(5, 18, 36, 0.08), rgba(5, 18, 36, 0.18));
  backdrop-filter: blur(0.6px);
  -webkit-backdrop-filter: blur(0.6px);
  pointer-events: none;
}

.vc-progress-lock-layer__icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--vc-radius-md);
  border: 1px solid rgba(255, 217, 90, 0.34);
  background: linear-gradient(145deg, rgba(255, 217, 90, 0.28), rgba(109, 40, 217, 0.16));
  color: var(--vc-text-accent);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.32), 0 0 18px rgba(255, 217, 90, 0.14);
}

.vc-progress-lock-layer__icon .vc-icon--hero {
  font-size: 26px;
}

/* Sections */
.vc-section {
  padding: calc(var(--vc-space-5) + 2px) var(--vc-space-3) 0;
}

.vc-section--rules {
  padding-bottom: 8px;
}

.vc-section--cash .home-vip-daily-cash + .home-vip-daily-cash {
  margin-top: var(--vc-space-2);
}

.vc-section-title {
  font-size: var(--fs-body-md);
  font-weight: var(--fw-black);
  color: var(--vc-text-main);
  margin: 0 0 var(--vc-space-3) 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.vc-section-title::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 15px;
  background: linear-gradient(180deg, #a855f7, #ffd95a);
  border-radius: 2px;
  flex-shrink: 0;
}

/* How to earn EXP */
.vc-earn-rules {
  display: flex;
  flex-direction: column;
  gap: var(--vc-space-2);
}

.vc-earn-rule {
  display: flex;
  align-items: flex-start;
  gap: var(--vc-space-2);
  padding: calc(var(--vc-space-2) + 3px) var(--vc-space-3);
  background: var(--vc-surface-card-soft);
  border-radius: var(--vc-radius-sm);
  font-size: var(--fs-body-sm);
  color: var(--vc-text-sub);
  line-height: 1.5;
}

.vc-earn-rule--note {
  border: 1px dashed var(--vc-border-default);
  background: color-mix(in srgb, var(--surface-brand-soft) 24%, transparent);
  color: var(--vc-text-muted);
  font-size: 12px;
}

.vc-earn-rule__icon {
  flex-shrink: 0;
  width: calc(var(--vc-space-5) + 1px);
  height: calc(var(--vc-space-5) + 1px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--surface-brand-soft) 36%, transparent);
  border-radius: var(--vc-radius-sm);
  color: var(--icon-brand);
  margin-top: 1px;
}

/* VIP rules list */
.vc-rules {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--vc-space-2);
  counter-reset: vc-rule;
}

.vc-rules li {
  display: flex;
  align-items: flex-start;
  gap: var(--vc-space-2);
  padding: var(--vc-space-2) var(--vc-space-3);
  background: var(--vc-surface-card-soft);
  border-radius: var(--vc-radius-sm);
  font-size: 12.5px;
  color: var(--vc-text-sub);
  line-height: 1.55;
  counter-increment: vc-rule;
}

.vc-rules li::before {
  content: counter(vc-rule);
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background: color-mix(in srgb, var(--surface-brand-soft) 36%, transparent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  color: var(--icon-brand);
  margin-top: 1px;
}

/* Loading state */
.vc-loading {
  display: flex;
  justify-content: center;
  padding: 40px;
}

.vc-loading--vip-center {
  align-items: center;
  min-height: min(420px, calc(100vh - 96px));
}

.vc-body--loading {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
}

.reward-pool__body--loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}

/* Zero-width progress fill (no glow dot) */
.vc-progress-fill--zero {
  width: 0 !important;
  min-width: 0 !important;
}

.vc-progress-fill--zero::after {
  display: none;
}

/* Unlock card */
/* Shared between VIP Center and Reward Pool — uses global tokens, not --vc-* */
.vc-unlock-card {
  margin: var(--space-3) var(--space-3) 0;
  padding: calc(var(--space-4) + 2px);
  background: linear-gradient(135deg, rgba(109, 40, 217, 0.18) 0%, rgba(255, 217, 90, 0.1) 100%);
  border: 1.5px solid rgba(255, 217, 90, 0.38);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 24px rgba(255, 217, 90, 0.06);
}

.vc-unlock-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.vc-unlock-card__icon {
  width: calc(var(--space-6) + var(--space-5));
  height: calc(var(--space-6) + var(--space-5));
  background: rgba(255, 217, 90, 0.15);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-money);
  flex-shrink: 0;
}

.vc-unlock-card__title {
  display: block;
  font-size: var(--fs-body-md);
  font-weight: var(--fw-black);
  color: var(--text-money);
}

.vc-unlock-card__desc {
  margin: 0 0 14px;
  font-size: var(--fs-body-sm);
  color: var(--text-secondary);
  line-height: 1.55;
}

.vc-unlock-btn {
  display: block;
  width: 100%;
  padding: var(--space-3);
  background: linear-gradient(135deg, #f59e0b 0%, #ffd95a 100%);
  border-radius: var(--radius-md);
  color: #1a0c00;
  font-size: var(--fs-body-md);
  font-weight: var(--fw-black);
  letter-spacing: 0.03em;
  cursor: pointer;
  border: none;
  transition: transform 0.15s, opacity 0.15s;
  box-shadow: 0 4px 20px rgba(245, 158, 11, 0.4);
}

.vc-unlock-btn:active {
  transform: scale(0.97);
  opacity: 0.92;
}

.vc-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.vc-icon--back { font-size: var(--fs-heading-sm); }
.vc-icon--hero { font-size: 80px; }
.vc-icon--unlock { font-size: var(--fs-heading-md); }

@media (min-width: 901px) {
  .vip-center-overlay {
    background:
      radial-gradient(circle at 18% 0%, rgba(255, 217, 90, 0.08), transparent 30%),
      radial-gradient(circle at 78% 14%, rgba(168, 85, 247, 0.16), transparent 34%),
      linear-gradient(180deg, #120735 0%, #08021f 100%);
  }

  .vc-header {
    min-height: 78px;
    padding: var(--space-4) calc(var(--space-6) + var(--space-1));
    background: rgba(8, 2, 28, 0.88);
  }

  .vc-header__back,
  .vc-header__spacer {
    width: 44px;
    height: 44px;
  }

  .vc-header__back {
    border-radius: var(--radius-md);
  }

  .vc-header__back:hover {
    background: rgba(255, 255, 255, 0.12);
  }

  .vc-header__title {
    font-size: var(--fs-heading-lg);
  }

  .vc-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
    align-content: start;
    align-items: start;
    gap: var(--space-5);
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: var(--space-6) calc(var(--space-6) + var(--space-1)) calc(var(--space-12) - var(--space-2));
  }

  .vc-loading {
    grid-column: 1 / -1;
  }

  .vc-progress-wrap,
  .vc-unlock-card,
  .vc-section {
    margin: 0;
  }

  .vc-progress-wrap,
  .vc-unlock-card,
  .vc-section {
    padding: calc(var(--space-5) + 2px) var(--space-6);
    border-radius: var(--radius-lg);
    background:
      linear-gradient(135deg, rgba(124, 58, 237, 0.13), rgba(255, 217, 90, 0.035)),
      rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(160, 80, 255, 0.18);
  }

  .vc-progress-wrap,
  .vc-unlock-card,
  .vc-section--benefits,
  .vc-section--earn {
    grid-column: 1;
  }

  .vc-section--rules {
    grid-column: 1;
    grid-row: auto;
    padding-bottom: 22px;
  }

  .vc-rules {
    display: flex;
    flex-direction: column;
  }

  .vc-section-title {
    font-size: var(--fs-heading-sm);
    margin-bottom: var(--space-4);
  }

  .vc-progress-labels {
    margin-bottom: 14px;
  }

  .vc-progress-labels > span:first-child,
  .vc-progress-exp {
    font-size: 15px;
  }

  .vc-progress-note {
    margin-top: 12px;
    font-size: 13px;
  }

  .vc-unlock-card__header {
    gap: var(--space-4);
    margin-bottom: var(--space-4);
  }

  .vc-unlock-card__icon {
    width: 52px;
    height: 52px;
  }

  .vc-unlock-card__title {
    font-size: 19px;
  }

  .vc-unlock-card__desc {
    font-size: 15px;
    max-width: 760px;
    margin-bottom: var(--space-5);
  }

  .vc-unlock-btn {
    max-width: 520px;
    padding: calc(var(--space-3) + 3px) var(--space-4);
    font-size: 15px;
  }

  .vc-earn-rules {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }

  .vc-earn-rule {
    min-height: 96px;
    padding: 14px;
    border-radius: 12px;
  }

  .vc-rules {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .vc-rules li {
    min-height: 0;
    padding: 12px 14px;
    border-radius: 12px;
  }
}

@media (min-width: 901px) and (max-width: 1180px) {
  .vc-body {
    grid-template-columns: minmax(0, 1fr) 320px;
    padding-inline: 18px;
  }

  .vc-earn-rules {
    grid-template-columns: 1fr;
  }

  .vc-rules {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
  }
}

/* PC panel: VIP Center sits beside sidebar, below topbar — not fullscreen.
   left = workspace-margin + sidebar-width + gap
   At 901–1200px: 12 + 228 + 18 = 258px
   At >1200px: max(16px,(100vw-1440px)/2) + 272 + 18
   top = topbar height (72px); bumped by app-banner-offset when banner is visible.
*/
@media (min-width: 901px) {
  .vip-center-overlay {
    top: 90px;
    left: calc(12px + 228px + 18px);
    border-radius: 0;
    border-top-left-radius: var(--radius-lg);
    border-left: 1px solid var(--border-default);
  }

  .has-app-banner .vip-center-overlay {
    top: calc(var(--app-banner-offset) + 90px);
  }

  .vc-body {
    padding: var(--space-4) var(--space-5) calc(var(--space-8) + var(--space-1));
  }

  .vc-earn-rules {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .vc-earn-rule {
    min-height: 0;
    padding: 10px 14px;
  }
}

@media (min-width: 1201px) {
  .vip-center-overlay {
    left: calc(max(16px, (100vw - 1440px) / 2) + 272px + 18px);
  }
}

/* ── Arc Quick-Action Menu ───────────────────────────────── */
@media (max-width: 768px) {
  .arc-overlay {
    position: fixed;
    inset: 0;
    background: rgba(8, 3, 20, 0.82);
    z-index: 35;
    opacity: 0;
    transition: opacity 0.28s ease;
    pointer-events: none;
  }
  .arc-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  /* Anchor point: fixed, horizontally centred, sitting just above the tabbar */
  .arc-items-wrap {
    position: fixed;
    bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    z-index: 45;
    pointer-events: none;
  }

  .arc-item {
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    transform: translate(-50%, 0) scale(0.4);
    opacity: 0;
    transition:
      transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1),
      opacity 0.25s ease;
    pointer-events: none;
    cursor: pointer;
  }

  .arc-items-wrap.is-open .arc-item {
    opacity: 1;
    pointer-events: auto;
    transform: translate(calc(-50% + var(--arc-tx)), var(--arc-ty)) scale(1);
  }

  /* Staggered spring delays — outermost items first */
  .arc-items-wrap.is-open .arc-item:nth-child(1) { transition-delay: 0.04s; }
  .arc-items-wrap.is-open .arc-item:nth-child(2) { transition-delay: 0.09s; }
  .arc-items-wrap.is-open .arc-item:nth-child(3) { transition-delay: 0.11s; }
  .arc-items-wrap.is-open .arc-item:nth-child(4) { transition-delay: 0.06s; }

  /* Reverse stagger on close so outermost items retract first */
  .arc-items-wrap:not(.is-open) .arc-item:nth-child(1) { transition-delay: 0.06s; }
  .arc-items-wrap:not(.is-open) .arc-item:nth-child(2) { transition-delay: 0.03s; }
  .arc-items-wrap:not(.is-open) .arc-item:nth-child(3) { transition-delay: 0.01s; }
  .arc-items-wrap:not(.is-open) .arc-item:nth-child(4) { transition-delay: 0.04s; }

  /* Arc positions — fine-tune --arc-tx / --arc-ty as needed after real-device test */
  .arc-item:nth-child(1) { --arc-tx: -100px; --arc-ty: -46px; }
  .arc-item:nth-child(2) { --arc-tx:  -33px; --arc-ty: -105px; }
  .arc-item:nth-child(3) { --arc-tx:   33px; --arc-ty: -105px; }
  .arc-item:nth-child(4) { --arc-tx:  100px; --arc-ty: -46px; }

  .arc-item-icon {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  }
  .arc-item-icon svg {
    width: 20px;
    height: 20px;
  }
  .arc-item-icon.color-bonus-cash svg,
  .arc-item-icon.color-reward-pool svg {
    width: 26px;
    height: 20px;
  }
  .arc-item-icon .currency-symbol {
    min-width: 0;
    font-size: 15px;
    font-weight: 900;
  }

  .arc-item-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    background: #ef4444;
    border: 1.5px solid #100828;
    font-size: 8px;
    font-weight: 800;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    line-height: 1;
  }
  .arc-item-badge--warn { background: #f59e0b; }

  .arc-item-label {
    font-size: 12px;
    font-weight: 700;
    color: #e0d4ff;
    white-space: nowrap;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.9);
    letter-spacing: 0.3px;
    pointer-events: none;
  }
  .arc-item-val {
    font-size: 10px;
    color: #9f89cc;
    white-space: nowrap;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
    margin-top: -2px;
    pointer-events: none;
  }

  /* Decorative arc guide line */
  .arc-guide {
    position: fixed;
    bottom: calc(86px + env(safe-area-inset-bottom, 0px));
    left: 50%;
    width: 164px;
    height: 70px;
    border: 1px solid rgba(168, 85, 247, 0.18);
    border-bottom: none;
    border-radius: 82px 82px 0 0;
    transform: translateX(-50%);
    z-index: 36;
    opacity: 0;
    transition: opacity 0.3s 0.1s;
    pointer-events: none;
  }
  .arc-guide.is-open { opacity: 1; }

  /* Play button morph: cherry → X */
  .mobile-tabbar__play .arc-icon-wrap {
    position: relative;
    width: 32px;
    height: 34px;
    flex-shrink: 0;
  }
  .mobile-tabbar__play .arc-play-icon,
  .mobile-tabbar__play .arc-close-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease, transform 0.3s ease;
  }
  .mobile-tabbar__play .arc-close-icon {
    opacity: 0;
    transform: rotate(-90deg) scale(0.5);
  }
  .mobile-tabbar__play.arc-open .arc-play-icon {
    opacity: 0;
    transform: rotate(90deg) scale(0.5);
  }
  .mobile-tabbar__play.arc-open .arc-close-icon {
    opacity: 1;
    transform: rotate(0deg) scale(1);
  }
  .mobile-tabbar__play .arc-play-label {
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: 0;
  }
  .mobile-tabbar__play.arc-open .arc-play-label {
    display: none;
  }
}