@import './glass.css';

/* ═══════════════════════════════════════════════════════════════
   TRASH CASH — TELEGRAM MINI APP LUXURY STYLESHEET
   High-End Dark Fintech / Spatial UI / Liquid Glass Ergonomics
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* Color Palette */
  --bg-app: #070709;
  --bg-elevated: #101015;
  --bg-card: #15151c;
  --bg-card-subtle: #1a1a24;
  --bg-input: #0e0e13;
  
  --border-subtle: rgba(255, 255, 255, 0.07);
  --border-hover: rgba(255, 255, 255, 0.16);
  --border-accent: rgba(255, 85, 0, 0.45);
  
  --color-orange: #ff5500;
  --color-orange-glow: rgba(255, 85, 0, 0.35);
  --color-orange-light: #ff7722;
  --color-orange-dark: #cc4400;
  --color-amber: #f59e0b;
  
  --color-diamond: #00d2ff;
  --color-diamond-glow: rgba(0, 210, 255, 0.35);
  
  --color-success: #10b981;
  --color-success-glow: rgba(16, 185, 129, 0.3);
  --color-error: #ef4444;
  --color-error-glow: rgba(239, 68, 68, 0.3);
  
  --text-primary: #ffffff;
  --text-secondary: #9292a0;
  --text-muted: #5e5e6e;
  
  /* Radii */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 26px;
  --radius-full: 9999px;
  
  /* Font Families */
  --font-main: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "SF Pro Display", Inter, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Elevations */
  --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 10px 30px var(--color-orange-glow);
}

/* Connected Mini App shell */
.topbar-status { display:inline-flex; align-items:center; gap:6px; margin-left:auto; margin-right:10px; padding:5px 8px; border:1px solid rgba(255,255,255,.08); border-radius:999px; color:rgba(255,255,255,.42); font-size:8px; font-weight:800; letter-spacing:.09em; white-space:nowrap; }
.status-dot { width:6px; height:6px; border-radius:50%; background:#f59e0b; box-shadow:0 0 8px rgba(245,158,11,.7); }
.backend-connected .topbar-status { color:#86efac; border-color:rgba(34,197,94,.2); }
.backend-connected .status-dot { background:#22c55e; box-shadow:0 0 9px rgba(34,197,94,.85); }
.backend-connected .status-label::after { content:' ОНЛАЙН'; font-size:8px; }
.backend-connected .status-label { font-size:0; }
.backend-offline .topbar-status { color:#fca5a5; border-color:rgba(239,68,68,.25); }
.backend-offline .status-dot { background:#ef4444; box-shadow:0 0 8px rgba(239,68,68,.7); }
.backend-offline .status-label::after { content:' ОФЛАЙН'; font-size:8px; }
.backend-offline .status-label { font-size:0; }
.maintenance-banner { margin:8px 14px 0; padding:10px 12px; border:1px solid rgba(255,125,32,.25); border-radius:12px; background:rgba(255,85,0,.09); color:#fed7aa; font-size:11px; line-height:1.35; }
.maintenance-banner[hidden] { display:none; }
.maintenance-icon { color:#ff8a3d; margin-right:5px; }
.balance-capsule { border:0; cursor:pointer; font:inherit; }
.balance-capsule:focus-visible, .nav-item:focus-visible, button:focus-visible { outline:2px solid #ff8a3d; outline-offset:3px; }
@media (max-width:380px) { .topbar-status { margin-right:6px; padding-inline:6px; } .status-label { display:none; } }

/* Base Reset & Typography */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

html, body {
  height: 100%;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: #030304;
  color: var(--text-primary);
  font-family: var(--font-main);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow-x: hidden;
  letter-spacing: -0.2px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Simulation Shell (Desktop Phone Frame vs Mobile Fullscreen) */
.simulator-wrapper {
  width: 100%;
  max-width: 440px;
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  display: flex;
  flex-direction: column;
  background-color: var(--bg-app);
  position: relative;
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.08);
  transition: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
  overflow: hidden;
  min-height: 0;
}

/* Mobile Screens (Phones under 480px or Native Telegram WebView) */
@media (max-width: 480px) {
  body {
    padding: 0 !important;
    margin: 0 !important;
    height: 100vh;
    height: 100dvh;
    min-height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
    background: var(--bg-app);
    justify-content: flex-start;
  }
  .simulator-wrapper {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    box-shadow: none;
    border: none;
  }
  .preview-controls {
    display: none !important;
  }
}

/* Desktop Preview Mode */
@media (min-width: 481px) {
  body {
    padding: 24px 0;
    background: radial-gradient(circle at 50% 15%, #181828 0%, #030306 100%);
    justify-content: flex-start;
    overflow-y: auto;
  }
  .simulator-wrapper {
    height: 890px;
    max-height: 890px;
    min-height: 890px;
    border-radius: 44px;
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.1);
  }
  .simulator-wrapper.fullscreen-mode {
    max-width: 100%;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
    box-shadow: none;
  }
}

/* Telegram Native Header - Hidden everywhere (Telegram provides native header) */
.tg-header {
  display: none !important;
}

body.in-telegram .preview-controls {
  display: none !important;
}

/* Atmospheric Ambient Glow Spheres */
.ambient-glow {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(80px);
  z-index: 0;
}

.glow-top {
  top: -80px;
  left: 50%;
  transform: translateX(-50%);
  width: 320px;
  height: 200px;
  background: radial-gradient(circle, rgba(255, 85, 0, 0.16) 0%, transparent 70%);
}

.glow-accent {
  bottom: 120px;
  right: -50px;
  width: 250px;
  height: 250px;
  background: radial-gradient(circle, rgba(0, 210, 255, 0.08) 0%, transparent 70%);
}

/* Preview Switcher Bar (outside simulator on desktop only) */
.preview-controls {
  display: none;
}

@media (min-width: 768px) {
  .preview-controls {
    position: fixed;
    top: 16px;
    right: 20px;
    z-index: 9999;
    display: flex;
    gap: 8px;
  }
}

.preview-btn {
  background: rgba(18, 18, 26, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 700;
  padding: 7px 14px;
  border-radius: var(--radius-full);
  cursor: pointer;
  backdrop-filter: blur(14px);
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

.preview-btn:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-1px);
}

/* Telegram Native Header */
.tg-header {
  height: calc(50px + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) 16px 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(7, 7, 9, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  z-index: 100;
  position: relative;
}

.tg-app-identity {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tg-app-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff6600, #ff2200);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 900;
  color: #fff;
  box-shadow: 0 2px 10px var(--color-orange-glow);
  letter-spacing: -0.5px;
}

.tg-app-meta {
  display: flex;
  flex-direction: column;
}

.tg-app-title {
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.3px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.tg-app-title .badge-bot {
  font-size: 9px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--text-secondary);
  padding: 1px 5px;
  border-radius: 4px;
  font-weight: 700;
  text-transform: uppercase;
}

.tg-app-subtitle {
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 500;
}

.tg-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.tg-btn-icon {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  transition: all 0.2s;
}

.tg-btn-icon:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

/* App Bar & Balance Display */
.app-topbar {
  padding: 14px 16px 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  position: relative;
  z-index: 90;
}

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

.brand-logo-text {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.7px;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 4px;
}

.brand-logo-text span {
  color: var(--color-orange);
  text-shadow: 0 0 15px var(--color-orange-glow);
}

/* Luxury Glass Balance Capsule */
.balance-capsule {
  background: linear-gradient(135deg, rgba(28, 28, 38, 0.85) 0%, rgba(18, 18, 24, 0.95) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-full);
  padding: 6px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  position: relative;
  cursor: pointer;
  backdrop-filter: blur(16px);
  transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.balance-capsule:hover {
  border-color: rgba(0, 210, 255, 0.4);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 18px rgba(0, 210, 255, 0.2);
}

.balance-capsule:active {
  transform: scale(0.96);
}

.diamond-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  filter: drop-shadow(0 0 8px var(--color-diamond-glow));
  animation: diamond-shimmer 3.5s infinite ease-in-out;
}

@keyframes diamond-shimmer {
  0%, 100% { transform: translateY(0) scale(1); filter: drop-shadow(0 0 6px var(--color-diamond-glow)); }
  50% { transform: translateY(-1.5px) scale(1.08); filter: drop-shadow(0 0 12px rgba(0, 210, 255, 0.7)); }
}

.balance-amount {
  font-size: 17px;
  font-weight: 900;
  letter-spacing: -0.4px;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
}

.balance-plus-btn {
  width: 22px;
  height: 22px;
  background: linear-gradient(135deg, rgba(255, 85, 0, 0.25), rgba(255, 85, 0, 0.1));
  border: 1px solid rgba(255, 85, 0, 0.45);
  color: var(--color-orange);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  margin-left: 2px;
  transition: transform 0.2s;
}

.balance-capsule:hover .balance-plus-btn {
  transform: rotate(90deg);
}

/* Floating Balance Delta Chip */
.balance-delta-chip {
  position: absolute;
  top: -24px;
  right: 8px;
  font-size: 12px;
  font-weight: 800;
  border-radius: var(--radius-full);
  padding: 3px 10px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px) scale(0.8);
  transition: all 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.balance-delta-chip.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.balance-delta-chip.positive {
  background: rgba(16, 185, 129, 0.25);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.5);
}

.balance-delta-chip.negative {
  background: rgba(239, 68, 68, 0.25);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.5);
}

/* Main Content Area */
.app-content {
  flex: 1;
  min-height: 0;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px 14px 115px 14px;
  position: relative;
  z-index: 10;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

.app-content::-webkit-scrollbar {
  display: none;
}

/* Screens Containers */
.screen {
  display: none;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.screen.active {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

/* ═══════════════════════════════════════════════════════════════
   LIQUID GLASS BOTTOM NAVIGATION (Using glass.css)
   ═══════════════════════════════════════════════════════════════ */

.bottom-nav-container {
  position: absolute;
  bottom: max(14px, env(safe-area-inset-bottom, 14px));
  left: max(12px, env(safe-area-inset-left, 12px));
  right: max(12px, env(safe-area-inset-right, 12px));
  z-index: 1000;
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.22s ease;
}

/* Keep the app dock available on game screens; the reserved scroll space keeps
   its fixed glass surface from covering the game's final action button. */
body.subgame-active .app-content,
.simulator-wrapper.subgame-active .app-content {
  padding-bottom: 115px !important;
}

.bottom-nav-bar {
  background: rgba(16, 16, 22, 0.82);
  backdrop-filter: blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  border-bottom: 1px solid rgba(0, 0, 0, 0.5);
  border-radius: var(--radius-xl);
  padding: 6px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  position: relative;
  align-items: center;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.6), var(--glass-shadow);
}

/* Liquid Glass Active Slider Indicator */
.nav-indicator {
  position: absolute;
  top: 6px;
  bottom: 6px;
  width: calc((100% - 12px) / 4);
  border-radius: calc(var(--radius-xl) - 4px);
  background: linear-gradient(180deg, rgba(255, 85, 0, 0.24) 0%, rgba(255, 85, 0, 0.08) 100%);
  border: 1px solid rgba(255, 85, 0, 0.45);
  border-top: 1px solid rgba(255, 120, 40, 0.6);
  pointer-events: none;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
  z-index: 1;
  box-shadow: var(--glass-shadow-indicator), 0 0 16px rgba(255, 85, 0, 0.25);
}

.nav-item {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 9px 0;
  border-radius: var(--radius-lg);
  cursor: pointer;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  transition: all 0.25s ease;
  outline: none;
}

.nav-icon-wrap {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-bottom: 3px;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.nav-svg {
  width: 20px;
  height: 20px;
  stroke: var(--text-secondary);
  transition: all 0.25s ease;
  display: block;
}

.nav-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: -0.1px;
  transition: color 0.25s ease;
}

.nav-item.active {
  color: #fff;
}

.nav-item.active .nav-icon-wrap {
  transform: translateY(-2px) scale(1.12);
}

.nav-item.active .nav-svg {
  stroke: var(--color-orange);
  filter: drop-shadow(0 2px 8px var(--color-orange-glow));
}

.nav-item.active .nav-label {
  color: var(--color-orange);
  font-weight: 800;
}

/* Nav Badge Dot on Bonuses */
.nav-badge-dot {
  position: absolute;
  top: -2px;
  right: -4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-orange);
  box-shadow: 0 0 8px var(--color-orange-glow);
  animation: pulse-dot 2s infinite;
}

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

/* ═══════════════════════════════════════════════════════════════
   SPLASH / LOADING SCREEN
   ═══════════════════════════════════════════════════════════════ */

.splash-screen {
  position: absolute;
  inset: 0;
  background-color: var(--bg-app);
  z-index: 2000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0.5s;
}

.splash-screen.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.splash-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.splash-logo-emblem {
  width: 86px;
  height: 86px;
  border-radius: 26px;
  background: linear-gradient(135deg, #222230, #111116);
  border: 1px solid rgba(255, 85, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.7), 0 0 45px var(--color-orange-glow);
  position: relative;
}

.splash-logo-emblem::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 26px;
  background: linear-gradient(135deg, rgba(255, 85, 0, 0.8), transparent 60%);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.splash-diamond {
  font-size: 42px;
  filter: drop-shadow(0 0 14px var(--color-diamond-glow));
}

.splash-title {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.7px;
  color: #fff;
  text-align: center;
}

.splash-title span {
  color: var(--color-orange);
  text-shadow: 0 0 15px var(--color-orange-glow);
}

.splash-subtitle {
  font-size: 12px;
  letter-spacing: 2px;
  font-weight: 800;
  color: var(--text-secondary);
  margin-top: -14px;
}

.splash-loader-bar {
  width: 140px;
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-full);
  overflow: hidden;
  position: relative;
  margin-top: 10px;
}

.splash-loader-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--color-orange), #ff9900);
  border-radius: var(--radius-full);
  animation: splash-progress 1.5s forwards ease-in-out;
}

@keyframes splash-progress {
  0% { width: 5%; }
  50% { width: 65%; }
  100% { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════
   TAB 1: GAMES HUB (ЭКРАН «ИГРЫ»)
   ═══════════════════════════════════════════════════════════════ */

.section-header {
  margin-bottom: 14px;
}

.section-title {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -0.5px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.section-badge {
  font-size: 11px;
  font-weight: 800;
  color: var(--color-orange);
  background: rgba(255, 85, 0, 0.12);
  border: 1px solid rgba(255, 85, 0, 0.28);
  padding: 3px 9px;
  border-radius: var(--radius-full);
  letter-spacing: 0.2px;
}

/* Games Grid */
/* ═══════════════════════════════════════════════════════════════
   PREMIUM GAME CARDS (LOBBY HUB) — LUXURY REDESIGN
   ═══════════════════════════════════════════════════════════════ */

.games-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.game-card {
  background: linear-gradient(135deg, rgba(26, 27, 38, 0.95) 0%, rgba(14, 15, 22, 0.98) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 20px;
  padding: 13px 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(16px);
  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.game-card:hover, .game-card:active {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.65), 0 0 25px rgba(255, 85, 0, 0.15);
}

/* Ambient Backlight within card */
.game-card-ambient {
  position: absolute;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  filter: blur(50px);
  pointer-events: none;
  opacity: 0.12;
  transition: opacity 0.3s ease;
}

.ambient-mines { background: #ff5500; top: -30px; left: -20px; }
.ambient-coin { background: #f59e0b; top: -30px; left: -20px; }
.ambient-crash { background: #00d2ff; top: -30px; left: -20px; }
.ambient-upgrade { background: #10b981; top: -30px; left: -20px; }

.game-card:hover .game-card-ambient,
.game-card:active .game-card-ambient {
  opacity: 0.28;
}

/* 3D Visual Preview Thumbnail Box */
.game-card-preview {
  width: 78px;
  height: 78px;
  border-radius: 18px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 6px 18px rgba(0, 0, 0, 0.5);
}

/* 1. Mines Theme Scene */
.preview-mines-theme {
  background: radial-gradient(circle at 40% 35%, #2c1a14 0%, #171112 70%, #0d0a0e 100%);
}

.art-mines-scene {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.art-diamond-gem {
  font-size: 30px;
  filter: drop-shadow(0 0 12px rgba(0, 210, 255, 0.9));
  position: absolute;
  top: 10px;
  left: 10px;
  animation: float-gem 3s ease-in-out infinite;
}

.art-bomb-pod {
  position: absolute;
  bottom: 8px;
  right: 10px;
  display: flex;
  align-items: center;
}

.art-bomb-body {
  font-size: 26px;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.8));
}

.art-bomb-spark {
  font-size: 14px;
  position: absolute;
  top: -6px;
  right: -4px;
  color: #fbbf24;
  animation: spark-flicker 1.5s infinite;
}

/* 2. Coin Theme Scene */
.preview-coin-theme {
  background: radial-gradient(circle at 40% 35%, #2a2210 0%, #15130f 70%, #0c0b0e 100%);
}

.art-coin-scene {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.art-3d-coin {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffd277 0%, #ff9500 45%, #b35900 85%, #663300 100%);
  border: 2.5px solid #ffe8aa;
  box-shadow: 0 4px 14px rgba(255, 149, 0, 0.45), inset 0 2px 4px rgba(255, 255, 255, 0.9), inset 0 -2px 5px rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: perspective(200px) rotateY(-12deg) rotateX(10deg);
}

.art-coin-inner {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px dashed rgba(255, 255, 255, 0.65);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.art-coin-symbol {
  font-size: 16px;
  line-height: 1;
}

.art-coin-sub {
  font-size: 7px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 0.5px;
}

/* 3. Crash Theme Scene */
.preview-crash-theme {
  background: radial-gradient(circle at 50% 60%, #122133 0%, #0b1522 70%, #07090e 100%);
}

.art-crash-scene {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.art-crash-curve-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 6px rgba(0, 210, 255, 0.7));
}

.art-rocket-pod {
  position: absolute;
  top: 10px;
  right: 8px;
  transform: rotate(-25deg);
  display: flex;
  align-items: center;
}

.art-rocket-ship {
  font-size: 28px;
  filter: drop-shadow(0 0 10px rgba(0, 210, 255, 0.7));
}

.art-fire-trail {
  font-size: 14px;
  position: absolute;
  left: -8px;
  bottom: -4px;
  transform: rotate(180deg);
  animation: flame-flutter 0.6s infinite alternate;
}

/* 4. Upgrade Theme Scene */
.preview-upgrade-theme {
  background: radial-gradient(circle at 50% 50%, #102620 0%, #0c1a16 70%, #080d0b 100%);
}

.art-upgrade-scene {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.art-wheel-disc {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #ff5500 0deg, #00d2ff 120deg, #181922 120deg, #181922 360deg);
  border: 2.5px solid #202c28;
  box-shadow: 0 0 16px rgba(0, 210, 255, 0.35);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.art-wheel-center {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #12131a;
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.art-wheel-arrow {
  position: absolute;
  top: -7px;
  font-size: 10px;
  color: #ffffff;
  text-shadow: 0 0 6px #ff5500;
  line-height: 1;
}

.art-wheel-core {
  font-size: 13px;
  color: #00d2ff;
  filter: drop-shadow(0 0 6px #00d2ff);
}

/* Animations */
@keyframes float-gem {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

@keyframes spark-flicker {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.2); }
}

@keyframes flame-flutter {
  0% { transform: rotate(180deg) scale(0.9); }
  100% { transform: rotate(180deg) scale(1.25); }
}

/* Card Information Block */
.game-card-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.game-card-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.game-title-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}

.game-card-title {
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -0.2px;
  color: #ffffff;
}

.game-rtp-badge {
  font-size: 9px;
  font-weight: 800;
  color: #8a8d9f;
  background: rgba(255, 255, 255, 0.06);
  padding: 2px 6px;
  border-radius: 4px;
}

.game-rtp-badge.live-pulse {
  color: #34d399;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.game-multiplier-tag {
  font-size: 11px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.tag-orange {
  background: rgba(255, 85, 0, 0.14);
  color: #ff6600;
  border: 1px solid rgba(255, 85, 0, 0.3);
  box-shadow: 0 0 10px rgba(255, 85, 0, 0.15);
}

.tag-amber {
  background: rgba(245, 158, 11, 0.14);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.tag-cyan {
  background: rgba(0, 210, 255, 0.14);
  color: #38bdf8;
  border: 1px solid rgba(0, 210, 255, 0.3);
}

.tag-emerald {
  background: rgba(16, 185, 129, 0.14);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.game-card-desc {
  font-size: 11.5px;
  color: #8e90a2;
  line-height: 1.35;
  font-weight: 500;
  margin-bottom: 3px;
}

/* Card Footer: Real CTA Play Button */
.game-card-footer {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: 1px;
}

.game-play-btn {
  background: rgba(255, 85, 0, 0.12);
  border: 1px solid rgba(255, 85, 0, 0.32);
  border-radius: var(--radius-full);
  padding: 4px 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.5px;
  color: var(--color-orange);
  transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.game-play-btn svg {
  transition: transform 0.2s ease;
}

.game-card:hover .game-play-btn,
.game-card:active .game-play-btn {
  background: linear-gradient(135deg, #ff6600 0%, #e04400 100%);
  color: #ffffff;
  border-color: rgba(255, 120, 40, 0.6);
  box-shadow: 0 4px 14px rgba(255, 85, 0, 0.45);
  transform: translateX(2px);
}

.game-card:hover .game-play-btn svg,
.game-card:active .game-play-btn svg {
  transform: translateX(2px);
}

.game-card-action svg {
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.game-card:hover .game-card-action svg {
  transform: translateX(4px);
  color: var(--color-orange);
}

/* ═══════════════════════════════════════════════════════════════
   GAME SUB-SCREENS (MINES, COIN, CRASH, UPGRADE)
   ═══════════════════════════════════════════════════════════════ */

.game-screen {
  display: none !important;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.game-screen.active {
  display: block !important;
  opacity: 1;
  transform: translateY(0);
}

/* Let the Mines board use the available phone height instead of leaving an
   empty black block between the action button and the persistent app dock. */
.game-screen#game-mines.active {
  display: flex !important;
  flex-direction: column;
  min-height: max(560px, calc(100dvh - 205px));
}

.game-screen#game-mines .mines-stage-card {
  display: flex;
  flex: 1 0 260px;
  min-height: 260px;
}

.game-screen#game-mines .mines-board {
  flex: 1;
  min-height: 244px;
  aspect-ratio: auto;
  grid-auto-rows: minmax(0, 1fr);
}

.game-screen#game-coin.active {
  display: flex !important;
  flex-direction: column;
  min-height: max(560px, calc(100dvh - 205px));
}

.game-screen#game-coin .coin-arena-card {
  flex: 1;
  min-height: 190px;
}

/* ═══════════════════════════════════════════════════════════════
   UNIVERSAL GAME TOP BAR (Matches media_*.png reference layout)
   ═══════════════════════════════════════════════════════════════ */

.game-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0 14px 0;
  position: relative;
  z-index: 10;
}

.game-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.game-back-pill {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(26, 27, 34, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

.game-back-pill:hover {
  background: rgba(36, 37, 48, 0.95);
  border-color: rgba(255, 255, 255, 0.22);
  transform: translateY(-1px);
}

.game-back-pill:active {
  transform: scale(0.94);
}

.game-header-title {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -0.4px;
  color: #ffffff;
  text-transform: uppercase;
  margin: 0;
}

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

.game-header-balance {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(22, 23, 30, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  padding: 7px 14px;
  border-radius: var(--radius-full);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

.gh-gem {
  font-size: 14px;
  filter: drop-shadow(0 0 6px var(--color-diamond-glow));
}

.gh-balance-val {
  font-size: 14px;
  font-weight: 900;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
}

.game-header-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
  color: #052e16;
  font-size: 15px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(34, 197, 94, 0.35);
  letter-spacing: -0.5px;
}

/* ═══════════════════════════════════════════════════════════════
   2-COLUMN TOP CONTROLS (СТАВКА + БОМБЫ / ВЫБОР)
   ═══════════════════════════════════════════════════════════════ */

.game-ctrl-grid {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 8px;
  margin-bottom: 8px;
}

.ctrl-card {
  background: linear-gradient(180deg, #181920 0%, #111217 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 12px 12px 10px 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.ctrl-card-full {
  margin-bottom: 10px;
}

.ctrl-card-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: #797c8b;
  text-transform: uppercase;
}

.ctrl-card-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ctrl-sub-label {
  font-size: 11px;
  font-weight: 700;
  color: #9292a0;
}

.bomb-icon-svg {
  color: #9292a0;
}

.ctrl-val-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 4px 0 8px 0;
  position: relative;
}

.ctrl-bet-input {
  width: 100%;
  background: transparent;
  border: none;
  font-family: var(--font-main);
  font-size: 26px;
  font-weight: 900;
  color: var(--color-orange);
  outline: none;
  padding: 0;
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.ctrl-gem-badge {
  font-size: 18px;
  margin-left: 6px;
  flex-shrink: 0;
}

.ctrl-bombs-display {
  font-size: 26px;
  font-weight: 900;
  color: #ffffff;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.ctrl-chips-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
}

#game-mines .ctrl-card-bombs .ctrl-chips-row {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.ctrl-card-full .ctrl-chips-row {
  grid-template-columns: repeat(5, 1fr);
}

.ctrl-chip {
  background: #1c1d25;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  color: #9b9eb1;
  font-size: 11px;
  font-weight: 800;
  padding: 6px 0;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s ease;
}

.ctrl-chip:hover {
  background: #252633;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.15);
}

.ctrl-chip:active {
  transform: scale(0.94);
}

.mines-chip-btn.active {
  background: #ff3b30;
  border-color: #ff453a;
  color: #ffffff;
  box-shadow: 0 0 10px rgba(255, 59, 48, 0.4);
}

/* Coin Side Selection in Top Card */
.coin-side-pills {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 6px;
}

.coin-side-pill {
  background: #1c1d25;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  color: #9b9eb1;
  font-size: 11px;
  font-weight: 800;
  padding: 8px 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: all 0.2s;
}

.coin-side-pill.selected {
  background: rgba(255, 85, 0, 0.2);
  border-color: var(--color-orange);
  color: #ffffff;
  box-shadow: 0 0 12px var(--color-orange-glow);
}

/* ═══════════════════════════════════════════════════════════════
   3 STATS TRIO ROW (ОТКРЫТО, СЕЙЧАС, ВЫИГРЫШ)
   ═══════════════════════════════════════════════════════════════ */

.game-stats-trio {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 8px;
}

.gst-card {
  background: linear-gradient(180deg, #181920 0%, #111217 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 9px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.gst-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: #797c8b;
  text-transform: uppercase;
}

.gst-val {
  font-size: 14px;
  font-weight: 900;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.gst-val.highlight {
  color: var(--color-orange);
  text-shadow: 0 0 8px var(--color-orange-glow);
}

/* ═══════════════════════════════════════════════════════════════
   HORIZONTAL PROGRESSION MULTIPLIERS STRIP (MINES)
   ═══════════════════════════════════════════════════════════════ */

.mult-strip-wrap {
  width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  margin-bottom: 10px;
  padding: 2px 0;
}

.mult-strip-wrap::-webkit-scrollbar {
  display: none;
}

.mult-strip {
  display: flex;
  gap: 6px;
  width: max-content;
}

.mult-pill {
  background: #181920;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 800;
  color: #9295a6;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.mult-pill.active {
  background: rgba(255, 85, 0, 0.18);
  border-color: var(--color-orange);
  color: var(--color-orange);
  box-shadow: 0 0 10px var(--color-orange-glow);
  transform: scale(1.05);
}

.mult-pill.cleared {
  background: rgba(16, 185, 129, 0.18);
  border-color: var(--color-success);
  color: #34d399;
}

/* ═══════════════════════════════════════════════════════════════
   5X5 MINES BOARD (Exact Rounded Container)
   ═══════════════════════════════════════════════════════════════ */

.mines-stage-card {
  background: #111217;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 18px;
  padding: 8px;
  margin-bottom: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.mines-board {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
  aspect-ratio: 1 / 0.72;
}

.mines-tile {
  background: linear-gradient(180deg, #242631 0%, #181922 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
  position: relative;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 3px 8px rgba(0, 0, 0, 0.4);
  transition: all 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.mines-tile:hover {
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-1px);
}

.mines-tile:active {
  transform: scale(0.93);
}

.mines-tile.revealed-gem {
  background: radial-gradient(circle, rgba(16, 185, 129, 0.3) 0%, rgba(16, 185, 129, 0.08) 100%), #0e2018;
  border-color: rgba(16, 185, 129, 0.7);
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.4), inset 0 0 10px rgba(16, 185, 129, 0.25);
  animation: gem-pop 0.35s forwards cubic-bezier(0.34, 1.56, 0.64, 1);
}

.mines-tile.revealed-mine {
  background: radial-gradient(circle, rgba(239, 68, 68, 0.35) 0%, rgba(239, 68, 68, 0.08) 100%), #261113;
  border-color: rgba(239, 68, 68, 0.8);
  box-shadow: 0 0 25px rgba(239, 68, 68, 0.5);
  animation: mine-shake 0.4s;
}

/* ═══════════════════════════════════════════════════════════════
   PREMIUM CTA BUTTON (GREEN / ORANGE)
   ═══════════════════════════════════════════════════════════════ */

.btn-game-cta {
  width: 100%;
  height: 54px;
  border-radius: 16px;
  border: none;
  font-family: var(--font-main);
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.btn-game-cta.btn-green {
  background: linear-gradient(180deg, #00c978 0%, #009e5b 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 24px rgba(0, 201, 120, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.btn-game-cta.btn-green:hover {
  box-shadow: 0 10px 28px rgba(0, 201, 120, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transform: translateY(-1px);
}

.btn-game-cta.btn-orange {
  background: linear-gradient(180deg, #ff4d4d 0%, #ff5500 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 24px rgba(255, 85, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.btn-game-cta.btn-orange:hover {
  box-shadow: 0 10px 28px rgba(255, 85, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transform: translateY(-1px);
}

.btn-game-cta.btn-yellow {
  background: linear-gradient(180deg, #ffc837 0%, #ff8008 100%) !important;
  color: #101116 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.4) !important;
  box-shadow: 0 8px 24px rgba(255, 160, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
  text-shadow: none !important;
}

.btn-game-cta.btn-yellow:hover {
  box-shadow: 0 10px 28px rgba(255, 160, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
}

.btn-game-cta:active {
  transform: scale(0.98);
}

.btn-game-cta:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ═══════════════════════════════════════════════════════════════
   CRASH SCREEN STYLES (Matches media_1790164351388.png)
   ═══════════════════════════════════════════════════════════════ */

.crash-arena-card {
  height: 240px;
  background: radial-gradient(circle at 50% 100%, #1a0e14 0%, #0c0d12 70%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}

/* 3D Perspective Synthwave Grid background */
.crash-arena-card::before {
  content: '';
  position: absolute;
  bottom: -40px;
  left: -20%;
  right: -20%;
  height: 140px;
  background-image: 
    linear-gradient(rgba(255, 85, 0, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 85, 0, 0.12) 1px, transparent 1px);
  background-size: 24px 24px;
  transform: perspective(140px) rotateX(65deg);
  transform-origin: 50% 100%;
  mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, transparent 90%);
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, transparent 90%);
  pointer-events: none;
}

.crash-ping-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(18, 19, 26, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-full);
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 6px;
  backdrop-filter: blur(8px);
  z-index: 15;
}

.ping-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 6px #10b981;
}

.crash-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.crash-hero-mult {
  position: relative;
  z-index: 10;
  font-size: 50px;
  font-weight: 900;
  letter-spacing: -2px;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 35px rgba(255, 255, 255, 0.4);
  line-height: 1;
  margin-top: 5px;
  pointer-events: none;
}

.crash-hero-mult.crashed {
  color: #ef4444;
  animation: mine-shake 0.4s;
  text-shadow: 0 0 30px rgba(239, 68, 68, 0.6);
}

.crash-hero-tag {
  position: relative;
  z-index: 10;
  font-size: 11px;
  font-weight: 800;
  color: #797c8b;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  margin-top: 6px;
  pointer-events: none;
}

/* Crash History Colored Badges */
.crash-pills-row {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 2px 0 10px 0;
}

.crash-pills-row::-webkit-scrollbar {
  display: none;
}

.crash-mult-pill {
  font-size: 12px;
  font-weight: 800;
  padding: 6px 12px;
  border-radius: 10px;
  color: #ffffff;
  flex-shrink: 0;
}

.pill-blue {
  background: #1a56db;
  box-shadow: 0 2px 8px rgba(26, 86, 219, 0.35);
}

.pill-purple {
  background: #7e22ce;
  box-shadow: 0 2px 8px rgba(126, 34, 206, 0.35);
}

.pill-violet {
  background: #6b21a8;
  box-shadow: 0 2px 8px rgba(107, 33, 168, 0.35);
}

.pill-hotpink {
  background: #db2777;
  box-shadow: 0 2px 8px rgba(219, 39, 119, 0.35);
}

.pill-dark {
  background: #374151;
  color: #e5e7eb;
}

/* Players Bets Card */
.players-bets-card {
  background: linear-gradient(180deg, #181920 0%, #111217 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  padding: 14px;
  margin-top: 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

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

.pb-title {
  font-size: 13px;
  font-weight: 800;
  color: #ffffff;
}

.pb-badge {
  font-size: 11px;
  font-weight: 800;
  color: #f87171;
}

.players-bets-body {
  padding: 22px 0 10px 0;
  text-align: center;
}

.players-empty-msg {
  font-size: 12px;
  font-weight: 600;
  color: #717684;
}

/* Premium game pass: warm metal, restrained cyan highlights and readable states. */
.crash-arena-card {
  background: radial-gradient(ellipse at 50% 92%, rgba(255, 106, 38, .16), transparent 48%),
    radial-gradient(ellipse at 78% 24%, rgba(20, 210, 224, .08), transparent 44%), #0b0d12;
  border-color: rgba(255, 255, 255, .11);
  box-shadow: inset 0 1px rgba(255,255,255,.06), 0 12px 32px rgba(0,0,0,.32);
}
.crash-arena-card::before {
  background-image: linear-gradient(rgba(255, 132, 64, .13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 132, 64, .13) 1px, transparent 1px);
}
.crash-rocket-lottie {
  position: absolute;
  z-index: 30;
  width: 96px;
  height: 96px;
  pointer-events: none;
  opacity: 1;
  transform-origin: 50% 50%;
  filter: drop-shadow(0 6px 18px rgba(255, 95, 20, 0.5));
  transition: opacity .25s ease;
  will-change: transform, left, top;
}
.crash-peppo-wrap {
  position: relative;
  width: 100%;
  height: 100%;
}
.crash-peppo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
  filter: drop-shadow(0 0 10px rgba(255, 120, 40, 0.4));
}
.rocket-thruster-fire {
  position: absolute;
  bottom: 4px;
  left: 4px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff7a0 10%, #ff8c00 50%, rgba(255, 40, 0, 0.75) 80%, transparent 100%);
  filter: blur(3px);
  pointer-events: none;
  animation: thruster-pulse 0.12s ease-in-out infinite alternate;
  z-index: -1;
}
@keyframes thruster-pulse {
  0% { transform: scale(0.8) translate(-1px, 1px); opacity: 0.75; }
  100% { transform: scale(1.3) translate(2px, -2px); opacity: 1; }
}

.crash-arena-card.is-crashed .crash-rocket-lottie,
.crash-rocket-lottie.is-busted {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Centered High-Tech Crash HUD */
.crash-hud-center {
  position: absolute;
  top: 34%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 6;
  text-align: center;
  width: 90%;
}

.crash-hero-mult {
  font-size: 52px;
  font-weight: 900;
  letter-spacing: -0.045em;
  color: #ffffff;
  text-shadow: 0 0 25px rgba(255, 255, 255, 0.5), 0 0 50px rgba(255, 106, 38, 0.35);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  transition: color 0.15s ease, text-shadow 0.15s ease;
}

.crash-hero-mult.crashed {
  color: #ff3348 !important;
  text-shadow: 0 0 35px rgba(255, 51, 72, 0.85), 0 0 70px rgba(255, 0, 40, 0.45) !important;
  animation: crash-shock 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

.crash-hero-tag {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 14px;
  border-radius: 999px;
  background: rgba(14, 16, 24, 0.72);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #ffa726;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
  transition: all 0.25s ease;
}

.crash-hero-tag.crashed {
  color: #ff4d5a;
  border-color: rgba(255, 77, 90, 0.4);
  background: rgba(45, 12, 16, 0.85);
}

/* Enhanced States for .crash-hero-tag (HUD Status Plaque) */
.crash-hero-tag.is-waiting {
  color: #ffb74d;
  border-color: rgba(255, 167, 38, 0.35);
  background: rgba(22, 17, 12, 0.85);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45), 0 0 16px rgba(255, 152, 0, 0.12);
}

.crash-hero-tag.tick-pulse {
  animation: tag-tick-bump 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

@keyframes tag-tick-bump {
  0% { transform: scale(1); }
  35% { transform: scale(1.08); border-color: rgba(255, 167, 38, 0.7); }
  100% { transform: scale(1); }
}

.crash-hero-tag.is-launching {
  color: #ffffff;
  border-color: rgba(255, 107, 0, 0.75);
  background: linear-gradient(135deg, rgba(255, 107, 0, 0.85), rgba(220, 50, 0, 0.9));
  box-shadow: 0 0 20px rgba(255, 107, 0, 0.6), 0 4px 14px rgba(0, 0, 0, 0.5);
  animation: tag-launch-flash 0.5s ease-out;
}

@keyframes tag-launch-flash {
  0% { transform: scale(0.9); opacity: 0.6; }
  50% { transform: scale(1.12); }
  100% { transform: scale(1); opacity: 1; }
}

.crash-hero-tag.is-running {
  color: #34d399;
  border-color: rgba(52, 211, 153, 0.35);
  background: rgba(8, 22, 16, 0.82);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45), 0 0 16px rgba(52, 211, 153, 0.15);
}

.tag-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 8px #34d399;
  display: inline-block;
  animation: live-dot-pulse 1s ease-in-out infinite;
}

@keyframes live-dot-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.7); }
}

/* Start Round Announcement Banner / Плашка старта раунда */
.crash-start-banner {
  position: absolute;
  top: 48%;
  left: 50%;
  transform: translate(-50%, -40%) scale(0.7);
  z-index: 25;
  pointer-events: none;
  opacity: 0;
  transition: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  max-width: 90%;
}

.crash-start-banner.is-visible {
  animation: start-banner-launch 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.start-banner-glow {
  position: absolute;
  inset: -12px -20px;
  background: radial-gradient(ellipse at center, rgba(255, 107, 0, 0.45) 0%, rgba(255, 60, 0, 0.15) 50%, transparent 75%);
  filter: blur(14px);
  pointer-events: none;
  border-radius: 999px;
  animation: banner-glow-pulse 1s ease-in-out infinite alternate;
}

.start-banner-pill {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px 8px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(24, 18, 14, 0.94) 0%, rgba(14, 16, 24, 0.96) 100%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 120, 62, 0.7);
  box-shadow: 0 0 25px rgba(255, 107, 0, 0.35), 0 8px 30px rgba(0, 0, 0, 0.7);
  overflow: hidden;
}

.start-banner-pill::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-25deg);
  animation: banner-sweep 1.2s ease-in-out infinite;
}

.start-banner-icon {
  font-size: 20px;
  line-height: 1;
  filter: drop-shadow(0 0 8px rgba(255, 107, 0, 0.8));
  animation: rocket-wobble 0.6s ease-in-out infinite alternate;
}

.start-banner-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.start-banner-title {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: #ffffff;
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(255, 107, 0, 0.7);
}

.start-banner-sub {
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.08em;
  color: #ff9800;
  text-transform: uppercase;
}

.start-banner-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 6px;
  background: linear-gradient(135deg, #ff6b00, #ff3b00);
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(255, 75, 0, 0.5);
}

@keyframes start-banner-launch {
  0% {
    opacity: 0;
    transform: translate(-50%, -35%) scale(0.65);
    filter: blur(8px);
  }
  16% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.06);
    filter: blur(0px);
  }
  26% {
    transform: translate(-50%, -50%) scale(0.98);
  }
  34% {
    transform: translate(-50%, -50%) scale(1.0);
  }
  75% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.0);
    filter: blur(0px);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -64%) scale(1.08);
    filter: blur(4px);
  }
}

@keyframes banner-glow-pulse {
  0% { opacity: 0.7; transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1.05); }
}

@keyframes banner-sweep {
  0% { left: -100%; }
  60%, 100% { left: 160%; }
}

@keyframes rocket-wobble {
  0% { transform: translateY(1px) rotate(-3deg); }
  100% { transform: translateY(-2px) rotate(4deg); }
}

@keyframes crash-shock {
  0% { transform: scale(1); }
  25% { transform: scale(1.12); }
  50% { transform: scale(0.96); }
  100% { transform: scale(1); }
}

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

.crash-arena-card.is-crashed {
  animation: crash-shake 0.4s ease;
  border-color: rgba(255, 51, 72, 0.45) !important;
  box-shadow: 0 0 30px rgba(255, 51, 72, 0.25), inset 0 0 20px rgba(255, 51, 72, 0.15) !important;
}

/* ═══════════════════════════════════════════════════════════════
   PREMIUM CRASH BET SHEET
   ═══════════════════════════════════════════════════════════════ */
.crash-bet-sheet {
  width: 100%;
  padding: 14px 14px 14px;
  border-radius: 20px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 107, 0, 0.08), transparent 70%),
    linear-gradient(165deg, rgba(26, 29, 38, 0.94), rgba(15, 17, 23, 0.97));
  border: 1px solid rgba(255, 120, 40, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 12px 32px rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(16px);
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cbs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2px;
}

.cbs-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
}

.cbs-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ff7a22;
  box-shadow: 0 0 8px #ff7a22;
}

.cbs-projected {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
}

.cbs-proj-label {
  color: rgba(255, 255, 255, 0.45);
  font-weight: 700;
}

.cbs-proj-val {
  color: #ff9d42;
  font-weight: 900;
  text-shadow: 0 0 10px rgba(255, 157, 66, 0.35);
  font-variant-numeric: tabular-nums;
}

/* Stepper Input Group */
.cbs-input-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cbs-stepper-btn {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: linear-gradient(150deg, #252936, #181a22);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #ffffff;
  font-size: 22px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.16s ease;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  user-select: none;
  touch-action: manipulation;
  flex-shrink: 0;
}

.cbs-stepper-btn:hover {
  background: linear-gradient(150deg, #2f3445, #1d202a);
  border-color: rgba(255, 120, 40, 0.35);
  transform: translateY(-1px);
}

.cbs-stepper-btn:active {
  transform: scale(0.92);
  background: rgba(255, 107, 0, 0.25);
  border-color: rgba(255, 107, 0, 0.6);
}

.cbs-input-field {
  flex: 1;
  position: relative;
  height: 46px;
  display: flex;
  align-items: center;
}

.cbs-input {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  background: rgba(12, 14, 19, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.11);
  padding: 0 36px 0 14px;
  color: #ffffff;
  font-family: 'Plus Jakarta Sans', var(--font-main);
  font-size: 18px;
  font-weight: 900;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.35);
}

.cbs-input:focus {
  border-color: rgba(255, 120, 40, 0.65);
  box-shadow: 0 0 14px rgba(255, 107, 0, 0.25), inset 0 2px 5px rgba(0, 0, 0, 0.35);
}

.cbs-gem {
  position: absolute;
  right: 12px;
  font-size: 15px;
  pointer-events: none;
}

/* Quick Amount Chips */
.cbs-chips-group {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}

.cbs-chip {
  height: 32px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #c4c7d4;
  font-family: var(--font-main);
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.16s ease;
  user-select: none;
  touch-action: manipulation;
}

.cbs-chip:hover {
  background: rgba(255, 120, 40, 0.15);
  border-color: rgba(255, 120, 40, 0.45);
  color: #ffffff;
  transform: translateY(-1px);
}

.cbs-chip:active {
  transform: scale(0.93);
  background: rgba(255, 107, 0, 0.35);
}

.cbs-action-btn {
  width: 100%;
  margin-top: 2px !important;
}
.players-bets-card { border-color: rgba(255,255,255,.09); background: linear-gradient(145deg,rgba(28,30,39,.96),rgba(15,16,21,.98)); }
.players-bets-body { display: grid; gap: 7px; max-height: 230px; overflow: auto; padding: 12px 0 2px; text-align: left; }
.crash-player-row { min-height: 42px; display: grid; grid-template-columns: 30px minmax(0,1fr) auto; gap: 9px; align-items: center; padding: 6px 9px; border-radius: 12px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.045); }
.crash-player-avatar { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 10px; font-size: 11px; font-weight: 900; color: #ffe2cf; background: linear-gradient(145deg,#823817,#332018); }
.crash-player-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #e8e9ee; font-size: 12px; font-weight: 700; }
.crash-player-result { color: #c6cad3; font-variant-numeric: tabular-nums; font-size: 11px; font-weight: 800; }
.crash-player-result.is-paid { color: #60dfbf; }
.mines-stage-card { border-color: rgba(255,255,255,.1); background: radial-gradient(ellipse at 50% 0%,rgba(255,132,64,.07),transparent 60%), linear-gradient(145deg,#191b23,#101116); box-shadow: 0 14px 30px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.045); }
.mines-board { gap: 7px; }
.mines-tile { border-radius: 12px; background: linear-gradient(155deg,#292c36,#191b23 72%); border-color: rgba(255,255,255,.085); box-shadow: inset 0 1px rgba(255,255,255,.055), 0 3px 7px rgba(0,0,0,.22); }
.mines-tile:hover { border-color: rgba(255,143,83,.55); box-shadow: 0 5px 15px rgba(255,106,38,.12), inset 0 1px rgba(255,255,255,.08); }
.ctrl-card, .players-bets-card { backdrop-filter: blur(12px); }
.btn-game-cta { box-shadow: 0 8px 20px rgba(255,91,31,.2), inset 0 1px rgba(255,255,255,.18); }
@media (max-width: 420px) {
  .crash-player-row { min-height: 39px; grid-template-columns: 27px minmax(0,1fr) auto; gap: 7px; padding: 5px 7px; }
  .crash-player-avatar { width: 27px; height: 27px; }
  .crash-player-result { font-size: 10px; }
  .mines-board { gap: 5px; }
  .mines-tile { border-radius: 9px; }
}

.round-hash-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 0 4px 0;
  font-family: var(--font-mono);
  font-size: 9px;
  color: #7f1d1d;
  letter-spacing: 0.5px;
}

.round-hash-prefix {
  font-weight: 800;
  color: #ef4444;
}

.round-hash-code {
  opacity: 0.8;
  word-break: break-all;
}

/* ═══════════════════════════════════════════════════════════════
   UPGRADE SCREEN STYLES (PREMIUM ORANGE & BLACK CASINO REDESIGN)
   ═══════════════════════════════════════════════════════════════ */

/* Top Actions: Fast Mode (Provably Fair hidden) */
.upgrade-top-actions {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 8px;
  padding: 0 4px;
}

.upgrade-badge-status {
  display: none !important;
}

.upgrade-badge-status .live-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.85);
  animation: live-pulse 1.8s ease-in-out infinite alternate;
}

.fast-mode-pill {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  color: #9da1b0;
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  padding: 5px 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  outline: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.fast-mode-pill:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

#game-upgrade .fast-mode-pill.active {
  background: rgba(255, 107, 0, 0.22);
  border-color: #ff6b00;
  color: #ffa726;
  box-shadow: 0 0 14px rgba(255, 107, 0, 0.35);
}

#coin-fast-mode-btn.active,
.coin-top-actions .fast-mode-pill.active {
  background: rgba(245, 158, 11, 0.22);
  border-color: #f59e0b;
  color: #fbbf24;
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.4);
}


/* Main Wheel Stadium Card */
.upgrade-main-card {
  position: relative;
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 107, 0, 0.12) 0%, transparent 68%),
    linear-gradient(175deg, #181a24 0%, #0d0f15 100%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 24px;
  padding: 12px 14px 14px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 10px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.upgrade-wheel-box {
  width: min(284px, 82vw);
  height: min(284px, 82vw);
  position: relative;
  margin: 6px auto 14px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
}

.wheel-ambient-halo {
  position: absolute;
  inset: -22px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 107, 0, 0.24) 0%, rgba(255, 107, 0, 0.05) 50%, transparent 72%);
  filter: blur(18px);
  opacity: 0.75;
  pointer-events: none;
  transition: opacity 0.5s ease, transform 0.5s ease;
  z-index: 1;
}

.wheel-dial-svg {
  position: absolute;
  inset: -10px;
  width: calc(100% + 20px);
  height: calc(100% + 20px);
  pointer-events: none;
  z-index: 4;
}

.upgrade-wheel-disc {
  width: min(262px, 76vw);
  height: min(262px, 76vw);
  border-radius: 50%;
  position: relative;
  background: #0d0f15;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.85), inset 0 0 24px rgba(0, 0, 0, 0.95);
  border: 2px solid rgba(255, 107, 0, 0.2);
  z-index: 3;
}

.wheel-arc-overlay {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    #ffc043 0deg,
    #ff7a00 calc(var(--win-sector-deg, 114deg) * 0.45),
    #e64a00 calc(var(--win-sector-deg, 114deg) * 0.85),
    #ffa726 var(--win-sector-deg, 114deg),
    #11131a var(--win-sector-deg, 114deg),
    #11131a 360deg
  );
  box-shadow: 0 0 28px rgba(255, 107, 0, 0.45);
  transition: background 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
}

.sector-start-line {
  position: absolute;
  top: -7px;
  left: 50%;
  width: 3px;
  height: 22px;
  transform: translateX(-50%);
  background: #ffffff;
  box-shadow: 0 0 8px #ffffff, 0 0 16px #ff7a00;
  border-radius: 2px;
  pointer-events: none;
  z-index: 6;
}

.wheel-obsidian-hub {
  width: min(172px, 50vw);
  height: min(172px, 50vw);
  border-radius: 50%;
  background: radial-gradient(circle at 45% 35%, #1c1e28 0%, #0d0f15 100%);
  border: 2px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.9), inset 0 1px 1px rgba(255, 255, 255, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
  position: relative;
  overflow: hidden;
  text-align: center;
}

.hub-shimmer-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 15%, rgba(255, 255, 255, 0.08), transparent 60%);
  pointer-events: none;
}

.hub-main-text {
  font-size: 32px;
  font-weight: 900;
  letter-spacing: -0.5px;
  background: linear-gradient(135deg, #ffffff 35%, #ffa726 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.hub-target-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.03em;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(255, 107, 0, 0.14);
  border: 1px solid rgba(255, 107, 0, 0.35);
  color: #ffa726;
  margin: 4px 0 3px 0;
  white-space: nowrap;
  max-width: 95%;
  transition: all 0.3s ease;
}

.hub-sub-text {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #797d8e;
  text-transform: uppercase;
  transition: color 0.3s ease;
}

/* Rotating Needle Arm (Стрелка) */
.wheel-needle-arm {
  position: absolute;
  inset: -17px;
  pointer-events: none;
  z-index: 25;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: rotate(0deg);
  transform-origin: 50% 50%;
  will-change: transform;
}

.needle-body-wrap {
  position: absolute;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  filter: drop-shadow(0 0 14px rgba(255, 107, 0, 0.9)) drop-shadow(0 4px 8px rgba(0, 0, 0, 0.9));
}

.needle-pointer-svg {
  width: 28px;
  height: 44px;
  transform: translateY(-2px);
}

.needle-glow-tip {
  position: absolute;
  top: 28px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 8px #ffffff, 0 0 16px #ff7a00;
}

.needle-center-pivot,
.pivot-metal-rivet {
  display: none !important;
}

/* Compare Row: ВЗНОС 10 💎 ➔ ПОЛУЧЕНИЕ 30 💎 (+20 💎) */
.upgrade-compare-row {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
}

.compare-capsule {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  padding: 6px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.cc-lbl {
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: #797c8b;
  text-transform: uppercase;
}

.cc-val {
  font-size: 15px;
  font-weight: 900;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 4px;
}
.cc-val.win-val {
  color: #ffa726;
}

.compare-flow-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255, 107, 0, 0.12);
  border: 1px solid rgba(255, 107, 0, 0.32);
  color: #ffa726;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.03em;
  box-shadow: 0 0 10px rgba(255, 107, 0, 0.15);
}

.cc-gem {
  font-size: 12px;
}

/* Clean Control Panels (Cards) */
.upgrade-panel-card {
  background: rgba(22, 24, 33, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  padding: 6px 10px;
  margin-bottom: 5px;
}

.up-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5px;
}

.up-panel-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
}

.up-panel-sub {
  font-size: 11px;
  font-weight: 800;
  color: #ffa726;
}

.up-input-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(11, 13, 18, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 4px 10px;
}

.up-custom-input {
  width: 70px;
  background: transparent;
  border: none;
  outline: none;
  font-size: 15px;
  font-weight: 900;
  color: #ffd066;
  text-align: right;
  font-family: inherit;
}

.up-gem {
  font-size: 13px;
}

/* Target Multiplier Grid */
.target-mult-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.target-mult-pill {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 11px;
  padding: 5px 3px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.target-mult-pill:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  transform: translateY(-1px);
}

.target-mult-pill .tmp-mult {
  font-size: 13.5px;
  font-weight: 900;
  color: #ffffff;
}

.target-mult-pill .tmp-chance {
  font-size: 10px;
  font-weight: 750;
  color: #8c90a2;
}

.target-mult-pill.active {
  background: radial-gradient(circle at 50% 50%, rgba(255, 107, 0, 0.2), rgba(255, 107, 0, 0.05)), #181512;
  border: 1.5px solid #ff6b00;
  box-shadow: 0 0 14px rgba(255, 107, 0, 0.32);
  transform: translateY(-1px);
}

.target-mult-pill.active .tmp-mult {
  color: #ffffff;
  text-shadow: 0 0 10px rgba(255, 107, 0, 0.6);
}

.target-mult-pill.active .tmp-chance {
  color: #ffa726;
  font-weight: 850;
}

/* Bet Chips Row */
.step-chips-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 5px;
}

.step-chip-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 11px;
  font-weight: 800;
  padding: 8px 0;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.step-chip-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.16);
}

.step-chip-btn.active {
  background: rgba(245, 158, 11, 0.18);
  border-color: #ff6b00;
  color: #ffd066;
  box-shadow: 0 0 12px rgba(255, 107, 0, 0.25);
}

/* Grand CTA Button */
.upgrade-cta-btn {
  width: 100%;
  min-height: 50px;
  border-radius: 18px;
  background: linear-gradient(135deg, #ff8528 0%, #ff5200 50%, #d83d00 100%) !important;
  border: 1px solid #ffa04d !important;
  box-shadow: 0 10px 28px rgba(255, 77, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.06em;
  color: #ffffff !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 4px;
  margin-bottom: 24px !important;
  transition: all 0.25s ease;
}

.upgrade-cta-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(255, 77, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
}

.upgrade-cta-btn:disabled {
  opacity: 0.55;
  filter: grayscale(0.5);
  cursor: not-allowed;
  transform: none;
}

/* ═══════════════════════════════════════════════════════════════
   3D COIN ARENA & LUXURY CYBER-COIN STADIUM
   ═══════════════════════════════════════════════════════════════ */

/* Top Actions: Provably Fair & Fast Mode */
.coin-top-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 8px;
  padding: 0 4px;
}

.coin-badge-status {
  display: none !important;
}

/* 3D Coin Arena Card */
.coin-arena-card {
  position: relative;
  min-height: 310px;
  height: 310px;
  background:
    radial-gradient(circle at 50% 50%, rgba(245, 158, 11, 0.16) 0%, transparent 65%),
    linear-gradient(175deg, #181a24 0%, #0d0f15 100%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  perspective: 1200px;
  overflow: hidden;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.coin-ambient-halo {
  position: absolute;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.28) 0%, transparent 70%);
  filter: blur(32px);
  pointer-events: none;
  z-index: 0;
  transition: background 0.6s ease, transform 0.6s ease;
}

/* Concentric Rings */
.coin-launch-stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 1;
}

.coin-stage-ring.ring-outer {
  width: 260px;
  height: 260px;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.08);
  animation: coin-ring-rotate 45s linear infinite;
}

.coin-stage-ring.ring-inner {
  width: 216px;
  height: 216px;
  border-radius: 50%;
  border: 1px solid rgba(245, 158, 11, 0.14);
}

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

/* 3D Ballistic Trajectory Stage Wrapper */
.coin-trajectory-stage {
  position: relative;
  z-index: 3;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  will-change: transform;
}

/* The 3D Coin Object */
.coin-3d {
  width: 200px;
  height: 200px;
  position: relative;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  will-change: transform;
}

/* Coin Faces */
.coin-face {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  border: 3.5px solid #ffd066;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5), 0 0 24px rgba(245, 158, 11, 0.3);
  background: #1a1505;
}

.coin-face.front {
  transform: rotateY(0deg) translateZ(1px);
}

.coin-face.back {
  transform: rotateY(180deg) translateZ(1px);
}

.coin-real-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  pointer-events: none;
  display: block;
}

.coin-specular-glint {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, 0.22) 100%);
  pointer-events: none;
  z-index: 4;
}

/* Dynamic Physical Contact Ground Shadow */
.coin-shadow {
  width: 140px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.35) 45%, transparent 75%);
  margin-top: 18px;
  filter: blur(3.5px);
  z-index: 2;
  transition: transform 0.2s ease, opacity 0.2s ease, filter 0.2s ease;
}

/* Arena Flight Status Pill */
.coin-arena-status {
  position: absolute;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px);
  z-index: 4;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #cbd5e1;
  text-transform: uppercase;
}

.coin-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f59e0b;
  box-shadow: 0 0 8px #f59e0b;
}

.card-coin-thumb {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1.5px solid rgba(255, 208, 102, 0.5);
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.4));
}

/* Side Selector Cards (ОРЁЛ / РЕШКА) */
.coin-choice-deck {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}

.coin-choice-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(22, 24, 33, 0.85);
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
  text-align: left;
}

.coin-choice-card:hover {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(28, 31, 42, 0.95);
  transform: translateY(-1px);
}

.coin-choice-card.selected.heads-card {
  background: linear-gradient(145deg, rgba(245, 158, 11, 0.15), rgba(120, 53, 15, 0.2));
  border-color: #f59e0b;
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.coin-choice-card.selected.tails-card {
  background: linear-gradient(145deg, rgba(2, 132, 199, 0.15), rgba(8, 47, 73, 0.2));
  border-color: #38bdf8;
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.card-ambient-glow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.coin-choice-card.selected .card-ambient-glow.gold-glow {
  opacity: 1;
  background: radial-gradient(circle at 20% 50%, rgba(245, 158, 11, 0.18), transparent 70%);
}

.coin-choice-card.selected .card-ambient-glow.cyan-glow {
  opacity: 1;
  background: radial-gradient(circle at 20% 50%, rgba(56, 189, 248, 0.18), transparent 70%);
}

.card-side-badge {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.card-side-badge.gold {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.25), rgba(180, 83, 9, 0.4));
  border: 1px solid rgba(245, 158, 11, 0.4);
}

.card-side-badge.sapphire {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.25), rgba(2, 132, 199, 0.4));
  border: 1px solid rgba(56, 189, 248, 0.4);
}

.card-side-info {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.card-side-name {
  font-size: 13.5px;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: 0.05em;
}

.card-side-sub {
  font-size: 9px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 1px;
}

.card-side-selector-mark {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 900;
  background: rgba(255, 255, 255, 0.08);
  color: transparent;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.coin-choice-card.selected .card-side-selector-mark {
  background: #10b981;
  color: #ffffff;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.4);
}



/* Bet Selector Control Panel */
.coin-bet-container {
  background: rgba(22, 24, 33, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 18px;
  padding: 10px 12px;
  margin-bottom: 10px;
}

.coin-bet-input-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.cbi-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
}

.cbi-input-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(11, 13, 18, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 4px 10px;
}

.coin-custom-input {
  width: 70px;
  background: transparent;
  border: none;
  outline: none;
  font-size: 15px;
  font-weight: 900;
  color: #ffd066;
  text-align: right;
  font-family: inherit;
}

.cbi-gem-badge {
  font-size: 13px;
}

.coin-chips-row {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}

.coin-chips-row::-webkit-scrollbar {
  display: none;
}

.coin-chip-btn {
  flex: 1;
  min-width: 40px;
  padding: 7px 4px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.75);
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.coin-chip-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
}

.coin-chip-btn.active {
  background: rgba(245, 158, 11, 0.18);
  border-color: #f59e0b;
  color: #ffd066;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.25);
}

/* Recent Flips Ribbon */
.coin-history-panel {
  background: rgba(22, 24, 33, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 8px 12px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.ch-header {
  display: flex;
  flex-direction: column;
}

.ch-title {
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.45);
  text-transform: uppercase;
}

.ch-badge {
  font-size: 7.5px;
  font-weight: 800;
  color: #10b981;
  letter-spacing: 0.08em;
}

.ch-chips-list {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
}

.ch-item-chip {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
}

.ch-item-chip.heads {
  background: rgba(245, 158, 11, 0.18);
  border-color: rgba(245, 158, 11, 0.4);
}

.ch-item-chip.tails {
  background: rgba(56, 189, 248, 0.18);
  border-color: rgba(56, 189, 248, 0.4);
}

/* Launch CTA Button */
.coin-launch-btn {
  width: 100%;
  min-height: 50px;
  border-radius: 18px;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 50%, #b45309 100%);
  border: 1px solid #fcd34d;
  box-shadow: 0 10px 28px rgba(245, 158, 11, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  font-size: 14.5px;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: #1a0f00;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  transition: all 0.25s ease;
}

.coin-launch-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(245, 158, 11, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.coin-launch-btn:disabled {
  opacity: 0.55;
  filter: grayscale(0.5);
  cursor: not-allowed;
  transform: none;
}

/* ═══════════════════════════════════════════════════════════════
   TAB 2: БОНУСЫ (BONUSES & PROMOCODES)
   ═══════════════════════════════════════════════════════════════ */

.bonus-hero-card {
  background: linear-gradient(150deg, #221c14 0%, #15151c 100%);
  border: 1px solid rgba(255, 160, 0, 0.3);
  border-top: 1px solid rgba(255, 180, 0, 0.5);
  border-radius: var(--radius-xl);
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5), 0 0 25px rgba(255, 160, 0, 0.1);
}

.bonus-gift-emblem {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: rgba(255, 85, 0, 0.18);
  border: 1px solid rgba(255, 85, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  margin-bottom: 14px;
  box-shadow: 0 0 25px var(--color-orange-glow);
}

.bonus-title {
  font-size: 19px;
  font-weight: 900;
  color: #fff;
}

.bonus-desc {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 4px;
  font-weight: 500;
}

.bonus-countdown-box {
  background: var(--bg-input);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 10px 22px;
  margin: 18px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

.countdown-digits {
  font-size: 24px;
  font-weight: 900;
  font-family: var(--font-mono);
  color: var(--color-orange);
  letter-spacing: 1px;
}

.bonus-claim-btn {
  width: 100%;
  background: linear-gradient(180deg, #ff6611 0%, #ff3b00 100%);
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-md);
  padding: 15px;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.5px;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 8px 25px var(--color-orange-glow);
  transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.bonus-claim-btn:disabled {
  background: rgba(22, 22, 30, 0.85);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  cursor: not-allowed;
  box-shadow: none;
}

/* Promo Code Card */
.promocode-card {
  background: linear-gradient(180deg, rgba(26, 26, 35, 0.8) 0%, rgba(16, 16, 22, 0.95) 100%);
  border: 1px solid var(--border-subtle);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-xl);
  padding: 20px;
  margin-top: 14px;
  box-shadow: var(--shadow-card);
}

.promocode-header {
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 4px;
}

.promocode-sub {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 14px;
  font-weight: 500;
}

.promocode-input-group {
  display: flex;
  gap: 8px;
}

.promocode-input {
  flex: 1;
  background: var(--bg-input);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  outline: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5);
  transition: all 0.2s;
}

.promocode-input:focus {
  border-color: var(--color-orange);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5), 0 0 12px rgba(255, 85, 0, 0.2);
}

.promocode-btn {
  background: rgba(28, 28, 38, 0.9);
  border: 1px solid var(--border-subtle);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  padding: 12px 18px;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  cursor: pointer;
  transition: all 0.2s;
}

.promocode-btn:hover {
  background: rgba(255, 85, 0, 0.2);
  border-color: var(--color-orange);
  color: var(--color-orange);
}

/* ═══════════════════════════════════════════════════════════════
   TAB 3: РЕФЕРАЛЫ (REFERRALS — LUXURY REDESIGN)
   ═══════════════════════════════════════════════════════════════ */

/* 1. Hero Partner Banner & 2-Stat Duo */
.ref-hero-card {
  background: linear-gradient(180deg, #181922 0%, #101116 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 22px;
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.ref-hero-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.ref-hero-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255, 85, 0, 0.25) 0%, rgba(255, 85, 0, 0.05) 100%);
  border: 1px solid rgba(255, 85, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  box-shadow: 0 4px 14px rgba(255, 85, 0, 0.25);
  flex-shrink: 0;
}

.ref-hero-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ref-hero-title {
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -0.3px;
  color: #ffffff;
}

.ref-hero-desc {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.35;
}

.ref-stat-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.ref-duo-card {
  background: #13141b;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ref-duo-label {
  font-size: 9px;
  font-weight: 800;
  color: #797c8b;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.ref-duo-val {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}

.ref-duo-icon {
  font-size: 16px;
}

.ref-duo-number {
  font-size: 20px;
  font-weight: 900;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
}

.ref-duo-number.highlight {
  color: var(--color-orange);
  text-shadow: 0 0 10px var(--color-orange-glow);
}

/* 2. Personal Invite Link & Action Card */
.ref-link-card {
  background: linear-gradient(180deg, #181922 0%, #101116 100%);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 20px;
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.ref-card-sublabel {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: #797c8b;
  text-transform: uppercase;
  margin-bottom: 8px;
  display: block;
}

.ref-link-box {
  display: flex;
  align-items: center;
  background: #0e0e14;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 12px;
  justify-content: space-between;
}

.ref-link-text {
  font-size: 12px;
  font-family: var(--font-mono);
  color: #d1d5db;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ref-cta-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ref-copy-pill-btn {
  background: #1a1b24;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 12px;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s;
}

.ref-copy-pill-btn:hover {
  background: #242533;
  border-color: rgba(255, 255, 255, 0.2);
}

/* 3. Commission Tier Levels */
.ref-tiers-card {
  background: linear-gradient(135deg, rgba(34, 36, 46, 0.95) 0%, rgba(18, 19, 25, 0.98) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 20px;
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.ref-tiers-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.5px;
  color: #ffffff;
}

.ref-tier-active-tag {
  background: rgba(255, 85, 0, 0.18);
  border: 1px solid rgba(255, 85, 0, 0.4);
  color: var(--color-orange);
  font-size: 10px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: var(--radius-full);
}

.ref-tiers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.ref-tier-item {
  background: #14151d;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 10px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
  transition: all 0.2s;
}

.ref-tier-item.active {
  background: rgba(255, 85, 0, 0.15);
  border-color: var(--color-orange);
  box-shadow: 0 0 12px var(--color-orange-glow);
}

.rti-top {
  display: flex;
  align-items: center;
  gap: 4px;
}

.rti-medal {
  font-size: 14px;
}

.rti-rate {
  font-size: 15px;
  font-weight: 900;
  color: #ffffff;
}

.ref-tier-item.active .rti-rate {
  color: var(--color-orange);
}

.rti-name {
  font-size: 10px;
  font-weight: 800;
  color: #fff;
}

.rti-req {
  font-size: 9px;
  font-weight: 700;
  color: #797c8b;
}

/* 4. How it Works (3 Steps) */
.ref-steps-card {
  background: linear-gradient(180deg, #181922 0%, #101116 100%);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 20px;
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.ref-steps-title {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.5px;
  color: #797c8b;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.ref-step-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}

.ref-step-row:last-child {
  margin-bottom: 0;
}

.ref-step-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 85, 0, 0.18);
  border: 1px solid rgba(255, 85, 0, 0.4);
  color: var(--color-orange);
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ref-step-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.ref-step-text b {
  font-size: 12px;
  font-weight: 800;
  color: #ffffff;
}

.ref-step-text span {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.3;
}

/* 5. Referral Empty State / List */
.ref-list-card {
  background: linear-gradient(180deg, #181922 0%, #101116 100%);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 20px;
  padding: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.ref-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: -0.2px;
  color: #fff;
}

.ref-count-tag {
  font-size: 10px;
  font-weight: 800;
  color: var(--color-orange);
  background: rgba(255, 85, 0, 0.12);
  border: 1px solid rgba(255, 85, 0, 0.25);
  padding: 2px 7px;
  border-radius: var(--radius-full);
}

.ref-empty-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 16px 10px;
  gap: 6px;
}

.ref-empty-icon-ring {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 4px;
}

.ref-empty-main {
  font-size: 13px;
  font-weight: 800;
  color: #ffffff;
}

.ref-empty-desc {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.4;
  max-width: 280px;
}

/* ═══════════════════════════════════════════════════════════════
   TAB 4: ПРОФИЛЬ (PROFILE — LUXURY REDESIGN)
   ═══════════════════════════════════════════════════════════════ */

/* 1. Hero User Identity & In-Profile Balance Card */
.profile-hero-card {
  background: linear-gradient(180deg, #181922 0%, #101116 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 22px;
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.profile-user-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.profile-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}

.profile-avatar {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2c2c3e, #161622);
  border: 2px solid var(--color-orange);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  box-shadow: 0 4px 18px var(--color-orange-glow);
  overflow: hidden;
}

/* Keep semantic hidden states effective even when component classes set display. */
[hidden] { display: none !important; }

.profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-online-dot {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #10b981;
  border: 2px solid #101116;
  box-shadow: 0 0 6px #10b981;
}

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

.profile-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.profile-name {
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -0.3px;
  color: #fff;
}

.verified-check {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #00d2ff;
  color: #000;
  font-size: 9px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-username {
  font-size: 12px;
  color: var(--color-orange);
  font-weight: 700;
}

.profile-id-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-full);
  padding: 2px 8px;
  font-size: 10px;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  cursor: pointer;
  margin-top: 3px;
  width: fit-content;
  transition: all 0.2s;
}

.profile-id-pill:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* In-Profile Balance Bar */
.profile-wallet-capsule {
  background: #13141b;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pwc-left {
  display: flex;
  flex-direction: column;
}

.pwc-label {
  font-size: 9px;
  font-weight: 800;
  color: #797c8b;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.pwc-balance {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
}

.pwc-gem {
  font-size: 14px;
}

.pwc-amount {
  font-size: 17px;
  font-weight: 900;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
}

.pwc-rub {
  font-size: 11px;
  font-weight: 700;
  color: #797c8b;
  margin-left: 2px;
}

.pwc-actions {
  display: flex;
  gap: 6px;
}

.pwc-btn {
  border-radius: 10px;
  padding: 7px 12px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s;
}

.pwc-btn-deposit {
  background: linear-gradient(180deg, #ff6600 0%, #e04400 100%);
  color: #fff;
  border: none;
  box-shadow: 0 2px 10px var(--color-orange-glow);
}

.pwc-btn-deposit:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.pwc-btn-withdraw {
  background: #1c1d26;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.pwc-btn-withdraw:hover {
  background: #252633;
}

/* 2. Metallic VIP Status Card */
.vip-status-card {
  background: linear-gradient(135deg, rgba(34, 36, 46, 0.95) 0%, rgba(18, 19, 25, 0.98) 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 20px;
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

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

.vip-title-box {
  display: flex;
  align-items: center;
  gap: 10px;
}

.vip-crown {
  font-size: 24px;
  filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.4));
}

.vip-title-stack {
  display: flex;
  flex-direction: column;
}

.vip-level-name {
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.5px;
  color: #ffffff;
}

.vip-level-sub {
  font-size: 10px;
  font-weight: 800;
  color: #00d2ff;
  letter-spacing: 0.8px;
}

.vip-benefit-tag {
  background: rgba(16, 185, 129, 0.18);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #34d399;
  font-size: 10px;
  font-weight: 800;
  padding: 4px 9px;
  border-radius: var(--radius-full);
  letter-spacing: 0.2px;
}

.vip-progress-wrap {
  margin-bottom: 12px;
}

.vip-progress-bar {
  width: 100%;
  height: 8px;
  background: #0e0e14;
  border-radius: var(--radius-full);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.vip-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #ff5500, #00d2ff);
  border-radius: var(--radius-full);
  box-shadow: 0 0 10px rgba(255, 85, 0, 0.5);
}

.vip-meta-row {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 6px;
}

.vip-remaining-text {
  color: #00d2ff;
  font-weight: 700;
}

.vip-perks-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.vip-perk-pill {
  background: #14151d;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 7px 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  color: #d1d5db;
}

/* 3. Performance & Gameplay Stats Grid */
.profile-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 12px;
}

.p-stat-card {
  background: linear-gradient(180deg, #181922 0%, #111218 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 10px 4px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

.p-stat-icon {
  font-size: 15px;
}

.p-stat-val {
  font-size: 15px;
  font-weight: 900;
  letter-spacing: -0.3px;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.p-stat-val.val-green {
  color: #10b981;
}

.p-stat-val.val-red {
  color: #ef4444;
}

.p-stat-val.val-cyan {
  color: #00d2ff;
}

.p-stat-lbl {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
}

/* 4. Quick Account Actions */
.profile-actions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}

.profile-action-btn {
  background: #161720;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  padding: 11px 12px;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.profile-action-btn:hover {
  background: #20222e;
  border-color: rgba(255, 255, 255, 0.18);
  transform: translateY(-1px);
}

.profile-action-btn svg {
  color: var(--color-orange);
  flex-shrink: 0;
}

/* 5. Transactions History */
.history-section {
  background: linear-gradient(180deg, #181922 0%, #101116 100%);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 20px;
  padding: 16px;
  box-shadow: var(--shadow-card);
}

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

.history-header {
  font-size: 14px;
  font-weight: 900;
  letter-spacing: -0.2px;
  color: #fff;
}

.history-filter-pill {
  font-size: 10px;
  font-weight: 800;
  color: var(--color-orange);
  background: rgba(255, 85, 0, 0.12);
  border: 1px solid rgba(255, 85, 0, 0.25);
  padding: 3px 8px;
  border-radius: var(--radius-full);
}

.history-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: rgba(18, 18, 24, 0.85);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.history-item-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.history-icon-badge {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-input);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.history-item-info {
  display: flex;
  flex-direction: column;
}

.history-item-title {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}

.history-item-time {
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 500;
}

.history-item-amount {
  font-size: 14px;
  font-weight: 900;
}

.history-item-amount.positive {
  color: #34d399;
}

.history-item-amount.negative {
  color: var(--text-secondary);
}

/* ═══════════════════════════════════════════════════════════════
   TOAST NOTIFICATIONS (TRANSPARENT LIQUID GLASS)
   ═══════════════════════════════════════════════════════════════ */

.toast-container {
  position: absolute;
  top: max(20px, env(safe-area-inset-top, 20px));
  left: 12px;
  right: 12px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}

.toast {
  position: relative;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.12) 0%,
    rgba(255, 255, 255, 0.03) 50%,
    rgba(255, 255, 255, 0.08) 100%
  );
  background-color: rgba(18, 20, 29, 0.32);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-top: 1px solid rgba(255, 255, 255, 0.38);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 8px 18px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #ffffff;
  opacity: 0;
  transform: translateY(-16px) scale(0.94);
  transition: transform 0.36s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.24s ease;
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.15),
    0 0 16px rgba(255, 255, 255, 0.04);
  max-width: 92%;
  width: fit-content;
  margin: 0 auto;
  pointer-events: auto;
  will-change: transform, opacity;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.toast.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.toast-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  filter: drop-shadow(0 0 6px rgba(255, 140, 50, 0.7));
  flex-shrink: 0;
}

.toast-msg {
  display: inline;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 300px;
}

/* ═══════════════════════════════════════════════════════════════
   MODAL DIALOGS
   ═══════════════════════════════════════════════════════════════ */

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(12px);
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.25s ease;
}

.modal-backdrop.active {
  opacity: 1;
  visibility: visible;
}

.modal-card {
  background: linear-gradient(180deg, #20202c 0%, #13131a 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-xl);
  padding: 26px 20px;
  width: 100%;
  max-width: 330px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.85);
  transform: scale(0.9);
  transition: transform 0.28s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

/* ─── DEPOSIT MODAL REDESIGN (RUBLES & STARS) ─── */
.deposit-modal-card {
  width: min(96vw, 560px);
  max-width: 560px;
  max-height: min(92vh, 880px);
  overflow-y: auto;
  padding: 26px 24px 30px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 107, 34, 0.16), transparent 65%),
    linear-gradient(180deg, #181922 0%, #0d0e14 100%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 26px;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.85), 0 0 35px rgba(255, 107, 34, 0.12);
  position: relative;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.deposit-modal-card::-webkit-scrollbar {
  width: 6px;
}
.deposit-modal-card::-webkit-scrollbar-track {
  background: transparent;
}
.deposit-modal-card::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 6px;
}


.modal-close-icon-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: #a0a2b0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 10;
}
.modal-close-icon-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  transform: rotate(90deg);
}

.deposit-header-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  text-align: left;
  padding-right: 38px;
}
.deposit-header-row .modal-icon-bubble {
  width: 50px;
  height: 50px;
  font-size: 24px;
  margin-bottom: 0;
  flex-shrink: 0;
}
.deposit-header-text {
  min-width: 0;
}
.deposit-header-text .modal-title {
  font-size: 21px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.deposit-balance-preview {
  font-size: 13px;
  color: #8c8f9f;
  margin-top: 3px;
}
.deposit-balance-preview strong {
  color: #ff9b55;
  font-weight: 700;
}

/* Tabs */
.deposit-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 5px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  margin-bottom: 18px;
}
.deposit-tab-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 10px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;
  color: #8c8f9f;
  font-size: 13.5px;
  font-weight: 700;

  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.deposit-tab-btn .tab-icon {
  font-size: 15px;
}
.deposit-tab-btn .tab-badge {
  font-size: 9px;
  font-weight: 800;
  padding: 2px 5px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  color: #bbb;
}
.deposit-tab-btn .tab-badge.hot {
  background: linear-gradient(135deg, #ff6b22, #f53d10);
  color: #fff;
}
.deposit-tab-btn.active {
  background: linear-gradient(145deg, rgba(255, 107, 34, 0.2), rgba(255, 107, 34, 0.08));
  border-color: rgba(255, 107, 34, 0.45);
  color: #fff;
  box-shadow: 0 4px 14px rgba(255, 107, 34, 0.15);
}

/* SBP Platega Banner */
.deposit-sbp-badge-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(255, 107, 34, 0.08);
  border: 1px solid rgba(255, 107, 34, 0.25);
  border-radius: 14px;
  margin-bottom: 16px;
  backdrop-filter: blur(8px);
}
.sbp-icon-glow {
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(255, 107, 34, 0.18);
  border: 1px solid rgba(255, 107, 34, 0.4);
  box-shadow: 0 0 14px rgba(255, 107, 34, 0.25);
  flex-shrink: 0;
}
.sbp-info-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}
.sbp-info-meta b {
  font-size: 13px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.2px;
}
.sbp-info-meta small {
  font-size: 11px;
  color: #9da1b0;
  line-height: 1.3;
}

/* Method Selector */
.deposit-method-selector {

  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 16px;
}
.dep-method-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 13px;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s ease;
}
.dep-method-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.15);
}
.dep-method-card.active {
  background: rgba(255, 107, 34, 0.1);
  border-color: rgba(255, 107, 34, 0.5);
  box-shadow: 0 0 16px rgba(255, 107, 34, 0.12);
}
.dep-method-radio {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #5a5d6e;
  margin-top: 3px;
  flex-shrink: 0;
  transition: all 0.2s ease;
}
.dep-method-card.active .dep-method-radio {
  border-color: #ff7623;
  background: #ff7623;
  box-shadow: inset 0 0 0 2px #121319;
}
.dep-method-title {
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.dep-method-tag {
  font-size: 8px;
  font-weight: 800;
  color: #35d5a1;
  background: rgba(53, 213, 161, 0.12);
  padding: 1px 4px;
  border-radius: 4px;
}
.dep-method-desc {
  font-size: 10px;
  color: #8c8f9f;
  margin-top: 2px;
  line-height: 1.3;
}

/* Subtitles */
.deposit-subtitle {
  font-size: 11px;
  font-weight: 700;
  color: #a4a6b5;
  text-align: left;
  margin-bottom: 9px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Presets Grid */
.deposit-presets-grid, .deposit-package-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
  width: 100%;
}
.dep-preset-card, .deposit-package {
  position: relative;
  min-height: 72px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 16px;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
  color: #fff;
}

.dep-preset-card:hover, .deposit-package:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 107, 34, 0.5);
  background: rgba(255, 107, 34, 0.1);
}
.dep-preset-card.active, .deposit-package.is-selected {
  border-color: #ff7623;
  background: linear-gradient(145deg, rgba(255, 118, 35, 0.24), rgba(255, 118, 35, 0.08));
  box-shadow: 0 0 20px rgba(255, 118, 35, 0.25);
  transform: translateY(-2px);
}
.dep-preset-val {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
}
.dep-preset-diamonds, .deposit-package b {
  font-size: 12px;
  font-weight: 700;
  color: #ff9d5c;
}
.deposit-package span {
  font-size: 11px;
  color: #a4a5b1;
}

/* Badges on Presets */
.dep-preset-tag {
  position: absolute;
  top: -6px;
  right: -4px;
  padding: 2px 5px;
  border-radius: 6px;
  font-size: 8px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.dep-preset-tag.bonus {
  background: #2ebd85;
  color: #fff;
}
.dep-preset-tag.hot {
  background: linear-gradient(135deg, #ff5500, #ff1a1a);
  color: #fff;
}
.dep-preset-tag.vip {
  background: linear-gradient(135deg, #a855f7, #6366f1);
  color: #fff;
}
.dep-preset-tag.max {
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  color: #fff;
}

/* Custom Input Box */
.deposit-custom-input-box {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 10px 12px;
  margin-bottom: 14px;
}
.deposit-input-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: #8c8f9f;
  margin-bottom: 6px;
}
.deposit-calc-preview {
  color: #a4a6b5;
  font-size: 11px;
}
.deposit-calc-preview strong {
  color: #35d5a1;
}
.deposit-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.deposit-input-row input {
  flex: 1;
  height: 38px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 9px;
  padding: 0 12px;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  outline: none;
  transition: border-color 0.2s ease;
}
.deposit-input-row input:focus {
  border-color: #ff7623;
  box-shadow: 0 0 10px rgba(255, 118, 35, 0.2);
}
.deposit-input-currency {
  font-size: 16px;
  font-weight: 800;
  color: #ff9d5c;
  padding-right: 4px;
}

/* Stars Intro */
.deposit-stars-intro {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 180, 0, 0.08);
  border: 1px solid rgba(255, 180, 0, 0.2);
  border-radius: 14px;
  padding: 11px 14px;
  margin-bottom: 14px;
  text-align: left;
}
.stars-intro-icon {
  font-size: 24px;
}
.stars-intro-text b {
  display: block;
  font-size: 13px;
  color: #ffc43d;
}
.stars-intro-text small {
  display: block;
  font-size: 11px;
  color: #c7a456;
  margin-top: 2px;
}

/* Submit Button */
.deposit-submit-btn {
  width: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.02em;
  border-radius: 14px;
  background: linear-gradient(135deg, #ff7e2b, #ff4e18);
  box-shadow: 0 8px 24px rgba(255, 85, 24, 0.35);
  margin-top: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.deposit-submit-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(255, 85, 24, 0.45);
}
.deposit-submit-btn:active {
  transform: translateY(1px);
}

/* Security Badge */
.deposit-security-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #6d7182;
  font-size: 10px;
  font-weight: 600;
  margin-top: 14px;
}
.deposit-security-badge .sec-icon {
  font-size: 11px;
  color: #35d5a1;
}

.deposit-packages-loading { grid-column:1 / -1; color:#9b9ba8; font-size:12px; padding:16px 4px; }
.deposit-security-line { width:100%; display:flex; align-items:center; justify-content:center; gap:7px; color:#a3a5b1; font-size:10px; font-weight:700; }
.deposit-security-dot { width:7px; height:7px; border-radius:50%; background:#54d99b; box-shadow:0 0 10px rgba(84,217,155,.55); }
.deposit-status { min-height:18px; margin:4px 0 0; color:#aeb0bd; font-size:11px; line-height:1.45; }
.deposit-status.is-loading,.deposit-status.is-pending { color:#ffd28b; }
.deposit-status.is-success { color:#76e8aa; }
.deposit-status.is-error { color:#ff817b; }
.deposit-verify-btn { width:100%; min-height:42px; border:1px solid rgba(255,143,63,.45); border-radius:12px; background:rgba(255,106,0,.12); color:#ffc08b; font:inherit; font-size:11px; font-weight:900; letter-spacing:.06em; cursor:pointer; }
.deposit-verify-btn[hidden] { display:none; }
.deposit-verify-btn:disabled { opacity:.6; }
.no-balance-deposit-btn { width:100%; min-height:46px; margin-top:10px; display:flex; align-items:center; justify-content:center; gap:8px; border:1px solid rgba(255,151,76,.45); background:linear-gradient(120deg,#ff7b31,#f04b1d); color:#fff; font-size:11px; font-weight:900; letter-spacing:.04em; }
.withdraw-field { display:flex; flex-direction:column; gap:7px; margin:12px 0; color:#c7c7d0; font-size:12px; text-align:left; }
.withdraw-field input { width:100%; min-height:44px; padding:0 12px; border:1px solid rgba(255,255,255,.14); border-radius:12px; background:rgba(0,0,0,.35); color:#fff; font:inherit; }

.modal-backdrop.active .modal-card {
  transform: scale(1);
}

.modal-icon-bubble {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  margin-bottom: 14px;
}

.modal-icon-bubble.win {
  background: rgba(16, 185, 129, 0.2);
  border: 1px solid rgba(16, 185, 129, 0.5);
  box-shadow: 0 0 25px rgba(16, 185, 129, 0.4);
}

.modal-icon-bubble.lose {
  background: rgba(239, 68, 68, 0.2);
  border: 1px solid rgba(239, 68, 68, 0.5);
  box-shadow: 0 0 25px rgba(239, 68, 68, 0.4);
}

.modal-icon-bubble.warning {
  background: rgba(245, 158, 11, 0.2);
  border: 1px solid rgba(245, 158, 11, 0.5);
  box-shadow: 0 0 25px rgba(245, 158, 11, 0.4);
}

.modal-title {
  font-size: 19px;
  font-weight: 900;
  letter-spacing: -0.3px;
  color: #fff;
}

.modal-desc {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 6px 0 18px 0;
  line-height: 1.45;
  font-weight: 500;
}

.modal-reward-highlight {
  font-size: 28px;
  font-weight: 900;
  color: #34d399;
  text-shadow: 0 0 20px rgba(16, 185, 129, 0.5);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.modal-btn-row {
  width: 100%;
  display: flex;
  gap: 10px;
}

/* ═══════════════════════════════════════════════════════════════
   PREMIUM BUTTON SYSTEM (.btn-primary, .btn-secondary, Modal CTAs)
   ═══════════════════════════════════════════════════════════════ */

.btn-primary {
  width: 100%;
  height: 52px;
  border-radius: 16px;
  background: linear-gradient(180deg, #ff5500 0%, #d93d00 100%);
  border: 1px solid rgba(255, 85, 0, 0.5);
  border-top: 1px solid rgba(255, 255, 255, 0.35);
  color: #ffffff;
  font-family: var(--font-main);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 8px 24px rgba(255, 85, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  outline: none;
  position: relative;
  overflow: hidden;
}

.btn-primary::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.6s ease;
}

.btn-primary:hover::after {
  left: 100%;
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(255, 85, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  filter: brightness(1.05);
}

.btn-primary:active {
  transform: scale(0.97);
  box-shadow: 0 4px 12px rgba(255, 85, 0, 0.3);
}

/* Win modal special emerald victory button */
.btn-primary.btn-win {
  background: linear-gradient(180deg, #00c978 0%, #009e5b 100%);
  border-color: rgba(0, 201, 120, 0.5);
  border-top: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 8px 24px rgba(0, 201, 120, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.btn-primary.btn-win:hover {
  box-shadow: 0 10px 28px rgba(0, 201, 120, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.btn-secondary {
  height: 52px;
  border-radius: 16px;
  background: rgba(26, 27, 36, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  color: #c5c7d8;
  font-family: var(--font-main);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  outline: none;
}

.btn-secondary:hover {
  background: rgba(36, 38, 50, 0.98);
  border-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  transform: translateY(-1px);
}

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

/* ═══════════════════════════════════════════════════════════════
   MOBILE MINI APP ERGONOMICS & PRODUCTION OPTIMIZATIONS
   ═══════════════════════════════════════════════════════════════ */

/* 1. Touch targets and responsive manipulation */
button, 
.nav-item, 
.game-card, 
.ctrl-chip, 
.mines-tile, 
.btn-game-cta, 
.preview-btn, 
.tg-btn-icon,
.profile-action-btn,
.ref-share-cta-btn,
.ref-copy-btn,
.ref-copy-icon-btn,
.pwc-btn,
.target-mult-pill,
.step-chip-btn {
  touch-action: manipulation;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* 2. Prevent iOS Safari auto-zoom on input focus */
input, select, textarea {
  font-size: 16px !important;
}

.ctrl-bet-input {
  font-size: 26px !important;
}

/* 3. Smooth momentum scrolling with no overscroll rubber-band artifacts */
.app-content {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  scroll-behavior: smooth;
}

/* 4. Compact vertical scaling on mobile screens and viewports */
@media (max-width: 480px), (max-height: 890px) {
  .game-header-bar {
    padding: 2px 0 8px 0;
  }
  .game-header-title {
    font-size: 18px;
  }
  .game-back-pill {
    width: 36px;
    height: 36px;
  }
  .game-header-balance {
    padding: 5px 12px;
  }
  .game-header-avatar {
    width: 32px;
    height: 32px;
    font-size: 13px;
  }
  
  /* Mines compact */
  .game-ctrl-grid {
    gap: 6px;
    margin-bottom: 6px;
  }
  .ctrl-card {
    padding: 7px 10px 5px 10px;
    border-radius: 14px;
  }
  .ctrl-val-row {
    margin: 1px 0 3px 0;
  }
  .ctrl-bet-input, .ctrl-bombs-display {
    font-size: 20px !important;
  }
  .ctrl-chips-row {
    gap: 4px;
  }
  .ctrl-chip {
    padding: 4px 0;
    font-size: 10.5px;
    border-radius: 7px;
  }
  .game-stats-trio {
    gap: 6px;
    margin-bottom: 6px;
  }
  .gst-card {
    padding: 5px 8px;
    border-radius: 12px;
  }
  .gst-val {
    font-size: 12.5px;
  }
  .mult-strip-wrap {
    margin-bottom: 6px;
    padding: 0;
  }
  .mult-pill {
    padding: 3px 8px;
    font-size: 10.5px;
    border-radius: 7px;
  }
  .mines-stage-card {
    padding: 6px;
    margin-bottom: 6px;
    border-radius: 14px;
  }
  .mines-board {
    gap: 4px;
    aspect-ratio: 1 / 0.64;
  }
  .mines-tile {
    border-radius: 7px;
    font-size: 17px;
  }
  .btn-game-cta {
    height: 48px;
    font-size: 15px;
    border-radius: 14px;
    margin-top: 2px;
  }

  /* Crash compact */
  .crash-arena-card {
    height: 224px;
    margin-bottom: 8px;
    border-radius: 16px;
  }
  .crash-hero-mult {
    font-size: 42px;
  }

  /* Coin compact */
  .coin-arena-card {
    min-height: 290px;
    height: 290px;
    margin-bottom: 12px;
  }
  .coin-3d {
    width: 190px;
    height: 190px;
  }

  /* Upgrade compact */
  .upgrade-main-card {
    padding: 10px 12px 14px 12px;
    margin-bottom: 8px;
    border-radius: 16px;
  }
  .upgrade-wheel-box {
    width: min(280px, 80vw);
    height: min(280px, 80vw);
    margin: 6px auto 12px 0;
  }
  .upgrade-wheel-disc {
    width: min(258px, 74vw);
    height: min(258px, 74vw);
  }
  .wheel-obsidian-hub {
    width: min(170px, 49vw);
    height: min(170px, 49vw);
  }
  .hub-main-text {
    font-size: 30px;
  }
  .upgrade-compare-row {
    margin-bottom: 8px;
  }
  .compare-capsule {
    padding: 6px 8px;
  }
  .upgrade-step-card {
    padding: 10px 12px;
    margin-bottom: 6px;
    border-radius: 14px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   TAB 2: БОНУСЫ (BONUSES) — HIGH-END LUXURY FINTECH CASINO SYSTEM
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Common Card Header Styles ─── */
.card-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.card-title-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.icon-circle {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.icon-circle.orange-glow {
  background: rgba(255, 94, 0, 0.12);
  border: 1px solid rgba(255, 94, 0, 0.28);
  box-shadow: 0 0 12px rgba(255, 94, 0, 0.2);
}

.icon-circle.fire-glow {
  background: rgba(255, 140, 0, 0.12);
  border: 1px solid rgba(255, 140, 0, 0.28);
  box-shadow: 0 0 12px rgba(255, 140, 0, 0.2);
}

.card-title-text {
  display: flex;
  flex-direction: column;
}

.card-main-title {
  font-size: 15px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.2px;
}

.card-sub-title {
  font-size: 11px;
  color: #7d8196;
}

.card-right-tag {
  font-size: 10px;
  font-weight: 900;
  color: #00d2ff;
  background: rgba(0, 210, 255, 0.1);
  border: 1px solid rgba(0, 210, 255, 0.25);
  padding: 3px 8px;
  border-radius: 20px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.streak-step-badge {
  font-size: 11px;
  font-weight: 800;
  color: #ffaa33;
  background: rgba(255, 170, 51, 0.1);
  border: 1px solid rgba(255, 170, 51, 0.25);
  padding: 3px 9px;
  border-radius: 12px;
}

/* ─── 1. HERO HOURLY BONUS CARD ─── */
.bonus-hero-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(22, 23, 33, 0.9) 0%, rgba(13, 14, 21, 0.96) 100%);
  border: 1px solid rgba(255, 100, 20, 0.22);
  border-radius: 20px;
  padding: 16px 18px;
  margin-bottom: 12px;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.bonus-glow-backdrop {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: 220px;
  height: 150px;
  background: radial-gradient(circle, rgba(255, 94, 0, 0.25) 0%, transparent 70%);
  pointer-events: none;
}

.bonus-hero-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  position: relative;
  z-index: 2;
}

.bonus-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 94, 0, 0.12);
  border: 1px solid rgba(255, 94, 0, 0.3);
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 900;
  color: #ff8c00;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.badge-dot {
  width: 6px;
  height: 6px;
  background: #ff5500;
  border-radius: 50%;
  box-shadow: 0 0 8px #ff5500;
  animation: pulseDot 1.5s infinite;
}

@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.8); }
}

.bonus-reward-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(0, 201, 120, 0.1);
  border: 1px solid rgba(0, 201, 120, 0.28);
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  color: #9ee6c4;
}

.bonus-reward-chip strong {
  color: #00e68a;
  font-weight: 900;
  text-shadow: 0 0 8px rgba(0, 230, 138, 0.4);
}

/* Artwork Scene with 3D SVG Gift Box & Particles */
.bonus-scene-container {
  display: flex;
  align-items: center;
  gap: 18px;
  background: rgba(8, 9, 14, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  padding: 12px 14px;
  margin-bottom: 14px;
  position: relative;
  z-index: 2;
  cursor: pointer;
  user-select: none;
  transition: background 0.2s, border-color 0.2s;
}

.bonus-scene-container:hover {
  background: rgba(14, 15, 22, 0.7);
  border-color: rgba(255, 94, 0, 0.25);
}

.bonus-box-visual {
  position: relative;
  width: 82px;
  height: 82px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bonus-radial-flare {
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(255, 94, 0, 0.35) 0%, transparent 70%);
  filter: blur(8px);
  pointer-events: none;
}

.bonus-box-3d {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: floatBox 3.5s ease-in-out infinite;
}

@keyframes floatBox {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-4px) rotate(1.5deg); }
}

.gift-box-svg {
  filter: drop-shadow(0 8px 16px rgba(255, 60, 0, 0.45));
}

.box-sparkle {
  position: absolute;
  color: #ffe600;
  font-size: 13px;
  font-weight: 900;
  text-shadow: 0 0 8px #ffe600;
  pointer-events: none;
  animation: sparkleTwinkle 2s infinite ease-in-out;
}

.box-sparkle.s1 { top: -2px; left: 8px; animation-delay: 0.2s; }
.box-sparkle.s2 { bottom: 6px; right: 4px; animation-delay: 1.1s; }

@keyframes sparkleTwinkle {
  0%, 100% { opacity: 0.2; transform: scale(0.7); }
  50% { opacity: 1; transform: scale(1.2); }
}

.box-gem {
  position: absolute;
  font-size: 14px;
  filter: drop-shadow(0 0 8px rgba(0, 210, 255, 0.8));
  pointer-events: none;
  animation: gemBob 2.8s infinite ease-in-out;
}

.box-gem.g1 { top: 6px; right: -4px; animation-delay: 0.4s; }
.box-gem.g2 { bottom: -2px; left: 2px; animation-delay: 1.6s; }

@keyframes gemBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

/* Digital Countdown Block */
.bonus-timer-block {
  flex: 1 1 0%;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.bonus-timer-label {
  font-size: 11px;
  font-weight: 800;
  color: #7b8097;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}

.bonus-timer-digits {
  font-family: var(--font-main);
  font-size: 26px;
  font-weight: 900;
  color: #ffaa33;
  letter-spacing: 1px;
  text-shadow: 0 0 16px rgba(255, 170, 51, 0.4);
  line-height: 1.15;
  margin-bottom: 8px;
}

.bonus-timer-progress {
  width: 100%;
}

.bonus-progress-track {
  width: 100%;
  height: 5px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  overflow: hidden;
}

.bonus-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #ff5e00 0%, #ffaa00 100%);
  border-radius: 3px;
  transition: width 0.5s ease;
  box-shadow: 0 0 10px rgba(255, 94, 0, 0.6);
}

/* Claim Button */
.bonus-claim-btn {
  width: 100%;
  padding: 13px 16px;
  border-radius: 14px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.bonus-claim-btn:disabled {
  background: rgba(20, 22, 30, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #686c82;
  cursor: not-allowed;
  box-shadow: none;
}

.bonus-claim-btn:not(:disabled) {
  background: linear-gradient(135deg, #00c978 0%, #009e5b 100%);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #ffffff;
  cursor: pointer;
  box-shadow: 0 4px 22px rgba(0, 201, 120, 0.5);
  animation: pulseClaimBtn 1.8s infinite ease-in-out;
}

.bonus-claim-btn:not(:disabled):active {
  transform: scale(0.97);
}

@keyframes pulseClaimBtn {
  0%, 100% { box-shadow: 0 4px 20px rgba(0, 201, 120, 0.45); }
  50% { box-shadow: 0 4px 30px rgba(0, 201, 120, 0.8); }
}

/* ─── 2. PROMOCODE CARD ─── */
.promocode-card {
  position: relative;
  background: linear-gradient(145deg, rgba(20, 21, 30, 0.9) 0%, rgba(12, 13, 19, 0.96) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 16px 18px;
  margin-bottom: 12px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.promocode-input-wrapper {
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  background: rgba(8, 9, 14, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 5px 6px 5px 14px;
  gap: 8px;
  margin-bottom: 12px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.4);
}

.promocode-input-wrapper:focus-within {
  border-color: var(--color-orange);
  box-shadow: 0 0 16px rgba(255, 94, 0, 0.3), inset 0 2px 5px rgba(0, 0, 0, 0.5);
}

.promocode-input {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  width: auto !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  color: #ffffff !important;
  font-family: inherit;
  font-size: 13.5px !important;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 8px 0 !important;
  margin: 0 !important;
  text-transform: uppercase;
}

.promocode-input::placeholder {
  color: #55586d;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2px;
  text-transform: none;
}

.promocode-submit-btn {
  flex-shrink: 0;
  background: linear-gradient(135deg, #ff5e00 0%, #e03b00 100%);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 10px;
  color: #ffffff;
  padding: 10px 18px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.3px;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(255, 94, 0, 0.35);
  transition: transform 0.15s ease, filter 0.15s ease;
  white-space: nowrap;
}

.promocode-submit-btn:hover {
  filter: brightness(1.1);
}

.promocode-submit-btn:active {
  transform: scale(0.95);
}

/* Quick Chips */
.promo-quick-chips {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.chips-hint {
  font-size: 10.5px;
  font-weight: 800;
  color: #656980;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.chips-list {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.promo-chip-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  color: #ced2e6;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.15s ease;
}

.promo-chip-btn .chip-code {
  color: #ffffff;
}

.promo-chip-btn .chip-reward {
  color: #ffaa33;
  font-size: 10.5px;
}

.promo-chip-btn:hover {
  background: rgba(255, 94, 0, 0.12);
  border-color: rgba(255, 94, 0, 0.35);
}

.promo-chip-btn:active {
  transform: scale(0.95);
}

/* ─── 3. DAILY STREAK CARD ─── */
.daily-streak-card {
  position: relative;
  background: linear-gradient(145deg, rgba(20, 21, 30, 0.9) 0%, rgba(12, 13, 19, 0.96) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 16px 18px;
  margin-bottom: 12px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.streak-days-track {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}

.streak-day-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 7px 2px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  text-align: center;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

.streak-day-cell .day-lbl {
  font-size: 8.5px;
  font-weight: 800;
  color: #696e85;
  margin-bottom: 3px;
  text-transform: uppercase;
  letter-spacing: 0.2px;
}

.streak-day-cell .day-ico {
  font-size: 13px;
  line-height: 1;
  margin-bottom: 3px;
}

.streak-day-cell .day-val {
  font-size: 9.5px;
  font-weight: 800;
  color: #abb0c6;
}

.streak-day-cell.completed {
  background: rgba(0, 201, 120, 0.08);
  border-color: rgba(0, 201, 120, 0.3);
}

.streak-day-cell.completed .day-ico {
  color: #00c978;
  font-size: 11px;
  font-weight: 900;
}

.streak-day-cell.completed .day-val {
  color: #00c978;
}

.streak-day-cell.current-day {
  background: linear-gradient(180deg, rgba(255, 94, 0, 0.22) 0%, rgba(20, 16, 22, 0.9) 100%);
  border: 1.5px solid #ff5e00;
  box-shadow: 0 0 16px rgba(255, 94, 0, 0.4);
  cursor: pointer;
  transform: translateY(-1px);
  animation: streakGlow 2s infinite ease-in-out;
}

.streak-day-cell.current-day:active {
  transform: scale(0.94);
}

.streak-day-cell.current-day .active-tag {
  color: #ffaa00;
  font-weight: 900;
}

.streak-day-cell.current-day .gold-val {
  color: #ffffff;
  font-weight: 900;
  text-shadow: 0 0 6px rgba(255, 94, 0, 0.8);
}

.streak-day-cell.jackpot-day {
  border-color: rgba(255, 187, 0, 0.35);
  background: linear-gradient(180deg, rgba(255, 187, 0, 0.09) 0%, rgba(15, 14, 20, 0.7) 100%);
}

.streak-day-cell.jackpot-day .jackpot-lbl {
  color: #ffc400;
  font-weight: 900;
}

.streak-day-cell.jackpot-day .jackpot-val {
  color: #ffc400;
  font-weight: 900;
}

@keyframes streakGlow {
  0%, 100% {
    box-shadow: 0 0 12px rgba(255, 94, 0, 0.35);
    border-color: #ff5e00;
  }
  50% {
    box-shadow: 0 0 20px rgba(255, 94, 0, 0.65);
    border-color: #ffaa33;
  }
}

/* TRASH CASH lobby: one live centerpiece, then a compact game shelf. */
.games-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.game-card {
  min-width: 0;
  min-height: 0;
  padding: 12px;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  border-radius: 17px;
  background: linear-gradient(155deg, rgba(27, 29, 40, .98), rgba(12, 13, 19, .99));
  box-shadow: 0 8px 22px rgba(0, 0, 0, .28), inset 0 1px rgba(255, 255, 255, .045);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.game-card:hover,
.game-card:active {
  transform: translateY(-2px);
  border-color: rgba(255, 111, 40, .42);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .34), 0 0 20px rgba(255, 85, 0, .08);
}

.game-card:focus-visible {
  outline: 2px solid #ff7138;
  outline-offset: 3px;
}

.game-card-preview {
  width: 100%;
  height: 76px;
  border-radius: 13px;
  box-shadow: inset 0 1px rgba(255, 255, 255, .1);
}

.game-card-info {
  min-height: 112px;
  gap: 7px;
}

.game-card-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 8px;
}

.game-card-title {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .02em;
}

.game-rtp-badge {
  font-size: 9px;
  letter-spacing: .03em;
}

.game-badge-chip {
  font-size: 9px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 5px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.game-badge-chip.hot { background: rgba(255, 107, 0, 0.2); color: #ffa726; border: 1px solid rgba(255, 107, 0, 0.4); }
.game-badge-chip.new { background: rgba(255, 196, 0, 0.2); color: #ffd54f; border: 1px solid rgba(255, 196, 0, 0.4); }
.game-badge-chip.live { background: rgba(239, 68, 68, 0.2); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.4); }
.game-badge-chip.vip { background: rgba(168, 85, 247, 0.2); color: #c084fc; border: 1px solid rgba(168, 85, 247, 0.4); }

.game-online-live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  color: #838796;
  font-weight: 600;
}
.game-online-live .live-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 5px rgba(16, 185, 129, 0.9);
  display: inline-block;
  animation: live-pulse 1.8s ease-in-out infinite alternate;
}

.game-multiplier-tag {
  max-width: 100%;
  white-space: normal;
  font-size: 10px;
  padding: 3px 7px;
}

.game-card-desc {
  min-height: 30px;
  margin: 0;
  color: #a5a8b7;
  font-size: 11px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.game-card-footer {
  margin-top: auto;
}

.game-play-btn {
  width: 100%;
  justify-content: center;
  padding: 7px 9px;
  border-radius: 10px;
  font-size: 10px;
  letter-spacing: .08em;
}

.card-theme-crash {
  grid-column: 1 / -1;
  order: -1;
  min-height: 142px;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: minmax(92px, .8fr) minmax(0, 1.2fr);
  align-items: center;
  gap: 10px;
  border-color: rgba(255, 106, 44, .2);
  background:
    radial-gradient(ellipse at 16% 100%, rgba(255, 85, 0, .16), transparent 46%),
    linear-gradient(112deg, #17191f 0%, #10141b 56%, #101018 100%);
}

.card-theme-crash .game-card-preview {
  height: 112px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.card-theme-crash .art-crash-curve-svg {
  inset: 5px 0 0;
  transform: scale(1.1);
}

.card-theme-crash .art-crash-curve-svg path {
  stroke: #ff7138;
}

.card-theme-crash .art-rocket-pod {
  top: 5px;
  right: 3px;
}

.card-theme-crash .art-rocket-ship {
  font-size: 39px;
  filter: drop-shadow(0 0 12px rgba(255, 111, 56, .42));
}

.card-theme-crash .game-card-info {
  min-height: 0;
  padding: 4px 0;
  gap: 8px;
}

.card-theme-crash .game-card-title-row {
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

.card-theme-crash .game-card-title {
  font-size: 18px;
}

.card-theme-crash .game-card-desc {
  min-height: 0;
  font-size: 12px;
}

.card-theme-crash .game-play-btn {
  width: auto;
  min-width: 116px;
  padding: 8px 13px;
  background: linear-gradient(125deg, #ff7138, #e84c14);
  color: #fff;
  border-color: rgba(255, 154, 104, .55);
  box-shadow: 0 5px 16px rgba(240, 81, 24, .2);
}

.section-header {
  margin-bottom: 14px;
}

@media (max-width: 360px) {
  .games-grid { gap: 9px; }
  .game-card { padding: 9px; }
  .game-card-preview { height: 66px; }
  .game-card-info { min-height: 116px; }
  .card-theme-crash { min-height: 128px; grid-template-columns: 82px minmax(0, 1fr); padding: 9px; gap: 6px; }
  .card-theme-crash .game-card-preview { height: 98px; }
  .card-theme-crash .game-card-title { font-size: 16px; }
  .card-theme-crash .game-card-desc { font-size: 11px; }
}

/* Game screens v2: give each mode a composed stage, readable controls and
   enough vertical room for the game itself to be the focus. */
.game-screen#game-mines.active,
.game-screen#game-coin.active,
.game-screen#game-crash.active,
.game-screen#game-upgrade.active {
  display: flex !important;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  padding-bottom: 84px !important;
}
.game-screen .game-header-bar { padding: 2px 0 4px; margin-bottom: 2px; }
.game-screen .game-ctrl-grid,
.game-screen .game-stats-trio,
.game-screen .mult-strip-wrap,
.game-screen .mines-stage-card,
.game-screen .coin-arena-card,
.game-screen .crash-arena-card,
.game-screen .ctrl-card-full,
.game-screen .upgrade-main-card,
.game-screen .upgrade-step-card { margin-bottom: 0; }
.game-screen .ctrl-card,
.game-screen .gst-card,
.game-screen .upgrade-step-card { border-radius: 15px; }
.game-screen .ctrl-card { padding: 10px 11px; }
.game-screen .ctrl-card-label,
.game-screen .gst-label { color: #a1a5b5; font-size: 10px; }
.game-screen .ctrl-chip,
.game-screen .coin-side-pill { min-height: 34px; font-size: 11px; }
.game-screen .gst-card { min-height: 52px; justify-content: center; padding: 7px 9px; }
.game-screen .gst-val { font-size: 14px; }
.game-screen .btn-game-cta { flex: 0 0 52px; margin-top: 0; border-radius: 14px; font-size: 15px; }

#game-mines .game-ctrl-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 8px; }
#game-mines .mines-stage-card {
  display: block;
  flex: none;
  min-height: 0;
  padding: 10px;
  border-radius: 18px;
  border-color: rgba(78,224,161,.18);
  background: radial-gradient(ellipse at 50% 0%,rgba(78,224,161,.09),transparent 58%), linear-gradient(155deg,#141b1b,#101317 72%);
  box-shadow: inset 0 1px rgba(255,255,255,.05), 0 12px 28px rgba(0,0,0,.28);
}
#game-mines .mines-board {
  flex: none;
  width: 100%;
  height: clamp(300px, calc(100vw - 30px), 380px);
  min-height: 0;
  aspect-ratio: 1 / 1;
  grid-template-rows: repeat(5,minmax(0,1fr));
  gap: clamp(5px,1.6vw,8px);
}
.game-screen#game-mines .mines-stage-card { display: block; flex: none; height: auto; min-height: 0; }
.game-screen#game-mines .mines-board {
  display: grid;
  flex: none;
  width: 100%;
  height: clamp(300px, calc(100vw - 30px), 380px);
  min-height: 0;
  aspect-ratio: 1 / 1;
  grid-template-rows: repeat(5,minmax(0,1fr));
}
#game-mines .mines-tile {
  min-width: 0;
  min-height: 0;
  border-radius: 12px;
  font-size: clamp(20px,6vw,27px);
  background: linear-gradient(145deg,#29333a 0%,#20262e 48%,#171c23 100%);
  border: 1px solid rgba(198,230,222,.12);
  box-shadow: inset 0 1px rgba(255,255,255,.075), 0 4px 9px rgba(0,0,0,.24);
}
#game-mines .mines-tile:not(.revealed-gem):not(.revealed-mine)::before {
  content: "";
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(148,220,193,.2);
  box-shadow: 0 0 10px rgba(78,224,161,.12);
}
#game-mines .mines-tile:not(.revealed-gem):not(.revealed-mine):hover {
  border-color: rgba(78,224,161,.5);
  background: linear-gradient(145deg,#2d4143,#202a30 65%,#192126);
}
#game-mines .mines-tile.revealed-gem::before,
#game-mines .mines-tile.revealed-mine::before { display:none; }
#game-mines .mines-tile.revealed-gem { color: #a2ffe0; }
#game-mines .mult-strip { gap: 7px; }
#game-mines .mult-pill { border-radius: 9px; padding: 6px 10px; }

#game-coin .game-ctrl-grid { grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); }
#game-coin .coin-arena-card {
  position: relative;
  flex: 1 0 250px;
  min-height: 250px;
  border-radius: 20px;
  background:
    radial-gradient(circle at 50% 48%,rgba(255,202,112,.2),transparent 25%),
    radial-gradient(circle at 50% 48%,rgba(255,202,112,.07),transparent 58%),
    linear-gradient(145deg,#181a20,#0d1015 76%);
}


#game-crash .crash-arena-card {
  height: 250px;
  border-radius: 20px;
  background:
    radial-gradient(ellipse at 76% 14%,rgba(45,198,221,.1),transparent 35%),
    radial-gradient(ellipse at 18% 95%,rgba(255,120,62,.17),transparent 54%),
    #0b0e13;
}
#game-crash .crash-arena-card::before { height: 154px; opacity: .84; }
#game-crash .crash-hud-center {
  position: absolute;
  top: 34%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 6;
}
#game-crash .crash-pills-row { gap: 7px; padding: 0 0 2px; }
#game-crash .crash-mult-pill { min-width: 52px; text-align: center; border-radius: 9px; }
#game-crash .players-bets-card { border-radius: 16px; }

#game-upgrade .upgrade-main-card {
  width: 100%;
  padding: 12px;
  border-radius: 19px;
  background: radial-gradient(ellipse at 50% 36%,rgba(255,107,0,.08),transparent 44%),linear-gradient(150deg,#171a22,#101217);
  box-shadow: inset 0 1px rgba(255,255,255,.055),0 12px 28px rgba(0,0,0,.3);
}
#game-upgrade .upgrade-wheel-box { width: min(284px, 82vw); height: min(284px, 82vw); margin: 6px auto 14px; }
#game-upgrade .upgrade-wheel-disc { width: min(262px, 76vw); height: min(262px, 76vw); }
#game-upgrade .wheel-obsidian-hub { width: min(172px, 50vw); height: min(172px, 50vw); }
#game-upgrade .upgrade-step-card { padding: 12px; background: linear-gradient(145deg,#181b23,#12141a); }
#game-upgrade .step-num-badge { width: 24px; height: 24px; border-radius: 8px; }
#game-upgrade .step-title { font-size: 12px; letter-spacing: .025em; }
#game-upgrade .step-chip-btn,
#game-upgrade .target-mult-pill { min-height: 44px; border-radius: 11px; }

/* Universal Fair / Provably Fair Removal */
.game-fairness-badge,
.upgrade-badge-status,
.coin-badge-status,
#coin-fair-badge,
#btn-fairness-info,
.round-hash-container,
#modal-provably-fair,
.profile-actions-grid {
  display: none !important;
}

@media (max-width: 480px) {
  .game-screen#game-mines.active,
  .game-screen#game-coin.active,
  .game-screen#game-crash.active,
  .game-screen#game-upgrade.active { gap: 9px; }
  #game-mines .mines-tile { border-radius: 10px; }
  #game-crash .crash-arena-card { height: 240px; }
  #game-upgrade .upgrade-wheel-box { width: min(274px, 78vw); height: min(274px, 78vw); margin: 6px auto 12px; }
  #game-upgrade .upgrade-wheel-disc { width: min(252px, 72vw); height: min(252px, 72vw); }
  #game-upgrade .wheel-obsidian-hub { width: min(166px, 48vw); height: min(166px, 48vw); }
}
@media (max-width: 360px) {
  #game-mines .game-ctrl-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 6px; }
  #game-mines .ctrl-card { padding: 8px; }
  #game-mines .mines-board { gap: 4px; }
  #game-mines .mines-stage-card { padding: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  #game-coin .coin-3d, #game-coin .coin-shadow { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

/* TRASH CASH game identity: a shared obsidian stage with a deliberate accent
   for each game. Accent is used on controls and live values, never as a page fill. */
#game-mines { --game-accent: #4ee0a1; --game-accent-rgb: 78, 224, 161; --game-deep: #123a2c; }
#game-coin { --game-accent: #ffc45c; --game-accent-rgb: 255, 196, 92; --game-deep: #493014; }
#game-crash { --game-accent: #ff783e; --game-accent-rgb: 255, 120, 62; --game-deep: #4a2114; }
#game-upgrade { --game-accent: #ff6b00; --game-accent-rgb: 255, 107, 0; --game-deep: #381504; }

.game-screen { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
.game-header-title {
  font-family: 'Plus Jakarta Sans', var(--font-main);
  font-size: 17px;
  font-weight: 900;
  letter-spacing: .035em;
}
.game-screen .btn-game-cta,
.game-screen .ctrl-bet-input,
.game-screen .hub-main-text,
.game-screen .cc-val { font-family: 'Plus Jakarta Sans', var(--font-main); }

.game-back-pill {
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.game-back-pill:hover { background: rgba(var(--game-accent-rgb), .12); border-color: rgba(var(--game-accent-rgb), .38); }
.game-back-pill:active { transform: scale(.94); }

.game-screen .ctrl-card,
.game-screen .gst-card,
.game-screen .upgrade-step-card,
.game-screen .mines-stage-card,
.game-screen .players-bets-card {
  border-color: rgba(255,255,255,.075);
  background-image: linear-gradient(145deg, rgba(255,255,255,.025), transparent 48%);
}
.game-screen .ctrl-card-label,
.game-screen .gst-label { letter-spacing: .11em; }
.game-screen .ctrl-bet-input,
.game-screen .gst-val.highlight { color: var(--game-accent); }
.game-screen .coin-side-pill.selected,
.game-screen .mult-pill.active,
.game-screen .target-mult-pill.active,
.game-screen .step-chip-btn.active {
  color: var(--game-accent);
  border-color: rgba(var(--game-accent-rgb), .72);
  background: linear-gradient(145deg, rgba(var(--game-accent-rgb), .19), rgba(var(--game-accent-rgb), .07));
  box-shadow: 0 0 18px rgba(var(--game-accent-rgb), .11), inset 0 1px rgba(255,255,255,.06);
}
.game-screen .btn-game-cta {
  background: linear-gradient(115deg, color-mix(in srgb, var(--game-accent) 90%, white), var(--game-accent) 58%, color-mix(in srgb, var(--game-accent) 65%, #101116));
  border: 1px solid rgba(var(--game-accent-rgb), .65);
  color: #101116;
  box-shadow: 0 9px 24px rgba(var(--game-accent-rgb), .17), inset 0 1px rgba(255,255,255,.45);
  text-shadow: 0 1px rgba(255,255,255,.12);
}
.game-screen .btn-game-cta:hover:not(:disabled) { box-shadow: 0 12px 30px rgba(var(--game-accent-rgb), .26), inset 0 1px rgba(255,255,255,.52); }
.game-screen .btn-game-cta:disabled { filter: saturate(.45); opacity: .7; }

/* The wheel and coin are the games' signature objects. Give them depth and
   breathing room while keeping the live arena compact on short phones. */


#game-mines .mines-stage-card { border-color: rgba(78,224,161,.14); }
#game-mines .mines-tile:not(.revealed-gem):not(.revealed-mine) { position: relative; overflow: hidden; }
#game-mines .mines-tile:not(.revealed-gem):not(.revealed-mine)::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(145deg, rgba(255,255,255,.045), transparent 62%); pointer-events: none;
}
#game-mines .mines-chip-btn.active { color: #fff; background: linear-gradient(145deg,#e84c4b,#b8202d); border-color: #ff6a60; box-shadow: 0 0 13px rgba(255,76,75,.22); }

#game-crash .crash-arena-card { border-color: rgba(255,120,62,.2); }
#game-crash .crash-ping-badge { z-index: 5; }
#game-crash .crash-hero-mult { font-variant-numeric: tabular-nums; letter-spacing: -.055em; }
#game-crash .crash-hero-tag { letter-spacing: .16em; }

#game-upgrade .upgrade-main-card { border-color: rgba(255, 107, 0, 0.16); }
#game-upgrade .upgrade-wheel-box { background: transparent; border: 0; filter: drop-shadow(0 12px 28px rgba(255, 107, 0, 0.12)); }
#game-upgrade .needle-glow-tip { background: #ff783e; box-shadow: 0 0 10px #ff783e, 0 0 20px rgba(255,120,62,.75); }

/* Upgrade is the second featured mode in the lobby, so the card balances the
   Crash feature and avoids a stranded tile on the final grid row. */
.card-theme-upgrade {
  grid-column: 1 / -1;
  min-height: 132px;
  padding: 10px 14px;
  display: grid;
  grid-template-columns: minmax(92px,.8fr) minmax(0,1.2fr);
  align-items: center;
  gap: 10px;
  border-color: rgba(66,215,231,.16);
  background: radial-gradient(ellipse at 16% 100%,rgba(66,215,231,.13),transparent 48%), linear-gradient(112deg,#17191f,#10141b 60%,#101018);
}
.card-theme-upgrade .game-card-preview { height: 108px; border: 0; background: transparent; box-shadow: none; }
.card-theme-upgrade .art-wheel-disc { width: 82px; height: 82px; background: conic-gradient(from 0deg, #ff7a00 0 26%, #1e1610 26% 100%); box-shadow: 0 0 25px rgba(255, 107, 0, 0.22), inset 0 0 0 5px #171a22; }
.card-theme-upgrade .art-wheel-center { width: 56px; height: 56px; }
.card-theme-upgrade .game-card-info { min-height: 0; padding: 4px 0; gap: 8px; }
.card-theme-upgrade .game-card-title-row { align-items: center; flex-direction: row; flex-wrap: wrap; justify-content: space-between; }
.card-theme-upgrade .game-card-title { font-size: 18px; }
.card-theme-upgrade .game-card-desc { min-height: 0; font-size: 12px; }
.card-theme-upgrade .game-play-btn { width: auto; min-width: 116px; padding: 8px 13px; color: #fff; background: linear-gradient(135deg, #ff7e2b, #ff5500); border-color: rgba(255, 120, 40, 0.5); box-shadow: 0 5px 16px rgba(255, 107, 0, 0.3); }

@media (max-width: 360px) {
  .card-theme-upgrade { min-height: 124px; grid-template-columns: 78px minmax(0,1fr); padding: 9px; gap: 6px; }
  .card-theme-upgrade .game-card-preview { height: 94px; }
  .card-theme-upgrade .art-wheel-disc { width: 72px; height: 72px; }
  .card-theme-upgrade .art-wheel-center { width: 50px; height: 50px; }
  .card-theme-upgrade .game-card-title { font-size: 16px; }
  .card-theme-upgrade .game-card-desc { font-size: 11px; }
}

/* Upgrade: a clear chance cue, tactile result feedback, and personal history. */
#game-upgrade .upgrade-main-card { position:relative; isolation:isolate; }
#game-upgrade .upgrade-main-card::after { content:""; position:absolute; inset:0; z-index:0; border-radius:inherit; opacity:0; pointer-events:none; transition:opacity .35s ease; }
#game-upgrade .upgrade-main-card > * { position:relative; z-index:1; }
#game-upgrade .upgrade-main-card.is-spinning::after { opacity:1; background:radial-gradient(ellipse at 50% 42%,rgba(255,107,0,.2),transparent 52%); animation:upgrade-energy-pulse .85s ease-in-out infinite alternate; }
#game-upgrade .upgrade-main-card.is-spinning .upgrade-wheel-disc { filter:drop-shadow(0 0 17px rgba(255,107,0,.45)); }
#game-upgrade .upgrade-main-card.is-win { border-color:rgba(103,235,169,.48); box-shadow:inset 0 1px rgba(255,255,255,.07),0 0 28px rgba(69,220,145,.13); }
#game-upgrade .upgrade-main-card.is-loss { border-color:rgba(255,116,105,.3); }
#game-upgrade .upgrade-main-card.is-win .upgrade-wheel-disc { filter:drop-shadow(0 0 20px rgba(103,235,169,.34)); }
#game-upgrade .upgrade-main-card.is-loss .upgrade-wheel-disc { filter:drop-shadow(0 0 16px rgba(255,92,82,.2)); }
#game-upgrade #upgrade-spin-btn[aria-busy="true"] { cursor:progress; filter:saturate(.78); }
.upgrade-fair-note { width:100%; margin:8px 0 0; color:#898d9a; font-size:10px; line-height:1.45; text-align:center; }
.upgrade-recent-card { width:100%; overflow:hidden; padding:13px; border:1px solid rgba(255,255,255,.075); border-radius:16px; background:linear-gradient(145deg,#171a22,#111319); box-shadow:inset 0 1px rgba(255,255,255,.035); }
.upgrade-recent-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:11px; }
.upgrade-recent-heading h2 { margin:3px 0 0; color:#f4f5f8; font-size:14px; font-weight:850; letter-spacing:-.025em; }
.upgrade-recent-eyebrow { color:#8d93a2; font-size:9px; font-weight:850; letter-spacing:.13em; }
.upgrade-recent-live { display:flex; align-items:center; gap:5px; padding:5px 7px; border:1px solid rgba(255,255,255,.08); border-radius:99px; color:#9296a4; font-size:8px; font-weight:850; letter-spacing:.08em; }
.upgrade-recent-live i { width:5px; height:5px; border-radius:50%; background:#47d69c; box-shadow:0 0 8px rgba(71,214,156,.7); }
.upgrade-recent-list { display:grid; gap:6px; }
.upgrade-recent-item { min-width:0; display:grid; grid-template-columns:26px minmax(0,1fr) auto; align-items:center; gap:9px; padding:8px 9px; border:1px solid rgba(255,255,255,.055); border-radius:11px; background:rgba(255,255,255,.025); }
.upgrade-recent-icon { width:24px; height:24px; display:grid; place-items:center; border-radius:8px; font-size:13px; font-weight:900; }
.upgrade-recent-item.is-win .upgrade-recent-icon { color:#8ceab6; background:rgba(69,220,145,.12); }
.upgrade-recent-item.is-loss .upgrade-recent-icon { color:#ff9188; background:rgba(255,92,82,.1); }
.upgrade-recent-info { min-width:0; display:flex; flex-direction:column; gap:2px; }
.upgrade-recent-info b { overflow:hidden; color:#e5e7ec; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.upgrade-recent-info small { color:#858997; font-size:9px; }
.upgrade-recent-amount { color:#d6d8df; font-size:10px; font-variant-numeric:tabular-nums; }
.upgrade-recent-item.is-win .upgrade-recent-amount { color:#82e9b0; }
.upgrade-recent-item.is-loss .upgrade-recent-amount { color:#ff8c84; }
.upgrade-recent-empty { margin:0; padding:13px 8px; color:#858997; font-size:11px; text-align:center; }
@keyframes upgrade-energy-pulse { from { opacity:.45; } to { opacity:1; } }
@media (prefers-reduced-motion: reduce) {
  #game-upgrade .upgrade-main-card.is-spinning::after { animation:none; }
  #game-upgrade .upgrade-main-card.is-spinning .upgrade-wheel-disc { filter:none; }
}

/* ═══════════════════════════════════════════════════════════════
   PROVABLY FAIR SYSTEM & BADGES
   ═══════════════════════════════════════════════════════════════ */

.game-fairness-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.32);
  color: #34d399;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 3px 7px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  vertical-align: middle;
  flex-shrink: 0;
}
.game-fairness-badge:hover {
  background: rgba(16, 185, 129, 0.22);
  border-color: rgba(16, 185, 129, 0.55);
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.35);
  transform: translateY(-1px);
}
.game-fairness-badge:active {
  transform: scale(0.96);
}
.game-fairness-badge svg {
  flex-shrink: 0;
}

/* Modal Card */
.pf-modal-card {
  width: min(100%, 420px);
  max-height: 88vh;
  overflow-y: auto;
  padding: 22px 18px 20px;
  background: radial-gradient(circle at 50% 0%, rgba(16, 185, 129, 0.12), transparent 60%), #121319;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.75), 0 0 30px rgba(16, 185, 129, 0.08);
  position: relative;
  text-align: left;
  align-items: stretch;
}

.pf-header-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding-right: 36px;
}
.pf-bubble {
  width: 44px;
  height: 44px;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 14px;
  flex-shrink: 0;
}
.pf-header-text .modal-title {
  font-size: 17px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
  margin-bottom: 2px;
}
.pf-header-sub {
  font-size: 11px;
  color: #8c8f9f;
  font-weight: 500;
}

/* Tabs */
.pf-tabs-row {
  display: flex;
  gap: 6px;
  background: rgba(255, 255, 255, 0.04);
  padding: 4px;
  border-radius: 12px;
  margin-bottom: 16px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.pf-tab-btn {
  flex: 1;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: #8c8f9f;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}
.pf-tab-btn:hover {
  color: #fff;
}
.pf-tab-btn.active {
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Info Box */
.pf-info-box {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(16, 185, 129, 0.06);
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 11px;
  color: #a7f3d0;
  line-height: 1.45;
  margin-bottom: 14px;
}
.pf-info-icon {
  font-size: 14px;
  flex-shrink: 0;
  margin-top: 1px;
}

/* Fields */
.pf-field-group {
  margin-bottom: 14px;
}
.pf-field-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 700;
  color: #a0a2b0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.pf-badge-active {
  font-size: 9px;
  font-weight: 800;
  color: #34d399;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.3);
  padding: 2px 6px;
  border-radius: 999px;
  letter-spacing: 0.04em;
}
.pf-field-hint {
  font-size: 10px;
  color: #656775;
  margin-top: 4px;
}

.pf-field-input, .pf-field-select {
  width: 100%;
  background: #0d0d12;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: #fff;
  font-size: 12px;
  font-family: var(--font-mono);
  padding: 9px 12px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.pf-field-input:focus, .pf-field-select:focus {
  border-color: #34d399;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
}

.pf-input-copy-wrap, .pf-input-action-wrap {
  display: flex;
  gap: 6px;
  align-items: center;
}
.pf-input-copy-wrap .pf-field-input, .pf-input-action-wrap .pf-field-input {
  flex: 1;
}

.pf-copy-btn, .pf-action-icon-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 9px;
  color: #e5e7eb;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.pf-copy-btn:hover, .pf-action-icon-btn:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}
.pf-copy-btn:active, .pf-action-icon-btn:active {
  transform: scale(0.95);
}

.pf-action-text-btn {
  padding: 0 14px;
  height: 36px;
  background: #10b981;
  border: none;
  border-radius: 9px;
  color: #042f20;
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.pf-action-text-btn:hover {
  background: #34d399;
}
.pf-action-text-btn:active {
  transform: scale(0.96);
}

/* Meta 2-column */
.pf-meta-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}
.pf-meta-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 9px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.pf-meta-title {
  font-size: 10px;
  color: #71717a;
  text-transform: uppercase;
  font-weight: 700;
}
.pf-meta-value {
  font-size: 14px;
  font-weight: 800;
  color: #f4f4f5;
  font-family: var(--font-mono);
}

/* Rotate */
.pf-rotate-wrap {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.pf-rotate-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 11px;
  color: #e4e4e7;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}
.pf-rotate-btn:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}
.pf-rotate-btn:active {
  transform: scale(0.98);
}

.pf-revealed-box {
  margin-top: 10px;
  background: rgba(239, 68, 68, 0.06);
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-radius: 10px;
  padding: 10px 12px;
}
.pf-revealed-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.pf-revealed-title {
  font-size: 11px;
  font-weight: 700;
  color: #fca5a5;
}
.pf-quick-verify-btn {
  background: transparent;
  border: none;
  color: #38bdf8;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}
.pf-revealed-code {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  color: #fecaca;
  word-break: break-all;
  user-select: all;
  -webkit-user-select: all;
}

/* Verifier Form */
.pf-verify-row-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.pf-verify-submit-btn {
  width: 100%;
  margin-top: 6px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  background: linear-gradient(135deg, #10b981, #059669);
  border: none;
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.25);
}
.pf-verify-submit-btn:hover {
  background: linear-gradient(135deg, #34d399, #10b981);
}

.pf-verify-result-box {
  margin-top: 14px;
  background: rgba(16, 185, 129, 0.07);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 12px;
  padding: 12px 14px;
}
.pf-result-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.pf-status-badge {
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 999px;
  letter-spacing: 0.04em;
}
.pf-status-badge.success {
  color: #34d399;
  background: rgba(16, 185, 129, 0.2);
  border: 1px solid rgba(16, 185, 129, 0.4);
}
.pf-status-badge.error {
  color: #f87171;
  background: rgba(239, 68, 68, 0.2);
  border: 1px solid rgba(239, 68, 68, 0.4);
}
.pf-hash-match-label {
  font-size: 10px;
  color: #8c8f9f;
}
.pf-result-detail {
  font-size: 12px;
  color: #f3f4f6;
  line-height: 1.45;
  margin-bottom: 8px;
  background: rgba(0, 0, 0, 0.25);
  padding: 8px 10px;
  border-radius: 8px;
}
.pf-result-hash-check {
  font-size: 10px;
  color: #71717a;
  word-break: break-all;
}
.pf-result-hash-check code {
  display: block;
  font-family: var(--font-mono);
  color: #a1a1aa;
  font-size: 10px;
  margin-top: 2px;
}

/* ═══════════════════════════════════════════════════════════════
   UNIFIED CASHIER MODAL (DEPOSIT, WITHDRAW, PROMO CODES)
   ═══════════════════════════════════════════════════════════════ */
.cashier-top-nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 5px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  margin-bottom: 18px;
}
.cashier-nav-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 8px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;
  color: #8c8f9f;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cashier-nav-tab.active {
  background: linear-gradient(145deg, rgba(255, 107, 34, 0.22), rgba(255, 107, 34, 0.08));
  border-color: rgba(255, 107, 34, 0.5);
  color: #fff;
  box-shadow: 0 2px 10px rgba(255, 107, 34, 0.2);
}
.cashier-nav-tab .cnt-icon {
  font-size: 14px;
}

/* Withdrawal Tab */
.wdr-method-selector {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.wdr-method-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  padding: 10px 6px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.wdr-method-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.15);
}
.wdr-method-card.active {
  background: rgba(0, 230, 118, 0.1);
  border-color: rgba(0, 230, 118, 0.4);
  box-shadow: 0 0 12px rgba(0, 230, 118, 0.15);
}
.wdr-method-icon {
  font-size: 20px;
}
.wdr-method-meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.wdr-method-name {
  font-size: 11px;
  font-weight: 800;
  color: #fff;
}
.wdr-method-sub {
  font-size: 9px;
  color: #8c8f9f;
}

.wdr-quick-chips {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin-bottom: 12px;
}
.wdr-chip {
  padding: 8px 4px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  color: #d1d5db;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: center;
}
.wdr-chip:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
.wdr-chip.active {
  background: rgba(0, 230, 118, 0.15);
  border-color: rgba(0, 230, 118, 0.45);
  color: #34d399;
  font-weight: 800;
}
.wdr-chip-max {
  color: #ff9b55;
}

/* Promo Codes in Cashier Modal */
.promo-sub-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 3px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  margin-bottom: 14px;
}
.promo-sub-btn {
  padding: 8px;
  border-radius: 9px;
  border: none;
  background: transparent;
  color: #8c8f9f;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}
.promo-sub-btn.active {
  background: rgba(255, 179, 0, 0.18);
  color: #fbbf24;
  border: 1px solid rgba(255, 179, 0, 0.35);
  font-weight: 800;
}
.promo-create-desc {
  font-size: 12px;
  color: #9ca3af;
  line-height: 1.4;
  margin-bottom: 12px;
  background: rgba(255, 179, 0, 0.06);
  border: 1px solid rgba(255, 179, 0, 0.15);
  border-radius: 10px;
  padding: 8px 10px;
}
.promo-create-card {
  padding-bottom: 8px;
}
.promo-chip-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.promo-amount-chip, .promo-uses-chip {
  padding: 5px 9px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  color: #d1d5db;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}
.promo-amount-chip.active, .promo-uses-chip.active {
  background: rgba(255, 179, 0, 0.18);
  border-color: rgba(255, 179, 0, 0.45);
  color: #fbbf24;
  font-weight: 800;
}
.promo-cost-summary {
  margin-top: 12px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
}
.pcs-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #9ca3af;
}
.pcs-cost {
  font-size: 15px;
  color: #fbbf24;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.promo-created-result-box {
  margin-top: 14px;
  padding: 12px;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 14px;
  text-align: center;
}
.pcr-badge {
  font-size: 12px;
  font-weight: 800;
  color: #34d399;
  margin-bottom: 8px;
}
.pcr-code-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(0, 0, 0, 0.4);
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.pcr-code {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 1px;
}
.pcr-copy-btn {
  padding: 4px 10px;
  background: linear-gradient(135deg, #ff6b22, #f53d10);
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════
   MINIMALIST PROFILE REDESIGN
   ═══════════════════════════════════════════════════════════════ */
.profile-promo-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(255, 179, 0, 0.12) 0%, rgba(255, 107, 34, 0.08) 100%);
  border: 1px solid rgba(255, 179, 0, 0.25);
  border-radius: 16px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.profile-promo-banner:hover {
  background: linear-gradient(135deg, rgba(255, 179, 0, 0.18) 0%, rgba(255, 107, 34, 0.12) 100%);
  transform: translateY(-1px);
  border-color: rgba(255, 179, 0, 0.4);
}
.profile-promo-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.profile-promo-icon {
  font-size: 22px;
}
.profile-promo-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.profile-promo-title {
  font-size: 13px;
  font-weight: 800;
  color: #fff;
}
.profile-promo-sub {
  font-size: 10px;
  color: #9ca3af;
}
.profile-promo-arrow {
  font-size: 16px;
  color: #fbbf24;
  font-weight: 900;
}

/* Segmented History Switcher */
.profile-history-card {
  background: linear-gradient(180deg, #181922 0%, #101116 100%);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 20px;
  padding: 14px;
  box-shadow: var(--shadow-card);
}
.profile-segmented-nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 3px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  margin-bottom: 12px;
}
.profile-seg-btn {
  padding: 8px 6px;
  border-radius: 9px;
  border: 1px solid transparent;
  background: transparent;
  color: #8c8f9f;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}
.profile-seg-btn.active {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-weight: 800;
}

/* ═══════════════════════════════════════════════════════════════
   PREMIUM 3D MINES ENGINE (ANTIGRAVITY DESIGN & SPATIAL DEPTH)
   ═══════════════════════════════════════════════════════════════ */

/* Bomb Presets Grid (2 rows x 4 cols) */
.mines-chips-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 5px !important;
  margin-top: 6px;
}
.mines-chips-grid .ctrl-chip {
  padding: 6px 0 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-align: center;
}
.mines-chips-grid .ctrl-chip[data-mines="24"] {
  grid-column: span 2;
}
.ctrl-bombs-sub {
  font-size: 13px;
  font-weight: 700;
  color: #8c8f9f;
  margin-left: 4px;
}
#mines-risk-pill {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(16, 185, 129, 0.14);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #34d399;
  letter-spacing: 0.02em;
  transition: all 0.2s ease;
}

/* Action Row (CTA Button + Auto-Pick) */
.mines-action-row {
  display: flex;
  gap: 8px;
  width: 100%;
  align-items: center;
}
.mines-action-row .btn-game-cta {
  flex: 1;
}
.mines-autopick-btn {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: linear-gradient(145deg, #222631, #15181f);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #f3f4f6;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.mines-autopick-btn:hover {
  background: linear-gradient(145deg, #2c3240, #1c212a);
  border-color: rgba(251, 191, 36, 0.5);
  box-shadow: 0 0 16px rgba(251, 191, 36, 0.25);
  transform: translateY(-2px) scale(1.04);
}
.mines-autopick-btn:active {
  transform: scale(0.92);
}

/* Board Shockwave Shake on Detonation */
@keyframes boardShockwave {
  0% { transform: scale(1) translate(0, 0); }
  15% { transform: scale(0.97) translate(-5px, 3px); }
  30% { transform: scale(1.025) translate(4px, -3px); }
  50% { transform: scale(0.99) translate(-3px, 2px); }
  70% { transform: scale(1.01) translate(2px, -1px); }
  100% { transform: scale(1) translate(0, 0); }
}
.mines-board.is-shaking {
  animation: boardShockwave 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

/* 3D Flip Tiles */
#game-mines .mines-board {
  perspective: 700px;
}
#game-mines .mines-tile {
  min-width: 0;
  min-height: 0;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  perspective: 600px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  padding: 0;
}
#game-mines .mines-tile .tile-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.36s cubic-bezier(0.34, 1.56, 0.64, 1);
  border-radius: 12px;
}
#game-mines .mines-tile.is-flipped .tile-inner {
  transform: rotateY(180deg);
}

/* Front & Back Faces */
#game-mines .mines-tile .tile-front,
#game-mines .mines-tile .tile-back {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Tile Front (Unopened Obsidian Glass) */
#game-mines .mines-tile .tile-front {
  background: linear-gradient(155deg, #272d38 0%, #1c212a 50%, #14171f 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 4px 10px rgba(0, 0, 0, 0.35);
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#game-mines .mines-tile .tile-core-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(78, 224, 161, 0.3);
  box-shadow: 0 0 10px rgba(78, 224, 161, 0.2);
  transition: all 0.2s ease;
}
#game-mines .mines-tile:not(.is-flipped):hover .tile-front {
  border-color: rgba(78, 224, 161, 0.6);
  background: linear-gradient(155deg, #303744 0%, #222934 50%, #171c24 100%);
  box-shadow: 0 0 16px rgba(78, 224, 161, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}
#game-mines .mines-tile:not(.is-flipped):hover .tile-core-dot {
  background: #4ee0a1;
  box-shadow: 0 0 12px rgba(78, 224, 161, 0.8);
  transform: scale(1.3);
}
#game-mines .mines-tile:not(.is-flipped):active .tile-front {
  transform: scale(0.92);
}

/* Auto-pick Targeted Flash */
#game-mines .mines-tile.tile-targeted .tile-front {
  border-color: #fbbf24 !important;
  background: linear-gradient(155deg, #443c22, #292415) !important;
  box-shadow: 0 0 24px rgba(251, 191, 36, 0.8), inset 0 0 12px rgba(251, 191, 36, 0.4) !important;
  transform: scale(1.08) !important;
}

/* Tile Back (Revealed Face) */
#game-mines .mines-tile .tile-back {
  transform: rotateY(180deg);
}

/* 💎 REVEALED GEM */
#game-mines .mines-tile.revealed-gem .tile-back {
  background: radial-gradient(circle at 50% 35%, rgba(16, 185, 129, 0.45) 0%, rgba(6, 78, 59, 0.9) 100%);
  border: 1px solid rgba(52, 211, 153, 0.85);
  box-shadow: 0 0 24px rgba(16, 185, 129, 0.5), inset 0 0 14px rgba(16, 185, 129, 0.35);
}
.gem-reveal-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.gem-ico {
  font-size: clamp(22px, 6.5vw, 30px);
  filter: drop-shadow(0 0 10px rgba(52, 211, 153, 0.9));
  animation: gemSpring 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes gemSpring {
  0% { transform: scale(0.4) rotate(-15deg); opacity: 0; }
  60% { transform: scale(1.22) rotate(5deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
.gem-sparkle-halo {
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: radial-gradient(circle, rgba(110, 231, 183, 0.35) 0%, transparent 70%);
  animation: sparklePulse 1.4s infinite alternate ease-in-out;
}
@keyframes sparklePulse {
  0% { opacity: 0.3; transform: scale(0.85); }
  100% { opacity: 0.85; transform: scale(1.15); }
}
.gem-mult-float {
  position: absolute;
  top: -12px;
  background: linear-gradient(135deg, #10b981, #059669);
  color: #ffffff;
  font-size: 10px;
  font-weight: 900;
  padding: 2px 6px;
  border-radius: 999px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
  animation: floatUpFade 0.75s ease-out forwards;
  pointer-events: none;
  z-index: 10;
  white-space: nowrap;
}
@keyframes floatUpFade {
  0% { opacity: 0; transform: translateY(4px) scale(0.7); }
  25% { opacity: 1; transform: translateY(-4px) scale(1.1); }
  100% { opacity: 0; transform: translateY(-24px) scale(0.9); }
}

/* 💣 REVEALED MINE (EXPLODED) */
#game-mines .mines-tile.revealed-mine.hit-mine .tile-back {
  background: radial-gradient(circle at 50% 35%, rgba(239, 68, 68, 0.55) 0%, rgba(127, 29, 29, 0.95) 100%);
  border: 1px solid rgba(248, 113, 113, 0.9);
  box-shadow: 0 0 32px rgba(239, 68, 68, 0.75), inset 0 0 16px rgba(239, 68, 68, 0.45);
}
.mine-explode-anim {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.mine-blast-ring {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid rgba(248, 113, 113, 0.9);
  animation: blastRing 0.5s ease-out forwards;
}
@keyframes blastRing {
  0% { transform: scale(0.3); opacity: 1; }
  100% { transform: scale(1.8); opacity: 0; }
}
.mine-ico {
  font-size: clamp(22px, 6.5vw, 30px);
  filter: drop-shadow(0 0 14px rgba(239, 68, 68, 0.95));
  animation: mineExplodeAnim 0.45s ease-out;
}
@keyframes mineExplodeAnim {
  0% { transform: scale(0.3); }
  40% { transform: scale(1.3); }
  70% { transform: scale(0.9) rotate(8deg); }
  100% { transform: scale(1) rotate(0); }
}

/* Other unexploded mines revealed after loss */
#game-mines .mines-tile.dimmed-mine .tile-back {
  background: rgba(127, 29, 29, 0.35);
  border: 1px solid rgba(239, 68, 68, 0.4);
  opacity: 0.8;
}
.dimmed-bomb-ico {
  font-size: clamp(18px, 5vw, 24px);
  filter: grayscale(0.2) opacity(0.8);
}

/* Ghost gems revealed after loss/cashout */
#game-mines .mines-tile.ghost-gem .tile-back {
  background: rgba(16, 185, 129, 0.1);
  border: 1px dashed rgba(52, 211, 153, 0.35);
}
.ghost-gem-ico {
  font-size: clamp(16px, 4.5vw, 22px);
  opacity: 0.4;
  filter: grayscale(0.3);
}

/* Glowing Adrenaline Cashout Button */
.btn-game-cta.btn-cashout-active {
  background: linear-gradient(135deg, #10b981 0%, #059669 50%, #047857 100%) !important;
  border: 1px solid #34d399 !important;
  color: #ffffff !important;
  font-weight: 900 !important;
  letter-spacing: 0.04em !important;
  box-shadow: 0 0 24px rgba(16, 185, 129, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
  animation: cashoutGlowPulse 1.6s infinite ease-in-out !important;
  position: relative;
  overflow: hidden;
}
.btn-game-cta.btn-cashout-active::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-25deg);
  animation: btnSweep 2.2s infinite ease-in-out;
}
@keyframes btnSweep {
  0% { left: -100%; }
  35%, 100% { left: 160%; }
}
@keyframes cashoutGlowPulse {
  0%, 100% { box-shadow: 0 0 18px rgba(16, 185, 129, 0.4); transform: scale(1); }
  50% { box-shadow: 0 0 32px rgba(52, 211, 153, 0.75); transform: scale(1.015); }
}

/* Dimmed Prompt Button (Select Cell) */
.btn-game-cta.btn-dimmed {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px dashed rgba(78, 224, 161, 0.5) !important;
  color: #4ee0a1 !important;
  box-shadow: none !important;
  cursor: default;
}

/* Multiplier Progression Track Enhancement */
.mult-strip-wrap {
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 2px 0 6px;
}
.mult-strip-wrap::-webkit-scrollbar {
  display: none;
}
#game-mines .mult-strip {
  display: flex;
  gap: 6px;
  align-items: center;
}
#game-mines .mult-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 9px;
  color: #9ca3af;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transition: all 0.25s ease;
  flex-shrink: 0;
}
#game-mines .mult-pill.cleared {
  background: rgba(16, 185, 129, 0.14) !important;
  border-color: rgba(16, 185, 129, 0.45) !important;
  color: #34d399 !important;
}
#game-mines .mult-pill.active {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.35), rgba(6, 78, 59, 0.6)) !important;
  border-color: #34d399 !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.5) !important;
  transform: scale(1.06) !important;
}
.mp-step {
  font-size: 9px;
  opacity: 0.65;
  padding: 1px 4px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
}
.mp-check {
  font-size: 10px;
  color: #34d399;
  font-weight: 900;
}