@import url('fonts.css');

:root {
  --winroll-design-gap: 8px;
  --winroll-content-top: var(--tg-content-safe-area-inset-top, var(--tg-safe-area-inset-top, env(safe-area-inset-top, 0px)));
  --winroll-top-spacing: calc(var(--winroll-content-top, 0px) + var(--winroll-design-gap, 8px));
  --tg-safe-area-top: var(--winroll-content-top, 0px);
  --tg-safe-area-bottom: var(--tg-content-safe-area-inset-bottom, var(--tg-safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)));
  --tg-safe-area-left: var(--tg-content-safe-area-inset-left, var(--tg-safe-area-inset-left, env(safe-area-inset-left, 0px)));
  --tg-safe-area-right: var(--tg-content-safe-area-inset-right, var(--tg-safe-area-inset-right, env(safe-area-inset-right, 0px)));
  --bg-color: #0B0B0B;
  --card-bg: #121316;
  --card-border: rgba(255, 255, 255, 0.05);
  --text-primary: #FFFFFF;
  --text-secondary: rgba(255, 255, 255, 0.6);
  --gold-gradient: linear-gradient(
    180deg,
    #A35C00 0%,
    #D97A00 22%,
    #FFD491 50%,
    #FFDE6F 74%,
    #FFC506 100%
  );
  --gold-dark-text: #432B07;
  --blue-primary: #1A86E4;
  --font-family: 'Google Sans', sans-serif;
}

/* Reset & Box Sizing */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  font-family: 'Google Sans', sans-serif !important;
}

button, input, select, textarea {
  outline: none;
  border: none;
  box-shadow: none;
}

html, body, button, input, select, textarea, span, p, h1, h2, h3, h4, div {
  font-family: 'Google Sans', sans-serif !important;
}

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: var(--bg-color);
  color: var(--text-primary);
  display: flex;
  justify-content: center;
  align-items: stretch;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* App Shell Wrapper */
.device-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100%;
  display: flex;
  justify-content: center;
  align-items: stretch;
}

/* Production App Screen: Fully responsive, adapts to real Telegram viewport */
.app-screen {
  position: relative;
  width: 100%;
  max-width: 480px;
  height: 100%;
  min-height: 100%;
  background-color: var(--bg-color);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: none;
  border-radius: 0;
  padding-top: var(--winroll-top-spacing);
  box-sizing: border-box;
}

/* Isolated Dev-Only Device Preview (?devicePreview=iphone) */
body.dev-device-preview-iphone {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #1a1a1a;
}
body.dev-device-preview-iphone .device-wrapper {
  height: auto;
  align-items: center;
}
body.dev-device-preview-iphone .app-screen {
  width: 390px;
  height: 844px;
  max-width: 390px;
  min-height: 844px;
  border-radius: 44px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.8);
}

/* Scrollable Content Container */
.scroll-container {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 20px;
  -webkit-overflow-scrolling: touch;
}

.scroll-container::-webkit-scrollbar {
  display: none;
}

/* =========================================================
   APP HEADER (LOGO, BALANCE, AVATAR)
   ========================================================= */
.app-header {
  padding-top: 0;
  padding-right: 12px;
  padding-bottom: 8px;
  padding-left: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 44px;
}

.logo-wrap {
  display: flex;
  align-items: center;
}

.logo-img {
  height: 30px;
  width: auto;
  object-fit: contain;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Combined Balance & Wallet Capsule (1:1 with design) */
.balance-pill {
  height: 34px;
  background-color: #191919;
  border-radius: 17px;
  display: flex;
  align-items: center;
  padding: 2px 2px 2px 8px;
  gap: 8px;
  user-select: none;
}

.balance-info {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.balance-info:active {
  opacity: 0.8;
}

.coin-icon {
  width: 18px;
  height: 18px;
  display: block;
  flex-shrink: 0;
}

.balance-text {
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 700;
  font-family: 'Google Sans', sans-serif !important;
  letter-spacing: 0px;
  line-height: 1;
  white-space: nowrap;
}

/* Wallet Button Inside Capsule */
.wallet-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--gold-gradient);
  border: none;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  box-shadow: none;
  flex-shrink: 0;
  transition: transform 0.12s ease, filter 0.12s ease;
}

.wallet-btn:active {
  transform: scale(0.95);
  filter: brightness(1.1);
}

.wallet-icon {
  width: 20px;
  height: 20px;
  display: block;
}

/* =========================================================
   4. LIVE DROPS RIBBON (Height 50px, Cards 40x40, Radius 12px)
   ========================================================= */
.live-drops-bar {
  position: relative;
  margin: 0 16px 14px 16px;
  height: 50px;
  background: #191919;
  border: none;
  border-radius: 12px;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 5px 0 5px 6px;
}

/* Darkening gradient fade at the right end */
.live-drops-bar::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 54px;
  background: linear-gradient(
    to right,
    rgba(25, 25, 25, 0) 0%,
    rgba(25, 25, 25, 0.65) 50%,
    #191919 100%
  );
  pointer-events: none;
  z-index: 10;
}

.live-tag {
  position: relative;
  width: 24px;
  height: 40px;
  background: #202020;
  border-radius: 8px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: none;
  outline: none;
  user-select: none;
  padding: 0;
  box-sizing: border-box;
}

.live-tag-text {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif !important;
  font-size: 8px;
  font-weight: 800;
  line-height: 1;
  color: #FFFFFF;
  letter-spacing: 0.2px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  margin-bottom: 4px;
  user-select: none;
  white-space: nowrap;
}

.live-tag-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #8DA821;
  box-shadow: 0 0 0 2px rgba(141, 168, 33, 0.15);
  animation: live-dot-pulse 2s ease-in-out infinite;
}

@keyframes live-dot-pulse {
  0%, 100% {
    box-shadow: 0 0 0 2px rgba(141, 168, 33, 0.15);
  }
  50% {
    box-shadow: 0 0 0 2.5px rgba(141, 168, 33, 0.3), 0 0 4px rgba(141, 168, 33, 0.35);
  }
}

.live-track-wrapper {
  flex: 1;
  overflow: hidden;
  padding-left: 4px;
  display: flex;
  align-items: center;
}

.live-track {
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.drop-item {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  will-change: width, opacity;
}

/* Incoming live drop: enters smoothly at first position and pushes ribbon to the right */
@keyframes live-drop-push-right {
  0% {
    width: 0;
    min-width: 0;
    margin-right: -4px;
    opacity: 0;
    transform: scale(0.4) translateX(-24px);
  }
  40% {
    opacity: 0.9;
  }
  100% {
    width: 40px;
    min-width: 40px;
    margin-right: 0;
    opacity: 1;
    transform: scale(1) translateX(0);
  }
}

.drop-item.new-drop {
  animation: live-drop-push-right 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Flash of light on newly dropped gift */
.drop-item.new-drop::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, rgba(255, 214, 145, 0.4) 60%, transparent 80%);
  pointer-events: none;
  animation: live-drop-flash 0.75s ease-out forwards;
}

@keyframes live-drop-flash {
  0% { opacity: 1; transform: scale(0.8); }
  100% { opacity: 0; transform: scale(1.3); }
}

/* Initial load entrance wave from left to right */
@keyframes live-item-stagger {
  0% {
    opacity: 0;
    transform: scale(0.7) translateY(8px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.drop-item.initial-stagger {
  animation: live-item-stagger 0.45s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.live-gift-img {
  width: 26px;
  height: 26px;
  object-fit: contain;
  position: relative;
  z-index: 2;
  display: block;
  pointer-events: none;
  filter: none;
}

.card-watermark {
  position: absolute;
  width: 28px;
  height: 24px;
  opacity: 0.14;
  pointer-events: none;
  z-index: 1;
  background-image: url('icons/card_watermark.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Exact Gradients sampled 1:1 from media_1789772927542.png (Live drop items) */
.drop-item.rarity-gold {
  background: linear-gradient(180deg, #A59171 0%, #867B5D 100%);
}

.drop-item.rarity-blue {
  background: linear-gradient(180deg, #6E82FA 0%, #666AED 100%);
}

.drop-item.rarity-orange {
  background: linear-gradient(180deg, #D18826 0%, #CA7035 100%);
}

.drop-item.rarity-brown {
  background: linear-gradient(180deg, #A1614D 0%, #84483B 100%);
}

.drop-item.rarity-green {
  background: linear-gradient(180deg, #9AAF44 0%, #509A37 100%);
}

/* Rarity indicator line at top */
.drop-item::before {
  content: '';
  position: absolute;
  top: 1px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 2px;
  border-radius: 999px;
  z-index: 5;
  pointer-events: none;
}

.drop-item.rarity-gold::before {
  background: #C7B08D;
}

.drop-item.rarity-blue::before {
  background: #9BA7FB;
}

.drop-item.rarity-orange::before {
  background: #F2AD4E;
}

.drop-item.rarity-brown::before {
  background: #D79482;
}

.drop-item.rarity-green::before {
  background: #BED267;
}

.drop-emoji {
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}

/* =========================================================
   5. PROMO CHANNEL SUBSCRIPTION BANNER (358x90px)
   ========================================================= */
.promo-banner {
  position: relative;
  margin: 0 16px 14px 16px;
  width: calc(100% - 32px);
  max-width: calc(100% - 32px);
  height: 90px;
  border-radius: 14px;
  background: linear-gradient(180deg, #00477A 0%, #2EA5FE 100%);
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 0 0 0 12px;
  box-sizing: border-box;
  border: none;
  outline: none;
}

.banner-pattern-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('icons/banner_pattern.svg');
  background-size: cover;
  background-repeat: no-repeat;
  pointer-events: none;
  opacity: 0.9;
}

.banner-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  max-width: 215px;
}

.banner-badge {
  align-self: flex-start;
  background: #FFFFFF;
  color: #0A69B0;
  font-size: 12px;
  font-weight: 700;
  border-radius: 13px;
  width: 140px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  line-height: 1;
  box-sizing: border-box;
  user-select: none;
  white-space: nowrap;
}

.banner-text {
  display: flex;
  flex-direction: column;
  gap: 2.5px;
}

.banner-line-1 {
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  display: flex;
  align-items: center;
  white-space: nowrap;
  letter-spacing: -0.1px;
}

.banner-inline-gram {
  width: 12px;
  height: 10px;
  display: inline-block;
  margin: 0 4px;
  vertical-align: middle;
  flex-shrink: 0;
}

.banner-line-2 {
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  letter-spacing: -0.1px;
}

.banner-right {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  width: 140px;
  height: 90px;
  flex-shrink: 0;
  pointer-events: none;
}

.banner-coins-img {
  position: absolute;
  top: 11px;
  right: 5px;
  width: 135px;
  height: 79px;
  object-fit: fill;
  pointer-events: none;
}

.banner-claim-btn {
  position: absolute;
  right: 37px;
  bottom: 11px;
  z-index: 3;
  height: 23px;
  background: #FFFFFF;
  border: none;
  border-radius: 9999px;
  padding: 2.5px 10px 2.5px 2.5px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  box-shadow: none;
  transition: transform 0.15s ease;
  pointer-events: auto;
  box-sizing: border-box;
}

.banner-claim-btn:active {
  transform: scale(0.96);
  box-shadow: none;
}

.btn-coin-icon {
  width: 18px;
  height: 18px;
  display: block;
  flex-shrink: 0;
}

.banner-claim-btn span {
  color: #1881D0;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
  line-height: 1;
  white-space: nowrap;
}

/* =========================================================
   6. CATEGORY FILTER TABS
   ========================================================= */
.filter-tabs-row {
  margin: 0 16px 14px 16px;
  width: calc(100% - 32px);
  max-width: calc(100% - 32px);
  height: 40px;
  background-color: #191919;
  border-radius: 12px;
  padding: 4px;
  display: flex;
  align-items: center;
  gap: 3px;
  box-sizing: border-box;
}

.filter-tabs-row::-webkit-scrollbar {
  display: none;
}

.tab-btn {
  flex: 1 1 0;
  min-width: 0;
  height: 32px;
  background: #202020;
  border: none;
  border-radius: 8px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  transition: transform 0.1s ease, background 0.15s ease, color 0.15s ease;
  box-sizing: border-box;
}

.tab-btn.tab-all {
  flex: 0.95 1 0;
}

.tab-btn:active {
  transform: scale(0.96);
}

.tab-icon {
  width: 14px;
  height: 14px;
  display: block;
  flex-shrink: 0;
  fill: currentColor;
}

.tab-label {
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  line-height: 1;
  white-space: nowrap;
  color: currentColor;
}

/* Active Golden Button: exactly #432B07 text & icon */
.tab-btn.active-gold {
  background: var(--gold-gradient) !important;
  border: none;
  color: #432B07 !important;
  box-shadow: none;
}

.tab-btn.active-gold .tab-label {
  color: #432B07 !important;
  font-weight: 700;
}

.tab-btn.active-gold .tab-icon {
  color: #432B07 !important;
  fill: #432B07 !important;
}

/* Inactive Tab Colors when not active */
.tab-btn.tab-all:not(.active-gold) {
  color: #FFFFFF;
}

.tab-btn.tab-free:not(.active-gold) {
  color: #F34DFF;
}

.tab-btn.tab-new:not(.active-gold) {
  color: #FFD857;
}

.tab-btn.tab-low:not(.active-gold) {
  color: #EE5555;
}

.tab-btn.tab-high:not(.active-gold) {
  color: #8DA821;
}

/* =========================================================
   7. CASES GRID (2 COLUMNS)
   ========================================================= */
.cases-grid {
  margin: 0 16px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.case-card {
  position: relative;
  background-color: #111111;
  border: none;
  border-radius: 16px;
  padding: 12px 8px 10px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  transition: transform 0.15s ease;
  cursor: pointer;
}

.case-card:hover {
  transform: translateY(-2px);
}

.case-card:active {
  transform: scale(0.98);
}

/* Category Empty State Placeholder */
.cases-empty-state {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 36px 16px 32px;
  background: #141416;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  margin: 12px 0 24px;
}

.cases-empty-icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255, 215, 0, 0.08);
  border: 1px solid rgba(255, 215, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  color: #FFD700;
}

.cases-empty-title {
  font-size: 15px;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 6px;
}

.cases-empty-subtitle {
  font-size: 13px;
  color: #8E8E93;
  max-width: 260px;
  line-height: 1.4;
  margin-bottom: 16px;
}

.cases-empty-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: var(--gold-gradient, linear-gradient(135deg, #FFD043 0%, #FF9E00 100%));
  color: #432B07;
  font-size: 13px;
  font-weight: 700;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  transition: transform 0.15s ease, filter 0.15s ease;
}

.cases-empty-btn:active {
  transform: scale(0.97);
  filter: brightness(0.95);
}

/* Merchandising HOT Badge */
.case-hot-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: linear-gradient(135deg, #FF3B30 0%, #FF9500 100%);
  color: #FFFFFF;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(255, 59, 48, 0.45);
  z-index: 10;
  text-transform: uppercase;
  pointer-events: none;
}

/* Background Carbon Pattern */
.case-pattern-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('cases/pattern_case.png');
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: top center;
  pointer-events: none;
}

.case-image-wrap {
  position: relative;
  z-index: 2;
  width: 136px;
  height: 136px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.case-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.5));
  transition: transform 0.2s ease;
}

.case-card:hover .case-img {
  transform: scale(1.05);
}

.case-name {
  position: relative;
  z-index: 2;
  margin-top: 8px;
  margin-bottom: 10px;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  letter-spacing: 0.1px;
}

.case-price-btn {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 38px;
  background: transparent;
  border: 1px solid #181818;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.case-price-btn:active {
  background: rgba(255, 255, 255, 0.04);
  transform: scale(0.98);
}

.price-coin-icon {
  width: 18px;
  height: 18px;
}

.case-price-btn span {
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 700;
}

/* Spacer so cases aren't covered by bottom dock */
.scroll-bottom-spacer {
  height: calc(96px + var(--tg-safe-area-bottom, 0px));
}

/* =========================================================
   8. FLOATING BOTTOM NAVIGATION DOCK & POPUP SUB-MENU
   ========================================================= */
.sub-menu-dock {
  position: absolute;
  bottom: calc(max(16px, var(--tg-safe-area-bottom, 16px)) + 74px);
  left: 50%;
  transform: translateX(-50%) translateY(74px) scale(0.92);
  width: calc(100% - 32px);
  max-width: 340px;
  height: 68px;
  background: rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border: none;
  border-radius: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  z-index: 95;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  box-sizing: border-box;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.22s ease;
}

.sub-menu-dock.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0) scale(1);
  transition: transform 0.45s cubic-bezier(0.34, 1.45, 0.64, 1), opacity 0.22s ease;
}

.sub-nav-item {
  flex: 1 1 0;
  min-width: 0;
  max-width: 64px;
  width: 100%;
  height: 60px;
  background: none;
  border: none;
  color: #FFFFFF;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  cursor: pointer;
  padding: 0;
  border-radius: 16px;
  transition: transform 0.15s ease, background 0.15s ease;
}

.sub-nav-item:active {
  transform: scale(0.94);
}

.sub-nav-item.active {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border-radius: 16px;
}

.sub-nav-item .nav-text {
  font-size: 10px;
  font-weight: 500;
  max-width: 52px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  line-height: 1.1;
}

.sub-nav-item.active .nav-text {
  color: #FFFFFF;
  font-weight: 600;
}

.bottom-nav-dock {
  position: absolute;
  bottom: max(16px, var(--tg-safe-area-bottom, 16px));
  left: 50%;
  transform: translateX(-50%);
  width: min(340px, calc(100% - 16px));
  height: 68px;
  background: rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border: none;
  border-radius: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 4px;
  z-index: 100;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  box-sizing: border-box;
}

.nav-item {
  width: 60px;
  max-width: 60px;
  min-width: 0;
  flex: 1 1 0;
  height: 60px;
  background: none;
  border: none;
  color: #FFFFFF;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  cursor: pointer;
  padding: 0;
  border-radius: 16px;
  transition: transform 0.15s ease, background 0.15s ease;
}

.nav-item:active {
  transform: scale(0.94);
}

.nav-item.active {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border-radius: 16px;
}

.nav-item.active .nav-text {
  color: #FFFFFF;
  font-weight: 500;
}

.nav-icon-wrap {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.nav-svg {
  width: 20px;
  height: 20px;
  display: block;
  overflow: visible !important;
}

#menuNavIcon {
  transition: transform 0.28s cubic-bezier(0.34, 1.45, 0.64, 1);
}

#menuNavBtn.active #menuNavIcon {
  transform: rotate(90deg);
}

.nav-text {
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  color: #FFFFFF;
  line-height: 1;
}

/* =========================================================
   CUSTOM NAV ICONS INTERACTIVE ANIMATIONS
   ========================================================= */

/* 1. Cases: Chest lid lifts straight UP and slams back down */
.icon-wrap-cases {
  overflow: visible;
}

.animating-cases .case-svg {
  overflow: visible !important;
  animation: case-base-squash 0.62s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.animating-cases .case-lid {
  animation: case-lid-lift-up 0.62s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes case-base-squash {
  0% { transform: translateY(0) scale(1); }
  16% { transform: translateY(1.2px) scale(1.04, 0.92); }
  45% { transform: translateY(-0.5px) scale(0.99, 1.01); }
  75% { transform: translateY(0.4px) scale(1.01, 0.99); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes case-lid-lift-up {
  0% {
    transform: translateY(0);
  }
  16% {
    /* Slight downward press before springing open */
    transform: translateY(1px);
  }
  42% {
    /* Lid lifts straight UPWARDS */
    transform: translateY(-6px) scaleX(1.02);
  }
  62% {
    /* Floats at the apex */
    transform: translateY(-5.5px) scaleX(1.02);
  }
  80% {
    /* Snaps straight down with impact */
    transform: translateY(0.8px) scaleX(0.99);
  }
  92% {
    /* Small bounce */
    transform: translateY(-0.6px);
  }
  100% {
    transform: translateY(0) scaleX(1);
  }
}

/* 2. Crash: Rocket and Flame separate beautifully and fly off */
.icon-wrap-crash {
  overflow: visible;
}

.crash-svg {
  overflow: visible !important;
}

.crash-group {
  overflow: visible;
}

.animating-crash .crash-rocket-body {
  animation: rocket-body-fly 0.78s cubic-bezier(0.22, 1, 0.36, 1);
}

.animating-crash .crash-flame {
  animation: rocket-flame-burst 0.78s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes rocket-body-fly {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  12% {
    /* Anticipation: presses back into flame */
    transform: translate(-2px, 2px) scale(0.95);
    opacity: 1;
  }
  38% {
    /* Rockets forward & up, separating from flame! */
    transform: translate(36px, -36px) scale(1.15);
    opacity: 0;
  }
  44% {
    /* Resets invisibly to entrance point */
    transform: translate(-26px, 26px) scale(0.75);
    opacity: 0;
  }
  70% {
    /* Swoops back into view */
    transform: translate(2px, -2px) scale(1.06);
    opacity: 1;
  }
  86% {
    transform: translate(-1px, 1px) scale(0.98);
    opacity: 1;
  }
  100% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
}

@keyframes rocket-flame-burst {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  14% {
    /* Flame bursts & expands backwards as ignition occurs */
    transform: translate(-2.5px, 2.5px) scale(1.35);
    opacity: 1;
  }
  28% {
    /* Detaches backward from rocket, trailing and burning out quickly */
    transform: translate(-5px, 5px) scale(1.2);
    opacity: 0.7;
  }
  42% {
    /* Disperses and dissipates into space before touching text */
    transform: translate(-8px, 8px) scale(0.3);
    opacity: 0;
  }
  55% {
    transform: translate(-26px, 26px) scale(0.5);
    opacity: 0;
  }
  70% {
    /* Sweeps back in trailing right behind the returning rocket */
    transform: translate(1px, -1px) scale(1.05);
    opacity: 0.9;
  }
  86% {
    transform: translate(0, 0) scale(0.96);
    opacity: 1;
  }
  100% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
}

/* 3. Upgrade: Power-up surge & tip elevation (no glow/shadow) */
.icon-wrap-upgrade {
  overflow: visible;
}

.upgrade-svg {
  overflow: visible !important;
}

.animating-upgrade .upgrade-svg {
  animation: upgrade-surge 0.68s cubic-bezier(0.34, 1.45, 0.64, 1);
}

.animating-upgrade .upgrade-tip {
  animation: upgrade-tip-lift 0.68s cubic-bezier(0.34, 1.5, 0.64, 1);
}

@keyframes upgrade-surge {
  0% {
    transform: translateY(0) scale(1);
  }
  16% {
    transform: translateY(2px) scale(0.92, 0.84);
  }
  42% {
    transform: translateY(-6px) scale(1.12, 1.16);
  }
  68% {
    transform: translateY(-2px) scale(1.03);
  }
  85% {
    transform: translateY(1px) scale(0.98);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

@keyframes upgrade-tip-lift {
  0% {
    transform: translateY(0);
  }
  20% {
    transform: translateY(1px);
  }
  42% {
    transform: translateY(-4px);
  }
  68% {
    transform: translateY(-2.5px);
  }
  85% {
    transform: translateY(0.5px);
  }
  100% {
    transform: translateY(0);
  }
}

/* Center Golden Roulette Floating Button */
.nav-roulette-btn {
  position: relative;
  width: 60px;
  height: 60px;
  background: none;
  border: none;
  cursor: pointer;
  margin: 0 clamp(2px, 1.5vw, 8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
  box-shadow: none;
  transition: transform 0.15s ease;
}

.nav-roulette-btn:active {
  transform: scale(0.94);
}

.roulette-glow {
  display: none;
}

.roulette-circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--gold-gradient);
  outline: 6px solid #0B0B0B;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  box-sizing: border-box;
}

.roulette-svg {
  width: 30px;
  height: 30px;
  display: block;
}

/* =========================================================
   9. iOS HOME INDICATOR
   ========================================================= */
.ios-home-indicator {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 134px;
  height: 5px;
  background-color: #FFFFFF;
  border-radius: 100px;
  z-index: 101;
  pointer-events: none;
}

/* =========================================================
   10. WINROLL UNIFIED NOTIFICATION SYSTEM (PHASE 16D)
   ========================================================= */
.winroll-notification-container {
  position: absolute;
  top: calc(var(--winroll-top-spacing, 8px) + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 24px);
  max-width: min(390px, calc(100vw - 24px));
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 10000;
  pointer-events: none;
}

.winroll-notification {
  pointer-events: auto;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(22, 26, 37, 0.96) 0%, rgba(13, 16, 23, 0.98) 100%);
  backdrop-filter: blur(28px) saturate(190%);
  -webkit-backdrop-filter: blur(28px) saturate(190%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 16px;
  padding: 10px 12px;
  min-height: 56px;
  box-sizing: border-box;
  box-shadow: 0 12px 28px -4px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.05), 0 2px 6px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.16s ease;
}

.winroll-notification::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 3.5px;
  border-radius: 0 4px 4px 0;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.winroll-notification.notif-enter {
  opacity: 0;
  transform: translateY(-12px) scale(0.96);
}

.winroll-notification.notif-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.winroll-notification.notif-leave {
  opacity: 0;
  transform: translateY(-8px) scale(0.97);
}

/* Variant Accents & Glows */
.winroll-notification.notif-success {
  border-color: rgba(34, 197, 94, 0.25);
  box-shadow: 0 12px 28px -4px rgba(0, 0, 0, 0.75), 0 0 20px -2px rgba(34, 197, 94, 0.14);
}
.winroll-notification.notif-success::before {
  background: linear-gradient(180deg, #22c55e, #10b981);
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.55);
}

.winroll-notification.notif-error {
  border-color: rgba(239, 68, 68, 0.25);
  box-shadow: 0 12px 28px -4px rgba(0, 0, 0, 0.75), 0 0 20px -2px rgba(239, 68, 68, 0.14);
}
.winroll-notification.notif-error::before {
  background: linear-gradient(180deg, #ef4444, #dc2626);
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.55);
}

.winroll-notification.notif-warning {
  border-color: rgba(245, 200, 66, 0.25);
  box-shadow: 0 12px 28px -4px rgba(0, 0, 0, 0.75), 0 0 20px -2px rgba(245, 200, 66, 0.14);
}
.winroll-notification.notif-warning::before {
  background: linear-gradient(180deg, #f5c842, #eab308);
  box-shadow: 0 0 8px rgba(245, 200, 66, 0.55);
}

.winroll-notification.notif-info {
  border-color: rgba(56, 189, 248, 0.25);
  box-shadow: 0 12px 28px -4px rgba(0, 0, 0, 0.75), 0 0 20px -2px rgba(56, 189, 248, 0.14);
}
.winroll-notification.notif-info::before {
  background: linear-gradient(180deg, #38bdf8, #0ea5e9);
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.55);
}

.winroll-notification.notif-loading {
  border-color: rgba(245, 200, 66, 0.25);
  box-shadow: 0 12px 28px -4px rgba(0, 0, 0, 0.75), 0 0 20px -2px rgba(245, 200, 66, 0.14);
}
.winroll-notification.notif-loading::before {
  background: linear-gradient(180deg, #f5c842, #d4af37);
  box-shadow: 0 0 8px rgba(245, 200, 66, 0.55);
}

.notif-content-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
}

.notif-icon-box {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  position: relative;
}

.notif-success .notif-icon-box {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.20) 0%, rgba(16, 185, 129, 0.08) 100%);
  border: 1px solid rgba(34, 197, 94, 0.32);
  color: #22c55e;
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.20);
}

.notif-error .notif-icon-box {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.20) 0%, rgba(220, 38, 38, 0.08) 100%);
  border: 1px solid rgba(239, 68, 68, 0.32);
  color: #ef4444;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.20);
}

.notif-warning .notif-icon-box {
  background: linear-gradient(135deg, rgba(245, 200, 66, 0.20) 0%, rgba(217, 119, 6, 0.08) 100%);
  border: 1px solid rgba(245, 200, 66, 0.32);
  color: #f5c842;
  box-shadow: 0 0 10px rgba(245, 200, 66, 0.20);
}

.notif-info .notif-icon-box {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.20) 0%, rgba(14, 165, 233, 0.08) 100%);
  border: 1px solid rgba(56, 189, 248, 0.32);
  color: #38bdf8;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.20);
}

.notif-loading .notif-icon-box {
  background: linear-gradient(135deg, rgba(245, 200, 66, 0.20) 0%, rgba(212, 175, 55, 0.08) 100%);
  border: 1px solid rgba(245, 200, 66, 0.32);
  color: #f5c842;
  box-shadow: 0 0 10px rgba(245, 200, 66, 0.20);
}

@keyframes notif-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.notif-spinner {
  animation: notif-spin 0.9s linear infinite;
}

.notif-icon-svg {
  width: 19px;
  height: 19px;
  display: block;
}

.notif-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  justify-content: center;
}

.notif-title {
  font-family: 'Google Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  line-height: 1.35;
  letter-spacing: -0.2px;
  word-break: break-word;
}

.notif-desc {
  font-family: 'Google Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 12.5px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.70);
  line-height: 1.35;
  word-break: break-word;
  margin-top: 1px;
}

.notif-coin-icon {
  display: inline-block;
  width: 17px;
  height: 17px;
  vertical-align: middle;
  margin: 0 2px;
  flex-shrink: 0;
  pointer-events: none;
}

.notif-amount-inline {
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
}

.notif-action-btn {
  align-self: flex-start;
  margin-top: 4px;
  padding: 4px 10px;
  font-family: 'Google Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: #0b0d13;
  background: linear-gradient(135deg, #F5C842 0%, #D4AF37 100%);
  border: none;
  border-radius: 7px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(245, 200, 66, 0.28);
  transition: transform 0.12s ease, filter 0.12s ease;
}

.notif-action-btn:active {
  transform: scale(0.96);
  filter: brightness(0.92);
}

.notif-close-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  cursor: pointer;
  width: 32px;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.50);
  transition: all 0.16s ease;
  flex-shrink: 0;
  align-self: center;
}

.notif-close-btn svg {
  width: 14px;
  height: 14px;
}

.notif-close-btn:hover,
.notif-close-btn:active {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.18);
  transform: scale(1.05);
}

.toast-popup {
  display: none !important;
}

/* =========================================================
   10B. GLOBAL SKELETON LOADING SYSTEM & APP PRELOADER
   ========================================================= */
.app-preloader {
  position: absolute;
  inset: 0;
  z-index: 99999;
  background: #080808;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
  padding-top: 0;
  padding-bottom: max(env(safe-area-inset-bottom, 0px) + 30px, 40px);
  padding-left: 17px;
  padding-right: 17px;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1), transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.app-preloader.fade-out {
  opacity: 0;
  transform: scale(1.015);
  visibility: hidden;
  pointer-events: none;
}

.preloader-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  max-width: 356px;
  margin-top: calc(env(safe-area-inset-top, 0px) + clamp(80px, 19vh, 160px));
  margin-left: auto;
  margin-right: auto;
}

/* 3x3 Gift Grid */
.preloader-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
}

.preloader-tile {
  position: relative;
  height: 118px;
  background: #141414;
  border-radius: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025);
  opacity: 0;
  animation:
    preloader-tile-entrance 480ms cubic-bezier(0.22, 1, 0.36, 1) var(--tile-delay, 0ms) forwards,
    preloader-tile-idle-odd 4.2s ease-in-out calc(var(--tile-delay, 0ms) + 500ms) infinite alternate;
  will-change: transform, opacity;
}

.preloader-tile:nth-child(even) {
  animation:
    preloader-tile-entrance 480ms cubic-bezier(0.22, 1, 0.36, 1) var(--tile-delay, 0ms) forwards,
    preloader-tile-idle-even 4.8s ease-in-out calc(var(--tile-delay, 0ms) + 500ms) infinite alternate;
}

/* Individual Ambient Glow behind each gift */
.preloader-tile::before {
  content: '';
  position: absolute;
  inset: -15%;
  border-radius: inherit;
  background: radial-gradient(circle at center, var(--glow-color, rgba(255, 255, 255, 0.15)) 0%, transparent 68%);
  opacity: 0.45;
  pointer-events: none;
  animation: preloader-glow-breathe 4.5s ease-in-out infinite alternate;
}

@keyframes preloader-glow-breathe {
  0% {
    opacity: 0.35;
    transform: scale(0.96);
  }
  100% {
    opacity: 0.55;
    transform: scale(1.04);
  }
}

.preloader-gift-img {
  width: 70px;
  height: 70px;
  object-fit: contain;
  position: relative;
  z-index: 1;
  display: block;
  pointer-events: none;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.45));
}

@keyframes preloader-tile-entrance {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.82);
    filter: blur(2px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes preloader-tile-idle-odd {
  0%, 100% {
    transform: translateY(0px) scale(1);
  }
  50% {
    transform: translateY(-2px) scale(1.014);
  }
}

@keyframes preloader-tile-idle-even {
  0%, 100% {
    transform: translateY(0px) scale(1);
  }
  50% {
    transform: translateY(-1.5px) scale(1.012);
  }
}

/* WINROLL Authoritative Logo */
.preloader-logo-wrap {
  margin-top: clamp(80px, 14.5vh, 123px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  animation: preloader-logo-entrance 400ms cubic-bezier(0.22, 1, 0.36, 1) 600ms forwards;
  will-change: transform, opacity;
}

.preloader-logo {
  width: 105px;
  height: auto;
  display: block;
}

@keyframes preloader-logo-entrance {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Progress Track */
.preloader-progress-track {
  margin-top: 21px;
  width: 226px;
  height: 12px;
  background: #0E141C;
  border-radius: 999px;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.7);
}

.preloader-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #D7A84B 0%, #F5C842 50%, #FFE58F 80%, #D7A84B 100%);
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(245, 200, 66, 0.35);
  will-change: width;
}

.preloader-progress-shimmer {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 60px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.65) 50%, transparent 100%);
  animation: preloader-shimmer-travel 1.4s ease-in-out infinite;
}

@keyframes preloader-shimmer-travel {
  0% {
    transform: translateX(-60px);
  }
  100% {
    transform: translateX(230px);
  }
}

.preloader-error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}

.preloader-error-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(239, 68, 68, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(239, 68, 68, 0.25);
}

.preloader-error-msg {
  font-family: 'Google Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #ef4444;
  max-width: 260px;
}

.preloader-retry-btn {
  margin-top: 6px;
  background: linear-gradient(135deg, #F5C842 0%, #D4AF37 100%);
  color: #0B0B0B;
  font-family: 'Google Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 13px;
  font-weight: 700;
  border: none;
  border-radius: 10px;
  padding: 10px 24px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(245, 200, 66, 0.3);
  transition: transform 0.15s ease, filter 0.15s ease;
}

.preloader-retry-btn:active {
  transform: scale(0.96);
  filter: brightness(0.92);
}

/* ==========================================================================
   Unauthenticated Outside-Telegram Gate Overlay (Section 32b)
   ========================================================================== */
.unauth-telegram-gate {
  position: absolute;
  inset: 0;
  z-index: 99990;
  background: #0B0B0B;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
}

.gate-card {
  width: 100%;
  max-width: 360px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(245, 200, 66, 0.18);
  border-radius: 24px;
  padding: 32px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-sizing: border-box;
}

.gate-logo-wrap {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gate-logo {
  width: 130px;
  height: auto;
  display: block;
}

.gate-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(245, 200, 66, 0.1);
  border: 1px solid rgba(245, 200, 66, 0.25);
  color: #F5C842;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 14px;
}

.gate-title {
  font-family: 'Google Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 19px;
  font-weight: 700;
  color: #FFFFFF;
  margin: 0 0 10px 0;
  line-height: 1.3;
}

.gate-desc {
  font-family: 'Google Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.65);
  margin: 0 0 24px 0;
  max-width: 300px;
}

.gate-actions {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.gate-btn {
  width: 100%;
  height: 48px;
  border-radius: 12px;
  font-family: 'Google Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, filter 0.15s ease;
  box-sizing: border-box;
}

.gate-btn:active {
  transform: scale(0.97);
}

.gate-btn-primary {
  background: linear-gradient(135deg, #F5C842 0%, #D4AF37 100%);
  color: #0B0B0B;
  box-shadow: 0 4px 16px rgba(245, 200, 66, 0.25);
}

.gate-btn-secondary {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.85);
}

.gate-btn-secondary:active {
  background: rgba(255, 255, 255, 0.1);
}

@media (prefers-reduced-motion: reduce) {
  .app-preloader {
    transition: none !important;
  }
  .preloader-tile {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  .preloader-tile::before {
    animation: none !important;
  }
  .preloader-logo-wrap {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .preloader-progress-shimmer {
    animation: none !important;
    display: none !important;
  }
  .preloader-progress-fill {
    transition: none !important;
  }
}

/* Standardized Dark Skeleton Loading */
.winroll-skeleton {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.04) 25%,
    rgba(255, 255, 255, 0.08) 50%,
    rgba(255, 255, 255, 0.04) 75%
  );
  background-size: 200% 100%;
  animation: winroll-skeleton-shimmer 1.8s ease-in-out infinite;
  border-radius: 12px;
  pointer-events: none;
  user-select: none;
  border: 1px solid rgba(255, 255, 255, 0.04);
}

@keyframes winroll-skeleton-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .winroll-skeleton {
    animation: none;
    background: rgba(255, 255, 255, 0.05);
  }
}

/* Image Skeleton Wrapper & Fallbacks */
.img-skeleton-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.03);
}

.img-skeleton-wrap .skeleton-placeholder {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.03) 25%,
    rgba(255, 255, 255, 0.07) 50%,
    rgba(255, 255, 255, 0.03) 75%
  );
  background-size: 200% 100%;
  animation: winroll-skeleton-shimmer 1.8s ease-in-out infinite;
  transition: opacity 0.25s ease;
}

.img-skeleton-wrap.loaded .skeleton-placeholder {
  opacity: 0;
  pointer-events: none;
}

.img-skeleton-wrap img {
  opacity: 0;
  transition: opacity 0.25s ease;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.img-skeleton-wrap.loaded img {
  opacity: 1;
}

.img-fallback-icon {
  width: 32px;
  height: 32px;
  opacity: 0.35;
  filter: grayscale(1);
}

/* =========================================================
   11. CASE OPENING PAGE & ROULETTE SPINNER (1:1 with Figma)
   ========================================================= */

/* View Page Transitions */
.view-page {
  width: 100%;
  animation: page-fade-in 0.25s ease-out;
}

@keyframes page-fade-in {
  0% { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Subheader Bar (Demo Toggle | Case Title | Turbo) */
.case-subheader-bar {
  margin: 4px 16px 8px 16px;
  height: 40px;
  background-color: #111111;
  border-radius: 10px;
  padding: 0 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  box-sizing: border-box;
}

/* Demo Switch Button (Left) */
.demo-switch-wrap {
  display: flex;
  align-items: center;
  height: 32px;
  padding: 0 8px;
  border: 1px solid #171717;
  border-radius: 8px;
  background: transparent;
  box-sizing: border-box;
}

.demo-switch-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}

.demo-checkbox {
  display: none;
}

.demo-track {
  width: 26px;
  height: 14px;
  background: #1F1F1F;
  border-radius: 999px;
  position: relative;
  transition: background 0.2s ease;
  display: inline-block;
  flex-shrink: 0;
}

.demo-knob {
  width: 10px;
  height: 10px;
  background: #4B4B4B;
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: transform 0.2s cubic-bezier(0.34, 1.4, 0.64, 1), background 0.2s ease;
}

.demo-checkbox:checked + .demo-track {
  background: #8DA821;
}

.demo-checkbox:checked + .demo-track .demo-knob {
  transform: translateX(12px);
  background: #FFFFFF;
}

.demo-text {
  font-size: 12px;
  font-weight: 500;
  color: #5E5C5C;
  letter-spacing: -0.1px;
}

/* Case Title (Centered strictly in subheader bar) */
.case-view-heading {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 14px;
  font-weight: 500;
  color: #FFFFFF;
  letter-spacing: -0.1px;
  margin: 0;
  text-align: center;
  line-height: 1;
  pointer-events: none;
  white-space: nowrap;
}

/* Turbo Fast Open Button (Right) */
.turbo-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #555555;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  box-sizing: border-box;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.turbo-btn:hover {
  background: #1A1A1A;
  border-color: rgba(255, 255, 255, 0.15);
  color: #FFFFFF;
}

.turbo-btn:active {
  transform: scale(0.92);
}

.turbo-btn.active {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  color: #FFFFFF;
}

.turbo-icon-img {
  width: 16px;
  height: 16px;
  display: block;
  pointer-events: none;
  transition: filter 0.15s ease;
}

.turbo-btn.active .turbo-icon-img {
  filter: invert(82%) sepia(50%) saturate(850%) hue-rotate(355deg) brightness(102%) contrast(97%);
}

/* Horizontal Roulette Spinner Section (358x126 Container) */
.spinner-section {
  position: relative;
  margin: 0 16px 8px 16px;
  height: 126px;
  box-sizing: border-box;
}

.spinner-border-line-top {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 150px;
  height: 1px;
  background: linear-gradient(90deg, #111111 0%, #ED9A0E 50%, #111111 100%);
  z-index: 30;
  pointer-events: none;
}

.spinner-border-line-bottom {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 150px;
  height: 1px;
  background: linear-gradient(90deg, #111111 0%, #ED9A0E 50%, #111111 100%);
  z-index: 30;
  pointer-events: none;
}

.spinner-center-pointer {
  position: absolute;
  left: 50%;
  width: 14px;
  height: 10px;
  z-index: 20;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.spinner-center-pointer.pointer-top {
  top: 0;
  transform: translateX(-50%) rotate(180deg);
}

.spinner-center-pointer.pointer-bottom {
  bottom: 0;
  transform: translateX(-50%);
}

.delover-ptr-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.spinner-viewport {
  position: relative;
  width: 100%;
  height: 126px;
  border-radius: 16px;
  background-color: #111111;
  overflow: hidden;
  box-sizing: border-box;
}

.spinner-vignette-left {
  position: absolute;
  top: 0;
  left: 0;
  width: 52px;
  height: 100%;
  background: linear-gradient(to right, #111111 0%, rgba(17, 17, 17, 0.92) 15%, rgba(17, 17, 17, 0.65) 45%, rgba(17, 17, 17, 0.25) 75%, rgba(17, 17, 17, 0) 100%);
  z-index: 10;
  pointer-events: none;
  border-radius: 16px 0 0 16px;
}

.spinner-vignette-right {
  position: absolute;
  top: 0;
  right: 0;
  width: 52px;
  height: 100%;
  background: linear-gradient(to left, #111111 0%, rgba(17, 17, 17, 0.92) 15%, rgba(17, 17, 17, 0.65) 45%, rgba(17, 17, 17, 0.25) 75%, rgba(17, 17, 17, 0) 100%);
  z-index: 10;
  pointer-events: none;
  border-radius: 0 16px 16px 0;
}

.spinner-track {
  display: flex;
  align-items: center;
  height: 100%;
  gap: 2px;
  padding: 0;
  will-change: transform;
  transform: translateX(0);
}

/* Spinner Card Item (84x110px with 2px gap, #191919 bg, 12px radius) */
.spinner-card {
  width: 84px;
  height: 110px;
  flex-shrink: 0;
  border-radius: 12px;
  background-color: #191919;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  margin: 0;
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
  user-select: none;
}

/* 84x84px Substrate with #202020 bg */
.spinner-card-top {
  width: 84px;
  height: 84px;
  background-color: #202020;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.spinner-card-top .card-carbon-pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('icons/pattern_gifts.png');
  background-size: 84px auto;
  background-position: top center;
  background-repeat: no-repeat;
  opacity: 0.45;
  pointer-events: none;
  z-index: 1;
}

.spinner-card-top .card-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70px;
  height: 60px;
  background-image: url('icons/logo_gifts.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
  z-index: 2;
}

/* Duplicate photo underneath with layer blur */
.spinner-card-glow {
  position: absolute;
  width: 62px;
  height: 62px;
  object-fit: contain;
  pointer-events: none;
  filter: blur(15px);
  opacity: 0.9;
  transform: scale(1.08);
  z-index: 3;
}

/* Sharp gift image 62x62px */
.spinner-card-img {
  position: relative;
  width: 62px;
  height: 62px;
  object-fit: contain;
  z-index: 4;
  pointer-events: none;
  display: block;
}

.card-rarity-indicator {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 1px;
  border-radius: 999px;
  z-index: 5;
}

.spinner-card.rarity-gold .card-rarity-indicator { background: #C7B08D; }
.spinner-card.rarity-orange .card-rarity-indicator { background: #F2AD4E; }
.spinner-card.rarity-blue .card-rarity-indicator { background: #9BA7FB; }
.spinner-card.rarity-brown .card-rarity-indicator { background: #D79482; }
.spinner-card.rarity-green .card-rarity-indicator { background: #BED267; }

/* Price Container: 12x12 icon, 4px gap, 12px medium white text */
.spinner-card-price {
  width: 100%;
  height: 26px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  border-radius: 0;
}

.spinner-card-coin {
  width: 12px;
  height: 12px;
  display: block;
  flex-shrink: 0;
}

.spinner-card-price-val {
  font-size: 12px;
  font-weight: 500;
  color: #FFFFFF;
  line-height: 1;
}

/* Main Action Button: Открыть за [price] */
.case-open-btn-container {
  margin: 0 16px 18px 16px;
}

.case-open-btn {
  width: 100%;
  height: 40px;
  border-radius: 10px;
  background: var(--gold-gradient);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  color: #432B07;
  transition: transform 0.12s ease, opacity 0.2s ease, filter 0.15s ease, background 0.2s ease;
  box-shadow: none;
}

.open-btn-content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #432B07;
}

.open-btn-spinning-text {
  display: none;
  font-size: 14px;
  font-weight: 700;
  color: #5E5C5C;
  letter-spacing: -0.1px;
  line-height: 1;
}

.case-open-btn.is-spinning {
  background: #191919 !important;
  cursor: not-allowed;
  transform: none !important;
  filter: none !important;
  opacity: 1 !important;
}

.case-open-btn.is-spinning .open-btn-content {
  display: none !important;
}

.case-open-btn.is-spinning .open-btn-spinning-text {
  display: inline-flex !important;
}

.case-open-btn:not(.is-spinning):active {
  transform: scale(0.97);
  filter: brightness(0.95);
}

.case-open-btn:disabled:not(.is-spinning) {
  opacity: 0.6;
  cursor: not-allowed;
  filter: grayscale(0.2);
}

.open-btn-title {
  font-size: 14px;
  font-weight: 700;
  color: #432B07;
  letter-spacing: -0.1px;
  line-height: 1;
}

.open-btn-coin {
  width: 16px;
  height: 16px;
  display: block;
}

.open-btn-amount {
  font-size: 14px;
  font-weight: 700;
  color: #432B07;
  letter-spacing: -0.1px;
  line-height: 1;
}

/* Section Divider: Что в кейсе? */
.case-contents-divider {
  margin: 0 16px 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.case-contents-divider .divider-line {
  flex: 1;
  height: 1px;
}

.case-contents-divider .divider-line:first-child {
  background: linear-gradient(90deg, #0B0B0B 0%, #252525 100%);
}

.case-contents-divider .divider-line:last-child {
  background: linear-gradient(90deg, #252525 0%, #0B0B0B 100%);
}

.divider-label {
  font-size: 14px;
  font-weight: 500;
  color: #FFFFFF;
  letter-spacing: -0.1px;
  line-height: 1;
  white-space: nowrap;
}

/* 3-Column Items Grid (Подложка 358x301, padding 8px, border-radius 16px, background #111111) */
.case-items-grid {
  margin: 0 16px 24px 16px;
  padding: 8px;
  background: #111111;
  border-radius: 16px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  box-sizing: border-box;
}

.case-item-card {
  width: 100%;
  height: 140px;
  background: #191919;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
  border: none;
}

/* 110x110px Substrate with #202020 bg */
.case-item-top {
  width: 100%;
  height: 110px;
  background-color: #202020;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.case-item-top .card-carbon-pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('icons/pattern_gifts.png');
  background-size: 110px auto;
  background-position: top center;
  background-repeat: no-repeat;
  opacity: 0.45;
  pointer-events: none;
  z-index: 1;
}

.case-item-top .card-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70px;
  height: 60px;
  background-image: url('icons/logo_gifts.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
  z-index: 2;
}

.case-item-glow {
  position: absolute;
  width: 70px;
  height: 70px;
  object-fit: contain;
  pointer-events: none;
  filter: blur(15px);
  opacity: 0.85;
  transform: scale(1.08);
  z-index: 3;
}

.case-item-img {
  position: relative;
  width: 70px;
  height: 70px;
  object-fit: contain;
  z-index: 4;
  pointer-events: none;
  display: block;
}

.case-item-card.rarity-gold .card-rarity-indicator { background: #C7B08D; }
.case-item-card.rarity-orange .card-rarity-indicator { background: #F2AD4E; }
.case-item-card.rarity-blue .card-rarity-indicator { background: #9BA7FB; }
.case-item-card.rarity-brown .card-rarity-indicator { background: #D79482; }
.case-item-card.rarity-green .card-rarity-indicator { background: #BED267; }

/* Price badge: background rgba(255,255,255,0.05), blur 45, icon 10x10, gap 4px, font 10px, padding 4px */
.case-item-price-badge {
  position: absolute;
  bottom: 6px;
  left: 6px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(45px);
  -webkit-backdrop-filter: blur(45px);
  border-radius: 999px;
  padding: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
  z-index: 6;
  box-sizing: border-box;
}

.case-item-coin {
  width: 10px;
  height: 10px;
  display: block;
  flex-shrink: 0;
}

.case-item-price-val {
  font-size: 10px;
  font-weight: 600;
  color: #FFFFFF;
  line-height: 1;
  padding-right: 4px;
}

.case-item-name {
  width: 100%;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 500;
  color: #5E5C5C;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 4px;
  box-sizing: border-box;
  margin: 0;
}

.case-item-chance-badge {
  display: none !important;
  position: absolute;
  top: 6px;
  right: 6px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 6px;
  padding: 2px 5px;
  font-size: 8px;
  font-weight: 700;
  color: #9BA3AF;
  line-height: 1;
  z-index: 6;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.case-item-card.is-jackpot {
  border-color: rgba(255, 215, 0, 0.4);
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.15);
}

.case-item-card.is-jackpot .case-item-top {
  border: 1px solid rgba(255, 215, 0, 0.35);
}

.case-item-card.is-jackpot .case-item-chance-badge {
  color: #FFD700;
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(255, 215, 0, 0.35);
}

.case-item-jackpot-tag {
  position: absolute;
  top: 6px;
  left: 6px;
  background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
  color: #000000;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 2px 5px;
  border-radius: 4px;
  z-index: 6;
  text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(255, 215, 0, 0.3);
}

/* =========================================================
   12. WIN DROP REVEAL MODAL (Unique WinRoll Design)
   ========================================================= */
/* =========================================================
   12. WIN DROP REVEAL MODAL (1:1 Reference Design)
   ========================================================= */
.win-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 300;
  display: none;
  align-items: flex-end; /* Bottom sheet inside app interface */
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
  border-radius: 44px;
  overflow: hidden;
}

.win-modal-overlay.show {
  display: flex;
  opacity: 1;
  pointer-events: auto;
}

.win-modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.win-modal-card {
  position: relative;
  z-index: 301;
  width: 100%;
  background: #111111;
  border-radius: 20px 20px 0 0;
  border: none;
  padding: 8px 16px 20px 16px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  transform: translateY(100%);
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.9);
}

.win-modal-overlay.show .win-modal-card {
  transform: translateY(0);
}

/* Drag handle on top */
.win-modal-drag-handle {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.16);
  margin: 2px auto 8px auto;
}

/* Modal Header: Title + Close Button */
.win-modal-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  height: 28px;
}

.win-modal-title {
  font-size: 16px;
  font-weight: 700;
  color: #FFFFFF;
  margin: 0;
  letter-spacing: -0.2px;
}

.win-modal-close {
  background: none;
  border: none;
  color: #555555;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  transition: color 0.15s ease, transform 0.1s ease;
}

.win-modal-close:hover {
  color: #5E5C5C;
}

.win-modal-close:active {
  transform: scale(0.92);
}

/* Central Showcase Card */
.win-showcase-card {
  width: 100%;
  border-radius: 12px;
  background: #191919;
  border: none;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  margin-bottom: 12px;
  box-sizing: border-box;
}

/* Rarity Indicator at the top center of card */
.win-showcase-card .card-rarity-indicator {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 2px;
  border-radius: 0 0 2px 2px;
  background: #C7B08D;
  z-index: 10;
}

/* Stage with rotating prize_bg */
.win-showcase-stage {
  position: relative;
  width: 100%;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #191919;
  overflow: hidden;
  border-radius: 12px 12px 0 0;
}

/* Enlarged rotating background to ensure zero cutoffs at edges */
.win-prize-bg-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 540px;
  height: 540px;
  margin-top: -270px;
  margin-left: -270px;
  background-image: url('icons/prize_bg.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
  z-index: 1;
  animation: win-prize-rotate 28s linear infinite;
  transform-origin: center center;
  will-change: transform;
}

@keyframes win-prize-rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.win-item-img {
  position: relative;
  width: 110px;
  height: 110px;
  object-fit: contain;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.65));
  z-index: 4;
}

/* Bottom-Left Price Badge */
.win-showcase-price-badge {
  position: absolute;
  left: 12px;
  bottom: 12px;
  background: rgba(18, 18, 22, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 999px;
  padding: 4px 10px 4px 6px;
  display: flex;
  align-items: center;
  gap: 5px;
  z-index: 10;
  border: none;
  box-sizing: border-box;
}

.win-coin-icon {
  width: 15px;
  height: 15px;
  display: block;
}

.win-price-val {
  font-size: 13px;
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1;
  letter-spacing: -0.1px;
}

/* Bottom Name Bar */
.win-showcase-name-bar {
  background: #191919;
  padding: 11px 16px;
  text-align: center;
  border: none;
  border-radius: 0 0 12px 12px;
}

.win-item-name {
  font-size: 14px;
  font-weight: 500;
  color: #5E5C5C;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.win-name-coin-icon {
  width: 15px;
  height: 15px;
  vertical-align: middle;
  object-fit: contain;
  flex-shrink: 0;
  display: inline-block;
}

/* Action Buttons */
.win-modal-actions {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.win-action-btn {
  height: 40px;
  border-radius: 10px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.12s ease, filter 0.15s ease;
  box-sizing: border-box;
}

.win-action-btn:active {
  transform: scale(0.98);
  filter: brightness(0.95);
}

.win-btn-action-icon {
  width: 16px;
  height: 16px;
  display: block;
  flex-shrink: 0;
}

/* 1. Take / Забрать */
.win-btn-take {
  width: 100%;
  background: linear-gradient(180deg, #CF7401 0%, #FFD75D 100%);
  color: #432B07;
}

/* Row with Sell & Upgrade */
.win-modal-actions-row {
  display: flex;
  gap: 10px;
  width: 100%;
}

/* 2. Sell / Продать: верх 253700, низ B0CF33 */
.win-btn-sell {
  flex: 1;
  background: linear-gradient(180deg, #253700 0%, #B0CF33 100%);
  color: #FFFFFF;
  gap: 5px;
  padding: 0 10px;
}

.win-btn-diamond-icon {
  display: block;
  flex-shrink: 0;
}

.win-sell-amount {
  font-size: 12px;
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1;
}

/* 3. In Upgrade / В Апгрейд: верх 00246B, низ 30A1F5 */
.win-btn-upgrade {
  flex: 1;
  background: linear-gradient(180deg, #00246B 0%, #30A1F5 100%);
  color: #FFFFFF;
  gap: 6px;
  padding: 0 10px;
}

.win-sell-coin-icon {
  width: 14px;
  height: 14px;
  display: inline-block;
  flex-shrink: 0;
}

/* Dynamic Ticket / Voucher Presentation inside Win Showcase */
.win-ticket-display {
  position: relative;
  z-index: 5;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.win-modal-ticket-item {
  width: 252px !important;
  height: 126px !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6) !important;
  margin: 0 !important;
  transform: scale(1.04);
}

.win-modal-bonus-item {
  width: 252px !important;
  height: 126px !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6) !important;
  margin: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(1.04);
}

/* =========================================================
   13. CRASH GAME PAGE (Rocket Animation & Bet Control)
   ========================================================= */
.crash-page {
  padding: 0 14px 10px 14px;
  animation: fadeIn 0.25s ease;
}

/* Top History Bar */
.crash-history-container {
  position: relative;
  width: 100%;
  height: 34px;
  background: #111111;
  border-radius: 10px;
  padding: 6px 0 6px 6px;
  margin-bottom: 8px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  border: none;
  outline: none;
  overflow: hidden;
}

/* Darkening gradient fade at the right edge */
.crash-history-container::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 36px;
  background: linear-gradient(
    to right,
    rgba(17, 17, 17, 0) 0%,
    rgba(17, 17, 17, 0.7) 45%,
    #111111 100%
  );
  pointer-events: none;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  z-index: 5;
}

.crash-history-ribbon {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.crash-history-ribbon::-webkit-scrollbar {
  display: none;
}

.crash-pill {
  height: 22px;
  padding: 0 8px;
  border-radius: 6px;
  background: #191919;
  color: #5E5C5C;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  white-space: nowrap;
  letter-spacing: -0.1px;
  border: none;
  outline: none;
}

.crash-pill.pill-gold {
  background: #302612;
  color: #FFBE3C;
}

/* Main Crash Flight Arena */
.crash-arena-card {
  position: relative;
  width: 100%;
  height: 220px;
  background: #111111;
  border-radius: 14px;
  overflow: hidden;
  isolation: isolate;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  margin-bottom: 8px;
  box-sizing: border-box;
}

.crash-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  display: block;
  z-index: 1;
  pointer-events: none;
}

/* Center Overlay */
.crash-center-overlay {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  pointer-events: none;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.crash-multiplier-val {
  height: 33px;
  min-width: 68px;
  padding: 0 14px;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: -0.2px;
  line-height: 1;
}

.crash-status-sub {
  font-size: 10px;
  font-weight: 500;
  color: #8E8E93;
  letter-spacing: -0.1px;
  text-transform: none;
  margin-top: 0;
}

/* Crashed state */
.crash-arena-card.crashed .crash-multiplier-val {
  color: #FF3B30;
  animation: crash-shake 0.4s ease-in-out;
}

@keyframes crash-shake {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-3px, 2px); }
  40% { transform: translate(3px, -2px); }
  60% { transform: translate(-2px, -1px); }
  80% { transform: translate(2px, 1px); }
}

/* Pre-round Countdown Overlay */
.crash-countdown-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(17, 17, 17, 0.65) 0%, rgba(17, 17, 17, 0.15) 60%, transparent 100%);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 20;
  pointer-events: none;
  animation: fadeIn 0.2s ease;
}

.countdown-title {
  font-size: 10px;
  font-weight: 700;
  color: #5B5959;
  letter-spacing: normal;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.countdown-seconds {
  font-size: 42px;
  font-weight: 800;
  color: #FFC02E;
  letter-spacing: -1px;
  line-height: 1;
  text-shadow: 0 0 24px rgba(255, 192, 46, 0.45);
}

.countdown-progress-bar {
  width: 130px;
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  margin-top: 14px;
  overflow: hidden;
}

.countdown-progress-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #FFDE59 0%, #FF9500 100%);
  border-radius: 2px;
  transition: width 0.1s linear;
}

/* Live Cashouts Stream */
.crash-live-cashouts {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: flex;
  flex-direction: column-reverse;
  gap: 6px;
  pointer-events: none;
  z-index: 25;
}

.cashout-badge {
  display: flex;
  align-items: center;
  width: 148px;
  height: 24px;
  box-sizing: border-box;
  padding: 3px 8px 3px 3px;
  background: #202020;
  border-radius: 9999px;
  border: none;
  font-size: 11px;
  line-height: 1;
  color: #FFFFFF;
  animation: cashout-fade 0.25s ease;
}

.cashout-avatar {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #007AFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: #FFFFFF;
  font-weight: 700;
  flex-shrink: 0;
}

.cashout-name {
  color: #FFFFFF;
  font-weight: 500;
  line-height: 1;
  margin-left: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.cashout-amount {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: #4CD964;
  font-weight: 700;
  line-height: 1;
  margin-left: 6px;
  flex-shrink: 0;
}

.cashout-coin-icon {
  width: 12px;
  height: 12px;
  display: inline-block;
  flex-shrink: 0;
}

@keyframes cashout-fade {
  from { opacity: 0; transform: translateX(12px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Bet Control Panel */
.crash-bet-panel {
  width: 100%;
  height: auto;
  min-height: auto;
  background: #111111;
  border-radius: 14px;
  padding: 12px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 8px;
}

.crash-panel-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.panel-group-label {
  font-size: 12px;
  font-weight: 500;
  color: #5B5959;
  letter-spacing: -0.1px;
  line-height: 1.2;
}

/* Bet Input Box */
.crash-input-box {
  display: flex;
  align-items: center;
  background: #202020;
  border-radius: 10px;
  height: 40px;
  padding: 0 6px 0 12px;
  gap: 8px;
  box-sizing: border-box;
}

.crash-coin-icon {
  width: 20px;
  height: 20px;
  display: block;
  flex-shrink: 0;
}

.crash-bet-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-size: 15px;
  font-weight: 700;
  color: #FFFFFF;
  font-family: inherit;
  letter-spacing: -0.2px;
}

.crash-input-steppers {
  display: flex;
  gap: 4px;
  align-items: center;
}

.stepper-btn {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: #2A2A2A;
  border: none;
  color: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s ease;
}

.stepper-btn:active {
  background: #383838;
}

/* Quick Chips */
.crash-quick-chips {
  display: flex;
  gap: 4px;
}

.chip-btn {
  flex: 1;
  height: 26px;
  border-radius: 8px;
  background: #191919;
  border: none;
  color: #595858;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.12s ease;
}

.chip-btn:active {
  background: #262626;
  color: #FFFFFF;
}

/* Auto-Cashout Header Row & Toggle Switch */
.crash-panel-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0px;
  padding: 0;
  min-height: 22px;
}

.crash-toggle-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
  min-height: 22px;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

.crash-toggle-checkbox {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.crash-toggle-track {
  width: 32px;
  height: 18px;
  box-sizing: border-box;
  background: #18191d;
  border-radius: 9999px;
  position: relative;
  transition: all 0.22s ease;
  border: 1px solid rgba(255, 255, 255, 0.18);
  display: inline-block;
  flex-shrink: 0;
}

.crash-toggle-thumb {
  width: 14px;
  height: 14px;
  box-sizing: border-box;
  background: #71717a;
  border-radius: 50%;
  position: absolute;
  top: 1px;
  left: 1px;
  transform: translateX(0);
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s ease, box-shadow 0.2s ease;
}

.crash-toggle-checkbox:checked + .crash-toggle-track {
  background: rgba(245, 200, 66, 0.16);
  border-color: #f5c842;
}

.crash-toggle-checkbox:checked + .crash-toggle-track .crash-toggle-thumb {
  transform: translateX(14px);
  background: #f5c842;
  box-shadow: 0 0 8px rgba(245, 200, 66, 0.55);
}

.crash-toggle-status {
  font-family: 'Google Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: #71717a;
  line-height: 1;
  min-width: 24px;
  transition: color 0.2s ease;
}

.crash-toggle-checkbox:checked ~ .crash-toggle-status {
  color: #f5c842;
}

.crash-autocashout-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: opacity 0.25s ease, filter 0.25s ease;
}

.crash-autocashout-content.is-disabled {
  opacity: 0.35;
  pointer-events: none;
  filter: grayscale(0.4);
}

/* Auto-Cashout Box */
.crash-autocashout-box {
  display: flex;
  align-items: center;
  background: #202020;
  border-radius: 10px;
  height: 40px;
  padding: 0 12px;
  gap: 8px;
  box-sizing: border-box;
}

.crash-autocashout-icon {
  width: 14px;
  height: 14px;
  display: block;
  flex-shrink: 0;
}

.crash-auto-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-size: 15px;
  font-weight: 700;
  color: #FFFFFF;
  font-family: inherit;
  letter-spacing: -0.2px;
}

.crash-auto-presets {
  display: flex;
  gap: 4px;
}

.auto-preset-btn {
  flex: 1;
  height: 26px;
  border-radius: 8px;
  background: #191919;
  border: none;
  color: #595858;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.12s ease;
}

.auto-preset-btn.active {
  background: #282727;
  color: #FFFFFF;
}

.auto-preset-btn:active {
  background: #262626;
  color: #FFFFFF;
}

/* Primary Action Button */
.crash-action-container {
  margin-top: 0;
}

.crash-main-btn {
  width: 100%;
  height: 42px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  box-shadow: none;
  transition: transform 0.1s ease, filter 0.15s ease, background 0.25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.crash-main-btn:active {
  transform: scale(0.985);
}

.crash-btn-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.2px;
}

/* State 1: Place Bet (1:1 Reference Gold Gradient) */
.crash-main-btn.btn-state-bet {
  background: linear-gradient(180deg, #B16301 0%, #E9A03E 28%, #FFDA81 58%, #FFC70F 100%);
  color: #432B07;
}

/* State 2: Cashout Active (Green, pulsing) */
.crash-main-btn.btn-state-cashout {
  background: linear-gradient(180deg, #253700 0%, #B0CF33 100%);
  color: #FFFFFF;
  animation: btn-cashout-pulse 1.4s infinite ease-in-out;
}

/* State 3: Waiting next round (Gray) */
.crash-main-btn.btn-state-waiting {
  background: #252528;
  color: #5E5C5C;
  cursor: not-allowed;
}

@keyframes arena-shake {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-3px, 2px); }
  40% { transform: translate(3px, -2px); }
  60% { transform: translate(-2px, -1px); }
  80% { transform: translate(2px, 1px); }
}

.arena-shake {
  animation: arena-shake 0.35s ease-out;
}

/* =========================================================
   LIVE USER BETS PANEL
   ========================================================= */
.crash-bets-card {
  width: 100%;
  background: #111111;
  border-radius: 14px;
  padding: 12px 14px;
  box-sizing: border-box;
  margin-top: 8px;
  margin-bottom: 8px;
}

.crash-bets-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.crash-bets-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.crash-bets-title {
  font-size: 13px;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: -0.2px;
}

.crash-bets-count {
  font-size: 10px;
  font-weight: 700;
  color: #5E5C5C;
  background: #202020;
  padding: 2px 7px;
  border-radius: 9999px;
  line-height: 1;
}

.crash-bets-total-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
}

.crash-bets-total-label {
  color: #5E5C5C;
  font-weight: 500;
}

.crash-bets-total-val {
  color: #FFFFFF;
  font-weight: 700;
  font-size: 12px;
}

.crash-bets-coin {
  width: 14px;
  height: 14px;
  display: block;
}

.crash-bets-cols {
  display: flex;
  align-items: center;
  padding: 0 4px 8px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  margin-bottom: 4px;
}

.col-th {
  font-size: 10px;
  font-weight: 600;
  color: #5E5C5C;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.col-player {
  flex: 1.2;
  text-align: left;
}

.col-bet {
  flex: 1;
  text-align: right;
  padding-right: 14px;
}

.col-cashout {
  flex: 1.2;
  text-align: right;
}

.crash-bets-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.crash-bet-row {
  display: flex;
  align-items: center;
  padding: 6px 4px;
  border-radius: 8px;
  transition: background 0.15s ease;
}

.crash-bet-row:hover {
  background: rgba(255, 255, 255, 0.02);
}

.crash-bet-row.is-user {
  background: rgba(255, 192, 46, 0.08);
  border: 1px solid rgba(255, 192, 46, 0.2);
}

.row-player {
  flex: 1.2;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.row-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: #FFFFFF;
  flex-shrink: 0;
}

.row-avatar-img {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
}

.row-name {
  font-size: 12px;
  font-weight: 500;
  color: #FFFFFF;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.row-bet {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  padding-right: 14px;
  font-size: 12px;
  font-weight: 700;
  color: #FFFFFF;
}

.row-cashout {
  flex: 1.2;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

.row-waiting {
  font-size: 12px;
  font-weight: 600;
  color: #5E5C5C;
}

.row-lost {
  font-size: 11px;
  font-weight: 600;
  color: #FF453A;
}

.row-cashed {
  display: flex;
  align-items: center;
  gap: 4px;
}

.row-mult-tag {
  font-size: 10px;
  font-weight: 700;
  color: #FFBE3C;
  background: #302612;
  padding: 1px 5px;
  border-radius: 4px;
  line-height: 1.2;
}

.row-win-val {
  font-size: 12px;
  font-weight: 700;
  color: #4CD964;
  line-height: 1;
}

.row-coin {
  width: 12px;
  height: 12px;
  display: block;
}

/* =========================================================
   BONUS WHEEL (БОНУСНОЕ КОЛЕСО)
   ========================================================= */
.wheel-page {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px 12px 16px 12px;
  box-sizing: border-box;
}

/* Main Wheel Card */
.wheel-card {
  width: 100%;
  background: #111111;
  border: none;
  border-radius: 14px;
  padding: 12px;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

/* Header Buttons */
.wheel-header-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.wheel-pill-btn {
  flex: 1;
  height: 38px;
  background: #202020;
  border: none;
  border-radius: 10px;
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  user-select: none;
}

.wheel-pill-btn:hover {
  background: #282828;
}

.wheel-pill-btn:active {
  transform: scale(0.97);
  background: #2C2C2C;
}

/* Reel Wrapper & Pointer Arrows */
.wheel-reel-wrapper {
  position: relative;
  width: 100%;
  height: 270px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 14px;
  background: #0B0B0B;
}

.wheel-pointer {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  pointer-events: none;
  filter: drop-shadow(0 2px 6px rgba(255, 190, 60, 0.4));
  display: flex;
  align-items: center;
}

.wheel-pointer-left {
  left: 0;
}

.wheel-pointer-right {
  right: 0;
}

/* Viewport with Vertical Fade Vignette */
.wheel-reel-viewport {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.85) 15%, #000 32%, #000 68%, rgba(0,0,0,0.85) 85%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.85) 15%, #000 32%, #000 68%, rgba(0,0,0,0.85) 85%, transparent 100%);
}

.wheel-reel-track {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  will-change: transform;
  transform: translateY(0);
}

/* Reel Card Item */
.wheel-card-item {
  width: calc(100% - 24px);
  height: 132px;
  margin: 6px 0;
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}

.wheel-card-item.type-gold {
  background: radial-gradient(circle at center, #8A5304 0%, #482600 60%, #1A0D00 100%);
  border: 1px solid rgba(255, 190, 60, 0.45);
}

.wheel-card-item.type-green {
  background: radial-gradient(circle at center, #1B662A 0%, #0E3B16 60%, #051A0A 100%);
  border: 1px solid rgba(34, 197, 94, 0.4);
}

.wheel-card-item.type-pink {
  background: radial-gradient(circle at center, #8F1F5B 0%, #4D0E30 60%, #200413 100%);
  border: 1px solid rgba(236, 72, 153, 0.4);
}

.wheel-card-item.type-purple {
  background: radial-gradient(circle at center, #5D21BA 0%, #350C6D 60%, #15032B 100%);
  border: 1px solid rgba(168, 85, 247, 0.4);
}

.wheel-card-item.type-amber {
  background: radial-gradient(circle at center, #7C370F 0%, #481B03 60%, #1D0800 100%);
  border: 1px solid rgba(245, 158, 11, 0.4);
}

.wheel-card-item.type-blue {
  background: radial-gradient(circle at center, #1E42B4 0%, #10266A 60%, #040E2D 100%);
  border: 1px solid rgba(59, 130, 246, 0.4);
}

/* Rotating Swirling Rays on Cards matching case win */
.wheel-card-rays {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 340px;
  height: 340px;
  margin-top: -170px;
  margin-left: -170px;
  background-image: url('icons/prize_bg.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.38;
  pointer-events: none;
  animation: win-prize-rotate 26s linear infinite;
  transform-origin: center center;
  will-change: transform;
}

/* Sparkles on Cards */
.wheel-card-sparkle {
  position: absolute;
  color: #FFFFFF;
  opacity: 0.75;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.8));
  pointer-events: none;
}

.sparkle-s1 { top: 12%; left: 16%; font-size: 11px; }
.sparkle-s2 { top: 22%; right: 18%; font-size: 15px; }
.sparkle-s3 { bottom: 18%; left: 22%; font-size: 13px; }
.sparkle-s4 { bottom: 25%; right: 14%; font-size: 10px; }

/* 3D Gift image */
.wheel-card-img {
  width: 90px;
  height: 90px;
  object-fit: contain;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.6));
  z-index: 2;
  position: relative;
}

/* Card Price Badge - matching our style pill */
.wheel-card-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border-radius: 100px;
  padding: 4px 9px 4px 5px;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 700;
  color: #FFFFFF;
  z-index: 5;
  border: none;
  box-sizing: border-box;
}

.wheel-card-coin {
  width: 14px;
  height: 14px;
  display: block;
}

/* Ticket inside Reel Track */
.wheel-card-item.type-ticket {
  background: #FFFFFF;
  border: none;
  background-image: radial-gradient(circle 4px at 0px 50%, #0B0B0B 4px, transparent 4.5px), radial-gradient(circle 4px at 100% 50%, #0B0B0B 4px, transparent 4.5px);
  background-size: 100% 14px;
  background-repeat: repeat-y;
  padding: 0 24px;
  justify-content: flex-end;
}

.wheel-card-item.type-ticket .ticket-watermark {
  position: absolute;
  left: 14px;
  bottom: 8px;
  width: 72px;
  height: 72px;
  object-fit: contain;
  opacity: 0.9;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}

.wheel-card-item.type-ticket .ticket-content {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  z-index: 2;
}

.wheel-card-item.type-ticket .ticket-val {
  font-size: 38px;
  font-weight: 900;
  color: #111111;
  line-height: 1;
  display: flex;
  align-items: center;
  gap: 6px;
}

.wheel-card-item.type-ticket .ticket-label {
  font-size: 11px;
  font-weight: 700;
  color: #666666;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 4px;
}

/* Promo Card */
.wheel-promo-card {
  width: 100%;
  background: #111111;
  border: none;
  border-radius: 14px;
  padding: 14px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

.wheel-promo-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.wheel-info-icon-wrap {
  width: 20px;
  height: 20px;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.wheel-promo-title {
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 700;
}

.wheel-promo-input-row {
  display: flex;
  gap: 8px;
  width: 100%;
}

.wheel-promo-input-wrap {
  position: relative;
  flex: 1;
}

.wheel-promo-input {
  width: 100%;
  height: 42px;
  background: #1A1A1A;
  border: none;
  border-radius: 10px;
  padding: 0 32px 0 12px;
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 600;
  box-sizing: border-box;
  outline: none;
  text-transform: uppercase;
}

.wheel-promo-clear-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: #777;
  font-size: 12px;
  cursor: pointer;
  padding: 4px;
}

.wheel-promo-submit-btn {
  height: 42px;
  padding: 0 16px;
  background: #222222;
  border: none;
  border-radius: 10px;
  color: #FFBE3C;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
  user-select: none;
}

.wheel-promo-submit-btn:hover {
  background: #2A2A2A;
}

.wheel-promo-submit-btn:active {
  transform: scale(0.97);
}

.wheel-promo-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
}

.wheel-promo-hint {
  color: #888888;
  font-size: 12px;
}

.wheel-tg-link {
  color: #FFBE3C;
  text-decoration: none;
  font-weight: 600;
}

.wheel-tg-link:hover {
  text-decoration: underline;
}

.wheel-spins-badge {
  background: rgba(255, 190, 60, 0.12);
  border: none;
  border-radius: 8px;
  padding: 4px 10px;
  color: #FFBE3C;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
}

.ticket-coin-img {
  width: 20px;
  height: 20px;
  display: block;
  object-fit: contain;
}

/* Spin Button: In our style, without shadow */
.wheel-spin-btn-container {
  width: 100%;
}

.wheel-spin-btn {
  width: 100%;
  height: 48px;
  border-radius: 14px;
  border: none;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.2px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
  background: linear-gradient(180deg, #B16301 0%, #E9A03E 28%, #FFDA81 58%, #FFC70F 100%);
  color: #432B07;
  box-shadow: none;
}

.wheel-spin-btn:disabled {
  background: linear-gradient(180deg, #B16301 0%, #E9A03E 28%, #FFDA81 58%, #FFC70F 100%);
  color: #432B07;
  opacity: 0.65;
  cursor: not-allowed;
  box-shadow: none;
}

.wheel-spin-btn:not(:disabled):hover {
  filter: brightness(1.04);
}

.wheel-spin-btn:not(:disabled):active {
  transform: scale(0.985);
}

/* =========================================================
   WHEEL MODALS (CATALOG & MY PRIZES - INSIDE SCREEN BOTTOM SHEET)
   ========================================================= */
.wheel-sheet-card {
  max-height: 80%;
  padding-bottom: 18px;
}

.wheel-prizes-scroll-area {
  max-height: 62vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 4px 2px 14px 2px;
  box-sizing: border-box;
}

/* 2-Column Catalog Grid */
.wheel-prizes-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* Catalog Card: 3D Gift */
.cat-item-gift {
  height: 108px;
  border-radius: 14px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.cat-item-gift.cat-gold {
  background: radial-gradient(circle at center, #935A05 0%, #4D2900 60%, #1A0D00 100%);
  border: 1px solid rgba(255, 190, 60, 0.4);
}

.cat-item-gift.cat-super {
  position: relative;
}

.cat-super-text {
  position: absolute;
  font-size: 26px;
  font-weight: 900;
  color: rgba(255, 230, 150, 0.18);
  letter-spacing: 1px;
  transform: rotate(-12deg);
  pointer-events: none;
  line-height: 1.1;
  text-align: center;
}

.cat-item-gift.cat-green {
  background: radial-gradient(circle at center, #1B662A 0%, #0E3B16 60%, #051A0A 100%);
  border: 1px solid rgba(34, 197, 94, 0.4);
}

.cat-item-gift.cat-pink {
  background: radial-gradient(circle at center, #8F1F5B 0%, #4D0E30 60%, #200413 100%);
  border: 1px solid rgba(236, 72, 153, 0.4);
}

.cat-item-gift.cat-purple {
  background: radial-gradient(circle at center, #5D21BA 0%, #350C6D 60%, #15032B 100%);
  border: 1px solid rgba(168, 85, 247, 0.4);
}

.cat-item-gift.cat-amber {
  background: radial-gradient(circle at center, #7C370F 0%, #481B03 60%, #1D0800 100%);
  border: 1px solid rgba(245, 158, 11, 0.4);
}

.cat-item-gift.cat-olive {
  background: radial-gradient(circle at center, #354710 0%, #1D2906 60%, #0D1302 100%);
  border: 1px solid rgba(132, 204, 22, 0.4);
}

.cat-item-gift.cat-peach {
  background: radial-gradient(circle at center, #9A4918 0%, #562407 60%, #200D02 100%);
  border: 1px solid rgba(251, 146, 60, 0.4);
}

.cat-gift-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: #0098EA;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border-radius: 100px;
  padding: 3px 8px 3px 4px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 700;
  color: #FFFFFF;
  z-index: 5;
  border: none;
  box-sizing: border-box;
}

.cat-gift-coin {
  width: 12px;
  height: 12px;
  display: block;
}

.cat-gift-img {
  width: 66px;
  height: 66px;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.55));
  z-index: 2;
}

/* Catalog Card: Balance Voucher Ticket ("on balance") */
.cat-item-ticket {
  height: 64px;
  background-color: #FFFFFF;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 14px;
  box-sizing: border-box;
  background-image:
    radial-gradient(circle 3.5px at 0px 50%, #111111 3.5px, transparent 4px),
    radial-gradient(circle 3.5px at 100% 50%, #111111 3.5px, transparent 4px),
    repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.025) 0px, rgba(0, 0, 0, 0.025) 2px, transparent 2px, transparent 8px),
    repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.02) 0px, rgba(0, 0, 0, 0.02) 2px, transparent 2px, transparent 8px);
  background-size: 100% 16px, 100% 16px, auto, auto;
  background-repeat: repeat-y, repeat-y, repeat, repeat;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.cat-ticket-watermark {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  object-fit: contain;
  opacity: 0.88;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.15));
}

.cat-ticket-content {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  z-index: 2;
  position: relative;
}

.cat-ticket-row {
  display: flex;
  align-items: center;
  gap: 5px;
}

.cat-ticket-amount {
  font-size: 24px;
  font-weight: 900;
  color: #111111;
  letter-spacing: -0.5px;
  line-height: 1;
}

.cat-ticket-coin-img {
  width: 16px;
  height: 16px;
  display: block;
  object-fit: contain;
}

.cat-ticket-sub {
  font-size: 8.5px;
  font-weight: 700;
  color: #666666;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-top: 2px;
}

/* Catalog Card: Deposit Bonus Ticket (100%, 75%, 50%, 45%, 40%) */
.cat-item-bonus {
  height: 64px;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.cat-item-bonus::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle 3.5px at 0px 50%, #111111 3.5px, transparent 4px),
    radial-gradient(circle 3.5px at 100% 50%, #111111 3.5px, transparent 4px),
    repeating-linear-gradient(45deg, transparent 0px, transparent 6px, rgba(0, 0, 0, 0.08) 6px, rgba(0, 0, 0, 0.08) 12px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, transparent 65%, rgba(0, 0, 0, 0.12) 100%);
  background-size: 100% 16px, 100% 16px, auto, auto;
  background-repeat: repeat-y, repeat-y, repeat, no-repeat;
  pointer-events: none;
  z-index: 1;
}

.cat-bonus-val {
  font-size: 26px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.5px;
  z-index: 2;
  position: relative;
}

.bonus-100 {
  background: linear-gradient(135deg, #FFC72C 0%, #E89511 100%);
  color: #1A1100;
}

.bonus-75 {
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  color: #FFFFFF;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.bonus-50 {
  background: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%);
  color: #FFFFFF;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.bonus-45 {
  background: linear-gradient(135deg, #6366F1 0%, #4338CA 100%);
  color: #FFFFFF;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.bonus-40 {
  background: linear-gradient(135deg, #A855F7 0%, #7E22CE 100%);
  color: #FFFFFF;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

/* My Prizes List */
.wheel-my-prizes-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.my-prize-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #181818;
  border: none;
  border-radius: 14px;
  padding: 10px 14px;
  box-sizing: border-box;
}

.my-prize-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.my-prize-thumb {
  width: 44px;
  height: 44px;
  object-fit: contain;
  border-radius: 10px;
  background: #0E0E0E;
  padding: 4px;
  flex-shrink: 0;
  border: none;
  display: block;
}

.my-prize-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.my-prize-name {
  font-size: 13.5px;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: -0.1px;
}

.my-prize-time {
  font-size: 11px;
  font-weight: 500;
  color: #5B5959;
}

.my-prize-status {
  font-size: 11px;
  font-weight: 700;
  color: #4CD964;
  background: rgba(76, 217, 100, 0.12);
  padding: 4px 10px;
  border-radius: 8px;
  letter-spacing: 0;
}

.my-prizes-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 16px;
  text-align: center;
  color: #777777;
}

.my-prizes-empty-icon {
  font-size: 38px;
  margin-bottom: 12px;
}

.my-prizes-empty-text {
  font-size: 14px;
  line-height: 1.4;
}

/* =========================================================
   14. UPGRADE PAGE ("Апгрейд предметов") - OUR STYLE
   ========================================================= */
.upgrade-page {
  position: relative;
  padding: 0 16px 110px 16px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.upgrade-header-bar {
  margin: 0;
  width: 100%;
  position: relative;
  z-index: 2;
}

.upgrade-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 14px;
  font-weight: 600;
  color: #FFFFFF;
  margin: 0;
  letter-spacing: 0.5px;
  line-height: 1;
  pointer-events: none;
  white-space: nowrap;
}

/* Mode Switch (ПРЕДМЕТ / БАЛАНС) */
.upgrade-mode-toggle-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
}

.upgrade-mode-toggle {
  display: flex;
  background: #141414;
  padding: 4px;
  border-radius: 12px;
  gap: 4px;
  width: 100%;
  max-width: 280px;
}

.upgrade-mode-btn {
  flex: 1;
  height: 36px;
  border-radius: 9px;
  border: none;
  background: transparent;
  color: #888888;
  font-size: 12.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.18s ease;
  user-select: none;
}

.upgrade-mode-btn.active {
  background: #242424;
  color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.upgrade-mode-coin {
  width: 14px;
  height: 14px;
  display: block;
}

/* Section Heading */
.upgrade-section-heading {
  font-size: 15px;
  font-weight: 700;
  color: #FFFFFF;
  text-align: center;
  margin: -4px 0 0 0;
  letter-spacing: -0.2px;
}

/* Gauge Card */
.upgrade-gauge-card {
  background-color: #111112;
  background-image: url('icons/upgrade_bg.png');
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto;
  border-radius: 22px;
  padding: 14px 14px 16px 14px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: none;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
  position: relative;
  overflow: hidden;
}

.upgrade-gauge-wrapper {
  position: relative;
  width: 100%;
  height: 284px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

/* Rotating Golden Pointer Arm (sweeps around the 270px wheel dial) */
.upgrade-pointer-arm {
  position: absolute;
  width: 270px;
  height: 270px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 10;
  will-change: transform;
  transform-origin: center center;
  transform: rotate(0deg);
}

.upgrade-pointer-head {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.upgrade-pointer-img {
  width: 24px;
  height: auto;
  display: block;
  filter: none;
  transition: transform 0.2s ease;
}

.upgrade-gauge-wrapper.is-rolling .upgrade-pointer-img {
  transform: scale(1.08);
}

/* Static Wheel HUD (Ticks & Dark Track) */
.upgrade-gauge-hud-svg {
  position: absolute;
  width: 270px;
  height: 270px;
  display: block;
  overflow: visible;
  pointer-events: none;
  z-index: 1;
}

/* Static Wheel Gauge Fill Layer */
.upgrade-wheel-disc {
  position: absolute;
  width: 270px;
  height: 270px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 2;
}

.upgrade-gauge-fill-svg {
  width: 270px;
  height: 270px;
  display: block;
  overflow: visible;
}

.gauge-track-path {
  stroke-width: 24;
  stroke: #191919;
}

.gauge-fill-path {
  stroke-linecap: butt;
  stroke-width: 24;
  transition: stroke-dasharray 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Center Hub with Lots of Breathing Room (Clean without inner shadows or borders) */
.upgrade-center-hub {
  position: absolute;
  width: 144px;
  height: 144px;
  border-radius: 50%;
  background: #111113;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  border: none;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
  transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* Win State (ПОБЕДА - Emerald Green Glow) */
.upgrade-center-hub.state-win {
  background: radial-gradient(circle at center, rgba(34, 197, 94, 0.22) 0%, rgba(13, 22, 17, 0.96) 75%);
  box-shadow: inset 0 0 22px rgba(34, 197, 94, 0.38), 0 0 18px rgba(34, 197, 94, 0.22), 0 0 0 1px rgba(74, 222, 128, 0.22);
}

.upgrade-center-hub.state-win .upgrade-gauge-sublabel {
  color: #4ADE80;
  text-shadow: 0 0 10px rgba(74, 222, 128, 0.65);
}

/* Lose State (ПРОИГРЫШ - Crimson Red Glow) */
.upgrade-center-hub.state-lose {
  background: radial-gradient(circle at center, rgba(239, 68, 68, 0.22) 0%, rgba(22, 14, 16, 0.96) 75%);
  box-shadow: inset 0 0 22px rgba(239, 68, 68, 0.38), 0 0 18px rgba(239, 68, 68, 0.22), 0 0 0 1px rgba(248, 113, 113, 0.22);
}

.upgrade-center-hub.state-lose .upgrade-gauge-sublabel {
  color: #FF5A5A;
  text-shadow: 0 0 10px rgba(255, 90, 90, 0.65);
}

.upgrade-gauge-readout {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 4;
  text-align: center;
  padding: 0 6px;
}

.upgrade-gauge-percent {
  font-size: 30px;
  font-weight: 900;
  color: #FFFFFF;
  letter-spacing: -0.6px;
  line-height: 1.05;
  text-shadow: none;
  font-variant-numeric: tabular-nums;
  user-select: none;
}

.upgrade-gauge-sublabel {
  font-size: 11.5px;
  font-weight: 800;
  color: #71717A;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-top: 4px;
  user-select: none;
  text-shadow: none;
  transition: color 0.25s ease;
}

/* Slot Header Titles: "ВАШ ПРЕДМЕТ" and "UPGRADE" */
.upgrade-slots-header-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 0 4px;
  margin-top: 4px;
  margin-bottom: -2px;
  width: 100%;
  box-sizing: border-box;
}

.upgrade-slot-header-title {
  font-size: 11px;
  font-weight: 700;
  color: #5E5C5C;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  text-align: left;
}

.upgrade-slot-header-title:last-child {
  text-align: left;
  padding-left: 0;
}

/* Slots Grid */
.upgrade-slots-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
}

.upgrade-slot-card {
  background: #191919;
  border-radius: 14px;
  height: 144px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
  user-select: none;
  border: none;
}

.upgrade-slot-card .slot-filled-state {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}

.upgrade-slot-card .case-item-top {
  width: 100%;
  height: 112px;
  background-color: #202020;
  border-radius: 13px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.upgrade-slot-card .case-item-name {
  width: 100%;
  height: 32px;
  background-color: #191919;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11.5px;
  font-weight: 600;
  color: #5E5C5C;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 8px;
  box-sizing: border-box;
  flex-shrink: 0;
}

.upgrade-slot-card .card-rarity-indicator {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 34px;
  height: 2px;
  border-radius: 999px;
  background: #C7B08D;
  z-index: 10;
}

.upgrade-slot-close-btn {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 22px;
  height: 22px;
  background: transparent;
  border: none;
  color: #484848;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 12;
  border-radius: 4px;
  transition: color 0.15s ease, transform 0.15s ease;
  padding: 0;
}

.upgrade-slot-close-btn:hover {
  color: #A1A1AA;
  transform: scale(1.1);
}

.upgrade-slot-card .card-carbon-pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('icons/pattern_gifts.png');
  background-size: 110px auto;
  background-position: top center;
  background-repeat: no-repeat;
  opacity: 0.45;
  pointer-events: none;
  z-index: 1;
}

.upgrade-slot-card .card-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 86px;
  height: 72px;
  background-image: url('icons/logo_gifts.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
  opacity: 0.22;
  z-index: 2;
}

.upgrade-slot-card .case-item-glow {
  position: absolute;
  width: 86px;
  height: 86px;
  object-fit: contain;
  pointer-events: none;
  filter: blur(16px);
  opacity: 0.35;
  transform: scale(1.05);
  z-index: 3;
}

.upgrade-slot-card .case-item-img {
  position: relative;
  width: 86px;
  height: 86px;
  object-fit: contain;
  z-index: 4;
  pointer-events: none;
  display: block;
}

.upgrade-slot-card .case-item-price-badge {
  position: absolute;
  bottom: 8px;
  left: 8px;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: 999px;
  padding: 3.5px 8px 3.5px 5px;
  display: flex;
  align-items: center;
  gap: 5px;
  z-index: 6;
}

.upgrade-slot-card .case-item-coin {
  width: 15px;
  height: 15px;
  display: block;
  flex-shrink: 0;
}

.upgrade-slot-card .case-item-price-val {
  font-size: 11.5px;
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1;
}

/* Empty Placeholder State */
.upgrade-slot-card .slot-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 100%;
  color: #5E5C5C;
  pointer-events: none;
  background: #191919;
  border-radius: 14px;
}

.slot-empty-icon {
  width: 40px;
  height: 40px;
  display: block;
  flex-shrink: 0;
}

.slot-empty-plus {
  font-size: 24px;
  font-weight: 300;
  color: #5E5C5C;
  line-height: 1;
}

.slot-empty-text {
  font-size: 11px;
  font-weight: 600;
  color: #5E5C5C;
  line-height: 1.2;
  text-align: center;
}

/* Upgrade Action Button */
.upgrade-action-wrap {
  width: 100%;
}

.upgrade-action-btn {
  width: 100%;
  height: 40px;
  border-radius: 10px;
  border: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.1px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.upgrade-action-btn:disabled {
  background: #191919;
  color: #4B4B52;
  border: none;
  cursor: not-allowed;
  box-shadow: none;
}

.upgrade-action-btn:not(:disabled) {
  background: linear-gradient(180deg, #A85D00 0%, #D87C04 22%, #F3B356 45%, #FEE085 58%, #FFD036 82%, #FFC40E 100%);
  color: #432B07;
  box-shadow: none;
}

.upgrade-action-btn:not(:disabled):hover {
  filter: brightness(1.03);
}

.upgrade-action-btn:active {
  transform: scale(0.985);
}

.upgrade-btn-icon {
  width: 15px;
  height: 15px;
  display: block;
  flex-shrink: 0;
  fill: #432B07;
  transition: transform 0.2s ease;
}

.upgrade-action-btn:disabled .upgrade-btn-icon {
  fill: #4B4B52;
}

.upgrade-btn-text {
  font-size: 12px;
  font-weight: 700;
  color: #432B07;
  line-height: 1;
}

.upgrade-action-btn:disabled .upgrade-btn-text {
  color: #4B4B52;
}

/* Stake Slider Card («Сумма ставки») */
.upgrade-stake-card {
  background: #161619;
  border-radius: 14px;
  padding: 9px 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  border: none;
}

.upgrade-stake-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.upgrade-stake-title {
  font-size: 11.5px;
  font-weight: 600;
  color: #71717A;
}

.upgrade-stake-val-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  color: #FFFFFF;
}

.upgrade-stake-coin {
  width: 12px;
  height: 12px;
}

.upgrade-stake-val {
  font-variant-numeric: tabular-nums;
  color: #FBBF24;
}

.upgrade-stake-max {
  font-size: 10px;
  font-weight: 500;
  color: #52525B;
  margin-left: 2px;
}

.upgrade-stake-slider-wrap {
  width: 100%;
  display: flex;
  align-items: center;
}

.upgrade-stake-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: #202024;
  outline: none;
  cursor: pointer;
  transition: background 0.1s ease;
}

.upgrade-stake-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #FBBF24;
  border: 2px solid #FFFFFF;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.5);
  cursor: pointer;
  transition: transform 0.12s ease;
}

.upgrade-stake-slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}

.upgrade-stake-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #FBBF24;
  border: 2px solid #FFFFFF;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.5);
  cursor: pointer;
}

/* Quick Presets Row (Multipliers + Chances + Random) directly below button */
.upgrade-presets-row {
  display: flex;
  gap: 6px;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  margin-top: 0;
}

.upgrade-preset-btn {
  flex: 1;
  height: 38px;
  border-radius: 12px;
  background: #171718;
  border: none;
  color: #5E5C5C;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  user-select: none;
  letter-spacing: -0.1px;
}

.upgrade-preset-btn:hover {
  background: #232323;
  color: #8E8E93;
}

.upgrade-preset-btn.active {
  background: #241D14;
  color: #FBBF24;
  box-shadow: inset 0 0 0 1px #784E0F;
}

.preset-random-btn {
  flex: 0.85;
  color: #5E5C5C;
}

.preset-random-btn:hover {
  color: #8E8E93;
}

/* Bottom Drawer Bar Handle (hidden to match clean card mockup) */
.upgrade-drawer-handle-bar {
  display: none !important;
}

/* Drawer / Catalog Card */
.upgrade-drawer {
  background: #111112;
  border-radius: 22px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-sizing: border-box;
  border: none;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}

.upgrade-drawer-tabs {
  display: flex;
  gap: 8px;
  width: 100%;
  border-bottom: none;
  padding-bottom: 0;
}

.upgrade-drawer-tab {
  flex: 1;
  height: 40px;
  border-radius: 10px;
  background: #191919;
  border: none;
  color: #5E5C5C;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s ease;
  user-select: none;
}

.upgrade-drawer-tab:hover {
  filter: brightness(1.05);
}

.upgrade-drawer-tab.active {
  background: linear-gradient(180deg, #A85D00 0%, #D87C04 22%, #F3B356 45%, #FEE085 58%, #FFD036 82%, #FFC40E 100%);
  color: #432B07;
  box-shadow: none;
}

.upgrade-drawer-tab.active::after {
  display: none;
}

.upgrade-drawer-tab-icon {
  width: 19px;
  height: 19px;
  display: block;
  flex-shrink: 0;
  color: inherit;
  fill: currentColor;
}

.upgrade-drawer-tab.active .upgrade-drawer-tab-icon {
  fill: #432B07;
}

.upgrade-drawer-tab:not(.active) .upgrade-drawer-tab-icon {
  fill: #5E5C5C;
}

.upgrade-filter-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  width: 100%;
}

.upgrade-search-wrap {
  flex: 1;
  height: 44px;
  background: #202020;
  border-radius: 14px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  gap: 10px;
  box-sizing: border-box;
}

.upgrade-search-wrap svg {
  color: #6E6E6E;
  flex-shrink: 0;
}

.upgrade-search-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 500;
}

.upgrade-search-input::placeholder {
  color: #6E6E6E;
}

.upgrade-sort-btn {
  height: 44px;
  padding: 0 16px;
  background: #202020;
  border: none;
  border-radius: 14px;
  color: #AAAAAA;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  user-select: none;
  transition: all 0.15s ease;
}

.upgrade-sort-btn:hover {
  background: #282828;
  color: #FFFFFF;
}

.upgrade-items-scroll {
  width: 100%;
  padding: 0;
  box-sizing: border-box;
}

.upgrade-items-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  box-sizing: border-box;
}

.upgrade-items-grid .case-item-card {
  height: 142px;
  border-radius: 14px;
  background: #191919;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease, outline 0.16s ease;
  user-select: none;
}

.upgrade-items-grid .case-item-card .case-item-top {
  height: 108px;
  border-radius: 14px;
  background-color: #202020;
}

.upgrade-items-grid .case-item-card .case-item-glow {
  display: none !important;
}

.upgrade-items-grid .case-item-card .case-item-img {
  width: 68px;
  height: 68px;
}

.upgrade-items-grid .case-item-card .card-rarity-indicator {
  width: 28px;
  height: 2.5px;
  border-radius: 2px;
  top: 6px;
  background: #C7B08D !important;
}

.upgrade-items-grid .case-item-card .case-item-price-badge {
  bottom: 6px;
  left: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 2px 7px 2px 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.upgrade-items-grid .case-item-card .case-item-coin {
  width: 14px;
  height: 14px;
}

.upgrade-items-grid .case-item-card .case-item-price-val {
  font-size: 11px;
  font-weight: 700;
  color: #FFFFFF;
}

.upgrade-items-grid .case-item-card .case-item-name {
  height: 34px;
  font-size: 12.5px;
  font-weight: 600;
  color: #5E5C5C;
  display: flex;
  align-items: center;
  justify-content: center;
}

.upgrade-items-grid .case-item-card:hover {
  transform: translateY(-2px);
}

.upgrade-items-grid .case-item-card:active {
  transform: scale(0.97);
}

.upgrade-items-grid .case-item-card.selected {
  outline: none;
  border: none;
  box-shadow: none;
}

.upgrade-items-grid .case-item-card.selected::after {
  content: '';
  position: absolute;
  top: 7px;
  right: 7px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: #FBC024;
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='12' viewBox='0 0 16 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.6585 0.247437C16.0742 0.611119 16.1163 1.24288 15.7526 1.65852L7.00259 11.6585C6.64026 12.0726 6.01145 12.1162 5.59546 11.756L0.345459 7.21057C-0.0720752 6.84907 -0.117499 6.21754 0.244003 5.8C0.605505 5.38247 1.23704 5.33704 1.65457 5.69855L6.15251 9.59286L14.2474 0.341509C14.6111 -0.0741276 15.2429 -0.116245 15.6585 0.247437Z' fill='black'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 9px;
  z-index: 10;
}

.upgrade-items-grid .case-item-card.selected .case-item-name {
  color: #F5A524;
  font-weight: 600;
}

/* Rarity Notch at Top Center */
.upgrade-card-notch {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 26px;
  height: 2.5px;
  border-radius: 0 0 2px 2px;
  z-index: 2;
  opacity: 0.95;
}

/* Image Thumb Box */
.upgrade-item-thumb-box {
  position: relative;
  width: 100%;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 8px 12px 8px;
  box-sizing: border-box;
}

.upgrade-item-glow {
  position: absolute;
  top: 48%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 68px;
  height: 68px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  filter: blur(6px);
  opacity: 0.85;
}

.upgrade-item-img {
  width: 58px;
  height: 58px;
  object-fit: contain;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.45));
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.upgrade-item-card:hover .upgrade-item-img {
  transform: scale(1.06);
}

/* Floating Price Pill Badge at Bottom-Left */
.upgrade-item-price-pill {
  position: absolute;
  bottom: 6px;
  left: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(24, 25, 30, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 20px;
  padding: 2.5px 7.5px 2.5px 5.5px;
  border: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  z-index: 3;
}

.upgrade-item-coin {
  width: 12px;
  height: 12px;
  display: block;
}

.upgrade-item-price-pill span {
  font-size: 11px;
  font-weight: 700;
  color: #FFFFFF;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* Item Name Section */
.upgrade-item-name {
  padding: 0 6px 10px 6px;
  font-size: 11.5px;
  font-weight: 500;
  color: #6E7382;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  box-sizing: border-box;
  transition: color 0.15s ease;
}

.upgrade-item-card:hover .upgrade-item-name {
  color: #A1A1AA;
}

.upgrade-item-card.selected .upgrade-item-name {
  color: #FBBF24;
  font-weight: 700;
}

.upgrade-empty-grid {
  grid-column: 1 / -1;
  padding: 30px 10px;
  text-align: center;
  color: #666666;
  font-size: 12.5px;
  line-height: 1.4;
}

/* Win / Lose Flash Overlay */
.upgrade-flash-win,
.upgrade-win-glow {
  animation: upgrade-win-pulse 1.2s ease;
}

.upgrade-flash-lose,
.upgrade-lose-shake {
  animation: upgrade-shake 0.5s ease, upgrade-lose-pulse 0.8s ease;
}

@keyframes upgrade-shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

@keyframes upgrade-win-pulse {
  0% { box-shadow: 0 0 0 rgba(16, 185, 129, 0); }
  30% { box-shadow: 0 0 40px rgba(16, 185, 129, 0.7); }
  100% { box-shadow: 0 0 0 rgba(16, 185, 129, 0); }
}

@keyframes upgrade-lose-pulse {
  0% { box-shadow: 0 0 0 rgba(239, 68, 68, 0); }
  30% { box-shadow: 0 0 40px rgba(239, 68, 68, 0.7); }
  100% { box-shadow: 0 0 0 rgba(239, 68, 68, 0); }
}

@keyframes weekly-dot-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.6; }
}

/* =========================================================
   WEEKLY / MONTHLY LEADERBOARD PAGE
   ========================================================= */
.weekly-page {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 14px;
  box-sizing: border-box;
}

.weekly-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 2px;
}

.weekly-header-badge {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
}

.weekly-badge-icon {
  width: 18px;
  height: 18px;
  display: block;
}

/* Segmented Tabs (Weekly / Monthly) */
.weekly-tabs-container {
  width: 100%;
}

.weekly-tabs-nav {
  display: flex;
  height: 40px;
  background: #19191C;
  border-radius: 10px;
  padding: 3px;
  gap: 4px;
  border: none;
  box-sizing: border-box;
}

.weekly-tab-btn {
  flex: 1;
  height: 100%;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  color: #727278;
  background: transparent;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.weekly-tab-btn.active {
  background: var(--gold-gradient);
  color: #432B07;
  box-shadow: none;
}

.weekly-tab-btn:active {
  transform: scale(0.98);
}

/* =========================================================
   WEEKLY & MONTHLY TOP 3 PODIUM (ЗОЛОТО, СЕРЕБРО, БРОНЗА)
   ========================================================= */
.weekly-podium {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 8px 0 2px;
  margin-top: 4px;
  position: relative;
}

.podium-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  max-width: 116px;
}

.podium-col.podium-gold {
  max-width: 126px;
  z-index: 3;
}

.podium-col.podium-silver {
  z-index: 2;
}

.podium-col.podium-bronze {
  z-index: 1;
}

/* Avatar Anchor and Rings */
.podium-avatar-anchor {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  margin-bottom: -24px;
  z-index: 6;
}

.podium-crown-img {
  width: 24px;
  height: 18px;
  margin-bottom: -2px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
  display: block;
}

.podium-avatar-wrap {
  position: relative;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #19191C;
  border: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
}

.podium-gold .podium-avatar-wrap {
  width: 54px;
  height: 54px;
}

.podium-silver .podium-avatar-wrap {
  width: 48px;
  height: 48px;
}

.podium-bronze .podium-avatar-wrap {
  width: 46px;
  height: 46px;
}

.podium-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}

/* Medals */
.podium-medal {
  width: 36px;
  height: 44px;
  margin-top: -20px;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.65));
  display: block;
  z-index: 7;
}

/* 3D Pedestal */
.podium-pedestal {
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* Top facet (SVG trapezoid cap) */
.podium-top {
  width: 100%;
  height: 22px;
  display: block;
  line-height: 0;
  margin-bottom: -1px;
}

.podium-top-svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Front facet - Completely borderless in WinRoll style */
.podium-front {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 4px 10px;
  box-sizing: border-box;
  text-align: center;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  gap: 2px;
  border: none;
}

.podium-gold .podium-front {
  min-height: 122px;
  background: linear-gradient(180deg, #2A1F12 0%, #17130C 60%, rgba(18, 15, 11, 0.85) 100%);
  border: none;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.6);
}

.podium-silver .podium-front {
  min-height: 102px;
  background: linear-gradient(180deg, #1D222A 0%, #12151B 60%, rgba(15, 17, 21, 0.85) 100%);
  border: none;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
}

.podium-bronze .podium-front {
  min-height: 92px;
  background: linear-gradient(180deg, #241812 0%, #150E0A 60%, rgba(17, 12, 10, 0.85) 100%);
  border: none;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
}

.podium-username {
  font-size: 13px;
  font-weight: 700;
  color: #FFFFFF;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: -0.2px;
}

.podium-gold .podium-username {
  font-size: 14px;
}

.podium-deposits {
  font-size: 11px;
  font-weight: 500;
  color: #5E5C5C;
}

.podium-amount-pill {
  margin-top: 3px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #202024;
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  color: #FFFFFF;
  border: none;
}

.gold-pill,
.silver-pill,
.bronze-pill {
  border: none;
}

.podium-coin {
  width: 13px;
  height: 13px;
  display: block;
}

/* Table Header (User / Earned Income) */
.weekly-table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 700;
  color: #5E5C5C;
  text-transform: uppercase;
  letter-spacing: 0;
}

/* Leaderboard Rows */
.weekly-leaderboard-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.weekly-leaderboard-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #191919;
  border-radius: 12px;
  padding: 10px 14px;
  border: none;
  box-sizing: border-box;
  transition: transform 0.12s ease;
}

.weekly-leaderboard-row:active {
  transform: scale(0.99);
}

.weekly-row-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.weekly-avatar-wrap {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #202024;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
}

.weekly-avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.weekly-medal-badge {
  position: absolute;
  bottom: -2px;
  right: -3px;
  font-size: 11px;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8));
}

.weekly-user-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.weekly-username {
  font-size: 14px;
  font-weight: 700;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  gap: 4px;
}

.weekly-subtitle {
  font-size: 12px;
  font-weight: 500;
  color: #5E5C5C;
}

.weekly-row-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.weekly-amount-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #202024;
  border: none;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #FFFFFF;
}

.weekly-row-coin {
  width: 15px;
  height: 15px;
  display: block;
}

.weekly-rank-tag {
  min-width: 28px;
  text-align: right;
  font-size: 14px;
  font-weight: 800;
  color: #5E5C5C;
  letter-spacing: -0.2px;
}

.rank-1-text {
  color: #FFC40E;
}

.rank-2-text {
  color: #CBD5E1;
}

.rank-3-text {
  color: #F59E0B;
}

/* Pinned Current User Result Floating Bar */
.weekly-user-dock-card {
  position: sticky;
  bottom: 84px;
  z-index: 35;
  width: 100%;
  background: #191919;
  border: none;
  border-radius: 12px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.7);
  box-sizing: border-box;
  margin-top: 6px;
}

.weekly-user-avatar-wrap {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #202024;
  border: none;
}

.weekly-user-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: none;
  box-sizing: border-box;
}

.weekly-user-avatar-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  background: linear-gradient(180deg, #CF7401 0%, #FFD75D 100%);
  color: #432B07;
  font-size: 9px;
  font-weight: 800;
  padding: 1px 4px;
  border-radius: 4px;
  text-transform: uppercase;
}

.weekly-user-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-left: 10px;
}

.weekly-user-name {
  font-size: 14px;
  font-weight: 700;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  gap: 6px;
}

.weekly-you-tag {
  background: rgba(255, 196, 14, 0.15);
  color: #FFC40E;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
}

.weekly-user-sub {
  font-size: 12px;
  font-weight: 500;
  color: #5E5C5C;
}

.weekly-user-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.weekly-user-deposit-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #202024;
  border: none;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #FFFFFF;
}

.weekly-user-coin {
  width: 15px;
  height: 15px;
}

.weekly-user-rank-pill {
  font-size: 14px;
  font-weight: 800;
  color: #5E5C5C;
  min-width: 32px;
  text-align: right;
}

/* =========================================================
   INVITE & REFERRAL PROGRAM VIEW (В НАШЕМ СТИЛЕ)
   ========================================================= */
.invite-page {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 12px 16px;
  box-sizing: border-box;
}

/* Hero Banner 1:1 with Figma */
.invite-hero-banner {
  width: 100%;
  height: 92px;
  background: linear-gradient(180deg, #034E85 0%, #1574BC 45%, #289DF5 100%);
  border-radius: 14px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  border: none;
  padding: 0 0 0 19px;
}

.invite-banner-bg-pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('icons/banner_pattern.svg');
  background-size: cover;
  background-position: center;
  opacity: 1;
  pointer-events: none;
  z-index: 1;
}

.invite-banner-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  user-select: none;
}

.invite-banner-title-line1 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 19px;
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1.15;
  letter-spacing: normal;
}

.invite-banner-pill {
  background: #FFFFFF;
  color: #1775BA;
  font-size: 15px;
  font-weight: 800;
  padding: 1.5px 12px;
  border-radius: 999px;
  line-height: 1.15;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.invite-banner-title-line2 {
  font-size: 19px;
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1.15;
  letter-spacing: normal;
  margin-top: 4px;
}

.invite-banner-art-img {
  position: absolute;
  right: 23px;
  bottom: 0;
  height: 82px;
  width: auto;
  object-fit: contain;
  object-position: bottom right;
  z-index: 2;
  display: block;
  pointer-events: none;
}

/* Action Buttons (Height: 40px strictly per requirement) */
.invite-actions-row {
  display: flex;
  gap: 8px;
  width: 100%;
  align-items: center;
}

.invite-main-btn {
  flex: 1;
  height: 40px;
  border-radius: 10px;
  background: var(--gold-gradient);
  color: #432B07 !important;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease, opacity 0.15s ease;
  box-shadow: none;
}

.invite-main-btn:active {
  transform: scale(0.98);
  opacity: 0.95;
}

.invite-copy-btn {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--gold-gradient);
  color: #432B07 !important;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease, opacity 0.15s ease;
  flex-shrink: 0;
  box-shadow: none;
}

.invite-copy-btn:active {
  transform: scale(0.95);
  opacity: 0.95;
}

.invite-copy-btn svg {
  display: block;
}

/* Referral Balance Card */
.invite-balance-card {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #191919;
  border-radius: 16px;
  padding: 18px 20px;
  box-sizing: border-box;
  border: none;
}

.invite-balance-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.invite-balance-label {
  font-size: 13px;
  font-weight: 500;
  color: #8E8E93;
}

.invite-balance-amount-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.invite-balance-val {
  font-size: 24px;
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1;
}

.invite-balance-coin {
  width: 18px;
  height: 18px;
  display: block;
}

.invite-withdraw-btn {
  background: #202024;
  border: none;
  border-radius: 12px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  color: #FFFFFF;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}

.invite-withdraw-btn:active {
  transform: scale(0.96);
  background: #2A2A30;
}

/* Perks Rows (2 rows) */
.invite-perks-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.invite-perk-card {
  width: 100%;
  background: #191919;
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: none;
  box-sizing: border-box;
}

.invite-perk-icon-wrap {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: #202024;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #FFC506;
}

.invite-perk-icon-wrap svg {
  display: block;
}

.invite-perk-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}

.invite-perk-title {
  font-size: 14px;
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1.2;
}

.invite-perk-sub {
  font-size: 12px;
  font-weight: 500;
  color: #8E8E93;
  line-height: 1.25;
}

/* Section Header */
.invite-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 2px 2px;
}

.invite-section-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.invite-section-title {
  font-size: 20px;
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: -0.2px;
}

.invite-count-badge {
  background: #202024;
  color: #8E8E93;
  font-size: 13px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 8px;
}

/* Table Header */
.invite-table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 4px;
  font-size: 11px;
  font-weight: 700;
  color: #5E5C5C;
  text-transform: uppercase;
  letter-spacing: 0;
}

/* Empty State */
.invite-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 38px 20px;
  background: transparent;
  gap: 8px;
  border: none;
  box-sizing: border-box;
}

.invite-empty-text {
  font-size: 15px;
  font-weight: 500;
  color: #8E8E93;
  margin: 0;
  line-height: 1.4;
}

/* Friends List */
.invite-friends-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.invite-friend-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #191919;
  border-radius: 14px;
  padding: 12px 14px;
  box-sizing: border-box;
  border: none;
  transition: transform 0.12s ease;
}

.invite-friend-row:active {
  transform: scale(0.99);
}

.invite-friend-user {
  display: flex;
  align-items: center;
  gap: 12px;
}

.invite-friend-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #202024;
  color: #FFFFFF;
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.invite-friend-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.invite-friend-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.invite-friend-name {
  font-size: 14px;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: -0.2px;
}

.invite-friend-date {
  font-size: 11px;
  font-weight: 500;
  color: #5E5C5C;
  letter-spacing: 0;
}

.invite-friend-profit-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #202024;
  padding: 6px 12px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  color: #FFFFFF;
}

.invite-profit-val {
  font-size: 13px;
  font-weight: 700;
  color: #FFFFFF;
}

.invite-profit-coin {
  width: 15px;
  height: 15px;
  display: block;
}

/* =========================================================
   TASKS / QUESTS VIEW STYLES
   ========================================================= */
.tasks-page {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 12px 16px;
  box-sizing: border-box;
}

.tasks-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.tasks-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 2px 2px;
}

.tasks-section-title {
  font-size: 18px;
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: -0.2px;
}

.tasks-count-badge {
  background: #202024;
  color: #8E8E93;
  padding: 2px 9px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
}

.tasks-timer-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  background: #202024;
  padding: 4px 10px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  color: #8E8E93;
}

.tasks-timer-pill svg {
  color: #8E8E93;
}

.tasks-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.tasks-card {
  width: 100%;
  background: #191919;
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: none;
  box-sizing: border-box;
  transition: transform 0.1s ease, background 0.15s ease;
  user-select: none;
}

.tasks-card:active {
  background: #1E1D1D;
  transform: scale(0.99);
}

.tasks-icon-wrap {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: #202024;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #FFC506;
}

.tasks-icon-wrap svg {
  display: block;
}

.tasks-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}

.tasks-title {
  font-size: 14px;
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1.2;
}

.tasks-sub {
  font-size: 12px;
  font-weight: 500;
  color: #8E8E93;
  line-height: 1.25;
}

.tasks-progress-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  width: 100%;
}

.tasks-progress-bar {
  flex: 1;
  height: 4px;
  background: #202024;
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}

.tasks-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: #FFC506;
  transition: width 0.3s ease;
}

.tasks-progress-fill.gold-fill {
  background: linear-gradient(90deg, #FAD961 0%, #F76B1C 100%);
}

.tasks-progress-num {
  font-size: 11.5px;
  font-weight: 600;
  color: #8E8E93;
  flex-shrink: 0;
  min-width: 24px;
}

.tasks-reward-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  background: #202024;
  border: none;
  border-radius: 10px;
  padding: 6px 10px;
  color: #FFFFFF;
  cursor: pointer;
  flex-shrink: 0;
  font-family: inherit;
  transition: transform 0.1s ease, background 0.15s ease;
}

.tasks-reward-badge:active {
  transform: scale(0.95);
  background: #27272C;
}

.tasks-coin-icon {
  width: 16px;
  height: 16px;
  display: block;
  flex-shrink: 0;
}

.tasks-star-icon,
.tasks-ticket-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.tasks-reward-text {
  font-size: 13px;
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: -0.2px;
}

.tasks-chevron {
  color: #8E8E93;
  margin-left: 2px;
}

.tasks-reward-highlight {
  background: rgba(255, 197, 6, 0.12);
}

.tasks-reward-highlight .tasks-reward-text {
  color: #FFC506;
}

/* Golden Claim Button 1:1 with WinRoll primary buttons */
.tasks-claim-golden-btn {
  background: linear-gradient(180deg, #F76B1C 0%, #FAD961 100%);
  border: none;
  border-radius: 10px;
  height: 36px;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 800;
  color: #111111;
  cursor: pointer;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.1s ease, filter 0.15s ease;
  font-family: inherit;
  flex-shrink: 0;
}

.tasks-claim-golden-btn:active {
  transform: scale(0.95);
  filter: brightness(0.92);
}

.tasks-claim-golden-btn.claimed {
  background: #202024;
  color: #8E8E93;
  box-shadow: none;
  pointer-events: none;
}

/* =========================================================
   WINROLL PROFILE VIEW (ПРОФИЛЬ ПОЛЬЗОВАТЕЛЯ)
   ========================================================= */
.profile-page {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 16px;
  box-sizing: border-box;
}

/* 1. Unified Player Hero Card */
.profile-hero-card {
  width: 100%;
  background: #191919;
  border-radius: 18px;
  padding: 14px 16px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  border: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

.profile-hero-top {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.profile-avatar-wrap {
  position: relative;
  width: 58px;
  height: 58px;
  flex-shrink: 0;
}

.profile-avatar-img {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  object-fit: cover;
  border: none;
  box-shadow: none;
  display: block;
}

.profile-avatar-fallback {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  color: #FFFFFF;
  background: #3A3D46;
}

.weekly-user-avatar-placeholder {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: #FFFFFF;
  background: #3A3D46;
}

.profile-hero-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.profile-hero-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.profile-name {
  font-size: 18px;
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: -0.2px;
  line-height: 1.2;
}

.profile-id-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #202024;
  border: none;
  border-radius: 8px;
  padding: 3px 8px;
  color: #8E8E93;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  width: fit-content;
  transition: transform 0.1s ease, color 0.15s ease, background 0.15s ease;
}

.profile-id-pill:active {
  transform: scale(0.96);
  color: #FFFFFF;
  background: #28282E;
}

.profile-settings-btn {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: #202024;
  color: #8E8E93;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.1s ease, color 0.15s ease, background 0.15s ease;
}

.profile-settings-btn:active {
  transform: scale(0.92);
  color: #FFFFFF;
  background: #28282E;
}

/* Hero Balance Bar */
.profile-hero-balance-wrap {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.profile-balance-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.profile-balance-sub {
  font-size: 11px;
  font-weight: 600;
  color: #8E8E93;
}

.profile-balance-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.profile-balance-val {
  font-size: 20px;
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: -0.2px;
}

.profile-balance-coin {
  width: 18px;
  height: 18px;
  display: block;
}

.profile-deposit-btn {
  background: var(--gold-gradient);
  border: none;
  border-radius: 11px;
  height: 36px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 800;
  color: #432B07;
  cursor: pointer;
  box-shadow: none;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: transform 0.1s ease, filter 0.15s ease;
  user-select: none;
}

.profile-deposit-btn:active {
  transform: scale(0.96);
  filter: brightness(0.95);
}

.profile-deposit-icon {
  width: 17px;
  height: 17px;
  display: block;
  flex-shrink: 0;
}

/* 2. Player Gaming Stats Bar */
.profile-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  width: 100%;
}

.profile-stat-chip {
  background: #191919;
  border-radius: 12px;
  padding: 9px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: none;
}

.profile-stat-val {
  font-size: 15px;
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1.2;
}

.profile-stat-val-coin {
  display: flex;
  align-items: center;
  gap: 4px;
}

.profile-stat-coin {
  width: 14px;
  height: 14px;
}

.profile-stat-lbl {
  font-size: 11px;
  font-weight: 600;
  color: #8E8E93;
}

/* 3. Dedicated Connect TON Wallet Button */
.profile-ton-connect-btn {
  width: 100%;
  height: 48px;
  background: #007AFF;
  border: none;
  border-radius: 14px;
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  font-family: inherit;
  box-shadow: none;
  transition: transform 0.1s ease, filter 0.15s ease, background 0.15s ease;
  user-select: none;
}

.profile-ton-connect-btn:active {
  transform: scale(0.98);
  filter: brightness(0.92);
}

.profile-ton-connect-btn.connected {
  background: #1B2C22;
  color: #34C759;
  box-shadow: none;
}

.profile-ton-connect-btn.connected .profile-ton-btn-icon path {
  stroke: #34C759;
}

.profile-ton-btn-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* 4. Top Players Card */
.profile-top-card {
  width: 100%;
  background: #191919;
  border: none;
  border-radius: 15px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  cursor: pointer;
  user-select: none;
  font-family: inherit;
  transition: transform 0.1s ease, background 0.15s ease;
}

.profile-top-card:active {
  transform: scale(0.98);
  background: #202024;
}

.profile-top-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.profile-top-icon-wrap {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255, 197, 6, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.profile-top-texts {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.profile-top-title {
  font-size: 14px;
  font-weight: 800;
  color: #FFFFFF;
}

.profile-top-sub {
  font-size: 11px;
  font-weight: 500;
  color: #8E8E93;
}

.profile-top-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.profile-top-rank {
  font-size: 11px;
  font-weight: 800;
  color: #FFC506;
  background: rgba(255, 197, 6, 0.12);
  padding: 3px 8px;
  border-radius: 8px;
}

/* 5. Invite Friends Sleek Banner */
.profile-invite-banner {
  width: 100%;
  background: #191919;
  border: none;
  border-radius: 15px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
}

.profile-invite-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.profile-invite-icon-wrap {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: rgba(255, 197, 6, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.profile-invite-texts {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.profile-invite-title {
  font-size: 14px;
  font-weight: 800;
  color: #FFFFFF;
}

.profile-invite-sub {
  font-size: 11px;
  font-weight: 500;
  color: #8E8E93;
}

.profile-invite-action-btn {
  background: #FFFFFF;
  color: #111111;
  border: none;
  border-radius: 10px;
  height: 32px;
  padding: 0 14px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
  transition: transform 0.1s ease, filter 0.15s ease;
}

.profile-invite-action-btn:active {
  transform: scale(0.96);
  filter: brightness(0.9);
}

/* 5. Inventory Section */
.profile-inventory-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin-top: 2px;
}

.profile-inventory-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 4px 2px 0;
}

.profile-section-title {
  font-size: 16px;
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: -0.2px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.profile-inv-badge {
  background: #202024;
  color: #8E8E93;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
}

.profile-sell-all-btn {
  background: rgba(255, 197, 6, 0.12);
  border: none;
  color: #FFC506;
  border-radius: 10px;
  height: 34px;
  padding: 0 13px;
  font-size: 12px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.1s ease, background 0.15s ease, filter 0.15s ease;
  user-select: none;
}

.profile-sell-all-btn:active {
  transform: scale(0.96);
  background: rgba(255, 197, 6, 0.22);
}

.profile-sell-all-icon {
  width: 14px;
  height: 14px;
}

.profile-filter-pills {
  display: flex;
  align-items: center;
  background: #141416;
  border: none;
  border-radius: 10px;
  padding: 3px;
  gap: 3px;
}

/* Modal Actions for Profile Item (Sell & Withdraw) */
.profile-modal-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
  margin-top: 14px;
}

.profile-action-btn {
  height: 48px;
  border-radius: 13px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 800;
  font-size: 14px;
  transition: transform 0.1s ease, filter 0.15s ease;
  user-select: none;
}

.profile-action-btn:active {
  transform: scale(0.96);
  filter: brightness(0.92);
}

.profile-btn-sell {
  background: #1E1E23;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
  box-shadow: none;
}

.profile-btn-withdraw {
  background: var(--gold-gradient);
  color: var(--gold-dark-text);
  box-shadow: none;
}

.profile-btn-upgrade {
  grid-column: 1 / -1;
  background: linear-gradient(180deg, #00246B 0%, #30A1F5 100%);
  color: #FFFFFF;
  box-shadow: 0 4px 14px rgba(48, 161, 245, 0.25);
}

.profile-btn-icon {
  width: 18px;
  height: 18px;
  display: block;
}

.profile-btn-price {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(255, 197, 6, 0.15);
  color: #FFC506;
  padding: 3px 6px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 800;
}

.profile-btn-coin {
  width: 12px;
  height: 12px;
}

.profile-pill-btn {
  background: transparent;
  border: none;
  border-radius: 8px;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 700;
  color: #8E8E93;
  cursor: pointer;
  font-family: inherit;
  transition: color 0.15s ease, background 0.15s ease;
}

.profile-pill-btn.active {
  color: var(--gold-dark-text);
  background: var(--gold-gradient);
  font-weight: 800;
}

.profile-inventory-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  width: 100%;
}

.profile-item-card {
  position: relative;
  background: #191919;
  border: none;
  border-radius: 16px;
  overflow: hidden;
  box-sizing: border-box;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  transition: transform 0.15s ease;
}

.profile-item-card:hover {
  transform: translateY(-1px);
}

.profile-item-card-top {
  position: relative;
  width: 100%;
  height: 114px;
  background-color: #202020;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.profile-item-card-top .card-carbon-pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('icons/pattern_gifts.png');
  background-size: 110px auto;
  background-position: top center;
  background-repeat: no-repeat;
  opacity: 0.35;
  pointer-events: none;
  z-index: 1;
}

.profile-item-card-top .card-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 65px;
  height: 55px;
  background-image: url('icons/logo_gifts.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
  z-index: 1;
  opacity: 0.7;
}

.profile-item-notch {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  z-index: 3;
}

.profile-item-card-glow {
  position: absolute;
  width: 85px;
  height: 85px;
  border-radius: 50%;
  filter: blur(18px);
  opacity: 0.75;
  pointer-events: none;
  z-index: 1;
}

.profile-item-card-img {
  width: 78px;
  height: 78px;
  object-fit: contain;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
}

.profile-item-price-pill {
  position: absolute;
  bottom: 8px;
  left: 8px;
  background: rgba(18, 18, 22, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 999px;
  padding: 3px 9px 3px 5px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  z-index: 3;
  box-sizing: border-box;
  line-height: 1;
}

.profile-price-coin {
  width: 15px;
  height: 15px;
  display: block;
  flex-shrink: 0;
}

.profile-price-val {
  font-size: 13px;
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: 0.1px;
  line-height: 1;
}

.profile-item-card-bottom {
  padding: 10px 8px 8px;
  background: #191919;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
}

.profile-item-card-name {
  font-size: 13px;
  font-weight: 700;
  color: #A0A0A5;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  max-width: 100%;
  line-height: 1.2;
}

.profile-item-card-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  width: 100%;
}

.profile-card-btn {
  height: 36px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  transition: transform 0.1s ease, filter 0.15s ease, background 0.15s ease;
  user-select: none;
}

.profile-card-btn:active {
  transform: scale(0.95);
}

.profile-card-btn-sell {
  background: var(--gold-gradient);
  border: none;
  color: var(--gold-dark-text);
  font-weight: 800;
  box-shadow: none;
}

.profile-card-btn-sell:hover {
  filter: brightness(1.08);
  box-shadow: none;
}

.profile-card-btn-withdraw {
  background: rgba(255, 255, 255, 0.06);
  border: none;
  color: #E2E8F0;
  font-weight: 600;
  box-shadow: none;
}

.profile-card-btn-withdraw:hover,
.profile-card-btn-withdraw:active {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #FFFFFF;
}

.profile-confirm-btn-gold {
  background: var(--gold-gradient);
  border: none;
  color: #000000;
  font-weight: 800;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

@media (max-width: 390px) {
  .profile-card-btn {
    font-size: 11px;
    padding: 0 2px;
    height: 34px;
  }
  .profile-item-card-actions {
    gap: 4px;
  }
}

/* Profile Modal Overlay & Backdrop */
.profile-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}

.profile-modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 1000;
}

/* Sell All Confirmation Modal Card */
.profile-confirm-card {
  position: relative;
  background: #1C1C20;
  border: none;
  border-radius: 20px;
  padding: 24px 20px 20px;
  width: 90%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  z-index: 1001;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.65);
  animation: confirmPop 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes confirmPop {
  0% { transform: scale(0.88); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.profile-confirm-icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: rgba(255, 59, 48, 0.12);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.profile-confirm-icon {
  width: 26px;
  height: 26px;
}

.profile-confirm-title {
  font-size: 18px;
  font-weight: 800;
  color: #FFFFFF;
  margin-bottom: 8px;
}

.profile-confirm-desc {
  font-size: 13px;
  font-weight: 500;
  color: #8E8E93;
  line-height: 1.5;
  margin-bottom: 20px;
}

.profile-confirm-desc strong {
  color: #FFFFFF;
  font-weight: 700;
}

.profile-confirm-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.confirm-btn-coin {
  width: 16px;
  height: 16px;
  vertical-align: middle;
  flex-shrink: 0;
  display: inline-block;
}

.profile-confirm-btn {
  height: 42px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.1s ease, filter 0.15s ease;
}

.profile-confirm-btn:active {
  transform: scale(0.96);
}

.profile-confirm-btn-cancel {
  background: #27272C;
  border: none;
  color: #FFFFFF;
}

.profile-confirm-btn-cancel:hover {
  background: #303036;
}

.profile-confirm-btn-submit {
  background: #FF3B30;
  border: none;
  color: #FFFFFF;
  box-shadow: 0 4px 14px rgba(255, 59, 48, 0.35);
}

.profile-confirm-btn-submit:hover {
  filter: brightness(1.08);
}

/* Empty State */
.profile-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px 16px;
  background: #191919;
  border-radius: 16px;
  text-align: center;
  gap: 8px;
  border: none;
}

.profile-empty-icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: #202024;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2px;
}

.profile-empty-title {
  font-size: 15px;
  font-weight: 700;
  color: #FFFFFF;
}

.profile-empty-sub {
  font-size: 12px;
  font-weight: 500;
  color: #8E8E93;
  max-width: 250px;
  line-height: 1.4;
}

.profile-open-cases-btn {
  margin-top: 6px;
  background: linear-gradient(0deg, #FAD961 0%, #F76B1C 100%);
  border: none;
  border-radius: 10px;
  height: 38px;
  padding: 0 20px;
  font-size: 13px;
  font-weight: 800;
  color: #111111;
  cursor: pointer;
  box-shadow: none;
  font-family: inherit;
  transition: transform 0.1s ease, filter 0.15s ease;
}

.profile-open-cases-btn:active {
  transform: scale(0.96);
  filter: brightness(0.92);
}

/* Profile Settings Modal */
.profile-settings-modal-card {
  padding: 8px 16px 28px 16px;
}

.profile-settings-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 10px;
}

.profile-settings-section-title {
  font-size: 12px;
  font-weight: 700;
  color: #8E8E93;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding-left: 2px;
}

.profile-lang-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.profile-lang-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #18181C;
  border: none;
  border-radius: 14px;
  padding: 12px 14px;
  cursor: pointer;
  user-select: none;
  font-family: inherit;
  transition: background 0.15s ease, transform 0.1s ease;
  box-shadow: none;
  text-align: left;
  width: 100%;
}

.profile-lang-item:active {
  transform: scale(0.98);
}

.profile-lang-item.active {
  background: #212128;
  border: none;
}

.profile-lang-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.profile-lang-flag {
  font-size: 22px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-lang-texts {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.profile-lang-name {
  font-size: 15px;
  font-weight: 700;
  color: #FFFFFF;
}

.profile-lang-native {
  font-size: 12px;
  font-weight: 500;
  color: #8E8E93;
}

.profile-lang-radio {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s ease, background 0.2s ease;
  box-sizing: border-box;
}

.profile-lang-item.active .profile-lang-radio {
  border-color: #FFC506;
  background: rgba(255, 197, 6, 0.12);
}

.profile-lang-radio-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #FFC506;
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.profile-lang-item.active .profile-lang-radio-dot {
  opacity: 1;
  transform: scale(1);
}

/* =========================================================
   PROFILE DEPOSIT MODAL (TON DEPOSIT)
   ========================================================= */
.profile-deposit-modal-card {
  padding: 8px 16px 26px 16px;
  max-height: 90vh;
  overflow-y: auto;
}

.deposit-modal-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.deposit-header-titles {
  text-align: center;
}

.deposit-modal-title {
  font-size: 17px;
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1.2;
}

.deposit-modal-sub {
  font-size: 12px;
  font-weight: 500;
  color: #8E8E93;
}

.deposit-modal-header .win-modal-close {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.deposit-modal-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 1. Ticket-style Promo / Bonus Coupon Banner */
.deposit-promo-ticket {
  position: relative;
  overflow: hidden;
  background: #18181C;
  border: none;
  border-radius: 16px;
}

.deposit-ticket-top {
  padding: 12px 14px 8px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.deposit-ticket-texts {
  flex: 1;
}

.deposit-ticket-title {
  font-size: 15px;
  font-weight: 800;
  color: #FFFFFF;
  margin: 0 0 3px 0;
  line-height: 1.25;
}

.deposit-ticket-desc {
  font-size: 11px;
  font-weight: 500;
  color: #8E8E93;
  margin: 0;
  line-height: 1.35;
}

.deposit-ticket-link {
  color: #FFC506;
  font-weight: 700;
}

.deposit-ticket-badge-icon {
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.deposit-badge-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Tear-off Perforation Divider */
.deposit-ticket-divider {
  position: relative;
  display: flex;
  align-items: center;
  height: 16px;
  margin: -2px 0;
}

.ticket-cutout {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #121316;
  position: absolute;
  border: none;
  z-index: 2;
  box-sizing: border-box;
}

.ticket-cutout.left {
  left: -7px;
}

.ticket-cutout.right {
  right: -7px;
}

.ticket-dashed-line {
  width: 100%;
  height: 1px;
  border-top: 1.5px dashed rgba(255, 255, 255, 0.1);
  margin: 0 10px;
}

/* Ticket Bottom: Promocode Input */
.deposit-ticket-bottom {
  padding: 8px 14px 12px 14px;
}

.deposit-promo-input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #121316;
  border: none;
  border-radius: 11px;
  padding: 3px 4px 3px 12px;
}

.deposit-promo-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-size: 13px;
  font-weight: 600;
  color: #FFFFFF;
  font-family: inherit;
}

.deposit-promo-input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.deposit-promo-apply-btn {
  background: var(--gold-gradient);
  border: none;
  color: var(--gold-dark-text);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 800;
  padding: 7px 14px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s ease;
}

.deposit-promo-apply-btn:active {
  transform: scale(0.96);
  filter: brightness(0.92);
}

.deposit-promo-status {
  font-size: 11px;
  font-weight: 600;
  margin-top: 6px;
  padding: 0 2px;
}

.deposit-promo-status.success {
  color: #34C759;
}

.deposit-promo-status.error {
  color: #FF3B30;
}

/* 2. Amount Input Section */
.deposit-amount-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.deposit-input-card {
  background: #18181C;
  border: none;
  border-radius: 14px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.deposit-amount-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-size: 20px;
  font-weight: 800;
  color: #FFFFFF;
  font-family: inherit;
}

.deposit-amount-input::placeholder {
  color: #8E8E93;
}

.deposit-currency-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.06);
  padding: 5px 10px;
  border-radius: 999px;
  flex-shrink: 0;
}

.deposit-gram-pill-icon {
  width: 18px;
  height: 18px;
  display: block;
}

.deposit-currency-symbol {
  font-size: 13px;
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: 0.3px;
}

/* Preset Chips */
.deposit-presets-row {
  display: flex;
  gap: 8px;
}

.deposit-preset-chip {
  flex: 1;
  height: 38px;
  background: #18181C;
  border: none;
  border-radius: 10px;
  color: #8E8E93;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s ease;
  user-select: none;
  box-shadow: none;
}

.deposit-preset-chip.active {
  background: var(--gold-gradient);
  border: none;
  color: var(--gold-dark-text);
  font-weight: 800;
}

.deposit-preset-chip:active {
  transform: scale(0.96);
}

/* Rate / Conversion Preview */
.deposit-rate-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 4px 0 4px;
}

.deposit-rate-label {
  font-size: 12px;
  font-weight: 600;
  color: #8E8E93;
}

.deposit-rate-val {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  font-weight: 800;
  color: #FFFFFF;
}

.deposit-rate-coin {
  width: 15px;
  height: 15px;
  display: block;
}

/* 3. Primary Action Button */
.deposit-main-btn {
  width: 100%;
  height: 48px;
  background: var(--gold-gradient);
  border: none;
  border-radius: 14px;
  color: var(--gold-dark-text);
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: none;
  transition: transform 0.1s ease, filter 0.15s ease;
  user-select: none;
  margin-top: 4px;
}

.deposit-main-btn:active {
  transform: scale(0.98);
  filter: brightness(0.95);
}

/* =========================================================
   LIVE DATA CUTOVER: SKELETONS & LOADING ANIMATIONS
   ========================================================= */

.balance-loading {
  opacity: 0.45;
  animation: pulse-loading 1.2s ease-in-out infinite;
}

.profile-skeleton {
  background: linear-gradient(90deg, #202024 25%, #2d2d35 50%, #202024 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
  border-radius: 6px;
  display: inline-block;
  color: transparent !important;
  user-select: none;
}

.profile-skeleton-circle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(90deg, #202024 25%, #2d2d35 50%, #202024 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
}

@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@keyframes pulse-loading {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.75; }
}