/* Spinters — Premium dark-blue override (layout-safe) */

:root {
  --lux-bg-0: #071321;
  --lux-bg-1: #0b1f33;
  --lux-bg-2: #102a44;
  --lux-panel: rgba(15, 34, 53, 0.82);
  --lux-panel-strong: rgba(11, 26, 42, 0.94);
  --lux-border: rgba(129, 174, 218, 0.26);
  --lux-border-strong: rgba(142, 194, 246, 0.52);
  --lux-accent: #2d8cff;
  --lux-accent-soft: #86beff;
  --lux-muted: #9db6cf;
  --lux-text: #eaf3ff;
  --lux-ok: #5de2c8;
  --lux-danger: #ff8ea5;
}

body.game-ui,
body.game-ui button,
body.game-ui input,
body.game-ui textarea,
body.game-ui select {
  font-family: 'Manrope', 'Exo 2', 'Segoe UI', sans-serif !important;
}

body.game-ui {
  color: var(--lux-text) !important;
  background:
    radial-gradient(980px 640px at 92% -12%, rgba(62, 143, 235, 0.25), transparent 62%),
    radial-gradient(760px 480px at -18% 14%, rgba(40, 96, 168, 0.24), transparent 64%),
    linear-gradient(150deg, var(--lux-bg-0) 0%, var(--lux-bg-1) 50%, var(--lux-bg-2) 100%) !important;
}

body.game-ui .bg-noise {
  opacity: 0.03 !important;
  background-size: 4px 4px !important;
}

body.game-ui .game-bg-glow {
  background:
    radial-gradient(520px 300px at 50% 8%, rgba(86, 158, 238, 0.24), transparent 74%),
    radial-gradient(420px 280px at 86% 86%, rgba(35, 123, 222, 0.18), transparent 72%) !important;
  animation: luxuryAura 11s ease-in-out infinite alternate !important;
}

@keyframes luxuryAura {
  from { opacity: 0.66; transform: scale(1); }
  to { opacity: 0.98; transform: scale(1.03); }
}

body.game-ui .app-shell {
  padding-top: calc(108px + env(safe-area-inset-top, 0px)) !important;
}

body.game-ui .app-topbar.game-topbar {
  padding: calc(44px + env(safe-area-inset-top, 0px)) 14px 10px !important;
  background: linear-gradient(180deg, rgba(6, 13, 24, 0.9), rgba(6, 13, 24, 0)) !important;
}

body.game-ui .game-header-stack {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 auto;
  width: fit-content;
  max-width: min(980px, 100%);
}

body.game-ui .game-brand {
  margin: 0;
  font-family: 'Manrope', 'Exo 2', sans-serif !important;
  font-size: clamp(23px, 5.8vw, 34px) !important;
  letter-spacing: 0.06em !important;
  font-weight: 800 !important;
  color: #e6f1ff !important;
  text-transform: uppercase;
  text-shadow: 0 8px 20px rgba(0, 0, 0, 0.32) !important;
  -webkit-text-stroke: 0 !important;
  animation: none !important;
}

body.game-ui .game-point-chip {
  flex: 0 0 auto;
  margin: 0 !important;
  padding: 4px 9px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(126, 176, 229, 0.45) !important;
  background:
    linear-gradient(180deg, rgba(43, 126, 215, 0.42), rgba(17, 41, 66, 0.9)) !important;
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  color: #eaf4ff !important;
  font-size: 10px !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
  white-space: nowrap;
}

body.game-ui .giveaways-card,
body.game-ui .wheel-zone,
body.game-ui .media-card,
body.game-ui .donate-card,
body.game-ui .participants-card,
body.game-ui .profile-card,
body.game-ui .my-history-card,
body.game-ui .winner-card,
body.game-ui .upcoming-card,
body.game-ui .profile-participations-card {
  border: 1px solid var(--lux-border) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(165deg, rgba(21, 45, 68, 0.9), rgba(9, 25, 42, 0.88)) !important;
  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 0 0 1px rgba(124, 175, 228, 0.08) !important;
  backdrop-filter: blur(8px);
}

body.game-ui .card-head h2,
body.game-ui .game-section-head h2,
body.game-ui .profile-card h2,
body.game-ui .pay-step-head h3,
body.game-ui .wheel-head h1 {
  font-family: 'Manrope', 'Exo 2', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em !important;
  color: #ecf5ff !important;
}

body.game-ui .card-head span,
body.game-ui .round-kicker,
body.game-ui .profile-category-hint,
body.game-ui .donate-hint,
body.game-ui .participant-muted,
body.game-ui .participant-empty,
body.game-ui .pay-status {
  color: var(--lux-muted) !important;
}

body.game-ui .round-kicker {
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
  font-size: 10px !important;
}

body.game-ui .giveaway-filters {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

body.game-ui .filter-btn {
  border-radius: 14px !important;
  border: 1px solid rgba(122, 172, 225, 0.34) !important;
  background:
    radial-gradient(130% 180% at 88% -26%, rgba(60, 145, 234, 0.28), transparent 52%),
    linear-gradient(165deg, rgba(26, 51, 76, 0.92), rgba(14, 34, 56, 0.92)) !important;
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  padding: 8px 10px !important;
}

body.game-ui .filter-btn span {
  color: rgba(195, 216, 238, 0.75) !important;
}

body.game-ui .filter-btn strong {
  margin-top: 2px;
  font-size: 13px !important;
  line-height: 1.2;
  color: #ddecff !important;
}

body.game-ui .filter-btn:hover,
body.game-ui .filter-btn:focus-visible {
  transform: none !important;
  border-color: rgba(146, 194, 246, 0.62) !important;
  box-shadow: 0 0 0 1px rgba(78, 156, 236, 0.3) !important;
}

body.game-ui .giveaway-search-input,
body.game-ui .profile-referral-input,
body.game-ui .inline-input input,
body.game-ui .pay-form textarea,
body.game-ui .pay-form input {
  border-radius: 14px !important;
  border: 1px solid rgba(122, 170, 222, 0.36) !important;
  background: rgba(7, 20, 34, 0.76) !important;
  color: var(--lux-text) !important;
}

body.game-ui .giveaway-item,
body.game-ui .participant-item,
body.game-ui .donation-item,
body.game-ui .task-item,
body.game-ui .proposal-card-item {
  border-radius: 15px !important;
  border: 1px solid rgba(128, 173, 218, 0.2) !important;
  background:
    radial-gradient(140% 210% at 90% -30%, rgba(79, 156, 236, 0.2), transparent 56%),
    rgba(16, 38, 59, 0.82) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22) !important;
}

body.game-ui .giveaway-item.active {
  border-color: var(--lux-border-strong) !important;
  box-shadow:
    0 0 0 1px rgba(136, 184, 238, 0.33),
    0 14px 28px rgba(0, 0, 0, 0.3) !important;
}

body.game-ui .giveaway-item-thumb,
body.game-ui .proposal-card-media {
  border-radius: 12px !important;
  border: 1px solid rgba(132, 178, 223, 0.28) !important;
}

body.game-ui .action-btn,
body.game-ui .round-share-btn,
body.game-ui .mini-filter,
body.game-ui .profile-ref-details-btn,
body.game-ui .pay-method-btn,
body.game-ui .pay-back-btn {
  border-radius: 14px !important;
  border: 1px solid rgba(118, 173, 229, 0.48) !important;
  background:
    linear-gradient(180deg, rgba(57, 144, 236, 0.54), rgba(22, 61, 98, 0.88)) !important;
  color: #eaf4ff !important;
  box-shadow:
    0 10px 18px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}

body.game-ui .action-btn.secondary,
body.game-ui .pay-method-btn.free,
body.game-ui .pay-method-btn.bonus {
  background:
    linear-gradient(180deg, rgba(95, 144, 194, 0.34), rgba(20, 43, 66, 0.92)) !important;
}

body.game-ui .action-btn:hover,
body.game-ui .filter-btn:hover,
body.game-ui .pay-method-btn:hover,
body.game-ui .bottom-nav-btn:hover {
  transform: translateY(-1px);
}

body.game-ui .wheel-stage {
  border-radius: 20px !important;
  border: 1px solid rgba(130, 181, 229, 0.38) !important;
  background: radial-gradient(circle at 50% 40%, rgba(70, 147, 228, 0.2), rgba(8, 20, 33, 0.86) 72%) !important;
}

body.game-ui #wheelCanvas {
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.35));
}

body.game-ui .pointer {
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.42));
}

body.game-ui .spin-sequence-banner {
  border-radius: 14px !important;
  border: 1px solid rgba(126, 177, 227, 0.5) !important;
  background: rgba(18, 42, 64, 0.82) !important;
}

body.game-ui .metric-card {
  border-radius: 14px !important;
  border: 1px solid rgba(123, 169, 210, 0.22) !important;
  background: rgba(10, 23, 38, 0.66) !important;
}

body.game-ui .sticky-join-bar {
  border-top: 1px solid rgba(125, 171, 215, 0.35) !important;
  background:
    linear-gradient(180deg, rgba(15, 34, 52, 0.72), rgba(8, 22, 36, 0.96)) !important;
  backdrop-filter: blur(12px);
}

body.game-ui .bottom-nav.game-dock {
  border-top: 1px solid rgba(128, 173, 217, 0.32) !important;
  background:
    linear-gradient(180deg, rgba(12, 29, 46, 0.78), rgba(7, 19, 32, 0.96)) !important;
  backdrop-filter: blur(12px);
}

body.game-ui .bottom-nav-btn {
  color: var(--lux-muted) !important;
}

body.game-ui .bottom-nav-btn.active {
  color: #e8f3ff !important;
}

body.game-ui .bottom-nav-btn.active .nav-icon {
  box-shadow: 0 0 0 1px rgba(132, 184, 238, 0.36), 0 10px 22px rgba(0, 0, 0, 0.24) !important;
  background: rgba(62, 142, 227, 0.24) !important;
}

body.game-ui .pay-modal,
body.game-ui .filter-sheet,
body.game-ui .receipt,
body.game-ui .info-popup,
body.game-ui .celebration {
  border: 1px solid rgba(130, 182, 236, 0.44) !important;
  background: var(--lux-panel-strong) !important;
  box-shadow: 0 26px 52px rgba(0, 0, 0, 0.44) !important;
}

body.game-ui .my-actions-card,
body.game-ui .donations-card,
body.game-ui .profile-category-subs,
body.game-ui .showcase-cta-row,
body.game-ui #weightCard,
body.game-ui .fairness-card {
  display: none !important;
}

body.game-ui .winner-card-actions {
  justify-content: flex-start !important;
}

body.game-ui .winner-card-count,
body.game-ui .round-timer,
body.game-ui #statusValue,
body.game-ui #winnerValue {
  color: #dcedff !important;
}

body.game-ui .required-channels-wrap,
body.game-ui .referral-progress-wrap,
body.game-ui .profile-referral-card {
  border: 1px solid rgba(132, 179, 223, 0.26) !important;
  background: rgba(15, 33, 52, 0.74) !important;
  border-radius: 14px !important;
}

@media (max-width: 760px) {
  body.game-ui .game-header-stack {
    gap: 6px;
  }

  body.game-ui .game-brand {
    font-size: clamp(20px, 7vw, 28px) !important;
    letter-spacing: 0.04em !important;
  }

  body.game-ui .game-point-chip {
    padding: 3px 8px !important;
    font-size: 10px !important;
  }

  body.game-ui .app-shell {
    padding-top: calc(100px + env(safe-area-inset-top, 0px)) !important;
  }

  body.game-ui .giveaway-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Stake-like refinement v2 (full app surfaces) */
body.game-ui {
  --stake-bg-0: #07111d;
  --stake-bg-1: #0b1d31;
  --stake-bg-2: #122a43;
  --stake-surface: rgba(16, 36, 56, 0.92);
  --stake-surface-2: rgba(12, 29, 46, 0.95);
  --stake-border: rgba(141, 185, 230, 0.26);
  --stake-border-strong: rgba(151, 204, 255, 0.56);
  --stake-accent: #2f93ff;
  --stake-accent-2: #57b1ff;
  --stake-text: #e8f3ff;
  --stake-muted: #a3bdd6;
  --stake-ok: #6ce2bf;
  --stake-warn: #ffd07d;
  --stake-danger: #ff8e9f;
}

body.game-ui .game-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

body.game-ui .game-header-stack {
  padding-top: calc(32px + env(safe-area-inset-top, 0px)) !important;
  gap: 10px !important;
}

body.game-ui .game-brand {
  font-weight: 800 !important;
  font-size: clamp(20px, 6.3vw, 30px) !important;
  letter-spacing: 0.07em !important;
  color: #edf6ff !important;
  text-shadow: 0 8px 18px rgba(0, 0, 0, 0.34) !important;
}

body.game-ui .game-point-chip {
  border-color: rgba(128, 183, 239, 0.54) !important;
  background:
    linear-gradient(180deg, rgba(66, 150, 236, 0.48), rgba(20, 48, 75, 0.95)) !important;
  box-shadow:
    0 7px 16px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;
}

body.game-ui .wheel-zone,
body.game-ui .giveaways-card,
body.game-ui .media-card,
body.game-ui .donate-card,
body.game-ui .participants-card,
body.game-ui .profile-card,
body.game-ui .my-history-card,
body.game-ui .winner-card,
body.game-ui .upcoming-card,
body.game-ui .profile-participations-card,
body.game-ui .task-modal,
body.game-ui .profile-ref-modal,
body.game-ui .receipt-card,
body.game-ui .filter-sheet,
body.game-ui .pay-modal,
body.game-ui .task-card-item,
body.game-ui .proposal-card-item,
body.game-ui .my-part-item,
body.game-ui .task-log-item,
body.game-ui .required-channel-item,
body.game-ui .referral-progress-item {
  border: 1px solid var(--stake-border) !important;
  background:
    linear-gradient(165deg, var(--stake-surface), var(--stake-surface-2)) !important;
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.33),
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 0 0 1px rgba(122, 175, 230, 0.08) !important;
  border-radius: 16px !important;
}

body.game-ui .giveaway-search-input,
body.game-ui .profile-referral-input,
body.game-ui .inline-input input,
body.game-ui .comment-input,
body.game-ui .proposal-form-grid input,
body.game-ui .proposal-form-grid select,
body.game-ui #tasksView .profile-card > label input,
body.game-ui #tasksView .profile-card > label textarea,
body.game-ui .pay-form textarea,
body.game-ui .pay-form input {
  border: 1px solid rgba(136, 186, 235, 0.4) !important;
  border-radius: 12px !important;
  background: rgba(7, 20, 33, 0.78) !important;
  color: var(--stake-text) !important;
}

body.game-ui .giveaway-search-input::placeholder,
body.game-ui .comment-input::placeholder,
body.game-ui .pay-form input::placeholder,
body.game-ui .pay-form textarea::placeholder,
body.game-ui .proposal-form-grid input::placeholder,
body.game-ui #tasksView .profile-card > label textarea::placeholder {
  color: rgba(171, 194, 219, 0.66) !important;
}

body.game-ui .giveaway-filters,
body.game-ui .showcase-filters {
  gap: 8px !important;
}

body.game-ui .filter-btn,
body.game-ui .mini-filter,
body.game-ui .filter-option-btn {
  border: 1px solid rgba(130, 181, 232, 0.34) !important;
  border-radius: 12px !important;
  background:
    linear-gradient(165deg, rgba(33, 63, 91, 0.94), rgba(17, 39, 60, 0.96)) !important;
  color: var(--stake-text) !important;
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

body.game-ui .filter-btn strong,
body.game-ui .mini-filter,
body.game-ui .filter-option-btn span {
  color: #e7f2ff !important;
}

body.game-ui .filter-option-btn strong {
  color: rgba(149, 203, 255, 0.92) !important;
}

body.game-ui .filter-option-btn.active,
body.game-ui .mini-filter.active,
body.game-ui .filter-btn.active {
  border-color: var(--stake-border-strong) !important;
  background:
    linear-gradient(165deg, rgba(56, 102, 147, 0.96), rgba(28, 63, 97, 0.96)) !important;
  box-shadow:
    0 0 0 1px rgba(126, 187, 248, 0.26),
    0 12px 22px rgba(0, 0, 0, 0.28) !important;
}

body.game-ui .giveaway-item {
  border: 1px solid rgba(130, 179, 228, 0.22) !important;
  border-radius: 14px !important;
  background:
    radial-gradient(120% 180% at 88% -32%, rgba(81, 164, 244, 0.2), transparent 56%),
    rgba(16, 38, 59, 0.84) !important;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.24) !important;
}

body.game-ui .giveaway-item::after {
  opacity: 0.32 !important;
}

body.game-ui .giveaway-item.active {
  border-color: var(--stake-border-strong) !important;
  box-shadow:
    0 0 0 1px rgba(133, 188, 243, 0.34),
    0 14px 26px rgba(0, 0, 0, 0.3) !important;
}

body.game-ui .giveaway-item-title,
body.game-ui .proposal-card-title,
body.game-ui .task-card-head h4,
body.game-ui .my-part-item strong,
body.game-ui .task-log-item strong,
body.game-ui .profile-ref-item-head strong,
body.game-ui #profileName {
  color: #eef6ff !important;
  text-shadow: none !important;
  font-family: 'Manrope', 'Exo 2', sans-serif !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

body.game-ui .giveaway-item-meta,
body.game-ui .proposal-card-item .task-card-subtitle,
body.game-ui .proposal-card-item .task-card-desc,
body.game-ui .task-card-subtitle,
body.game-ui .task-card-desc,
body.game-ui .task-log-item p,
body.game-ui .my-part-item p,
body.game-ui .profile-ref-item p,
body.game-ui .card-head span,
body.game-ui .profile-category-hint,
body.game-ui #profileUsername,
body.game-ui .donate-hint,
body.game-ui .referral-progress-note,
body.game-ui .required-channels-note,
body.game-ui .pay-convert,
body.game-ui .pay-method-note,
body.game-ui .pay-status,
body.game-ui .donation-meta,
body.game-ui .participant-item {
  color: var(--stake-muted) !important;
}

body.game-ui .giveaway-badge {
  border: 1px solid rgba(141, 190, 237, 0.4) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 10px !important;
}

body.game-ui .giveaway-badge.status-active,
body.game-ui .giveaway-badge.status-spinning,
body.game-ui .giveaway-badge.tag-live {
  background: linear-gradient(180deg, #59d6a8, #2abf87) !important;
  color: #062a1f !important;
  border-color: rgba(130, 241, 206, 0.9) !important;
  animation: none !important;
}

body.game-ui .giveaway-badge.status-scheduled {
  background: linear-gradient(180deg, #ffd795, #ffbb65) !important;
  color: #3f2304 !important;
  border-color: rgba(255, 213, 147, 0.92) !important;
}

body.game-ui .giveaway-badge.status-finished {
  background: linear-gradient(180deg, #94a8c0, #6f849f) !important;
  color: #0f1b2a !important;
  border-color: rgba(170, 190, 214, 0.9) !important;
}

body.game-ui .giveaway-badge.tag-hot {
  background: linear-gradient(180deg, #ff9f90, #ff7a62) !important;
  color: #401008 !important;
  border-color: rgba(255, 180, 168, 0.94) !important;
}

body.game-ui .wheel-zone {
  padding-top: 12px !important;
}

body.game-ui .wheel-head h1 {
  font-family: 'Manrope', 'Exo 2', sans-serif !important;
  font-size: clamp(21px, 5.5vw, 28px) !important;
  font-weight: 800 !important;
  text-transform: none !important;
  letter-spacing: 0.01em !important;
}

body.game-ui .round-kicker {
  border: 1px solid rgba(140, 190, 240, 0.44) !important;
  border-radius: 999px !important;
  padding: 4px 10px !important;
  background: rgba(34, 78, 120, 0.7) !important;
  color: #d9ecff !important;
}

body.game-ui .round-share-btn,
body.game-ui .profile-ref-details-btn,
body.game-ui .proposal-like-btn,
body.game-ui .giveaway-fav-btn,
body.game-ui .info-pill,
body.game-ui .pay-back-btn,
body.game-ui .pay-modal-close,
body.game-ui .task-modal-close,
body.game-ui .profile-ref-modal-close,
body.game-ui #receiptCopyBtn {
  border: 1px solid rgba(131, 184, 238, 0.44) !important;
  background: rgba(21, 53, 82, 0.78) !important;
  color: #e8f3ff !important;
  box-shadow: none !important;
}

body.game-ui .action-btn,
body.game-ui .pay-method-btn,
body.game-ui .task-primary-btn,
body.game-ui .task-detail-btn,
body.game-ui #receiptCloseBtn,
body.game-ui .sticky-join-bar .action-btn,
body.game-ui #showcaseOpenBotBtn {
  border: 1px solid rgba(132, 188, 246, 0.55) !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, rgba(66, 154, 244, 0.56), rgba(24, 65, 105, 0.94)) !important;
  color: #eaf4ff !important;
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  transform: none !important;
}

body.game-ui .action-btn.secondary,
body.game-ui .pay-method-btn.free,
body.game-ui .pay-method-btn.bonus,
body.game-ui .task-detail-btn,
body.game-ui #showcaseOpenBotBtn {
  background: linear-gradient(180deg, rgba(94, 140, 186, 0.36), rgba(19, 43, 67, 0.96)) !important;
}

body.game-ui .pay-method-btn.stars,
body.game-ui .pay-method-btn.ton,
body.game-ui .pay-method-btn.rub {
  color: #ecf5ff !important;
}

body.game-ui .pay-method-btn .method-note {
  color: rgba(206, 224, 244, 0.82) !important;
}

body.game-ui .pay-method-btn.is-disabled,
body.game-ui .proposal-like-btn:disabled,
body.game-ui .action-btn:disabled {
  opacity: 0.55 !important;
}

body.game-ui .wheel-stage {
  border: 1px solid rgba(143, 193, 243, 0.5) !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 50% 42%, rgba(74, 147, 224, 0.26), rgba(8, 20, 33, 0.9) 74%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(136, 184, 232, 0.16),
    0 16px 30px rgba(0, 0, 0, 0.35) !important;
}

body.game-ui .wheel-stage::before,
body.game-ui .wheel-stage::after {
  content: none !important;
  animation: none !important;
}

body.game-ui #wheelCanvas {
  filter: saturate(0.95) contrast(1.02) brightness(1.02) drop-shadow(0 14px 26px rgba(0, 0, 0, 0.3)) !important;
}

body.game-ui .pointer {
  border-top-color: #ff6f7a !important;
  border-top-width: 32px !important;
  border-left-width: 16px !important;
  border-right-width: 16px !important;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.44)) !important;
}

body.game-ui .pointer::after {
  width: 11px;
  height: 11px;
  top: -27px;
  background: #ffe5b1;
}

body.game-ui .spin-sequence-banner {
  border: 1px solid rgba(131, 186, 241, 0.44) !important;
  background: rgba(23, 50, 78, 0.82) !important;
  box-shadow: none !important;
}

body.game-ui .metric-card,
body.game-ui .profile-stat,
body.game-ui .task-chip,
body.game-ui .profile-ref-counter,
body.game-ui .switch-row,
body.game-ui .profile-badge {
  border: 1px solid rgba(128, 175, 221, 0.24) !important;
  background: rgba(10, 26, 42, 0.64) !important;
  color: #deedff !important;
  box-shadow: none !important;
}

body.game-ui .task-progress,
body.game-ui .profile-progress-track,
body.game-ui .media-progress {
  background: rgba(8, 19, 31, 0.82) !important;
  border: 1px solid rgba(122, 166, 208, 0.24) !important;
}

body.game-ui .task-progress span,
body.game-ui .profile-progress-bar,
body.game-ui .media-progress-bar {
  background: linear-gradient(90deg, #68c0ff, #4c9fff 46%, #7fd3ff) !important;
}

body.game-ui .task-status-pill {
  border: 1px solid rgba(132, 185, 235, 0.46) !important;
  color: #dff0ff !important;
  background: rgba(24, 58, 91, 0.72) !important;
}

body.game-ui .task-status-pill.ready,
body.game-ui .task-status-pill.done,
body.game-ui .task-status-pill.claimed {
  border-color: rgba(132, 239, 199, 0.88) !important;
  color: #07261c !important;
  background: linear-gradient(180deg, #7be0bd, #4ecfa5) !important;
}

body.game-ui .task-status-pill.progress {
  border-color: rgba(143, 191, 236, 0.56) !important;
  color: #d9ebff !important;
  background: rgba(23, 53, 84, 0.78) !important;
}

body.game-ui .task-card-icon,
body.game-ui .proposal-card-top img,
body.game-ui .donation-avatar,
body.game-ui .donation-avatar-fallback,
body.game-ui .profile-avatar,
body.game-ui .profile-avatar-fallback,
body.game-ui .giveaway-item-thumb,
body.game-ui .media-thumb {
  border: 1px solid rgba(136, 186, 235, 0.4) !important;
  box-shadow: none !important;
}

body.game-ui .donation-item,
body.game-ui .participant-item,
body.game-ui .profile-ref-item {
  border-radius: 12px !important;
}

body.game-ui .required-channels-wrap,
body.game-ui .referral-progress-wrap,
body.game-ui .profile-referral-card {
  border: 1px solid rgba(136, 184, 229, 0.28) !important;
  background: rgba(13, 31, 49, 0.74) !important;
  border-radius: 14px !important;
}

body.game-ui .required-channels-wrap.ok {
  border-color: rgba(115, 223, 185, 0.74) !important;
  box-shadow: 0 0 0 1px rgba(98, 209, 169, 0.22) inset !important;
}

body.game-ui .required-channels-wrap.missing {
  border-color: rgba(255, 158, 169, 0.78) !important;
  box-shadow: 0 0 0 1px rgba(255, 135, 149, 0.2) inset !important;
}

body.game-ui .required-channels-head strong,
body.game-ui .referral-progress-head strong,
body.game-ui .required-channel-item strong,
body.game-ui .referral-progress-item strong {
  color: #eef6ff !important;
}

body.game-ui .required-channels-head span,
body.game-ui .referral-progress-head span,
body.game-ui .required-channel-item span,
body.game-ui .referral-progress-item span {
  color: #a9c2db !important;
}

body.game-ui .showcase-filters {
  margin-top: 10px !important;
}

body.game-ui .proposal-card-item {
  gap: 10px !important;
}

body.game-ui .proposal-like-btn.liked {
  border-color: rgba(255, 173, 196, 0.82) !important;
  background: rgba(255, 131, 170, 0.24) !important;
  color: #ffe0ec !important;
}

body.game-ui .toast-item {
  border: 1px solid rgba(133, 183, 231, 0.44) !important;
  background:
    linear-gradient(150deg, rgba(55, 104, 148, 0.92), rgba(19, 45, 70, 0.96)) !important;
  color: #eaf4ff !important;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.36) !important;
}

body.game-ui .toast-item.toast-success {
  border-color: rgba(116, 227, 187, 0.8) !important;
}

body.game-ui .toast-item.toast-warning {
  border-color: rgba(255, 205, 132, 0.82) !important;
}

body.game-ui .toast-item.toast-error {
  border-color: rgba(255, 149, 169, 0.88) !important;
}

body.game-ui .sticky-join-bar {
  border-top: 1px solid rgba(128, 176, 221, 0.3) !important;
  background:
    linear-gradient(180deg, rgba(16, 35, 54, 0.76), rgba(8, 21, 34, 0.96)) !important;
}

body.game-ui .sticky-join-meta span,
body.game-ui .sticky-join-meta strong {
  color: #d7e9fb !important;
}

body.game-ui .bottom-nav.game-dock {
  width: min(392px, calc(100vw - 22px)) !important;
  border-radius: 15px !important;
  padding: 5px !important;
  border: 1px solid rgba(130, 180, 225, 0.34) !important;
  background: linear-gradient(180deg, rgba(16, 39, 61, 0.86), rgba(8, 21, 35, 0.98)) !important;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.34) !important;
}

body.game-ui .bottom-nav-btn {
  border-radius: 10px !important;
  min-height: 52px !important;
  color: #9fb9d2 !important;
  background: transparent !important;
}

body.game-ui .bottom-nav-btn .nav-label {
  font-size: 9px !important;
  font-weight: 700 !important;
}

body.game-ui .bottom-nav-btn.active {
  color: #ecf6ff !important;
  background: linear-gradient(180deg, rgba(65, 133, 202, 0.5), rgba(29, 70, 108, 0.82)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
}

body.game-ui .bottom-nav-btn.active .nav-icon,
body.game-ui .bottom-nav-btn.active .nav-emoji {
  filter: drop-shadow(0 0 8px rgba(130, 191, 249, 0.52)) !important;
}

body.game-ui .receipt-card {
  border-radius: 16px !important;
}

body.game-ui .receipt-badge {
  background: linear-gradient(180deg, #6fe0bc, #51cfa8) !important;
  color: #08261d !important;
}

body.game-ui .media-nav,
body.game-ui .media-viewer-actions button {
  border: 1px solid rgba(128, 177, 223, 0.46) !important;
  background: rgba(16, 43, 68, 0.8) !important;
  color: #eaf4ff !important;
}

body.game-ui .media-dot {
  background: rgba(130, 170, 209, 0.42) !important;
}

body.game-ui .media-dot.active {
  background: linear-gradient(180deg, #7cc6ff, #4aa2ff) !important;
}

body.game-ui .upcoming-card,
body.game-ui .my-history-card,
body.game-ui .winner-card,
body.game-ui .profile-category-subs,
body.game-ui .profile-ref-modal,
body.game-ui .task-modal,
body.game-ui .pay-modal,
body.game-ui .filter-sheet {
  border-radius: 16px !important;
}

body.game-ui .showcase-cta-row,
body.game-ui .my-actions-card,
body.game-ui .donations-card,
body.game-ui .fairness-card,
body.game-ui #weightCard,
body.game-ui .profile-category-subs {
  display: none !important;
}

@media (max-width: 760px) {
  body.game-ui .app-shell {
    padding-top: calc(96px + env(safe-area-inset-top, 0px)) !important;
  }

  body.game-ui .game-header-stack {
    gap: 7px !important;
  }

  body.game-ui .game-brand {
    font-size: clamp(18px, 6.6vw, 24px) !important;
  }

  body.game-ui .giveaway-filters,
  body.game-ui .showcase-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.game-ui #proposalsRefreshBtn {
    grid-column: 1 / -1;
  }

  body.game-ui .filter-btn {
    min-height: 58px !important;
  }
}

/* Stake-like refinement v3 (clean premium, app-wide) */
body.game-ui {
  --elite-bg-0: #050d17;
  --elite-bg-1: #0a1a2a;
  --elite-bg-2: #0f2940;
  --elite-surface: rgba(14, 33, 52, 0.92);
  --elite-surface-2: rgba(10, 25, 40, 0.96);
  --elite-border: rgba(145, 186, 228, 0.23);
  --elite-border-strong: rgba(156, 206, 255, 0.55);
  --elite-text: #e7f2ff;
  --elite-muted: #9eb8d1;
  --elite-accent: #3397ff;
  --elite-accent-2: #61beff;
}

body.game-ui {
  background:
    radial-gradient(880px 520px at 94% -12%, rgba(67, 149, 235, 0.22), transparent 60%),
    radial-gradient(700px 420px at -22% 20%, rgba(40, 99, 165, 0.24), transparent 62%),
    linear-gradient(160deg, var(--elite-bg-0) 0%, var(--elite-bg-1) 48%, var(--elite-bg-2) 100%) !important;
}

body.game-ui .bg-noise {
  opacity: 0.018 !important;
}

body.game-ui .game-bg-glow {
  opacity: 0.48 !important;
  animation: none !important;
}

body.game-ui .app-shell {
  padding-top: calc(92px + env(safe-area-inset-top, 0px)) !important;
  padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px)) !important;
}

body.game-ui .app-topbar.game-topbar {
  position: sticky !important;
  top: 0;
  z-index: 22;
  padding: 0 14px 8px !important;
  background:
    linear-gradient(180deg, rgba(6, 15, 26, 0.96), rgba(6, 15, 26, 0.86) 70%, rgba(6, 15, 26, 0)) !important;
  border-bottom: 1px solid rgba(132, 177, 221, 0.18);
  backdrop-filter: blur(10px);
}

body.game-ui .game-header-stack {
  width: min(980px, 100%);
  padding-top: calc(24px + env(safe-area-inset-top, 0px)) !important;
  margin: 0 auto;
  display: flex !important;
  flex-direction: row !important;
  justify-content: center;
  align-items: center;
  gap: 8px !important;
}

body.game-ui .game-brand {
  font-family: 'Manrope', 'Exo 2', sans-serif !important;
  font-size: clamp(20px, 6vw, 30px) !important;
  font-weight: 800 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  color: #ecf6ff !important;
  text-shadow: 0 6px 16px rgba(0, 0, 0, 0.3) !important;
}

body.game-ui .game-point-chip {
  margin: 0 !important;
  padding: 4px 9px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(134, 185, 236, 0.48) !important;
  background: linear-gradient(180deg, rgba(53, 138, 225, 0.46), rgba(17, 42, 67, 0.96)) !important;
  color: #e7f3ff !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.26) !important;
}

body.game-ui .giveaways-card,
body.game-ui .wheel-zone,
body.game-ui .media-card,
body.game-ui .donate-card,
body.game-ui .participants-card,
body.game-ui .profile-card,
body.game-ui .my-history-card,
body.game-ui .winner-card,
body.game-ui .upcoming-card,
body.game-ui .profile-participations-card,
body.game-ui .task-card-item,
body.game-ui .proposal-card-item,
body.game-ui .task-modal,
body.game-ui .profile-ref-modal,
body.game-ui .pay-modal,
body.game-ui .filter-sheet,
body.game-ui .receipt-card {
  border-radius: 14px !important;
  border: 1px solid var(--elite-border) !important;
  background: linear-gradient(165deg, var(--elite-surface), var(--elite-surface-2)) !important;
  box-shadow:
    0 12px 26px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

body.game-ui .card-head h2,
body.game-ui .wheel-head h1,
body.game-ui .profile-card h2,
body.game-ui .pay-step-head h3,
body.game-ui .task-modal-head h3,
body.game-ui .profile-ref-modal-head h3 {
  color: var(--elite-text) !important;
  font-family: 'Manrope', 'Exo 2', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
}

body.game-ui .card-head span,
body.game-ui .profile-category-hint,
body.game-ui .giveaway-item-meta,
body.game-ui .task-card-subtitle,
body.game-ui .task-card-desc,
body.game-ui .proposal-card-item .task-card-subtitle,
body.game-ui .proposal-card-item .task-card-desc,
body.game-ui .participant-empty,
body.game-ui .donate-hint,
body.game-ui .pay-status,
body.game-ui .required-channel-item span,
body.game-ui .referral-progress-item span {
  color: var(--elite-muted) !important;
}

body.game-ui .giveaway-search-input,
body.game-ui .profile-referral-input,
body.game-ui .proposal-form-grid input,
body.game-ui .proposal-form-grid select,
body.game-ui .pay-form input,
body.game-ui .pay-form textarea,
body.game-ui .inline-input input,
body.game-ui .comment-input {
  border-radius: 12px !important;
  border: 1px solid rgba(135, 183, 232, 0.4) !important;
  background: rgba(8, 20, 33, 0.78) !important;
  color: #e7f2ff !important;
}

body.game-ui .pay-form input.is-locked {
  background: rgba(18, 38, 60, 0.92) !important;
  border-color: rgba(139, 199, 255, 0.5) !important;
  color: #f2f8ff !important;
}

body.game-ui .giveaway-filters,
body.game-ui .showcase-filters {
  gap: 8px !important;
}

body.game-ui .filter-btn,
body.game-ui .mini-filter,
body.game-ui .filter-option-btn {
  border-radius: 12px !important;
  border: 1px solid rgba(130, 182, 234, 0.36) !important;
  background: linear-gradient(165deg, rgba(31, 61, 90, 0.95), rgba(15, 36, 57, 0.96)) !important;
  color: #e9f4ff !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22) !important;
}

body.game-ui .filter-option-btn.active,
body.game-ui .mini-filter.active,
body.game-ui .filter-btn.active {
  border-color: var(--elite-border-strong) !important;
  background: linear-gradient(165deg, rgba(56, 108, 157, 0.96), rgba(28, 64, 98, 0.96)) !important;
}

body.game-ui .giveaway-item {
  border-radius: 12px !important;
  border: 1px solid rgba(131, 183, 234, 0.22) !important;
  background:
    radial-gradient(120% 180% at 92% -30%, rgba(76, 161, 244, 0.16), transparent 56%),
    rgba(14, 35, 54, 0.86) !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.24) !important;
}

body.game-ui .giveaway-item.active {
  border-color: rgba(152, 204, 255, 0.68) !important;
  box-shadow:
    0 0 0 1px rgba(129, 190, 250, 0.28),
    0 12px 24px rgba(0, 0, 0, 0.28) !important;
}

body.game-ui .giveaway-item-thumb,
body.game-ui .task-card-icon,
body.game-ui .proposal-card-top img,
body.game-ui .media-thumb {
  border-radius: 10px !important;
  border: 1px solid rgba(129, 182, 235, 0.36) !important;
}

body.game-ui .action-btn,
body.game-ui .task-primary-btn,
body.game-ui .task-detail-btn,
body.game-ui .pay-method-btn,
body.game-ui .round-share-btn,
body.game-ui .profile-ref-details-btn,
body.game-ui .proposal-like-btn,
body.game-ui .giveaway-fav-btn,
body.game-ui .pay-back-btn,
body.game-ui .pay-modal-close,
body.game-ui .task-modal-close,
body.game-ui .profile-ref-modal-close,
body.game-ui #receiptCopyBtn {
  border-radius: 12px !important;
  border: 1px solid rgba(136, 189, 241, 0.5) !important;
  background: linear-gradient(180deg, rgba(64, 154, 245, 0.58), rgba(24, 65, 104, 0.95)) !important;
  color: #eaf5ff !important;
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
  transform: none !important;
}

body.game-ui .action-btn.secondary,
body.game-ui .task-detail-btn,
body.game-ui .pay-method-btn.free,
body.game-ui .pay-method-btn.bonus {
  background: linear-gradient(180deg, rgba(96, 145, 193, 0.38), rgba(20, 44, 68, 0.96)) !important;
}

body.game-ui .wheel-zone {
  padding-top: 12px !important;
}

body.game-ui .round-kicker {
  border-radius: 999px !important;
  border: 1px solid rgba(137, 188, 238, 0.45) !important;
  background: rgba(23, 54, 82, 0.74) !important;
  color: #dcedff !important;
  letter-spacing: 0.09em !important;
  font-size: 10px !important;
  text-transform: uppercase;
}

body.game-ui .wheel-stage {
  border-radius: 18px !important;
  border: 1px solid rgba(141, 193, 244, 0.52) !important;
  background: radial-gradient(circle at 50% 42%, rgba(74, 151, 230, 0.22), rgba(8, 20, 33, 0.9) 74%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(136, 188, 238, 0.14),
    0 14px 28px rgba(0, 0, 0, 0.34) !important;
}

body.game-ui .wheel-stage::before,
body.game-ui .wheel-stage::after {
  content: none !important;
  animation: none !important;
}

body.game-ui #wheelCanvas {
  filter: saturate(0.96) contrast(1.03) brightness(1.02) drop-shadow(0 12px 24px rgba(0, 0, 0, 0.3)) !important;
}

body.game-ui .pointer {
  border-top-width: 30px !important;
  border-left-width: 15px !important;
  border-right-width: 15px !important;
  border-top-color: #ff6f7b !important;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.44)) !important;
}

body.game-ui .pointer::after {
  width: 10px !important;
  height: 10px !important;
  top: -26px !important;
  background: #ffe4b1 !important;
}

body.game-ui .metric-card,
body.game-ui .profile-stat,
body.game-ui .profile-ref-counter,
body.game-ui .task-chip,
body.game-ui .switch-row {
  border-radius: 12px !important;
  border: 1px solid rgba(129, 180, 230, 0.24) !important;
  background: rgba(10, 24, 39, 0.68) !important;
  box-shadow: none !important;
}

body.game-ui .task-progress,
body.game-ui .profile-progress-track,
body.game-ui .media-progress {
  border-radius: 999px !important;
  border: 1px solid rgba(123, 169, 211, 0.24) !important;
  background: rgba(8, 19, 30, 0.82) !important;
}

body.game-ui .task-progress span,
body.game-ui .profile-progress-bar,
body.game-ui .media-progress-bar {
  border-radius: 999px !important;
  background: linear-gradient(90deg, #70c3ff, #4ea4ff 48%, #83d3ff) !important;
}

body.game-ui .task-status-pill {
  border-radius: 999px !important;
  border: 1px solid rgba(132, 186, 238, 0.44) !important;
  background: rgba(24, 57, 88, 0.76) !important;
  color: #deefff !important;
}

body.game-ui .task-status-pill.ready,
body.game-ui .task-status-pill.done,
body.game-ui .task-status-pill.claimed {
  border-color: rgba(132, 239, 199, 0.88) !important;
  background: linear-gradient(180deg, #7ce0be, #53cfa8) !important;
  color: #08261d !important;
}

body.game-ui .required-channels-wrap,
body.game-ui .referral-progress-wrap,
body.game-ui .profile-referral-card {
  border-radius: 12px !important;
  border: 1px solid rgba(135, 183, 231, 0.26) !important;
  background: rgba(13, 31, 50, 0.74) !important;
}

body.game-ui .required-channel-item,
body.game-ui .referral-progress-item,
body.game-ui .profile-ref-item,
body.game-ui .participant-item,
body.game-ui .donation-item {
  border-radius: 11px !important;
  border: 1px solid rgba(129, 176, 221, 0.2) !important;
  background: rgba(12, 29, 46, 0.74) !important;
}

body.game-ui .sticky-join-bar {
  border-top: 1px solid rgba(131, 182, 230, 0.3) !important;
  background: linear-gradient(180deg, rgba(14, 33, 50, 0.82), rgba(8, 20, 33, 0.98)) !important;
  backdrop-filter: blur(11px);
}

body.game-ui .sticky-join-meta span,
body.game-ui .sticky-join-meta strong {
  color: #d8e9fa !important;
}

body.game-ui .bottom-nav.game-dock {
  left: 0 !important;
  right: 0 !important;
  transform: none !important;
  width: 100% !important;
  max-width: none !important;
  bottom: 0 !important;
  border-radius: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  border-top: 1px solid rgba(130, 180, 227, 0.28) !important;
  padding: 6px max(12px, env(safe-area-inset-left, 0px)) calc(6px + env(safe-area-inset-bottom, 0px))
    max(12px, env(safe-area-inset-right, 0px)) !important;
  background: linear-gradient(180deg, rgba(12, 30, 47, 0.9), rgba(7, 19, 31, 0.98)) !important;
  box-shadow: 0 -10px 22px rgba(0, 0, 0, 0.35) !important;
  gap: 6px !important;
}

body.game-ui .bottom-nav-btn {
  min-height: 52px !important;
  border-radius: 11px !important;
  color: #9db7d1 !important;
  background: transparent !important;
}

body.game-ui .bottom-nav-btn .nav-label {
  font-size: 9px !important;
  font-weight: 700 !important;
}

body.game-ui .bottom-nav-btn.active {
  color: #edf6ff !important;
  background: linear-gradient(180deg, rgba(65, 136, 206, 0.48), rgba(28, 68, 104, 0.86)) !important;
}

body.game-ui .bottom-nav-btn.active .nav-icon,
body.game-ui .bottom-nav-btn.active .nav-emoji {
  filter: drop-shadow(0 0 7px rgba(132, 190, 248, 0.5)) !important;
}

body.game-ui .pay-modal-layer,
body.game-ui .task-modal-layer,
body.game-ui .profile-ref-modal-layer,
body.game-ui .receipt-layer {
  background: rgba(4, 10, 17, 0.76) !important;
}

body.game-ui .filter-sheet-layer.active {
  background: rgba(4, 10, 17, 0.76) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

body.game-ui .pay-modal,
body.game-ui .filter-sheet,
body.game-ui .task-modal,
body.game-ui .profile-ref-modal,
body.game-ui .receipt-card {
  border-radius: 14px !important;
}

body.game-ui .toast-item {
  border-radius: 11px !important;
  border: 1px solid rgba(134, 183, 230, 0.44) !important;
  background: linear-gradient(150deg, rgba(46, 97, 144, 0.94), rgba(16, 39, 60, 0.97)) !important;
  color: #e8f3ff !important;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.34) !important;
}

body.game-ui .toast-item.toast-success {
  border-color: rgba(117, 228, 189, 0.8) !important;
}

body.game-ui .toast-item.toast-warning {
  border-color: rgba(255, 205, 132, 0.82) !important;
}

body.game-ui .toast-item.toast-error {
  border-color: rgba(255, 149, 169, 0.88) !important;
}

@media (max-width: 760px) {
  body.game-ui .app-shell {
    padding-top: calc(88px + env(safe-area-inset-top, 0px)) !important;
  }

  body.game-ui .game-brand {
    font-size: clamp(18px, 6.1vw, 24px) !important;
    letter-spacing: 0.05em !important;
  }

  body.game-ui .game-point-chip {
    font-size: 10px !important;
  }

  body.game-ui .giveaway-filters,
  body.game-ui .showcase-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Stake-like polish v5 (closer to provided screenshots) */
body.game-ui {
  --elite-bg-0: #06111e;
  --elite-bg-1: #0a1a2c;
  --elite-bg-2: #11283f;
  --elite-surface: rgba(17, 38, 58, 0.92);
  --elite-surface-2: rgba(11, 27, 42, 0.96);
  --elite-border: rgba(137, 187, 236, 0.26);
  background:
    radial-gradient(960px 580px at 84% -18%, rgba(73, 151, 234, 0.2), transparent 62%),
    radial-gradient(780px 520px at 8% 2%, rgba(42, 102, 174, 0.2), transparent 58%),
    linear-gradient(165deg, var(--elite-bg-0), var(--elite-bg-1) 52%, var(--elite-bg-2)) !important;
}

body.game-ui .app-topbar.game-topbar {
  background:
    linear-gradient(180deg, rgba(3, 10, 18, 0.95), rgba(3, 10, 18, 0.9) 64%, rgba(3, 10, 18, 0.08)) !important;
  border-bottom: 1px solid rgba(108, 157, 205, 0.26) !important;
}

body.game-ui .game-header-stack {
  width: min(980px, 100%) !important;
  padding: 6px 10px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(129, 178, 225, 0.22) !important;
  background: linear-gradient(170deg, rgba(17, 43, 68, 0.78), rgba(8, 23, 37, 0.9)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 10px 22px rgba(0, 0, 0, 0.32) !important;
  justify-content: flex-start !important;
  gap: 8px !important;
}

body.game-ui .game-brand {
  flex: 0 1 auto;
  font-size: clamp(20px, 5.4vw, 28px) !important;
  letter-spacing: 0.05em !important;
  color: #eaf4ff !important;
  text-shadow: 0 6px 14px rgba(0, 0, 0, 0.3) !important;
}

body.game-ui .game-point-chip {
  margin-left: auto !important;
  min-width: auto !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(132, 182, 229, 0.44) !important;
  background: linear-gradient(180deg, rgba(35, 99, 158, 0.72), rgba(10, 27, 44, 0.97)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 8px 16px rgba(0, 0, 0, 0.3) !important;
  font-size: 10px !important;
  line-height: 1.1 !important;
  letter-spacing: 0.02em;
}

body.game-ui .filter-btn {
  border-radius: 14px !important;
  border: 1px solid rgba(122, 168, 208, 0.38) !important;
  background:
    radial-gradient(140% 190% at 92% -34%, rgba(92, 179, 255, 0.2), transparent 56%),
    linear-gradient(172deg, rgba(18, 45, 71, 0.94), rgba(10, 26, 41, 0.96)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 10px 18px rgba(0, 0, 0, 0.28) !important;
}

body.game-ui .filter-btn strong {
  color: #e2f0ff !important;
}

body.game-ui .filter-btn span {
  color: rgba(186, 210, 236, 0.8) !important;
}

body.game-ui .giveaway-item,
body.game-ui .task-item,
body.game-ui .proposal-card-item {
  background:
    radial-gradient(140% 180% at 88% -28%, rgba(81, 160, 238, 0.2), transparent 57%),
    linear-gradient(164deg, rgba(18, 43, 66, 0.93), rgba(10, 27, 44, 0.95)) !important;
  border-color: rgba(128, 172, 212, 0.24) !important;
}

body.game-ui .giveaway-item.active {
  border-color: rgba(152, 202, 247, 0.6) !important;
  box-shadow:
    0 0 0 1px rgba(100, 177, 245, 0.32),
    0 12px 24px rgba(0, 0, 0, 0.34) !important;
}

body.game-ui .filter-sheet,
body.game-ui .pay-modal,
body.game-ui .receipt-card {
  background:
    radial-gradient(140% 170% at 88% -24%, rgba(78, 162, 244, 0.2), transparent 56%),
    linear-gradient(164deg, rgba(18, 44, 69, 0.95), rgba(10, 27, 42, 0.98)) !important;
}

body.game-ui .bottom-nav.game-dock {
  background: linear-gradient(180deg, rgba(12, 30, 47, 0.9), rgba(7, 19, 31, 0.99)) !important;
  border-top: 1px solid rgba(130, 180, 227, 0.3) !important;
}

body.game-ui .pay-method-btn.usdttrc20,
body.game-ui .action-btn.usdttrc20 {
  border-color: rgba(85, 206, 162, 0.78) !important;
  background: linear-gradient(170deg, rgba(32, 151, 112, 0.88), rgba(14, 64, 49, 0.94)) !important;
  color: #e8fff5 !important;
}

@media (max-width: 760px) {
  body.game-ui .game-header-stack {
    padding: 5px 8px !important;
    border-radius: 12px !important;
  }

  body.game-ui .game-point-chip {
    padding: 3px 8px !important;
    font-size: 9px !important;
  }
}

/* Final clean visual pass (single coherent layer over legacy themes) */
body.game-ui {
  --clean-bg-0: #07101b;
  --clean-bg-1: #0b1c2f;
  --clean-bg-2: #10253b;
  --clean-surface-a: rgba(14, 34, 53, 0.94);
  --clean-surface-b: rgba(10, 25, 40, 0.96);
  --clean-border: rgba(128, 174, 216, 0.24);
  --clean-border-strong: rgba(152, 203, 248, 0.5);
  --clean-text: #eaf4ff;
  --clean-text-soft: #9eb6cf;
  --clean-primary-a: #2f8de7;
  --clean-primary-b: #1f5d96;
  --clean-radius-lg: 18px;
  --clean-radius-md: 14px;
  --clean-shadow: 0 14px 30px rgba(0, 0, 0, 0.34);
  background:
    radial-gradient(980px 620px at 84% -12%, rgba(70, 148, 234, 0.16), transparent 62%),
    radial-gradient(760px 500px at 8% 0%, rgba(47, 101, 168, 0.18), transparent 58%),
    linear-gradient(165deg, var(--clean-bg-0), var(--clean-bg-1) 52%, var(--clean-bg-2)) !important;
  color: var(--clean-text) !important;
}

body.game-ui .app-topbar.game-topbar {
  background: transparent !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

body.game-ui .game-header-stack {
  width: min(980px, 100%) !important;
  margin: 0 auto !important;
  padding: 7px 10px !important;
  border-radius: var(--clean-radius-md) !important;
  border: 1px solid var(--clean-border) !important;
  background: linear-gradient(170deg, rgba(18, 44, 69, 0.78), rgba(8, 23, 37, 0.92)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 10px 22px rgba(0, 0, 0, 0.3) !important;
  gap: 8px !important;
}

body.game-ui .game-brand {
  font-family: 'Manrope', 'Exo 2', sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(20px, 5.3vw, 28px) !important;
  letter-spacing: 0.05em !important;
  text-shadow: 0 6px 14px rgba(0, 0, 0, 0.3) !important;
}

body.game-ui .game-point-chip {
  margin-left: auto !important;
  min-width: auto !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(132, 183, 229, 0.46) !important;
  background: linear-gradient(180deg, rgba(36, 102, 165, 0.74), rgba(10, 28, 45, 0.98)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 7px 14px rgba(0, 0, 0, 0.28) !important;
  font-size: 10px !important;
}

body.game-ui .wheel-zone,
body.game-ui .giveaways-card,
body.game-ui .media-card,
body.game-ui .donate-card,
body.game-ui .donations-card,
body.game-ui .participants-card,
body.game-ui .profile-card,
body.game-ui .my-history-card,
body.game-ui .my-actions-card,
body.game-ui .winner-card,
body.game-ui .upcoming-card,
body.game-ui .profile-participations-card {
  border-radius: var(--clean-radius-lg) !important;
  border: 1px solid var(--clean-border) !important;
  background:
    radial-gradient(140% 190% at 88% -28%, rgba(85, 168, 248, 0.16), transparent 56%),
    linear-gradient(164deg, var(--clean-surface-a), var(--clean-surface-b)) !important;
  box-shadow: var(--clean-shadow) !important;
}

body.game-ui .filter-btn,
body.game-ui .giveaway-item,
body.game-ui .metric-card,
body.game-ui .donation-item,
body.game-ui .participant-item,
body.game-ui .task-item,
body.game-ui .proposal-card-item,
body.game-ui .profile-stat,
body.game-ui .switch-row,
body.game-ui .required-channel-item,
body.game-ui .referral-progress-item,
body.game-ui .profile-ref-item,
body.game-ui .my-part-item {
  border-radius: var(--clean-radius-md) !important;
  border: 1px solid rgba(125, 172, 214, 0.24) !important;
  background:
    radial-gradient(140% 180% at 88% -30%, rgba(84, 164, 241, 0.14), transparent 58%),
    linear-gradient(166deg, rgba(17, 41, 63, 0.92), rgba(10, 27, 44, 0.95)) !important;
  box-shadow: 0 9px 18px rgba(0, 0, 0, 0.24) !important;
}

body.game-ui .giveaway-filters {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

body.game-ui .filter-favorite-btn {
  max-width: none !important;
}

body.game-ui .giveaway-item.active,
body.game-ui .filter-option-btn.active,
body.game-ui .metric-card.winner {
  border-color: var(--clean-border-strong) !important;
  box-shadow:
    0 0 0 1px rgba(99, 177, 247, 0.28),
    0 12px 24px rgba(0, 0, 0, 0.32) !important;
}

body.game-ui .filter-btn span,
body.game-ui .metric-card span,
body.game-ui .participant-muted,
body.game-ui .donation-meta,
body.game-ui .pay-status {
  color: var(--clean-text-soft) !important;
}

body.game-ui .filter-btn strong,
body.game-ui .metric-card strong,
body.game-ui .donation-name,
body.game-ui .participant-item strong,
body.game-ui .card-head h2,
body.game-ui .wheel-head h1 {
  color: var(--clean-text) !important;
}

body.game-ui .action-btn,
body.game-ui .pay-method-btn,
body.game-ui .round-share-btn,
body.game-ui .mini-filter,
body.game-ui .profile-ref-details-btn,
body.game-ui .pay-back-btn,
body.game-ui .legal-link-btn,
body.game-ui .filter-sheet-head button,
body.game-ui .pay-modal-close {
  border-radius: var(--clean-radius-md) !important;
  border: 1px solid rgba(124, 176, 224, 0.48) !important;
  background: linear-gradient(180deg, rgba(58, 146, 238, 0.58), rgba(23, 64, 102, 0.92)) !important;
  color: #eaf4ff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 9px 18px rgba(0, 0, 0, 0.28) !important;
}

body.game-ui .action-btn.secondary,
body.game-ui .pay-method-btn.free,
body.game-ui .pay-method-btn.bonus {
  background: linear-gradient(180deg, rgba(90, 140, 189, 0.36), rgba(21, 44, 68, 0.94)) !important;
}

body.game-ui .action-btn.usdttrc20,
body.game-ui .pay-method-btn.usdttrc20 {
  border-color: rgba(85, 206, 162, 0.78) !important;
  background: linear-gradient(170deg, rgba(32, 151, 112, 0.9), rgba(14, 64, 49, 0.95)) !important;
  color: #e8fff5 !important;
}

body.game-ui .pay-ton-panel,
body.game-ui .pay-usdt-panel,
body.game-ui .pay-address-card {
  border: 1px solid rgba(132, 183, 229, 0.24) !important;
  background: rgba(10, 27, 42, 0.78) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 10px 24px rgba(0, 0, 0, 0.18) !important;
}

body.game-ui .pay-extra-badge {
  border-color: rgba(96, 212, 170, 0.42) !important;
  background: rgba(30, 118, 88, 0.4) !important;
  color: #e1fff1 !important;
}

body.game-ui .pay-address-card code,
body.game-ui #tonWalletMeta {
  color: #eef7ff !important;
}

body.game-ui .pay-modal,
body.game-ui .filter-sheet,
body.game-ui .task-modal,
body.game-ui .profile-ref-modal,
body.game-ui .receipt-card {
  border-radius: 16px !important;
  border: 1px solid var(--clean-border) !important;
  background:
    radial-gradient(140% 170% at 88% -24%, rgba(77, 164, 246, 0.18), transparent 56%),
    linear-gradient(164deg, rgba(17, 43, 67, 0.96), rgba(9, 25, 40, 0.98)) !important;
}

body.game-ui .bottom-nav.game-dock {
  border-top: 1px solid rgba(132, 183, 229, 0.26) !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  border-radius: 16px 16px 0 0 !important;
  background: linear-gradient(180deg, rgba(12, 30, 47, 0.92), rgba(7, 19, 31, 0.99)) !important;
  box-shadow: 0 -10px 24px rgba(0, 0, 0, 0.34) !important;
}

body.game-ui .bottom-nav-btn {
  border-radius: 12px !important;
}

body.game-ui .bottom-nav-btn.active {
  background: linear-gradient(180deg, rgba(66, 138, 210, 0.5), rgba(29, 71, 109, 0.88)) !important;
}

body.game-ui .wheel-stage {
  border-radius: 20px !important;
  border: 1px solid rgba(132, 182, 229, 0.42) !important;
  background: radial-gradient(circle at 50% 40%, rgba(73, 151, 229, 0.22), rgba(9, 22, 35, 0.9) 74%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(142, 193, 240, 0.13),
    0 16px 28px rgba(0, 0, 0, 0.34) !important;
}

body.game-ui .wheel-name-ribbon {
  border-color: rgba(159, 207, 247, 0.24) !important;
  background: linear-gradient(180deg, rgba(11, 31, 49, 0.74), rgba(8, 23, 37, 0.92)) !important;
  box-shadow:
    0 14px 28px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

body.game-ui .wheel-name-pill {
  border-color: rgba(136, 182, 224, 0.16) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: #dcecff !important;
}

body.game-ui .wheel-name-pill.active {
  border-color: rgba(255, 221, 124, 0.26) !important;
  background: linear-gradient(180deg, rgba(232, 188, 79, 0.26), rgba(155, 104, 37, 0.16)) !important;
  color: #fff1c2 !important;
}

@media (max-width: 760px) {
  body.game-ui .game-header-stack {
    border-radius: 12px !important;
  }

  body.game-ui .giveaway-filters,
  body.game-ui .showcase-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.game-ui .filter-btn {
    padding: 7px 8px !important;
  }

  body.game-ui .filter-btn span {
    font-size: 10px !important;
  }

  body.game-ui .filter-btn strong {
    font-size: 12px !important;
    line-height: 1.1 !important;
  }
}

/* Smooth filter open animation override */
body.game-ui .filter-sheet-layer {
  will-change: opacity, backdrop-filter;
}

body.game-ui .filter-sheet-layer.active {
  transition:
    opacity 560ms cubic-bezier(0.16, 1, 0.3, 1) !important,
    backdrop-filter 560ms cubic-bezier(0.16, 1, 0.3, 1) !important,
    background-color 560ms cubic-bezier(0.16, 1, 0.3, 1) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

body.game-ui .filter-sheet {
  will-change: transform, opacity;
  transform-origin: 50% 100%;
  opacity: 0;
  transform: translateY(28px) scale(0.985);
  transition:
    transform 620ms cubic-bezier(0.16, 1, 0.3, 1) !important,
    opacity 500ms cubic-bezier(0.2, 0.9, 0.2, 1) !important;
}

body.game-ui .filter-sheet-layer.active .filter-sheet {
  opacity: 1;
  transform: translateY(0) scale(1);
}

body.game-ui .filter-option-btn {
  opacity: 0;
  transform: translateY(8px);
}

body.game-ui .filter-sheet-layer.active .filter-option-btn {
  opacity: 1;
  transform: translateY(0);
  animation: filterOptionSlideInSmooth 460ms cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  animation-delay: calc(var(--filter-option-index, 0) * 40ms) !important;
}

@keyframes filterOptionSlideInSmooth {
  0% {
    opacity: 0;
    transform: translateY(8px);
  }
  72% {
    opacity: 1;
    transform: translateY(-1px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

body.game-ui .wheel-stage.roulette-mode {
  border-radius: 32px !important;
  border: 1px solid rgba(117, 170, 227, 0.34) !important;
  background:
    radial-gradient(circle at 50% -10%, rgba(255, 220, 122, 0.1), transparent 34%),
    linear-gradient(180deg, rgba(14, 33, 52, 0.94), rgba(7, 17, 28, 0.98)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(142, 193, 240, 0.08),
    0 18px 34px rgba(0, 0, 0, 0.34) !important;
}

body.game-ui .wheel-stage.roulette-mode::before {
  inset: 0 !important;
  border-radius: inherit !important;
  filter: none !important;
  opacity: 1 !important;
}

body.game-ui .wheel-stage.roulette-mode::after {
  inset: 0 !important;
  border-radius: inherit !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    0 12px 28px rgba(0, 0, 0, 0.28) !important;
}

body.game-ui .wheel-stage.roulette-mode .roulette-stage {
  border-radius: 26px !important;
}

/* Roulette showcase adaptation */
body.game-ui {
  --showcase-shell-radius: 30px;
  --showcase-stage-radius: 24px;
  --showcase-mask-height: clamp(312px, 66vw, 382px);
  --showcase-card-width: clamp(118px, 26vw, 138px);
  --showcase-card-height: clamp(216px, 48vw, 258px);
  --showcase-card-gap: 18px;
}

body.game-ui .wheel-stage.roulette-mode {
  width: calc(100% + 52px) !important;
  max-width: none !important;
  margin-inline: -26px !important;
  aspect-ratio: auto !important;
  min-height: clamp(348px, 72vw, 430px) !important;
  overflow: hidden !important;
  padding: 12px !important;
  border-radius: 34px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background:
    radial-gradient(circle at 14% 20%, rgba(93, 140, 255, 0.22), transparent 28%),
    radial-gradient(circle at 82% 18%, rgba(86, 255, 214, 0.16), transparent 32%),
    radial-gradient(circle at 50% 84%, rgba(131, 242, 255, 0.13), transparent 36%),
    linear-gradient(145deg, #040913, #081426 45%, #0d2140) !important;
  box-shadow:
    0 28px 76px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

body.game-ui .wheel-stage.roulette-mode::before,
body.game-ui .wheel-stage.roulette-mode::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  pointer-events: none !important;
}

body.game-ui .wheel-stage.roulette-mode::before {
  background:
    radial-gradient(circle at -6% -6%, rgba(92, 162, 255, 0.22), transparent 32%),
    radial-gradient(circle at 108% 108%, rgba(104, 255, 224, 0.18), transparent 34%) !important;
  filter: blur(26px) !important;
  opacity: 0.92 !important;
  animation: rouletteShowcaseOuterDrift 16s ease-in-out infinite alternate !important;
}

body.game-ui .wheel-stage.roulette-mode::after {
  background:
    linear-gradient(transparent, rgba(255, 255, 255, 0.015), transparent),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.012) 0 1px, transparent 1px 44px) !important;
  mix-blend-mode: screen !important;
  opacity: 0.55 !important;
  box-shadow: none !important;
}

body.game-ui .wheel-stage.roulette-mode .roulette-stage {
  position: relative !important;
  min-height: clamp(382px, 78vw, 462px) !important;
  padding: clamp(12px, 3vw, 16px) !important;
  border-radius: var(--showcase-shell-radius) !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)),
    linear-gradient(145deg, rgba(17, 31, 54, 0.56), rgba(8, 18, 33, 0.74)) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow:
    0 20px 48px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -20px 60px rgba(0, 0, 0, 0.22) !important;
}

body.game-ui .wheel-stage.roulette-mode .roulette-stage::before {
  content: '' !important;
  position: absolute !important;
  inset: 18px !important;
  border-radius: calc(var(--showcase-shell-radius) - 10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  background: transparent !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

body.game-ui .wheel-stage.roulette-mode .roulette-stage::after {
  content: none !important;
}

body.game-ui .roulette-shell-art,
body.game-ui .roulette-shell-grid,
body.game-ui .roulette-center-focus,
body.game-ui .roulette-center-marker {
  position: absolute !important;
  pointer-events: none !important;
}

body.game-ui .roulette-shell-art {
  top: 8%;
  width: 34%;
  height: 68%;
  border-radius: 50%;
  filter: blur(34px);
  opacity: 0.28;
  z-index: 0;
}

body.game-ui .roulette-shell-art-a {
  left: -8%;
  background: radial-gradient(circle, rgba(93, 162, 255, 0.44), transparent 74%);
  animation: rouletteShowcaseOrbA 8s ease-in-out infinite;
}

body.game-ui .roulette-shell-art-b {
  right: -8%;
  background: radial-gradient(circle, rgba(134, 255, 224, 0.3), transparent 74%);
  animation: rouletteShowcaseOrbB 10s ease-in-out infinite;
}

body.game-ui .roulette-shell-grid {
  inset: 18px;
  border-radius: calc(var(--showcase-shell-radius) - 10px);
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.014) 0 1px, transparent 1px 46px);
  opacity: 0.26;
  mask: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent);
  z-index: 0;
}

body.game-ui .roulette-mask {
  position: relative !important;
  width: 100% !important;
  height: var(--showcase-mask-height) !important;
  overflow: hidden !important;
  border-radius: var(--showcase-stage-radius) !important;
  border: 1px solid rgba(255, 255, 255, 0.11) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)),
    linear-gradient(180deg, rgba(7, 18, 32, 0.82), rgba(9, 18, 30, 0.62)) !important;
  box-shadow:
    inset 0 24px 42px rgba(255, 255, 255, 0.03),
    inset 0 -14px 24px rgba(0, 0, 0, 0.14),
    0 18px 46px rgba(0, 0, 0, 0.22) !important;
  perspective: none;
  z-index: 2;
}

body.game-ui .roulette-mask::before,
body.game-ui .roulette-mask::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 8.5% !important;
  z-index: 4 !important;
  pointer-events: none !important;
}

body.game-ui .roulette-mask::before {
  left: 0 !important;
  background: linear-gradient(90deg, rgba(5, 11, 23, 0.94), rgba(5, 11, 23, 0)) !important;
}

body.game-ui .roulette-mask::after {
  right: 0 !important;
  background: linear-gradient(270deg, rgba(5, 11, 23, 0.94), rgba(5, 11, 23, 0)) !important;
}

body.game-ui .roulette-track {
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  display: flex !important;
  align-items: center !important;
  gap: var(--showcase-card-gap) !important;
  padding: 0 10px !important;
  transform: translate3d(0, -50%, 0);
  will-change: transform !important;
  z-index: 3 !important;
}

body.game-ui .roulette-center-focus {
  left: 50%;
  top: 50%;
  width: 248px;
  height: 248px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(121, 246, 255, 0.18), transparent 46%),
    radial-gradient(circle, rgba(142, 255, 228, 0.12), transparent 62%);
  filter: blur(10px);
  z-index: 1;
}

body.game-ui .roulette-center-marker {
  left: 50%;
  top: 18px;
  bottom: 18px;
  width: 0;
  transform: translateX(-50%);
  z-index: 5;
}

body.game-ui .roulette-center-marker::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 5px;
  border-radius: 999px;
  transform: translateX(-50%);
  background:
    linear-gradient(180deg, rgba(116, 232, 255, 0.12), rgba(145, 255, 228, 0.92), rgba(116, 232, 255, 0.12));
  box-shadow:
    0 0 20px rgba(110, 239, 255, 0.46),
    0 0 60px rgba(113, 200, 255, 0.18);
  animation: rouletteMarkerBeam 2.6s ease-in-out infinite;
}

body.game-ui .roulette-center-marker::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20px;
  height: 20px;
  transform: translate(-50%, -50%) rotate(45deg);
  border-radius: 4px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(141, 255, 225, 0.88));
  box-shadow:
    0 0 24px rgba(140, 255, 226, 0.44),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

body.game-ui .roulette-card.participant-card {
  --proximity: 0.3;
  --selected: 0;
  position: relative !important;
  width: var(--showcase-card-width) !important;
  min-width: var(--showcase-card-width) !important;
  height: var(--showcase-card-height) !important;
  padding: 18px 12px 16px !important;
  border-radius: 30px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 16px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.03)),
    linear-gradient(180deg, rgba(20, 32, 54, 0.96), rgba(8, 14, 24, 0.94)) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow:
    0 22px 30px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  opacity: calc(0.34 + (var(--proximity) * 0.66)) !important;
  filter: saturate(calc(0.68 + (var(--proximity) * 0.46))) brightness(calc(0.82 + (var(--proximity) * 0.22))) !important;
  transform:
    translateY(calc((1 - var(--proximity)) * 10px - (var(--selected) * 12px)))
    scale(calc(0.88 + (var(--proximity) * 0.15) + (var(--selected) * 0.06)))
    rotateX(calc((1 - var(--proximity)) * 11deg)) !important;
  transition: none !important;
  transform-style: flat !important;
  overflow: hidden !important;
}

body.game-ui .roulette-card.participant-card::before {
  content: '' !important;
  position: absolute !important;
  inset: 1px !important;
  border-radius: 29px !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.16), transparent 36%),
    radial-gradient(circle at 50% -10%, rgba(255, 226, 145, 0.14), transparent 44%) !important;
  opacity: 0.88 !important;
  pointer-events: none !important;
}

body.game-ui .roulette-card.participant-card::after {
  content: '' !important;
  position: absolute !important;
  left: 18% !important;
  right: 18% !important;
  bottom: -20px !important;
  height: 56px !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle, rgba(112, 229, 255, 0.2), transparent 66%),
    radial-gradient(circle, rgba(255, 222, 152, 0.12), transparent 74%) !important;
  filter: blur(12px) !important;
  opacity: calc(0.34 + (var(--selected) * 0.5)) !important;
  pointer-events: none !important;
}

body.game-ui .roulette-card.participant-card .roulette-premium-sheen {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

body.game-ui .roulette-card.participant-card .roulette-premium-sheen::before {
  content: '';
  position: absolute;
  top: -20%;
  bottom: -20%;
  width: 42%;
  left: -48%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
  transform: skewX(-18deg);
  opacity: calc(0.16 + (var(--selected) * 0.26));
}

body.game-ui .roulette-card.participant-card > * {
  position: relative;
  z-index: 1;
}

body.game-ui .roulette-card.participant-card.is-active,
body.game-ui .roulette-card.participant-card.active {
  --selected: 1;
  border-color: rgba(182, 244, 255, 0.88) !important;
  box-shadow:
    0 34px 64px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(182, 244, 255, 0.24),
    0 0 54px rgba(112, 229, 255, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
  animation:
    rouletteCardHeroFloat 2.8s ease-in-out infinite,
    rouletteCardHeroGlow 2.4s ease-in-out infinite alternate !important;
}

body.game-ui .avatar-ring {
  position: relative;
  width: 78px !important;
  height: 78px !important;
  padding: 4px !important;
  border-radius: 50% !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.06)),
    radial-gradient(circle at 28% 22%, rgba(147, 249, 255, 0.55), transparent 36%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 14px 24px rgba(0, 0, 0, 0.24) !important;
  flex: 0 0 auto !important;
}

body.game-ui .roulette-avatar {
  display: grid !important;
  place-items: center !important;
}

body.game-ui .roulette-avatar .avatar,
body.game-ui .roulette-avatar-fallback.avatar {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  background: linear-gradient(180deg, rgba(17, 27, 43, 0.95), rgba(10, 18, 29, 0.95)) !important;
}

body.game-ui .roulette-avatar-fallback.avatar {
  display: grid !important;
  place-items: center !important;
  color: rgba(241, 247, 255, 0.96) !important;
  font: 800 22px/1 'Manrope', sans-serif !important;
  text-transform: uppercase !important;
}

body.game-ui .roulette-name.nickname {
  width: 100% !important;
  text-align: center !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1.08 !important;
  letter-spacing: 0.01em !important;
  color: rgba(241, 247, 255, 0.96) !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.26) !important;
  white-space: normal !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  text-overflow: ellipsis !important;
  padding: 0 2px !important;
  min-height: 2.3em !important;
}

body.game-ui .roulette-meta.participant-chip {
  width: 100% !important;
  margin-top: auto !important;
  padding: 8px 10px 9px !important;
  border-radius: 16px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)),
    rgba(10, 18, 29, 0.66) !important;
  border: 1px solid rgba(124, 170, 215, 0.18) !important;
  color: rgba(232, 240, 255, 0.9) !important;
  text-align: center !important;
  display: grid !important;
  gap: 3px !important;
  justify-items: center !important;
  align-content: center !important;
  min-height: 2.8em !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
}

body.game-ui .roulette-meta-label {
  display: block !important;
  font: 700 10px/1.1 'Manrope', sans-serif !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: rgba(186, 214, 240, 0.84) !important;
}

body.game-ui .roulette-meta-value {
  display: block !important;
  font: 800 13px/1.05 'Manrope', sans-serif !important;
  letter-spacing: 0.01em !important;
  color: #f7fcff !important;
}

body.game-ui .roulette-card.participant-card.is-active .roulette-meta.participant-chip,
body.game-ui .roulette-card.participant-card.active .roulette-meta.participant-chip {
  border-color: rgba(214, 244, 255, 0.42) !important;
  color: #fbfeff !important;
  background:
    linear-gradient(180deg, rgba(148, 244, 255, 0.14), rgba(148, 244, 255, 0.03)),
    rgba(8, 20, 31, 0.72) !important;
  box-shadow:
    inset 0 0 18px rgba(176, 244, 255, 0.08),
    0 0 20px rgba(112, 229, 255, 0.08) !important;
}

body.game-ui .maintenance-space::before,
body.game-ui .maintenance-space::after,
body.game-ui .maintenance-core::before,
body.game-ui .maintenance-core::after {
  content: '';
  position: absolute;
  pointer-events: none;
}

body.game-ui .maintenance-space::before {
  inset: 6%;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(104, 192, 255, 0.02),
    rgba(104, 192, 255, 0.18),
    rgba(255, 241, 184, 0.16),
    rgba(104, 192, 255, 0.02)
  );
  filter: blur(18px);
  opacity: 0.78;
  animation: maintenanceAuroraSpin 12s linear infinite;
}

body.game-ui .maintenance-space::after {
  inset: 18%;
  border-radius: 50%;
  border: 1px solid rgba(126, 195, 255, 0.2);
  box-shadow:
    0 0 32px rgba(126, 195, 255, 0.2),
    inset 0 0 18px rgba(255, 241, 184, 0.06);
  animation: maintenanceHaloBreath 4.2s ease-in-out infinite;
}

body.game-ui .maintenance-core::before {
  inset: 10%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 243, 194, 0.18), transparent 58%);
  filter: blur(12px);
  animation: maintenanceCorePulse 3.8s ease-in-out infinite;
}

body.game-ui .maintenance-core::after {
  inset: -4%;
  border-radius: 50%;
  border: 1px solid rgba(126, 195, 255, 0.14);
  opacity: 0.62;
  animation: maintenanceHaloBreath 5.8s ease-in-out infinite reverse;
}

body.game-ui .maintenance-progress::after {
  content: '';
  position: absolute;
  inset: -5px -1px;
  border-radius: 999px;
  border: 1px solid rgba(126, 195, 255, 0.18);
  opacity: 0.44;
  animation: maintenanceHaloBreath 3.6s ease-in-out infinite;
  pointer-events: none;
}

@media (max-width: 760px) {
  body.game-ui {
    --showcase-shell-radius: 26px;
    --showcase-stage-radius: 22px;
    --showcase-mask-height: clamp(294px, 72vw, 340px);
    --showcase-card-width: 112px;
    --showcase-card-height: 208px;
    --showcase-card-gap: 14px;
  }

  body.game-ui .wheel-stage.roulette-mode {
    width: calc(100% + 64px) !important;
    margin-inline: -32px !important;
    padding: 8px !important;
  }

  body.game-ui .wheel-stage.roulette-mode .roulette-stage {
    min-height: clamp(362px, 86vw, 414px) !important;
    padding: 10px !important;
  }

  body.game-ui .roulette-track {
    padding: 0 6px !important;
  }

  body.game-ui .roulette-center-focus {
    width: 204px;
    height: 204px;
  }

  body.game-ui .avatar-ring {
    width: 72px !important;
    height: 72px !important;
  }
}

@keyframes rouletteShowcaseOuterDrift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(2.2%, 1.4%, 0) scale(1.08); }
}

@keyframes rouletteShowcaseOrbA {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.24; }
  50% { transform: translate3d(4%, -2%, 0) scale(1.06); opacity: 0.34; }
}

@keyframes rouletteShowcaseOrbB {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.22; }
  50% { transform: translate3d(-4%, 3%, 0) scale(1.08); opacity: 0.32; }
}

@keyframes rouletteMarkerBeam {
  0%, 100% { opacity: 0.78; transform: translateX(-50%) scaleY(0.96); }
  50% { opacity: 1; transform: translateX(-50%) scaleY(1.04); }
}

@keyframes rouletteCardHeroFloat {
  0%, 100% {
    transform:
      translateY(-12px)
      scale(1.02)
      rotateX(0deg);
  }
  50% {
    transform:
      translateY(-16px)
      scale(1.04)
      rotateX(-1.2deg);
  }
}

@keyframes rouletteCardHeroGlow {
  from {
    box-shadow:
      0 34px 64px rgba(0, 0, 0, 0.42),
      0 0 0 1px rgba(182, 244, 255, 0.2),
      0 0 44px rgba(112, 229, 255, 0.14),
      inset 0 1px 0 rgba(255, 255, 255, 0.12);
  }
  to {
    box-shadow:
      0 38px 70px rgba(0, 0, 0, 0.46),
      0 0 0 1px rgba(212, 246, 255, 0.28),
      0 0 64px rgba(112, 229, 255, 0.22),
      inset 0 1px 0 rgba(255, 255, 255, 0.16);
  }
}

@keyframes maintenanceAuroraSpin {
  from { transform: rotate(0deg) scale(0.98); }
  to { transform: rotate(360deg) scale(1.03); }
}

@keyframes maintenanceHaloBreath {
  0%, 100% { transform: scale(0.96); opacity: 0.34; }
  50% { transform: scale(1.04); opacity: 0.72; }
}

@keyframes maintenanceCorePulse {
  0%, 100% { transform: scale(0.94); opacity: 0.28; }
  50% { transform: scale(1.08); opacity: 0.58; }
}

/* Final roulette polish */
body.game-ui {
  --showcase-shell-radius: 34px;
  --showcase-stage-radius: 30px;
  --showcase-mask-height: clamp(352px, 82vw, 438px);
  --showcase-card-width: clamp(128px, 30vw, 154px);
  --showcase-card-height: clamp(234px, 56vw, 286px);
  --showcase-card-gap: 22px;
}

body.game-ui #detailView,
body.game-ui .wheel-zone {
  overflow-x: clip;
}

body.game-ui .wheel-stage.roulette-mode {
  width: calc(100% + 96px) !important;
  max-width: none !important;
  margin-inline: -48px !important;
  min-height: clamp(420px, 94vw, 540px) !important;
  padding: 16px !important;
  border-radius: 40px !important;
  background:
    radial-gradient(circle at 10% 16%, rgba(95, 150, 255, 0.18), transparent 22%),
    radial-gradient(circle at 86% 14%, rgba(107, 255, 216, 0.14), transparent 24%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)),
    linear-gradient(145deg, rgba(3, 9, 18, 0.98), rgba(8, 18, 33, 0.96) 42%, rgba(12, 31, 57, 0.94)) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  box-shadow:
    0 34px 90px rgba(0, 0, 0, 0.44),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

body.game-ui .wheel-stage.roulette-mode::before {
  background:
    radial-gradient(circle at 18% 12%, rgba(109, 177, 255, 0.18), transparent 26%),
    radial-gradient(circle at 78% 88%, rgba(105, 255, 220, 0.14), transparent 28%) !important;
  filter: blur(40px) !important;
  opacity: 0.85 !important;
}

body.game-ui .wheel-stage.roulette-mode::after {
  opacity: 0.28 !important;
  background:
    linear-gradient(transparent, rgba(255, 255, 255, 0.018), transparent),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.01) 0 1px, transparent 1px 48px) !important;
}

body.game-ui .wheel-stage.roulette-mode .roulette-stage {
  min-height: clamp(430px, 90vw, 506px) !important;
  padding: 22px !important;
  border-radius: var(--showcase-shell-radius) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
    linear-gradient(145deg, rgba(15, 29, 51, 0.84), rgba(6, 15, 28, 0.9)) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  box-shadow:
    0 28px 72px rgba(0, 0, 0, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -16px 34px rgba(0, 0, 0, 0.16) !important;
  backdrop-filter: blur(16px);
}

body.game-ui .wheel-stage.roulette-mode #wheelCanvas,
body.game-ui .wheel-stage.roulette-mode .pointer {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

body.game-ui .wheel-stage.roulette-mode .roulette-stage::before {
  inset: 16px !important;
  border-radius: calc(var(--showcase-shell-radius) - 12px) !important;
  border-color: rgba(255, 255, 255, 0.05) !important;
}

body.game-ui .roulette-shell-art {
  opacity: 0.14 !important;
  filter: blur(40px) !important;
}

body.game-ui .roulette-shell-grid {
  inset: 16px !important;
  opacity: 0.16 !important;
}

body.game-ui .roulette-mask {
  height: var(--showcase-mask-height) !important;
  border-radius: var(--showcase-stage-radius) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)),
    linear-gradient(180deg, rgba(5, 13, 24, 0.92), rgba(7, 15, 27, 0.78)) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow:
    inset 0 22px 44px rgba(255, 255, 255, 0.02),
    inset 0 -22px 40px rgba(0, 0, 0, 0.18),
    0 24px 56px rgba(0, 0, 0, 0.24) !important;
}

body.game-ui .roulette-mask::before,
body.game-ui .roulette-mask::after {
  width: 11% !important;
  z-index: 6 !important;
}

body.game-ui .roulette-track {
  gap: var(--showcase-card-gap) !important;
  padding: 0 44px !important;
}

body.game-ui .roulette-center-focus {
  left: 50% !important;
  top: 50% !important;
  width: calc(var(--showcase-card-width) + 30px) !important;
  height: calc(var(--showcase-card-height) + 34px) !important;
  transform: translate(-50%, -50%) !important;
  border-radius: 36px !important;
  border: 1px solid rgba(184, 229, 255, 0.22) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.01)),
    radial-gradient(circle at 50% 24%, rgba(118, 230, 255, 0.16), transparent 36%),
    radial-gradient(circle at 50% 82%, rgba(255, 215, 132, 0.08), transparent 42%) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.03),
    0 0 42px rgba(94, 224, 255, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  filter: none !important;
  z-index: 2 !important;
}

body.game-ui .roulette-center-focus::before,
body.game-ui .roulette-center-focus::after {
  content: '' !important;
  position: absolute !important;
  pointer-events: none !important;
}

body.game-ui .roulette-center-focus::before {
  inset: 14px 12px !important;
  border-radius: 30px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01)),
    linear-gradient(180deg, rgba(19, 36, 61, 0.42), rgba(10, 18, 30, 0.08)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

body.game-ui .roulette-center-focus::after {
  left: 16%;
  right: 16%;
  bottom: 10px !important;
  height: 34px !important;
  border-radius: 999px !important;
  background: radial-gradient(circle, rgba(109, 229, 255, 0.22), transparent 70%) !important;
  filter: blur(12px) !important;
  opacity: 0.84 !important;
}

body.game-ui .roulette-center-marker {
  top: 18px !important;
  bottom: 18px !important;
  z-index: 7 !important;
}

body.game-ui .roulette-center-marker::before {
  width: 3px !important;
  background:
    linear-gradient(180deg, rgba(130, 236, 255, 0), rgba(182, 246, 255, 0.96) 22%, rgba(182, 246, 255, 0.96) 78%, rgba(130, 236, 255, 0)) !important;
  box-shadow:
    0 0 22px rgba(121, 233, 255, 0.32),
    0 0 58px rgba(111, 202, 255, 0.14) !important;
}

body.game-ui .roulette-center-marker::after {
  content: none !important;
}

body.game-ui .roulette-card.participant-card {
  width: var(--showcase-card-width) !important;
  min-width: var(--showcase-card-width) !important;
  height: var(--showcase-card-height) !important;
  padding: 18px 14px 16px !important;
  border-radius: 32px !important;
  gap: 14px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03)),
    linear-gradient(180deg, rgba(20, 33, 55, 0.96), rgba(8, 13, 22, 0.96)),
    radial-gradient(circle at 50% 0%, rgba(112, 227, 255, 0.09), transparent 32%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow:
    0 24px 36px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -24px 32px rgba(0, 0, 0, 0.16) !important;
  opacity: calc(0.24 + (var(--proximity) * 0.86)) !important;
  filter:
    saturate(calc(0.62 + (var(--proximity) * 0.5)))
    brightness(calc(0.72 + (var(--proximity) * 0.32)))
    blur(calc((1 - var(--proximity)) * 0.42px)) !important;
  transform:
    translateY(calc((1 - var(--proximity)) * 14px - (var(--selected) * 8px)))
    scale(calc(0.82 + (var(--proximity) * 0.2) + (var(--selected) * 0.08)))
    rotateX(calc((1 - var(--proximity)) * 10deg)) !important;
  transition:
    transform 220ms cubic-bezier(0.2, 0.9, 0.2, 1),
    border-color 220ms ease,
    box-shadow 220ms ease,
    opacity 180ms ease,
    filter 220ms ease !important;
}

body.game-ui .roulette-card.participant-card::before {
  inset: 1px !important;
  border-radius: 31px !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.14), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 26%) !important;
  opacity: 0.72 !important;
}

body.game-ui .roulette-card.participant-card::after {
  left: 14% !important;
  right: 14% !important;
  bottom: -18px !important;
  height: 68px !important;
  opacity: calc(0.14 + (var(--selected) * 0.82)) !important;
  background:
    radial-gradient(circle, rgba(116, 228, 255, 0.24), transparent 58%),
    radial-gradient(circle, rgba(255, 228, 158, 0.12), transparent 72%) !important;
  filter: blur(13px) !important;
}

body.game-ui .roulette-card.participant-card .roulette-premium-sheen::before {
  animation: rouletteCardPremiumSheen 3.8s ease-in-out infinite !important;
}

body.game-ui .roulette-card.participant-card.is-active,
body.game-ui .roulette-card.participant-card.active {
  border-color: rgba(205, 245, 255, 0.8) !important;
  box-shadow:
    0 36px 70px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(205, 245, 255, 0.18),
    0 0 54px rgba(112, 229, 255, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
  animation:
    rouletteCardPremiumFloat 3.4s ease-in-out infinite,
    rouletteCardPremiumGlow 2.8s ease-in-out infinite alternate !important;
}

body.game-ui .avatar-ring {
  width: 84px !important;
  height: 84px !important;
  padding: 5px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 16px 26px rgba(0, 0, 0, 0.26) !important;
}

body.game-ui .roulette-avatar-fallback.avatar {
  font-size: 24px !important;
}

body.game-ui .roulette-name.nickname {
  font-size: 17px !important;
  line-height: 1.12 !important;
  min-height: 2.5em !important;
}

body.game-ui .roulette-meta.participant-chip {
  padding: 10px 14px !important;
  border-color: rgba(145, 195, 239, 0.14) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0)),
    rgba(6, 13, 23, 0.78) !important;
  color: rgba(235, 242, 255, 0.92) !important;
  font-size: 13px !important;
}

body.game-ui .roulette-card.participant-card.is-active .roulette-meta.participant-chip,
body.game-ui .roulette-card.participant-card.active .roulette-meta.participant-chip {
  border-color: rgba(205, 245, 255, 0.26) !important;
  box-shadow:
    inset 0 0 16px rgba(177, 240, 255, 0.08),
    0 0 22px rgba(112, 229, 255, 0.06) !important;
}

@media (max-width: 760px) {
  body.game-ui {
    --showcase-mask-height: clamp(340px, 86vw, 390px);
    --showcase-card-width: min(132px, 33vw);
    --showcase-card-height: 240px;
    --showcase-card-gap: 20px;
  }

  body.game-ui .wheel-stage.roulette-mode {
    width: calc(100% + 112px) !important;
    margin-inline: -56px !important;
    min-height: clamp(408px, 100vw, 500px) !important;
    padding: 12px !important;
    border-radius: 36px !important;
  }

  body.game-ui .wheel-stage.roulette-mode .roulette-stage {
    min-height: clamp(396px, 94vw, 470px) !important;
    padding: 18px !important;
    border-radius: 30px !important;
  }

  body.game-ui .roulette-mask::before,
  body.game-ui .roulette-mask::after {
    width: 13.5% !important;
  }

  body.game-ui .roulette-track {
    padding: 0 36px !important;
  }

  body.game-ui .roulette-center-focus {
    width: calc(var(--showcase-card-width) + 24px) !important;
    height: calc(var(--showcase-card-height) + 26px) !important;
  }

  body.game-ui .avatar-ring {
    width: 78px !important;
    height: 78px !important;
  }
}

@keyframes rouletteCardPremiumSheen {
  0%, 100% {
    left: -52%;
    opacity: 0;
  }
  18% {
    opacity: 0.08;
  }
  42% {
    left: 112%;
    opacity: 0.26;
  }
  58% {
    opacity: 0;
  }
}

@keyframes rouletteCardPremiumFloat {
  0%, 100% {
    transform:
      translateY(-8px)
      scale(1.06)
      rotateX(0deg);
  }
  50% {
    transform:
      translateY(-12px)
      scale(1.075)
      rotateX(-0.8deg);
  }
}

@keyframes rouletteCardPremiumGlow {
  from {
    box-shadow:
      0 34px 66px rgba(0, 0, 0, 0.42),
      0 0 0 1px rgba(205, 245, 255, 0.14),
      0 0 38px rgba(112, 229, 255, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.14);
  }
  to {
    box-shadow:
      0 40px 76px rgba(0, 0, 0, 0.48),
      0 0 0 1px rgba(205, 245, 255, 0.22),
      0 0 60px rgba(112, 229, 255, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.18);
  }
}

/* Final roulette motion polish */
body.game-ui {
  --showcase-mask-height: clamp(338px, 79vw, 418px);
}

body.game-ui .wheel-stage.roulette-mode {
  min-height: clamp(404px, 90vw, 518px) !important;
}

body.game-ui .wheel-stage.roulette-mode .roulette-stage {
  min-height: clamp(412px, 86vw, 484px) !important;
  padding: 20px !important;
}

body.game-ui .roulette-stage {
  transition:
    transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 420ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 320ms ease,
    background 420ms ease !important;
}

body.game-ui .roulette-track {
  transition: filter 320ms ease, opacity 260ms ease !important;
}

body.game-ui .roulette-center-focus {
  transition:
    transform 380ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 380ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 280ms ease !important;
}

body.game-ui .roulette-stage.is-idle .roulette-shell-grid {
  animation: rouletteGridDrift 10s ease-in-out infinite alternate;
}

body.game-ui .roulette-stage.is-idle .roulette-center-focus::after {
  animation: rouletteFocusBreath 3.6s ease-in-out infinite;
}

body.game-ui .roulette-stage.is-idle .roulette-card.participant-card.active,
body.game-ui .roulette-stage.is-idle .roulette-card.participant-card.is-active {
  animation:
    rouletteCardPremiumFloat 4.2s ease-in-out infinite,
    rouletteCardPremiumGlow 3.2s ease-in-out infinite alternate !important;
}

body.game-ui .roulette-stage.is-spinning .roulette-center-marker::before {
  animation: rouletteMarkerSprint 1.1s ease-in-out infinite !important;
  box-shadow:
    0 0 28px rgba(121, 233, 255, 0.44),
    0 0 72px rgba(111, 202, 255, 0.22) !important;
}

body.game-ui .roulette-stage.is-spinning .roulette-center-focus {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04),
    0 0 58px rgba(94, 224, 255, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  animation: rouletteFocusSpinPulse 1.8s ease-in-out infinite !important;
}

body.game-ui .roulette-stage.is-spinning .roulette-track {
  filter: saturate(1.06) brightness(1.04);
}

body.game-ui .roulette-card.participant-card {
  transition:
    transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 280ms ease,
    box-shadow 320ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 220ms ease,
    filter 300ms ease !important;
}

body.game-ui .roulette-card.participant-card .roulette-premium-sheen::before {
  animation: rouletteCardPremiumSheen 5.4s ease-in-out infinite !important;
}

body.game-ui .roulette-stage.is-spinning .roulette-card.participant-card {
  opacity: calc(0.18 + (var(--proximity) * 0.9)) !important;
  filter:
    saturate(calc(0.7 + (var(--proximity) * 0.54)))
    brightness(calc(0.7 + (var(--proximity) * 0.36)))
    blur(calc((1 - var(--proximity)) * 0.58px)) !important;
}

body.game-ui .roulette-stage.is-spinning .roulette-card.participant-card.active,
body.game-ui .roulette-stage.is-spinning .roulette-card.participant-card.is-active {
  animation:
    rouletteCardSpinFloat 1.6s ease-in-out infinite,
    rouletteCardPremiumGlow 1.9s ease-in-out infinite alternate !important;
}

body.game-ui .roulette-stage.is-settled .roulette-center-focus::after {
  animation: rouletteFocusSettle 1.8s ease-out 1 both;
}

body.game-ui .roulette-stage.is-settled .roulette-card.participant-card.active,
body.game-ui .roulette-stage.is-settled .roulette-card.participant-card.is-active {
  animation:
    rouletteCardSettleReveal 560ms cubic-bezier(0.18, 1, 0.32, 1) 1,
    rouletteCardPremiumGlow 2.8s ease-in-out infinite alternate !important;
}

@media (max-width: 760px) {
  body.game-ui {
    --showcase-mask-height: clamp(324px, 82vw, 376px);
  }

  body.game-ui .wheel-stage.roulette-mode {
    min-height: clamp(394px, 94vw, 478px) !important;
  }

  body.game-ui .wheel-stage.roulette-mode .roulette-stage {
    min-height: clamp(384px, 90vw, 452px) !important;
    padding: 17px !important;
  }
}

@keyframes rouletteGridDrift {
  from { transform: translate3d(0, 0, 0); opacity: 0.14; }
  to { transform: translate3d(0, 6px, 0); opacity: 0.2; }
}

@keyframes rouletteFocusBreath {
  0%, 100% {
    transform: scale(0.96);
    opacity: 0.68;
  }
  50% {
    transform: scale(1.02);
    opacity: 0.98;
  }
}

@keyframes rouletteMarkerSprint {
  0%, 100% {
    opacity: 0.72;
    transform: translateX(-50%) scaleY(0.94);
  }
  50% {
    opacity: 1;
    transform: translateX(-50%) scaleY(1.08);
  }
}

@keyframes rouletteFocusSpinPulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(0.985);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.02);
  }
}

@keyframes rouletteCardSpinFloat {
  0%, 100% {
    transform:
      translateY(-9px)
      scale(1.055)
      rotateX(0deg);
  }
  50% {
    transform:
      translateY(-14px)
      scale(1.085)
      rotateX(-1deg);
  }
}

@keyframes rouletteCardSettleReveal {
  0% {
    transform:
      translateY(-16px)
      scale(1.11)
      rotateX(-1deg);
  }
  100% {
    transform:
      translateY(-8px)
      scale(1.06)
      rotateX(0deg);
  }
}

@keyframes rouletteFocusSettle {
  0% {
    opacity: 1;
    transform: scale(1.05);
  }
  100% {
    opacity: 0.84;
    transform: scale(1);
  }
}

/* Roulette performance pass */
body.game-ui .roulette-shell-art {
  display: none !important;
}

body.game-ui .wheel-stage.roulette-mode .roulette-stage {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.game-ui .roulette-card.participant-card {
  contain: layout paint style !important;
  will-change: transform, opacity !important;
  box-shadow:
    0 18px 28px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 -14px 18px rgba(0, 0, 0, 0.12) !important;
  filter:
    saturate(calc(0.76 + (var(--proximity) * 0.34)))
    brightness(calc(0.78 + (var(--proximity) * 0.22))) !important;
}

body.game-ui .roulette-card.participant-card::after {
  height: 54px !important;
  filter: blur(8px) !important;
  opacity: calc(0.08 + (var(--selected) * 0.4)) !important;
}

body.game-ui .roulette-card.participant-card .roulette-premium-sheen::before {
  animation-duration: 6.4s !important;
  opacity: 0.14 !important;
}

body.game-ui .roulette-stage.is-spinning .roulette-track {
  filter: none !important;
}

body.game-ui .roulette-stage.is-spinning .roulette-card.participant-card {
  opacity: calc(0.22 + (var(--proximity) * 0.82)) !important;
  filter:
    saturate(calc(0.8 + (var(--proximity) * 0.28)))
    brightness(calc(0.78 + (var(--proximity) * 0.2))) !important;
}

body.game-ui .roulette-stage.is-spinning .roulette-card.participant-card.active,
body.game-ui .roulette-stage.is-spinning .roulette-card.participant-card.is-active {
  animation: rouletteCardPremiumGlow 1.8s ease-in-out infinite alternate !important;
}

body.game-ui .roulette-stage.is-idle .roulette-card.participant-card.active,
body.game-ui .roulette-stage.is-idle .roulette-card.participant-card.is-active {
  animation: rouletteCardPremiumGlow 3.2s ease-in-out infinite alternate !important;
}

body.game-ui .roulette-stage.is-settled .roulette-card.participant-card.active,
body.game-ui .roulette-stage.is-settled .roulette-card.participant-card.is-active {
  animation:
    rouletteCardSettleReveal 420ms cubic-bezier(0.18, 1, 0.32, 1) 1,
    rouletteCardPremiumGlow 2.6s ease-in-out infinite alternate !important;
}

/* Detail loading guard + final roulette stabilization */
body.game-ui #detailView.is-loading .wheel-stage {
  position: relative;
  min-height: clamp(312px, 72vw, 428px);
}

body.game-ui #detailView.is-loading .wheel-stage > * {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.game-ui #detailView.is-loading .wheel-stage::after {
  content: 'Загружаем розыгрыш...';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  border-radius: 30px;
  color: rgba(238, 247, 255, 0.92);
  font-size: clamp(18px, 2.8vw, 24px);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-align: center;
  background:
    radial-gradient(circle at 50% 34%, rgba(122, 221, 255, 0.14), transparent 34%),
    linear-gradient(180deg, rgba(6, 14, 27, 0.9), rgba(8, 18, 32, 0.82));
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 18px 40px rgba(0, 0, 0, 0.24);
  z-index: 2;
}

body.game-ui #detailView.is-loading .wheel-stage[data-loading-visual='roulette']::after {
  content: 'Подгружаем участников...';
  inset: auto 16px 14px 16px;
  padding: 10px 14px;
  min-height: 44px;
  border-radius: 18px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background:
    linear-gradient(180deg, rgba(20, 43, 68, 0.94), rgba(10, 24, 39, 0.96)),
    radial-gradient(circle at 50% 50%, rgba(132, 224, 255, 0.16), transparent 70%);
  border: 1px solid rgba(171, 226, 255, 0.16);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 12px 24px rgba(0, 0, 0, 0.2);
}

body.game-ui #detailView.is-loading .wheel-stage[data-loading-visual='roulette'] > .roulette-stage.loading-skeleton {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
}

body.game-ui #detailView.is-loading .wheel-metrics,
body.game-ui #detailView.is-loading .winner-card,
body.game-ui #detailView.is-loading .media-card,
body.game-ui #detailView.is-loading .donate-card,
body.game-ui #detailView.is-loading .donations-card,
body.game-ui #detailView.is-loading .participants-card {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.game-ui .roulette-stage.loading-skeleton .roulette-track {
  filter: none !important;
  opacity: 1 !important;
}

body.game-ui .roulette-stage.loading-skeleton .roulette-card.loading-card {
  transition: none !important;
}

body.game-ui .roulette-stage.loading-skeleton .roulette-card.loading-card::after {
  opacity: 0.26 !important;
}

body.game-ui .roulette-stage.loading-skeleton .roulette-loading-line,
body.game-ui .roulette-stage.loading-skeleton .roulette-loading-chip,
body.game-ui .roulette-stage.loading-skeleton .roulette-avatar-fallback.loading-avatar {
  color: transparent !important;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.08), rgba(174, 229, 255, 0.24), rgba(255, 255, 255, 0.08)) !important;
  background-size: 220% 100% !important;
  animation: rouletteLoadingPulse 1.15s ease-in-out infinite !important;
}

body.game-ui .roulette-stage.loading-skeleton .roulette-avatar-fallback.loading-avatar {
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

body.game-ui .roulette-stage.loading-skeleton .roulette-loading-line {
  width: 74%;
  min-height: 1.1em;
  border-radius: 999px;
}

body.game-ui .roulette-stage.loading-skeleton .roulette-loading-chip {
  width: 82%;
  min-height: 30px;
  border-radius: 999px;
}

@keyframes rouletteLoadingPulse {
  0% {
    background-position: 0% 50%;
    opacity: 0.52;
  }
  50% {
    background-position: 100% 50%;
    opacity: 0.94;
  }
  100% {
    background-position: 0% 50%;
    opacity: 0.52;
  }
}

body.game-ui .roulette-shell-grid,
body.game-ui .roulette-center-focus::after,
body.game-ui .roulette-card.participant-card .roulette-premium-sheen,
body.game-ui .roulette-stage.is-spinning .roulette-card.participant-card.active,
body.game-ui .roulette-stage.is-spinning .roulette-card.participant-card.is-active,
body.game-ui .roulette-stage.is-idle .roulette-card.participant-card.active,
body.game-ui .roulette-stage.is-idle .roulette-card.participant-card.is-active,
body.game-ui .roulette-stage.is-settled .roulette-card.participant-card.active,
body.game-ui .roulette-stage.is-settled .roulette-card.participant-card.is-active {
  animation: none !important;
}

body.game-ui .roulette-card.participant-card,
body.game-ui .roulette-stage.is-spinning .roulette-card.participant-card,
body.game-ui .roulette-stage.is-idle .roulette-card.participant-card {
  transition: none !important;
}

body.game-ui .roulette-card.participant-card {
  opacity: calc(0.14 + (var(--proximity) * 0.9)) !important;
  filter:
    saturate(calc(0.84 + (var(--proximity) * 0.18)))
    brightness(calc(0.82 + (var(--proximity) * 0.16))) !important;
}

body.game-ui .roulette-card.participant-card.is-near {
  border-color: rgba(191, 231, 255, 0.2) !important;
  box-shadow:
    0 18px 28px rgba(0, 0, 0, 0.26),
    0 0 0 1px rgba(167, 232, 255, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

body.game-ui .roulette-card.participant-card.active,
body.game-ui .roulette-card.participant-card.is-active {
  border-color: rgba(190, 239, 255, 0.52) !important;
  box-shadow:
    0 24px 34px rgba(0, 0, 0, 0.32),
    0 0 0 1px rgba(164, 236, 255, 0.2),
    0 0 34px rgba(110, 225, 255, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

/* Telegram WebView roulette stabilization */
body.game-ui {
  --showcase-mask-height: clamp(288px, 70vw, 336px);
  --showcase-card-width: clamp(118px, 27vw, 136px);
  --showcase-card-height: clamp(206px, 44vw, 238px);
  --showcase-card-gap: 16px;
}

body.game-ui .wheel-stage.roulette-mode {
  width: 100% !important;
  margin-inline: 0 !important;
  min-height: clamp(334px, 78vw, 408px) !important;
  padding: 10px !important;
  border-radius: 30px !important;
  overflow: hidden !important;
}

body.game-ui .wheel-stage.roulette-mode::before,
body.game-ui .wheel-stage.roulette-mode::after {
  filter: none !important;
  animation: none !important;
  opacity: 0.34 !important;
}

body.game-ui .wheel-stage.roulette-mode .roulette-stage {
  min-height: clamp(320px, 72vw, 382px) !important;
  padding: 12px !important;
  border-radius: 24px !important;
  background: linear-gradient(180deg, rgba(10, 18, 32, 0.96), rgba(7, 13, 24, 0.94)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 18px 36px rgba(0, 0, 0, 0.28) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.game-ui .roulette-mask {
  height: var(--showcase-mask-height) !important;
  border-radius: 20px !important;
  background: linear-gradient(180deg, rgba(6, 13, 24, 0.92), rgba(7, 14, 25, 0.82)) !important;
  box-shadow:
    inset 0 16px 28px rgba(255, 255, 255, 0.02),
    inset 0 -16px 28px rgba(0, 0, 0, 0.16) !important;
}

body.game-ui .roulette-mask::before,
body.game-ui .roulette-mask::after {
  width: 7% !important;
}

body.game-ui .roulette-shell-grid,
body.game-ui .roulette-center-focus::after,
body.game-ui .roulette-premium-sheen {
  display: none !important;
}

body.game-ui .roulette-center-focus {
  width: calc(var(--showcase-card-width) + 20px) !important;
  height: calc(var(--showcase-card-height) + 20px) !important;
  border-radius: 28px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)),
    radial-gradient(circle at 50% 24%, rgba(118, 230, 255, 0.12), transparent 36%) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04),
    0 0 24px rgba(94, 224, 255, 0.08) !important;
}

body.game-ui .roulette-center-focus::before {
  inset: 10px !important;
  border-radius: 22px !important;
}

body.game-ui .roulette-center-marker::before {
  animation: none !important;
  box-shadow: 0 0 18px rgba(121, 233, 255, 0.28) !important;
}

body.game-ui .roulette-track {
  gap: var(--showcase-card-gap) !important;
  padding: 0 18px !important;
}

body.game-ui .roulette-card.participant-card {
  transform:
    translateY(calc((1 - var(--proximity)) * 8px - (var(--selected) * 6px)))
    scale(calc(0.9 + (var(--proximity) * 0.1) + (var(--selected) * 0.04))) !important;
  opacity: calc(0.76 + (var(--proximity) * 0.22)) !important;
  filter: none !important;
  background:
    radial-gradient(128% 104% at 50% -16%, rgba(203, 241, 255, 0.38), transparent 58%),
    radial-gradient(92% 90% at 50% 114%, rgba(132, 184, 255, 0.24), transparent 66%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.08) 24%, rgba(255, 255, 255, 0) 42%),
    linear-gradient(180deg, rgba(41, 70, 107, 1), rgba(19, 35, 60, 1)) !important;
  border-color: rgba(177, 222, 255, 0.4) !important;
  transition:
    transform 90ms linear,
    opacity 90ms linear,
    border-color 140ms ease,
    box-shadow 140ms ease !important;
  box-shadow:
    0 20px 34px rgba(3, 8, 17, 0.28),
    0 0 0 1px rgba(160, 217, 255, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -14px 24px rgba(8, 18, 31, 0.14) !important;
}

body.game-ui .roulette-card.participant-card::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0) 44%),
    radial-gradient(circle at 50% 0%, rgba(209, 243, 255, 0.34), rgba(188, 236, 255, 0) 58%) !important;
  opacity: calc(0.44 + (var(--proximity) * 0.24) + (var(--selected) * 0.12)) !important;
}

body.game-ui .roulette-card.participant-card::after {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0)),
    rgba(21, 35, 54, 0.62) !important;
  border-color: rgba(166, 205, 240, 0.2) !important;
  filter: none !important;
  opacity: calc(0.08 + (var(--proximity) * 0.08) + (var(--selected) * 0.05)) !important;
}

body.game-ui .roulette-card.participant-card.is-near {
  border-color: rgba(202, 236, 255, 0.48) !important;
  box-shadow:
    0 24px 36px rgba(3, 8, 17, 0.3),
    0 0 0 1px rgba(180, 230, 255, 0.16),
    0 0 22px rgba(116, 219, 255, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -14px 24px rgba(7, 16, 28, 0.12) !important;
}

body.game-ui .roulette-card.participant-card.active,
body.game-ui .roulette-card.participant-card.is-active {
  border-color: rgba(214, 244, 255, 0.72) !important;
  box-shadow:
    0 28px 42px rgba(3, 8, 17, 0.34),
    0 0 0 1px rgba(192, 238, 255, 0.3),
    0 0 30px rgba(120, 227, 255, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 -14px 24px rgba(8, 18, 31, 0.12) !important;
}

body.game-ui .roulette-avatar {
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 248, 210, 0.68), rgba(255, 246, 204, 0) 30%),
    linear-gradient(180deg, rgba(146, 220, 255, 0.98), rgba(43, 122, 184, 1)) !important;
  border-color: rgba(189, 232, 255, 0.72) !important;
  box-shadow:
    0 14px 24px rgba(0, 0, 0, 0.22),
    0 0 0 1px rgba(180, 230, 255, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}

body.game-ui .roulette-avatar .avatar,
body.game-ui .roulette-avatar-fallback.avatar {
  color: rgba(245, 251, 255, 0.98) !important;
  text-shadow: 0 2px 10px rgba(6, 12, 21, 0.22) !important;
}

body.game-ui .roulette-name.nickname {
  color: rgba(246, 251, 255, 0.98) !important;
  text-shadow: 0 3px 12px rgba(5, 10, 18, 0.28) !important;
}

body.game-ui .roulette-meta.participant-chip {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0)),
    rgba(28, 45, 65, 0.88) !important;
  border-color: rgba(180, 221, 255, 0.28) !important;
  color: rgba(244, 249, 255, 0.98) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 8px 14px rgba(2, 8, 16, 0.14) !important;
}

body.game-ui .roulette-card.participant-card.active .roulette-meta.participant-chip,
body.game-ui .roulette-card.participant-card.is-active .roulette-meta.participant-chip {
  background:
    linear-gradient(180deg, rgba(222, 245, 255, 0.18), rgba(222, 245, 255, 0.04)),
    rgba(19, 31, 46, 0.84) !important;
  border-color: rgba(194, 239, 255, 0.34) !important;
  color: rgba(252, 253, 255, 0.98) !important;
}

body.game-ui .roulette-stage.is-spinning .roulette-track {
  filter: none !important;
  opacity: 1 !important;
}

body.game-ui .roulette-stage.is-spinning .roulette-card.participant-card,
body.game-ui .roulette-stage.is-idle .roulette-card.participant-card,
body.game-ui .roulette-stage.is-settled .roulette-card.participant-card {
  filter: none !important;
}

body.game-ui .roulette-stage.is-spinning .roulette-card.participant-card.active,
body.game-ui .roulette-stage.is-spinning .roulette-card.participant-card.is-active,
body.game-ui .roulette-stage.is-idle .roulette-card.participant-card.active,
body.game-ui .roulette-stage.is-idle .roulette-card.participant-card.is-active,
body.game-ui .roulette-stage.is-settled .roulette-card.participant-card.active,
body.game-ui .roulette-stage.is-settled .roulette-card.participant-card.is-active {
  animation: none !important;
}

@media (max-width: 760px) {
  body.game-ui {
    --showcase-mask-height: clamp(280px, 74vw, 320px);
    --showcase-card-width: min(124px, 31vw);
    --showcase-card-height: 220px;
    --showcase-card-gap: 14px;
  }

  body.game-ui .wheel-stage.roulette-mode {
    min-height: clamp(318px, 80vw, 382px) !important;
    padding: 8px !important;
  }

  body.game-ui .wheel-stage.roulette-mode .roulette-stage {
    min-height: clamp(304px, 74vw, 356px) !important;
    padding: 10px !important;
  }

  body.game-ui .roulette-track {
    padding: 0 14px !important;
  }
}

body.game-ui .pointer-metric-card {
  background:
    radial-gradient(140% 200% at 88% -34%, rgba(95, 188, 255, 0.18), transparent 58%),
    linear-gradient(166deg, rgba(18, 40, 61, 0.96), rgba(9, 24, 40, 0.98)) !important;
}

body.game-ui .pointer-name-stage {
  min-height: 1.7em;
}

body.game-ui .pointer-name {
  font-size: clamp(18px, 3vw, 24px) !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em !important;
  color: rgba(245, 251, 255, 0.98) !important;
  text-shadow: 0 3px 16px rgba(0, 0, 0, 0.32) !important;
}

body.game-ui .pointer-name.ghost {
  color: rgba(190, 229, 255, 0.78) !important;
}

body.game-ui .wheel-stage.roulette-mode .roulette-stage {
  perspective: none !important;
}

body.game-ui .roulette-shell-art,
body.game-ui .roulette-shell-grid {
  display: none !important;
}

body.game-ui .roulette-track,
body.game-ui .roulette-stage.is-spinning .roulette-track,
body.game-ui .roulette-stage.is-idle .roulette-track,
body.game-ui .roulette-stage.is-settled .roulette-track {
  transition: none !important;
  filter: none !important;
  opacity: 1 !important;
  will-change: transform !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
}

body.game-ui .roulette-card.participant-card,
body.game-ui .roulette-stage.is-spinning .roulette-card.participant-card,
body.game-ui .roulette-stage.is-idle .roulette-card.participant-card,
body.game-ui .roulette-stage.is-settled .roulette-card.participant-card {
  transition: none !important;
  will-change: auto !important;
  contain: layout paint style !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  transform-style: flat !important;
}

body.game-ui .pay-modal {
  width: min(420px, 100%) !important;
  max-height: min(72dvh, 560px) !important;
  overflow-y: auto !important;
}

body.game-ui .pay-ton-connect {
  margin-top: 8px;
}

body.game-ui .pay-ton-meta {
  font-size: 12px;
  text-align: center;
}

body.game-ui .roulette-meta.participant-chip {
  font-size: inherit !important;
  letter-spacing: 0 !important;
}

/* Final roulette motion pass for Telegram WebView */
body.game-ui .roulette-stage.is-idle .roulette-card.participant-card,
body.game-ui .roulette-stage.is-spinning .roulette-card.participant-card,
body.game-ui .roulette-stage.is-settled .roulette-card.participant-card {
  transition: none !important;
  animation: none !important;
  filter: none !important;
  transform: translateY(calc((1 - var(--proximity)) * 4px)) scale(calc(0.9 + (var(--proximity) * 0.12) + (var(--selected) * 0.05))) !important;
  opacity: calc(0.24 + (var(--proximity) * 0.76)) !important;
  box-shadow:
    0 16px 24px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
}

body.game-ui .roulette-stage.is-spinning .roulette-center-marker::before,
body.game-ui .roulette-stage.is-spinning .roulette-center-focus,
body.game-ui .roulette-stage.is-idle .roulette-shell-grid,
body.game-ui .roulette-stage.is-idle .roulette-center-focus::after {
  animation: none !important;
}

body.game-ui .roulette-stage.is-spinning .roulette-track,
body.game-ui .roulette-stage.is-idle .roulette-track {
  filter: none !important;
}

body.game-ui .roulette-card.participant-card .roulette-meta-label,
body.game-ui .roulette-card.participant-card .roulette-meta-value {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

@media (max-width: 640px) {
  body.game-ui .pay-modal-layer {
    align-items: flex-end !important;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.game-ui .pay-modal {
    width: min(100%, 420px) !important;
    max-height: min(68dvh, 520px) !important;
  }

  body.game-ui .roulette-meta.participant-chip {
    min-height: 2.65em !important;
    padding: 7px 8px 8px !important;
  }

  body.game-ui .roulette-meta-value {
    font-size: 12px !important;
  }
}

/* Roulette v3 — transform-only motion, single center highlight */
body.game-ui .roulette-track {
  transform: translate3d(0, -50%, 0);
  transition: none !important;
  will-change: transform;
}

body.game-ui .roulette-card.participant-card {
  transform: translateY(0) scale(0.92) !important;
  opacity: 0.72 !important;
  transition: none !important;
  animation: none !important;
  filter: none !important;
}

body.game-ui .roulette-card.participant-card.is-near {
  opacity: 0.84 !important;
  transform: translateY(0) scale(0.96) !important;
}

body.game-ui .roulette-card.participant-card.is-center,
body.game-ui .roulette-card.participant-card.active,
body.game-ui .roulette-card.participant-card.is-active {
  transform: translateY(-4px) scale(1.04) !important;
  opacity: 1 !important;
  border-color: rgba(214, 244, 255, 0.72) !important;
  box-shadow:
    0 28px 42px rgba(3, 8, 17, 0.34),
    0 0 0 1px rgba(192, 238, 255, 0.3),
    0 0 30px rgba(120, 227, 255, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;
}

body.game-ui .roulette-stage.is-spinning .roulette-card.participant-card,
body.game-ui .roulette-stage.is-idle .roulette-card.participant-card,
body.game-ui .roulette-stage.is-settled .roulette-card.participant-card {
  transition: none !important;
  animation: none !important;
  filter: none !important;
}

body.game-ui .roulette-stage.is-spinning .roulette-center-marker::before,
body.game-ui .roulette-stage.is-spinning .roulette-center-focus,
body.game-ui .roulette-stage.is-idle .roulette-center-focus::after {
  animation: none !important;
}

/* Roulette v4 — bright participant cards, lighter stage */
body.game-ui .roulette-mask {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)),
    linear-gradient(180deg, rgba(12, 24, 42, 0.58), rgba(10, 20, 36, 0.42)) !important;
  box-shadow:
    inset 0 12px 24px rgba(255, 255, 255, 0.04),
    inset 0 -10px 18px rgba(0, 0, 0, 0.08),
    0 18px 46px rgba(0, 0, 0, 0.18) !important;
}

body.game-ui .roulette-mask::before {
  background: linear-gradient(90deg, rgba(5, 11, 23, 0.55), rgba(5, 11, 23, 0)) !important;
}

body.game-ui .roulette-mask::after {
  background: linear-gradient(270deg, rgba(5, 11, 23, 0.55), rgba(5, 11, 23, 0)) !important;
}

body.game-ui .roulette-card.participant-card {
  --proximity: 1 !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.08)),
    linear-gradient(180deg, rgba(34, 58, 92, 0.98), rgba(16, 28, 48, 0.96)) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  box-shadow:
    0 20px 32px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
  opacity: 0.96 !important;
  filter: saturate(1.08) brightness(1.06) !important;
  transform: translateY(0) scale(0.94) !important;
}

body.game-ui .roulette-card.participant-card::before {
  opacity: 0.42 !important;
}

body.game-ui .roulette-card.participant-card::after {
  opacity: 0.18 !important;
}

body.game-ui .roulette-card.participant-card.is-near {
  opacity: 0.99 !important;
  transform: translateY(0) scale(0.98) !important;
  border-color: rgba(210, 240, 255, 0.38) !important;
}

body.game-ui .roulette-card.participant-card.is-center,
body.game-ui .roulette-card.participant-card.active,
body.game-ui .roulette-card.participant-card.is-active {
  transform: translateY(-5px) scale(1.06) !important;
  opacity: 1 !important;
  filter: saturate(1.14) brightness(1.12) !important;
  border-color: rgba(220, 248, 255, 0.82) !important;
  box-shadow:
    0 30px 48px rgba(3, 8, 17, 0.28),
    0 0 0 1px rgba(210, 245, 255, 0.42),
    0 0 36px rgba(120, 227, 255, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.34) !important;
}

body.game-ui .roulette-card.participant-card .roulette-meta-label,
body.game-ui .roulette-card.participant-card .roulette-meta-value {
  opacity: 1 !important;
  color: rgba(244, 251, 255, 0.96) !important;
}

body.game-ui .roulette-card.participant-card.active .roulette-meta.participant-chip,
body.game-ui .roulette-card.participant-card.is-active .roulette-meta.participant-chip,
body.game-ui .roulette-card.participant-card.is-center .roulette-meta.participant-chip {
  background: rgba(255, 255, 255, 0.16) !important;
  border-color: rgba(220, 248, 255, 0.42) !important;
  color: rgba(255, 255, 255, 0.98) !important;
}

body.game-ui .roulette-stage.is-spinning .roulette-card.participant-card,
body.game-ui .roulette-stage.is-idle .roulette-card.participant-card,
body.game-ui .roulette-stage.is-settled .roulette-card.participant-card {
  opacity: 0.96 !important;
  filter: saturate(1.08) brightness(1.06) !important;
}

body.game-ui .roulette-stage.is-spinning .roulette-card.participant-card.is-center,
body.game-ui .roulette-stage.is-spinning .roulette-card.participant-card.active,
body.game-ui .roulette-stage.is-spinning .roulette-card.participant-card.is-active,
body.game-ui .roulette-stage.is-idle .roulette-card.participant-card.is-center,
body.game-ui .roulette-stage.is-idle .roulette-card.participant-card.active,
body.game-ui .roulette-stage.is-idle .roulette-card.participant-card.is-active,
body.game-ui .roulette-stage.is-settled .roulette-card.participant-card.is-center,
body.game-ui .roulette-stage.is-settled .roulette-card.participant-card.active,
body.game-ui .roulette-stage.is-settled .roulette-card.participant-card.is-active {
  opacity: 1 !important;
  filter: saturate(1.14) brightness(1.12) !important;
}

/* Roulette v5 — smooth center highlight via --center-proximity */
body.game-ui .roulette-card.participant-card {
  --center-proximity: 0;
  transition:
    opacity 140ms ease,
    transform 140ms ease,
    filter 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease !important;
  opacity: calc(0.86 + var(--center-proximity) * 0.14) !important;
  filter:
    saturate(calc(1.02 + var(--center-proximity) * 0.12))
    brightness(calc(1.02 + var(--center-proximity) * 0.1)) !important;
  transform:
    translateY(calc(var(--center-proximity) * -5px))
    scale(calc(0.93 + var(--center-proximity) * 0.13)) !important;
  border-color: rgba(255, 255, 255, calc(0.18 + var(--center-proximity) * 0.52)) !important;
  box-shadow:
    0 calc(16px + var(--center-proximity) * 14px) calc(28px + var(--center-proximity) * 18px) rgba(0, 0, 0, calc(0.2 - var(--center-proximity) * 0.06)),
    0 0 0 1px rgba(210, 245, 255, calc(var(--center-proximity) * 0.34)),
    0 0 calc(18px + var(--center-proximity) * 22px) rgba(120, 227, 255, calc(var(--center-proximity) * 0.28)),
    inset 0 1px 0 rgba(255, 255, 255, calc(0.12 + var(--center-proximity) * 0.22)) !important;
}

body.game-ui .roulette-card.participant-card.is-near {
  opacity: calc(0.9 + var(--center-proximity) * 0.1) !important;
}

body.game-ui .roulette-card.participant-card.is-center,
body.game-ui .roulette-card.participant-card.active,
body.game-ui .roulette-card.participant-card.is-active {
  opacity: 1 !important;
}

body.game-ui .roulette-card.participant-card .roulette-name {
  opacity: calc(0.82 + var(--center-proximity) * 0.18) !important;
  transition: opacity 140ms ease !important;
}

body.game-ui .roulette-card.participant-card.is-center .roulette-name,
body.game-ui .roulette-card.participant-card.active .roulette-name,
body.game-ui .roulette-card.participant-card.is-active .roulette-name {
  opacity: 1 !important;
}

body.game-ui .roulette-card.participant-card .roulette-avatar {
  transform: scale(calc(0.96 + var(--center-proximity) * 0.08));
  transition: transform 140ms ease !important;
}

body.game-ui .roulette-stage.is-spinning .roulette-card.participant-card,
body.game-ui .roulette-stage.is-idle .roulette-card.participant-card,
body.game-ui .roulette-stage.is-settled .roulette-card.participant-card {
  transition:
    opacity 140ms ease,
    transform 140ms ease,
    filter 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease !important;
}

/* Roulette v6 — DOM-synced proximity, neutralize legacy binary highlight */
body.game-ui .roulette-card.participant-card {
  --center-proximity: 0;
  transition:
    opacity 280ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 280ms cubic-bezier(0.4, 0, 0.2, 1),
    filter 280ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 280ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1) !important;
  transform:
    translateY(calc(var(--center-proximity) * -6px))
    scale(calc(0.92 + var(--center-proximity) * 0.14)) !important;
  opacity: calc(0.84 + var(--center-proximity) * 0.16) !important;
  filter:
    saturate(calc(1 + var(--center-proximity) * 0.14))
    brightness(calc(1 + var(--center-proximity) * 0.12)) !important;
  border-color: rgba(255, 255, 255, calc(0.16 + var(--center-proximity) * 0.56)) !important;
  box-shadow:
    0 calc(14px + var(--center-proximity) * 16px) calc(24px + var(--center-proximity) * 20px) rgba(0, 0, 0, calc(0.22 - var(--center-proximity) * 0.08)),
    0 0 0 1px rgba(210, 245, 255, calc(var(--center-proximity) * 0.38)),
    0 0 calc(16px + var(--center-proximity) * 26px) rgba(120, 227, 255, calc(var(--center-proximity) * 0.32)),
    inset 0 1px 0 rgba(255, 255, 255, calc(0.1 + var(--center-proximity) * 0.24)) !important;
}

body.game-ui .roulette-card.participant-card.is-center,
body.game-ui .roulette-card.participant-card.is-near,
body.game-ui .roulette-card.participant-card.active,
body.game-ui .roulette-card.participant-card.is-active,
body.game-ui .roulette-stage.is-spinning .roulette-card.participant-card.is-center,
body.game-ui .roulette-stage.is-spinning .roulette-card.participant-card.active,
body.game-ui .roulette-stage.is-spinning .roulette-card.participant-card.is-active,
body.game-ui .roulette-stage.is-idle .roulette-card.participant-card.is-center,
body.game-ui .roulette-stage.is-idle .roulette-card.participant-card.active,
body.game-ui .roulette-stage.is-idle .roulette-card.participant-card.is-active,
body.game-ui .roulette-stage.is-settled .roulette-card.participant-card.is-center,
body.game-ui .roulette-stage.is-settled .roulette-card.participant-card.active,
body.game-ui .roulette-stage.is-settled .roulette-card.participant-card.is-active {
  transform:
    translateY(calc(var(--center-proximity) * -6px))
    scale(calc(0.92 + var(--center-proximity) * 0.14)) !important;
  opacity: calc(0.84 + var(--center-proximity) * 0.16) !important;
  filter:
    saturate(calc(1 + var(--center-proximity) * 0.14))
    brightness(calc(1 + var(--center-proximity) * 0.12)) !important;
  animation: none !important;
}

body.game-ui .roulette-card.participant-card .roulette-name {
  opacity: calc(0.78 + var(--center-proximity) * 0.22) !important;
  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

body.game-ui .roulette-card.participant-card .roulette-avatar {
  transform: scale(calc(0.94 + var(--center-proximity) * 0.1)) !important;
  transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

body.game-ui .roulette-stage.is-spinning .roulette-card.participant-card {
  transition:
    opacity 70ms linear,
    transform 70ms linear,
    filter 70ms linear,
    border-color 70ms linear,
    box-shadow 70ms linear !important;
}

body.game-ui .roulette-stage.is-idle .roulette-card.participant-card,
body.game-ui .roulette-stage.is-settled .roulette-card.participant-card {
  transition:
    opacity 320ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 320ms cubic-bezier(0.4, 0, 0.2, 1),
    filter 320ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 320ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 320ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

body.game-ui .roulette-stage.is-spinning .roulette-card.participant-card .roulette-name,
body.game-ui .roulette-stage.is-spinning .roulette-card.participant-card .roulette-avatar {
  transition-duration: 70ms !important;
  transition-timing-function: linear !important;
}

body.game-ui .roulette-stage.is-idle .roulette-card.participant-card .roulette-name,
body.game-ui .roulette-stage.is-settled .roulette-card.participant-card .roulette-name,
body.game-ui .roulette-stage.is-idle .roulette-card.participant-card .roulette-avatar,
body.game-ui .roulette-stage.is-settled .roulette-card.participant-card .roulette-avatar {
  transition-duration: 320ms !important;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Roulette highlight v7 — single source of truth (overrides v3–v6 conflicts) */
body.game-ui .roulette-stage .roulette-mask .roulette-track .roulette-card.participant-card:not(.loading-card) {
  --center-proximity: 0;
  transform-origin: center center !important;
  transition: none !important;
  animation: none !important;
  opacity: calc(0.55 + var(--center-proximity) * 0.45) !important;
  filter:
    saturate(calc(0.86 + var(--center-proximity) * 0.34))
    brightness(calc(0.82 + var(--center-proximity) * 0.28)) !important;
  transform:
    translateY(calc(var(--center-proximity) * -12px))
    scale(calc(0.84 + var(--center-proximity) * 0.24)) !important;
  border-color: rgba(150, 230, 255, calc(0.1 + var(--center-proximity) * 0.86)) !important;
  border-width: calc(1px + var(--center-proximity) * 1.5px) !important;
  box-shadow:
    0 calc(8px + var(--center-proximity) * 28px) calc(16px + var(--center-proximity) * 40px) rgba(0, 0, 0, calc(0.34 - var(--center-proximity) * 0.14)),
    0 0 0 calc(1px + var(--center-proximity) * 2px) rgba(160, 245, 255, calc(var(--center-proximity) * 0.72)),
    0 0 calc(12px + var(--center-proximity) * 56px) rgba(70, 220, 255, calc(var(--center-proximity) * 0.62)),
    inset 0 1px 0 rgba(255, 255, 255, calc(0.06 + var(--center-proximity) * 0.42)) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, calc(0.08 + var(--center-proximity) * 0.28)), rgba(255, 255, 255, calc(0.02 + var(--center-proximity) * 0.1))),
    linear-gradient(180deg, rgba(22, 42, 72, calc(0.94 - var(--center-proximity) * 0.08)), rgba(10, 18, 32, calc(0.92 - var(--center-proximity) * 0.06))) !important;
}

body.game-ui .roulette-stage .roulette-mask .roulette-track .roulette-card.participant-card:not(.loading-card)::before {
  opacity: calc(0.12 + var(--center-proximity) * 0.55) !important;
}

body.game-ui .roulette-stage .roulette-mask .roulette-track .roulette-card.participant-card:not(.loading-card)::after {
  opacity: calc(0.05 + var(--center-proximity) * 0.45) !important;
  background: radial-gradient(circle at 50% 20%, rgba(130, 240, 255, calc(var(--center-proximity) * 0.5)), transparent 68%) !important;
}

body.game-ui .roulette-stage .roulette-mask .roulette-track .roulette-card.participant-card:not(.loading-card) .roulette-name {
  opacity: calc(0.68 + var(--center-proximity) * 0.32) !important;
  font-weight: calc(500 + var(--center-proximity) * 300) !important;
  text-shadow: 0 0 calc(var(--center-proximity) * 18px) rgba(150, 240, 255, calc(var(--center-proximity) * 0.55)) !important;
  transition: none !important;
}

body.game-ui .roulette-stage .roulette-mask .roulette-track .roulette-card.participant-card:not(.loading-card) .roulette-avatar {
  transform: scale(calc(0.9 + var(--center-proximity) * 0.16)) !important;
  box-shadow: 0 0 calc(8px + var(--center-proximity) * 28px) rgba(100, 230, 255, calc(var(--center-proximity) * 0.55)) !important;
  transition: none !important;
}

body.game-ui .roulette-stage .roulette-mask .roulette-track .roulette-card.participant-card:not(.loading-card) .roulette-meta.participant-chip {
  opacity: calc(0.72 + var(--center-proximity) * 0.28) !important;
  border-color: rgba(180, 240, 255, calc(0.14 + var(--center-proximity) * 0.62)) !important;
  background: rgba(255, 255, 255, calc(0.04 + var(--center-proximity) * 0.18)) !important;
}

body.game-ui .roulette-stage.is-spinning .roulette-mask .roulette-track .roulette-card.participant-card:not(.loading-card),
body.game-ui .roulette-stage.is-spinning .roulette-mask .roulette-track .roulette-card.participant-card:not(.loading-card).is-center,
body.game-ui .roulette-stage.is-spinning .roulette-mask .roulette-track .roulette-card.participant-card:not(.loading-card).active,
body.game-ui .roulette-stage.is-spinning .roulette-mask .roulette-track .roulette-card.participant-card:not(.loading-card).is-active,
body.game-ui .roulette-stage.is-idle .roulette-mask .roulette-track .roulette-card.participant-card:not(.loading-card),
body.game-ui .roulette-stage.is-settled .roulette-mask .roulette-track .roulette-card.participant-card:not(.loading-card),
body.game-ui .roulette-stage.is-idle .roulette-mask .roulette-track .roulette-card.participant-card:not(.loading-card).is-center,
body.game-ui .roulette-stage.is-settled .roulette-mask .roulette-track .roulette-card.participant-card:not(.loading-card).is-center,
body.game-ui .roulette-card.participant-card.is-near,
body.game-ui .roulette-card.participant-card.is-center,
body.game-ui .roulette-card.participant-card.active,
body.game-ui .roulette-card.participant-card.is-active {
  opacity: calc(0.55 + var(--center-proximity) * 0.45) !important;
  filter:
    saturate(calc(0.86 + var(--center-proximity) * 0.34))
    brightness(calc(0.82 + var(--center-proximity) * 0.28)) !important;
  transform:
    translateY(calc(var(--center-proximity) * -12px))
    scale(calc(0.84 + var(--center-proximity) * 0.24)) !important;
  transition: none !important;
  animation: none !important;
}

body.game-ui .roulette-stage.is-idle .roulette-mask .roulette-track .roulette-card.participant-card:not(.loading-card),
body.game-ui .roulette-stage.is-settled .roulette-mask .roulette-track .roulette-card.participant-card:not(.loading-card) {
  transition:
    opacity 340ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 340ms cubic-bezier(0.4, 0, 0.2, 1),
    filter 340ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 340ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 340ms cubic-bezier(0.4, 0, 0.2, 1),
    background 340ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

body.game-ui .roulette-stage.is-idle .roulette-mask .roulette-track .roulette-card.participant-card:not(.loading-card) .roulette-name,
body.game-ui .roulette-stage.is-idle .roulette-mask .roulette-track .roulette-card.participant-card:not(.loading-card) .roulette-avatar,
body.game-ui .roulette-stage.is-settled .roulette-mask .roulette-track .roulette-card.participant-card:not(.loading-card) .roulette-name,
body.game-ui .roulette-stage.is-settled .roulette-mask .roulette-track .roulette-card.participant-card:not(.loading-card) .roulette-avatar {
  transition:
    opacity 340ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 340ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 340ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Roulette surface v8 — clean scroll window, no fog / filter overlays */
body.game-ui .roulette-mask {
  background: transparent !important;
  box-shadow: none !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

body.game-ui .roulette-mask::before,
body.game-ui .roulette-mask::after {
  display: none !important;
  content: none !important;
  background: none !important;
  opacity: 0 !important;
}

body.game-ui .wheel-stage.roulette-mode .roulette-stage::before,
body.game-ui .wheel-stage.roulette-mode .roulette-stage::after,
body.game-ui .roulette-stage::before,
body.game-ui .roulette-stage::after {
  display: none !important;
  content: none !important;
  background: none !important;
  opacity: 0 !important;
}

body.game-ui .wheel-stage.roulette-mode .roulette-stage {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 18px 36px rgba(0, 0, 0, 0.22) !important;
}

body.game-ui .roulette-shell-art {
  opacity: 0.1 !important;
}

body.game-ui .roulette-shell-grid {
  opacity: 0.08 !important;
}

body.game-ui .roulette-stage .roulette-mask .roulette-track,
body.game-ui .roulette-stage.is-spinning .roulette-track,
body.game-ui .roulette-stage.is-idle .roulette-track,
body.game-ui .roulette-stage.is-settled .roulette-track {
  filter: none !important;
}

body.game-ui .roulette-stage .roulette-mask .roulette-track .roulette-card.participant-card:not(.loading-card),
body.game-ui .roulette-stage.is-spinning .roulette-mask .roulette-track .roulette-card.participant-card:not(.loading-card),
body.game-ui .roulette-stage.is-idle .roulette-mask .roulette-track .roulette-card.participant-card:not(.loading-card),
body.game-ui .roulette-stage.is-settled .roulette-mask .roulette-track .roulette-card.participant-card:not(.loading-card),
body.game-ui .roulette-card.participant-card.is-near,
body.game-ui .roulette-card.participant-card.is-center,
body.game-ui .roulette-card.participant-card.active,
body.game-ui .roulette-card.participant-card.is-active {
  filter: none !important;
  opacity: calc(0.78 + var(--center-proximity) * 0.22) !important;
}

body.game-ui .roulette-stage .roulette-mask .roulette-track .roulette-card.participant-card:not(.loading-card)::after {
  background: none !important;
  opacity: 0 !important;
}

body.game-ui .roulette-center-focus {
  filter: none !important;
  background: radial-gradient(circle, rgba(121, 246, 255, 0.06), transparent 52%) !important;
  opacity: 0.55 !important;
  box-shadow: none !important;
}

body.game-ui .roulette-center-focus::before,
body.game-ui .roulette-center-focus::after {
  display: none !important;
  content: none !important;
}

body.game-ui .roulette-track {
  filter: none !important;
}

/* Roulette spin v9 — flat cards while winner spin runs; highlight only when idle/settled */
body.game-ui .roulette-stage.is-spinning .roulette-mask .roulette-track .roulette-card.participant-card:not(.loading-card),
body.game-ui .roulette-stage.is-spinning .roulette-mask .roulette-track .roulette-card.participant-card:not(.loading-card).is-center,
body.game-ui .roulette-stage.is-spinning .roulette-mask .roulette-track .roulette-card.participant-card:not(.loading-card).active,
body.game-ui .roulette-stage.is-spinning .roulette-mask .roulette-track .roulette-card.participant-card:not(.loading-card).is-active,
body.game-ui .roulette-stage.is-spinning .roulette-card.participant-card.is-near {
  --center-proximity: 0 !important;
  opacity: 0.9 !important;
  filter: none !important;
  transform: none !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  border-width: 1px !important;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.24) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0)),
    linear-gradient(180deg, rgba(22, 42, 72, 0.94), rgba(10, 18, 32, 0.92)) !important;
  transition: none !important;
  animation: none !important;
}

body.game-ui .roulette-stage.is-spinning .roulette-mask .roulette-track .roulette-card.participant-card:not(.loading-card)::before,
body.game-ui .roulette-stage.is-spinning .roulette-mask .roulette-track .roulette-card.participant-card:not(.loading-card)::after {
  opacity: 0.12 !important;
  background: none !important;
}

body.game-ui .roulette-stage.is-spinning .roulette-mask .roulette-track .roulette-card.participant-card:not(.loading-card) .roulette-name,
body.game-ui .roulette-stage.is-spinning .roulette-mask .roulette-track .roulette-card.participant-card:not(.loading-card) .roulette-meta.participant-chip {
  opacity: 0.82 !important;
  font-weight: 500 !important;
  text-shadow: none !important;
  transition: none !important;
}

body.game-ui .roulette-stage.is-spinning .roulette-mask .roulette-track .roulette-card.participant-card:not(.loading-card) .roulette-avatar {
  transform: none !important;
  box-shadow: none !important;
  transition: none !important;
}

body.game-ui .roulette-stage.is-spinning .roulette-center-focus {
  opacity: 0.18 !important;
}

body.game-ui .roulette-stage.is-spinning .roulette-center-marker::before {
  animation: none !important;
}

/* Roulette v13 — stable idle scroll, no decorative overlays */
body.game-ui .roulette-center-focus,
body.game-ui .roulette-shell-art,
body.game-ui .roulette-shell-grid {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.game-ui #detailView:not(.is-loading) .wheel-stage::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
}

body.game-ui .roulette-stage.is-idle .roulette-mask .roulette-track .roulette-card.participant-card:not(.loading-card),
body.game-ui .roulette-stage.is-idle .roulette-mask .roulette-track .roulette-card.participant-card:not(.loading-card).is-center,
body.game-ui .roulette-stage.is-idle .roulette-mask .roulette-track .roulette-card.participant-card:not(.loading-card).active,
body.game-ui .roulette-stage.is-idle .roulette-mask .roulette-track .roulette-card.participant-card:not(.loading-card).is-active {
  --center-proximity: 0 !important;
  opacity: 0.9 !important;
  filter: none !important;
  transform: none !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  border-width: 1px !important;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.24) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0)),
    linear-gradient(180deg, rgba(22, 42, 72, 0.94), rgba(10, 18, 32, 0.92)) !important;
  transition: none !important;
  animation: none !important;
}

body.game-ui .roulette-stage.is-idle .roulette-mask .roulette-track .roulette-card.participant-card:not(.loading-card) .roulette-name,
body.game-ui .roulette-stage.is-idle .roulette-mask .roulette-track .roulette-card.participant-card:not(.loading-card) .roulette-meta.participant-chip,
body.game-ui .roulette-stage.is-idle .roulette-mask .roulette-track .roulette-card.participant-card:not(.loading-card) .roulette-avatar {
  transform: none !important;
  opacity: 0.82 !important;
  font-weight: 500 !important;
  text-shadow: none !important;
  box-shadow: none !important;
  transition: none !important;
}

body.game-ui .roulette-stage.is-settled .roulette-mask .roulette-track .roulette-card.participant-card:not(.loading-card) {
  transition:
    opacity 340ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 340ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 340ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 340ms cubic-bezier(0.4, 0, 0.2, 1),
    background 340ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}