/* Blackjack Felt Cards Row Layout */
.bj-hand-container {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  width: 100% !important;
}
.bj-cards-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  min-height: 80px !important;
}


/* ============================================================
   GOOGLE MATERIAL SYMBOLS OUTLINED ICON SYSTEM
   ============================================================ */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined' !important;
  font-weight: normal !important;
  font-style: normal !important;
  font-size: 20px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  vertical-align: middle;
  user-select: none;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.material-symbols-outlined.fill {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24 !important;
}

/* Sizing Helpers */
.material-symbols-outlined.icon-xs { font-size: 13px !important; }
.material-symbols-outlined.icon-sm { font-size: 16px !important; }
.material-symbols-outlined.icon-md { font-size: 20px !important; }
.material-symbols-outlined.icon-lg { font-size: 24px !important; }
.material-symbols-outlined.icon-xl { font-size: 30px !important; }
.material-symbols-outlined.icon-2xl { font-size: 38px !important; }

/* Context Colors */
.material-symbols-outlined.color-red { color: #ef4444 !important; }
.material-symbols-outlined.color-green { color: #10b981 !important; }
.material-symbols-outlined.color-blue { color: #38bdf8 !important; }
.material-symbols-outlined.color-gold { color: #f59e0b !important; }
.material-symbols-outlined.color-purple { color: #a855f7 !important; }
.material-symbols-outlined.color-cyan { color: #06b6d4 !important; }
.material-symbols-outlined.color-dark { color: #64748b !important; }
.material-symbols-outlined.color-white { color: #f8fafc !important; }
.material-symbols-outlined.coin-icon { color: #f59e0b !important; font-size: 1.15em; margin: 0 2px; }

/* Navigation and UI icon adjustments */
.tg-nav-icon .material-symbols-outlined { font-size: 22px; }
.nav-tab .material-symbols-outlined { font-size: 17px; margin-right: 5px; }
.home-game-icon .material-symbols-outlined { font-size: 32px; color: #38bdf8; }
.home-cat-pill .material-symbols-outlined { font-size: 17px; margin-right: 5px; }
.admin-subtab-btn .material-symbols-outlined { font-size: 16px; margin-right: 4px; }
.sgl-icon .material-symbols-outlined { font-size: 22px; }
.btn-home-play .material-symbols-outlined { font-size: 16px; }
.subtab-icon .material-symbols-outlined { font-size: 18px; }
.acc-icon .material-symbols-outlined { font-size: 18px; }
.stat-icon .material-symbols-outlined { font-size: 20px; }
.role-pill .material-symbols-outlined { font-size: 14px; margin-left: 4px; }
.val-rank-badge .material-symbols-outlined { font-size: 14px; margin-left: 4px; }
.balance-chip .material-symbols-outlined { font-size: 16px; margin-right: 2px; }
.toast .material-symbols-outlined { font-size: 18px; margin-right: 6px; vertical-align: text-bottom; }

/* ==========================================================================
   UPGRADER // CYBER PROTOCOL — AAA DESIGN SYSTEM
   Modern Dark Glassmorphism, Tactical Cyberpunk, and Telegram WebApp Optimizations
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Rajdhani:wght@500;600;700;800&display=swap');

:root {
  /* Surfaces & Structural Planes */
  --bg-primary: #07080c;
  --bg-secondary: #0c0e15;
  --bg-card: #0d1017;
  --bg-card-hover: #121622;
  --bg-glass: rgba(255, 255, 255, 0.025);
  --bg-glass-heavy: rgba(12, 14, 20, 0.95);
  --bg-input: #080a0f;

  /* Engineered Hairlines */
  --border-glass: rgba(255, 255, 255, 0.065);
  --border-specular: rgba(255, 255, 255, 0.12);
  --border-tactical: rgba(245, 158, 11, 0.25);
  --border-accent: rgba(245, 158, 11, 0.35);

  /* Typography */
  --text-main: #f8fafc;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --font-tactical: 'Inter', -apple-system, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-main: var(--font-body);

  /* Restrained Studio Accents */
  --accent-val-red: #f43f5e;
  --accent-val-red-glow: rgba(244, 63, 94, 0.25);
  --accent-red: #f43f5e;
  --accent-gold: #f59e0b;
  --accent-gold-glow: rgba(245, 158, 11, 0.25);
  --accent-amber: #fbbf24;
  --accent-purple: #8b5cf6;
  --accent-purple-glow: rgba(139, 92, 246, 0.25);
  --accent-cyan: #06b6d4;
  --accent-cyan-glow: rgba(6, 182, 212, 0.25);
  --accent-blue: #3b82f6;
  --accent-green: #10b981;
  --accent-green-glow: rgba(16, 185, 129, 0.25);

  /* Tactile Radii & Grounded Shadows */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --shadow-glass: 0 10px 30px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Base Reset & Smooth Tap Handling */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

input, textarea, select {
  user-select: text !important;
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  pointer-events: auto !important;
  -webkit-touch-callout: default !important;
}

html, body {
  min-height: 100vh;
  background-color: var(--bg-primary);
  color: var(--text-main);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  display: flex;
  flex-direction: column;
  background-color: #07080c;
  background-image:
    radial-gradient(ellipse 90% 45% at 50% 0%, rgba(245, 158, 11, 0.04) 0%, transparent 60%),
    radial-gradient(circle at 100% 100%, rgba(16, 185, 129, 0.02) 0%, transparent 50%),
    linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 32px 32px, 32px 32px;
  background-attachment: fixed;
}

/* Tactical Scrollbar */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track {
  background: var(--bg-primary);
}
::-webkit-scrollbar-thumb {
  background: var(--accent-val-red);
  border-radius: 4px;
}

/* ==========================================================================
   HEADER — TACTICAL CYBER HUD
   ========================================================================== */
.app-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(7, 8, 12, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.55);
  padding: max(10px, env(safe-area-inset-top, 10px)) 16px 10px 16px;
  transition: all 0.2s ease;
}

.header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.user-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: transform 0.15s ease;
}
.user-badge:active {
  transform: scale(0.97);
}

.avatar {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: #0f131d;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 18px;
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.35);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  clip-path: none;
  flex-shrink: 0;
}

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

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

.user-name {
  font-family: var(--font-tactical);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,0.8);
}

.role-pill {
  font-family: var(--font-tactical);
  font-size: 10px;
  padding: 1px 7px;
  border-radius: 4px;
  background: rgba(255, 70, 85, 0.18);
  border: 1px solid var(--accent-val-red);
  color: #ff9aa4;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  box-shadow: 0 0 8px rgba(255, 70, 85, 0.25);
}

.val-rank-badge {
  font-family: var(--font-tactical);
  font-size: 10px;
  padding: 1px 7px;
  border-radius: 4px;
  background: rgba(0, 245, 212, 0.14);
  border: 1px solid var(--accent-cyan);
  color: var(--accent-cyan);
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  box-shadow: 0 0 8px var(--accent-cyan-glow);
}

.level-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.level-text {
  font-family: var(--font-tactical);
  font-size: 12px;
  font-weight: 800;
  color: var(--accent-cyan);
  letter-spacing: 0.6px;
}

.xp-bar-container {
  width: 90px;
  height: 6px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  position: relative;
}

.xp-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-cyan), #3b82f6, var(--accent-cyan));
  background-size: 200% 100%;
  border-radius: 4px;
  transition: width 0.4s ease;
  animation: shimmer 3s infinite linear;
}

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

/* Balances Section */
.balances-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.balance-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  background: rgba(13, 20, 34, 0.85);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border-glass);
  border-radius: 10px;
  font-family: var(--font-tactical);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.5px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: all 0.2s ease;
}

.balance-chip.coins {
  border-color: rgba(245, 158, 11, 0.4);
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.18), rgba(15, 23, 38, 0.9));
  color: #fbbf24;
  box-shadow: 0 2px 10px rgba(245, 158, 11, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.balance-chip.stars {
  border-color: rgba(0, 245, 212, 0.4);
  background: linear-gradient(135deg, rgba(0, 245, 212, 0.16), rgba(15, 23, 38, 0.9));
  color: var(--accent-cyan);
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 245, 212, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.balance-chip.stars:active {
  transform: scale(0.96);
}

.btn-add-stars {
  background: linear-gradient(135deg, #00f5d4, #0284c7);
  color: #07090e;
  border: none;
  border-radius: 5px;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  margin-left: 2px;
  transition: transform 0.15s ease;
}
.btn-add-stars:hover {
  transform: scale(1.1);
}

.daily-drop-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-main);
  border-radius: 10px;
  padding: 6px 10px;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.daily-drop-btn:hover {
  background: rgba(255, 70, 85, 0.2);
  border-color: var(--accent-val-red);
  box-shadow: 0 0 12px var(--accent-val-red-glow);
  transform: translateY(-1px);
}
.daily-drop-btn:active {
  transform: scale(0.92);
}

/* ==========================================================================
   NAVIGATION TABS BAR
   ========================================================================== */
.nav-tabs-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  background: rgba(10, 15, 26, 0.9);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-glass);
  padding: 0 4px;
  width: 100%;
}

.nav-scroll-btn {
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid var(--border-glass);
  color: #fff;
  width: 28px;
  height: 36px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  z-index: 10;
  transition: all 0.15s ease;
  flex-shrink: 0;
  padding: 0;
}
.nav-scroll-btn:hover {
  background: var(--accent-val-red);
  box-shadow: 0 0 12px var(--accent-val-red-glow);
}

.nav-tabs {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  gap: 6px;
  padding: 8px 6px;
  flex: 1;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  cursor: grab;
  user-select: none;
  scrollbar-width: none;
}
.nav-tabs::-webkit-scrollbar {
  display: none;
}

.nav-tabs.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
}

.nav-tab {
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--border-glass);
  color: var(--text-muted);
  padding: 8px 14px;
  border-radius: var(--radius-md);
  font-family: var(--font-tactical);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-tab:hover {
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
  background: rgba(255, 255, 255, 0.07);
}

.nav-tab.active {
  background: linear-gradient(135deg, rgba(255, 70, 85, 0.28), rgba(0, 245, 212, 0.18));
  border-color: var(--accent-val-red);
  color: #fff;
  box-shadow: 0 0 14px var(--accent-val-red-glow), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* ==========================================================================
   MAIN CONTENT & TAB PANES
   ========================================================================== */
/* ==========================================================================
   CASINO RESPONSIVE LAYOUT & SIDEBAR (Photo 1 Desktop + Photo 2 Mobile Drawer)
   ========================================================================== */
.casino-layout-wrapper {
  display: flex;
  width: 100%;
  max-width: 100%;
  margin: 0;
  gap: 20px;
  box-sizing: border-box;
  padding: 12px 16px 24px 16px;
  position: relative;
  align-items: flex-start;
}

.casino-sidebar {
  width: 270px;
  flex-shrink: 0;
  background: #111422;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 16px 12px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: sticky;
  top: 76px;
  max-height: calc(100vh - 96px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
  z-index: 100;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  transition: margin-left 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.22s ease, visibility 0.28s ease, transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.casino-sidebar::-webkit-scrollbar {
  width: 4px;
}
.casino-sidebar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 4px 10px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.sidebar-brand-icon {
  font-size: 20px;
  color: #6366f1;
}
.sidebar-brand-title {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 1px;
  background: linear-gradient(135deg, #ffffff, #94a3b8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.btn-sidebar-close {
  display: none;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #cbd5e1;
  font-size: 16px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

.sidebar-search-box {
  position: relative;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 8px 10px;
  gap: 8px;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.sidebar-search-box:focus-within {
  border-color: #6366f1;
  background: rgba(99, 102, 241, 0.06);
}
.sidebar-search-icon {
  font-size: 14px;
  opacity: 0.6;
}
.sidebar-search-box input {
  background: transparent;
  border: none;
  outline: none;
  color: #f8fafc;
  font-size: 13px;
  width: 100%;
}
.sidebar-search-box input::placeholder {
  color: #64748b;
}

.sidebar-nav-groups {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sidebar-accordion {
  border-radius: 12px;
  overflow: hidden;
  transition: background 0.2s ease;
}
.sidebar-accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  cursor: pointer;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  user-select: none;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.sidebar-accordion-header:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}
.acc-title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.acc-icon {
  font-size: 16px;
}
.acc-name {
  font-size: 13px;
  font-weight: 700;
  color: #e2e8f0;
  letter-spacing: 0.2px;
}
.acc-chevron {
  font-size: 12px;
  color: #64748b;
  transition: transform 0.25s ease;
}
.sidebar-accordion.collapsed .acc-chevron {
  transform: rotate(-90deg);
}
.sidebar-accordion-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 0 6px 8px;
  max-height: 600px;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
  opacity: 1;
}
.sidebar-accordion.collapsed .sidebar-accordion-body {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
  pointer-events: none;
}

.sidebar-game-link {
  display: flex;
  align-items: center;
  padding: 8px 10px;
  gap: 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.18s ease;
  color: #94a3b8;
  font-size: 13px;
  font-weight: 500;
  position: relative;
}
.sidebar-game-link:hover {
  background: rgba(99, 102, 241, 0.12);
  color: #ffffff;
  transform: translateX(3px);
}
.sgl-icon {
  font-size: 15px;
  width: 18px;
  text-align: center;
  flex-shrink: 0;
}
.sgl-title {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sgl-badge {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  color: #cbd5e1;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.sgl-badge.hot {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.3);
}
.sgl-badge.rtp {
  background: rgba(16, 185, 129, 0.18);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.btn-hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: all 0.18s ease;
  flex-shrink: 0;
  margin-right: 10px;
}
.btn-hamburger:hover {
  background: rgba(99, 102, 241, 0.2);
  border-color: rgba(99, 102, 241, 0.4);
}
.btn-hamburger:active {
  transform: scale(0.94);
}
.btn-hamburger.collapsed {
  background: rgba(99, 102, 241, 0.15);
  border-color: rgba(99, 102, 241, 0.35);
}
.btn-hamburger.collapsed .hamburger-bar {
  background: #a5b4fc;
}

.hamburger-bar {
  display: block;
  width: 18px;
  height: 2px;
  background: #e2e8f0;
  border-radius: 2px;
  transition: background 0.18s ease;
}

.main-content {
  flex: 1;
  padding: 0 0 calc(115px + env(safe-area-inset-bottom, 20px)) 0;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* Mobile Drawer Behavior (Photo 2) */
@media (max-width: 991px) {
  .casino-layout-wrapper {
    padding: 8px 10px;
  }
  .casino-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 290px;
    max-width: 82vw;
    height: 100vh;
    border-radius: 0 16px 16px 0;
    background: #0f121e;
    border: none;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 10px 0 40px rgba(0, 0, 0, 0.7);
    z-index: 100000;
  }
  .casino-sidebar.open {
    transform: translateX(0);
  }
  .btn-sidebar-close {
    display: flex;
  }
  .sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 99999;
    display: none;
    opacity: 0;
    transition: opacity 0.25s ease;
  }
  .sidebar-backdrop.open {
    display: block;
    opacity: 1;
  }
  .main-content {
    max-width: 100%;
    padding: 8px 4px calc(110px + env(safe-area-inset-bottom, 20px)) 4px;
  }
  .home-games-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
}

/* Desktop Wide Grid (Photo 1) */
@media (min-width: 992px) {
  .main-content {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 0 80px 0 !important;
  }
  .home-games-grid {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)) !important;
    gap: 16px !important;
  }
  .sidebar-backdrop {
    display: none !important;
  }
  body.sidebar-collapsed .casino-sidebar {
    margin-left: -294px;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
  }
  body.sidebar-collapsed .main-content {
    max-width: 100% !important;
  }
}

.tab-pane {
  display: none;
  animation: fadeIn 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  padding-bottom: 24px;
}
.tab-pane.active {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   GAME CARD / CONTAINER (.game-box)
   ========================================================================== */
.game-box {
  background: linear-gradient(180deg, rgba(17, 24, 39, 0.88), rgba(11, 16, 26, 0.94));
  border: 1px solid var(--border-glass);
  border-top: 1px solid var(--border-specular);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: var(--shadow-glass);
  position: relative;
  overflow: hidden;
  margin-bottom: 16px;
}

.game-box::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent-val-red), var(--accent-cyan), transparent);
}

.game-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.game-title {
  font-family: var(--font-tactical);
  font-size: 19px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 0.8px;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}
.game-title::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-val-red);
  box-shadow: 0 0 10px var(--accent-val-red);
}

/* Bet Controls Console */
.bet-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
  background: rgba(4, 8, 16, 0.65);
  padding: 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-glass);
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.4);
}

.bet-input-row {
  display: flex;
  gap: 8px;
}

.input-bet {
  flex: 1;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
  color: var(--accent-gold);
  font-family: var(--font-tactical);
  font-size: 18px;
  font-weight: 800;
  padding: 8px 12px;
  outline: none;
  letter-spacing: 0.5px;
  transition: border-color 0.2s, box-shadow 0.2s;
  user-select: text !important;
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  cursor: text !important;
  -moz-appearance: textfield;
}

/* Remove default spinner arrows from all bet inputs */
.input-bet::-webkit-outer-spin-button,
.input-bet::-webkit-inner-spin-button,
.input-bet-small::-webkit-outer-spin-button,
.input-bet-small::-webkit-inner-spin-button,
.slot-custom-input::-webkit-outer-spin-button,
.slot-custom-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.input-bet:focus {
  border-color: var(--accent-cyan);
  box-shadow: 0 0 12px var(--accent-cyan-glow);
}

.bet-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}
.bet-input-wrapper .currency-symbol {
  position: absolute;
  left: 10px;
  font-size: 16px;
  pointer-events: none;
  z-index: 2;
}
.bet-input-wrapper .input-bet {
  padding-left: 34px !important;
}

.quick-bets {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  width: 100%;
}
.quick-bets .quick-bet-btn {
  flex: 1;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
}

.quick-bet-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-glass);
  color: var(--text-main);
  border-radius: var(--radius-sm);
  padding: 0 12px;
  font-family: var(--font-tactical);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.15s ease;
}
.quick-bet-btn:hover {
  background: rgba(255, 255, 255, 0.14);
}
.quick-bet-btn.active {
  background: rgba(16, 185, 129, 0.25) !important;
  color: #34d399 !important;
  border-color: #10b981 !important;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.4);
}

/* Primary CTA Actions */
.btn-play-action {
  background: linear-gradient(135deg, #ff4655 0%, #e02838 50%, #b91c1c 100%);
  color: #fff;
  border: none;
  padding: 13px 18px;
  border-radius: var(--radius-md);
  font-family: var(--font-tactical);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(255, 70, 85, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  text-align: center;
}
.btn-play-action:hover {
  box-shadow: 0 6px 26px rgba(255, 70, 85, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transform: translateY(-1px);
}
.btn-play-action:active {
  transform: scale(0.97);
}
.btn-play-action:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn-cashout-action {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  box-shadow: 0 4px 20px rgba(16, 185, 129, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.btn-cashout-action:hover {
  box-shadow: 0 6px 26px rgba(16, 185, 129, 0.65);
}

/* ==========================================================================
   1. CRASH (ROCKET OVERDRIVE)
   ========================================================================== */
.rocket-arena {
  width: 100%;
  height: 240px;
  background: radial-gradient(circle at 50% 90%, #1e1b4b 0%, #09090e 85%);
  border-radius: var(--radius-md);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(168, 85, 247, 0.3);
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
}

.rocket-canvas {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
}

.rocket-multiplier-display {
  position: relative;
  z-index: 10;
  font-family: var(--font-tactical);
  font-size: 52px;
  font-weight: 900;
  text-shadow: 0 0 25px rgba(245, 158, 11, 0.6);
  letter-spacing: 1.5px;
}
.multiplier-win {
  color: var(--accent-gold);
}
.multiplier-crashed {
  color: var(--accent-val-red);
  animation: shake 0.4s ease-in-out;
}

.tamaev-quote-box {
  margin-top: 10px;
  background: rgba(245, 158, 11, 0.08);
  border-left: 3px solid var(--accent-gold);
  padding: 9px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-style: italic;
  color: #fde68a;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

/* ==========================================================================
   2. CASES ARSENAL & CARDS
   ========================================================================== */
.artifacts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

.case-card, .artifact-card {
  background: linear-gradient(180deg, rgba(20, 27, 42, 0.92), rgba(11, 15, 24, 0.96));
  border: 1px solid var(--border-glass);
  border-top: 1px solid var(--border-specular);
  border-radius: var(--radius-lg);
  padding: 14px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.case-card:hover, .artifact-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 70, 85, 0.4);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6), 0 0 15px rgba(255, 70, 85, 0.2);
}

.weekly-case-card {
  border-color: var(--accent-gold) !important;
  background: radial-gradient(circle at top, rgba(245, 158, 11, 0.15) 0%, rgba(17, 24, 39, 0.95) 75%) !important;
  box-shadow: 0 0 25px var(--accent-gold-glow) !important;
}

.case-icon-large {
  font-size: 46px;
  margin: 4px auto 8px auto;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.5));
  transition: transform 0.2s ease;
}
.case-card:hover .case-icon-large {
  transform: scale(1.08) translateY(-2px);
}

.case-name {
  font-family: var(--font-tactical);
  font-size: 15px;
  font-weight: 800;
  text-align: center;
  color: #fff;
  letter-spacing: 0.5px;
}

.case-desc {
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
  margin-bottom: 10px;
  line-height: 1.35;
}

.case-mult-row {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
  width: 100%;
}
.case-mult-row .quick-bet-btn {
  flex: 1;
  padding: 6px 2px;
  font-size: 11px;
  text-align: center;
}

/* ==========================================================================
   INDIVIDUAL CASE THEMES & STYLING FOR EVERY CASE
   ========================================================================== */
.case-card {
  position: relative;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.case-card-badge {
  display: inline-block;
  font-family: var(--font-tactical);
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.6px;
  padding: 2px 7px;
  border-radius: 4px;
  margin-bottom: 8px;
  text-transform: uppercase;
}

/* 1. Initiate Case: Recruit Emerald Tactical */
.case-card.case-theme-case_initiate {
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.12), rgba(10, 25, 20, 0.95) 45%, rgba(6, 15, 12, 0.98)) !important;
  border: 1px solid rgba(16, 185, 129, 0.35) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(16, 185, 129, 0.3) !important;
}
.case-card.case-theme-case_initiate:hover {
  border-color: #10b981 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), 0 0 20px rgba(16, 185, 129, 0.35) !important;
}
.case-card.case-theme-case_initiate .case-card-badge {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.4);
}
.case-card.case-theme-case_initiate .btn-play-action {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.35);
}

/* 2. Vandal Arsenal: Molten Crimson Fire */
.case-card.case-theme-case_vandal {
  background: linear-gradient(180deg, rgba(239, 68, 68, 0.15), rgba(35, 12, 14, 0.95) 45%, rgba(18, 6, 8, 0.98)) !important;
  border: 1px solid rgba(239, 68, 68, 0.4) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(239, 68, 68, 0.35) !important;
}
.case-card.case-theme-case_vandal:hover {
  border-color: #ef4444 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), 0 0 22px rgba(239, 68, 68, 0.4) !important;
}
.case-card.case-theme-case_vandal .case-card-badge {
  background: rgba(239, 68, 68, 0.22);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.45);
}
.case-card.case-theme-case_vandal .btn-play-action {
  background: linear-gradient(135deg, #ef4444, #b91c1c) !important;
  box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
}

/* 3. Phantom Protocol: Cyber Stealth Violet */
.case-card.case-theme-case_phantom {
  background: linear-gradient(180deg, rgba(139, 92, 246, 0.15), rgba(24, 14, 42, 0.95) 45%, rgba(12, 7, 24, 0.98)) !important;
  border: 1px solid rgba(139, 92, 246, 0.35) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(139, 92, 246, 0.3) !important;
}
.case-card.case-theme-case_phantom:hover {
  border-color: #a78bfa !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), 0 0 20px rgba(139, 92, 246, 0.35) !important;
}
.case-card.case-theme-case_phantom .case-card-badge {
  background: rgba(139, 92, 246, 0.2);
  color: #c4b5fd;
  border: 1px solid rgba(139, 92, 246, 0.4);
}
.case-card.case-theme-case_phantom .btn-play-action {
  background: linear-gradient(135deg, #8b5cf6, #6d28d9) !important;
  box-shadow: 0 4px 15px rgba(139, 92, 246, 0.35);
}

/* 4. Kuronami & Oni: Mystic Dual Water/Demon Cyan-Magenta */
.case-card.case-theme-case_kuronami_oni {
  background: linear-gradient(180deg, rgba(6, 182, 212, 0.14), rgba(18, 22, 45, 0.95) 45%, rgba(26, 10, 32, 0.98)) !important;
  border: 1px solid rgba(6, 182, 212, 0.4) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(236, 72, 153, 0.35) !important;
}
.case-card.case-theme-case_kuronami_oni:hover {
  border-color: #06b6d4 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), 0 0 22px rgba(6, 182, 212, 0.4) !important;
}
.case-card.case-theme-case_kuronami_oni .case-card-badge {
  background: linear-gradient(90deg, rgba(6, 182, 212, 0.25), rgba(236, 72, 153, 0.25));
  color: #67e8f9;
  border: 1px solid rgba(6, 182, 212, 0.4);
}
.case-card.case-theme-case_kuronami_oni .btn-play-action {
  background: linear-gradient(135deg, #06b6d4, #d946ef) !important;
  box-shadow: 0 4px 15px rgba(6, 182, 212, 0.35);
}

/* 5. Dragons & Araxys: Magma Amber & Alien Ultra */
.case-card.case-theme-case_dragons_araxys {
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.16), rgba(36, 18, 8, 0.95) 45%, rgba(18, 8, 4, 0.98)) !important;
  border: 1px solid rgba(245, 158, 11, 0.4) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(245, 158, 11, 0.4) !important;
}
.case-card.case-theme-case_dragons_araxys:hover {
  border-color: #f59e0b !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), 0 0 22px rgba(245, 158, 11, 0.4) !important;
}
.case-card.case-theme-case_dragons_araxys .case-card-badge {
  background: rgba(245, 158, 11, 0.22);
  color: #fcd34d;
  border: 1px solid rgba(245, 158, 11, 0.45);
}
.case-card.case-theme-case_dragons_araxys .btn-play-action {
  background: linear-gradient(135deg, #f59e0b, #ea580c) !important;
  box-shadow: 0 4px 15px rgba(245, 158, 11, 0.35);
}

/* 6. Knives Only: Pure Melee Blood Ruby & Damascus */
.case-card.case-theme-case_knives_only {
  background: linear-gradient(180deg, rgba(225, 29, 72, 0.18), rgba(38, 10, 20, 0.95) 45%, rgba(20, 5, 10, 0.98)) !important;
  border: 1px solid rgba(225, 29, 72, 0.45) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(225, 29, 72, 0.4) !important;
}
.case-card.case-theme-case_knives_only:hover {
  border-color: #e11d48 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), 0 0 25px rgba(225, 29, 72, 0.5) !important;
}
.case-card.case-theme-case_knives_only .case-card-badge {
  background: rgba(225, 29, 72, 0.25);
  color: #fda4af;
  border: 1px solid rgba(225, 29, 72, 0.5);
}
.case-card.case-theme-case_knives_only .btn-play-action {
  background: linear-gradient(135deg, #e11d48, #9f1239) !important;
  box-shadow: 0 4px 16px rgba(225, 29, 72, 0.4);
}

/* 7. Champions Collection: 24k Gold Trophy VCT */
.case-card.case-theme-case_champions {
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.22), rgba(42, 28, 6, 0.95) 45%, rgba(22, 14, 2, 0.98)) !important;
  border: 1px solid rgba(251, 191, 36, 0.5) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(251, 191, 36, 0.5) !important;
}
.case-card.case-theme-case_champions:hover {
  border-color: #fbbf24 !important;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.75), 0 0 28px rgba(251, 191, 36, 0.5) !important;
}
.case-card.case-theme-case_champions .case-card-badge {
  background: rgba(251, 191, 36, 0.25);
  color: #fde047;
  border: 1px solid rgba(251, 191, 36, 0.5);
  text-shadow: 0 0 8px rgba(251, 191, 36, 0.5);
}
.case-card.case-theme-case_champions .btn-play-action {
  background: linear-gradient(135deg, #fbbf24, #d97706) !important;
  color: #000 !important;
  font-weight: 900 !important;
  box-shadow: 0 4px 18px rgba(251, 191, 36, 0.45);
}

/* 8. Weekly Tactical Drop: High-Tech Military Supply */
.case-card.case-theme-case_weekly {
  background: linear-gradient(180deg, rgba(59, 130, 246, 0.16), rgba(12, 24, 46, 0.95) 45%, rgba(6, 14, 28, 0.98)) !important;
  border: 1px solid rgba(59, 130, 246, 0.4) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(59, 130, 246, 0.35) !important;
}
.case-card.case-theme-case_weekly:hover {
  border-color: #3b82f6 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), 0 0 22px rgba(59, 130, 246, 0.4) !important;
}
.case-card.case-theme-case_weekly .case-card-badge {
  background: rgba(59, 130, 246, 0.22);
  color: #93c5fd;
  border: 1px solid rgba(59, 130, 246, 0.45);
}

/* 9. Secret Admin Abuse Raid Crate */
.case-card.case-theme-case_admin_abuse {
  background: linear-gradient(180deg, rgba(239, 68, 68, 0.25), rgba(45, 10, 25, 0.95) 45%, rgba(18, 4, 10, 0.98)) !important;
  border: 1.5px solid rgba(239, 68, 68, 0.6) !important;
  box-shadow: 0 0 25px rgba(239, 68, 68, 0.35), inset 0 1px 0 rgba(239, 68, 68, 0.5) !important;
  animation: pulseAdminCrate 2.5s infinite alternate ease-in-out;
}
@keyframes pulseAdminCrate {
  0% { box-shadow: 0 0 15px rgba(239, 68, 68, 0.3); border-color: rgba(239, 68, 68, 0.5); }
  100% { box-shadow: 0 0 30px rgba(239, 68, 68, 0.65), 0 0 15px rgba(251, 191, 36, 0.4); border-color: #ef4444; }
}
.case-card.case-theme-case_admin_abuse:hover {
  border-color: #f87171 !important;
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.8), 0 0 35px rgba(239, 68, 68, 0.7) !important;
}
.case-card.case-theme-case_admin_abuse .case-card-badge {
  background: linear-gradient(90deg, rgba(239, 68, 68, 0.35), rgba(168, 85, 247, 0.35));
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.7);
  font-weight: 900;
  letter-spacing: 1px;
}
.case-card.case-theme-case_admin_abuse .btn-play-action {
  background: linear-gradient(135deg, #ef4444, #991b1b) !important;
  box-shadow: 0 4px 18px rgba(239, 68, 68, 0.5);
  font-weight: 900 !important;
}

/* ==========================================================================
   AUTHENTIC CS2/VALORANT CASE ROULETTE & ITEM DESIGN
   ========================================================================== */
.roulette-viewport {
  position: relative;
  width: 100%;
  height: 155px;
  min-height: 155px;
  flex-shrink: 0 !important;
  overflow: hidden;
  background: radial-gradient(circle at 50% 50%, rgba(20, 27, 44, 0.95), rgba(7, 10, 18, 0.98));
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.9), 0 8px 32px rgba(0, 0, 0, 0.6);
  margin: 12px 0 6px 0;
}

/* Glowing Tactical Center Pointer / Needle */
.roulette-needle, .roulette-center-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 3px;
  background: linear-gradient(180deg, #ff4655, #f59e0b, #ff4655);
  box-shadow: 0 0 14px #ff4655, 0 0 28px rgba(255, 70, 85, 0.8);
  z-index: 30;
  transform: translateX(-50%);
  pointer-events: none;
}
.roulette-needle::before {
  content: '▼';
  position: absolute;
  top: -2px;
  left: 50%;
  transform: translateX(-50%);
  color: #ff4655;
  font-size: 13px;
  filter: drop-shadow(0 0 6px #ff4655);
}
.roulette-needle::after {
  content: '▲';
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  color: #ff4655;
  font-size: 13px;
  filter: drop-shadow(0 0 6px #ff4655);
}

.roulette-track {
  display: flex;
  align-items: center;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  padding: 0;
  will-change: transform;
}

/* Individual Item Card in Roulette Carousel */
.roulette-card, .roulette-item {
  width: 108px;
  height: 136px;
  min-width: 108px;
  max-width: 108px;
  margin: 0 4px;
  border-radius: 10px;
  flex-shrink: 0 !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 8px 6px 6px 6px;
  background: linear-gradient(180deg, rgba(26, 34, 52, 0.95), rgba(12, 16, 27, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  transition: transform 0.2s ease;
  user-select: none;
}

/* Weapon Category Tag at Top of Card */
.roulette-card-weapon {
  font-family: var(--font-tactical);
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #94a3b8;
  background: rgba(0, 0, 0, 0.45);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  max-width: 95%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Weapon Icon Frame with Radial Glow */
.roulette-card-icon {
  font-size: 38px;
  line-height: 1;
  margin: 4px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}

/* Skin Name */
.roulette-card-name {
  font-family: var(--font-tactical);
  font-size: 10.5px;
  font-weight: 800;
  color: #f1f5f9;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  line-height: 1.2;
}

/* Bottom Rarity & Price Bar */
.roulette-card-footer {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 2px;
  padding-top: 4px;
}
.roulette-card-rarity {
  font-family: var(--font-tactical);
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.roulette-card-price {
  font-size: 8.5px;
  font-weight: 700;
  color: #fbbf24;
}

/* Distinct Rarity Theme Tints & Glowing Bottom Accent */
.roulette-card.rarity-standard {
  border-bottom: 3.5px solid #94a3b8;
  box-shadow: inset 0 -12px 18px rgba(148, 163, 184, 0.12);
}
.roulette-card.rarity-select {
  border-bottom: 3.5px solid #38bdf8;
  box-shadow: inset 0 -14px 20px rgba(56, 189, 248, 0.16);
}
.roulette-card.rarity-deluxe {
  border-bottom: 3.5px solid #a855f7;
  box-shadow: inset 0 -14px 20px rgba(168, 85, 247, 0.2);
}
.roulette-card.rarity-premium {
  border-bottom: 3.5px solid #ec4899;
  box-shadow: inset 0 -16px 22px rgba(236, 72, 153, 0.25);
}
.roulette-card.rarity-ultra {
  border-bottom: 3.5px solid #8b5cf6;
  box-shadow: inset 0 -18px 24px rgba(139, 92, 246, 0.28);
}
.roulette-card.rarity-exclusive {
  border: 1px solid rgba(245, 158, 11, 0.4);
  border-bottom: 4px solid #f59e0b;
  box-shadow: inset 0 -18px 25px rgba(245, 158, 11, 0.3), 0 0 15px rgba(245, 158, 11, 0.25);
  background: linear-gradient(180deg, rgba(45, 28, 12, 0.95), rgba(18, 12, 6, 0.98));
}

/* ==========================================================================
   INDIVIDUAL WEAPON SKIN SERIES THEMES (FOR EVERY ITEM IN CASES)
   ========================================================================== */

/* 1. Champions Series: 24k Gold Trophy Aura */
.roulette-card.skin-series-champ,
.case-preview-loot-row.skin-series-champ,
.multi-win-card.skin-series-champ {
  background: radial-gradient(circle at 50% 25%, rgba(251, 191, 36, 0.28), rgba(28, 19, 4, 0.98) 75%) !important;
  border: 1px solid rgba(251, 191, 36, 0.6) !important;
  border-bottom: 4px solid #fbbf24 !important;
  box-shadow: inset 0 -18px 25px rgba(251, 191, 36, 0.35), 0 0 16px rgba(251, 191, 36, 0.3) !important;
}
.skin-series-champ .roulette-card-weapon,
.skin-series-champ .item-series-tag {
  color: #fbbf24 !important;
  text-shadow: 0 0 8px rgba(251, 191, 36, 0.8) !important;
}
.skin-series-champ .roulette-card-icon {
  filter: drop-shadow(0 0 14px rgba(251, 191, 36, 0.9)) !important;
}

/* 2. Elder Flame / Dragon: Magma & Fire Roar */
.roulette-card.skin-series-dragon,
.case-preview-loot-row.skin-series-dragon,
.multi-win-card.skin-series-dragon {
  background: radial-gradient(circle at 50% 25%, rgba(239, 68, 68, 0.32), rgba(34, 8, 8, 0.98) 75%) !important;
  border: 1px solid rgba(239, 68, 68, 0.6) !important;
  border-bottom: 4px solid #ef4444 !important;
  box-shadow: inset 0 -18px 25px rgba(239, 68, 68, 0.35), 0 0 16px rgba(239, 68, 68, 0.35) !important;
}
.skin-series-dragon .roulette-card-weapon,
.skin-series-dragon .item-series-tag {
  color: #f87171 !important;
  text-shadow: 0 0 8px rgba(239, 68, 68, 0.8) !important;
}
.skin-series-dragon .roulette-card-icon {
  filter: drop-shadow(0 0 14px rgba(239, 68, 68, 0.9)) !important;
}

/* 3. Kuronami: Mystic Deep Water Whirl & Chains */
.roulette-card.skin-series-kuro,
.case-preview-loot-row.skin-series-kuro,
.multi-win-card.skin-series-kuro {
  background: radial-gradient(circle at 50% 25%, rgba(6, 182, 212, 0.3), rgba(8, 22, 38, 0.98) 75%) !important;
  border: 1px solid rgba(6, 182, 212, 0.6) !important;
  border-bottom: 4px solid #06b6d4 !important;
  box-shadow: inset 0 -18px 25px rgba(6, 182, 212, 0.35), 0 0 16px rgba(6, 182, 212, 0.3) !important;
}
.skin-series-kuro .roulette-card-weapon,
.skin-series-kuro .item-series-tag {
  color: #67e8f9 !important;
  text-shadow: 0 0 8px rgba(6, 182, 212, 0.8) !important;
}
.skin-series-kuro .roulette-card-icon {
  filter: drop-shadow(0 0 14px rgba(6, 182, 212, 0.9)) !important;
}

/* 4. Oni: Japanese Demon Spirit & Crimson Blossom */
.roulette-card.skin-series-oni,
.case-preview-loot-row.skin-series-oni,
.multi-win-card.skin-series-oni {
  background: radial-gradient(circle at 50% 25%, rgba(236, 72, 153, 0.28), rgba(35, 10, 26, 0.98) 75%) !important;
  border: 1px solid rgba(236, 72, 153, 0.55) !important;
  border-bottom: 4px solid #ec4899 !important;
  box-shadow: inset 0 -18px 25px rgba(236, 72, 153, 0.3), 0 0 16px rgba(236, 72, 153, 0.3) !important;
}
.skin-series-oni .roulette-card-weapon,
.skin-series-oni .item-series-tag {
  color: #f472b6 !important;
  text-shadow: 0 0 8px rgba(236, 72, 153, 0.8) !important;
}
.skin-series-oni .roulette-card-icon {
  filter: drop-shadow(0 0 14px rgba(236, 72, 153, 0.9)) !important;
}

/* 5. Prime: Aerospace High-Tech Gold & Electric Capacitor */
.roulette-card.skin-series-prime,
.case-preview-loot-row.skin-series-prime,
.multi-win-card.skin-series-prime {
  background: radial-gradient(circle at 50% 25%, rgba(56, 189, 248, 0.25), rgba(18, 28, 48, 0.98) 75%) !important;
  border: 1px solid rgba(56, 189, 248, 0.55) !important;
  border-bottom: 4px solid #38bdf8 !important;
  box-shadow: inset 0 -18px 25px rgba(56, 189, 248, 0.3), 0 0 16px rgba(56, 189, 248, 0.3) !important;
}
.skin-series-prime .roulette-card-weapon,
.skin-series-prime .item-series-tag {
  color: #7dd3fc !important;
  text-shadow: 0 0 8px rgba(56, 189, 248, 0.8) !important;
}
.skin-series-prime .roulette-card-icon {
  filter: drop-shadow(0 0 14px rgba(56, 189, 248, 0.9)) !important;
}

/* 6. Reaver / Жнец: Gothic Necrotic Violet & Soul Bell */
.roulette-card.skin-series-reaver,
.case-preview-loot-row.skin-series-reaver,
.multi-win-card.skin-series-reaver {
  background: radial-gradient(circle at 50% 25%, rgba(168, 85, 247, 0.3), rgba(24, 10, 38, 0.98) 75%) !important;
  border: 1px solid rgba(168, 85, 247, 0.55) !important;
  border-bottom: 4px solid #a855f7 !important;
  box-shadow: inset 0 -18px 25px rgba(168, 85, 247, 0.35), 0 0 16px rgba(168, 85, 247, 0.3) !important;
}
.skin-series-reaver .roulette-card-weapon,
.skin-series-reaver .item-series-tag {
  color: #c084fc !important;
  text-shadow: 0 0 8px rgba(168, 85, 247, 0.8) !important;
}
.skin-series-reaver .roulette-card-icon {
  filter: drop-shadow(0 0 14px rgba(168, 85, 247, 0.9)) !important;
}

/* 7. Glitchpop: Cyberpunk Synthwave Magenta-Cyan */
.roulette-card.skin-series-glitch,
.case-preview-loot-row.skin-series-glitch,
.multi-win-card.skin-series-glitch {
  background: radial-gradient(circle at 50% 25%, rgba(236, 72, 153, 0.3), rgba(15, 23, 42, 0.98) 75%) !important;
  border: 1px solid #ec4899 !important;
  border-bottom: 4px solid #06b6d4 !important;
  box-shadow: inset 0 -18px 25px rgba(236, 72, 153, 0.3), 0 0 16px rgba(6, 182, 212, 0.35) !important;
}
.skin-series-glitch .roulette-card-weapon,
.skin-series-glitch .item-series-tag {
  color: #f472b6 !important;
  text-shadow: 0 0 8px rgba(236, 72, 153, 0.8) !important;
}
.skin-series-glitch .roulette-card-icon {
  filter: drop-shadow(0 0 14px rgba(236, 72, 153, 0.9)) !important;
}

/* 8. Araxys: Alien Biomechanic Titanium & Laser Core */
.roulette-card.skin-series-araxys,
.case-preview-loot-row.skin-series-araxys,
.multi-win-card.skin-series-araxys {
  background: radial-gradient(circle at 50% 25%, rgba(16, 185, 129, 0.25), rgba(22, 28, 22, 0.98) 75%) !important;
  border: 1px solid rgba(16, 185, 129, 0.55) !important;
  border-bottom: 4px solid #10b981 !important;
  box-shadow: inset 0 -18px 25px rgba(16, 185, 129, 0.3), 0 0 16px rgba(16, 185, 129, 0.3) !important;
}
.skin-series-araxys .roulette-card-weapon,
.skin-series-araxys .item-series-tag {
  color: #34d399 !important;
  text-shadow: 0 0 8px rgba(16, 185, 129, 0.8) !important;
}
.skin-series-araxys .roulette-card-icon {
  filter: drop-shadow(0 0 14px rgba(16, 185, 129, 0.9)) !important;
}

/* 9. Singularity: Cosmic Event Horizon Black Hole */
.roulette-card.skin-series-singularity,
.case-preview-loot-row.skin-series-singularity,
.multi-win-card.skin-series-singularity {
  background: radial-gradient(circle at 50% 25%, rgba(139, 92, 246, 0.3), rgba(10, 5, 20, 0.98) 75%) !important;
  border: 1px solid rgba(139, 92, 246, 0.55) !important;
  border-bottom: 4px solid #8b5cf6 !important;
  box-shadow: inset 0 -18px 25px rgba(139, 92, 246, 0.35), 0 0 16px rgba(139, 92, 246, 0.3) !important;
}
.skin-series-singularity .roulette-card-weapon,
.skin-series-singularity .item-series-tag {
  color: #a78bfa !important;
  text-shadow: 0 0 8px rgba(139, 92, 246, 0.8) !important;
}
.skin-series-singularity .roulette-card-icon {
  filter: drop-shadow(0 0 14px rgba(139, 92, 246, 0.9)) !important;
}

/* 10. RGX 11z Pro: Dynamic Neon RGB Shift */
.roulette-card.skin-series-rgx,
.case-preview-loot-row.skin-series-rgx,
.multi-win-card.skin-series-rgx {
  background: radial-gradient(circle at 50% 25%, rgba(34, 197, 94, 0.25), rgba(12, 26, 18, 0.98) 75%) !important;
  border: 1px solid rgba(34, 197, 94, 0.55) !important;
  border-bottom: 4px solid #22c55e !important;
  box-shadow: inset 0 -18px 25px rgba(34, 197, 94, 0.3), 0 0 16px rgba(34, 197, 94, 0.3) !important;
}
.skin-series-rgx .roulette-card-weapon,
.skin-series-rgx .item-series-tag {
  color: #4ade80 !important;
  text-shadow: 0 0 8px rgba(34, 197, 94, 0.8) !important;
}
.skin-series-rgx .roulette-card-icon {
  filter: drop-shadow(0 0 14px rgba(34, 197, 94, 0.9)) !important;
}

/* 11. Sovereign / Монарх: Holy Broadsword White-Gold */
.roulette-card.skin-series-sov,
.case-preview-loot-row.skin-series-sov,
.multi-win-card.skin-series-sov {
  background: radial-gradient(circle at 50% 25%, rgba(56, 189, 248, 0.22), rgba(20, 26, 42, 0.98) 75%) !important;
  border: 1px solid rgba(56, 189, 248, 0.5) !important;
  border-bottom: 4px solid #38bdf8 !important;
  box-shadow: inset 0 -18px 25px rgba(56, 189, 248, 0.25), 0 0 16px rgba(56, 189, 248, 0.25) !important;
}
.skin-series-sov .roulette-card-weapon,
.skin-series-sov .item-series-tag {
  color: #bae6fd !important;
  text-shadow: 0 0 8px rgba(56, 189, 248, 0.8) !important;
}
.skin-series-sov .roulette-card-icon {
  filter: drop-shadow(0 0 14px rgba(56, 189, 248, 0.9)) !important;
}

/* 12. Melee / Knives: Damascus Ruby Luxury Frame */
.roulette-card.skin-series-knife,
.case-preview-loot-row.skin-series-knife,
.multi-win-card.skin-series-knife {
  background: radial-gradient(circle at 50% 25%, rgba(225, 29, 72, 0.28), rgba(36, 10, 18, 0.98) 75%) !important;
  border: 1px solid rgba(225, 29, 72, 0.6) !important;
  border-bottom: 4px solid #e11d48 !important;
  box-shadow: inset 0 -18px 25px rgba(225, 29, 72, 0.35), 0 0 16px rgba(225, 29, 72, 0.35) !important;
}
.skin-series-knife .roulette-card-weapon,
.skin-series-knife .item-series-tag {
  color: #fda4af !important;
  text-shadow: 0 0 8px rgba(225, 29, 72, 0.8) !important;
}
.skin-series-knife .roulette-card-icon {
  filter: drop-shadow(0 0 14px rgba(225, 29, 72, 0.9)) !important;
}

/* 13. Standard Issue: Spec-Ops Gray Steel */
.roulette-card.skin-series-standard,
.case-preview-loot-row.skin-series-standard,
.multi-win-card.skin-series-standard {
  background: radial-gradient(circle at 50% 25%, rgba(148, 163, 184, 0.12), rgba(15, 20, 30, 0.98) 75%) !important;
  border: 1px solid rgba(148, 163, 184, 0.3) !important;
  border-bottom: 3.5px solid #94a3b8 !important;
  box-shadow: inset 0 -12px 18px rgba(148, 163, 184, 0.15) !important;
}
.skin-series-standard .roulette-card-weapon,
.skin-series-standard .item-series-tag {
  color: #94a3b8 !important;
}

/* Case Loot Preview Bar & Modal Items */
.case-loot-preview-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 6px 0 8px 0;
  padding: 5px 8px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  overflow-x: auto;
}
.case-loot-preview-item {
  font-size: 16px;
  padding: 2px 4px;
  border-radius: 4px;
  border-bottom: 2px solid;
  flex-shrink: 0;
}
.btn-case-inspect {
  font-family: var(--font-tactical);
  font-size: 11px;
  font-weight: 800;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.1);
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 6px;
  padding: 6px 8px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  width: 100%;
}
.btn-case-inspect:hover {
  background: rgba(56, 189, 248, 0.2);
  border-color: #38bdf8;
}

/* Modal Loot List Grid */
.case-preview-loot-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.case-preview-loot-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  background: linear-gradient(90deg, rgba(20, 27, 44, 0.9), rgba(11, 15, 26, 0.95));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 3.5px solid;
  border-radius: 6px;
  transition: transform 0.15s ease;
}
.case-preview-loot-row:hover {
  transform: translateX(3px);
  background: rgba(255, 255, 255, 0.05);
}

/* ==========================================================================
   MULTI-CASE 10X ROULETTE STAGGERED DRUMS SYSTEM
   ========================================================================== */
.multi-roulette-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 72vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px;
  -webkit-overflow-scrolling: touch;
}
.multi-roulette-container::-webkit-scrollbar {
  width: 5px;
}
.multi-roulette-container::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.25);
  border-radius: 4px;
}

.multi-reel-card {
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  padding: 8px 10px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  flex-shrink: 0 !important;
  min-height: 124px;
  box-sizing: border-box;
}
.multi-reel-card.reel-won {
  border-color: #fbbf24 !important;
  box-shadow: 0 0 16px rgba(251, 191, 36, 0.4), inset 0 0 12px rgba(251, 191, 36, 0.2) !important;
}
.multi-reel-card.reel-won-knife {
  border-color: #ef4444 !important;
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.6), inset 0 0 15px rgba(239, 68, 68, 0.3) !important;
}

.multi-reel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-tactical);
  font-size: 10px;
  font-weight: 800;
  margin-bottom: 6px;
}
.multi-reel-idx {
  background: rgba(255, 255, 255, 0.08);
  padding: 2px 7px;
  border-radius: 4px;
  color: #94a3b8;
  letter-spacing: 0.5px;
}
.multi-reel-status {
  font-size: 10px;
  color: #38bdf8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 70%;
  text-align: right;
}

.multi-reel-viewport {
  position: relative;
  width: 100%;
  height: 84px;
  min-height: 84px;
  max-height: 84px;
  flex-shrink: 0 !important;
  overflow: hidden;
  background: radial-gradient(circle at 50% 50%, rgba(20, 27, 44, 0.98), rgba(7, 10, 18, 1));
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.85);
}

.multi-reel-needle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2.5px;
  background: linear-gradient(180deg, #ff4655, #f59e0b, #ff4655);
  box-shadow: 0 0 8px #ff4655, 0 0 14px rgba(255, 70, 85, 0.8);
  z-index: 25;
  transform: translateX(-50%);
  pointer-events: none;
}
.multi-reel-needle::before {
  content: '▼';
  position: absolute;
  top: -3px;
  left: 50%;
  transform: translateX(-50%);
  color: #ff4655;
  font-size: 10px;
}
.multi-reel-needle::after {
  content: '▲';
  position: absolute;
  bottom: -3px;
  left: 50%;
  transform: translateX(-50%);
  color: #ff4655;
  font-size: 10px;
}

.multi-reel-track {
  display: flex;
  align-items: center;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  padding: 0;
  will-change: transform;
}

/* Compact Card for Multi Drums */
.multi-mini-card {
  width: 76px;
  height: 72px;
  min-width: 76px;
  max-width: 76px;
  margin: 0 3px;
  border-radius: 6px;
  flex-shrink: 0 !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 4px 3px 3px 3px;
  background: linear-gradient(180deg, rgba(26, 34, 52, 0.95), rgba(12, 16, 27, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 2.5px solid #38bdf8;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  user-select: none;
}
.multi-mini-card .multi-mini-weapon {
  font-family: var(--font-tactical);
  font-size: 7px;
  font-weight: 800;
  color: #94a3b8;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 95%;
}
.multi-mini-card .multi-mini-icon {
  width: 100%;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.multi-mini-card .multi-mini-name {
  font-family: var(--font-tactical);
  font-size: 8px;
  font-weight: 700;
  color: #f1f5f9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 95%;
  text-align: center;
}

/* Weapon SVG Wrapper */
.skin-visual-wrapper {
  transition: transform 0.2s ease;
}
.skin-visual-wrapper:hover {
  transform: scale(1.05);
}
.roulette-card-icon .skin-visual-wrapper {
  width: 92px;
  height: 52px;
}

/* ==========================================================================
   3. ENTERPRISES & PASSIVE INCOME
   ========================================================================== */
.biz-income-hero {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(12, 18, 30, 0.95));
  border: 1px solid rgba(16, 185, 129, 0.4);
  border-top: 1px solid rgba(16, 185, 129, 0.7);
  border-radius: var(--radius-lg);
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5), inset 0 0 16px rgba(16, 185, 129, 0.1);
}
.biz-hero-label {
  font-family: var(--font-tactical);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: #94a3b8;
  text-transform: uppercase;
}
.biz-hero-rate {
  font-family: var(--font-tactical);
  font-size: 26px;
  font-weight: 900;
  color: #10b981;
  text-shadow: 0 0 15px rgba(16, 185, 129, 0.45);
  line-height: 1.1;
}
.biz-hero-unclaimed {
  font-size: 12px;
  color: #cbd5e1;
  margin-top: 3px;
}
.btn-collect-profit {
  padding: 12px 18px;
  font-family: var(--font-tactical);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.6px;
  background: linear-gradient(135deg, #10b981, #059669);
  box-shadow: 0 4px 18px rgba(16, 185, 129, 0.45);
  white-space: nowrap;
}

.businesses-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}
.biz-card {
  background: rgba(14, 20, 32, 0.85);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  transition: all 0.2s ease;
}
.biz-card:hover {
  border-color: rgba(56, 189, 248, 0.35);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.4);
}
.biz-card-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.biz-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.biz-info-name {
  font-family: var(--font-tactical);
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 6px;
}
.biz-lvl-badge {
  font-family: var(--font-tactical);
  font-size: 10px;
  font-weight: 800;
  padding: 1px 6px;
  background: rgba(56, 189, 248, 0.2);
  border: 1px solid rgba(56, 189, 248, 0.4);
  color: #38bdf8;
  border-radius: 4px;
}
.biz-info-income {
  font-size: 12px;
  color: #10b981;
  font-weight: 700;
  margin-top: 2px;
}
.btn-biz-upgrade {
  padding: 8px 14px;
  font-family: var(--font-tactical);
  font-size: 12px;
  font-weight: 800;
  background: rgba(56, 189, 248, 0.18);
  border: 1px solid rgba(56, 189, 248, 0.45);
  color: #38bdf8;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}
.btn-biz-upgrade:hover {
  background: rgba(56, 189, 248, 0.35);
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.4);
}

/* ==========================================================================
   4. CYBER LOANS & CREDIT
   ========================================================================== */
.loan-active-card {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.16), rgba(14, 20, 32, 0.95));
  border: 1px solid rgba(239, 68, 68, 0.45);
  border-top: 1px solid rgba(239, 68, 68, 0.7);
  border-radius: var(--radius-md);
  padding: 14px;
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.25);
}
.loan-status-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.loan-badge-active {
  font-family: var(--font-tactical);
  font-size: 11px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 4px;
  background: #ef4444;
  color: #fff;
  letter-spacing: 0.6px;
}
.loan-timer {
  font-family: var(--font-tactical);
  font-size: 13px;
  font-weight: 800;
  color: #fbbf24;
}
.loan-amount-row {
  display: flex;
  justify-content: space-between;
  background: rgba(0, 0, 0, 0.35);
  padding: 8px 12px;
  border-radius: 8px;
  margin-bottom: 8px;
}
.loan-val-due {
  font-family: var(--font-tactical);
  font-size: 17px;
  font-weight: 900;
  color: #ef4444;
}
.loan-packages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.loan-pkg-card {
  background: rgba(14, 20, 32, 0.85);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-md);
  padding: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
  gap: 6px;
  transition: all 0.2s ease;
}
.loan-pkg-card:hover {
  border-color: rgba(56, 189, 248, 0.45);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}
.loan-pkg-amt {
  font-family: var(--font-tactical);
  font-size: 19px;
  font-weight: 800;
  color: #10b981;
}
.btn-take-loan {
  margin-top: 6px;
  padding: 9px;
  font-family: var(--font-tactical);
  font-size: 12px;
  font-weight: 800;
  background: linear-gradient(135deg, #38bdf8, #2563eb);
  color: #fff;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s;
}
.btn-take-loan:active {
  transform: scale(0.96);
}

/* ==========================================================================
   5. CYBER MEMORY GAME
   ========================================================================== */
.memory-status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 10px;
  border: 1px solid var(--border-glass);
  margin-bottom: 14px;
}
.memory-round-pill {
  font-family: var(--font-tactical);
  font-size: 12px;
  font-weight: 800;
  padding: 2px 10px;
  background: rgba(56, 189, 248, 0.2);
  border: 1px solid rgba(56, 189, 248, 0.4);
  color: #38bdf8;
  border-radius: 12px;
}
.memory-stat-val {
  font-family: var(--font-tactical);
  font-size: 16px;
  font-weight: 800;
  color: #10b981;
}

.memory-grid-container {
  display: flex;
  justify-content: center;
  margin: 12px 0;
}
.memory-grid {
  display: grid;
  grid-template-columns: repeat(3, 85px);
  grid-gap: 10px;
  justify-content: center;
}
.memory-cell {
  width: 85px;
  height: 85px;
  border-radius: 14px;
  background: radial-gradient(circle at 35% 35%, #1e293b, #0f172a);
  border: 2px solid rgba(56, 189, 248, 0.3);
  color: #94a3b8;
  font-family: var(--font-tactical);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), inset 0 0 10px rgba(0, 0, 0, 0.6);
  transition: all 0.12s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
}
.memory-cell:active {
  transform: scale(0.93);
}
.memory-cell.cell-flash {
  background: radial-gradient(circle, #60a5fa, #2563eb) !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
  box-shadow: 0 0 30px #38bdf8, 0 0 45px rgba(56, 189, 248, 0.8) !important;
  transform: scale(1.05);
}
.memory-cell.cell-correct {
  background: radial-gradient(circle, #34d399, #059669) !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
  box-shadow: 0 0 30px #10b981 !important;
}
.memory-cell.cell-error {
  background: radial-gradient(circle, #f87171, #dc2626) !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
  box-shadow: 0 0 30px #ef4444 !important;
  animation: shake 0.35s;
}

/* ==========================================================================
   6. SPIKE DEFUSE (MINES)
   ========================================================================== */
.mines-grid-container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  max-width: 340px;
  margin: 14px auto;
}
.mine-cell {
  aspect-ratio: 1;
  background: radial-gradient(circle at 35% 35%, #1e293b, #0f172a);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.1);
  transition: all 0.15s ease;
}
.mine-cell:hover {
  border-color: rgba(0, 245, 212, 0.4);
  transform: translateY(-1px);
}
.mine-cell:active {
  transform: scale(0.92);
}
.mine-cell.revealed-coin {
  background: radial-gradient(circle, rgba(16, 185, 129, 0.25), #064e3b) !important;
  border-color: #10b981 !important;
  box-shadow: 0 0 15px rgba(16, 185, 129, 0.4) !important;
}
.mine-cell.revealed-bomb {
  background: radial-gradient(circle, rgba(239, 68, 68, 0.25), #7f1d1d) !important;
  border-color: #ef4444 !important;
  box-shadow: 0 0 15px rgba(239, 68, 68, 0.4) !important;
}

/* ==========================================================================
   7. PLINKO (GRAVITY DROP)
   ========================================================================== */
.plinko-board-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
  position: relative;
  overflow: hidden;
  width: 100%;
}
.plinko-canvas {
  background: radial-gradient(circle at 50% 10%, #161e2e, #090c14);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-glass);
  box-shadow: inset 0 0 25px rgba(0,0,0,0.7);
}
.plinko-recent-bar {
  display: flex;
  gap: 4px;
  overflow: hidden;
  max-width: 170px;
}
.plinko-recent-item {
  font-family: var(--font-tactical);
  font-size: 11px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  color: #fff;
  animation: fadeIn 0.2s ease;
}

/* ==========================================================================
   8. CARD GAMES (BLACKJACK & POKER)
   ========================================================================== */
.table-felt {
  background: radial-gradient(circle at 50% 50%, #064e3b 0%, #022c22 85%);
  border: 2px solid rgba(245, 158, 11, 0.35);
  border-radius: var(--radius-lg);
  padding: 18px;
  min-height: 240px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: inset 0 0 35px rgba(0,0,0,0.7), 0 8px 30px rgba(0,0,0,0.6);
}
.playing-card {
  width: 50px;
  height: 72px;
  background: #ffffff;
  color: #0f172a;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 4px;
  font-weight: 800;
  box-shadow: 0 4px 10px rgba(0,0,0,0.5);
  transition: transform 0.2s;
}

/* ==========================================================================
   9. CASE BATTLES (DUELS)
   ========================================================================== */
.battle-arena-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
}
.battle-player-column {
  background: rgba(10, 15, 26, 0.7);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-md);
  padding: 12px;
  text-align: center;
}
.battle-winner-box {
  padding: 12px;
  border-radius: var(--radius-md);
  text-align: center;
  font-family: var(--font-tactical);
  font-weight: 800;
  font-size: 15px;
  margin-top: 12px;
}
.battle-winner-box.win-player {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(5, 150, 105, 0.25));
  border: 1px solid #10b981;
  color: #34d399;
}
.battle-winner-box.win-bot {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.25), rgba(185, 28, 28, 0.25));
  border: 1px solid #ef4444;
  color: #f87171;
}

/* ==========================================================================
   10. PROFILE, THEMES & QUICK NAV
   ========================================================================== */
.profile-card {
  background: rgba(14, 20, 34, 0.85);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: var(--shadow-card);
}
.profile-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 14px;
}
.profile-stat-box {
  background: rgba(4, 8, 16, 0.55);
  border: 1px solid var(--border-glass);
  border-radius: 10px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.profile-stat-label {
  font-size: 11px;
  color: var(--text-muted);
}
.profile-stat-value {
  font-family: var(--font-tactical);
  font-size: 16px;
  font-weight: 800;
  color: #fff;
}

.profile-quick-nav-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.btn-profile-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-glass);
  border-radius: 10px;
  color: #fff;
  font-family: var(--font-tactical);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
}
.btn-profile-nav:active {
  background: rgba(0, 245, 212, 0.15);
  border-color: var(--accent-cyan);
  transform: scale(0.97);
}

.theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.theme-card {
  background: rgba(14, 20, 32, 0.8);
  border: 2px solid var(--border-glass);
  border-radius: 10px;
  padding: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.theme-card:hover {
  transform: translateY(-2px);
}
.theme-card.active {
  border-color: var(--accent-val-red);
  box-shadow: 0 0 15px var(--accent-val-red-glow);
}
.theme-swatches {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
}
.theme-swatch {
  width: 14px;
  height: 14px;
  border-radius: 50%;
}
.theme-card-title {
  font-family: var(--font-tactical);
  font-size: 13px;
  font-weight: 800;
  color: #fff;
}
.theme-card-desc {
  font-size: 10px;
  color: var(--text-muted);
}

/* ==========================================================================
   THEME OVERRIDES
   ========================================================================== */
body[data-theme="gold"] {
  --bg-primary: #0e0d0a;
  --bg-secondary: #1a1710;
  --bg-card: rgba(26, 23, 16, 0.94);
  --border-glass: rgba(245, 158, 11, 0.3);
  --border-tactical: rgba(251, 191, 36, 0.35);
  --accent-val-red: #f59e0b;
  --accent-val-red-glow: rgba(245, 158, 11, 0.45);
  --accent-cyan: #fbbf24;
  --accent-cyan-glow: rgba(251, 191, 36, 0.45);
  --accent-gold: #fbbf24;
}

body[data-theme="crimson"] {
  --bg-primary: #12080a;
  --bg-secondary: #1e0d12;
  --bg-card: rgba(30, 13, 18, 0.94);
  --border-glass: rgba(239, 68, 68, 0.3);
  --border-tactical: rgba(220, 38, 38, 0.35);
  --accent-val-red: #ef4444;
  --accent-val-red-glow: rgba(239, 68, 68, 0.5);
  --accent-cyan: #f87171;
  --accent-cyan-glow: rgba(248, 113, 113, 0.4);
}

body[data-theme="violet"] {
  --bg-primary: #0d0816;
  --bg-secondary: #170f26;
  --bg-card: rgba(23, 15, 38, 0.94);
  --border-glass: rgba(168, 85, 247, 0.3);
  --border-tactical: rgba(236, 72, 153, 0.35);
  --accent-val-red: #a855f7;
  --accent-val-red-glow: rgba(168, 85, 247, 0.45);
  --accent-cyan: #ec4899;
  --accent-cyan-glow: rgba(236, 72, 153, 0.4);
}

body[data-theme="arctic"] {
  --bg-primary: #07121b;
  --bg-secondary: #0c1c2a;
  --bg-card: rgba(12, 28, 42, 0.94);
  --border-glass: rgba(6, 182, 212, 0.3);
  --border-tactical: rgba(56, 189, 248, 0.35);
  --accent-val-red: #06b6d4;
  --accent-val-red-glow: rgba(6, 182, 212, 0.45);
  --accent-cyan: #38bdf8;
  --accent-cyan-glow: rgba(56, 189, 248, 0.4);
}

/* ==========================================================================
   TELEGRAM NATIVE BOTTOM NAVIGATION DOCK
   ========================================================================== */
.tg-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999 !important;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: #080a0f;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 10px)) 8px;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.8);
  touch-action: manipulation;
}

.tg-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: transparent;
  border: none;
  color: #8492a6;
  cursor: pointer !important;
  pointer-events: auto !important;
  touch-action: manipulation;
  padding: 5px 2px;
  border-radius: 8px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-tap-highlight-color: transparent;
}
.tg-nav-item * {
  pointer-events: none;
}
.tg-nav-icon {
  font-size: 20px;
  line-height: 1;
  transition: transform 0.2s ease;
}
.tg-nav-label {
  font-family: var(--font-tactical);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.tg-nav-item.active {
  color: #fff;
}
.tg-nav-item.active .tg-nav-icon {
  transform: scale(1.18) translateY(-2px);
  filter: drop-shadow(0 0 10px var(--accent-val-red-glow));
}
.tg-nav-item.active .tg-nav-label {
  color: var(--accent-val-red);
  text-shadow: 0 0 8px var(--accent-val-red-glow);
}
.tg-nav-item:active {
  transform: scale(0.92);
}

/* ==========================================================================
   GAMES HUB POPUP
   ========================================================================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 16px;
}
.modal-overlay.active {
  display: flex;
}
.modal-content {
  background: linear-gradient(180deg, rgba(20, 27, 45, 0.98), rgba(10, 14, 24, 0.99));
  border: 1px solid var(--border-tactical);
  border-radius: var(--radius-xl);
  padding: 18px;
  max-width: 500px;
  width: 100%;
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.8), 0 0 25px rgba(0, 245, 212, 0.15);
  animation: modalPop 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes modalPop {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}
.modal-close {
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 24px;
  cursor: pointer;
  line-height: 1;
}

.games-hub-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.games-hub-title {
  font-family: var(--font-tactical);
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.8px;
}
.games-hub-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.games-hub-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  max-height: 70vh;
  overflow-y: auto;
}
.games-hub-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 12px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.games-hub-card:hover, .games-hub-card:active {
  background: rgba(255, 70, 85, 0.15);
  border-color: var(--accent-val-red);
  transform: translateY(-2px);
  box-shadow: 0 0 14px rgba(255, 70, 85, 0.28);
}
.hub-card-icon {
  font-size: 24px;
  flex-shrink: 0;
}
.hub-card-name {
  font-family: var(--font-tactical);
  font-size: 14px;
  font-weight: 800;
  color: #fff;
}
.hub-card-desc {
  font-size: 10px;
  color: #94a3b8;
}

/* Toast Container */
.toast-container {
  position: fixed;
  top: 70px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  width: 90%;
  max-width: 360px;
}
.toast {
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid var(--accent-val-red);
  color: #fff;
  font-family: var(--font-tactical);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.5px;
  padding: 10px 14px;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.6), 0 0 15px var(--accent-val-red-glow);
  text-align: center;
  transition: opacity 0.3s ease;
}

/* ==========================================================================
   UPGRADER WHEEL COMPONENT
   ========================================================================== */
.upgrader-wheel-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 0 20px 0;
}

.upgrader-wheel-wrapper {
  position: relative;
  width: 270px;
  height: 270px;
  margin: 0 auto;
}

.upgrader-wheel-canvas {
  width: 270px;
  height: 270px;
  border-radius: 50%;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.8), 0 0 15px rgba(0, 245, 212, 0.2);
}

.upgrader-pivot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform: translate(-50%, -50%) rotate(0deg);
  transform-origin: center center;
  transition: transform 4.2s cubic-bezier(0.12, 0.85, 0.25, 1);
  z-index: 10;
  pointer-events: none;
}

.upgrader-needle {
  position: absolute;
  bottom: 0;
  left: -3px;
  width: 6px;
  height: 125px;
  background: linear-gradient(180deg, #ffffff 0%, var(--accent-val-red) 100%);
  border-radius: 3px;
  box-shadow: 0 0 10px var(--accent-val-red), 0 0 20px rgba(255, 70, 85, 0.8);
  transform-origin: bottom center;
}
.upgrader-needle::after {
  content: '';
  position: absolute;
  top: -8px;
  left: -5px;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 12px solid #ffffff;
  filter: drop-shadow(0 0 6px var(--accent-val-red));
}

.upgrader-center-cap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: radial-gradient(circle, #1e293b, #0f172a);
  border: 2px solid var(--accent-cyan);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  box-shadow: 0 0 15px var(--accent-cyan-glow), inset 0 0 6px rgba(0,0,0,0.8);
  z-index: 15;
}

.upgrader-chance-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid var(--border-glass);
  padding: 6px 14px;
  border-radius: 20px;
}
.chance-title {
  font-family: var(--font-tactical);
  font-size: 12px;
  font-weight: 800;
  color: #94a3b8;
  letter-spacing: 0.6px;
}
.chance-value {
  font-family: var(--font-tactical);
  font-size: 18px;
  font-weight: 900;
  color: var(--accent-cyan);
  text-shadow: 0 0 10px var(--accent-cyan-glow);
}

/* ==========================================================================
   FORTUNE WHEEL COMPONENT
   ========================================================================== */
.wheel-game-box {
  text-align: center;
}

.wheel-cooldown-badge {
  font-family: var(--font-tactical);
  font-size: 11px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 6px;
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #fbbf24;
  letter-spacing: 0.5px;
}
.wheel-cooldown-badge.ready {
  background: rgba(16, 185, 129, 0.2);
  border-color: #10b981;
  color: #34d399;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.4);
}

.wheel-stage {
  position: relative;
  width: 340px;
  height: 340px;
  margin: 10px auto 20px auto;
}

.wheel-pointer {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 26px;
  color: var(--accent-val-red);
  filter: drop-shadow(0 0 10px var(--accent-val-red-glow));
  z-index: 25;
  line-height: 1;
}

.wheel-canvas-wrapper {
  position: relative;
  width: min(340px, calc(100vw - 32px));
  height: auto;
  aspect-ratio: 1;
  margin: 0 auto;
}

.wheel-canvas {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: 0 0 35px rgba(0, 0, 0, 0.8), 0 0 20px rgba(245, 158, 11, 0.25);
  transition: transform 6s cubic-bezier(0.12, 0.8, 0.15, 1);
}

.wheel-center-hub {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: radial-gradient(circle, #1e293b, #090d16);
  border: 3px solid var(--accent-gold);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 0 20px var(--accent-gold-glow), inset 0 0 10px rgba(0,0,0,0.8);
  z-index: 20;
  transition: transform 0.15s ease;
}
.wheel-center-hub:hover {
  transform: translate(-50%, -50%) scale(1.08);
}
.wheel-center-hub:active {
  transform: translate(-50%, -50%) scale(0.94);
}
.hub-spin-txt {
  font-family: var(--font-tactical);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.8px;
  color: #fbbf24;
}

.wheel-controls-box {
  max-width: 340px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.btn-wheel-primary {
  width: 100%;
  padding: 13px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  box-shadow: 0 4px 18px rgba(245, 158, 11, 0.45);
}
.wheel-extra-buttons {
  display: flex;
  gap: 8px;
}
.btn-wheel-sub {
  flex: 1;
  padding: 9px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-glass);
  color: #fff;
  font-family: var(--font-tactical);
  font-size: 12px;
  font-weight: 800;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn-wheel-sub:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
}
.btn-wheel-stars {
  border-color: rgba(0, 245, 212, 0.35);
  color: var(--accent-cyan);
}

.wheel-win-box {
  margin-top: 14px;
  max-width: 340px;
  margin-left: auto;
  margin-right: auto;
  padding: 12px;
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.95));
  border: 1px solid var(--accent-gold);
  border-radius: var(--radius-md);
  box-shadow: 0 0 20px var(--accent-gold-glow);
  animation: fadeIn 0.3s ease;
}
.wheel-win-title {
  font-family: var(--font-tactical);
  font-size: 16px;
  font-weight: 900;
  color: #fbbf24;
  margin-bottom: 2px;
}
.wheel-win-desc {
  font-size: 13px;
  color: #fff;
}

/* ==========================================================================
   COINFLIP COMPONENT
   ========================================================================== */
.coinflip-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 0 16px 0;
  perspective: 1200px;
  -webkit-perspective: 1200px;
}
.coinflip-coin {
  width: 140px;
  height: 140px;
  position: relative;
  border-radius: 50%;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transition: transform 2.5s cubic-bezier(0.15, 0.9, 0.3, 1);
  will-change: transform;
}
.coin-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-backface-visibility: hidden !important;
  backface-visibility: hidden !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.75), 0 0 25px rgba(245, 158, 11, 0.35);
  background: #111827;
  overflow: hidden;
}
.coin-face-heads {
  transform: rotateY(0deg) translateZ(1.5px);
  -webkit-transform: rotateY(0deg) translateZ(1.5px);
}
.coin-face-tails {
  transform: rotateY(180deg) translateZ(1.5px);
  -webkit-transform: rotateY(180deg) translateZ(1.5px);
}
.coinflip-coin.show-heads .coin-face-heads {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto;
}
.coinflip-coin.show-heads .coin-face-tails {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none;
}
.coinflip-coin.show-tails .coin-face-tails {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto;
}
.coinflip-coin.show-tails .coin-face-heads {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none;
}
.coinflip-coin.is-flipping .coin-face-heads,
.coinflip-coin.is-flipping .coin-face-tails {
  opacity: 1 !important;
  visibility: visible !important;
}
.coin-face-img {
  width: 100%;
  height: 100%;
  display: block;
  user-select: none;
  pointer-events: none;
}
.tactical-coin-img {
  width: 22px;
  height: 22px;
  display: inline-block;
  vertical-align: -3px;
  filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.6));
  animation: coinGlow 3s infinite ease-in-out;
}
@keyframes coinGlow {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.5)); }
  50% { filter: drop-shadow(0 0 9px rgba(251, 191, 36, 0.9)); }
}
.coinflip-choice-btn {
  flex: 1;
  padding: 12px;
  font-family: var(--font-tactical);
  font-size: 15px;
  font-weight: 800;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-md);
  color: #fff;
  cursor: pointer;
  transition: all 0.15s ease;
}
.coinflip-choice-btn.active {
  background: rgba(245, 158, 11, 0.2);
  border-color: var(--accent-gold);
  color: #fbbf24;
  box-shadow: 0 0 15px var(--accent-gold-glow);
}

/* ==========================================================================
   CONTRACTS & BATTLE PASS
   ========================================================================== */
.contract-slots-wrapper {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 14px 0;
  overflow-x: auto;
  padding-bottom: 4px;
}
.contract-slot {
  width: 90px;
  height: 105px;
  background: rgba(0, 0, 0, 0.45);
  border: 2px dashed rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px;
  flex-shrink: 0;
  transition: all 0.2s ease;
}
.contract-slot.filled {
  border-style: solid;
  border-color: var(--accent-cyan);
  background: rgba(0, 245, 212, 0.08);
  box-shadow: 0 0 12px rgba(0, 245, 212, 0.2);
}
.contract-item-card {
  background: linear-gradient(180deg, rgba(20, 27, 44, 0.9), rgba(11, 15, 26, 0.95));
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-md);
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: all 0.2s ease;
  user-select: none;
}
.contract-item-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.25);
}
.contract-item-card.contract-selected {
  border-color: #10b981 !important;
  background: rgba(16, 185, 129, 0.14) !important;
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.3) !important;
  transform: translateY(-2px);
}

.bp-quest-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}
.bp-quest-tab-btn {
  flex: 1;
  padding: 7px;
  font-family: var(--font-tactical);
  font-size: 12px;
  font-weight: 800;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-glass);
  border-radius: 6px;
  color: #94a3b8;
  cursor: pointer;
  transition: all 0.15s;
}
.bp-quest-tab-btn.active {
  background: rgba(56, 189, 248, 0.2);
  border-color: #38bdf8;
  color: #fff;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.35);
}

/* Battle Pass Quests List & Cards */
#bpQuestsList {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
}
.bp-quest-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm, 10px);
  backdrop-filter: blur(8px);
  transition: all 0.2s ease;
}
.bp-quest-card:hover {
  border-color: rgba(56, 189, 248, 0.4);
  transform: translateY(-1px);
}
.bp-quest-card.completed {
  border-color: rgba(16, 185, 129, 0.4);
  background: linear-gradient(90deg, rgba(16, 185, 129, 0.08), rgba(15, 23, 42, 0.85));
}
.bp-quest-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
.bp-quest-icon-box .material-symbols-outlined {
  font-size: 24px;
}
.bp-quest-content {
  flex: 1;
  min-width: 0;
}
.bp-quest-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.bp-quest-title {
  font-size: 13px;
  font-weight: 700;
  color: #f1f5f9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bp-quest-reward-xp {
  font-size: 12px;
  font-weight: 800;
  color: #38bdf8;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
  font-family: var(--font-tactical);
}
.bp-quest-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: #94a3af;
  margin-top: 5px;
}
.bp-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
}
.bp-status-badge.completed {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #10b981;
}
.bp-status-badge.in-progress {
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.25);
  color: #38bdf8;
}

/* ==========================================================================
   BATTLE PASS 30-TIER SCROLLING TRACK & TIER CARDS
   ========================================================================== */
.bp-track-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 14px 0 8px;
}

.bp-track-title {
  font-family: var(--font-tactical);
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.5px;
}

.bp-track-nav-btns {
  display: flex;
  gap: 6px;
}

.bp-scroll-btn {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid var(--border-glass);
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
}

.bp-scroll-btn:hover {
  background: rgba(56, 189, 248, 0.25);
  border-color: #38bdf8;
  color: #38bdf8;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.4);
  transform: scale(1.05);
}

.bp-scroll-btn:active {
  transform: scale(0.95);
}

.bp-track-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border-glass);
  padding: 10px 8px;
}

.bp-tiers-track {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 4px 10px;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  cursor: grab;
  user-select: none;
  scrollbar-width: thin;
  scrollbar-color: rgba(56, 189, 248, 0.5) rgba(0, 0, 0, 0.4);
}

.bp-tiers-track::-webkit-scrollbar {
  height: 6px;
}

.bp-tiers-track::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.35);
  border-radius: 4px;
}

.bp-tiers-track::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #38bdf8, #8b5cf6);
  border-radius: 4px;
  box-shadow: 0 0 6px rgba(56, 189, 248, 0.5);
}

.bp-tiers-track.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
}

/* Tier Card */
.bp-tier-card {
  flex: 0 0 115px;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  backdrop-filter: blur(10px);
  transition: all 0.2s ease;
}

.bp-tier-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-specular);
}

.bp-tier-card.unlocked {
  border-color: rgba(56, 189, 248, 0.5);
  background: linear-gradient(180deg, rgba(56, 189, 248, 0.1), rgba(15, 23, 42, 0.9));
  box-shadow: 0 4px 15px rgba(56, 189, 248, 0.15);
}

.bp-tier-card.current-level {
  border-color: #ff4655;
  box-shadow: 0 0 16px rgba(255, 70, 85, 0.35);
}

.bp-tier-level-badge {
  font-family: var(--font-tactical);
  font-size: 13px;
  font-weight: 800;
  text-align: center;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  padding: 3px 0;
  letter-spacing: 0.5px;
}

.bp-tier-card.unlocked .bp-tier-level-badge {
  background: rgba(56, 189, 248, 0.2);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.3);
}

/* Free & Premium Reward Sub-boxes */
.bp-reward-box {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-xs);
  padding: 6px 4px;
  text-align: center;
  min-height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.bp-reward-box.premium {
  border-color: rgba(245, 158, 11, 0.3);
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.08), rgba(0, 0, 0, 0.5));
}

.bp-reward-box.claimed {
  opacity: 0.85;
  border-color: rgba(16, 185, 129, 0.4);
  background: rgba(16, 185, 129, 0.08);
}

/* Reward Box Inner Elements */
.bp-reward-item-icon {
  margin: 4px 0 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bp-reward-item-icon .material-symbols-outlined {
  font-size: 24px;
}
.bp-reward-item-label {
  font-size: 11px;
  font-weight: 700;
  color: #f1f5f9;
  margin: 2px 0 4px;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
}
.bp-reward-item-label.premium-label {
  font-weight: 800;
}
.bp-claim-btn {
  padding: 4px 8px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  border-radius: 6px !important;
  cursor: pointer !important;
}
.bp-claim-btn.free {
  background: #10b981 !important;
  border: 1px solid #34d399 !important;
  color: #fff !important;
}
.bp-claim-btn.free:hover {
  background: #059669 !important;
}
.bp-claim-btn.premium {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  border: 1px solid #fbbf24 !important;
  color: #fff !important;
}
.bp-claim-btn.premium:hover {
  background: linear-gradient(135deg, #d97706, #b45309) !important;
}
.bp-reward-status-claimed {
  font-size: 10px;
  color: #10b981;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.bp-reward-status-locked {
  font-size: 10px;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}


/* ==========================================================================
   PLINKO MULTIPLIERS & CONTROLS
   ========================================================================== */
.plinko-count-selector {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}
.btn-plinko-count {
  flex: 1;
  padding: 7px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-glass);
  border-radius: 6px;
  color: #cbd5e1;
  font-family: var(--font-tactical);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn-plinko-count.active {
  background: rgba(0, 245, 212, 0.2);
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
  box-shadow: 0 0 10px var(--accent-cyan-glow);
}
.btn-plinko-primary {
  width: 100%;
  padding: 12px;
  font-family: var(--font-tactical);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.8px;
  background: linear-gradient(135deg, #10b981, #059669);
  box-shadow: 0 4px 18px rgba(16, 185, 129, 0.4);
  border-radius: 8px;
  color: #fff;
  border: none;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s;
}
.btn-plinko-primary:active {
  transform: scale(0.97);
}

.plinko-multipliers-row {
  display: flex;
  justify-content: space-between;
  gap: 3px;
  margin-top: 6px;
  width: 100%;
  max-width: 360px;
}
.plinko-mult-cell {
  flex: 1;
  max-width: 36px;
  padding: 4px 1px;
  border-radius: 4px;
  font-family: var(--font-tactical);
  font-size: 11px;
  font-weight: 800;
  text-align: center;
  color: #fff;
}
.mult-high {
  background: #ef4444;
  box-shadow: 0 0 6px rgba(239, 68, 68, 0.6);
}
.mult-mid {
  background: #f59e0b;
}
.mult-low {
  background: #10b981;
}
.mult-loss {
  background: #64748b;
  opacity: 0.7;
}

/* ==========================================================================
   TACTICAL WEAPON INSPECT MODAL
   ========================================================================== */
.inspect-modal-content {
  max-width: 440px;
  background: linear-gradient(180deg, rgba(20, 27, 45, 0.99), rgba(10, 14, 24, 0.99));
  border: 2px solid var(--accent-val-red);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.8), 0 0 25px var(--accent-val-red-glow);
}
.inspect-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}
.inspect-edition-badge {
  font-family: var(--font-tactical);
  font-size: 11px;
  font-weight: 800;
  color: var(--accent-gold);
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.3);
  padding: 2px 8px;
  border-radius: 4px;
}
.inspect-weapon-cat {
  font-family: var(--font-tactical);
  font-size: 11px;
  color: #94a3b8;
}
.inspect-display-box {
  position: relative;
  height: 160px;
  background: radial-gradient(circle at 50% 50%, rgba(255, 70, 85, 0.15), transparent 70%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  margin-bottom: 14px;
}
.inspect-skin-icon {
  font-size: 64px;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.6));
}
.inspect-skin-name {
  font-family: var(--font-tactical);
  font-size: 17px;
  font-weight: 900;
  color: #fff;
  margin-top: 8px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.8);
}
.inspect-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
.inspect-meta-card {
  background: rgba(0, 0, 0, 0.4);
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid var(--border-glass);
}
.inspect-meta-lbl {
  font-size: 10px;
  color: #94a3b8;
  font-weight: 700;
}
.inspect-meta-val {
  font-family: var(--font-tactical);
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  margin-top: 2px;
}
.kill-banner-box {
  background: linear-gradient(90deg, rgba(255, 70, 85, 0.25), rgba(0, 0, 0, 0.4), rgba(255, 70, 85, 0.25));
  border: 1px solid var(--accent-val-red);
  padding: 8px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 14px;
  box-shadow: 0 0 12px var(--accent-val-red-glow);
}
.kill-banner-skull {
  font-size: 18px;
}
.kill-banner-text {
  font-family: var(--font-tactical);
  font-size: 12px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 1px;
}

/* ==========================================================================
   POKER & STREAKS
   ========================================================================== */
.poker-felt {
  background: radial-gradient(circle at 50% 50%, #1e1b4b 0%, #09090e 85%);
  border: 2px solid rgba(168, 85, 247, 0.35);
  border-radius: var(--radius-lg);
  padding: 18px;
  box-shadow: inset 0 0 35px rgba(0,0,0,0.7);
}
.community-cards {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: 12px 0;
}
.card-back {
  background: linear-gradient(135deg, #1e293b, #0f172a);
  border: 1px solid var(--accent-cyan);
}

.streak-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin: 12px 0;
}
.streak-day-card {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--border-glass);
  border-radius: 8px;
  padding: 8px 4px;
  text-align: center;
  font-family: var(--font-tactical);
}
.streak-day-card.claimed {
  border-color: #10b981;
  background: rgba(16, 185, 129, 0.15);
}
.streak-day-card.ready {
  border-color: var(--accent-gold);
  background: rgba(245, 158, 11, 0.18);
  box-shadow: 0 0 10px var(--accent-gold-glow);
  animation: pulse 2s infinite ease-in-out;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

/* ==========================================================================
   MOBILE RESPONSIVENESS & TELEGRAM WEBAPP ADAPTATION
   ========================================================================== */
@media (max-width: 600px) {
  .app-header {
    padding: max(8px, env(safe-area-inset-top, 8px)) 12px 8px 12px;
  }
  .header-top {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .user-badge {
    justify-content: space-between;
    width: 100%;
  }
  .user-name {
    font-size: 14px;
    max-width: 110px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .balances-wrapper {
    width: 100%;
    justify-content: space-between;
  }
  .balance-chip {
    flex: 1;
    justify-content: center;
    padding: 6px 8px;
    font-size: 13px;
  }
  .nav-scroll-btn {
    display: none !important;
  }
  .nav-tabs {
    padding: 6px 8px;
    gap: 6px;
  }
  .main-content {
    padding: 10px 8px calc(115px + env(safe-area-inset-bottom, 20px)) 8px;
    max-width: 100%;
  }
  .artifacts-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  #artifactsGrid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .case-card, .artifact-card {
    padding: 10px !important;
  }
  .case-icon-large {
    font-size: 38px !important;
  }
  .case-name {
    font-size: 13px !important;
    min-height: 28px;
  }
  .memory-grid {
    grid-template-columns: repeat(3, 75px) !important;
    grid-gap: 8px !important;
  }
  .memory-cell {
    width: 75px !important;
    height: 75px !important;
    font-size: 13px !important;
  }
  .mines-grid-container {
    max-width: 310px !important;
    gap: 6px !important;
  }
  .upgrader-wheel, .wheel-container, .wheel-wrapper {
    max-width: 86vw !important;
    max-height: 86vw !important;
  }
}

@media (max-width: 380px) {
  .memory-grid {
    grid-template-columns: repeat(3, 68px) !important;
    grid-gap: 6px !important;
  }
  .memory-cell {
    width: 68px !important;
    height: 68px !important;
  }
  .games-hub-grid {
    grid-template-columns: 1fr;
  }
  .profile-quick-nav-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   LEADERBOARD & REBIRTH PRESTIGE SYSTEM
   ========================================================================== */

/* Subtabs Switcher */
.lb-subtabs-row {
  display: flex;
  gap: 8px;
  background: rgba(0, 0, 0, 0.45);
  padding: 5px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-glass);
  margin-bottom: 16px;
}

.lb-subtab-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  font-family: var(--font-tactical);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.lb-subtab-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
}

.lb-subtab-btn.active {
  color: #fff;
  background: linear-gradient(135deg, rgba(255, 70, 85, 0.3), rgba(0, 245, 212, 0.2));
  border: 1px solid var(--border-tactical);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

/* Current User Banner */
.lb-user-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.85));
  border: 1px solid var(--border-tactical);
  border-radius: var(--radius-md);
  box-shadow: 0 0 20px rgba(0, 245, 212, 0.12);
  margin-bottom: 16px;
}

.lb-user-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.lb-user-rank-box {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-tactical);
  font-size: 16px;
  font-weight: 800;
  color: #00f5d4;
  background: rgba(0, 245, 212, 0.1);
  border: 1px solid var(--border-tactical);
  border-radius: var(--radius-sm);
  box-shadow: 0 0 10px rgba(0, 245, 212, 0.25);
}

.lb-user-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lb-user-name {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
}

.lb-rebirth-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(0, 245, 212, 0.15);
  border: 1px solid rgba(0, 245, 212, 0.4);
  color: #00f5d4;
}

.lb-user-sub {
  font-size: 11px;
  color: var(--text-muted);
}

.lb-user-right {
  text-align: right;
}

.lb-user-balance-val {
  font-family: var(--font-tactical);
  font-size: 17px;
  font-weight: 800;
  color: #fbbf24;
  text-shadow: 0 0 10px rgba(251, 191, 36, 0.3);
}

.lb-user-balance-lbl {
  font-size: 11px;
  color: var(--text-muted);
}

/* Podium Top 3 Grid */
.lb-podium-wrap {
  margin-bottom: 20px;
}

.lb-podium-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  align-items: flex-end;
  gap: 10px;
}

.lb-podium-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 16px 8px 14px;
  background: rgba(15, 23, 42, 0.75);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-glass);
  backdrop-filter: blur(10px);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.lb-podium-card:hover {
  transform: translateY(-3px);
}

.lb-podium-crown {
  font-size: 26px;
  margin-bottom: 4px;
}

.lb-podium-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 18px;
  margin-bottom: 6px;
}

.lb-podium-rank {
  font-family: var(--font-tactical);
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 2px;
}

.lb-podium-name {
  font-size: 13px;
  font-weight: 700;
  max-width: 90px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #fff;
  margin-bottom: 2px;
}

.lb-podium-sub {
  font-size: 10px;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.lb-podium-mult {
  font-size: 10px;
  font-weight: 700;
  color: #00f5d4;
  background: rgba(0, 245, 212, 0.12);
  border: 1px solid rgba(0, 245, 212, 0.3);
  padding: 1px 6px;
  border-radius: 4px;
  margin-bottom: 6px;
}

.lb-podium-balance {
  font-family: var(--font-tactical);
  font-size: 14px;
  font-weight: 800;
  color: #fbbf24;
}

/* 1st Place (Center / Gold) */
.podium-first {
  order: 2;
  padding-top: 24px;
  padding-bottom: 20px;
  border: 1.5px solid rgba(245, 158, 11, 0.55);
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.15), rgba(15, 23, 42, 0.95));
  box-shadow: 0 8px 30px rgba(245, 158, 11, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.podium-first .lb-podium-avatar {
  width: 58px;
  height: 58px;
  font-size: 22px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #000;
  box-shadow: 0 0 18px rgba(245, 158, 11, 0.5);
  border: 2px solid #fbbf24;
}

.podium-first .lb-podium-rank {
  color: #fbbf24;
  font-size: 15px;
}

.podium-first .lb-podium-balance {
  font-size: 16px;
  text-shadow: 0 0 8px rgba(251, 191, 36, 0.5);
}

/* 2nd Place (Left / Silver) */
.podium-second {
  order: 1;
  border: 1px solid rgba(203, 213, 225, 0.4);
  background: linear-gradient(180deg, rgba(148, 163, 184, 0.12), rgba(15, 23, 42, 0.9));
  box-shadow: 0 4px 20px rgba(148, 163, 184, 0.15);
}

.podium-second .lb-podium-avatar {
  background: linear-gradient(135deg, #94a3b8, #64748b);
  color: #fff;
  border: 2px solid #cbd5e1;
}

.podium-second .lb-podium-rank {
  color: #cbd5e1;
}

/* 3rd Place (Right / Bronze) */
.podium-third {
  order: 3;
  border: 1px solid rgba(217, 119, 6, 0.35);
  background: linear-gradient(180deg, rgba(180, 83, 9, 0.12), rgba(15, 23, 42, 0.9));
  box-shadow: 0 4px 20px rgba(180, 83, 9, 0.15);
}

.podium-third .lb-podium-avatar {
  background: linear-gradient(135deg, #b45309, #78350f);
  color: #fff;
  border: 2px solid #d97706;
}

.podium-third .lb-podium-rank {
  color: #d97706;
}

.lb-podium-card.is-me {
  border-color: #00f5d4 !important;
  box-shadow: 0 0 20px rgba(0, 245, 212, 0.35) !important;
}

/* Ranks 4 to 50 List */
.lb-list-header {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.5px;
  padding: 6px 12px;
  text-transform: uppercase;
}

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

.lb-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
  transition: all 0.2s ease;
}

.lb-row:hover {
  background: rgba(30, 41, 59, 0.7);
  border-color: var(--border-specular);
}

.lb-row.is-me {
  background: linear-gradient(135deg, rgba(0, 245, 212, 0.1), rgba(15, 23, 42, 0.85));
  border-color: rgba(0, 245, 212, 0.4);
  box-shadow: 0 0 12px rgba(0, 245, 212, 0.15);
}

.lb-row-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lb-row-rank {
  font-family: var(--font-tactical);
  font-size: 14px;
  font-weight: 800;
  color: var(--text-muted);
  min-width: 28px;
}

.lb-row-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-glass);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  color: #fff;
}

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

.lb-row-name {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}

.lb-row-mult {
  font-size: 10px;
  font-weight: 700;
  color: #00f5d4;
  background: rgba(0, 245, 212, 0.1);
  border: 1px solid rgba(0, 245, 212, 0.3);
  padding: 1px 5px;
  border-radius: 3px;
}

.lb-row-desc {
  font-size: 11px;
  color: var(--text-muted);
}

.lb-row-coins {
  font-family: var(--font-tactical);
  font-size: 14px;
  font-weight: 800;
  color: #fbbf24;
}

/* ==========================================================================
   REBIRTH ALTAAR (ПРЕСТИЖ)
   ========================================================================== */

.rebirth-core-card {
  position: relative;
  overflow: hidden;
  padding: 24px 20px;
  background: linear-gradient(180deg, rgba(13, 18, 30, 0.95), rgba(7, 10, 16, 0.98));
  border: 1.5px solid rgba(0, 245, 212, 0.3);
  border-radius: var(--radius-lg);
  box-shadow: 0 0 35px rgba(0, 245, 212, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  text-align: center;
}

.rebirth-rune-glow {
  width: 76px;
  height: 76px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 245, 212, 0.3) 0%, rgba(0, 245, 212, 0.05) 70%, transparent 100%);
  border: 1.5px solid rgba(0, 245, 212, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 25px rgba(0, 245, 212, 0.4);
  animation: pulseRune 2.5s infinite ease-in-out;
}

@keyframes pulseRune {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 20px rgba(0, 245, 212, 0.3);
  }
  50% {
    transform: scale(1.06);
    box-shadow: 0 0 35px rgba(0, 245, 212, 0.6);
  }
}

.rebirth-rune-icon {
  font-size: 36px;
  color: #00f5d4;
  text-shadow: 0 0 15px rgba(0, 245, 212, 0.8);
}

.rebirth-core-title {
  font-family: var(--font-tactical);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: #fff;
  margin-bottom: 6px;
}

.rebirth-core-desc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
  max-width: 440px;
  margin: 0 auto 18px;
}

/* Multipliers Compare */
.rebirth-mult-compare {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 18px;
}

.rebirth-mult-box {
  flex: 1;
  max-width: 170px;
  padding: 12px 10px;
  border-radius: var(--radius-md);
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--border-glass);
}

.rebirth-mult-box.current {
  border-color: rgba(255, 255, 255, 0.12);
}

.rebirth-mult-box.next {
  border-color: rgba(0, 245, 212, 0.4);
  background: linear-gradient(135deg, rgba(0, 245, 212, 0.1), rgba(0, 0, 0, 0.5));
  box-shadow: 0 0 15px rgba(0, 245, 212, 0.15);
}

.mult-label {
  font-size: 9px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.mult-val {
  font-family: var(--font-tactical);
  font-size: 24px;
  font-weight: 800;
  color: #fff;
}

.mult-val.next-val {
  color: #00f5d4;
  text-shadow: 0 0 10px rgba(0, 245, 212, 0.5);
}

.mult-tier {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

.rebirth-mult-arrow {
  font-size: 20px;
  color: #00f5d4;
  opacity: 0.8;
}

/* Rebirth Progress Block */
.rebirth-progress-block {
  margin-bottom: 18px;
  padding: 12px 14px;
  background: rgba(0, 0, 0, 0.35);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-glass);
}

.rebirth-prog-labels {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.rebirth-prog-labels b {
  color: #fbbf24;
}

.rebirth-bar-bg {
  width: 100%;
  height: 10px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 4px;
}

.rebirth-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #ff4655, #f59e0b, #00f5d4);
  border-radius: 5px;
  transition: width 0.4s ease;
  box-shadow: 0 0 8px rgba(0, 245, 212, 0.5);
}

.rebirth-prog-pct {
  font-size: 11px;
  color: #00f5d4;
  font-weight: 700;
  text-align: right;
}

/* Perks List */
.rebirth-perks-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
  margin-bottom: 20px;
}

.rebirth-perk-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--radius-xs);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.rebirth-perk-item b {
  color: #fff;
}

.perk-icon {
  font-size: 15px;
  flex-shrink: 0;
}

/* Action Button */
.btn-rebirth-action {
  width: 100%;
  padding: 14px 20px;
  font-family: var(--font-tactical);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  transition: all 0.25s ease;
}

.btn-rebirth-action.ready {
  background: linear-gradient(135deg, #00f5d4, #059669);
  color: #041014;
  box-shadow: 0 0 25px rgba(0, 245, 212, 0.4), 0 4px 15px rgba(0, 0, 0, 0.4);
}

.btn-rebirth-action.ready:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 35px rgba(0, 245, 212, 0.6), 0 6px 20px rgba(0, 0, 0, 0.5);
}

.btn-rebirth-action.locked {
  background: rgba(255, 255, 255, 0.08);
  color: #64748b;
  border: 1px solid rgba(255, 255, 255, 0.1);
  cursor: not-allowed;
}

/* Rebirth Roadmap */
.rebirth-roadmap-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rebirth-road-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
}

.rebirth-road-item.unlocked {
  border-color: rgba(16, 185, 129, 0.4);
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(15, 23, 42, 0.7));
}

.rebirth-road-item.target {
  border-color: rgba(0, 245, 212, 0.5);
  background: linear-gradient(135deg, rgba(0, 245, 212, 0.12), rgba(15, 23, 42, 0.8));
  box-shadow: 0 0 15px rgba(0, 245, 212, 0.15);
}

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

.road-status-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-glass);
}

.rebirth-road-item.unlocked .road-status-icon {
  background: rgba(16, 185, 129, 0.2);
  color: #10b981;
  border-color: #10b981;
}

.rebirth-road-item.target .road-status-icon {
  background: rgba(0, 245, 212, 0.2);
  color: #00f5d4;
  border-color: #00f5d4;
}

.road-title {
  font-size: 13px;
  font-weight: 800;
  color: #fff;
}

.road-cost {
  font-size: 11px;
  color: var(--text-muted);
}

.road-right {
  text-align: right;
}

.road-mult {
  font-family: var(--font-tactical);
  font-size: 14px;
  font-weight: 800;
  color: #00f5d4;
}

.road-status-tag {
  font-size: 10px;
  color: var(--text-muted);
}

.rebirth-road-item.unlocked .road-status-tag {
  color: #10b981;
  font-weight: 700;
}

.rebirth-road-item.target .road-status-tag {
  color: #00f5d4;
  font-weight: 700;
}

/* ==========================================================================
   CYBERPUNK ARTIFACTS / RELICS SYSTEM
   ========================================================================== */
#artifactsGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  width: 100%;
}

@media (min-width: 640px) {
  #artifactsGrid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.artifact-card {
  background: linear-gradient(180deg, rgba(20, 27, 44, 0.95), rgba(11, 15, 26, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-lg);
  padding: 16px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.artifact-card.owned {
  border-color: rgba(16, 185, 129, 0.45);
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.18), inset 0 0 15px rgba(16, 185, 129, 0.05);
}

.art-badge-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}

.art-game-badge {
  font-family: var(--font-tactical);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  color: #94a3b8;
}

.art-rarity-badge {
  font-family: var(--font-tactical);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid;
}

.artifact-icon-wrap {
  width: 76px;
  height: 76px;
  margin: 6px auto 14px auto;
  border-radius: 18px;
  background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.45));
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

.artifact-card:hover .artifact-icon-wrap {
  transform: scale(1.08);
}

.artifact-icon {
  font-size: 40px;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
}

.artifact-name {
  font-family: var(--font-tactical);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-align: center;
  margin-bottom: 6px;
}

.art-status-row {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}

.art-status-active {
  font-family: var(--font-tactical);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #10b981;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
  padding: 3px 10px;
  border-radius: 12px;
}

.art-status-locked {
  font-family: var(--font-tactical);
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  background: rgba(100, 116, 139, 0.1);
  padding: 3px 10px;
  border-radius: 12px;
}

.artifact-bonus {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.5;
  color: #cbd5e1;
  text-align: center;
  margin-bottom: 14px;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.art-actions {
  display: flex;
  gap: 8px;
  margin-top: auto;
}

.btn-buy-coins {
  flex: 1.4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.25), rgba(217, 119, 6, 0.25));
  border: 1px solid #f59e0b;
  border-radius: 8px;
  color: #fef3c7;
  font-family: var(--font-tactical);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.18s ease;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.2);
}

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

.btn-buy-stars {
  flex: 1;
  padding: 10px 8px;
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.2), rgba(14, 165, 233, 0.25));
  border: 1px solid #38bdf8;
  border-radius: 8px;
  color: #e0f2fe;
  font-family: var(--font-tactical);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.18s ease;
  text-align: center;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.2);
}

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

.art-owned-tag {
  width: 100%;
  padding: 10px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.35);
  border-radius: 8px;
  text-align: center;
  font-family: var(--font-tactical);
  font-size: 12px;
  letter-spacing: 0.8px;
}

/* ==========================================================================
   HI-LO (HIGHER OR LOWER) GAME STYLES
   ========================================================================== */
.hilo-arena {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 16px 12px;
  background: radial-gradient(circle at center, rgba(168, 85, 247, 0.1) 0%, rgba(13, 18, 28, 0.95) 75%);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(168, 85, 247, 0.25);
  position: relative;
  overflow: hidden;
}

.hilo-streak-badge {
  padding: 4px 10px;
  border-radius: 20px;
  background: rgba(255, 70, 85, 0.18);
  border: 1px solid rgba(255, 70, 85, 0.4);
  font-family: var(--font-tactical);
  font-weight: 800;
  font-size: 13px;
  color: #ff4655;
  box-shadow: 0 0 10px rgba(255, 70, 85, 0.25);
}

.hilo-card-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  perspective: 800px;
}

.hilo-card-box {
  width: 130px;
  height: 180px;
  border-radius: 14px;
  background: linear-gradient(145deg, #1e293b, #0f172a);
  border: 2px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.7), 0 0 20px rgba(0, 245, 212, 0.15);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.hilo-card-box.card-red {
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.5);
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.7), 0 0 25px rgba(239, 68, 68, 0.3);
}

.hilo-card-box.card-black {
  color: #f8fafc;
  border-color: rgba(0, 245, 212, 0.4);
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.7), 0 0 25px rgba(0, 245, 212, 0.25);
}

.hilo-card-box.empty {
  color: #64748b;
  border-style: dashed;
}

.hilo-card-suit {
  font-size: 38px;
  line-height: 1;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5));
}

.hilo-card-value {
  font-family: var(--font-tactical);
  font-size: 44px;
  font-weight: 800;
  line-height: 1;
  margin-top: 6px;
  letter-spacing: 1px;
}

.hilo-multiplier-display {
  font-family: var(--font-tactical);
  font-size: 26px;
  font-weight: 800;
  color: #00f5d4;
  text-shadow: 0 0 15px rgba(0, 245, 212, 0.6);
  letter-spacing: 0.5px;
}

.hilo-status-banner {
  width: 100%;
  padding: 10px 14px;
  border-radius: 8px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.2s ease;
}

.hilo-status-banner.info {
  background: rgba(56, 189, 248, 0.1);
  border: 1px solid rgba(56, 189, 248, 0.3);
  color: #38bdf8;
}

.hilo-status-banner.win {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid #10b981;
  color: #34d399;
  box-shadow: 0 0 14px rgba(16, 185, 129, 0.25);
}

.hilo-status-banner.loss {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid #ef4444;
  color: #f87171;
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.25);
}

.hilo-history-strip {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  max-width: 100%;
  padding: 4px 2px;
}

.hilo-mini-card {
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid var(--border-glass);
  font-family: var(--font-tactical);
  font-weight: 700;
  font-size: 12px;
  white-space: nowrap;
}

.hilo-mini-card.red {
  color: #f87171;
  border-color: rgba(239, 68, 68, 0.4);
}

.hilo-mini-card.black {
  color: #f1f5f9;
  border-color: rgba(255, 255, 255, 0.2);
}

.hilo-actions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  width: 100%;
  margin-top: 4px;
}

.btn-hilo-guess {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 6px;
  border-radius: 10px;
  font-family: var(--font-tactical);
  font-weight: 800;
  border: 1px solid var(--border-glass);
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.btn-hilo-guess:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none !important;
}

.btn-hilo-guess:not(:disabled):active {
  transform: scale(0.96);
}

.btn-hilo-guess.guess-higher {
  background: linear-gradient(145deg, rgba(16, 185, 129, 0.25), rgba(5, 150, 105, 0.15));
  border-color: rgba(16, 185, 129, 0.5);
  color: #34d399;
}

.btn-hilo-guess.guess-lower {
  background: linear-gradient(145deg, rgba(239, 68, 68, 0.25), rgba(220, 38, 38, 0.15));
  border-color: rgba(239, 68, 68, 0.5);
  color: #f87171;
}

.btn-hilo-guess.guess-same {
  background: linear-gradient(145deg, rgba(168, 85, 247, 0.25), rgba(126, 34, 206, 0.15));
  border-color: rgba(168, 85, 247, 0.5);
  color: #c084fc;
}

.hilo-guess-icon {
  font-size: 18px;
  line-height: 1;
  margin-bottom: 2px;
}

.hilo-guess-label {
  font-size: 13px;
  letter-spacing: 0.5px;
}

.hilo-guess-mult {
  font-size: 11px;
  opacity: 0.85;
  margin-top: 2px;
}

/* ==========================================================================
   TOWER (БАШНЯ ФОРТУНЫ) GAME STYLES
   ========================================================================== */
.tower-diff-selector {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.tower-diff-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 6px;
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid var(--border-glass);
  border-radius: 8px;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.18s ease;
  font-family: var(--font-tactical);
  font-weight: 700;
}

.tower-diff-btn small {
  font-size: 10px;
  font-weight: normal;
  opacity: 0.75;
  margin-top: 2px;
}

.tower-diff-btn.active {
  background: linear-gradient(135deg, rgba(0, 245, 212, 0.15), rgba(56, 189, 248, 0.15));
  border-color: #00f5d4;
  color: #00f5d4;
  box-shadow: 0 0 12px rgba(0, 245, 212, 0.25);
}

.tower-arena {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: radial-gradient(circle at center, rgba(0, 245, 212, 0.05) 0%, rgba(13, 18, 28, 0.95) 75%);
  border: 1px solid rgba(0, 245, 212, 0.2);
  border-radius: var(--radius-lg);
  padding: 16px 12px;
}

.tower-multipliers-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-family: var(--font-tactical);
  background: rgba(0, 0, 0, 0.4);
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid var(--border-glass);
}

.tower-status-banner {
  width: 100%;
  padding: 8px 12px;
  border-radius: 6px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
}

.tower-status-banner.info {
  background: rgba(56, 189, 248, 0.1);
  border: 1px solid rgba(56, 189, 248, 0.3);
  color: #38bdf8;
}

.tower-status-banner.win {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid #10b981;
  color: #34d399;
}

.tower-status-banner.loss {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid #ef4444;
  color: #f87171;
}

.tower-grid-wrapper {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.tower-floor-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  transition: all 0.2s ease;
}

.tower-floor-row.locked {
  opacity: 0.35;
}

.tower-floor-row.active {
  opacity: 1;
  background: rgba(0, 245, 212, 0.08);
  border-color: #00f5d4;
  box-shadow: 0 0 14px rgba(0, 245, 212, 0.2);
}

.tower-floor-row.passed {
  opacity: 0.85;
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.4);
}

.tower-floor-mult {
  width: 58px;
  font-family: var(--font-tactical);
  font-weight: 800;
  font-size: 13px;
  color: #fbbf24;
  text-align: center;
}

.tower-tiles-row {
  flex: 1;
  display: flex;
  gap: 8px;
}

.tower-tile-btn {
  flex: 1;
  height: 38px;
  border-radius: 6px;
  background: rgba(30, 41, 59, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.tower-tile-btn:not(:disabled):hover {
  background: rgba(56, 189, 248, 0.25);
  border-color: #38bdf8;
  transform: translateY(-2px);
}

.tower-tile-btn:not(:disabled):active {
  transform: scale(0.95);
}

.tower-tile-btn.safe {
  background: rgba(16, 185, 129, 0.25) !important;
  border-color: #10b981 !important;
}

.tower-tile-btn.bomb {
  background: rgba(239, 68, 68, 0.3) !important;
  border-color: #ef4444 !important;
}

/* ==========================================================================
   SHOWCASE (ВИТРИНА ПРОФИЛЯ & ДОСЬЕ АГЕНТА)
   ========================================================================== */
.btn-profile-edit-showcase {
  padding: 4px 10px;
  background: rgba(0, 245, 212, 0.12);
  border: 1px solid rgba(0, 245, 212, 0.35);
  border-radius: 6px;
  color: #00f5d4;
  font-family: var(--font-tactical);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-profile-edit-showcase:hover {
  background: rgba(0, 245, 212, 0.25);
}

.profile-showcase-slots-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.showcase-slot-card {
  min-height: 140px;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.75);
  border: 1px dashed rgba(255, 255, 255, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 6px;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: all 0.2s ease;
  cursor: pointer;
}

.showcase-slot-card.filled {
  border-style: solid;
  border-color: rgba(168, 85, 247, 0.5);
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.9), rgba(30, 41, 59, 0.6));
}

.showcase-slot-card:hover {
  border-color: #00f5d4;
  transform: translateY(-2px);
}

.showcase-slot-empty-icon {
  font-size: 26px;
  color: #64748b;
  margin-bottom: 4px;
}

.showcase-slot-empty-text {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 600;
}

.showcase-slot-trophy-icon {
  font-size: 32px;
  line-height: 1;
  margin-bottom: 6px;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.6));
}

.showcase-slot-trophy-name {
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 4px;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.showcase-slot-trophy-val {
  font-size: 10px;
  color: #fbbf24;
  font-family: var(--font-tactical);
  font-weight: 800;
}

.btn-slot-inspect {
  margin-top: 6px;
  padding: 2px 8px;
  font-size: 10px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  color: #38bdf8;
  cursor: pointer;
}

/* Modal Player Profile Card */
.player-profile-modal-content {
  max-width: 460px;
  text-align: left;
  border: 1px solid rgba(0, 245, 212, 0.35);
  background: linear-gradient(145deg, #0d121c, #07090e);
  box-shadow: 0 0 35px rgba(0, 245, 212, 0.2);
}

.agent-profile-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-glass);
}

.agent-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-val-red), var(--accent-purple));
  border: 2px solid #00f5d4;
  box-shadow: 0 0 15px rgba(0, 245, 212, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 800;
  color: #fff;
}

.agent-details {
  flex: 1;
}

.agent-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.agent-name {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.agent-role-badge {
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 700;
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #fbbf24;
}

.agent-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}

.agent-prestige-mult {
  color: #00f5d4;
  font-weight: 800;
}

.agent-stats-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}

.agent-stat-chip {
  display: flex;
  flex-direction: column;
  padding: 8px 6px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--border-glass);
  border-radius: 6px;
  text-align: center;
}

.stat-lbl {
  font-size: 10px;
  color: var(--text-muted);
}

.stat-val {
  font-family: var(--font-tactical);
  font-weight: 800;
  font-size: 13px;
  color: #fff;
  margin-top: 2px;
}

.agent-showcase-section {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border-glass);
  border-radius: 10px;
  padding: 12px;
}

.agent-showcase-title {
  font-size: 12px;
  font-weight: 800;
  color: #38bdf8;
  letter-spacing: 0.8px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.agent-showcase-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.showcase-trophy-card {
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 8px 6px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.showcase-trophy-icon {
  font-size: 28px;
  margin-bottom: 4px;
}

.showcase-trophy-name {
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.showcase-trophy-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-top: 4px;
}

.showcase-rarity-pill {
  font-size: 8px;
  font-weight: 800;
  padding: 1px 4px;
  border-radius: 4px;
  border: 1px solid;
}

.showcase-cost-pill {
  font-size: 9px;
  color: #fbbf24;
  font-family: var(--font-tactical);
  font-weight: 800;
}

.btn-inspect-trophy {
  margin-top: 6px;
  width: 100%;
  padding: 3px 0;
  font-size: 10px;
  font-weight: 700;
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid #38bdf8;
  border-radius: 4px;
  color: #38bdf8;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-inspect-trophy:hover {
  background: #38bdf8;
  color: #000;
}

/* Showcase Selection Modal & Grid */
.showcase-modal-card {
  max-width: 440px !important;
  width: 100% !important;
  text-align: left !important;
  padding: 18px 16px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

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

.showcase-modal-title {
  font-family: var(--font-tactical);
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.5px;
}

.showcase-modal-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.45;
  margin-bottom: 10px;
}

.showcase-modal-counter-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: 12px;
  color: #cbd5e1;
}

.showcase-count-pill {
  color: #00f5d4;
  font-family: var(--font-tactical);
  font-weight: 800;
  font-size: 13px;
}

.showcase-reset-btn {
  padding: 3px 10px !important;
  font-size: 11px !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: #cbd5e1 !important;
  border: 1px solid var(--border-glass) !important;
  cursor: pointer;
}

.showcase-inventory-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: min(320px, 45vh);
  overflow-y: auto;
  padding-right: 4px;
  -webkit-overflow-scrolling: touch;
}

.showcase-inventory-grid::-webkit-scrollbar {
  width: 4px;
}
.showcase-inventory-grid::-webkit-scrollbar-thumb {
  background: rgba(0, 245, 212, 0.3);
  border-radius: 4px;
}

.showcase-inv-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid var(--border-glass);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.showcase-inv-item:hover {
  background: rgba(22, 33, 54, 0.85);
  border-color: rgba(0, 245, 212, 0.35);
}

.showcase-inv-item.selected {
  background: rgba(0, 245, 212, 0.12);
  border-color: #00f5d4;
  box-shadow: 0 0 10px rgba(0, 245, 212, 0.25);
}

.showcase-check-icon {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 2px solid rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 900;
  color: transparent;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.showcase-check-icon.checked {
  background: #00f5d4;
  border-color: #00f5d4;
  color: #04101c;
}

.showcase-modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  width: 100%;
  box-sizing: border-box;
}

.showcase-btn-save {
  flex: 1 1 auto !important;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: #fff !important;
  font-family: var(--font-tactical) !important;
  font-weight: 800 !important;
  font-size: 13.5px !important;
  letter-spacing: 0.5px !important;
  padding: 11px 14px !important;
  border-radius: var(--radius-md) !important;
  border: none !important;
  cursor: pointer !important;
  text-align: center !important;
  white-space: nowrap !important;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4) !important;
  transition: all 0.15s ease !important;
}

.showcase-btn-save:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(16, 185, 129, 0.6) !important;
}

.showcase-btn-cancel {
  flex: 0 0 auto !important;
  min-width: 90px !important;
  padding: 11px 16px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: var(--radius-md) !important;
  color: #e2e8f0 !important;
  font-family: var(--font-tactical) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  text-align: center !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: all 0.15s ease !important;
}

.showcase-btn-cancel:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}

.showcase-loading-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px 10px;
  gap: 10px;
}

.showcase-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(0, 245, 212, 0.2);
  border-top-color: #00f5d4;
  border-radius: 50%;
  animation: showcaseSpin 0.7s linear infinite;
}

@keyframes showcaseSpin {
  to { transform: rotate(360deg); }
}

.showcase-empty-notice {
  text-align: center;
  padding: 24px 10px;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* ==========================================================================
   ADMIN HEADQUARTERS (ШТАБ ВЫСШЕГО КОМАНДОВАНИЯ 2.0)
   ========================================================================== */
.admin-hq-container {
  border-color: rgba(239, 68, 68, 0.45) !important;
  background: radial-gradient(circle at top right, rgba(239, 68, 68, 0.08), transparent 60%),
              radial-gradient(circle at bottom left, rgba(56, 189, 248, 0.04), transparent 50%),
              rgba(13, 18, 28, 0.95) !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7), inset 0 0 30px rgba(239, 68, 68, 0.05);
  padding: 16px !important;
}

.admin-hq-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.admin-hq-header-left {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.admin-hq-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  align-self: flex-start;
  padding: 2px 8px;
  background: rgba(239, 68, 68, 0.18);
  border: 1px solid rgba(239, 68, 68, 0.45);
  border-radius: 999px;
  font-family: var(--font-tactical);
  font-size: 10px;
  font-weight: 900;
  color: #f87171;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.admin-hq-title {
  font-family: var(--font-tactical);
  font-size: 16px;
  font-weight: 900;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 0.5px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.admin-hq-subtitle {
  font-size: 11px;
  color: #94a3b8;
}

.admin-hq-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-admin-save-top {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #10b981, #059669);
  border: 1px solid #34d399;
  border-radius: 8px;
  color: #ffffff;
  padding: 8px 16px;
  font-family: var(--font-tactical);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
  transition: all 0.2s ease;
  user-select: none;
}

.btn-admin-save-top:hover {
  background: linear-gradient(135deg, #34d399, #10b981);
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.5);
  transform: translateY(-1px);
}

.btn-admin-save-top:active {
  transform: translateY(1px) scale(0.98);
}

/* Subtabs Container & Scrolling Arrows */
.admin-subtabs-container {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  width: 100%;
}

.admin-subtabs-arrow {
  flex-shrink: 0;
  width: 32px;
  height: 34px;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  color: #fbbf24;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  z-index: 5;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.admin-subtabs-arrow:hover {
  background: rgba(245, 158, 11, 0.25);
  border-color: #f59e0b;
  color: #fff;
  transform: scale(1.05);
}
.admin-subtabs-arrow:active {
  transform: scale(0.95);
}
.admin-subtabs-arrow .material-symbols-outlined {
  font-size: 20px;
}

/* Subtabs Nav */
.admin-subtabs-nav {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 2px 8px 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: rgba(245, 158, 11, 0.4) rgba(255, 255, 255, 0.04);
  flex: 1;
  cursor: grab;
  user-select: none;
}
.admin-subtabs-nav:active {
  cursor: grabbing;
}
.admin-subtabs-nav::-webkit-scrollbar {
  height: 5px;
  display: block;
}
.admin-subtabs-nav::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 4px;
}
.admin-subtabs-nav::-webkit-scrollbar-thumb {
  background: rgba(245, 158, 11, 0.45);
  border-radius: 4px;
}
.admin-subtabs-nav::-webkit-scrollbar-thumb:hover {
  background: rgba(245, 158, 11, 0.85);
}

.admin-subtab-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
  user-select: none;
}

.admin-subtab-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  color: #f1f5f9;
}

.admin-subtab-btn.active {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.22), rgba(185, 28, 28, 0.35));
  border-color: #ef4444;
  color: #ffffff;
  box-shadow: 0 3px 12px rgba(239, 68, 68, 0.3);
}

.admin-subtab-btn .subtab-icon {
  font-size: 14px;
}

.admin-subtab-btn .subtab-badge {
  display: inline-block;
  padding: 1px 6px;
  background: rgba(239, 68, 68, 0.3);
  border: 1px solid rgba(239, 68, 68, 0.5);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  color: #fca5a5;
}

.admin-subtab-btn.active .subtab-badge {
  background: #ef4444;
  color: #fff;
}

.admin-subtab-content {
  animation: fadeInAdminSubtab 0.22s ease-out;
}

@keyframes fadeInAdminSubtab {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Games Toolbar & Search */
.admin-games-toolbar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
  background: rgba(0, 0, 0, 0.3);
  padding: 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.admin-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.admin-search-icon {
  position: absolute;
  left: 10px;
  font-size: 14px;
  pointer-events: none;
  opacity: 0.7;
}

#adminGameSearchInput {
  width: 100%;
  padding: 8px 32px 8px 32px;
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  color: #ffffff;
  font-size: 12px;
  transition: all 0.2s ease;
}

#adminGameSearchInput:focus {
  outline: none;
  border-color: #38bdf8;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.25);
}

.admin-search-clear {
  position: absolute;
  right: 8px;
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 13px;
  cursor: pointer;
  padding: 4px;
}

.admin-category-bar {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.admin-category-bar::-webkit-scrollbar {
  display: none;
}

.admin-cat-pill {
  padding: 5px 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: #cbd5e1;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
  user-select: none;
}

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

.admin-cat-pill.active {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  border-color: #60a5fa;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35);
}

/* Batch RTP Presets Box */
.admin-rtp-presets-box {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.6), rgba(15, 23, 42, 0.8));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 14px;
}

.admin-rtp-presets-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
  font-size: 12px;
  font-weight: 800;
  color: #f1f5f9;
}

.admin-rtp-presets-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 8px;
}

.admin-rtp-preset-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  text-align: left;
}

.admin-rtp-preset-btn .preset-icon {
  font-size: 22px;
  flex-shrink: 0;
}

.admin-rtp-preset-btn .preset-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.admin-rtp-preset-btn .preset-name {
  font-size: 12px;
  font-weight: 800;
}

.admin-rtp-preset-btn .preset-desc {
  font-size: 10px;
  color: #94a3b8;
  line-height: 1.25;
}

.admin-rtp-preset-btn.win-boost {
  border-color: rgba(16, 185, 129, 0.35);
}
.admin-rtp-preset-btn.win-boost:hover {
  background: rgba(16, 185, 129, 0.15);
  border-color: #10b981;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.25);
  transform: translateY(-1px);
}
.admin-rtp-preset-btn.win-boost .preset-name {
  color: #34d399;
}

.admin-rtp-preset-btn.fair-mode {
  border-color: rgba(56, 189, 248, 0.35);
}
.admin-rtp-preset-btn.fair-mode:hover {
  background: rgba(56, 189, 248, 0.15);
  border-color: #38bdf8;
  box-shadow: 0 4px 14px rgba(56, 189, 248, 0.25);
  transform: translateY(-1px);
}
.admin-rtp-preset-btn.fair-mode .preset-name {
  color: #38bdf8;
}

.admin-rtp-preset-btn.house-win {
  border-color: rgba(239, 68, 68, 0.35);
}
.admin-rtp-preset-btn.house-win:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: #ef4444;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.25);
  transform: translateY(-1px);
}
.admin-rtp-preset-btn.house-win .preset-name {
  color: #f87171;
}

/* Admin Section Cards (Grants, Promo, Security) */
.admin-section-card {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 14px;
  margin-bottom: 12px;
}

.admin-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.admin-section-title {
  font-family: var(--font-tactical);
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 6px;
}

.admin-section-desc {
  font-size: 11px;
  color: #94a3b8;
  margin-bottom: 10px;
  line-height: 1.4;
}

.admin-quick-pills-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.admin-quick-chip {
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  color: #cbd5e1;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.admin-quick-chip:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

.admin-quick-chip:active {
  transform: scale(0.96);
}

.admin-games-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 600px) {
  .admin-games-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.admin-game-card {
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid var(--border-glass);
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.18s ease;
}

.admin-game-card:hover {
  border-color: rgba(255, 70, 85, 0.4);
}

.admin-game-card-title {
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #fff;
}

.admin-control-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.admin-label-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: #94a3b8;
}

.admin-val-pill {
  font-family: var(--font-tactical);
  font-weight: 800;
  font-size: 12px;
  color: #fbbf24;
}

.admin-checkbox-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  color: #f1f5f9;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 8px 12px;
  border-radius: 8px;
  margin: 6px 0 10px 0;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
  -webkit-user-select: none;
  width: 100%;
  box-sizing: border-box;
}

.admin-checkbox-label:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(56, 189, 248, 0.4);
}

.admin-checkbox-label input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #64748b;
  border-radius: 5px;
  background: #0f172a;
  cursor: pointer;
  display: inline-grid;
  place-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
  margin: 0;
}

.admin-checkbox-label input[type="checkbox"]:checked {
  background: linear-gradient(135deg, #10b981, #059669);
  border-color: #10b981;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.45);
}

.admin-checkbox-label input[type="checkbox"]:checked::before {
  content: "✓";
  font-size: 13px;
  font-weight: 900;
  color: #ffffff;
  line-height: 1;
}

.admin-checkbox-label:has(input[type="checkbox"]:checked) {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.45);
  color: #ffffff;
}

/* ==========================================================================
   MAIN HOME HUB (ГЛАВНЫЙ ЭКРАН) & UNIVERSAL BACK HEADER
   ========================================================================== */
.nav-tabs-wrapper {
  display: none !important;
}

/* Universal Back Header inside games */
.pane-back-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  margin-bottom: 12px;
  background: rgba(13, 18, 28, 0.85);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-md);
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

.btn-pane-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(255, 70, 85, 0.14);
  border: 1px solid rgba(255, 70, 85, 0.35);
  border-radius: 8px;
  color: #ff4655;
  font-family: var(--font-tactical);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.18s ease;
}

.btn-pane-back:active {
  transform: scale(0.96);
  background: rgba(255, 70, 85, 0.25);
}

.pane-back-arrow {
  font-size: 16px;
  line-height: 1;
}

.pane-active-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-tactical);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: var(--accent-cyan);
  text-transform: uppercase;
}

.pane-active-title .material-symbols-outlined {
  text-transform: none !important;
  font-size: 18px !important;
  line-height: 1 !important;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}

/* Home Hub Layout */
.home-container {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

/* Hero Agent Card */
.home-hero-card {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(22, 33, 54, 0.9), rgba(13, 18, 28, 0.95));
  border: 1px solid rgba(0, 245, 212, 0.28);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.home-hero-glow {
  position: absolute;
  top: -40px;
  left: -40px;
  width: 130px;
  height: 130px;
  background: radial-gradient(circle, rgba(0, 245, 212, 0.22) 0%, transparent 70%);
  pointer-events: none;
}

.home-hero-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.home-agent-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-val-red), var(--accent-purple));
  border: 2px solid #00f5d4;
  box-shadow: 0 0 15px rgba(0, 245, 212, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
}

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

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

.home-agent-title {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-muted);
  letter-spacing: 0.8px;
}

.home-agent-name {
  font-size: 16px;
  font-weight: 800;
  color: #fff;
}

.home-agent-role {
  padding: 1px 6px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #fbbf24;
}

.home-agent-rank-meta {
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.home-dot {
  opacity: 0.4;
}

.home-daily-drop-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 8px 12px;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.25), rgba(217, 119, 6, 0.3));
  border: 1px solid #f59e0b;
  border-radius: 10px;
  color: #fef3c7;
  font-family: var(--font-tactical);
  cursor: pointer;
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.3);
  transition: all 0.18s ease;
}

.home-daily-drop-btn:active {
  transform: scale(0.95);
}

.home-daily-icon {
  font-size: 20px;
  line-height: 1;
}

.home-daily-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.6px;
}

/* Featured Big Banner */
.home-featured-banner {
  position: relative;
  overflow: hidden;
  padding: 16px;
  background: linear-gradient(135deg, rgba(255, 70, 85, 0.15), rgba(15, 23, 42, 0.95) 60%, rgba(0, 245, 212, 0.12));
  border: 1px solid rgba(255, 70, 85, 0.4);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6), 0 0 24px rgba(255, 70, 85, 0.2);
  cursor: pointer;
  transition: all 0.2s ease;
}

.home-featured-banner:hover {
  border-color: #00f5d4;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6), 0 0 28px rgba(0, 245, 212, 0.25);
  transform: translateY(-2px);
}

.featured-banner-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(255, 70, 85, 0.25);
  border: 1px solid #ff4655;
  color: #ff4655;
  font-family: var(--font-tactical);
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.8px;
  margin-bottom: 8px;
}

.featured-banner-title {
  font-family: var(--font-tactical);
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.featured-banner-desc {
  font-size: 12px;
  color: #cbd5e1;
  margin-bottom: 12px;
  line-height: 1.4;
}

.featured-banner-actions {
  display: flex;
  gap: 8px;
}

.btn-featured-play {
  flex: 1;
  padding: 9px 12px;
  background: linear-gradient(135deg, #ff4655, #dc2626);
  border: none;
  border-radius: 8px;
  color: #fff;
  font-family: var(--font-tactical);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 0 15px rgba(255, 70, 85, 0.4);
  transition: all 0.15s ease;
}

.btn-featured-tower {
  flex: 1;
  padding: 9px 12px;
  background: linear-gradient(135deg, rgba(0, 245, 212, 0.2), rgba(56, 189, 248, 0.25));
  border: 1px solid #00f5d4;
  border-radius: 8px;
  color: #00f5d4;
  font-family: var(--font-tactical);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 0 15px rgba(0, 245, 212, 0.25);
  transition: all 0.15s ease;
}

/* Category Filter Pills */
.home-categories-wrapper {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 6px 4px 10px 4px !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.home-categories-wrapper::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.home-cat-pill {
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 20px;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid var(--border-glass);
  color: var(--text-muted);
  font-family: var(--font-tactical);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.4px;
  cursor: pointer;
  white-space: nowrap !important;
  transition: all 0.18s ease;
}

.home-cat-pill:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.25);
}

.home-cat-pill.active {
  background: linear-gradient(135deg, rgba(0, 245, 212, 0.25), rgba(56, 189, 248, 0.25)) !important;
  border-color: #00f5d4 !important;
  color: #00f5d4 !important;
  box-shadow: 0 0 14px rgba(0, 245, 212, 0.35) !important;
}

/* Home Games Sections */
.home-games-sections {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-bottom: 28px;
}

.home-section-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.home-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.home-section-title {
  font-family: var(--font-tactical);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #f1f5f9;
  display: flex;
  align-items: center;
  gap: 8px;
}

.home-section-count {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: #00f5d4;
  background: rgba(0, 245, 212, 0.08);
  border: 1px solid rgba(0, 245, 212, 0.2);
  padding: 2px 10px;
  border-radius: 12px;
}

/* Games Grid */
.home-games-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

@media (min-width: 680px) {
  .home-games-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 900px) {
  .home-games-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.home-game-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 142px;
  padding: 10px;
  background: linear-gradient(145deg, rgba(20, 28, 44, 0.85), rgba(10, 15, 26, 0.95));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.home-game-card * {
  pointer-events: none;
}

.home-game-card:hover {
  transform: translateY(-3px);
  border-color: rgba(0, 245, 212, 0.4);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6), 0 0 18px rgba(0, 245, 212, 0.15);
}

.home-game-card:active {
  transform: scale(0.97);
}

.home-game-card-glow {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.35;
}

.glow-red { background: radial-gradient(circle, #ff4655 0%, transparent 70%); }
.glow-gold { background: radial-gradient(circle, #f59e0b 0%, transparent 70%); }
.glow-cyan { background: radial-gradient(circle, #00f5d4 0%, transparent 70%); }
.glow-purple { background: radial-gradient(circle, #a855f7 0%, transparent 70%); }

.home-game-badge {
  display: none !important;
  position: absolute;
  top: 8px;
  right: 8px;
  max-width: 58%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: var(--font-tactical);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.4px;
  border: 1px solid;
  z-index: 2;
  pointer-events: none;
}

.badge-hot { color: #f59e0b; border-color: rgba(245, 158, 11, 0.4); background: rgba(245, 158, 11, 0.12); }
.badge-x { color: #ff4655; border-color: rgba(255, 70, 85, 0.4); background: rgba(255, 70, 85, 0.12); }
.badge-new { color: #00f5d4; border-color: rgba(0, 245, 212, 0.4); background: rgba(0, 245, 212, 0.12); }
.badge-pop { color: #fbbf24; border-color: rgba(251, 191, 36, 0.4); background: rgba(251, 191, 36, 0.12); }
.badge-fast { color: #38bdf8; border-color: rgba(56, 189, 248, 0.4); background: rgba(56, 189, 248, 0.12); }
.badge-mod { color: #00f5d4; border-color: rgba(0, 245, 212, 0.4); background: rgba(0, 245, 212, 0.12); }
.badge-craft { color: #c084fc; border-color: rgba(192, 132, 252, 0.4); background: rgba(192, 132, 252, 0.12); }
.badge-pvp { color: #f87171; border-color: rgba(248, 113, 113, 0.4); background: rgba(248, 113, 113, 0.12); }
.badge-cards { color: #a78bfa; border-color: rgba(167, 139, 250, 0.4); background: rgba(167, 139, 250, 0.12); }
.badge-jackpot { color: #f59e0b; border-color: rgba(245, 158, 11, 0.4); background: rgba(245, 158, 11, 0.12); }
.badge-brain { color: #38bdf8; border-color: rgba(56, 189, 248, 0.4); background: rgba(56, 189, 248, 0.12); }
.badge-empire { color: #34d399; border-color: rgba(52, 211, 153, 0.4); background: rgba(52, 211, 153, 0.12); }
.badge-bp { color: #eab308; border-color: rgba(234, 179, 8, 0.4); background: rgba(234, 179, 8, 0.12); }
.badge-prestige { color: #f59e0b; border-color: rgba(245, 158, 11, 0.4); background: rgba(245, 158, 11, 0.12); }
.badge-inv { color: #38bdf8; border-color: rgba(56, 189, 248, 0.4); background: rgba(56, 189, 248, 0.12); }
.badge-art { color: #c084fc; border-color: rgba(192, 132, 252, 0.4); background: rgba(192, 132, 252, 0.12); }
.badge-bank { color: #fbbf24; border-color: rgba(251, 191, 36, 0.4); background: rgba(251, 191, 36, 0.12); }
.badge-ach { color: #00f5d4; border-color: rgba(0, 245, 212, 0.4); background: rgba(0, 245, 212, 0.12); }
.badge-fire { color: #ff4655; border-color: rgba(255, 70, 85, 0.4); background: rgba(255, 70, 85, 0.12); }
.badge-profile { color: #a855f7; border-color: rgba(168, 85, 247, 0.4); background: rgba(168, 85, 247, 0.12); }
.badge-admin { color: #f87171; border-color: rgba(248, 113, 113, 0.5); background: rgba(220, 38, 38, 0.2); }

.home-game-icon {
  font-size: 32px;
  line-height: 1;
  margin-bottom: 6px;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.5));
}

.home-game-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 8px;
}

.home-game-title {
  font-family: var(--font-tactical);
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.4px;
  line-height: 1.2;
}

.home-game-desc {
  font-size: 11px;
  color: #94a3b8;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  min-height: 30px;
  margin-top: 2px;
}

.btn-home-play {
  width: 100%;
  padding: 6px 0;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #f1f5f9;
  font-family: var(--font-tactical);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.6px;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: center;
}

.home-game-card:hover .btn-home-play {
  background: linear-gradient(135deg, rgba(0, 245, 212, 0.25), rgba(56, 189, 248, 0.25));
  border-color: #00f5d4;
  color: #00f5d4;
  box-shadow: 0 0 10px rgba(0, 245, 212, 0.25);
}

/* ==========================================================================
   JUICY FX, SCREEN SHAKE & ROBLOX ADMIN ABUSE STYLES
   ========================================================================== */

@keyframes screenShake {
  0% { transform: translate(0, 0) rotate(0deg); }
  20% { transform: translate(-4px, 3px) rotate(-0.5deg); }
  40% { transform: translate(4px, -3px) rotate(0.5deg); }
  60% { transform: translate(-3px, -2px) rotate(-0.3deg); }
  80% { transform: translate(3px, 2px) rotate(0.3deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}
.screen-shake-anim {
  animation: screenShake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

/* 1. Live Drops Bar */
.live-drops-bar {
  width: 100%;
  background: rgba(10, 15, 26, 0.92);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px);
  overflow: hidden;
  height: 38px;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 100;
}
.live-drops-tag {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 70, 85, 0.2);
  border-right: 1px solid rgba(255, 70, 85, 0.4);
  color: #ff4655;
  font-family: var(--font-tactical);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.8px;
  padding: 0 12px;
  height: 100%;
  flex-shrink: 0;
  text-transform: uppercase;
}
.live-drops-tag .pulse-dot {
  width: 6px;
  height: 6px;
  background: #ff4655;
  border-radius: 50%;
  box-shadow: 0 0 8px #ff4655;
  animation: livePulse 1.2s infinite ease-in-out;
}
@keyframes livePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.8); }
}
.live-drops-track {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.live-drops-track::-webkit-scrollbar {
  display: none;
}
.live-drop-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 3px 10px;
  font-size: 11px;
  color: #cbd5e1;
  animation: fadeInDrop 0.35s ease;
  flex-shrink: 0;
}
.live-drop-chip .chip-name {
  font-weight: 700;
  color: #fff;
}
.live-drop-chip .chip-win {
  color: #00f5d4;
  font-weight: 800;
}
@keyframes fadeInDrop {
  from { opacity: 0; transform: translateY(-4px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* 2. Admin Abuse Banner */
.admin-event-banner {
  width: 100%;
  background: linear-gradient(90deg, rgba(239, 68, 68, 0.22), rgba(168, 85, 247, 0.25), rgba(239, 68, 68, 0.22));
  border-bottom: 2px solid #ef4444;
  box-shadow: 0 4px 20px rgba(239, 68, 68, 0.35);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  position: relative;
  z-index: 95;
  animation: eventGlowPulse 2s infinite alternate;
}
@keyframes eventGlowPulse {
  0% { box-shadow: 0 0 15px rgba(239, 68, 68, 0.3); border-bottom-color: #ef4444; }
  100% { box-shadow: 0 0 25px rgba(168, 85, 247, 0.5); border-bottom-color: #a855f7; }
}
.admin-event-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #ef4444;
  color: #fff;
  font-family: var(--font-tactical);
  font-weight: 900;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  flex-shrink: 0;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.6);
}
.admin-event-info {
  flex: 1;
  min-width: 0;
}
.admin-event-title {
  font-family: var(--font-tactical);
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1.2;
}
.admin-event-desc {
  font-size: 11px;
  color: #cbd5e1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin-event-timer-box {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
}
.admin-event-timer-label {
  font-size: 9px;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.admin-event-timer-val {
  font-family: var(--font-tactical);
  font-size: 15px;
  font-weight: 900;
  color: #fbbf24;
  letter-spacing: 1px;
}

/* 3. Meteor Shower */
.meteor-rain-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 99999;
  overflow: hidden;
}
.falling-meteor {
  position: absolute;
  pointer-events: auto;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  user-select: none;
  touch-action: manipulation;
  transition: transform 0.1s;
}
.falling-meteor:active {
  transform: scale(1.3);
}
.meteor-crystal {
  font-size: 30px;
  filter: drop-shadow(0 0 12px #00f5d4) drop-shadow(0 0 20px #38bdf8);
  animation: meteorSpin 3s linear infinite;
}
@keyframes meteorSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.meteor-tap-pill {
  font-family: var(--font-tactical);
  font-size: 10px;
  font-weight: 900;
  background: rgba(0, 245, 212, 0.25);
  border: 1px solid #00f5d4;
  color: #00f5d4;
  padding: 1px 6px;
  border-radius: 10px;
  margin-top: 2px;
  box-shadow: 0 0 8px rgba(0, 245, 212, 0.4);
}
.meteor-float-reward {
  position: absolute;
  pointer-events: none;
  font-family: var(--font-tactical);
  font-size: 16px;
  font-weight: 900;
  color: #fbbf24;
  text-shadow: 0 0 8px rgba(251, 191, 36, 0.8);
  animation: floatUpFade 1s forwards ease-out;
  z-index: 100000;
}
@keyframes floatUpFade {
  0% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-40px) scale(1.3); }
}

/* 4. Admin Abuse Controls */
.admin-abuse-card {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.12), rgba(168, 85, 247, 0.15));
  border: 1px solid rgba(239, 68, 68, 0.5);
  box-shadow: 0 0 25px rgba(239, 68, 68, 0.15);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 16px;
}
.admin-abuse-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.admin-abuse-title {
  font-family: var(--font-tactical);
  font-size: 16px;
  font-weight: 900;
  color: #f87171;
  letter-spacing: 0.6px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.admin-abuse-events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
  margin: 10px 0;
}
.admin-abuse-btn {
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 10px;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.admin-abuse-btn:hover {
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.15);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
}
.admin-abuse-btn-title {
  font-family: var(--font-tactical);
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 5px;
}
.admin-abuse-btn-desc {
  font-size: 10px;
  color: #94a3b8;
  line-height: 1.25;
}
.admin-abuse-status-bar {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  font-size: 12px;
}

/* ==========================================================================
   TURBO MODE & FAST-PLAY AAA SUITE STYLES
   ========================================================================== */

.turbo-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(251, 191, 36, 0.08);
  border: 1px solid rgba(251, 191, 36, 0.3);
  color: #fbbf24;
  padding: 5px 12px;
  border-radius: 20px;
  font-family: var(--font-tactical);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.6px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}
.turbo-toggle-btn:hover {
  background: rgba(251, 191, 36, 0.16);
  border-color: #fbbf24;
  transform: translateY(-1px);
}
.turbo-toggle-btn.active {
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  border-color: #fbbf24;
  color: #fff;
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  animation: turboPulse 1.4s infinite alternate;
}
@keyframes turboPulse {
  0% { box-shadow: 0 0 12px rgba(245, 158, 11, 0.4); }
  100% { box-shadow: 0 0 22px rgba(239, 68, 68, 0.7); }
}
.turbo-bolt {
  font-size: 13px;
  line-height: 1;
}

/* Rocket Automation Dashboard */
.rocket-automation-box {
  background: rgba(13, 19, 33, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  margin-bottom: 12px;
}
.automation-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.automation-field {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 220px;
}
.automation-label {
  font-family: var(--font-tactical);
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  white-space: nowrap;
}
.auto-cashout-group {
  display: flex;
  align-items: center;
  gap: 4px;
}
.input-bet-small {
  width: 65px;
  padding: 5px 8px;
  background: rgba(4, 7, 14, 0.8);
  border: 1px solid var(--border-glass);
  border-radius: 6px;
  color: #fff;
  font-family: var(--font-tactical);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
  outline: none;
  transition: all 0.15s ease;
}
.input-bet-small:focus {
  border-color: #00f5d4;
  box-shadow: 0 0 8px rgba(0, 245, 212, 0.3);
}
.auto-bet-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 245, 212, 0.08);
  border: 1px solid rgba(0, 245, 212, 0.3);
  color: #00f5d4;
  padding: 5px 12px;
  border-radius: 20px;
  font-family: var(--font-tactical);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.6px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.auto-bet-toggle-btn:hover {
  background: rgba(0, 245, 212, 0.16);
  border-color: #00f5d4;
}
.auto-bet-toggle-btn.active {
  background: linear-gradient(135deg, #10b981, #00f5d4);
  border-color: #00f5d4;
  color: #07090e;
  font-weight: 900;
  box-shadow: 0 0 16px rgba(0, 245, 212, 0.5);
}

.btn-turbo-action {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(239, 68, 68, 0.25)) !important;
  border: 1px solid #f59e0b !important;
  color: #fbbf24 !important;
  font-weight: 900 !important;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.3) !important;
}
.btn-turbo-action:hover {
  background: linear-gradient(135deg, #f59e0b, #ef4444) !important;
  color: #fff !important;
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.6) !important;
}

/* ==========================================================================
   GLOBAL AAA POLISH & CYBERPUNK HUD UPGRADES
   ========================================================================== */

/* Modern Game Header Glow */
.game-header {
  position: relative;
  padding-bottom: 8px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.game-header::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, #ff4655, #00f5d4, transparent);
}

/* Enhanced Game Box Specular Depth */
.game-box {
  background: linear-gradient(155deg, rgba(16, 24, 40, 0.94), rgba(7, 11, 20, 0.98)) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  border-radius: var(--radius-lg) !important;
}

/* Rocket Arena HUD Grid */
.rocket-arena {
  background: radial-gradient(circle at 50% 50%, rgba(139, 92, 246, 0.12) 0%, rgba(7, 9, 14, 0.96) 80%) !important;
  border: 1px solid rgba(139, 92, 246, 0.25) !important;
  box-shadow: inset 0 0 35px rgba(0, 0, 0, 0.8), 0 8px 24px rgba(0, 0, 0, 0.5) !important;
  position: relative;
  overflow: hidden;
}
.rocket-arena::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
}

/* Tamaev Quote Box High-Tech Border */
.tamaev-quote-box {
  background: linear-gradient(90deg, rgba(255, 70, 85, 0.12), rgba(15, 23, 42, 0.6)) !important;
  border-left: 3px solid #ff4655 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
  font-family: var(--font-tactical) !important;
  letter-spacing: 0.5px !important;
}

/* Mines Tiles Cyberpunk Glow */
.mines-tile {
  background: linear-gradient(145deg, rgba(28, 38, 60, 0.9), rgba(12, 17, 30, 0.95)) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 4px 12px rgba(0, 0, 0, 0.45) !important;
  transition: all 0.16s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.mines-tile:hover:not(.revealed) {
  border-color: #00f5d4 !important;
  box-shadow: 0 0 14px rgba(0, 245, 212, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
  transform: translateY(-2px) scale(1.03) !important;
}
.mines-tile:active:not(.revealed) {
  transform: scale(0.95) !important;
}
.mines-tile.revealed.tile-safe {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(5, 150, 105, 0.35)) !important;
  border-color: #10b981 !important;
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.4) !important;
}
.mines-tile.revealed.tile-mine {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.35), rgba(185, 28, 28, 0.45)) !important;
  border-color: #ef4444 !important;
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.6) !important;
}

/* Quick Bet Button Polish */
.quick-bet-btn {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #cbd5e1 !important;
  font-family: var(--font-tactical) !important;
  font-weight: 800 !important;
  letter-spacing: 0.4px !important;
  transition: all 0.16s ease !important;
}
.quick-bet-btn:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: #00f5d4 !important;
  color: #00f5d4 !important;
}
.quick-bet-btn.active {
  background: linear-gradient(135deg, rgba(0, 245, 212, 0.25), rgba(56, 189, 248, 0.25)) !important;
  border-color: #00f5d4 !important;
  color: #00f5d4 !important;
  box-shadow: 0 0 10px rgba(0, 245, 212, 0.3) !important;
}

/* ==============================================================================
   15. CYBER SLOTS 777 STYLES
   ============================================================================== */
.slot-game-box {
  max-width: 440px;
  margin: 0 auto;
}

.btn-slot-info {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fbbf24;
  padding: 6px 12px;
  border-radius: 8px;
  font-family: var(--font-tactical);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-slot-info:hover {
  background: rgba(251, 191, 36, 0.15);
  border-color: #fbbf24;
}

.slot-machine-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-bottom: 14px;
}

.btn-slot-side-help {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: linear-gradient(180deg, rgba(20, 30, 48, 0.95), rgba(10, 16, 26, 0.98));
  border: 1.5px solid rgba(251, 191, 36, 0.5);
  border-radius: 12px;
  padding: 16px 8px;
  color: #fbbf24;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5), 0 0 12px rgba(251, 191, 36, 0.2);
  font-family: var(--font-tactical);
  font-weight: 800;
  min-width: 54px;
  flex-shrink: 0;
  user-select: none;
}
.btn-slot-side-help:hover {
  transform: translateY(-2px);
  border-color: #fbbf24;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6), 0 0 18px rgba(251, 191, 36, 0.4);
}
.btn-slot-side-help:active {
  transform: scale(0.96);
}
.side-help-icon {
  font-size: 20px;
}
.side-help-text {
  font-size: 9px;
  letter-spacing: 1.5px;
  font-weight: 900;
}
.side-help-sub {
  font-size: 7.5px;
  color: #94a3b8;
  letter-spacing: 0.5px;
}

.slot-cabinet {
  flex: 1;
  background: linear-gradient(145deg, #0f172a, #090d16);
  border: 2px solid rgba(251, 191, 36, 0.35);
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 20px rgba(251, 191, 36, 0.12);
  margin-bottom: 0;
}

.slot-cabinet-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px 10px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 10px;
}

.slot-cabinet-title {
  font-family: var(--font-tactical);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 1.5px;
  color: #fbbf24;
  text-shadow: 0 0 10px rgba(251, 191, 36, 0.6);
}

.slot-cabinet-lights {
  display: flex;
  gap: 6px;
}
.cabinet-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  animation: lightBlink 1.2s infinite alternate;
}
.dot-red { background: #ef4444; box-shadow: 0 0 6px #ef4444; }
.dot-yellow { background: #eab308; box-shadow: 0 0 6px #eab308; animation-delay: 0.4s; }
.dot-green { background: #10b981; box-shadow: 0 0 6px #10b981; animation-delay: 0.8s; }

@keyframes lightBlink {
  0% { opacity: 0.4; }
  100% { opacity: 1; }
}

.slot-reels-window {
  position: relative;
  display: flex;
  height: 216px;
  border-radius: 12px;
  background: radial-gradient(circle at center, #111827 0%, #030712 100%);
  border: 2px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
  box-shadow: inset 0 0 35px rgba(0, 0, 0, 0.9);
}

.slot-reel-col {
  flex: 1;
  height: 216px;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
}

.slot-reel-divider {
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.25) 50%, transparent 100%);
  z-index: 5;
}

.slot-reel-strip {
  width: 100%;
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform;
}

.slot-symbol {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  user-select: none;
}
.slot-sym-emoji {
  font-size: 36px;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.8));
  transition: transform 0.2s ease;
}
.slot-symbol.rolling .slot-sym-emoji {
  filter: blur(1.5px);
}

/* Payline Laser (Active Center Row) */
.slot-payline-laser {
  position: absolute;
  top: 72px;
  left: 0;
  width: 100%;
  height: 72px;
  pointer-events: none;
  z-index: 10;
  border-top: 1.5px dashed rgba(251, 191, 36, 0.35);
  border-bottom: 1.5px dashed rgba(251, 191, 36, 0.35);
  background: rgba(251, 191, 36, 0.03);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px;
}
.slot-payline-laser .laser-pointer {
  font-size: 11px;
  color: #fbbf24;
  opacity: 0.6;
}
.slot-payline-laser.active-win {
  border-top: 2px solid #fbbf24;
  border-bottom: 2px solid #fbbf24;
  background: rgba(251, 191, 36, 0.18);
  box-shadow: 0 0 25px rgba(251, 191, 36, 0.45);
  animation: paylinePulse 0.6s infinite alternate;
}
.slot-payline-laser.active-win .laser-pointer {
  opacity: 1;
  text-shadow: 0 0 8px #fbbf24;
}

@keyframes paylinePulse {
  0% { opacity: 0.7; }
  100% { opacity: 1; }
}

.slot-glass-glare {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, transparent 45%, rgba(0, 0, 0, 0.3) 100%);
  z-index: 8;
}

.slot-win-box {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(5, 150, 105, 0.25));
  border: 1px solid #10b981;
  border-radius: 12px;
  padding: 12px;
  text-align: center;
  margin-bottom: 12px;
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.3);
  animation: fadeInDown 0.3s ease;
}
.slot-win-title {
  font-family: var(--font-tactical);
  font-size: 16px;
  font-weight: 900;
  color: #10b981;
}
.slot-win-desc {
  font-size: 13px;
  color: #e2e8f0;
  margin-top: 4px;
}

.btn-slot-spin {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  box-shadow: 0 4px 20px rgba(245, 158, 11, 0.45) !important;
  color: #ffffff !important;
  font-size: 16px !important;
  padding: 14px !important;
}
/* Clean 2-Row Slot Bet Bar & Grid */
.slot-stake-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  margin-top: 10px;
}
.slot-stake-label {
  font-family: var(--font-tactical);
  font-size: 11px;
  font-weight: 800;
  color: #94a3b8;
  letter-spacing: 0.5px;
}
.slot-input-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  max-width: 170px;
}
.slot-coin-icon {
  font-size: 16px;
}
.slot-custom-input {
  width: 100%;
  padding: 6px 8px;
  font-size: 16px;
  text-align: right;
}
.slot-quick-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 5px;
  margin-top: 8px;
}
.slot-quick-bet {
  padding: 8px 2px;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

/* Custom Vector Slot Stickers */
.slot-sym-svg {
  width: 44px;
  height: 44px;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.6));
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.slot-symbol:hover .slot-sym-svg {
  transform: scale(1.1);
}

/* Modal Payout Table */
.slot-payout-modal-content {
  max-width: 400px;
  background: #0f172a;
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: 16px;
  padding: 20px;
}
.slot-payout-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 380px;
  overflow-y: auto;
}
.slot-payout-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  font-size: 13px;
}
.slot-payout-row.row-jackpot {
  background: rgba(251, 191, 36, 0.15);
  border: 1px solid rgba(251, 191, 36, 0.4);
}
.slot-payout-row.row-epic {
  background: rgba(244, 63, 94, 0.12);
  border: 1px solid rgba(244, 63, 94, 0.3);
}
.slot-payout-row.row-rare {
  background: rgba(6, 182, 212, 0.1);
  border: 1px solid rgba(6, 182, 212, 0.25);
}
.payout-symbols {
  font-size: 16px;
  min-width: 100px;
}
.payout-name {
  color: #cbd5e1;
  flex: 1;
  text-align: left;
  padding: 0 8px;
}
.payout-mult {
  font-family: var(--font-tactical);
  font-weight: 900;
  color: #fbbf24;
  font-size: 14px;
}

/* ==============================================================================
   16. CLICKER (MONEY FARMING) STYLES
   ============================================================================== */
.clicker-game-box {
  max-width: 440px;
  margin: 0 auto;
}

.clicker-rate-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(6, 182, 212, 0.15);
  border: 1px solid rgba(6, 182, 212, 0.4);
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  color: #38bdf8;
}

.clicker-stage {
  position: relative;
  width: 100%;
  height: 270px;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  margin: 10px 0 16px 0;
}

.clicker-coin-aura {
  position: absolute;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(251, 191, 36, 0.22) 0%, rgba(6, 182, 212, 0.1) 50%, transparent 75%);
  filter: blur(12px);
  animation: auraPulse 2.8s infinite alternate ease-in-out;
  pointer-events: none;
}

@keyframes auraPulse {
  0% { transform: scale(0.92); opacity: 0.6; }
  100% { transform: scale(1.1); opacity: 1; }
}

.clicker-coin-btn {
  width: 190px;
  height: 190px;
  border-radius: 50%;
  border: none;
  background: transparent;
  cursor: pointer;
  position: relative;
  z-index: 5;
  outline: none;
  touch-action: manipulation;
  transition: transform 0.08s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.clicker-coin-btn:active,
.clicker-coin-btn.tapping {
  transform: scale(0.92);
}

.clicker-coin-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.clicker-coin-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 25px rgba(251, 191, 36, 0.55));
  pointer-events: none;
}

.clicker-tap-hint {
  position: absolute;
  bottom: 12px;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(251, 191, 36, 0.6);
  color: #fbbf24;
  font-family: var(--font-tactical);
  font-weight: 900;
  font-size: 11px;
  letter-spacing: 1px;
  padding: 3px 10px;
  border-radius: 12px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
  pointer-events: none;
}

/* Floating particle when tapping */
.clicker-particles-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 25;
}

.clicker-float-particle {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  font-family: var(--font-tactical);
  font-weight: 900;
  font-size: 22px;
  color: #fbbf24;
  text-shadow: 0 0 12px rgba(251, 191, 36, 0.85), 0 2px 4px rgba(0,0,0,0.9);
  animation: floatUpFade 0.85s forwards cubic-bezier(0.1, 0.8, 0.3, 1);
  transform: translate(-50%, -50%);
}

@keyframes floatUpFade {
  0% {
    transform: translate(-50%, 0) scale(0.9);
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -75px) scale(1.25);
    opacity: 0;
  }
}

/* Energy Bar */
.clicker-energy-box {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 14px;
}
.clicker-energy-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  margin-bottom: 8px;
}
.energy-label {
  color: #94a3b8;
  font-weight: 600;
}
.energy-numbers {
  font-family: var(--font-tactical);
  font-weight: 800;
  font-size: 14px;
}
.clicker-energy-bar {
  width: 100%;
  height: 12px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.clicker-energy-fill {
  height: 100%;
  background: linear-gradient(90deg, #06b6d4, #10b981);
  border-radius: 6px;
  transition: width 0.15s ease, background 0.3s ease;
  box-shadow: 0 0 10px rgba(6, 182, 212, 0.5);
}

/* Stats Grid */
.clicker-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.clicker-stat-card {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.clicker-stat-card .stat-icon {
  font-size: 20px;
}
.clicker-stat-card .stat-title {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 600;
}
.clicker-stat-card .stat-value {
  font-family: var(--font-tactical);
  font-weight: 800;
  font-size: 14px;
  color: #f8fafc;
}

/* ==============================================================================
   3D VALORANT WEAPON SHOWCASE STAGE & FLOATING ENGINE
   ============================================================================== */

.val-3d-stage {
  position: relative;
  width: 100%;
  height: 116px;
  perspective: 850px;
  transform-style: preserve-3d;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2px 0 6px 0;
  cursor: pointer;
  user-select: none;
  overflow: visible;
  transition: transform 0.2s cubic-bezier(0.2, 0, 0, 1);
}

.val-3d-stage:hover .val-3d-inspect-hint {
  opacity: 1;
  transform: translateY(-2px);
  background: rgba(0, 0, 0, 0.85);
  border-color: var(--skin-accent, #38bdf8);
}

/* Ambient Radiant Halo */
.val-3d-aura {
  position: absolute;
  width: 135px;
  height: 85px;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(16px);
  opacity: 0.85;
  transition: transform 0.25s ease;
  z-index: 1;
}

/* 3D Floor Pedestal Emitter */
.val-3d-pedestal {
  position: absolute;
  bottom: 6px;
  width: 125px;
  height: 38px;
  border-radius: 50%;
  transform: rotateX(66deg) translateZ(-10px);
  border: 1.5px solid rgba(var(--skin-glow-rgb, 56, 189, 248), 0.55);
  background: radial-gradient(ellipse at center, rgba(var(--skin-glow-rgb, 56, 189, 248), 0.32) 0%, rgba(var(--skin-glow-rgb, 56, 189, 248), 0.08) 55%, transparent 75%);
  box-shadow: 0 0 16px rgba(var(--skin-glow-rgb, 56, 189, 248), 0.45), inset 0 0 10px rgba(var(--skin-glow-rgb, 56, 189, 248), 0.35);
  pointer-events: none;
  z-index: 1;
}

.val-3d-pedestal-ring {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.2px dashed rgba(var(--skin-glow-rgb, 56, 189, 248), 0.7);
  animation: valPedestalSpin 14s linear infinite;
}

.val-3d-pedestal-grid {
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(var(--skin-glow-rgb, 56, 189, 248), 0.15) 5px, rgba(var(--skin-glow-rgb, 56, 189, 248), 0.15) 6px);
  opacity: 0.65;
}

/* Dynamic Floor Contact Shadow */
.val-3d-shadow {
  position: absolute;
  bottom: -6px;
  left: calc(50% - 45px);
  width: 90px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.8) 0%, transparent 72%);
  animation: valShadowFloat 3.8s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
  transition: transform 0.15s ease;
}

/* 3D Floating Weapon Model Object */
.val-3d-weapon-obj {
  position: relative;
  z-index: 3;
  width: 146px;
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
  transform: rotateX(12deg) rotateY(-18deg) rotateZ(2.5deg);
  animation: valFloat3D 3.8s ease-in-out infinite;
  pointer-events: none;
  will-change: transform;
}

/* Specular High-Gloss Sheen Swipe */
.val-3d-specular-sheen {
  position: absolute;
  inset: -12px;
  background: linear-gradient(105deg, transparent 20%, rgba(255, 255, 255, 0.45) 45%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0.45) 55%, transparent 75%);
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: overlay;
  animation: valSpecularSwipe 4.8s ease-in-out infinite;
  z-index: 4;
}

/* 3D Floating Inspect Hint Badge */
.val-3d-inspect-hint {
  position: absolute;
  bottom: 2px;
  right: 6px;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: var(--skin-accent, #38bdf8);
  background: rgba(0, 0, 0, 0.65);
  border: 1px solid rgba(var(--skin-glow-rgb, 56, 189, 248), 0.45);
  padding: 2px 7px;
  border-radius: 4px;
  pointer-events: none;
  opacity: 0.82;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all 0.2s ease;
  z-index: 5;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.hint-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--skin-accent, #38bdf8);
  box-shadow: 0 0 6px var(--skin-accent, #38bdf8);
  animation: valPulseDot 1.6s infinite ease-in-out;
}

/* ==============================================================================
   SERIES PARTICLES & THEMATIC EFFECTS
   ============================================================================== */

.val-3d-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  overflow: visible;
}

.v-mote {
  position: absolute;
  font-size: 11px;
  filter: drop-shadow(0 0 6px var(--skin-glow, #38bdf8));
  pointer-events: none;
  animation: valMoteDrift 3s ease-in-out infinite;
}

.val-fx-champions .m1 { top: 12px; left: 16px; animation-delay: 0s; color: #fbbf24; }
.val-fx-champions .m2 { top: 18px; right: 20px; animation-delay: 1.2s; color: #fde047; }
.val-fx-champions .m3 { bottom: 22px; left: 30px; animation-delay: 2.1s; color: #fef08a; }

.vct-trophy-ring {
  position: absolute;
  top: 14px;
  left: calc(50% - 35px);
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 1px solid rgba(251, 191, 36, 0.25);
  box-shadow: 0 0 15px rgba(251, 191, 36, 0.2);
  animation: valPulseRing 3.5s infinite ease-in-out;
}

.val-fx-dragon .m-fire1 { top: 10px; left: 24px; animation-delay: 0.2s; }
.val-fx-dragon .m-fire2 { top: 14px; right: 28px; animation-delay: 1.4s; }
.val-fx-dragon .m-fire3 { bottom: 26px; left: 45px; animation-delay: 0.8s; }

.dragon-heat-haze {
  position: absolute;
  inset: 10px;
  background: radial-gradient(circle at 50% 40%, rgba(249, 115, 22, 0.25), transparent 70%);
  filter: blur(8px);
  animation: valHeatHaze 2.5s infinite alternate ease-in-out;
}

.kuronami-vortex-ring {
  position: absolute;
  top: 25px;
  left: calc(50% - 40px);
  width: 80px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid rgba(6, 182, 212, 0.4);
  transform: rotateX(60deg);
  animation: valWaterVortex 4s linear infinite;
}

.kuronami-vortex-ring.r2 {
  width: 60px;
  height: 30px;
  left: calc(50% - 30px);
  top: 30px;
  border-color: rgba(34, 211, 238, 0.55);
  animation-duration: 2.8s;
  animation-direction: reverse;
}

.val-fx-banhammer .m-bolt1 { top: 8px; left: 22px; animation-delay: 0.3s; color: #f87171; }
.val-fx-banhammer .m-bolt2 { top: 12px; right: 24px; animation-delay: 1.1s; color: #ef4444; }

.matrix-glitch-square {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1.5px solid #ef4444;
  opacity: 0.5;
  animation: valGlitchSquare 2.2s infinite ease-in-out;
}
.matrix-glitch-square.sq1 { top: 16px; left: 32px; }
.matrix-glitch-square.sq2 { bottom: 20px; right: 34px; animation-delay: 1s; }

/* ==============================================================================
   FEATURED SKIN ROWS ON CASE CARDS
   ============================================================================== */

.case-featured-skin-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
  margin: 0 0 8px 0;
  padding: 5px 9px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 7px;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.case-featured-skin-row:hover {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(0, 0, 0, 0.65);
  transform: translateY(-1.5px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
}

.featured-sparkle {
  color: #fbbf24;
  font-size: 11px;
  filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.6));
}

.featured-name {
  font-family: var(--font-tactical);
  font-weight: 800;
  color: #f8fafc;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  text-align: left;
}

.featured-edition {
  font-size: 8.5px;
  font-weight: 900;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  flex-shrink: 0;
}

/* ==============================================================================
   CASE PREVIEW 3D HERO BANNER
   ============================================================================== */

.case-preview-hero-banner {
  margin-bottom: 14px;
  padding: 12px;
  background: radial-gradient(circle at top, rgba(15, 23, 42, 0.95), rgba(6, 11, 24, 0.98));
  border: 1.5px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.55);
  cursor: pointer;
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}

.case-preview-hero-banner:hover {
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.7);
}

.preview-hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.hero-top-pill {
  font-family: var(--font-tactical);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.7px;
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.15);
  border: 1px solid rgba(251, 191, 36, 0.35);
  padding: 2px 8px;
  border-radius: 4px;
}

.hero-top-cost {
  font-family: var(--font-tactical);
  font-size: 13px;
  font-weight: 800;
  color: #fbbf24;
}

.preview-hero-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.preview-hero-title {
  font-family: var(--font-tactical);
  font-size: 14px;
  font-weight: 800;
  text-align: left;
}

.preview-hero-inspect {
  font-size: 10.5px;
  color: #94a3b8;
  font-weight: 600;
}

/* ==============================================================================
   3D WEAPON INSPECT MODAL (360° CONTROLLER)
   ============================================================================== */

.inspect-3d-stage {
  position: relative;
  width: 100%;
  height: 205px;
  perspective: 900px;
  transform-style: preserve-3d;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  touch-action: none;
  cursor: grab;
  overflow: visible;
}

.inspect-3d-stage:active {
  cursor: grabbing;
}

.inspect-ambient-flare {
  position: absolute;
  width: 240px;
  height: 140px;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(28px);
  z-index: 1;
}

.inspect-pedestal-large {
  position: absolute;
  bottom: 12px;
  width: 220px;
  height: 60px;
  border-radius: 50%;
  transform: rotateX(68deg) translateZ(-16px);
  border: 2px solid rgba(var(--skin-glow-rgb, 56, 189, 248), 0.6);
  background: radial-gradient(ellipse at center, rgba(var(--skin-glow-rgb, 56, 189, 248), 0.4) 0%, rgba(var(--skin-glow-rgb, 56, 189, 248), 0.1) 60%, transparent 80%);
  box-shadow: 0 0 30px rgba(var(--skin-glow-rgb, 56, 189, 248), 0.55);
  pointer-events: none;
  z-index: 1;
}

.inspect-rotator-wrapper {
  position: relative;
  z-index: 3;
  width: 240px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
}

.inspect-rotator {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
  position: relative;
}

.inspect-layer, .val-3d-layer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
  pointer-events: none;
}
.layer-deep-shadow {
  transform: translateZ(-16px) translateY(14px) scale(0.96);
  filter: blur(10px) brightness(0) opacity(0.5);
}
.layer-back-chassis {
  transform: translateZ(-8px) scale(0.98);
  filter: brightness(0.2) contrast(1.5) drop-shadow(0 0 6px var(--skin-glow, #38bdf8));
  opacity: 0.95;
}
.layer-bevel-dark {
  transform: translateZ(-4px);
  filter: brightness(0.45);
}
.layer-core-mesh {
  transform: translateZ(0px);
  filter: drop-shadow(0 4px 14px rgba(0,0,0,0.8));
}
.layer-accent-glow {
  transform: translateZ(5px);
  filter: brightness(1.3) drop-shadow(0 0 10px var(--skin-glow, #38bdf8));
  opacity: 0.7;
  mix-blend-mode: screen;
}
.layer-specular-front {
  transform: translateZ(9px);
}

.inspect-3d-svg-mesh {
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 16px var(--skin-glow, #38bdf8));
  transform-origin: center center;
}

.inspect-controls-bar {
  position: absolute;
  top: 4px;
  right: 6px;
  display: flex;
  gap: 6px;
  z-index: 6;
}

.inspect-ctrl-pill {
  padding: 4px 9px;
  font-family: var(--font-tactical);
  font-size: 9.5px;
  font-weight: 800;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  cursor: pointer;
  transition: all 0.2s ease;
}

.inspect-ctrl-pill.active {
  background: linear-gradient(135deg, #06b6d4, #0284c7);
  border-color: #38bdf8;
  color: #000;
  box-shadow: 0 0 10px rgba(6, 182, 212, 0.5);
}

.inspect-drag-hint {
  position: absolute;
  bottom: 0px;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 9.5px;
  color: #94a3b8;
  pointer-events: none;
  z-index: 5;
  letter-spacing: 0.3px;
}

/* ==============================================================================
   ANIMATION KEYFRAMES
   ============================================================================== */

@keyframes valFloat3D {
  0% {
    transform: translateY(0px) rotateX(12deg) rotateY(-18deg) rotateZ(2.5deg);
  }
  50% {
    transform: translateY(-8px) rotateX(15deg) rotateY(-13deg) rotateZ(1deg);
  }
  100% {
    transform: translateY(0px) rotateX(12deg) rotateY(-18deg) rotateZ(2.5deg);
  }
}

@keyframes valShadowFloat {
  0%, 100% {
    transform: scale(1);
    opacity: 0.85;
  }
  50% {
    transform: scale(0.82);
    opacity: 0.45;
  }
}

@keyframes valPedestalSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes valSpecularSwipe {
  0%, 35% {
    opacity: 0;
    transform: translateX(-130%) skewX(-25deg);
  }
  48% {
    opacity: 0.7;
  }
  62%, 100% {
    opacity: 0;
    transform: translateX(130%) skewX(-25deg);
  }
}

@keyframes valMoteDrift {
  0%, 100% {
    transform: translateY(0) scale(0.9);
    opacity: 0.5;
  }
  50% {
    transform: translateY(-7px) scale(1.15);
    opacity: 1;
  }
}

@keyframes valPulseDot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.6; }
}

@keyframes valPulseRing {
  0%, 100% { transform: scale(1); opacity: 0.3; }
  50% { transform: scale(1.12); opacity: 0.7; }
}

@keyframes valHeatHaze {
  0% { transform: scale(0.95); opacity: 0.4; }
  100% { transform: scale(1.08); opacity: 0.75; }
}

@keyframes valWaterVortex {
  0% { transform: rotateX(60deg) rotate(0deg); }
  100% { transform: rotateX(60deg) rotate(360deg); }
}

@keyframes valGlitchSquare {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.4; }
  25% { transform: scale(1.2) rotate(45deg); opacity: 0.9; }
  75% { transform: scale(0.85) rotate(-30deg); opacity: 0.6; }
}

/* ==========================================================================
   DOUBLE ROULETTE 14x COMPONENT
   ========================================================================== */
.roulette-game-box {
  position: relative;
  max-width: 680px;
  margin: 0 auto;
}

.roulette-header-badge {
  font-family: var(--font-tactical);
  font-size: 12px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--border-glass);
  padding: 4px 10px;
  border-radius: 8px;
}

.roulette-history-container {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  overflow-x: auto;
  padding: 6px 10px;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.roulette-hist-label {
  font-family: var(--font-tactical);
  font-size: 10px;
  font-weight: 800;
  color: #94a3b8;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}
.roulette-history-list {
  display: flex;
  align-items: center;
  gap: 6px;
}
.roulette-hist-pill {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--font-tactical);
  font-size: 11px;
  font-weight: 900;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  transition: transform 0.2s;
}
.roulette-hist-pill:hover {
  transform: scale(1.15);
}
.roulette-hist-pill span {
  font-size: 9px;
  line-height: 1;
}

/* Authentic European Circular Roulette Canvas Stage */
.roulette-wheel-container {
  position: relative;
  width: min(300px, calc(100vw - 32px));
  height: auto;
  aspect-ratio: 1;
  margin: 0 auto 16px auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.roulette-wheel-halo {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(251, 191, 36, 0.16) 0%, rgba(0, 245, 212, 0.08) 55%, transparent 75%);
  pointer-events: none;
  filter: blur(14px);
  z-index: 1;
}
.roulette-canvas {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.85), 0 0 24px rgba(251, 191, 36, 0.25);
  position: relative;
  z-index: 2;
  cursor: pointer;
}
.roulette-center-result-pin {
  position: absolute;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #374151 0%, #111827 70%, #030712 100%);
  border: 3px solid #fbbf24;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.9), 0 0 14px rgba(251, 191, 36, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  pointer-events: none;
}
.roulette-center-result-pin span {
  font-family: var(--font-tactical);
  font-size: 22px;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}
.roulette-center-result-pin.win-pulse {
  animation: pinPulse 0.5s ease-in-out infinite alternate;
}
@keyframes pinPulse {
  from { transform: scale(1); box-shadow: 0 0 10px rgba(251, 191, 36, 0.5); }
  to { transform: scale(1.12); box-shadow: 0 0 25px rgba(251, 191, 36, 0.95); }
}

/* Casino Felt Table */
.roulette-table-felt {
  background: linear-gradient(180deg, rgba(6, 44, 30, 0.85) 0%, rgba(3, 26, 18, 0.95) 100%);
  border: 2px solid rgba(16, 185, 129, 0.4);
  border-radius: 12px;
  padding: 10px;
  margin-bottom: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), inset 0 0 18px rgba(0, 0, 0, 0.6);
}
.felt-zero-row {
  margin-bottom: 6px;
}
.felt-bet-spot {
  position: relative;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  color: #fff;
  font-family: var(--font-tactical);
  font-weight: 800;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.felt-bet-spot:active {
  transform: scale(0.95);
}
.spot-zero {
  width: 100%;
  padding: 10px;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.35) 0%, rgba(5, 150, 105, 0.5) 100%);
  border-color: #10b981;
  font-size: 15px;
  gap: 8px;
}
.felt-numbers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  margin-bottom: 6px;
}
.spot-num {
  padding: 8px 4px;
  font-size: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 40px;
}
.spot-num.spot-red {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.3) 0%, rgba(185, 28, 28, 0.5) 100%);
  border-color: rgba(239, 68, 68, 0.6);
}
.spot-num.spot-black {
  background: linear-gradient(135deg, rgba(31, 41, 55, 0.4) 0%, rgba(17, 24, 39, 0.7) 100%);
  border-color: rgba(156, 163, 175, 0.35);
}
.felt-dozens-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  margin-bottom: 6px;
}
.spot-dozen {
  padding: 8px 4px;
  font-size: 11px;
  flex-direction: column;
  background: rgba(168, 85, 247, 0.15);
  border-color: rgba(168, 85, 247, 0.4);
  color: #d8b4fe;
}
.felt-outside-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
}
.spot-outside {
  padding: 8px 2px;
  font-size: 10px;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.15);
}
.spot-outside.spot-red {
  background: rgba(239, 68, 68, 0.3);
  border-color: #ef4444;
  color: #fca5a5;
}
.spot-outside.spot-black {
  background: rgba(17, 24, 39, 0.6);
  border-color: #9ca3af;
  color: #e5e7eb;
}

/* Floating Miniature Betting Chip Badge on spots */
.spot-chip-badge {
  display: none;
  position: absolute;
  top: -4px;
  right: -4px;
  background: radial-gradient(circle at 35% 35%, #fbbf24 0%, #d97706 100%);
  color: #000;
  font-size: 9px;
  font-weight: 900;
  border: 1px solid #fff;
  border-radius: 10px;
  padding: 1px 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
  z-index: 5;
  animation: chipDrop 0.2s ease-out;
}
@keyframes chipDrop {
  from { transform: scale(0); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.spot-chip-badge.active {
  display: block;
}
.roulette-tape-tile .tile-icon {
  font-size: 22px;
  margin-bottom: 2px;
}
.roulette-tape-tile .tile-number {
  font-family: var(--font-tactical);
  font-size: 20px;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
}

.tile-red {
  background: linear-gradient(145deg, #ef4444 0%, #b91c1c 100%);
  border-color: #f87171;
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.35);
}
.tile-black {
  background: linear-gradient(145deg, #334155 0%, #0f172a 100%);
  border-color: #475569;
  box-shadow: 0 0 14px rgba(51, 65, 85, 0.35);
}
.tile-green {
  background: linear-gradient(145deg, #10b981 0%, #047857 100%);
  border-color: #34d399;
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.65);
}

.roulette-tape-indicator {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  z-index: 20;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
.needle-arrow {
  color: #fbbf24;
  font-size: 14px;
  text-shadow: 0 0 8px #fbbf24;
  line-height: 1;
}
.needle-glow-line {
  flex: 1;
  width: 2.5px;
  background: linear-gradient(to bottom, #fbbf24, #f59e0b, #fbbf24);
  box-shadow: 0 0 10px #fbbf24, 0 0 20px #f59e0b;
}

.roulette-glass-glare {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.08), transparent);
  pointer-events: none;
}

.roulette-result-box {
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  padding: 10px;
  text-align: center;
  margin-bottom: 12px;
  animation: fadeIn 0.3s ease;
}
.roulette-result-title {
  font-family: var(--font-tactical);
  font-size: 16px;
  font-weight: 900;
  color: #fff;
  margin-bottom: 2px;
}
.roulette-result-desc {
  font-size: 13px;
  color: #94a3b8;
}

.roulette-chips-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  overflow-x: auto;
  padding-bottom: 2px;
}
.roulette-chip-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #e2e8f0;
  font-family: var(--font-tactical);
  font-size: 11px;
  font-weight: 800;
  padding: 5px 9px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
}
.roulette-chip-btn:hover {
  background: rgba(255, 255, 255, 0.12);
}
.roulette-chip-btn.active {
  background: var(--accent-cyan);
  color: #000;
  border-color: var(--accent-cyan);
  box-shadow: 0 0 10px var(--accent-cyan-glow);
}
.roulette-chip-btn.chip-clear {
  color: #f87171;
  border-color: rgba(239, 68, 68, 0.3);
}

.roulette-bet-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}
.roulette-bet-card {
  border-radius: 10px;
  padding: 10px 8px;
  text-align: center;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: transform 0.15s, box-shadow 0.15s;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.roulette-bet-card:hover {
  transform: translateY(-2px);
}
.roulette-bet-card.bet-red {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.4);
}
.roulette-bet-card.bet-red:hover {
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.3);
}
.roulette-bet-card.bet-green {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.4);
}
.roulette-bet-card.bet-green:hover {
  box-shadow: 0 0 14px rgba(16, 185, 129, 0.3);
}
.roulette-bet-card.bet-black {
  background: rgba(51, 65, 85, 0.25);
  border-color: rgba(100, 116, 139, 0.4);
}
.roulette-bet-card.bet-black:hover {
  box-shadow: 0 0 14px rgba(100, 116, 139, 0.3);
}

.bet-badge {
  font-family: var(--font-tactical);
  font-size: 10px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  display: inline-block;
  margin-bottom: 4px;
}
.bet-badge.red { background: rgba(239, 68, 68, 0.25); color: #fca5a5; }
.bet-badge.green { background: rgba(16, 185, 129, 0.25); color: #6ee7b7; }
.bet-badge.black { background: rgba(148, 163, 184, 0.2); color: #cbd5e1; }

.bet-color-name {
  font-family: var(--font-tactical);
  font-size: 13px;
  font-weight: 900;
  color: #fff;
  display: block;
  margin-bottom: 6px;
}
.roulette-bet-input {
  width: 100%;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  color: #fff;
  font-family: var(--font-tactical);
  font-size: 14px;
  font-weight: 900;
  text-align: center;
  padding: 6px 4px;
  margin-bottom: 6px;
}
.bet-quick-row {
  display: flex;
  gap: 3px;
}
.quick-chip-add {
  flex: 1;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #94a3b8;
  font-size: 10px;
  font-weight: 800;
  padding: 4px 0;
  border-radius: 4px;
  cursor: pointer;
}
.quick-chip-add:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.btn-roulette-spin {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  font-size: 15px;
  font-weight: 900;
  padding: 14px;
}

/* ==========================================================================
   CYBER DICE COMPONENT
   ========================================================================== */
.dice-game-box {
  position: relative;
  max-width: 600px;
  margin: 0 auto;
}

.dice-header-meta {
  font-family: var(--font-tactical);
  font-size: 12px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--border-glass);
  padding: 4px 10px;
  border-radius: 8px;
}

.dice-display-cabinet {
  background: radial-gradient(circle at center, #111827 0%, #07090e 100%);
  border: 2px solid rgba(0, 245, 212, 0.35);
  border-radius: 14px;
  padding: 22px 14px;
  text-align: center;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.7), inset 0 0 25px rgba(0, 245, 212, 0.08);
  margin-bottom: 14px;
  position: relative;
}

.dice-display-number {
  font-family: var(--font-tactical);
  font-size: 54px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 2px;
  text-shadow: 0 0 16px rgba(255, 255, 255, 0.4);
  line-height: 1;
  transition: color 0.2s, text-shadow 0.2s;
}

.dice-status-pill {
  position: absolute;
  bottom: 8px;
  right: 12px;
  font-family: var(--font-tactical);
  font-size: 10px;
  font-weight: 900;
  padding: 3px 8px;
  border-radius: 6px;
  letter-spacing: 0.5px;
}
.dice-status-pill.win {
  background: rgba(16, 185, 129, 0.25);
  border: 1px solid #10b981;
  color: #34d399;
}
.dice-status-pill.lose {
  background: rgba(239, 68, 68, 0.25);
  border: 1px solid #ef4444;
  color: #fca5a5;
}

.dice-stats-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}
.dice-stat-box {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border-glass);
  border-radius: 10px;
  padding: 8px 10px;
  text-align: center;
}
.dice-stat-lbl {
  font-family: var(--font-tactical);
  font-size: 10px;
  font-weight: 800;
  color: #94a3b8;
  display: block;
  margin-bottom: 2px;
}
.dice-stat-val {
  font-family: var(--font-tactical);
  font-size: 16px;
  font-weight: 900;
}
.dice-stat-val.mult { color: #38bdf8; text-shadow: 0 0 8px rgba(56, 189, 248, 0.4); }
.dice-stat-val.target { color: #fbbf24; }
.dice-stat-val.profit { color: #10b981; }

/* Dual Neon Slider Track */
.dice-slider-section {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 14px 12px 10px 12px;
  margin-bottom: 14px;
}
.dice-slider-track-wrap {
  position: relative;
  height: 24px;
  border-radius: 12px;
  background: #1e293b;
  overflow: visible;
  margin-bottom: 8px;
}
.dice-slider-zone {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 12px;
  transition: width 0.1s ease, left 0.1s ease;
}
.dice-slider-zone.zone-win {
  background: linear-gradient(90deg, #059669, #10b981);
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.5);
}
.dice-slider-zone.zone-lose {
  background: linear-gradient(90deg, #dc2626, #ef4444);
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.4);
}
.dice-thumb-indicator {
  position: absolute;
  top: -24px;
  transform: translateX(-50%);
  background: #fff;
  color: #000;
  font-family: var(--font-tactical);
  font-size: 10px;
  font-weight: 900;
  padding: 2px 6px;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
  pointer-events: none;
  white-space: nowrap;
}
.dice-thumb-indicator::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid #fff;
}
.dice-range-slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 10;
  margin: 0;
}
.dice-slider-scale {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-tactical);
  font-size: 11px;
  color: #64748b;
  font-weight: 800;
}

.dice-control-row {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
  align-items: center;
}
.dice-mode-toggle-group {
  display: flex;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  overflow: hidden;
  flex: 1;
}
.dice-mode-btn {
  flex: 1;
  background: transparent;
  border: none;
  color: #94a3b8;
  font-family: var(--font-tactical);
  font-size: 12px;
  font-weight: 800;
  padding: 8px 4px;
  cursor: pointer;
  transition: all 0.15s;
}
.dice-mode-btn.active {
  background: var(--accent-cyan);
  color: #000;
  box-shadow: 0 0 10px var(--accent-cyan-glow);
}

.dice-chance-input-wrap {
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 0 10px;
  flex: 1;
}
.chance-prefix, .chance-suffix {
  font-family: var(--font-tactical);
  font-size: 12px;
  font-weight: 800;
  color: #94a3b8;
}
.dice-chance-num-input {
  width: 100%;
  background: transparent;
  border: none;
  color: #fff;
  font-family: var(--font-tactical);
  font-size: 14px;
  font-weight: 900;
  text-align: center;
  padding: 8px 4px;
}

.dice-presets-row {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}
.dice-chance-preset {
  flex: 1;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #cbd5e1;
  font-family: var(--font-tactical);
  font-size: 11px;
  font-weight: 800;
  padding: 6px 2px;
  border-radius: 6px;
  cursor: pointer;
}
.dice-chance-preset:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.btn-dice-roll {
  background: linear-gradient(135deg, #00f5d4 0%, #0284c7 100%);
  font-size: 15px;
  font-weight: 900;
  padding: 14px;
  color: #000;
}

.dice-history-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  overflow-x: auto;
  padding-bottom: 2px;
}
.dice-history-strip {
  display: flex;
  gap: 6px;
}
.dice-hist-item {
  padding: 4px 8px;
  border-radius: 6px;
  font-family: var(--font-tactical);
  font-size: 11px;
  display: flex;
  gap: 4px;
  align-items: center;
  flex-shrink: 0;
}
.dice-hist-item.hist-win {
  background: rgba(16, 185, 129, 0.18);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #34d399;
}
.dice-hist-item.hist-lose {
  background: rgba(239, 68, 68, 0.18);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #fca5a5;
}

/* ==========================================================================
   CYBER LIMBO ENGINE STYLES
   ========================================================================== */
.limbo-game-box {
  background: linear-gradient(180deg, rgba(14, 21, 37, 0.95) 0%, rgba(9, 14, 26, 0.98) 100%);
  border: 1px solid rgba(0, 245, 212, 0.22);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

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

.limbo-rtp-badge {
  font-family: var(--font-tactical);
  font-size: 11px;
  background: rgba(0, 245, 212, 0.1);
  border: 1px solid rgba(0, 245, 212, 0.25);
  color: #94a3b8;
  padding: 4px 8px;
  border-radius: 6px;
}

.limbo-display-cabinet {
  position: relative;
  margin: 12px 0 16px 0;
  padding: 26px 14px 22px 14px;
  border-radius: var(--radius-md);
  background: radial-gradient(circle at center, rgba(0, 245, 212, 0.08) 0%, rgba(5, 8, 16, 0.95) 80%);
  border: 1.5px solid rgba(0, 245, 212, 0.3);
  box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.8), 0 0 20px rgba(0, 245, 212, 0.15);
  text-align: center;
  overflow: hidden;
}

.limbo-rocket-deco {
  font-size: 28px;
  display: inline-block;
  margin-bottom: 6px;
  transition: transform 0.3s ease;
  filter: drop-shadow(0 0 8px rgba(0, 245, 212, 0.6));
}

.limbo-rocket-deco.flying {
  animation: limboRocketFly 0.4s infinite alternate ease-in-out;
}

@keyframes limboRocketFly {
  0% { transform: translateY(0px) rotate(-5deg) scale(1.0); }
  100% { transform: translateY(-8px) rotate(5deg) scale(1.15); }
}

.limbo-display-number {
  font-family: var(--font-tactical);
  font-size: 52px;
  font-weight: 900;
  letter-spacing: 1px;
  color: #fbbf24;
  text-shadow: 0 0 20px rgba(251, 191, 36, 0.5);
  transition: all 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

.limbo-display-number.spinning {
  color: #38bdf8;
  text-shadow: 0 0 25px rgba(56, 189, 248, 0.7);
  transform: scale(1.05);
}

.limbo-display-number.win {
  color: #00f5d4;
  text-shadow: 0 0 35px rgba(0, 245, 212, 0.85), 0 0 60px rgba(0, 245, 212, 0.4);
  transform: scale(1.08);
}

.limbo-display-number.lose {
  color: #ef4444;
  text-shadow: 0 0 25px rgba(239, 68, 68, 0.7);
  transform: scale(0.96);
}

.limbo-status-pill {
  display: inline-block;
  margin-top: 10px;
  padding: 5px 14px;
  border-radius: 20px;
  font-family: var(--font-tactical);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.5px;
  animation: fadeIn 0.2s ease-out;
}

.limbo-status-pill.pill-win {
  background: rgba(16, 185, 129, 0.2);
  border: 1px solid #10b981;
  color: #34d399;
  box-shadow: 0 0 14px rgba(16, 185, 129, 0.4);
}

.limbo-status-pill.pill-lose {
  background: rgba(239, 68, 68, 0.2);
  border: 1px solid #ef4444;
  color: #f87171;
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.35);
}

.limbo-stats-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}

.limbo-stat-box {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.limbo-stat-lbl {
  font-size: 10px;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  margin-bottom: 4px;
  letter-spacing: 0.5px;
}

.limbo-stat-val {
  font-family: var(--font-tactical);
  font-size: 15px;
  font-weight: 800;
}

.limbo-stat-val.chance {
  color: #38bdf8;
}

.limbo-stat-val.profit {
  color: #fbbf24;
}

.limbo-target-input-wrap {
  display: flex;
  align-items: center;
  width: 100%;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(0, 245, 212, 0.3);
  border-radius: var(--radius-sm);
  padding: 2px 6px;
}

.limbo-target-num-input {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: #00f5d4;
  font-family: var(--font-tactical);
  font-size: 16px;
  font-weight: 800;
  text-align: center;
}

.target-suffix {
  font-family: var(--font-tactical);
  font-weight: 800;
  color: #00f5d4;
  font-size: 13px;
  padding-left: 2px;
}

.limbo-presets-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  margin-bottom: 12px;
}

.limbo-target-preset {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
  color: #cbd5e1;
  font-family: var(--font-tactical);
  font-size: 11.5px;
  font-weight: 800;
  padding: 8px 2px;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: center;
}

.limbo-target-preset:hover {
  background: rgba(0, 245, 212, 0.15);
  border-color: #00f5d4;
  color: #00f5d4;
}

.limbo-target-preset.active {
  background: linear-gradient(135deg, rgba(0, 245, 212, 0.25), rgba(56, 189, 248, 0.25));
  border-color: #00f5d4;
  color: #00f5d4;
  box-shadow: 0 0 10px rgba(0, 245, 212, 0.3);
}

.btn-limbo-play {
  background: linear-gradient(135deg, #00f5d4 0%, #0ea5e9 100%) !important;
  color: #03101c !important;
  font-weight: 900 !important;
  font-size: 15px !important;
  letter-spacing: 0.8px;
  box-shadow: 0 4px 18px rgba(0, 245, 212, 0.35) !important;
}

.btn-limbo-play:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(0, 245, 212, 0.5) !important;
}

.limbo-history-row {
  margin-top: 14px;
  display: flex;
  align-items: center;
  overflow-x: auto;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
}

.limbo-history-strip {
  display: flex;
  gap: 6px;
  flex: 1;
}

.limbo-hist-item {
  padding: 4px 8px;
  border-radius: 4px;
  font-family: var(--font-tactical);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.limbo-hist-item.hist-win {
  background: rgba(16, 185, 129, 0.18);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #34d399;
}

.limbo-hist-item.hist-lose {
  background: rgba(239, 68, 68, 0.18);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #fca5a5;
}

/* ==========================================================================
   MOBILE RESPONSIVENESS & TOUCH OPTIMIZATION (< 480px)
   ========================================================================== */
@media (max-width: 480px) {
  /* Roulette Casino Felt: Outside bets 3 columns x 2 clean rows */
  .felt-outside-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 5px !important;
  }
  .spot-outside {
    padding: 9px 4px !important;
    font-size: 10.5px !important;
  }
  .felt-dozens-row {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 4px !important;
  }
  .spot-dozen {
    padding: 8px 3px !important;
    font-size: 10px !important;
  }
  .roulette-chips-row {
    gap: 4px !important;
    overflow-x: auto;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }
  .roulette-chip-btn {
    padding: 6px 8px !important;
    font-size: 11px !important;
  }

  /* Slots Mobile Layout */
  .slot-machine-wrapper {
    gap: 6px !important;
  }
  .btn-slot-side-help {
    min-width: 42px !important;
    padding: 10px 4px !important;
  }
  .btn-slot-side-help .side-help-sub {
    display: none !important;
  }
  .slot-cabinet {
    padding: 8px !important;
  }
  .slot-quick-grid {
    gap: 4px !important;
  }
  .slot-quick-bet {
    padding: 7px 2px !important;
    font-size: 11px !important;
  }

  /* Modals on Mobile Phones */
  .modal-content {
    max-height: calc(100dvh - 24px) !important;
    overflow-y: auto !important;
    width: calc(100vw - 16px) !important;
    padding: 14px !important;
  }

  /* Showcase Modal Mobile Fit */
  .showcase-modal-card {
    padding: 14px 12px !important;
    width: calc(100vw - 16px) !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .showcase-modal-actions {
    display: flex !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .showcase-btn-save {
    font-size: 13px !important;
    padding: 10px 8px !important;
  }
  .showcase-btn-cancel {
    min-width: 80px !important;
    padding: 10px 12px !important;
    font-size: 12.5px !important;
  }

  /* Clicker Coin Scaling */
  .clicker-coin-btn {
    width: min(230px, 62vw) !important;
    height: min(230px, 62vw) !important;
  }

  /* Universal Bet Input Rows on Mobile */
  .bet-input-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .bet-input-row .input-bet {
    width: 100% !important;
    flex: 1 1 100% !important;
    margin-bottom: 4px !important;
    height: 42px !important;
    text-align: center !important;
    font-size: 16px !important;
  }
  .bet-input-row .quick-bet-btn {
    flex: 1 !important;
    min-width: 44px !important;
    padding: 8px 4px !important;
    font-size: 12px !important;
    height: 38px !important;
    text-align: center !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Tower Controls on Mobile */
  .tower-diff-selector {
    gap: 5px !important;
  }
  .tower-diff-btn {
    padding: 8px 3px !important;
    font-size: 11px !important;
  }
  .tower-diff-btn small {
    font-size: 9px !important;
  }
  .tower-floor-row {
    padding: 4px 6px !important;
    gap: 6px !important;
  }
  .tower-floor-mult {
    width: 46px !important;
    font-size: 11.5px !important;
  }
  .tower-tile-btn {
    height: 34px !important;
    font-size: 14px !important;
  }

  /* Limbo Mobile Responsive Layout */
  .limbo-display-number {
    font-size: 42px !important;
  }
  .limbo-presets-row {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 5px !important;
  }
  .limbo-target-preset {
    padding: 7px 2px !important;
    font-size: 11px !important;
  }
  .limbo-stat-val {
    font-size: 13.5px !important;
  }
}

/* ==========================================================================
   20. DRAGON TIGER (ДРАКОН И ТИГР)
   ========================================================================== */
.dt-game-box {
  background: radial-gradient(circle at 50% 20%, rgba(239, 68, 68, 0.1) 0%, rgba(15, 23, 42, 0.95) 70%);
}

.dt-arena-cabinet {
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-lg);
  padding: 16px 10px;
  margin: 12px 0 16px 0;
  position: relative;
}

.dt-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  transition: all 0.3s ease;
}

.dt-side.winner .dt-card-slot {
  box-shadow: 0 0 25px rgba(239, 68, 68, 0.6);
  border-color: #ef4444;
  transform: scale(1.05);
}

.dt-side.loser {
  opacity: 0.45;
}

.dt-side-title {
  font-family: var(--font-tactical);
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 1px;
  margin-bottom: 8px;
}

.dt-dragon-side .dt-side-title {
  color: #f87171;
  text-shadow: 0 0 10px rgba(248, 113, 113, 0.5);
}

.dt-tiger-side .dt-side-title {
  color: #fb923c;
  text-shadow: 0 0 10px rgba(251, 146, 60, 0.5);
}

.dt-card-slot {
  width: 76px;
  height: 108px;
  border-radius: 8px;
  border: 2px solid var(--border-glass);
  background: rgba(15, 23, 42, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 0.25s ease;
}

.dt-card-inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dt-card-back {
  font-size: 38px;
}

.dt-card-front {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--font-tactical);
  font-weight: 900;
}

.dt-card-val {
  font-size: 26px;
  line-height: 1;
}

.dt-card-suit {
  font-size: 20px;
  line-height: 1;
  margin-top: 2px;
}

.dt-side-score {
  font-family: var(--font-tactical);
  font-size: 13px;
  font-weight: 800;
  color: #cbd5e1;
  margin-top: 6px;
}

.dt-arena-vs {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 60px;
}

.dt-vs-badge {
  font-family: var(--font-tactical);
  font-size: 18px;
  font-weight: 900;
  color: #fbbf24;
  text-shadow: 0 0 12px rgba(251, 191, 36, 0.6);
}

.dt-outcome-badge {
  font-family: var(--font-tactical);
  font-size: 12px;
  font-weight: 900;
  padding: 4px 10px;
  border-radius: 999px;
  text-align: center;
  white-space: nowrap;
}

.dt-outcome-badge.win-dragon {
  background: rgba(239, 68, 68, 0.25);
  border: 1px solid #ef4444;
  color: #f87171;
}

.dt-outcome-badge.win-tiger {
  background: rgba(249, 115, 22, 0.25);
  border: 1px solid #f97316;
  color: #fb923c;
}

.dt-outcome-badge.win-tie {
  background: rgba(16, 185, 129, 0.25);
  border: 1px solid #10b981;
  color: #34d399;
}

.dt-bet-table {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}

.dt-bet-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-md);
  color: #cbd5e1;
  cursor: pointer;
  transition: all 0.2s ease;
}

.dt-btn-dragon:hover, .dt-btn-dragon.active {
  background: rgba(239, 68, 68, 0.2);
  border-color: #ef4444;
  color: #f87171;
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.3);
}

.dt-btn-tiger:hover, .dt-btn-tiger.active {
  background: rgba(249, 115, 22, 0.2);
  border-color: #f97316;
  color: #fb923c;
  box-shadow: 0 0 14px rgba(249, 115, 22, 0.3);
}

.dt-bet-center-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dt-btn-tie:hover, .dt-btn-tie.active,
.dt-btn-suited-tie:hover, .dt-btn-suited-tie.active {
  background: rgba(16, 185, 129, 0.2);
  border-color: #10b981;
  color: #34d399;
  box-shadow: 0 0 14px rgba(16, 185, 129, 0.3);
}

.dt-choice-icon {
  font-size: 20px;
  margin-bottom: 2px;
}

.dt-choice-name {
  font-family: var(--font-tactical);
  font-size: 12px;
  font-weight: 800;
}

.dt-choice-mult {
  font-family: var(--font-tactical);
  font-size: 11px;
  color: #fbbf24;
  margin-top: 2px;
}

.btn-dt-play {
  background: linear-gradient(135deg, #ef4444 0%, #f97316 100%) !important;
  color: #fff !important;
  font-weight: 900 !important;
  font-size: 15px !important;
}

.dt-hist-badge {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 14px;
}
.dt-hist-dragon { background: rgba(239, 68, 68, 0.25); border: 1px solid #ef4444; }
.dt-hist-tiger { background: rgba(249, 115, 22, 0.25); border: 1px solid #f97316; }
.dt-hist-tie { background: rgba(16, 185, 129, 0.25); border: 1px solid #10b981; }

/* ==========================================================================
   21. SIC BO (СИК-БО)
   ========================================================================== */
.sicbo-dome-cabinet {
  background: radial-gradient(circle at 50% 30%, rgba(251, 191, 36, 0.12) 0%, rgba(15, 23, 42, 0.95) 70%);
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: var(--radius-lg);
  padding: 16px 12px;
  margin: 12px 0 16px 0;
  text-align: center;
  position: relative;
}

.sicbo-dice-row {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-bottom: 10px;
}

.sicbo-dice-row.shaking {
  animation: sicboShake 0.1s infinite;
}

@keyframes sicboShake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  25% { transform: translate(-2px, -1px) rotate(-3deg); }
  50% { transform: translate(-1px, 2px) rotate(3deg); }
  75% { transform: translate(2px, 1px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

.sicbo-die {
  width: 52px;
  height: 52px;
  background: #f8fafc;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), inset 0 0 6px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0f172a;
  font-size: 16px;
  font-weight: 900;
  border: 2px solid #e2e8f0;
}

.sb-pip-wrap {
  line-height: 1.1;
  text-align: center;
}

.sicbo-total-pill {
  display: inline-block;
  padding: 4px 14px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid var(--border-glass);
  border-radius: 999px;
  font-family: var(--font-tactical);
  font-size: 12px;
  font-weight: 800;
  color: #fbbf24;
}

.sicbo-table-felt {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-md);
  padding: 10px;
}

.sicbo-grid-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

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

.sicbo-bet-tile {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
  padding: 8px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #cbd5e1;
  cursor: pointer;
  transition: all 0.15s ease;
}

.sicbo-bet-tile:hover, .sicbo-bet-tile.active {
  background: rgba(251, 191, 36, 0.2);
  border-color: #fbbf24;
  color: #fbbf24;
  box-shadow: 0 0 10px rgba(251, 191, 36, 0.3);
}

.sb-tile-title {
  font-family: var(--font-tactical);
  font-size: 11px;
  font-weight: 800;
}

.sb-tile-mult {
  font-family: var(--font-tactical);
  font-size: 10.5px;
  color: #38bdf8;
  margin-top: 2px;
}

.sb-triples-flex {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
}

.sb-spec-triple-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-glass);
  border-radius: 4px;
  color: #cbd5e1;
  font-family: var(--font-tactical);
  font-size: 11px;
  font-weight: 800;
  padding: 6px 2px;
  cursor: pointer;
}

.sb-spec-triple-btn:hover, .sb-spec-triple-btn.active {
  background: rgba(251, 191, 36, 0.3);
  border-color: #fbbf24;
  color: #fbbf24;
}

.btn-sb-play {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
  color: #0f172a !important;
  font-weight: 900 !important;
}

.sb-hist-pill {
  padding: 4px 8px;
  border-radius: 4px;
  font-family: var(--font-tactical);
  font-size: 11px;
  font-weight: 800;
}
.sb-hist-win { background: rgba(16, 185, 129, 0.25); border: 1px solid #10b981; color: #34d399; }
.sb-hist-loss { background: rgba(239, 68, 68, 0.25); border: 1px solid #ef4444; color: #fca5a5; }

/* ==========================================================================
   22. BACCARAT (БАККАРА)
   ========================================================================== */
.bacc-table-cabinet {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  background: radial-gradient(circle at 50% 20%, rgba(6, 182, 212, 0.12) 0%, rgba(15, 23, 42, 0.95) 75%);
  border: 1px solid rgba(6, 182, 212, 0.3);
  border-radius: var(--radius-lg);
  padding: 16px 12px;
  margin: 12px 0 14px 0;
}

.bacc-side {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-md);
  padding: 10px;
}

.bacc-side-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.bacc-side-label {
  font-family: var(--font-tactical);
  font-size: 12px;
  font-weight: 800;
  color: #cbd5e1;
}

.bacc-score-pill {
  font-family: var(--font-tactical);
  font-size: 12px;
  font-weight: 900;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid var(--border-glass);
  padding: 2px 8px;
  border-radius: 999px;
  color: #38bdf8;
}

.bacc-cards-container {
  display: flex;
  gap: 6px;
  min-height: 80px;
  align-items: center;
  justify-content: center;
}

.bacc-card {
  width: 48px;
  height: 72px;
  background: #f8fafc;
  border-radius: 6px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid #cbd5e1;
}

.bacc-card-name {
  font-family: var(--font-tactical);
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
}

.bacc-card-suit {
  font-size: 16px;
  line-height: 1;
  margin-top: 2px;
}

.bacc-card-placeholder {
  font-size: 28px;
  opacity: 0.3;
}

.bacc-result-banner {
  text-align: center;
  font-family: var(--font-tactical);
  font-size: 13px;
  font-weight: 900;
  padding: 6px;
  border-radius: 6px;
  margin-bottom: 12px;
}
.bacc-result-banner.win-player { background: rgba(56, 189, 248, 0.25); border: 1px solid #38bdf8; color: #38bdf8; }
.bacc-result-banner.win-banker { background: rgba(239, 68, 68, 0.25); border: 1px solid #ef4444; color: #f87171; }
.bacc-result-banner.win-tie { background: rgba(16, 185, 129, 0.25); border: 1px solid #10b981; color: #34d399; }

.bacc-main-spots {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
}

.bacc-pair-spots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.bacc-spot-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-sm);
  padding: 10px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #cbd5e1;
  cursor: pointer;
  transition: all 0.15s ease;
}

.bacc-spot-btn:hover, .bacc-spot-btn.active {
  background: rgba(6, 182, 212, 0.2);
  border-color: #06b6d4;
  color: #22d3ee;
  box-shadow: 0 0 12px rgba(6, 182, 212, 0.3);
}

.bacc-spot-icon { font-size: 18px; margin-bottom: 2px; }
.bacc-spot-title { font-family: var(--font-tactical); font-size: 11.5px; font-weight: 800; }
.bacc-spot-mult { font-family: var(--font-tactical); font-size: 10.5px; color: #fbbf24; margin-top: 2px; }

.btn-bacc-play {
  background: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%) !important;
  color: #fff !important;
  font-weight: 900 !important;
}

.bacc-hist-pill {
  padding: 4px 8px;
  border-radius: 4px;
  font-family: var(--font-tactical);
  font-size: 11px;
  font-weight: 800;
}
.bacc-hist-p { background: rgba(56, 189, 248, 0.25); border: 1px solid #38bdf8; color: #38bdf8; }
.bacc-hist-b { background: rgba(239, 68, 68, 0.25); border: 1px solid #ef4444; color: #f87171; }
.bacc-hist-t { background: rgba(16, 185, 129, 0.25); border: 1px solid #10b981; color: #34d399; }

/* ==========================================================================
   23. VIDEO POKER (ВИДЕОПОКЕР JACKS OR BETTER)
   ========================================================================== */
.vp-paytable-ticker {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 6px 0;
  margin-bottom: 12px;
  -webkit-overflow-scrolling: touch;
}

.vp-pt-item {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--border-glass);
  border-radius: 4px;
  padding: 4px 8px;
  font-family: var(--font-tactical);
  font-size: 10.5px;
  white-space: nowrap;
  color: #94a3b8;
}

.vp-pt-item span {
  font-weight: 900;
  color: #fbbf24;
}

.vp-pt-item.active-win {
  background: rgba(16, 185, 129, 0.25);
  border-color: #10b981;
  color: #34d399;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.4);
}

.vp-hand-container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin-bottom: 12px;
}

.vp-card-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: transform 0.15s ease;
}

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

.vp-card-col.held .vp-card-box {
  border-color: #fbbf24;
  box-shadow: 0 0 12px rgba(251, 191, 36, 0.5);
}

.vp-held-badge {
  font-family: var(--font-tactical);
  font-size: 9px;
  font-weight: 900;
  background: #fbbf24;
  color: #0f172a;
  padding: 1px 4px;
  border-radius: 4px;
  margin-bottom: 4px;
  letter-spacing: 0.5px;
}

.vp-card-box {
  width: 100%;
  aspect-ratio: 2.5 / 3.8;
  background: #f8fafc;
  border-radius: 6px;
  border: 2px solid #cbd5e1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
  transition: all 0.2s ease;
}

.vp-card-rank {
  font-family: var(--font-tactical);
  font-size: 19px;
  font-weight: 900;
  line-height: 1;
}

.vp-card-suit {
  font-size: 16px;
  line-height: 1;
  margin-top: 2px;
}

.vp-win-message {
  font-family: var(--font-tactical);
  font-size: 12px;
  text-align: center;
  color: #cbd5e1;
  padding: 4px;
  min-height: 24px;
}

.btn-vp-action {
  background: linear-gradient(135deg, #a855f7 0%, #6366f1 100%) !important;
  color: #fff !important;
  font-weight: 900 !important;
}

/* ==========================================================================
   24. AVIATOR 2.0 (АВИАТОР ДВОЙНОЙ КРАШ)
   ========================================================================== */
.aviator-flight-arena {
  position: relative;
  background: #090d16;
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin: 10px 0 14px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.aviator-canvas {
  width: 100%;
  height: 210px;
  display: block;
}

.aviator-center-mult {
  position: absolute;
  font-family: var(--font-tactical);
  font-size: 46px;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
  pointer-events: none;
}

.aviator-crashed-banner {
  position: absolute;
  top: 14px;
  font-family: var(--font-tactical);
  font-size: 14px;
  font-weight: 900;
  background: rgba(239, 68, 68, 0.85);
  color: #fff;
  padding: 4px 14px;
  border-radius: 999px;
  letter-spacing: 1px;
}

.aviator-dual-panel {
  display: flex;
  flex-direction: column;
}

.aviator-bet-card {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-md);
  padding: 8px 10px;
}

.aviator-bet-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.aviator-bet-title {
  font-family: var(--font-tactical);
  font-size: 11.5px;
  font-weight: 800;
  color: #cbd5e1;
}

.aviator-auto-row {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-tactical);
  font-size: 11px;
  color: #94a3b8;
}

.av-auto-input {
  width: 50px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid var(--border-glass);
  border-radius: 4px;
  color: #fbbf24;
  font-family: var(--font-tactical);
  font-weight: bold;
  font-size: 11px;
  padding: 2px 4px;
  text-align: center;
}

.btn-av-action {
  padding: 10px !important;
  font-weight: 900 !important;
  font-size: 13px !important;
}

.av-btn-green {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: #fff !important;
}

.av-btn-orange {
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important;
  color: #fff !important;
}

.av-btn-done {
  background: rgba(148, 163, 184, 0.2) !important;
  border: 1px solid #94a3b8 !important;
  color: #94a3b8 !important;
  cursor: default !important;
}

.btn-av-launch {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  color: #fff !important;
  font-weight: 900 !important;
  font-size: 14px !important;
}

.av-hist-pill {
  padding: 3px 6px;
  border-radius: 4px;
  font-family: var(--font-tactical);
  font-size: 10.5px;
  font-weight: 800;
}
.av-hist-low { background: rgba(56, 189, 248, 0.2); border: 1px solid #38bdf8; color: #38bdf8; }
.av-hist-mid { background: rgba(168, 85, 247, 0.2); border: 1px solid #a855f7; color: #c084fc; }
.av-hist-mega { background: rgba(251, 191, 36, 0.25); border: 1px solid #fbbf24; color: #fbbf24; }

/* ==========================================================================
   MOBILE OPTIMIZATIONS (< 480px) FOR NEW CASINO GAMES
   ========================================================================== */
@media (max-width: 480px) {
  /* Dragon Tiger */
  .dt-card-slot {
    width: 66px !important;
    height: 94px !important;
  }
  .dt-card-val { font-size: 22px !important; }
  .dt-card-suit { font-size: 17px !important; }
  .dt-choice-name { font-size: 11px !important; }
  .dt-choice-mult { font-size: 10px !important; }

  /* Sic Bo */
  .sicbo-die {
    width: 46px !important;
    height: 46px !important;
  }
  .sb-tile-title { font-size: 10px !important; }

  /* Baccarat */
  .bacc-card {
    width: 42px !important;
    height: 64px !important;
  }
  .bacc-card-name { font-size: 16px !important; }
  .bacc-card-suit { font-size: 14px !important; }
  .bacc-spot-btn { padding: 8px 2px !important; }
  .bacc-spot-title { font-size: 10.5px !important; }

  /* Video Poker */
  .vp-card-rank { font-size: 16px !important; }
  .vp-card-suit { font-size: 14px !important; }

  /* Aviator */
  .aviator-canvas { height: 180px !important; }
  .aviator-center-mult { font-size: 36px !important; }
}

/* ==========================================================================
   25. CHICKEN (КУРОЧКА)
   ========================================================================== */
.chicken-game-box {
  position: relative;
  overflow: hidden;
}

.chicken-stats-pill {
  font-family: var(--font-tactical);
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.45);
  color: #fbbf24;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  letter-spacing: 0.5px;
}

.chicken-header-banner {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.chicken-stat-box {
  flex: 1;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid var(--border-glass);
  border-radius: 8px;
  padding: 8px 10px;
  text-align: center;
}

.chicken-stat-label {
  display: block;
  font-size: 10px;
  color: #94a3b8;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}

.chicken-stat-value {
  font-family: var(--font-tactical);
  font-size: 18px;
  font-weight: 900;
  color: #10b981;
}

.chicken-stat-value.next {
  color: #38bdf8;
}

.chicken-arena {
  margin: 0 auto 12px auto;
  max-width: 380px;
  width: 100%;
}

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

.chicken-tile {
  aspect-ratio: 1;
  border-radius: 10px;
  background: rgba(30, 41, 59, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.12);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.chicken-tile:active {
  transform: scale(0.92);
}

.chicken-tile.revealed-chicken {
  background: radial-gradient(circle, rgba(16, 185, 129, 0.35) 0%, rgba(5, 150, 105, 0.2) 100%);
  border-color: #10b981;
  box-shadow: 0 0 15px rgba(16, 185, 129, 0.4);
  animation: chickenPop 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.chicken-tile.revealed-bone {
  background: radial-gradient(circle, rgba(239, 68, 68, 0.4) 0%, rgba(185, 28, 28, 0.2) 100%);
  border-color: #ef4444;
  box-shadow: 0 0 15px rgba(239, 68, 68, 0.5);
  animation: boneShake 0.35s ease;
}

.chicken-tile.unpicked-revealed {
  opacity: 0.5;
  filter: grayscale(0.5);
}

.chicken-bones-control {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid var(--border-glass);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 8px;
}

.chicken-bones-label {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #cbd5e1;
  font-weight: 700;
  margin-bottom: 6px;
}

.chicken-bones-val {
  color: #fbbf24;
}

.chicken-bones-pills {
  display: flex;
  gap: 5px;
  overflow-x: auto;
}

.chicken-bones-pills .quick-bet-btn {
  flex: 1;
  min-width: 32px;
  padding: 5px 0;
  font-size: 11px;
}

.chicken-action-row {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.btn-chicken-play {
  flex: 1;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  border: none;
  font-weight: 800;
}

.btn-chicken-cashout {
  flex: 1;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border: none;
  font-weight: 800;
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.6);
  animation: pulseGreen 1.5s infinite;
}

@keyframes chickenPop {
  0% { transform: scale(0.6); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

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

@keyframes pulseGreen {
  0% { box-shadow: 0 0 10px rgba(16, 185, 129, 0.4); }
  50% { box-shadow: 0 0 22px rgba(16, 185, 129, 0.85); }
  100% { box-shadow: 0 0 10px rgba(16, 185, 129, 0.4); }
}

/* ==========================================================================
   26. CYBER KENO (КИБЕР-КЕНО)
   ========================================================================== */
.keno-game-box {
  position: relative;
  overflow: hidden;
}

.keno-selected-count {
  font-family: var(--font-tactical);
  font-size: 11.5px;
  font-weight: 800;
  color: #00f5d4;
  background: rgba(0, 245, 212, 0.12);
  border: 1px solid rgba(0, 245, 212, 0.35);
  padding: 3px 8px;
  border-radius: 12px;
}

.keno-payout-strip-wrapper {
  overflow-x: auto;
  margin-bottom: 10px;
  -webkit-overflow-scrolling: touch;
}

.keno-payout-strip {
  display: flex;
  gap: 6px;
  padding: 4px 2px;
  min-width: max-content;
}

.keno-payout-pill {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid var(--border-glass);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 10.5px;
  text-align: center;
  color: #94a3b8;
  transition: all 0.2s ease;
}

.keno-payout-pill.active-hit {
  background: linear-gradient(135deg, rgba(0, 245, 212, 0.3) 0%, rgba(16, 185, 129, 0.3) 100%);
  border-color: #00f5d4;
  color: #fff;
  font-weight: 800;
  transform: scale(1.08);
  box-shadow: 0 0 12px rgba(0, 245, 212, 0.5);
}

.keno-grid-container {
  margin: 0 auto 12px auto;
  max-width: 420px;
  width: 100%;
}

.keno-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 5px;
}

.keno-tile {
  aspect-ratio: 1;
  border-radius: 8px;
  background: rgba(30, 41, 59, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #e2e8f0;
  font-family: var(--font-tactical);
  font-size: 13.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.keno-tile:active {
  transform: scale(0.92);
}

.keno-tile.selected {
  background: #00f5d4;
  color: #04101c;
  border-color: #00f5d4;
  box-shadow: 0 0 10px rgba(0, 245, 212, 0.5);
}

.keno-tile.drawn {
  background: #ef4444;
  border-color: #ef4444;
  color: #fff;
  animation: kenoBallBounce 0.25s ease;
}

.keno-tile.hit {
  background: linear-gradient(135deg, #10b981 0%, #00f5d4 100%) !important;
  border-color: #00f5d4 !important;
  color: #04101c !important;
  font-weight: 900 !important;
  box-shadow: 0 0 18px rgba(0, 245, 212, 0.8) !important;
  animation: kenoHitPulse 0.4s ease;
}

.keno-toolbar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}

.keno-quick-buttons {
  display: flex;
  gap: 6px;
}

.keno-quick-buttons .quick-bet-btn {
  flex: 1;
  font-size: 11px;
  padding: 6px 4px;
}

.keno-risk-selector {
  display: flex;
  gap: 6px;
}

.keno-risk-selector .quick-bet-btn {
  flex: 1;
  font-size: 11px;
  padding: 6px 4px;
}

.btn-keno-play {
  background: linear-gradient(135deg, #00f5d4 0%, #059669 100%);
  border: none;
  color: #04101c;
  font-weight: 900;
}

@keyframes kenoBallBounce {
  0% { transform: scale(0.7); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

@keyframes kenoHitPulse {
  0% { transform: scale(0.8); }
  50% { transform: scale(1.25); }
  100% { transform: scale(1); }
}

/* ==========================================================================
   27. THIMBLES (НАПЁРСТКИ)
   ========================================================================== */
.thimbles-game-box {
  position: relative;
  overflow: hidden;
}

.thimbles-speed-badge {
  font-family: var(--font-tactical);
  font-size: 11px;
  font-weight: 800;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.35);
  padding: 3px 8px;
  border-radius: 12px;
}

.thimbles-mode-selector {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.thimbles-mode-btn {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid var(--border-glass);
  border-radius: 8px;
  padding: 10px 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.thimbles-mode-btn.active {
  background: rgba(168, 85, 247, 0.2);
  border-color: #a855f7;
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.3);
}

.mode-title {
  font-family: var(--font-tactical);
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  display: block;
}

.mode-mult {
  font-size: 10.5px;
  color: #c084fc;
  font-weight: 700;
  display: block;
}

.thimbles-status-bar {
  text-align: center;
  padding: 8px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #cbd5e1;
  margin-bottom: 14px;
  min-height: 18px;
}

.thimbles-arena {
  width: 100%;
  max-width: 380px;
  margin: 0 auto 16px auto;
  position: relative;
}

.thimbles-table {
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  position: relative;
  height: 160px;
  padding-bottom: 10px;
}

.thimble-track {
  position: relative;
  width: 90px;
  height: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  cursor: default;
  transition: transform 0.2s ease;
  user-select: none;
}

.thimble-track.interactive {
  cursor: pointer;
}

.thimble-track.interactive:hover {
  transform: scale(1.05);
}

.thimble-track.interactive .thimble-cup {
  box-shadow: 0 0 15px rgba(168, 85, 247, 0.5);
}

.thimble-podium {
  width: 75px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(168, 85, 247, 0.4) 0%, rgba(0, 0, 0, 0.8) 70%);
  border: 1px solid rgba(168, 85, 247, 0.3);
  position: absolute;
  bottom: 0;
  z-index: 1;
}

.thimble-ball {
  position: absolute;
  bottom: 8px;
  font-size: 26px;
  z-index: 2;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.thimble-cup {
  position: absolute;
  bottom: 0;
  width: 70px;
  height: 95px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform var(--thimble-anim-speed, 0.35s) cubic-bezier(0.2, 0.8, 0.2, 1);
}

.thimble-cup.lifted {
  transform: translateY(-50px);
}

.cup-knob {
  width: 18px;
  height: 12px;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(135deg, #e2e8f0 0%, #94a3b8 100%);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.cup-body {
  width: 68px;
  height: 83px;
  background: linear-gradient(135deg, #334155 0%, #0f172a 50%, #1e293b 100%);
  border: 2px solid rgba(168, 85, 247, 0.6);
  border-radius: 14px 14px 22px 22px;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 2px 8px rgba(255, 255, 255, 0.2), 0 8px 20px rgba(0, 0, 0, 0.6);
}

.cup-accent {
  position: absolute;
  bottom: 10px;
  left: 10%;
  width: 80%;
  height: 3px;
  background: linear-gradient(90deg, transparent, #a855f7, transparent);
}

.btn-thimbles-play {
  background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%);
  border: none;
  color: #fff;
  font-weight: 900;
}

/* ==========================================================================
   MOBILE SCREEN RULES (< 480px) FOR CHICKEN, KENO, THIMBLES
   ========================================================================== */
@media (max-width: 480px) {
  /* Chicken Mobile */
  .chicken-grid {
    gap: 5px !important;
  }
  .chicken-tile {
    font-size: 22px !important;
    border-radius: 8px !important;
  }
  .chicken-stat-value {
    font-size: 16px !important;
  }

  /* Keno Mobile */
  .keno-grid {
    gap: 4px !important;
  }
  .keno-tile {
    font-size: 12px !important;
    border-radius: 6px !important;
  }

  /* Thimbles Mobile */
  .thimble-track {
    width: 78px !important;
  }
  .thimble-cup {
    width: 60px !important;
    height: 85px !important;
  }
  .cup-body {
    width: 58px !important;
    height: 75px !important;
  }
  .thimble-podium {
    width: 65px !important;
  }
  .thimble-ball {
    font-size: 22px !important;
  }
}

/* ==========================================================================
   ROBLOX ADMIN ABUSE & PRANKS AAA SUITE
   ========================================================================== */

/* 1. ☢️ TACTICAL NUKE */
.nuke-overlay {
  position: fixed;
  inset: 0;
  z-index: 99990;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(10, 5, 5, 0.94);
  backdrop-filter: blur(12px);
  padding: 20px;
  animation: nukeBackdropPulse 1.2s infinite alternate ease-in-out;
}
@keyframes nukeBackdropPulse {
  0% { box-shadow: inset 0 0 40px rgba(239, 68, 68, 0.4); }
  100% { box-shadow: inset 0 0 100px rgba(234, 179, 8, 0.7); }
}
.nuke-hazard-stripe {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 14px;
  background: repeating-linear-gradient(45deg, #eab308, #eab308 15px, #000 15px, #000 30px);
  box-shadow: 0 0 15px rgba(234, 179, 8, 0.6);
}
.nuke-hazard-stripe.bottom {
  top: auto;
  bottom: 0;
}
.nuke-box {
  background: linear-gradient(135deg, rgba(30, 15, 15, 0.95), rgba(15, 7, 7, 0.98));
  border: 2px solid #ef4444;
  box-shadow: 0 0 40px rgba(239, 68, 68, 0.5), inset 0 0 20px rgba(234, 179, 8, 0.2);
  border-radius: 16px;
  padding: 24px;
  text-align: center;
  max-width: 380px;
  width: 90%;
  position: relative;
  overflow: hidden;
}
.nuke-icon-spin {
  font-size: 54px;
  display: inline-block;
  animation: nukeSpin 3s linear infinite;
  filter: drop-shadow(0 0 16px #eab308);
}
@keyframes nukeSpin {
  100% { transform: rotate(360deg); }
}
.nuke-title {
  font-family: var(--font-tactical);
  font-size: 18px;
  font-weight: 900;
  color: #fca5a5;
  letter-spacing: 1px;
  margin: 10px 0 4px;
  text-transform: uppercase;
}
.nuke-countdown-val {
  font-family: var(--font-tactical);
  font-size: 54px;
  font-weight: 900;
  color: #ef4444;
  text-shadow: 0 0 25px rgba(239, 68, 68, 0.8), 0 0 50px rgba(234, 179, 8, 0.5);
  margin: 8px 0;
  animation: nukeCountPulse 0.5s infinite alternate;
}
@keyframes nukeCountPulse {
  0% { transform: scale(1); }
  100% { transform: scale(1.08); }
}
.nuke-desc {
  font-size: 12px;
  color: #cbd5e1;
  line-height: 1.4;
  margin-bottom: 12px;
}
.nuke-flash-screen {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}
.nuke-flash-screen.detonate {
  animation: nukeFlashDetonation 2.5s ease-out forwards;
}
@keyframes nukeFlashDetonation {
  0% { opacity: 1; background: #ffffff; }
  15% { opacity: 0.95; background: #fef08a; }
  40% { opacity: 0.8; background: #f87171; }
  100% { opacity: 0; background: #000; }
}

/* 2. ZERO GRAVITY */
body.zero-gravity-mode {
  animation: zeroGBodyDrift 8s infinite alternate ease-in-out;
}
@keyframes zeroGBodyDrift {
  0% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(2px, -3px) rotate(0.4deg); }
  100% { transform: translate(-2px, 3px) rotate(-0.4deg); }
}
body.zero-gravity-mode .game-box,
body.zero-gravity-mode .games-hub-card,
body.zero-gravity-mode .tab-pane > div {
  animation: zeroGFloatBox 4s infinite alternate ease-in-out;
}
@keyframes zeroGFloatBox {
  0% { transform: translateY(0px) rotate(0deg); }
  100% { transform: translateY(-7px) rotate(0.7deg); }
}
.gravity-particles-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9990;
}

/* 3. MATRIX INVERT & GLITCH */
body.matrix-inverted {
  transform: rotate(180deg);
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  filter: contrast(1.15) hue-rotate(90deg);
}
.matrix-glitch-badge {
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99995;
  background: rgba(0, 0, 0, 0.9);
  border: 1px solid #10b981;
  color: #34d399;
  padding: 6px 14px;
  border-radius: 20px;
  font-family: var(--font-tactical);
  font-size: 11px;
  font-weight: 800;
  box-shadow: 0 0 15px rgba(16, 185, 129, 0.6);
  pointer-events: none;
}

/* 4. CHICKEN RAIN */
.chicken-rain-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 99980;
  overflow: hidden;
}
.running-chicken {
  position: absolute;
  pointer-events: auto;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  user-select: none;
  touch-action: manipulation;
  filter: drop-shadow(0 0 10px rgba(251, 191, 36, 0.8));
  animation: chickenWaddle 0.25s infinite alternate ease-in-out;
}
@keyframes chickenWaddle {
  0% { transform: translateY(0) rotate(-6deg); }
  100% { transform: translateY(-6px) rotate(6deg); }
}
.running-chicken-body {
  font-size: 34px;
  line-height: 1;
}
.chicken-tap-pill {
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  color: #fff;
  font-family: var(--font-tactical);
  font-size: 9px;
  font-weight: 900;
  padding: 2px 6px;
  border-radius: 8px;
  margin-top: 2px;
  white-space: nowrap;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.6);
}
.chicken-float-reward {
  position: fixed;
  pointer-events: none;
  z-index: 99999;
  color: #fbbf24;
  font-family: var(--font-tactical);
  font-size: 16px;
  font-weight: 900;
  text-shadow: 0 0 10px #f59e0b;
  animation: chickenFloatUp 0.8s ease-out forwards;
}
@keyframes chickenFloatUp {
  0% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-40px) scale(1.3); }
}

/* 5. LIVE BANHAMMER STRIKE */
.banhammer-overlay {
  position: fixed;
  inset: 0;
  z-index: 99992;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: banhammerVignette 0.8s infinite alternate;
}
@keyframes banhammerVignette {
  0% { box-shadow: inset 0 0 50px rgba(220, 38, 38, 0.5); }
  100% { box-shadow: inset 0 0 120px rgba(220, 38, 38, 0.8); }
}
.banhammer-strike-box {
  text-align: center;
  position: relative;
  max-width: 400px;
  width: 90%;
}
.banhammer-icon {
  font-size: 78px;
  display: inline-block;
  animation: banhammerDrop 0.6s cubic-bezier(0.2, 1.4, 0.3, 1) forwards;
  filter: drop-shadow(0 0 25px #ef4444);
}
@keyframes banhammerDrop {
  0% { transform: translateY(-350px) rotate(-45deg) scale(2); opacity: 0; }
  70% { transform: translateY(0) rotate(15deg) scale(1.15); opacity: 1; }
  100% { transform: translateY(0) rotate(0deg) scale(1); opacity: 1; }
}
.banhammer-banner-card {
  background: rgba(15, 5, 5, 0.95);
  border: 2px solid #ef4444;
  border-radius: 14px;
  padding: 16px;
  margin-top: 14px;
  box-shadow: 0 0 35px rgba(239, 68, 68, 0.6);
}
.banhammer-target-title {
  font-family: var(--font-tactical);
  font-size: 17px;
  font-weight: 900;
  color: #fca5a5;
  letter-spacing: 0.5px;
}
.banhammer-target-reason {
  font-size: 13px;
  color: #e2e8f0;
  margin: 8px 0;
  padding: 8px;
  background: rgba(239, 68, 68, 0.15);
  border-radius: 6px;
  border-left: 3px solid #ef4444;
}
.screen-crack-svg {
  position: absolute;
  inset: -20px;
  pointer-events: none;
  opacity: 0.7;
}

/* 6. FAKE JACKPOT & CLOWN PRANK */
.fake-win-overlay {
  position: fixed;
  inset: 0;
  z-index: 99993;
  background: rgba(8, 6, 18, 0.94);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.fake-win-card {
  background: linear-gradient(135deg, rgba(30, 20, 50, 0.95), rgba(15, 10, 25, 0.98));
  border: 2px solid #fbbf24;
  box-shadow: 0 0 50px rgba(251, 191, 36, 0.6);
  border-radius: 20px;
  padding: 26px;
  text-align: center;
  max-width: 380px;
  width: 90%;
  position: relative;
  overflow: hidden;
}
.fake-win-amount {
  font-family: var(--font-tactical);
  font-size: 32px;
  font-weight: 900;
  color: #fbbf24;
  text-shadow: 0 0 25px rgba(251, 191, 36, 0.8);
  margin: 10px 0;
  animation: fakeWinPulse 0.8s infinite alternate;
}
@keyframes fakeWinPulse {
  0% { transform: scale(0.98); }
  100% { transform: scale(1.04); }
}
.fake-clown-reveal {
  display: none;
  animation: clownSlideIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes clownSlideIn {
  0% { transform: translateY(40px) scale(0.8); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
.fake-clown-icon {
  font-size: 64px;
  margin-bottom: 6px;
  animation: clownWiggle 0.4s infinite alternate;
}
@keyframes clownWiggle {
  0% { transform: rotate(-8deg); }
  100% { transform: rotate(8deg); }
}

/* 7. ADMIN WHEEL OF DESTINY */
.admin-destiny-card {
  background: linear-gradient(135deg, rgba(30, 15, 45, 0.85), rgba(15, 10, 25, 0.95));
  border: 1px solid rgba(168, 85, 247, 0.5);
  box-shadow: 0 0 25px rgba(168, 85, 247, 0.2);
  border-radius: 12px;
  padding: 16px;
  margin: 14px 0;
  text-align: center;
}
.admin-destiny-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.admin-destiny-title {
  font-family: var(--font-tactical);
  font-size: 15px;
  font-weight: 900;
  color: #c084fc;
  display: flex;
  align-items: center;
  gap: 6px;
}
.admin-destiny-stage {
  position: relative;
  display: inline-block;
  margin: 10px auto;
}
.admin-destiny-pointer {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 24px;
  color: #fbbf24;
  z-index: 10;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.8));
}
.admin-destiny-canvas {
  width: 250px;
  height: 250px;
  border-radius: 50%;
  box-shadow: 0 0 25px rgba(168, 85, 247, 0.4), inset 0 0 15px rgba(0, 0, 0, 0.6);
  border: 3px solid rgba(168, 85, 247, 0.7);
  display: block;
}
.btn-destiny-spin {
  background: linear-gradient(135deg, #a855f7 0%, #ec4899 100%);
  border: none;
  color: #fff;
  font-family: var(--font-tactical);
  font-size: 13px;
  font-weight: 900;
  padding: 12px 20px;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.5);
  transition: all 0.2s ease;
  width: 100%;
  margin-top: 10px;
}
.btn-destiny-spin:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 28px rgba(236, 72, 153, 0.7);
}



/* ==========================================================================
   28. РУССКАЯ РУЛЕТКА (Russian Roulette)
   ========================================================================== */
.rr-arena {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 8px;
  background: radial-gradient(circle at center, rgba(30, 41, 59, 0.5) 0%, rgba(15, 23, 42, 0.8) 100%);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 12px;
}

.rr-cylinder-wrapper {
  position: relative;
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 8px auto;
}

.rr-cylinder {
  position: relative;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #334155, #0f172a);
  border: 4px solid #475569;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.8), inset 0 0 15px rgba(0, 0, 0, 0.9);
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.rr-cylinder.rr-flash-danger {
  animation: rrDangerPulse 0.4s ease 2;
}

@keyframes rrDangerPulse {
  0% { box-shadow: 0 0 10px #ef4444; border-color: #ef4444; }
  50% { box-shadow: 0 0 40px #ef4444, inset 0 0 25px #ef4444; border-color: #f87171; }
  100% { box-shadow: 0 0 10px #ef4444; border-color: #ef4444; }
}

.rr-cylinder-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #1e293b;
  border: 2px solid #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #fbbf24;
  box-shadow: inset 0 0 6px #000;
}

.rr-chamber {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: radial-gradient(circle, #090d16, #020617);
  border: 2px solid #334155;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: all 0.3s ease;
  box-shadow: inset 0 0 8px #000;
}

.rr-chamber.blank {
  border-color: #10b981;
  background: rgba(16, 185, 129, 0.2);
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.4);
}

.rr-chamber.bullet {
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.3);
  box-shadow: 0 0 15px #ef4444;
}

.rr-status-banner {
  font-family: var(--font-tactical);
  font-size: 13px;
  font-weight: 800;
  color: #e2e8f0;
  text-align: center;
  margin-top: 10px;
  padding: 6px 14px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.3);
}

.rr-status-banner.rr-status-safe {
  color: #34d399;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.rr-status-banner.rr-status-loss {
  color: #f87171;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.rr-status-banner.rr-status-win {
  color: #fbbf24;
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.rr-step-strip {
  display: flex;
  gap: 6px;
  margin-top: 12px;
  width: 100%;
  justify-content: center;
}

.rr-step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 5px 8px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.08);
  min-width: 50px;
  transition: all 0.2s ease;
}

.rr-step-item .rr-step-num {
  font-size: 9px;
  color: #94a3b8;
  font-weight: 700;
}

.rr-step-item .rr-step-mult {
  font-size: 12px;
  font-weight: 800;
  color: #f1f5f9;
}

.rr-step-item.passed {
  border-color: #10b981;
  background: rgba(16, 185, 129, 0.15);
}

.rr-step-item.passed .rr-step-mult {
  color: #34d399;
}

.rr-step-item.current {
  border-color: #fbbf24;
  background: rgba(245, 158, 11, 0.2);
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.3);
}

.rr-step-item.current .rr-step-mult {
  color: #fbbf24;
}

.rr-bullets-selector-box {
  margin-top: 10px;
}

.rr-selector-label {
  font-size: 11px;
  font-weight: 800;
  color: #94a3b8;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

.rr-bullets-row {
  display: flex;
  gap: 6px;
}

.rr-bullet-btn {
  flex: 1;
  padding: 8px 4px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #cbd5e1;
  font-family: var(--font-tactical);
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.rr-bullet-btn.active {
  background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
  border-color: #f87171;
  color: #fff;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.5);
}

/* ==========================================================================
   29. РУССКОЕ ЛОТО (Scratch Cards)
   ========================================================================== */
.lotto-tabs-row {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.lotto-tab-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 4px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.lotto-tab-btn .lotto-tab-badge {
  font-size: 10px;
  font-weight: 800;
  color: #fbbf24;
}

.lotto-tab-btn .lotto-tab-title {
  font-size: 12px;
  font-weight: 800;
  color: #f1f5f9;
  margin: 2px 0;
}

.lotto-tab-btn .lotto-tab-sub {
  font-size: 9px;
  color: #94a3b8;
}

.lotto-tab-btn.active {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.25), rgba(217, 119, 6, 0.15));
  border-color: #f59e0b;
  box-shadow: 0 0 15px rgba(245, 158, 11, 0.3);
}

.lotto-ticket-frame {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  border: 2px solid #334155;
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  position: relative;
}

.lotto-ticket-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.15);
}

.lotto-brand {
  font-family: var(--font-tactical);
  font-size: 13px;
  font-weight: 900;
  color: #fbbf24;
  letter-spacing: 0.5px;
}

.lotto-price-tag {
  font-size: 12px;
  font-weight: 800;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.15);
  padding: 3px 8px;
  border-radius: 4px;
}

.lotto-lucky-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(0, 0, 0, 0.3);
  padding: 6px 10px;
  border-radius: 8px;
  margin-bottom: 10px;
}

.lotto-lucky-label {
  font-size: 10px;
  font-weight: 800;
  color: #94a3b8;
}

.lotto-lucky-numbers {
  display: flex;
  gap: 6px;
}

.lotto-lucky-ball {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fbbf24, #b45309);
  color: #000;
  font-weight: 900;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.lotto-grid-container {
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
}

.lotto-grid-bronze {
  grid-template-columns: repeat(3, 1fr);
}

.lotto-grid-silver {
  grid-template-columns: repeat(3, 1fr);
}

.lotto-grid-platinum {
  grid-template-columns: repeat(4, 1fr);
}

.lotto-cell {
  position: relative;
  aspect-ratio: 1 / 1;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
}

.lotto-cell-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4px;
}

.lotto-cell-symbol {
  font-size: 24px;
  line-height: 1;
}

.lotto-cell-name {
  font-size: 9px;
  color: #94a3b8;
  font-weight: 700;
  margin-top: 2px;
}

.lotto-cell-number {
  font-size: 18px;
  font-weight: 900;
  color: #fbbf24;
}

.lotto-cell-prize {
  font-size: 9px;
  font-weight: 800;
  color: #34d399;
}

.lotto-cell-prize.bonus-tag {
  color: #fbbf24;
  font-weight: 900;
}

.lotto-cell-mult {
  font-size: 14px;
  font-weight: 900;
  color: #f1f5f9;
}

.lotto-scratch-cover {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #475569 0%, #334155 50%, #64748b 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #cbd5e1;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 2;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.4);
}

.lotto-scratch-cover.scratched {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.8);
}

.cell-highlight-win {
  border-color: #fbbf24 !important;
  background: rgba(245, 158, 11, 0.25) !important;
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.6);
  animation: lottoWinPulse 0.8s ease infinite alternate;
}

@keyframes lottoWinPulse {
  0% { transform: scale(1); }
  100% { transform: scale(1.04); }
}

.lotto-status-text {
  font-family: var(--font-tactical);
  font-size: 12px;
  font-weight: 800;
  color: #94a3b8;
  text-align: center;
}

.lotto-status-text.lotto-status-win {
  color: #fbbf24;
}

.lotto-status-text.lotto-status-loss {
  color: #f87171;
}

/* ==========================================================================
   30. КРИПТО БИРЖА (Crypto Exchange)
   ========================================================================== */
.crypto-chart-card {
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 12px;
}

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

.crypto-token-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.crypto-symbol-badge {
  background: #38bdf8;
  color: #0f172a;
  font-weight: 900;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
}

.crypto-price {
  font-family: var(--font-tactical);
  font-size: 18px;
  font-weight: 900;
  color: #fff;
}

.crypto-change {
  font-size: 11px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
}

.crypto-stats-col {
  font-size: 10px;
  color: #94a3b8;
  text-align: right;
  line-height: 1.4;
}

.crypto-stats-col b {
  color: #e2e8f0;
}

.crypto-canvas-box {
  width: 100%;
  height: 150px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}

.crypto-chart-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.crypto-modes-nav {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.crypto-mode-btn {
  flex: 1;
  padding: 10px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #94a3b8;
  font-family: var(--font-tactical);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
}

.crypto-mode-btn.active {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.2), rgba(14, 165, 233, 0.1));
  border-color: #38bdf8;
  color: #fff;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.3);
}

.crypto-trade-inputs {
  display: flex;
  gap: 8px;
}

.crypto-trade-box {
  flex: 1;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 10px;
}

.trade-box-title {
  font-size: 10px;
  font-weight: 800;
  color: #94a3b8;
  margin-bottom: 6px;
}

.trade-estimate {
  font-size: 11px;
  color: #38bdf8;
  font-weight: 700;
  margin: 6px 0;
}

.btn-trade-buy {
  width: 100%;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border: none;
  color: #fff;
  font-family: var(--font-tactical);
  font-weight: 800;
  font-size: 11px;
  padding: 8px;
  border-radius: 6px;
  cursor: pointer;
}

.btn-trade-sell {
  width: 100%;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  border: none;
  color: #fff;
  font-family: var(--font-tactical);
  font-weight: 800;
  font-size: 11px;
  padding: 8px;
  border-radius: 6px;
  cursor: pointer;
}

.btn-trade-buy:disabled,
.btn-trade-buy[disabled],
.btn-trade-sell:disabled,
.btn-trade-sell[disabled] {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  filter: grayscale(60%) !important;
  box-shadow: none !important;
  transform: none !important;
}

.crypto-header-wallet {
  text-align: right;
}

.crypto-user-lyc {
  font-family: var(--font-tactical);
  font-size: 13px;
  font-weight: 900;
  color: #38bdf8;
  display: block;
}

/* ============================================================
   TELEGRAM AUTH & WEB SYNCHRONIZATION STYLES
   ============================================================ */
/* Hide Telegram Auth UI when running inside Telegram App */
body.is-telegram-app .header-tg-btn,
body.is-telegram-app .header-code-btn,
body.is-telegram-app .home-tg-sync-banner,
body.is-telegram-app #profileTgSyncCard,
body.is-telegram-app #modalTelegramAuth,
html.is-telegram-app .header-tg-btn,
html.is-telegram-app .header-code-btn,
html.is-telegram-app .home-tg-sync-banner,
html.is-telegram-app #modalTelegramAuth {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}


.header-code-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(99, 102, 241, 0.15) !important;
  border: 1px solid rgba(99, 102, 241, 0.4) !important;
  color: #a5b4fc !important;
  padding: 0 9px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
}

.header-code-btn:hover {
  background: rgba(99, 102, 241, 0.28) !important;
  border-color: #818cf8 !important;
  transform: translateY(-1px);
}

.header-code-text {
  font-family: var(--font-tactical);
  font-size: 11px;
  letter-spacing: 0.5px;
}

#modalAccessLock {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-tg-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(36, 158, 252, 0.15) !important;
  border: 1px solid rgba(36, 158, 252, 0.4) !important;
  color: #38bdf8 !important;
  padding: 0 10px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
}

.header-tg-btn:hover {
  background: rgba(36, 158, 252, 0.28) !important;
  border-color: #38bdf8 !important;
  transform: translateY(-1px);
}

.header-tg-btn.authed {
  background: rgba(34, 197, 94, 0.12) !important;
  border-color: rgba(34, 197, 94, 0.4) !important;
  color: #4ade80 !important;
}

.header-tg-text {
  font-family: var(--font-tactical);
  font-size: 11px;
  letter-spacing: 0.5px;
}

.home-tg-sync-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: linear-gradient(135deg, rgba(36, 158, 252, 0.14), rgba(15, 23, 42, 0.9));
  border: 1px solid rgba(36, 158, 252, 0.35);
  border-radius: 14px;
  padding: 14px 18px;
  margin-bottom: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.home-tg-sync-banner:hover {
  border-color: #38bdf8;
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(36, 158, 252, 0.2);
}

.home-tg-sync-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.home-tg-sync-icon-box {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #24A1DE, #0088cc);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #fff;
  box-shadow: 0 0 15px rgba(36, 158, 252, 0.45);
}

.home-tg-sync-title {
  font-family: var(--font-tactical);
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.5px;
}

.home-tg-sync-subtitle {
  font-size: 12px;
  color: #94a3b8;
  margin-top: 3px;
  line-height: 1.4;
}

.btn-home-tg-sync {
  background: linear-gradient(135deg, #24A1DE, #0088cc);
  color: #fff;
  border: none;
  font-weight: 800;
  font-family: var(--font-tactical);
  font-size: 13px;
  padding: 10px 18px;
  border-radius: 10px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 0 14px rgba(36, 158, 252, 0.35);
  transition: all 0.2s ease;
}

.btn-home-tg-sync:hover {
  background: #38bdf8;
  transform: scale(1.03);
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.5);
}

.tg-auth-dialog {
  max-width: 440px !important;
  border: 1px solid rgba(36, 158, 252, 0.35) !important;
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.7), 0 0 30px rgba(36, 158, 252, 0.15) !important;
}

.tg-auth-option-box {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  padding: 14px;
}

.tg-auth-option-title {
  font-family: var(--font-tactical);
  font-size: 13px;
  font-weight: 800;
  color: #38bdf8;
  margin-bottom: 6px;
  letter-spacing: 0.5px;
}

.btn-tg-auth-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  background: linear-gradient(135deg, #24A1DE, #0088cc);
  color: #fff !important;
  text-decoration: none;
  font-family: var(--font-tactical);
  font-size: 14px;
  font-weight: 800;
  padding: 12px 20px;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(36, 158, 252, 0.4);
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.btn-tg-auth-primary:hover {
  background: #38bdf8;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(56, 189, 248, 0.5);
}

.tg-auth-status-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 11px;
  color: #94a3b8;
  text-align: center;
  min-height: 24px;
}

.btn-tg-auth-logout {
  width: 100%;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #f87171;
  font-family: var(--font-tactical);
  font-weight: 800;
  font-size: 13px;
  padding: 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-tg-auth-logout:hover {
  background: rgba(239, 68, 68, 0.25);
  border-color: #ef4444;
  color: #fff;
}

@media (max-width: 640px) {
  .home-tg-sync-banner {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  .home-tg-sync-left {
    flex-direction: column;
    text-align: center;
  }
  .btn-home-tg-sync {
    width: 100%;
  }
}


/* ============================================================
   MULTIPLAYER & PVP ARENA (КАМЕНЬ-НОЖНИЦЫ-БУМАГА & ВЕРЮ-НЕ-ВЕРЮ)
   ============================================================ */
.multiplayer-game-box {
  background: linear-gradient(180deg, rgba(17, 24, 39, 0.95), rgba(11, 15, 25, 0.98)) !important;
  border-color: rgba(59, 130, 246, 0.25) !important;
}

.mp-online-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #34d399;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 11px;
}

.mp-subnav-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  background: rgba(0, 0, 0, 0.35);
  padding: 6px;
  border-radius: 12px;
  border: 1px solid var(--border-glass);
}

.mp-tab-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 8px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  font-weight: 700;
  font-size: 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.mp-tab-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
}

.mp-tab-btn.active {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(139, 92, 246, 0.25));
  border-color: #3b82f6;
  color: #fff;
  box-shadow: 0 0 14px rgba(59, 130, 246, 0.3);
}

/* RPS Arena */
.rps-arena {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  background: rgba(0, 0, 0, 0.3);
  padding: 16px;
  border-radius: 14px;
  border: 1px solid var(--border-glass);
  margin-bottom: 16px;
}

.mp-player-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.03);
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.mp-avatar-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(59, 130, 246, 0.2);
  border: 1px solid rgba(59, 130, 246, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.my-card .my-avatar {
  background: rgba(245, 158, 11, 0.2);
  border-color: rgba(245, 158, 11, 0.4);
}

.mp-player-details {
  flex: 1;
}

.mp-player-name {
  font-weight: 800;
  font-size: 13px;
  color: #fff;
}

.mp-player-status {
  font-size: 11px;
  color: var(--text-muted);
}

.rps-hand-display {
  font-size: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 12px;
  border: 1px solid var(--border-glass);
}

.hand-shake {
  animation: rpsHandShake 0.4s infinite alternate ease-in-out;
}

@keyframes rpsHandShake {
  0% { transform: translateY(-4px) rotate(-6deg); }
  100% { transform: translateY(4px) rotate(6deg); }
}

.rps-center-clash {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.rps-vs-circle {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ef4444, #f59e0b);
  color: #fff;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.5);
}

.rps-countdown-text {
  font-weight: 900;
  font-size: 12px;
  color: #38bdf8;
  letter-spacing: 1px;
}

/* RPS Gestures Grid */
.rps-choice-label {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-muted);
  margin-bottom: 8px;
  letter-spacing: 0.5px;
}

.rps-gestures-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}

.rps-gesture-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.rps-gesture-card:hover {
  background: rgba(255, 255, 255, 0.07);
  transform: translateY(-2px);
}

.rps-gesture-card.active {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(16, 185, 129, 0.25));
  border-color: #3b82f6;
  box-shadow: 0 0 18px rgba(59, 130, 246, 0.4);
  transform: translateY(-3px);
}

.gesture-icon {
  font-size: 38px;
  margin-bottom: 6px;
}

.gesture-title {
  font-weight: 800;
  font-size: 13px;
  color: #fff;
}

.gesture-sub {
  font-size: 10px;
  color: var(--text-muted);
}

/* Result Banner */
.mp-result-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px;
  border-radius: 12px;
  margin-bottom: 14px;
  text-align: center;
  animation: bannerPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes bannerPop {
  0% { transform: scale(0.9); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.banner-win {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(5, 150, 105, 0.3));
  border: 1px solid rgba(16, 185, 129, 0.6);
  color: #34d399;
}

.banner-loss {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(185, 28, 28, 0.25));
  border: 1px solid rgba(239, 68, 68, 0.5);
  color: #f87171;
}

.banner-tie {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(217, 119, 6, 0.25));
  border: 1px solid rgba(245, 158, 11, 0.5);
  color: #fbbf24;
}

.mp-res-title {
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0.5px;
}

.mp-res-sub {
  font-size: 11px;
  margin-top: 3px;
  opacity: 0.9;
}

/* MP Betting Controls */
.mp-bet-controls {
  background: rgba(0, 0, 0, 0.35);
  padding: 14px;
  border-radius: 12px;
  border: 1px solid var(--border-glass);
}

.mp-input-row {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

.mp-input-row input {
  flex: 1;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid var(--border-glass);
  border-radius: 8px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}

.btn-mp-action {
  width: 100%;
  margin-top: 12px;
  padding: 13px;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  border: none;
  border-radius: 10px;
  color: #fff;
  font-weight: 900;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.4);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-mp-action:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.6);
}

.btn-mp-action:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Liar's Dice Arena */
.liar-arena {
  background: rgba(0, 0, 0, 0.35);
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--border-glass);
  margin-bottom: 14px;
}

.liar-cup-stage {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 10px;
}

.liar-stage-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.liar-cup-visual {
  display: flex;
  justify-content: center;
  margin: 6px 0;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cup-body {
  font-size: 46px;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.6));
}

.cup-shake {
  animation: cupRattle 0.3s infinite ease-in-out;
}

@keyframes cupRattle {
  0% { transform: rotate(-5deg) translateY(-2px); }
  50% { transform: rotate(5deg) translateY(2px); }
  100% { transform: rotate(-5deg) translateY(-2px); }
}

.cup-lifted {
  transform: translateY(-24px) scale(0.9);
  opacity: 0.4;
}

.dice-track {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.dice-box {
  width: 44px;
  height: 44px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  transition: all 0.25s ease;
}

.dice-box .dice-symbol {
  font-size: 24px;
  line-height: 1;
}

.dice-box .dice-num {
  font-size: 10px;
  color: var(--text-muted);
}

.dice-highlight {
  border-color: #fbbf24 !important;
  background: rgba(245, 158, 11, 0.25) !important;
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.5);
  transform: scale(1.08);
}

.liar-table-felt {
  background: rgba(16, 185, 129, 0.08);
  border: 1px dashed rgba(16, 185, 129, 0.3);
  border-radius: 10px;
  padding: 8px 12px;
  margin-bottom: 10px;
  text-align: center;
}

.felt-title {
  font-size: 11px;
  font-weight: 800;
  color: #34d399;
  letter-spacing: 0.5px;
}

/* Claim Panel */
.liar-claim-panel {
  background: rgba(0, 0, 0, 0.3);
  padding: 12px;
  border-radius: 10px;
  border: 1px solid var(--border-glass);
  margin-bottom: 12px;
}

.claim-selectors-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.claim-sel-group label {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.claim-select {
  width: 100%;
  padding: 8px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid var(--border-glass);
  border-radius: 8px;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
}

.liar-action-btns-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}

.btn-liar-claim {
  padding: 12px;
  background: linear-gradient(135deg, #10b981, #059669);
  border: none;
  border-radius: 10px;
  color: #fff;
  font-weight: 900;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4);
}

.btn-liar-bluff {
  padding: 12px;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  border: none;
  border-radius: 10px;
  color: #fff;
  font-weight: 900;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.4);
}

/* Rooms List */
.mp-rooms-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

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

.mp-room-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 10px 14px;
  border-radius: 10px;
}

.mp-room-game {
  font-weight: 800;
  font-size: 13px;
  color: #fff;
}

.mp-room-creator {
  font-size: 11px;
  color: var(--text-muted);
}

.mp-empty-rooms {
  text-align: center;
  padding: 30px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 12px;
  border: 1px dashed var(--border-glass);
}

@media (max-width: 640px) {
  .rps-arena {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .rps-center-clash {
    order: 2;
    margin: 6px 0;
  }
  .mp-player-card.opp-card {
    order: 1;
  }
  .mp-player-card.my-card {
    order: 3;
  }
  .claim-selectors-row {
    grid-template-columns: 1fr;
  }
  .liar-action-btns-row {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   ZONA DOUBLE X50 & CLASSIC JACKPOT STYLES
   ============================================================ */
.double-history-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 0, 0, 0.4);
  padding: 8px 12px;
  border-radius: 10px;
  margin-bottom: 14px;
}

.double-history-label {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-muted);
}

.double-history-track {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}

.double-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
}

.chip-red { background: rgba(239, 68, 68, 0.25); border: 1px solid rgba(239, 68, 68, 0.5); color: #fca5a5; }
.chip-black { background: rgba(30, 41, 59, 0.6); border: 1px solid rgba(255, 255, 255, 0.2); color: #e2e8f0; }
.chip-blue { background: rgba(59, 130, 246, 0.3); border: 1px solid rgba(59, 130, 246, 0.6); color: #93c5fd; }
.chip-gold { background: rgba(234, 179, 8, 0.3); border: 1px solid rgba(234, 179, 8, 0.7); color: #fef08a; box-shadow: 0 0 10px rgba(234, 179, 8, 0.4); }

/* Double Carousel Tape */
.double-carousel-stage {
  position: relative;
  background: #090d16;
  border-radius: 14px;
  border: 2px solid var(--border-glass);
  padding: 18px 0;
  margin-bottom: 12px;
  overflow: hidden;
  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.8);
}

.double-needle-indicator {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 4px;
  background: #fbbf24;
  transform: translateX(-50%);
  z-index: 10;
  box-shadow: 0 0 16px #fbbf24;
}

.double-needle-indicator::before {
  content: "▼";
  position: absolute;
  top: -2px;
  left: 50%;
  transform: translateX(-50%);
  color: #fbbf24;
  font-size: 14px;
}

.double-needle-indicator::after {
  content: "▲";
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  color: #fbbf24;
  font-size: 14px;
}

.double-tape-window {
  width: 100%;
  overflow: hidden;
}

.double-tape-strip {
  display: flex;
  gap: 6px;
  transform: translateX(0px);
  will-change: transform;
}

.double-slot {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.4);
}

.slot-red { background: linear-gradient(180deg, #ef4444, #991b1b); color: #fff; border: 1px solid #f87171; }
.slot-black { background: linear-gradient(180deg, #1e293b, #0f172a); color: #fff; border: 1px solid #475569; }
.slot-blue { background: linear-gradient(180deg, #3b82f6, #1d4ed8); color: #fff; border: 1px solid #60a5fa; }
.slot-gold { background: linear-gradient(180deg, #eab308, #a16207); color: #fff; border: 1px solid #fde047; box-shadow: 0 0 18px rgba(234, 179, 8, 0.6); }

.slot-num { font-size: 18px; line-height: 1; }
.slot-icon { font-size: 12px; margin-top: 2px; }

/* Status Bar & Timer */
.double-status-bar {
  background: rgba(0, 0, 0, 0.4);
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--border-glass);
  margin-bottom: 12px;
}

.double-status-text {
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 6px;
}

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

.double-progress-bar {
  height: 100%;
  transition: width 0.9s linear;
}

/* 4 Color Betting Columns */
.double-bet-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.double-input-group {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 0, 0, 0.35);
  padding: 10px;
  border-radius: 10px;
  border: 1px solid var(--border-glass);
}

.double-input-group .input-tag {
  font-size: 11px;
  font-weight: 800;
  color: #fbbf24;
  white-space: nowrap;
}

.double-input-group input {
  flex: 1;
  padding: 7px 10px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid var(--border-glass);
  border-radius: 6px;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
}

.double-columns-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.double-col {
  background: rgba(0, 0, 0, 0.35);
  border-radius: 12px;
  padding: 10px;
  border: 1px solid var(--border-glass);
  display: flex;
  flex-direction: column;
}

.col-red { border-top: 3px solid #ef4444; }
.col-black { border-top: 3px solid #94a3b8; }
.col-blue { border-top: 3px solid #3b82f6; }
.col-gold { border-top: 3px solid #eab308; }

.btn-double-place {
  width: 100%;
  padding: 12px 6px;
  border: none;
  border-radius: 8px;
  font-weight: 900;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.btn-double-place:hover:not(:disabled) {
  transform: translateY(-2px);
}

.btn-double-place:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-col-red { background: linear-gradient(135deg, #ef4444, #b91c1c); color: #fff; box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3); }
.btn-col-black { background: linear-gradient(135deg, #334155, #0f172a); color: #fff; border: 1px solid #475569; }
.btn-col-blue { background: linear-gradient(135deg, #3b82f6, #1d4ed8); color: #fff; box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3); }
.btn-col-gold { background: linear-gradient(135deg, #eab308, #a16207); color: #fff; box-shadow: 0 4px 14px rgba(234, 179, 8, 0.4); }

.badge-mult {
  font-size: 11px;
  background: rgba(0, 0, 0, 0.35);
  padding: 2px 6px;
  border-radius: 4px;
}

.double-col-header {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  margin: 8px 0 6px 0;
  color: var(--text-muted);
}

.double-col-bets {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 140px;
  overflow-y: auto;
}

.mp-live-bet-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.03);
  padding: 5px 8px;
  border-radius: 6px;
  font-size: 11px;
}

.mp-live-bet-row.my-bet-row {
  background: rgba(59, 130, 246, 0.2);
  border: 1px solid rgba(59, 130, 246, 0.4);
}

.bet-user {
  font-weight: 700;
  color: #fff;
}

.bet-amount {
  font-weight: 800;
  color: #fbbf24;
}

/* Jackpot Arena */
.jackpot-arena-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 14px;
}

.jackpot-wheel-card, .jackpot-players-card {
  background: rgba(0, 0, 0, 0.35);
  border-radius: 14px;
  border: 1px solid var(--border-glass);
  padding: 16px;
}

.jackpot-pot-header {
  text-align: center;
  margin-bottom: 12px;
}

.jackpot-pot-amount {
  font-size: 32px;
  font-weight: 900;
  color: #fbbf24;
  text-shadow: 0 0 16px rgba(245, 158, 11, 0.5);
}

.jackpot-wheel-container {
  position: relative;
  width: 240px;
  height: 240px;
  margin: 0 auto 12px auto;
}

.jackpot-wheel-pointer {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  color: #fbbf24;
  font-size: 20px;
  z-index: 10;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.8));
}

#jackpotWheelCanvas {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.8);
  will-change: transform;
}

.jackpot-status-wrapper {
  text-align: center;
  margin-bottom: 12px;
}

.jackpot-status-badge {
  font-size: 13px;
  font-weight: 800;
  color: #fff;
}

.jackpot-players-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 200px;
  overflow-y: auto;
}

.jackpot-history-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
}

.jackpot-hist-row {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  padding: 4px 6px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 4px;
}

@media (max-width: 640px) {
  .double-columns-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .jackpot-arena-grid {
    grid-template-columns: 1fr;
  }
}




/* ==========================================================================

   UI & RESPONSIVENESS POLISH: ZERO-CLIPPING & FULL TOUCH ACTION

   ========================================================================== */



/* 1. Global Touch Response: All button children pass clicks to parent button */

button * {

  pointer-events: none;

}



/* Ensure inputs, selects, and textareas inside containers remain fully selectable */

input, select, textarea {

  pointer-events: auto !important;

  user-select: text !important;

  -webkit-user-select: text !important;

}



/* 2. Prevent bottom content and action buttons from being covered by the fixed navigation bar */

.tab-pane {

  padding-bottom: calc(95px + env(safe-area-inset-bottom, 20px)) !important;

  box-sizing: border-box;

}



/* 3. Global horizontal overflow shield */

html, body, .app-container {

  max-width: 100vw;

  overflow-x: hidden;

}



/* 4. Clickable card transparent elements */

.btn-home-play,

.btn-add-stars {

  pointer-events: none !important;

}



/* 5. Double X50 & Multiplayer Bet Inputs: wrap on narrow screens without overflowing */

.double-input-group,

.mp-input-row {

  flex-wrap: wrap !important;

  gap: 6px !important;

}



.double-input-group input,

.mp-input-row input {

  min-width: 100px;

  flex: 1 1 120px;

}



/* 6. Quick bet buttons: touch-optimized sizing & active feedback */

.quick-bet-btn {

  touch-action: manipulation;

  -webkit-tap-highlight-color: transparent;

  user-select: none;

}



.quick-bet-btn:active,

.btn-play-action:active,

.btn-mp-action:active,

.admin-quick-chip:active,

.mp-tab-btn:active,

.tg-nav-item:active {

  transform: scale(0.96);

  filter: brightness(1.15);

}



/* 7. Admin HQ Navigation on Mobile Screens */

.admin-subtabs-nav {

  overflow-x: auto !important;

  -webkit-overflow-scrolling: touch;

  flex-wrap: nowrap !important;

  padding-bottom: 6px;

  gap: 6px;

}



.admin-subtab-btn {

  flex-shrink: 0 !important;

  white-space: nowrap;

}



/* 8. Responsive Modals: Always fit on screen with internal scroll */

.modal-overlay {

  padding: 10px;

  box-sizing: border-box;

  display: none !important;

  align-items: center;

  justify-content: center;

}

.modal-overlay.active {

  display: flex !important;

}



.modal-content,

.inspect-modal-content,

.player-profile-modal-content,

.slot-payout-modal-content {

  max-height: calc(100dvh - 30px) !important;

  overflow-y: auto !important;

  -webkit-overflow-scrolling: touch;

  box-sizing: border-box;

}



/* 9. Small Mobile Screens (<= 420px): Adaptive Font & Button Sizing */

@media (max-width: 420px) {

  .game-title {

    font-size: 18px !important;

  }

  

  .game-subtitle {

    font-size: 11px !important;

  }



  .double-col {

    padding: 8px !important;

  }



  .btn-double-place {

    padding: 8px 4px !important;

    font-size: 11px !important;

  }



  .rps-arena {

    padding: 10px !important;

  }



  .rps-gestures-grid {

    gap: 8px !important;

  }



  .gesture-icon {

    font-size: 30px !important;

  }



  .liar-cup-stage {

    padding: 8px !important;

  }

}


/* 10. Access Code Gatekeeper & Telegram Auth (Closed Club Maximum Security Layer) */
body.security-auth-locked {
  overflow: hidden !important;
  height: 100vh !important;
  max-height: 100vh !important;
  touch-action: none !important;
  user-select: none !important;
}

body.security-auth-locked > header,
body.security-auth-locked > main,
body.security-auth-locked > nav,
body.security-auth-locked > .app-header,
body.security-auth-locked > .main-content,
body.security-auth-locked > .app-nav,
body.security-auth-locked > #bottomNav,
body.security-auth-locked > .side-menu,
body.security-auth-locked > div:not(.security-gatekeeper-overlay):not(#modalTelegramAuth):not(#modalAccessLock) {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  user-select: none !important;
  filter: blur(50px) !important;
}

.security-gatekeeper-overlay,
.access-gatekeeper-overlay {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  background: rgba(3, 7, 18, 0.98) !important;
  backdrop-filter: blur(30px) !important;
  -webkit-backdrop-filter: blur(30px) !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  z-index: 99999999 !important;
  padding: 16px !important;
  box-sizing: border-box !important;
  cursor: default !important;
}

.security-gatekeeper-overlay.active,
.access-gatekeeper-overlay.active {
  display: flex !important;
}

/* Shake animation when user clicks in empty space / attempts bypass */
@keyframes gatekeeperShake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-8px); }
  40%, 80% { transform: translateX(8px); }
}

.lock-shake {
  animation: gatekeeperShake 0.35s ease-in-out !important;
  border-color: rgba(239, 68, 68, 0.9) !important;
  box-shadow: 0 0 45px rgba(239, 68, 68, 0.55), 0 25px 70px rgba(0, 0, 0, 0.98) !important;
}

.access-gatekeeper-modal {
  background: #0b0f19 !important;
  background: linear-gradient(180deg, #111827 0%, #080c14 100%) !important;
  border: 1px solid rgba(99, 102, 241, 0.5) !important;
  border-radius: 20px !important;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.98), 0 0 50px rgba(99, 102, 241, 0.3) !important;
  max-width: 440px !important;
  width: 100% !important;
  padding: 24px 20px !important;
  box-sizing: border-box !important;
  position: relative !important;
  opacity: 1 !important;
  color: #fff !important;
}

.access-gatekeeper-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 14px;
  margin-bottom: 16px;
}

/* Flexible Admin Game Management Additions */
.admin-game-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  gap: 8px;
}

.admin-game-status-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 12px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.admin-game-status-badge.status-enabled {
  background: rgba(34, 197, 94, 0.16);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.45);
}

.admin-game-status-badge.status-maintenance {
  background: rgba(245, 158, 11, 0.16);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.45);
}

.admin-game-status-badge.status-disabled {
  background: rgba(239, 68, 68, 0.16);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.45);
}

.admin-control-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 6px;
}

.admin-control-col {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.admin-sublabel {
  font-size: 10px;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.admin-input-select, .admin-number-input {
  width: 100%;
  background: rgba(15, 23, 42, 0.85);
  color: #f8fafc;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 11px;
  outline: none;
  box-sizing: border-box;
  transition: all 0.18s ease;
}

.admin-input-select:focus, .admin-number-input:focus {
  border-color: #6366f1;
  box-shadow: 0 0 8px rgba(99, 102, 241, 0.35);
}

.btn-save-single-game {
  background: rgba(99, 102, 241, 0.14);
  border: 1px solid rgba(99, 102, 241, 0.38);
  color: #a5b4fc;
  font-size: 10px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.18s ease;
  user-select: none;
  touch-action: manipulation;
}

.btn-save-single-game:hover {
  background: rgba(99, 102, 241, 0.28);
  border-color: #818cf8;
  color: #ffffff;
  transform: translateY(-1px);
}

.btn-save-single-game:active {
  transform: scale(0.96);
}


/* Reset Game Config Buttons */
.btn-game-reset-default {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #fca5a5;
  font-size: 10px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.18s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  user-select: none;
  touch-action: manipulation;
  font-family: inherit;
}

.btn-game-reset-default:hover {
  background: rgba(239, 68, 68, 0.28);
  border-color: #ef4444;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.25);
}

.btn-game-reset-default:active {
  transform: scale(0.96);
}

.btn-admin-reset-all {
  background: rgba(239, 68, 68, 0.18);
  border: 1px solid rgba(239, 68, 68, 0.45);
  color: #fca5a5;
  font-size: 11px;
  font-weight: 700;
  padding: 7px 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: inherit;
}

.btn-admin-reset-all:hover {
  background: rgba(239, 68, 68, 0.35);
  border-color: #ef4444;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 2px 10px rgba(239, 68, 68, 0.3);
}

.btn-admin-reset-all:active {
  transform: scale(0.96);
}

/* Telegram Auth Modal Styling */
#modalTelegramAuth.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(3, 7, 18, 0.98) !important;
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  display: none !important;
  align-items: center;
  justify-content: center;
  z-index: 99999999 !important;
  padding: 16px;
}

#modalTelegramAuth.modal-overlay.active {
  display: flex !important;
}

.tg-auth-dialog {
  max-width: 440px !important;
  border: 1px solid rgba(36, 158, 252, 0.35) !important;
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.7), 0 0 30px rgba(36, 158, 252, 0.15) !important;
}

.tg-auth-status-box {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 12px;
  color: #94a3b8;
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-tg-auth-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 16px;
  background: linear-gradient(135deg, #24A1DE, #0088cc);
  color: #ffffff;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 4px 15px rgba(36, 158, 252, 0.4);
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.btn-tg-auth-primary:hover {
  background: #38bdf8;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(56, 189, 248, 0.5);
}

.btn-tg-auth-logout {
  width: 100%;
  padding: 10px 14px;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #fca5a5;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-tg-auth-logout:hover {
  background: rgba(239, 68, 68, 0.3);
  color: #fff;
}

/* ==========================================================================
   STUDIO DESIGN ENHANCEMENTS (HUMAN-CRAFTED PRIVATE CLUB AESTHETIC)
   ========================================================================== */
.home-game-card {
  background: #0d1017 !important;
  border: 1px solid rgba(255, 255, 255, 0.065) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45) !important;
  min-height: 144px !important;
  padding: 12px !important;
}

.home-game-card:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(245, 158, 11, 0.4) !important;
  border-top-color: rgba(245, 158, 11, 0.65) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.65), 0 0 16px rgba(245, 158, 11, 0.08) !important;
}

.home-game-card-glow {
  display: none !important;
}

.home-game-icon {
  font-size: 24px !important;
  width: 42px !important;
  height: 42px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255, 255, 255, 0.025) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 8px !important;
  margin-bottom: 8px !important;
  filter: none !important;
}

.home-game-card:hover .home-game-icon {
  background: rgba(245, 158, 11, 0.06) !important;
  border-color: rgba(245, 158, 11, 0.35) !important;
}

.btn-home-play {
  width: 100% !important;
  padding: 7px 0 !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, 0.035) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #94a3b8 !important;
  font-family: 'Inter', -apple-system, sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.home-game-card:hover .btn-home-play {
  background: rgba(245, 158, 11, 0.12) !important;
  border-color: rgba(245, 158, 11, 0.45) !important;
  color: #fbbf24 !important;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.15) !important;
}

/* Studio Gatekeeper Modals */
.gatekeeper-dialog {
  background: #0b0d14 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-top: 1px solid rgba(245, 158, 11, 0.35) !important;
  border-radius: 14px !important;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.95), 0 0 40px rgba(0, 0, 0, 0.8) !important;
  max-width: 420px !important;
  width: 100% !important;
  padding: 28px 24px !important;
  text-align: center !important;
}

.gatekeeper-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.25);
  padding: 5px 12px;
  border-radius: 20px;
  margin-bottom: 16px;
}

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

.gatekeeper-headline {
  font-size: 19px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
  font-family: 'Inter', -apple-system, sans-serif;
}

.gatekeeper-subhead {
  font-size: 12px;
  color: #94a3b8;
  line-height: 1.5;
  margin-bottom: 22px;
}

.gatekeeper-action-box {
  margin-bottom: 12px;
}

.btn-gatekeeper-telegram {
  background: linear-gradient(180deg, #28a8e9 0%, #1f94ce 100%);
  border: 1px solid #38bdf8;
  border-radius: 8px;
  color: #ffffff !important;
  font-weight: 700;
  font-size: 14px;
  padding: 13px 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 4px 16px rgba(36, 161, 222, 0.25);
  text-decoration: none;
  width: 100%;
  box-sizing: border-box;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-gatekeeper-telegram:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(36, 161, 222, 0.35);
}

.btn-gatekeeper-telegram:active {
  transform: scale(0.98);
}

.gatekeeper-status-line {
  margin-top: 14px;
  font-size: 12px;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.gatekeeper-identity-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #e2e8f0;
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 12px;
  margin-bottom: 14px;
  font-weight: 600;
}

.gatekeeper-identity-pill span:first-child {
  color: #10b981;
}

.gatekeeper-input-wrapper {
  position: relative;
  margin-bottom: 14px;
}

.gatekeeper-code-input {
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  font-size: 18px;
  letter-spacing: 5px;
  font-weight: 800;
  padding: 13px 44px 13px 44px;
  background: #07080c;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: #ffffff;
  font-family: 'Inter', monospace;
  transition: all 0.18s ease;
}

.gatekeeper-code-input:focus {
  outline: none;
  border-color: #f59e0b;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.25);
}

.btn-toggle-eye {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  color: #64748b;
  padding: 6px;
}

.btn-gatekeeper-submit {
  width: 100%;
  padding: 14px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #fbbf24 0%, #d97706 100%);
  border: 1px solid #f59e0b;
  border-radius: 8px;
  color: #08090d;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.25);
  transition: all 0.15s ease;
}

.btn-gatekeeper-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.35);
}

.btn-gatekeeper-submit:active {
  transform: scale(0.98);
}

.gatekeeper-footer-actions {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

.btn-switch-account {
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 12px;
  cursor: pointer;
  text-decoration: underline;
  transition: color 0.15s ease;
}

.btn-switch-account:hover {
  color: #ffffff;
}

.gatekeeper-creator-link {
  font-size: 11px;
  color: #64748b;
  text-decoration: none;
  transition: color 0.15s ease;
}

.gatekeeper-creator-link:hover {
  color: #94a3b8;
}

.gatekeeper-feedback-msg {
  min-height: 18px;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 12px;
}

/* Tactical HUD Chips */
.balance-chip {
  background: #0d1017 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

.balance-chip.coins {
  border-color: rgba(245, 158, 11, 0.3) !important;
  color: #fbbf24 !important;
}

.balance-chip.stars {
  border-color: rgba(56, 189, 248, 0.25) !important;
  color: #38bdf8 !important;
}

.daily-drop-btn {
  background: #0d1017 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #94a3b8 !important;
  border-radius: 8px !important;
}

.daily-drop-btn:hover {
  background: rgba(245, 158, 11, 0.08) !important;
  border-color: rgba(245, 158, 11, 0.35) !important;
  color: #fbbf24 !important;
}

/* Home Hero Card */
.home-hero-card {
  background: #0d1017 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 12px !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5) !important;
}

.home-hero-glow {
  display: none !important;
}

.home-agent-avatar {
  background: #080a0f !important;
  border: 1px solid rgba(245, 158, 11, 0.35) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
  color: #fbbf24 !important;
}


/* ==========================================================================
   PROFILE VIEW ENHANCEMENT (Default Entry View)
   ========================================================================== */
#paneProfile .game-box {
  max-width: 960px;
  margin: 0 auto;
  background: linear-gradient(160deg, rgba(17, 24, 39, 0.95), rgba(11, 15, 25, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 24px;
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.4);
}

@media (min-width: 992px) {
  .profile-stats-grid {
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 12px !important;
  }
  .theme-grid {
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 12px !important;
  }
}

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

.spin {
  display: inline-block;
  animation: spin 0.9s linear infinite !important;
}


/* Leaderboard Quick Admin Delete Button */
.btn-lb-quick-del {
    background: rgba(239, 68, 68, 0.2);
    border: 1px solid rgba(239, 68, 68, 0.45);
    color: #fca5a5;
    border-radius: 8px;
    padding: 3px 6px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    margin-left: 4px;
}
.btn-lb-quick-del:hover {
    background: rgba(239, 68, 68, 0.45);
    border-color: #ef4444;
    transform: scale(1.15);
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.4);
}


/* Admin Player Preview Badge & Picker Styles */
.admin-player-preview-badge {
  font-size: 11px;
  line-height: 1.4;
  padding: 5px 10px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px dashed rgba(255, 255, 255, 0.15);
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}
.admin-player-preview-badge.found {
  border-color: rgba(34, 197, 94, 0.6);
  background: rgba(34, 197, 94, 0.12);
  color: #4ade80;
}
.admin-player-preview-badge.not-found {
  border-color: rgba(239, 68, 68, 0.6);
  background: rgba(239, 68, 68, 0.12);
  color: #f87171;
}

.admin-picker-user-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.admin-picker-user-item:hover {
  background: rgba(245, 158, 11, 0.15);
  border-color: #f59e0b;
  transform: translateX(2px);
}


/* =========================================================
   ACHIEVEMENTS (ЗАЛ ДОСТИЖЕНИЙ) HIGH-END VISUAL OVERHAUL
   ========================================================= */

.achievements-dashboard-box {
  padding: 14px !important;
  background: rgba(15, 23, 42, 0.45);
}

.achievements-hero-card {
  position: relative;
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.8) 0%, rgba(15, 23, 42, 0.95) 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

.achievements-hero-glow {
  position: absolute;
  top: -40px;
  right: -40px;
  width: 140px;
  height: 140px;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.25) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.achievements-hero-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.achievements-hero-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.achievements-trophy-badge {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.25), rgba(217, 119, 6, 0.1));
  border: 1px solid rgba(245, 158, 11, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.3);
  flex-shrink: 0;
}

.achievements-hero-title {
  font-size: 18px;
  font-weight: 900;
  margin: 0 0 2px 0;
  background: linear-gradient(135deg, #ffffff 30%, #fef08a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.3px;
}

.achievements-hero-subtitle {
  font-size: 11.5px;
  color: #94a3b8;
  line-height: 1.35;
}

.btn-claim-all-achievements {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #059669 0%, #10b981 100%);
  border: 1px solid rgba(52, 211, 153, 0.6);
  border-radius: 10px;
  color: #ffffff;
  padding: 10px 18px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.45);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  animation: pulseClaimAll 2s infinite;
}
.btn-claim-all-achievements:hover {
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.6);
}
.btn-claim-all-achievements:active {
  transform: scale(0.98);
}

@keyframes pulseClaimAll {
  0%, 100% { box-shadow: 0 0 10px rgba(16, 185, 129, 0.4); }
  50% { box-shadow: 0 0 22px rgba(16, 185, 129, 0.8); }
}

.achievements-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.ach-stat-card {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 8px 10px;
  text-align: center;
}

.ach-stat-val {
  font-size: 14px;
  font-weight: 800;
  color: #f8fafc;
  font-family: monospace;
}

.ach-stat-label {
  font-size: 10px;
  color: #64748b;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.3px;
  margin-top: 2px;
}

.ach-stat-bar-mini {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  margin-top: 6px;
  overflow: hidden;
}
.ach-stat-bar-mini div {
  height: 100%;
  background: linear-gradient(90deg, #10b981, #38bdf8);
  border-radius: 2px;
  transition: width 0.4s ease;
}

/* Category & Filter Tabs */
.achievements-nav-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 6px;
  margin-bottom: 12px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.achievements-nav-tabs::-webkit-scrollbar {
  display: none;
}

.ach-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #94a3b8;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
.ach-tab-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  color: #f1f5f9;
}
.ach-tab-btn.active {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(217, 119, 6, 0.25));
  border-color: #f59e0b;
  color: #fbbf24;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.2);
}

/* Promo Card in Achievements */
.achievements-promo-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  background: rgba(2, 132, 199, 0.08);
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 10px;
  padding: 8px 12px;
  margin-bottom: 12px;
}

/* Achievements List & Cards */
.achievements-card-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.achievement-item-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}
.achievement-item-card:hover {
  transform: translateY(-1px);
  background: rgba(30, 41, 59, 0.65);
}

/* Rarity variants */
.achievement-item-card.rarity-common {
  border-color: rgba(148, 163, 184, 0.25);
}
.achievement-item-card.rarity-rare {
  border-color: rgba(56, 189, 248, 0.35);
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.05), rgba(15, 23, 42, 0.65));
}
.achievement-item-card.rarity-epic {
  border-color: rgba(168, 85, 247, 0.4);
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.06), rgba(15, 23, 42, 0.65));
}
.achievement-item-card.rarity-legendary {
  border-color: rgba(245, 158, 11, 0.45);
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.07), rgba(15, 23, 42, 0.65));
}
.achievement-item-card.rarity-mythic {
  border-color: rgba(239, 68, 68, 0.55);
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.08), rgba(15, 23, 42, 0.65));
}

/* Ready to Claim state */
.achievement-item-card.state-ready {
  border-color: rgba(34, 197, 94, 0.65);
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.12), rgba(15, 23, 42, 0.7));
  box-shadow: 0 0 16px rgba(34, 197, 94, 0.25);
  animation: glowReadyCard 2.5s infinite;
}
@keyframes glowReadyCard {
  0%, 100% { box-shadow: 0 0 10px rgba(34, 197, 94, 0.2); }
  50% { box-shadow: 0 0 20px rgba(34, 197, 94, 0.45); }
}

/* Claimed state */
.achievement-item-card.state-claimed {
  opacity: 0.72;
  border-color: rgba(255, 255, 255, 0.05);
}

/* Icon Box */
.ach-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.5);
}

.ach-details-col {
  flex: 1;
  min-width: 0;
}

.ach-header-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 2px;
}

.ach-title-text {
  font-size: 13.5px;
  font-weight: 800;
  color: #f8fafc;
}

.ach-rarity-badge {
  font-size: 9.5px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.ach-rarity-badge.common { background: rgba(148, 163, 184, 0.15); color: #cbd5e1; border: 1px solid rgba(148, 163, 184, 0.3); }
.ach-rarity-badge.rare { background: rgba(56, 189, 248, 0.15); color: #38bdf8; border: 1px solid rgba(56, 189, 248, 0.35); }
.ach-rarity-badge.epic { background: rgba(168, 85, 247, 0.15); color: #c084fc; border: 1px solid rgba(168, 85, 247, 0.35); }
.ach-rarity-badge.legendary { background: rgba(245, 158, 11, 0.15); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.4); }
.ach-rarity-badge.mythic { background: rgba(239, 68, 68, 0.15); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.45); }

.ach-desc-text {
  font-size: 11px;
  color: #94a3b8;
  margin-bottom: 6px;
  line-height: 1.35;
}

.ach-progress-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.ach-progress-track {
  flex: 1;
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  overflow: hidden;
}

.ach-progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #10b981, #38bdf8);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.ach-progress-numbers {
  font-size: 10px;
  color: #94a3b8;
  font-weight: 700;
  font-family: monospace;
}

.ach-reward-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 800;
  color: #34d399;
}

.ach-btn-claim-action {
  background: linear-gradient(135deg, #059669 0%, #10b981 100%);
  border: 1px solid rgba(52, 211, 153, 0.6);
  border-radius: 8px;
  color: #ffffff;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 2px 10px rgba(16, 185, 129, 0.4);
  transition: all 0.18s ease;
  animation: pulseClaimBtn 1.8s infinite;
}
.ach-btn-claim-action:hover {
  transform: scale(1.04);
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.6);
}

@keyframes pulseClaimBtn {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}

.ach-btn-claimed-badge {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  color: #64748b;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.ach-btn-locked-badge {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  color: #94a3b8;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  font-family: monospace;
}


/* =========================================================
   ARTIFACTS VAULT (ХРАНИЛИЩЕ РЕЛИКВИЙ) HIGH-END STYLES
   ========================================================= */

.artifacts-vault-box {
  padding: 14px !important;
  background: rgba(15, 23, 42, 0.45);
}

.artifacts-hero-card {
  position: relative;
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.12) 0%, rgba(15, 23, 42, 0.95) 100%);
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 14px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
}

.artifacts-hero-glow {
  position: absolute;
  top: -50px;
  right: -50px;
  width: 160px;
  height: 160px;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.28) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.artifacts-hero-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.artifacts-hero-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.artifacts-diamond-badge {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.25), rgba(2, 132, 199, 0.1));
  border: 1px solid rgba(56, 189, 248, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.35);
  flex-shrink: 0;
}

.artifacts-hero-title {
  font-size: 18px;
  font-weight: 900;
  margin: 0 0 2px 0;
  background: linear-gradient(135deg, #ffffff 40%, #bae6fd 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.3px;
}

.artifacts-hero-subtitle {
  font-size: 11.5px;
  color: #94a3b8;
  line-height: 1.35;
}

.artifacts-hero-counter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
  color: #f1f5f9;
}

.artifacts-stats-bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.art-stat-metric {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 8px 10px;
  text-align: center;
}

.art-stat-num {
  font-size: 14px;
  font-weight: 800;
  color: #f8fafc;
  font-family: monospace;
}

.art-stat-name {
  font-size: 10px;
  color: #64748b;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.3px;
  margin-top: 2px;
}

/* Filter tabs */
.artifacts-filter-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 6px;
  margin-bottom: 14px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.artifacts-filter-tabs::-webkit-scrollbar {
  display: none;
}

.art-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #94a3b8;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
.art-tab-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  color: #f1f5f9;
}
.art-tab-btn.active {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.2), rgba(2, 132, 199, 0.25));
  border-color: #38bdf8;
  color: #38bdf8;
  box-shadow: 0 2px 8px rgba(56, 189, 248, 0.2);
}


/* Glitch Luck Active Animation */
body.glitch-luck-active {
  animation: glitchChromatic 4s infinite alternate;
}
@keyframes glitchChromatic {
  0%, 92%, 100% { filter: none; }
  93% { filter: drop-shadow(2px 0 #ef4444) drop-shadow(-2px 0 #06b6d4); }
  95% { filter: contrast(1.15) hue-rotate(15deg); }
  97% { filter: drop-shadow(-2px 0 #fbbf24); }
}
.glitch-luck-badge {
  position: fixed;
  bottom: 74px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(90deg, #f59e0b, #ef4444);
  color: #fff;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 800;
  z-index: 999;
  box-shadow: 0 4px 15px rgba(239, 68, 68, 0.5);
  animation: pulse 1.5s infinite;
  display: flex;
  align-items: center;
  gap: 6px;
  pointer-events: none;
}

/* World Boss Raid Bar */
.world-boss-bar {
  background: linear-gradient(135deg, rgba(88, 28, 135, 0.95), rgba(15, 23, 42, 0.95));
  border: 1px solid #a855f7;
  border-radius: 12px;
  padding: 10px 14px;
  margin: 10px 14px;
  box-shadow: 0 4px 20px rgba(168, 85, 247, 0.4);
  position: relative;
  z-index: 90;
  animation: eventGlowPulse 2s infinite alternate;
}
.world-boss-hp-track {
  width: 100%;
  height: 12px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 6px;
  overflow: hidden;
  margin: 8px 0;
  border: 1px solid rgba(168, 85, 247, 0.4);
}
.world-boss-hp-fill {
  height: 100%;
  background: linear-gradient(90deg, #ec4899, #ef4444);
  transition: width 0.3s ease;
}

/* Admin Broadcast Modal */
.admin-broadcast-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(8px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.admin-broadcast-modal-box {
  background: linear-gradient(145deg, #1e1b4b, #0f172a);
  border: 2px solid #ef4444;
  border-radius: 16px;
  box-shadow: 0 0 35px rgba(239, 68, 68, 0.6);
  max-width: 420px;
  width: 100%;
  padding: 24px;
  text-align: center;
  animation: nukeZoomIn 0.35s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}


/* ==========================================================================
   HALLOWEEN SEASONAL EVENT (Theme, Coins, Banner & Accents)
   ========================================================================== */

/* Hero Banner on Home Page */
.halloween-hero-banner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  margin-bottom: 16px;
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.14), rgba(15, 23, 42, 0.92));
  border: 1px solid rgba(249, 115, 22, 0.45);
  border-radius: var(--radius-sm, 12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px rgba(249, 115, 22, 0.18);
  overflow: hidden;
  transition: all 0.3s ease;
}
.halloween-banner-glow {
  position: absolute;
  top: -40px;
  right: -40px;
  width: 140px;
  height: 140px;
  background: radial-gradient(circle, rgba(249, 115, 22, 0.3) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  filter: blur(15px);
}
.halloween-banner-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 0;
}
.halloween-icon-box {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  background: rgba(249, 115, 22, 0.18);
  border: 1px solid rgba(249, 115, 22, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 16px rgba(249, 115, 22, 0.4);
}
.halloween-banner-coin {
  width: 38px;
  height: 38px;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(249, 115, 22, 0.8));
  animation: halloweenCoinFloat 3s infinite ease-in-out;
}
@keyframes halloweenCoinFloat {
  0%, 100% { transform: translateY(0) scale(1); filter: drop-shadow(0 0 8px rgba(249, 115, 22, 0.7)); }
  50% { transform: translateY(-3px) scale(1.05); filter: drop-shadow(0 0 14px rgba(249, 115, 22, 0.95)); }
}
.halloween-banner-info {
  flex: 1;
  min-width: 0;
}
.halloween-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-tactical);
  font-size: 10px;
  font-weight: 800;
  color: #fb923c;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}
.halloween-title {
  font-family: var(--font-tactical);
  font-size: 15px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 0.5px;
  text-shadow: 0 0 10px rgba(249, 115, 22, 0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.halloween-desc {
  font-size: 11.5px;
  color: #cbd5e1;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.halloween-banner-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.halloween-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 14px;
  font-family: var(--font-tactical);
  font-size: 11.5px;
  font-weight: 800;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.halloween-btn.primary {
  background: linear-gradient(135deg, #f97316, #ea580c);
  color: #fff;
  box-shadow: 0 0 12px rgba(249, 115, 22, 0.4);
}
.halloween-btn.primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 18px rgba(249, 115, 22, 0.6);
}
.halloween-btn.secondary {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(249, 115, 22, 0.35);
  color: #fb923c;
}
.halloween-btn.secondary:hover {
  background: rgba(249, 115, 22, 0.15);
  color: #fff;
}

/* Global .theme-halloween Atmospheric Overrides */
.theme-halloween .tactical-coin-img {
  filter: drop-shadow(0 0 8px rgba(249, 115, 22, 0.75));
  animation: halloweenCoinGlow 2.5s infinite ease-in-out;
}
@keyframes halloweenCoinGlow {
  0%, 100% { filter: drop-shadow(0 0 5px rgba(249, 115, 22, 0.6)); }
  50% { filter: drop-shadow(0 0 11px rgba(249, 115, 22, 1)); }
}

.theme-halloween .clicker-coin-img {
  filter: drop-shadow(0 0 35px rgba(249, 115, 22, 0.85));
}
.theme-halloween .clicker-coin-aura {
  background: radial-gradient(circle, rgba(249, 115, 22, 0.35) 0%, transparent 68%);
}
.theme-halloween .home-game-card:hover {
  border-color: rgba(249, 115, 22, 0.5) !important;
  box-shadow: 0 4px 20px rgba(249, 115, 22, 0.25) !important;
}
.theme-halloween .nav-tab.active {
  border-color: #f97316 !important;
  box-shadow: 0 0 14px rgba(249, 115, 22, 0.35) !important;
}
.theme-halloween .admin-section-card {
  border-color: rgba(249, 115, 22, 0.25);
}

@media (max-width: 768px) {
  .halloween-hero-banner {
    flex-direction: column;
    align-items: stretch;
    padding: 12px 14px;
  }
  .halloween-banner-actions {
    justify-content: stretch;
  }
  .halloween-btn {
    flex: 1;
    justify-content: center;
  }
}


/* ========================================================================== */
/* HALLOWEEN WORLD BOSS RAID & CUSTOM PROFILE STYLES                         */
/* ========================================================================== */

/* Left Sidebar Halloween World Boss Raid Banner */
.sidebar-halloween-banner {
  margin: 10px 12px 14px 12px;
  background: linear-gradient(135deg, rgba(255, 107, 0, 0.18), rgba(220, 38, 38, 0.18));
  border: 1px solid rgba(255, 107, 0, 0.5);
  border-radius: 12px;
  padding: 10px 12px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 16px rgba(255, 107, 0, 0.22);
  transition: all 0.25s ease;
}
.sidebar-halloween-banner:hover {
  transform: translateY(-2px);
  border-color: #ff6b00;
  box-shadow: 0 0 22px rgba(255, 107, 0, 0.45);
}
.shb-header-tag {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 900;
  color: #ff6b00;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}
.shb-live-dot {
  width: 6px;
  height: 6px;
  background: #ff6b00;
  border-radius: 50%;
  margin-left: auto;
  box-shadow: 0 0 8px #ff6b00;
  animation: liveDotPulse 1.5s infinite;
}
@keyframes liveDotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(1.3); }
}
.shb-boss-content {
  display: flex;
  align-items: center;
  gap: 10px;
}
.shb-avatar-box {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  overflow: hidden;
  border: 1.5px solid #ff6b00;
  position: relative;
  flex-shrink: 0;
  box-shadow: 0 0 10px rgba(255, 107, 0, 0.4);
}
.shb-boss-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.shb-details {
  flex: 1;
  min-width: 0;
}
.shb-boss-name {
  font-size: 12px;
  font-weight: 800;
  color: #f8fafc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}
.shb-hp-track {
  width: 100%;
  height: 6px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 4px;
}
.shb-hp-progress, .shb-hp-fill {
  height: 100%;
  background: linear-gradient(90deg, #dc2626, #ea580c, #f59e0b);
  border-radius: 3px;
  box-shadow: 0 0 8px #ff6b00;
  transition: width 0.4s ease;
}
.shb-hp-meta {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: #94a3b8;
  font-weight: 700;
}
.shb-rate {
  color: #f59e0b;
}
.shb-footer-btn {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 107, 0, 0.15);
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  color: #ff6b00;
}

/* Dedicated Raid Pane */
.halloween-raid-container {
  max-width: 860px;
  margin: 0 auto;
  padding: 16px 14px 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.halloween-header-card {
  background: linear-gradient(135deg, rgba(255, 107, 0, 0.12), rgba(220, 38, 38, 0.12));
  border: 1px solid rgba(255, 107, 0, 0.35);
  border-radius: 14px;
  padding: 18px 20px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(255, 107, 0, 0.15);
}
.hh-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 107, 0, 0.15);
  border: 1px solid rgba(255, 107, 0, 0.4);
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 900;
  color: #ff6b00;
  margin-bottom: 8px;
}
.hh-title {
  margin: 0 0 6px 0;
  font-size: 24px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 0.5px;
  text-shadow: 0 0 12px rgba(255, 107, 0, 0.5);
}
.hh-subtitle {
  margin: 0 0 12px 0;
  font-size: 13px;
  color: #cbd5e1;
  line-height: 1.5;
}
.hh-mechanic-box {
  background: rgba(0, 0, 0, 0.4);
  border: 1px dashed rgba(255, 107, 0, 0.5);
  border-radius: 10px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: #e2e8f0;
}

/* Boss Showcase Card */
.halloween-boss-showcase {
  background: radial-gradient(circle at 50% 20%, rgba(255, 107, 0, 0.15) 0%, rgba(15, 23, 42, 0.95) 75%);
  border: 1px solid rgba(255, 107, 0, 0.45);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 0 35px rgba(255, 107, 0, 0.22);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hbs-status-row {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.halloween-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 900;
  padding: 4px 12px;
  border-radius: 20px;
  letter-spacing: 0.5px;
}
.halloween-badge.enraged {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.25), rgba(249, 115, 22, 0.25));
  border: 1px solid #ff6b00;
  color: #ff6b00;
  box-shadow: 0 0 10px rgba(255, 107, 0, 0.4);
  animation: badgePulse 2s infinite;
}
.halloween-badge.killed {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(5, 150, 105, 0.25));
  border: 1px solid #10b981;
  color: #10b981;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.4);
}
@keyframes badgePulse {
  0%, 100% { box-shadow: 0 0 8px rgba(255, 107, 0, 0.3); }
  50% { box-shadow: 0 0 18px rgba(255, 107, 0, 0.7); }
}
.hbs-live-tag {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  color: #94a3b8;
}
.hbs-dot {
  width: 7px;
  height: 7px;
  background: #ff6b00;
  border-radius: 50%;
  box-shadow: 0 0 8px #ff6b00;
  animation: liveDotPulse 1.5s infinite;
}

/* Boss Art Container & Hit Animations */
.hbs-avatar-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px 0 20px 0;
  width: 100%;
}
.hbs-boss-art {
  width: 100%;
  max-width: 320px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 18px;
  border: 2px solid rgba(255, 107, 0, 0.6);
  box-shadow: 0 0 35px rgba(255, 107, 0, 0.45);
  transition: transform 0.2s ease, filter 0.3s ease;
}
.hbs-boss-art.boss-slain {
  filter: grayscale(70%) sepia(30%);
  opacity: 0.75;
}
.hbs-boss-art.hit-shake {
  animation: hitShake 0.35s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
@keyframes hitShake {
  10%, 90% { transform: translate3d(-3px, 0, 0) scale(0.98); }
  20%, 80% { transform: translate3d(4px, 0, 0) scale(1.02); }
  30%, 50%, 70% { transform: translate3d(-5px, 0, 0) scale(0.97); }
  40%, 60% { transform: translate3d(5px, 0, 0) scale(1.01); }
}

/* Floating damage numbers */
.floating-dmg {
  position: absolute;
  top: 45%;
  left: 50%;
  font-size: 20px;
  font-weight: 900;
  color: #fbbf24;
  text-shadow: 0 0 10px #ff6b00, 0 0 20px #dc2626;
  pointer-events: none;
  z-index: 20;
  animation: floatDmgUp 1.1s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards;
}
.floating-dmg.crit {
  font-size: 26px;
  color: #ef4444;
  text-shadow: 0 0 12px #ff0000, 0 0 24px #ff6b00;
}
@keyframes floatDmgUp {
  0% { opacity: 0; transform: translate(-50%, 0) scale(0.6); }
  20% { opacity: 1; transform: translate(-50%, -20px) scale(1.2); }
  100% { opacity: 0; transform: translate(-50%, -80px) scale(1); }
}

/* Giant HP Bar */
.hbs-hp-section {
  width: 100%;
  margin-bottom: 22px;
}
.hbs-hp-labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  font-weight: 800;
  color: #f8fafc;
  margin-bottom: 6px;
}
.hbs-hp-pct {
  color: #ff6b00;
  font-size: 15px;
  font-weight: 900;
}
.hbs-hp-track {
  width: 100%;
  height: 22px;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 11px;
  border: 1px solid rgba(255, 107, 0, 0.5);
  overflow: hidden;
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.8);
  margin-bottom: 6px;
}
.hbs-hp-fill {
  height: 100%;
  background: linear-gradient(90deg, #dc2626, #ea580c, #f59e0b, #ef4444);
  background-size: 200% 100%;
  animation: flameBarFlow 3s linear infinite;
  box-shadow: 0 0 16px rgba(255, 107, 0, 0.8);
  transition: width 0.4s ease;
}
@keyframes flameBarFlow {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
.hbs-hp-numbers {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
}
.hbs-hp-comm-tag {
  color: #f59e0b;
}

/* Battle Station Attacks */
.hbs-battle-station {
  width: 100%;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border-glass);
  border-radius: 14px;
  padding: 16px;
}
.hbs-action-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 800;
  color: #f8fafc;
  margin-bottom: 12px;
}
.hbs-action-grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 12px;
}
@media (max-width: 640px) {
  .hbs-action-grid {
    grid-template-columns: 1fr;
  }
}
.btn-hbs-attack.free {
  background: linear-gradient(135deg, rgba(255, 107, 0, 0.2), rgba(220, 38, 38, 0.2));
  border: 1.5px solid #ff6b00;
  color: #fff;
  border-radius: 12px;
  padding: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.2s ease;
}
.btn-hbs-attack.free:hover {
  background: linear-gradient(135deg, rgba(255, 107, 0, 0.35), rgba(220, 38, 38, 0.35));
  box-shadow: 0 0 16px rgba(255, 107, 0, 0.5);
  transform: translateY(-2px);
}
.btn-hbs-attack.free:active {
  transform: scale(0.96);
}
.btn-hbs-text {
  display: flex;
  flex-direction: column;
  text-align: left;
}
.btn-hbs-main {
  font-size: 14px;
  font-weight: 900;
  color: #fff;
}
.btn-hbs-sub {
  font-size: 10px;
  color: #f59e0b;
  font-weight: 700;
}
.hbs-charged-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hbs-chips-row {
  display: flex;
  gap: 6px;
}
.halloween-coin-chip {
  flex: 1;
  text-align: center;
  padding: 6px 0;
  font-size: 11px;
  font-weight: 800;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid var(--border-glass);
  border-radius: 6px;
  color: #cbd5e1;
  cursor: pointer;
  transition: all 0.2s ease;
}
.halloween-coin-chip.active, .halloween-coin-chip:hover {
  background: rgba(255, 107, 0, 0.25);
  border-color: #ff6b00;
  color: #fff;
}
.hbs-charged-input-row {
  display: flex;
  gap: 8px;
}
.hbs-input-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid var(--border-glass);
  border-radius: 8px;
  padding: 0 10px;
}
.hbs-input-wrap input {
  width: 100%;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  outline: none;
  padding: 8px 0;
}
.btn-hbs-attack.charged {
  background: linear-gradient(135deg, #ff6b00, #dc2626);
  border: none;
  color: #fff;
  border-radius: 8px;
  padding: 0 16px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}
.btn-hbs-attack.charged:hover {
  box-shadow: 0 0 16px rgba(255, 107, 0, 0.6);
  transform: translateY(-2px);
}
.btn-hbs-attack.charged:active {
  transform: scale(0.96);
}
.hbs-hint {
  font-size: 10px;
  color: #94a3b8;
  font-weight: 600;
}

/* Personal Contribution Card */
.halloween-user-card {
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid var(--border-glass);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.huc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.huc-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.huc-title {
  font-size: 14px;
  font-weight: 800;
  color: #f8fafc;
}
.huc-status-tag {
  background: rgba(255, 107, 0, 0.15);
  border: 1px solid rgba(255, 107, 0, 0.4);
  color: #ff6b00;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 10px;
}
.huc-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
}
.huc-stat-item {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--border-glass);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.huc-stat-item.highlight {
  border-color: rgba(245, 158, 11, 0.5);
  background: rgba(245, 158, 11, 0.08);
}
.huc-stat-lbl {
  font-size: 10px;
  color: #94a3b8;
  font-weight: 700;
  margin-bottom: 4px;
}
.huc-stat-val {
  font-size: 16px;
  font-weight: 900;
  color: #fff;
}
.huc-stat-sub {
  font-size: 9px;
  color: #64748b;
  margin-top: 2px;
}

/* Rewards Preview */
.huc-rewards-preview {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  padding: 12px;
}
.hrp-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 800;
  color: #f59e0b;
  margin-bottom: 10px;
}
.hrp-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px;
}
.hrp-card {
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid var(--border-glass);
  border-radius: 8px;
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.hrp-card.weapon {
  border-color: rgba(245, 158, 11, 0.4);
}
.hrp-card.profile {
  border-color: rgba(255, 107, 0, 0.5);
  background: linear-gradient(135deg, rgba(255, 107, 0, 0.1), rgba(220, 38, 38, 0.1));
}
.hrp-info {
  display: flex;
  flex-direction: column;
}
.hrp-main {
  font-size: 12px;
  font-weight: 800;
  color: #fff;
}
.hrp-sub {
  font-size: 10px;
  color: #94a3b8;
}

/* Claim Button */
.btn-halloween-claim {
  width: 100%;
  padding: 14px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  border: none;
  transition: all 0.25s ease;
}
.btn-halloween-claim.locked {
  background: rgba(30, 41, 59, 0.7);
  color: #64748b;
  cursor: not-allowed;
}
.btn-halloween-claim.ready {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.5);
}
.btn-halloween-claim.ready:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 30px rgba(16, 185, 129, 0.7);
}
.btn-halloween-claim.claimed {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid #10b981;
  color: #10b981;
  cursor: default;
}
.btn-halloween-claim.pulse {
  animation: claimPulse 1.8s infinite;
}
@keyframes claimPulse {
  0%, 100% { box-shadow: 0 0 15px rgba(16, 185, 129, 0.4); }
  50% { box-shadow: 0 0 30px rgba(16, 185, 129, 0.8); }
}

/* Boss Damage Leaderboard */
.halloween-leaderboard-card {
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid var(--border-glass);
  border-radius: 14px;
  padding: 16px;
}
.hlb-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.hlb-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.hlb-title {
  font-size: 14px;
  font-weight: 800;
  color: #f8fafc;
}
.hlb-subtitle {
  font-size: 11px;
  color: #94a3b8;
}
.halloween-lb-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.halloween-lb-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--border-glass);
  border-radius: 10px;
  padding: 10px 14px;
  transition: all 0.2s ease;
}
.halloween-lb-row:hover {
  border-color: rgba(255, 107, 0, 0.4);
}
.hlb-rank {
  font-size: 12px;
  font-weight: 900;
  color: #94a3b8;
  width: 26px;
  text-align: center;
}
.hlb-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #1e293b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  color: #f8fafc;
  border: 1.5px solid var(--border-glass);
}
.hlb-info {
  flex: 1;
  min-width: 0;
}
.hlb-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.hlb-name {
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hlb-sub {
  font-size: 10px;
  color: #64748b;
}
.hlb-dmg-val {
  font-size: 13px;
  font-weight: 900;
  color: #f59e0b;
}

/* Modal Victory Dialog */
.halloween-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.halloween-reward-dialog {
  background: linear-gradient(135deg, rgba(20, 26, 45, 0.98), rgba(15, 23, 42, 0.98));
  border: 2px solid #ff6b00;
  box-shadow: 0 0 50px rgba(255, 107, 0, 0.5);
  border-radius: 18px;
  padding: 24px;
  max-width: 440px;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: dialogPop 0.35s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
@keyframes dialogPop {
  0% { transform: scale(0.85); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.hrd-flame-icon {
  margin-bottom: 8px;
  animation: flameIconShake 2s infinite ease-in-out;
}
@keyframes flameIconShake {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15) rotate(3deg); }
}
.hrd-title {
  margin: 0 0 8px 0;
  font-size: 22px;
  font-weight: 900;
  color: #ff6b00;
  letter-spacing: 0.5px;
  text-shadow: 0 0 16px rgba(255, 107, 0, 0.6);
}
.hrd-desc {
  margin: 0 0 16px 0;
  font-size: 12px;
  color: #cbd5e1;
  line-height: 1.5;
}
.hrd-reward-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}
.hrd-item {
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid var(--border-glass);
  border-radius: 10px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
}
.hrd-item.weapon {
  border-color: rgba(245, 158, 11, 0.4);
}
.hrd-item.profile {
  border-color: #ff6b00;
  background: linear-gradient(135deg, rgba(255, 107, 0, 0.15), rgba(220, 38, 38, 0.15));
}
.hrd-item-info {
  display: flex;
  flex-direction: column;
}
.hrd-item-title {
  font-size: 13px;
  font-weight: 800;
  color: #fff;
}
.hrd-item-sub {
  font-size: 10px;
  color: #94a3b8;
}
.btn-hrd-close {
  width: 100%;
  background: linear-gradient(135deg, #ff6b00, #dc2626);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 12px;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: 0 0 20px rgba(255, 107, 0, 0.5);
}

/* ========================================================================== */
/* CUSTOM PROFILE THEME IN LEADERBOARD (ПОПРОШЕНО ПОЛЬЗОВАТЕЛЕМ)              */
/* ========================================================================== */
.halloween-profile-theme {
  border: 1.5px solid #ff6b00 !important;
  background: linear-gradient(135deg, rgba(255, 107, 0, 0.16), rgba(220, 38, 38, 0.16)) !important;
  box-shadow: 0 0 18px rgba(255, 107, 0, 0.4), inset 0 0 12px rgba(255, 107, 0, 0.15) !important;
  position: relative;
}

.halloween-profile-theme .lb-podium-avatar,
.halloween-profile-theme .lb-row-avatar,
.halloween-profile-theme .hlb-avatar {
  border-color: #ff6b00 !important;
  box-shadow: 0 0 14px rgba(255, 107, 0, 0.8) !important;
}

.lb-halloween-badge {
  background: linear-gradient(135deg, #ff6b00, #dc2626);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  padding: 2px 7px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  box-shadow: 0 0 10px rgba(255, 107, 0, 0.6);
  letter-spacing: 0.3px;
  margin-top: 2px;
}

.lb-user-card.halloween-profile-theme {
  border-color: #ff6b00 !important;
  box-shadow: 0 0 24px rgba(255, 107, 0, 0.5) !important;
}


/* ==========================================
   CYBER SHIELD: ANTI-TAMPER & ANTI-INSPECT
   ========================================== */
body, img, svg, canvas, .tab-pane, .game-card, .btn-primary, .coin-icon, .drop-item, .nav-tab {
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
}

input, textarea {
  -webkit-user-select: text !important;
  user-select: text !important;
}

#devtoolsSecurityOverlay {
  animation: devtoolsFadeIn 0.2s ease-out;
}

@keyframes devtoolsFadeIn {
  from { opacity: 0; transform: scale(0.98); }
  to { opacity: 1; transform: scale(1); }
}


/* =========================================================
   ALWAYS-VISIBLE SIDEBAR TOGGLE (HAMBURGER) IN TOP-LEFT CORNER
   ========================================================= */
.btn-hamburger,
#btnSidebarToggle {
  position: fixed !important;
  top: max(10px, env(safe-area-inset-top, 10px)) !important;
  left: max(10px, env(safe-area-inset-left, 10px)) !important;
  z-index: 10005 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 4.5px !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 10px !important;
  background: rgba(15, 23, 42, 0.88) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  cursor: pointer !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.55), 0 0 10px rgba(99, 102, 241, 0.25) !important;
  margin: 0 !important;
  padding: 0 !important;
  user-select: none !important;
  touch-action: manipulation !important;
}

.btn-hamburger:hover,
#btnSidebarToggle:hover {
  background: rgba(99, 102, 241, 0.35) !important;
  border-color: rgba(165, 180, 252, 0.6) !important;
  box-shadow: 0 4px 22px rgba(99, 102, 241, 0.45) !important;
  transform: scale(1.05);
}

.btn-hamburger:active,
#btnSidebarToggle:active {
  transform: scale(0.92);
}

.btn-hamburger.open,
.btn-hamburger.collapsed,
#btnSidebarToggle.open,
#btnSidebarToggle.collapsed {
  background: rgba(99, 102, 241, 0.3) !important;
  border-color: #818cf8 !important;
}

.btn-hamburger.open .hamburger-bar:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.btn-hamburger.open .hamburger-bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.btn-hamburger.open .hamburger-bar:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

.hamburger-bar {
  display: block;
  width: 19px;
  height: 2px;
  background: #e2e8f0;
  border-radius: 2px;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center;
}

/* Header layout: reserve left padding so top elements never hide under fixed hamburger */
.header-top {
  padding-left: 50px !important;
}

@media (max-width: 600px) {
  .header-top {
    padding-left: 48px !important;
  }
}

/* ==========================================================================
   PERFECT HALLOWEEN WORLD BOSS RAID SIDEBAR PILL (PIXEL-PERFECT VERTICAL ALIGNMENT)
   ========================================================================== */
.sidebar-halloween-pill,
#sidebarHalloweenRaidBanner {
  width: calc(100% - 16px) !important;
  margin: 6px 8px 12px 8px !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  background: linear-gradient(135deg, rgba(255, 107, 0, 0.2), rgba(220, 38, 38, 0.22)) !important;
  border: 1.5px solid #ff6b00 !important;
  border-radius: 21px !important;
  padding: 0 14px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
  box-shadow: 0 0 16px rgba(255, 107, 0, 0.28) !important;
  transition: all 0.2s ease !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  outline: none !important;
  overflow: visible !important;
  position: relative !important;
}

.sidebar-halloween-pill:hover,
#sidebarHalloweenRaidBanner:hover {
  transform: translateY(-1px) !important;
  border-color: #ff8533 !important;
  background: linear-gradient(135deg, rgba(255, 107, 0, 0.3), rgba(220, 38, 38, 0.32)) !important;
  box-shadow: 0 0 22px rgba(255, 107, 0, 0.5) !important;
}

.shb-pill-left {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 1 !important;
  min-width: 0 !important;
  height: 100% !important;
}

.shb-pill-right {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
  height: 100% !important;
}

.shb-pill-icon {
  font-size: 19px !important;
  color: #ff6b00 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
}

.shb-pill-title {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  color: #ff8533 !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
  line-height: 42px !important;
  height: 42px !important;
  display: flex !important;
  align-items: center !important;
  flex: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.shb-pill-badge {
  font-size: 9px !important;
  font-weight: 900 !important;
  color: #000 !important;
  background: #ff6b00 !important;
  padding: 2px 6px !important;
  border-radius: 6px !important;
  letter-spacing: 0.5px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.shb-pill-dot,
.shb-live-dot {
  width: 8px !important;
  height: 8px !important;
  background: #ff6b00 !important;
  border-radius: 50% !important;
  box-shadow: 0 0 8px #ff6b00, 0 0 12px rgba(255, 107, 0, 0.9) !important;
  animation: liveDotPulse 1.5s infinite ease-in-out !important;
  flex-shrink: 0 !important;
}