/* ==========================================================================
   PORTAL LIQUID GLASS DESIGN SYSTEM (VisionOS & Portal Market Fidelity)
   ========================================================================== */

:root {
  --portal-bg: #07070a;
  --portal-text: #ffffff;
  --portal-text-secondary: rgba(255, 255, 255, 0.68);
  --portal-text-muted: rgba(255, 255, 255, 0.42);

  --portal-purple: #af51de;
  --portal-purple-glow: rgba(175, 81, 222, 0.35);
  --portal-cyan: #00f2fe;
  --portal-cyan-glow: rgba(0, 242, 254, 0.3);
  --portal-emerald: #00f5a0;
  --portal-gold: #ffb300;
  --portal-rose: #ff2d55;
  --portal-accent: #af51de;
  --portal-accent-gradient: linear-gradient(135deg, #af51de 0%, #00f2fe 100%);

  --bg-glass-base: rgba(16, 16, 24, 0.58);
  --bg-glass-card: rgba(22, 22, 32, 0.52);
  --bg-glass-pill: rgba(255, 255, 255, 0.05);
  --bg-glass-elevated: rgba(30, 30, 44, 0.68);
  --bg-glass-input: rgba(10, 10, 16, 0.65);

  --glass-blur: blur(24px) saturate(160%);
  --glass-blur-sm: blur(12px) saturate(140%);

  --glass-shadow: 
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 1.8px 3px 0px -2px rgba(255, 255, 255, 0.35),
    inset -2px -2px 0px -2px rgba(255, 255, 255, 0.22),
    inset -3px -8px 1px -6px rgba(255, 255, 255, 0.15),
    0px 4px 20px 0px rgba(0, 0, 0, 0.35),
    0px 12px 36px 0px rgba(0, 0, 0, 0.45);

  --glass-shadow-interactive:
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    inset 2px 3.5px 0px -2px rgba(255, 255, 255, 0.45),
    inset -2px -2px 0px -2px rgba(255, 255, 255, 0.28),
    0px 8px 28px 0px rgba(0, 0, 0, 0.45),
    0px 0px 24px 0px var(--portal-purple-glow);

  --glass-pill-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 1.2px 2px 0px -1px rgba(255, 255, 255, 0.32),
    inset -1.2px -1.5px 0px -1px rgba(255, 255, 255, 0.18),
    0px 2px 8px rgba(0, 0, 0, 0.25);

  --spring-transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Glass Panels & Containers */
.glass, .glass-panel, .card, .panel, .modal-content, .sidebar, .topbar, .box, .section-card {
  background-color: var(--bg-glass-card) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  box-shadow: var(--glass-shadow) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 20px !important;
  transition: var(--spring-transition);
}

.glass-pill, .pill-btn, .tab-btn, .filter-pill, .nav-item, .nav-btn, .tab {
  border-radius: 99em !important;
  background-color: var(--bg-glass-pill) !important;
  backdrop-filter: var(--glass-blur-sm) !important;
  -webkit-backdrop-filter: var(--glass-blur-sm) !important;
  box-shadow: var(--glass-pill-shadow) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: var(--portal-text-secondary) !important;
  transition: var(--spring-transition) !important;
}

.glass-pill:hover, .pill-btn:hover, .tab-btn:hover, .nav-item:hover, .nav-btn:hover, .tab:hover {
  background-color: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  box-shadow: var(--glass-shadow-interactive) !important;
}

.glass-pill.active, .pill-btn.active, .tab-btn.active, .nav-item.active, .nav-btn.active, .tab.active {
  background: linear-gradient(135deg, rgba(175, 81, 222, 0.35) 0%, rgba(0, 242, 254, 0.25) 100%) !important;
  color: #ffffff !important;
  border-color: rgba(175, 81, 222, 0.5) !important;
  box-shadow: 
    inset 0 0 0 1px rgba(255, 255, 255, 0.2),
    inset 1.5px 2.5px 0 -1px rgba(255, 255, 255, 0.5),
    0 0 20px rgba(175, 81, 222, 0.4) !important;
}

/* ===== Protected Game Elements (Rectangular Multiplier Cards & Unified Bet Inputs) ===== */
.tier-bet-card {
  height: 86px !important;
  border-radius: 14px !important;
  padding: 12px 16px !important;
  overflow: hidden !important;
  position: relative !important;
  border: 1.5px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(255, 255, 255, 0.03) !important;
}

.tier-card-bg-art {
  border-radius: 14px !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

.tier-card-badge {
  font-size: 24px !important;
  font-weight: 900 !important;
}

.bet-input-box, .input-pill-box {
  background: rgba(14, 16, 24, 0.85) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 14px !important;
  height: 52px !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 16px !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4) !important;
}

.bet-input-box:focus-within, .input-pill-box:focus-within {
  border-color: #3b82f6 !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3), 0 0 0 3px rgba(59, 130, 246, 0.25) !important;
}

.bet-input-box input,
.bet-input-box input[type="text"],
.bet-input-box input[type="number"],
.input-pill-box input,
.input-pill-box input[type="text"],
.input-pill-box input[type="number"] {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
  margin: 0 !important;
  height: 100% !important;
  width: 100% !important;
  outline: none !important;
  font-family: var(--mono, monospace) !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
}

.bet-currency-tag, .input-currency-tag {
  font-size: 14px !important;
  font-weight: 800 !important;
  font-family: var(--mono, monospace) !important;
  color: #f59e0b !important;
  flex-shrink: 0 !important;
  padding-left: 8px !important;
}