/* ═══════════════════════════════════════════════════
   THE CHAIN RAFFLES — CYBERPUNK EDITION
   Neon. Dark. Sharp. No compromises.
═══════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Share+Tech+Mono&display=swap');

:root {
  --bg:           #02020a;
  --surface:      #05050f;
  --card:         #080818;
  --card-hover:   #0d0d24;
  --card-hi:      #121230;
  --border:       rgba(0,220,255,0.1);
  --border-hi:    rgba(0,220,255,0.25);
  --border-pink:  rgba(255,0,102,0.2);

  --neon:         #00dcff;
  --neon-dim:     #008fa8;
  --neon-glow:    rgba(0,220,255,0.18);
  --neon-sub:     rgba(0,220,255,0.07);
  --neon-sub2:    rgba(0,220,255,0.12);

  --pink:         #ff0066;
  --pink-dim:     #cc0055;
  --pink-glow:    rgba(255,0,102,0.2);
  --pink-sub:     rgba(255,0,102,0.07);

  --purple:       #9945ff;
  --purple-sub:   rgba(153,69,255,0.1);

  --gold:         #00dcff;
  --gold-dim:     #008fa8;
  --gold-glow:    rgba(0,220,255,0.18);
  --gold-sub:     rgba(0,220,255,0.07);
  --gold-sub2:    rgba(0,220,255,0.12);

  --text:         #d0e8ff;
  --muted:        #3a4a6a;
  --muted2:       #1e2a40;
  --success:      #00ff88;
  --danger:       #ff0066;
  --info:         #00dcff;
  --discord:      #5865f2;

  --r-sm:         4px;
  --r:            6px;
  --r-lg:         8px;
  --r-xl:         10px;

  --mono:         'Share Tech Mono', 'Courier New', monospace;
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

/* ── BODY + GRID BACKGROUND ── */
body {
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  background-image:
    linear-gradient(rgba(0,220,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,220,255,0.03) 1px, transparent 1px) !important;
  background-size: 40px 40px !important;
}

/* ── HIDE OLD DECORATIVE ELEMENTS ── */
.bg-orb,.grid-overlay,.particles,.eyebrow-row,.hero-subtitle,
.hero-main,.hero-side,.topbar,.topbar-status,.hero-mini-grid,
.status-card,.brand-copy,.raffle-art-fallback { display: none !important; }

.app-shell { max-width: 100% !important; margin: 0 !important; padding: 0 !important; }

/* ════════════════════════════════════
   STICKY HEADER
════════════════════════════════════ */
.hero-panel, .premium-hero {
  display: block !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 200 !important;
  background: rgba(2,2,10,0.96) !important;
  border-bottom: 1px solid var(--border-hi) !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: 0 1px 0 var(--border-hi), 0 4px 30px rgba(0,220,255,0.05) !important;
  backdrop-filter: blur(16px) !important;
}
.hero-panel::before, .premium-card::before, .panel::before { display: none !important; }

/* scanline effect on header */
.hero-panel::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,220,255,0.015) 2px,
    rgba(0,220,255,0.015) 4px
  ) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* Row 1 */
.topbar-row1 {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 1.5rem !important;
  height: 52px !important;
  border-bottom: 1px solid var(--border) !important;
  width: 100% !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Row 2 */
.topbar-row2 {
  display: flex !important;
  align-items: center !important;
  padding: 0 1.5rem !important;
  height: 40px !important;
  width: 100% !important;
  gap: 2px !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Brand */
.brand-lockup { display: flex !important; align-items: center !important; gap: 0.55rem !important; flex-shrink: 0 !important; }
.brand-mark   { width: 26px !important; height: 26px !important; object-fit: contain !important; filter: drop-shadow(0 0 6px var(--neon)) !important; }
.brand-name   {
  font-size: 0.86rem !important;
  font-weight: 700 !important;
  color: var(--neon) !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  text-shadow: 0 0 12px rgba(0,220,255,0.6) !important;
  font-family: var(--mono) !important;
}

.topbar-right { display: flex !important; align-items: center !important; gap: 0.5rem !important; flex-shrink: 0 !important; }

/* Nav pills */
nav.hero-actions { display: flex !important; align-items: center !important; gap: 2px !important; flex-wrap: nowrap !important; }

.nav-pill {
  padding: 0.22rem 0.85rem !important;
  border-radius: 0 !important;
  font-size: 0.76rem !important;
  font-weight: 500 !important;
  color: var(--muted) !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  font-size: 0.72rem !important;
}
.nav-pill:hover  { color: var(--neon) !important; border-bottom-color: rgba(0,220,255,0.3) !important; }
.nav-pill.active {
  color: var(--neon) !important;
  border-bottom-color: var(--neon) !important;
  font-weight: 600 !important;
  text-shadow: 0 0 8px rgba(0,220,255,0.5) !important;
}

/* Discord btn */
.discord-topbar-btn {
  padding: 0.28rem 0.75rem !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  border-radius: var(--r-sm) !important;
  background: rgba(88,101,242,0.1) !important;
  border: 1px solid rgba(88,101,242,0.3) !important;
  color: #8ea1ff !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  letter-spacing: 0.04em !important;
  transition: all 0.15s !important;
}
.discord-topbar-btn:hover { background: rgba(88,101,242,0.2) !important; box-shadow: 0 0 12px rgba(88,101,242,0.3) !important; }

/* Logout */
#logoutBtn, #logoutBtn.ghost-btn {
  padding: 0.28rem 0.75rem !important;
  font-size: 0.72rem !important;
  background: transparent !important;
  border: 1px solid var(--border-hi) !important;
  color: var(--muted) !important;
  border-radius: var(--r-sm) !important;
  cursor: pointer !important;
  letter-spacing: 0.04em !important;
  transition: all 0.15s !important;
}
#logoutBtn:hover { color: var(--pink) !important; border-color: var(--border-pink) !important; box-shadow: 0 0 10px var(--pink-glow) !important; }

/* Status LED */
.status-led { width: 6px !important; height: 6px !important; border-radius: 50% !important; display: inline-block !important; background: var(--muted2) !important; flex-shrink: 0 !important; }
.status-led.good { background: var(--success) !important; box-shadow: 0 0 8px rgba(0,255,136,0.7) !important; }
.status-led.bad  { background: var(--danger) !important;  box-shadow: 0 0 8px rgba(255,0,102,0.7) !important; }

/* Notification badge */
#notifBadge {
  background: var(--pink) !important;
  color: #fff !important;
  font-size: 0.6rem !important;
  font-weight: 700 !important;
  border-radius: 3px !important;
  padding: 0 5px !important;
  min-width: 16px !important;
  text-align: center !important;
  line-height: 16px !important;
  height: 16px !important;
  display: inline-block !important;
  box-shadow: 0 0 8px var(--pink-glow) !important;
}

/* ════════════════════════════════════
   TORN HUD BAR
════════════════════════════════════ */
.persistent-hud-shell {
  position: sticky !important;
  top: 92px !important;
  z-index: 150 !important;
  background: rgba(2,2,10,0.97) !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0.5rem 1.5rem !important;
  backdrop-filter: blur(16px) !important;
}
.persistent-hud-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 0.4rem !important;
}
.persistent-hud-head h2 {
  font-size: 0.62rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.16em !important;
  color: var(--neon-dim) !important;
  margin: 0 !important;
  font-family: var(--mono) !important;
}
.section-kicker {
  font-size: 0.58rem !important;
  color: var(--pink) !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  display: block !important;
  margin-bottom: 0.2rem !important;
  font-family: var(--mono) !important;
}

#tornMonitorBody {
  display: flex !important;
  gap: 0.4rem !important;
  overflow-x: auto !important;
  flex-wrap: nowrap !important;
  padding-bottom: 2px !important;
  scrollbar-width: thin !important;
  scrollbar-color: var(--muted2) transparent !important;
}
#tornMonitorBody::-webkit-scrollbar { height: 2px !important; }
#tornMonitorBody::-webkit-scrollbar-thumb { background: var(--neon-dim) !important; }

.hud-bar-card, .top-hud-card {
  flex-shrink: 0 !important;
  min-width: 140px !important;
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-top: 1px solid var(--neon-dim) !important;
  border-radius: var(--r-sm) !important;
  padding: 0.3rem 0.65rem !important;
  transition: border-color 0.15s !important;
}
.hud-bar-card:hover { border-color: var(--border-hi) !important; box-shadow: 0 0 12px var(--neon-glow) !important; }

/* ════════════════════════════════════
   MAIN LAYOUT
════════════════════════════════════ */
.main-content { padding: 1.5rem !important; position: relative !important; z-index: 1 !important; }
.tab-view { animation: fadeUp 0.18s ease !important; position: relative !important; z-index: 1 !important; }
@keyframes fadeUp { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }

/* ════════════════════════════════════
   RIGHT ACTIVITY RAIL
════════════════════════════════════ */
.activity-shell, .activity-rail {
  background: rgba(2,2,10,0.97) !important;
  border-left: 1px solid var(--border) !important;
  border-radius: 0 !important;
  padding: 1rem !important;
  width: 260px !important;
  min-width: 260px !important;
  position: sticky !important;
  top: 92px !important;
  height: calc(100vh - 92px) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  z-index: 1 !important;
}
.activity-head { flex-shrink: 0 !important; padding-bottom: 0.6rem !important; border-bottom: 1px solid var(--border) !important; margin-bottom: 0.6rem !important; }
.activity-head h2 {
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  color: var(--neon) !important;
  margin-top: 0.15rem !important;
  font-family: var(--mono) !important;
  letter-spacing: 0.06em !important;
  text-shadow: 0 0 10px rgba(0,220,255,0.4) !important;
}

.activity-chat-wrap {
  flex: 1 !important;
  overflow-y: auto !important;
  min-height: 0 !important;
  scrollbar-width: thin !important;
  scrollbar-color: var(--muted2) transparent !important;
}
.activity-chat-wrap::-webkit-scrollbar { width: 2px !important; }
.activity-chat-wrap::-webkit-scrollbar-thumb { background: var(--neon-dim) !important; }

/* Discord join card */
.discord-join-card {
  display: flex !important;
  align-items: center !important;
  gap: 0.6rem !important;
  background: rgba(88,101,242,0.06) !important;
  border: 1px solid rgba(88,101,242,0.2) !important;
  border-radius: var(--r) !important;
  padding: 0.55rem 0.7rem !important;
  margin-bottom: 0.5rem !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
}
.discord-join-card:hover { border-color: rgba(88,101,242,0.5) !important; box-shadow: 0 0 16px rgba(88,101,242,0.2) !important; }
.discord-join-card img   { width: 26px !important; height: 26px !important; border-radius: 5px !important; }
.discord-join-card strong { display: block !important; font-size: 0.76rem !important; font-weight: 700 !important; color: var(--text) !important; }
.discord-join-card small  { font-size: 0.66rem !important; color: var(--muted) !important; }

/* Activity pills */
.activity-pill {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-left: 2px solid var(--neon-dim) !important;
  border-radius: var(--r-sm) !important;
  padding: 0.45rem 0.6rem !important;
  margin-bottom: 0.35rem !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 0.5rem !important;
  transition: all 0.15s ease !important;
}
.activity-pill:hover { border-left-color: var(--neon) !important; background: var(--card-hover) !important; box-shadow: 0 0 10px var(--neon-glow) !important; }
.activity-pill strong { display: block !important; font-size: 0.73rem !important; font-weight: 600 !important; color: var(--text) !important; line-height: 1.3 !important; }
.activity-pill small  { font-size: 0.65rem !important; color: var(--muted) !important; display: block !important; margin-top: 2px !important; font-family: var(--mono) !important; }

/* ── EXCHANGE RATES CAROUSEL ── */
#itemRatesCarousel {
  flex-shrink: 0 !important;
  border-top: 1px solid var(--border) !important;
  padding-top: 0.6rem !important;
  margin-top: 0.5rem !important;
  overflow: hidden !important;
}
.rates-label {
  font-size: 0.58rem !important;
  color: var(--pink) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.16em !important;
  font-weight: 700 !important;
  margin-bottom: 0.45rem !important;
  display: block !important;
  font-family: var(--mono) !important;
}
#carouselTrack { display: flex !important; flex-direction: column !important; overflow: hidden !important; gap: 3px !important; }

/* ════════════════════════════════════
   PANELS / CARDS
════════════════════════════════════ */
.panel, .premium-card, .panel-tall {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  position: relative !important;
}

/* neon corner accent on panels */
.panel::before {
  display: block !important;
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  width: 40px !important; height: 2px !important;
  background: var(--neon) !important;
  box-shadow: 0 0 10px var(--neon) !important;
  border-radius: 0 !important;
}

.section-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 1.1rem !important;
}

/* ── WALLET PANEL ── */
.wallet-panel { padding: 1.25rem !important; }
.wallet-grid {
  display: grid !important;
  grid-template-columns: repeat(3,1fr) !important;
  gap: 0.55rem !important;
  margin-bottom: 0.9rem !important;
}
.wallet-tile {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r) !important;
  padding: 0.8rem 0.75rem !important;
  text-align: center !important;
  transition: all 0.15s !important;
  position: relative !important;
  overflow: hidden !important;
}
.wallet-tile::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important; left: 0 !important; right: 0 !important;
  height: 1px !important;
  background: var(--neon) !important;
  opacity: 0 !important;
  transition: opacity 0.15s !important;
}
.wallet-tile:hover::after { opacity: 1 !important; }
.wallet-tile:hover { border-color: var(--border-hi) !important; box-shadow: 0 0 16px var(--neon-glow) !important; }
.wallet-tile.gold   { border-top: 2px solid var(--neon) !important; }
.wallet-tile.silver { border-top: 2px solid var(--purple) !important; }
.wallet-tile.copper { border-top: 2px solid var(--pink) !important; }
.wallet-label {
  display: block !important;
  font-size: 0.6rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  color: var(--muted) !important;
  margin-bottom: 0.3rem !important;
  font-family: var(--mono) !important;
}
.wallet-tile strong {
  display: block !important;
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  color: var(--neon) !important;
  font-family: var(--mono) !important;
  font-variant-numeric: tabular-nums !important;
  text-shadow: 0 0 16px rgba(0,220,255,0.5) !important;
  letter-spacing: -0.02em !important;
}
.wallet-tile.silver strong { color: var(--purple) !important; text-shadow: 0 0 16px rgba(153,69,255,0.5) !important; }
.wallet-tile.copper strong { color: var(--pink) !important;   text-shadow: 0 0 16px rgba(255,0,102,0.5) !important; }

/* Funding box */
.funding-box {
  display: flex !important;
  align-items: flex-start !important;
  gap: 0.75rem !important;
  background: var(--neon-sub) !important;
  border: 1px solid var(--border-hi) !important;
  border-radius: var(--r) !important;
  padding: 0.8rem 1rem !important;
  margin-top: 0.8rem !important;
}
.funding-icon {
  width: 30px !important; height: 30px !important;
  background: var(--neon) !important;
  border-radius: var(--r-sm) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-size: 0.85rem !important;
  color: #000 !important;
  flex-shrink: 0 !important;
  box-shadow: 0 0 12px var(--neon-glow) !important;
}
.funding-box strong { font-size: 0.78rem !important; color: var(--neon) !important; display: block !important; margin-bottom: 0.2rem !important; font-family: var(--mono) !important; }
.funding-box p, .funding-box span { font-size: 0.74rem !important; color: var(--muted) !important; }
.funding-box b { color: var(--text) !important; }

/* ════════════════════════════════════
   RAFFLE CARDS
════════════════════════════════════ */
.raffle-card {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  transition: all 0.18s ease !important;
  position: relative !important;
  overflow: hidden !important;
}
.raffle-card::before {
  display: block !important;
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  width: 0 !important; height: 2px !important;
  background: linear-gradient(90deg, var(--neon), var(--pink)) !important;
  transition: width 0.3s ease !important;
  z-index: 2 !important;
}
.raffle-card:hover::before { width: 100% !important; }
.raffle-card:hover {
  border-color: var(--border-hi) !important;
  background: var(--card-hover) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 40px rgba(0,220,255,0.1), 0 0 0 1px rgba(0,220,255,0.08) !important;
}
.raffle-joined   { border-color: rgba(0,220,255,0.3) !important; box-shadow: 0 0 20px rgba(0,220,255,0.08) !important; }
.raffle-at-limit { opacity: 0.55 !important; }
.raffle-at-limit .ghost-btn { cursor: not-allowed !important; opacity: 0.4 !important; }

.joined-ribbon {
  position: absolute !important;
  top: 8px !important; right: 8px !important;
  background: var(--neon) !important;
  color: #000 !important;
  font-size: 0.58rem !important;
  font-weight: 800 !important;
  padding: 0.15rem 0.5rem !important;
  border-radius: 2px !important;
  z-index: 5 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  font-family: var(--mono) !important;
  box-shadow: 0 0 10px var(--neon-glow) !important;
}
.my-slots-badge { font-size: 0.72rem !important; color: var(--neon) !important; font-weight: 600 !important; margin-bottom: 0.3rem !important; display: block !important; font-family: var(--mono) !important; }
.limit-badge    { font-size: 0.68rem !important; color: var(--pink) !important; font-weight: 600 !important; margin-bottom: 0.3rem !important; display: block !important; font-family: var(--mono) !important; }

/* ════════════════════════════════════
   BUTTONS
════════════════════════════════════ */
.cta-btn, .primary-btn, .premium-btn {
  background: transparent !important;
  color: var(--neon) !important;
  border: 1px solid var(--neon) !important;
  border-radius: var(--r-sm) !important;
  font-weight: 700 !important;
  font-size: 0.82rem !important;
  padding: 0.55rem 1.2rem !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  font-family: var(--mono) !important;
  position: relative !important;
  overflow: hidden !important;
}
.cta-btn::before, .primary-btn::before, .premium-btn::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: var(--neon) !important;
  opacity: 0 !important;
  transition: opacity 0.18s !important;
}
.cta-btn:hover, .primary-btn:hover, .premium-btn:hover {
  color: #000 !important;
  box-shadow: 0 0 24px var(--neon-glow), inset 0 0 0 1px var(--neon) !important;
}
.cta-btn:hover::before, .primary-btn:hover::before, .premium-btn:hover::before { opacity: 1 !important; }
.cta-btn span, .primary-btn span, .premium-btn span { position: relative !important; z-index: 1 !important; }

/* make button text render above the pseudo overlay */
.cta-btn, .primary-btn, .premium-btn { isolation: isolate !important; }

.ghost-btn {
  background: transparent !important;
  border: 1px solid var(--border-hi) !important;
  color: var(--muted) !important;
  border-radius: var(--r-sm) !important;
  padding: 0.45rem 1rem !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  font-size: 0.76rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  font-family: var(--mono) !important;
}
.ghost-btn:hover { border-color: var(--neon-dim) !important; color: var(--neon) !important; box-shadow: 0 0 12px var(--neon-glow) !important; }
.ghost-btn.compact-btn { padding: 0.25rem 0.65rem !important; font-size: 0.7rem !important; }

/* ════════════════════════════════════
   SLOT MAP
════════════════════════════════════ */
.slot {
  border-radius: var(--r-sm) !important;
  border: 1px solid var(--border) !important;
  background: var(--surface) !important;
  color: var(--muted) !important;
  transition: all 0.12s ease !important;
  font-size: 0.73rem !important;
  font-weight: 600 !important;
  text-align: center !important;
  padding: 0.35rem !important;
  cursor: pointer !important;
  font-family: var(--mono) !important;
}
.slot.open:hover, .slot.selectable:hover { border-color: var(--neon) !important; color: var(--neon) !important; background: var(--neon-sub) !important; box-shadow: 0 0 8px var(--neon-glow) !important; }
.slot.selected { background: var(--neon) !important; color: #000 !important; border-color: var(--neon) !important; font-weight: 800 !important; box-shadow: 0 0 12px var(--neon-glow) !important; }
.slot.taken    { opacity: 0.2 !important; cursor: not-allowed !important; }

/* ════════════════════════════════════
   FORMS
════════════════════════════════════ */
input, select, textarea {
  background: var(--surface) !important;
  border: 1px solid var(--border-hi) !important;
  border-radius: var(--r-sm) !important;
  color: var(--text) !important;
  padding: 0.5rem 0.75rem !important;
  font-size: 0.84rem !important;
  width: 100% !important;
  transition: all 0.15s !important;
  font-family: 'Inter', sans-serif !important;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--neon) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px var(--neon-glow), 0 0 20px var(--neon-glow) !important;
}
input::placeholder { color: var(--muted) !important; }
label {
  display: block !important;
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  color: var(--neon-dim) !important;
  margin-bottom: 0.35rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  font-family: var(--mono) !important;
}

/* ════════════════════════════════════
   IDENTITY CARD
════════════════════════════════════ */
.identity-card {
  background: var(--surface) !important;
  border-radius: var(--r) !important;
  padding: 1rem !important;
  border: 1px solid var(--border) !important;
  border-left: 2px solid var(--neon) !important;
}
.identity-top { display: flex !important; gap: 0.4rem !important; margin-bottom: 0.7rem !important; }
.tiny-chip {
  font-size: 0.6rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  padding: 0.15rem 0.5rem !important;
  border-radius: 2px !important;
  font-family: var(--mono) !important;
}
.verified-chip { background: rgba(0,255,136,0.1) !important; color: var(--success) !important; border: 1px solid rgba(0,255,136,0.3) !important; box-shadow: 0 0 8px rgba(0,255,136,0.2) !important; }
.subtle-chip   { background: rgba(255,255,255,0.04) !important; color: var(--muted) !important; border: 1px solid var(--border) !important; }

/* ════════════════════════════════════
   TOAST
════════════════════════════════════ */
.toast {
  background: var(--card-hi) !important;
  border: 1px solid var(--border-hi) !important;
  border-left: 3px solid var(--neon) !important;
  border-radius: var(--r) !important;
  box-shadow: 0 8px 40px rgba(0,0,0,0.6), 0 0 20px var(--neon-glow) !important;
  color: var(--text) !important;
  font-size: 0.82rem !important;
  padding: 0.7rem 1rem !important;
}

/* ════════════════════════════════════
   MISC UTILITY
════════════════════════════════════ */
.muted  { color: var(--muted) !important; }
.pill {
  background: rgba(0,220,255,0.06) !important;
  border: 1px solid var(--border) !important;
  border-radius: 3px !important;
  color: var(--neon-dim) !important;
  font-size: 0.7rem !important;
  padding: 0.12rem 0.55rem !important;
  font-family: var(--mono) !important;
  letter-spacing: 0.04em !important;
}

.credits-banner {
  background: var(--neon-sub) !important;
  border-bottom: 1px solid var(--border-hi) !important;
  padding: 0.35rem 1.5rem !important;
  font-size: 0.73rem !important;
  color: var(--muted) !important;
}
.credits-banner strong { color: var(--neon) !important; font-family: var(--mono) !important; }

/* Status pills */
.info-pill    { background: rgba(0,220,255,0.08) !important;  color: var(--neon) !important;    border: 1px solid rgba(0,220,255,0.2) !important; border-radius: 3px !important; font-family: var(--mono) !important; }
.success-pill { background: rgba(0,255,136,0.08) !important;  color: var(--success) !important; border: 1px solid rgba(0,255,136,0.2) !important; border-radius: 3px !important; }
.danger-pill  { background: rgba(255,0,102,0.08) !important;  color: var(--pink) !important;    border: 1px solid rgba(255,0,102,0.2) !important; border-radius: 3px !important; }

/* Wager buttons */
.wager-btn {
  background: var(--surface) !important;
  border: 1px solid var(--border-hi) !important;
  border-radius: var(--r-sm) !important;
  color: var(--text) !important;
  padding: 0.4rem 0.8rem !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.12s !important;
  font-family: var(--mono) !important;
}
.wager-btn:hover    { border-color: var(--neon) !important; color: var(--neon) !important; box-shadow: 0 0 10px var(--neon-glow) !important; }
.wager-btn.selected { background: var(--neon-sub) !important; border-color: var(--neon) !important; color: var(--neon) !important; box-shadow: 0 0 12px var(--neon-glow) !important; }

/* Magic 8 ball */
#magic8Ball, .magic-orb {
  width: 90px !important; height: 90px !important;
  background: radial-gradient(circle at 35% 35%, #0d1a2e, #020208) !important;
  border-radius: 50% !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-size: 2rem !important; font-weight: 900 !important;
  color: var(--neon) !important;
  border: 2px solid var(--neon-dim) !important;
  margin: 0 auto 1rem !important;
  box-shadow: 0 0 30px var(--neon-glow), 0 0 60px rgba(0,220,255,0.05), inset 0 0 20px rgba(0,220,255,0.05) !important;
  text-shadow: 0 0 16px var(--neon) !important;
}

/* headings */
h1, h2, h3 { color: var(--text) !important; }
h2 { letter-spacing: 0.02em !important; }

/* Loading/empty states */
.loading-state, .empty-state {
  text-align: center !important;
  padding: 2rem 1rem !important;
  color: var(--muted) !important;
  font-size: 0.8rem !important;
  font-family: var(--mono) !important;
}

/* Scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--muted2) transparent; }
::-webkit-scrollbar { width: 3px; height: 3px; }
::-webkit-scrollbar-thumb { background: var(--neon-dim); border-radius: 0; }

/* Progress bar */
.progress-track {
  background: var(--surface) !important;
  border-radius: 0 !important;
  height: 2px !important;
  overflow: hidden !important;
}
.progress-fill {
  background: linear-gradient(90deg, var(--neon), var(--pink)) !important;
  height: 100% !important;
  box-shadow: 0 0 8px var(--neon) !important;
  transition: width 0.4s ease !important;
}

/* ════════════════════════════════════
   MOBILE
════════════════════════════════════ */
@media (max-width: 768px) {
  .activity-shell, .activity-rail { display: none !important; }
  .main-content { padding: 1rem !important; }
  .topbar-row1, .topbar-row2 { padding: 0 1rem !important; }
  .wallet-tile strong { font-size: 1.2rem !important; }
  .nav-pill { padding: 0.2rem 0.55rem !important; }
}

/* ── TOPBAR WALLET ── */
.topbar-wallet {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  margin-left: auto !important;
  padding-left: 1rem !important;
  border-left: 1px solid var(--border) !important;
  font-family: var(--mono) !important;
  font-size: 0.78rem !important;
}
.topbar-wallet-item {
  display: flex !important;
  align-items: center !important;
  gap: 0.25rem !important;
}
.tw-label {
  font-size: 0.6rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  opacity: 0.5 !important;
}
.tw-val {
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: -0.01em !important;
}
.topbar-wallet-item.gold   .tw-val { color: var(--neon) !important;    text-shadow: 0 0 8px rgba(0,220,255,0.5) !important; }
.topbar-wallet-item.silver .tw-val { color: var(--purple) !important;  text-shadow: 0 0 8px rgba(153,69,255,0.5) !important; }
.topbar-wallet-item.copper .tw-val { color: var(--pink) !important;    text-shadow: 0 0 8px rgba(255,0,102,0.5) !important; }
.topbar-wallet-sep { color: var(--muted) !important; font-size: 0.7rem !important; }

/* ── TOPBAR ROW2 LAYOUT FIX ── */
.topbar-row2 { justify-content: space-between !important; }
nav.hero-actions { flex: 0 1 auto !important; overflow: hidden !important; }
.topbar-wallet {
  flex: 0 0 auto !important;
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  padding-left: 1rem !important;
  border-left: 1px solid rgba(0,220,255,0.15) !important;
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 0.78rem !important;
}

/* ════════════════════════════════════
   RAFFLE CARDS — FULL CYBERPUNK OVERRIDE
════════════════════════════════════ */

/* Grid layout */
.raffles-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 1rem !important;
}

/* Card base */
.raffle-card,
.raffle-card-with-art,
body .raffle-card,
body .raffle-card-with-art {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  position: relative !important;
  transition: all 0.18s ease !important;
  min-height: 0 !important;
  padding: 0 !important;
}

/* neon sweep on hover */
.raffle-card::before,
.raffle-card-with-art::before {
  display: block !important;
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  width: 0 !important; height: 2px !important;
  background: linear-gradient(90deg, var(--neon), var(--pink)) !important;
  transition: width 0.35s ease !important;
  z-index: 2 !important;
  box-shadow: 0 0 8px var(--neon) !important;
}
.raffle-card:hover::before,
.raffle-card-with-art:hover::before { width: 100% !important; }

.raffle-card:hover,
.raffle-card-with-art:hover {
  border-color: rgba(0,220,255,0.3) !important;
  background: var(--card-hover) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 32px rgba(0,220,255,0.08) !important;
}

.raffle-joined {
  border-color: rgba(0,220,255,0.35) !important;
  box-shadow: 0 0 20px rgba(0,220,255,0.06) !important;
}
.raffle-at-limit { opacity: 0.55 !important; }

/* Art area - compact, dark, clean */
.raffle-art-wrap,
.raffle-art-wrap.image-loaded,
.raffle-art-wrap.image-failed {
  width: 100% !important;
  height: 140px !important;
  background: var(--surface) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  border-bottom: 1px solid var(--border) !important;
  flex-shrink: 0 !important;
}
.raffle-art-wrap img {
  max-height: 110px !important;
  max-width: 80% !important;
  object-fit: contain !important;
  filter: drop-shadow(0 0 12px rgba(0,220,255,0.2)) !important;
}
.raffle-art-fallback { display: none !important; }

/* Card body */
.raffle-card-body {
  padding: 0.85rem 1rem 1rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.45rem !important;
  flex: 1 !important;
}

/* Title row */
.raffle-topline {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 0.5rem !important;
}
.raffle-topline h3 {
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  line-height: 1.25 !important;
  margin: 0 !important;
  flex: 1 !important;
}

/* LIVE chip */
.tiny-chip.subtle-chip {
  font-size: 0.58rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  padding: 0.15rem 0.45rem !important;
  border-radius: 2px !important;
  background: rgba(0,220,255,0.08) !important;
  border: 1px solid rgba(0,220,255,0.2) !important;
  color: var(--neon) !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  font-family: var(--mono) !important;
}

/* Almost full tag */
.hot-tag {
  font-size: 0.58rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  padding: 0.15rem 0.45rem !important;
  border-radius: 2px !important;
  background: rgba(255,0,102,0.1) !important;
  border: 1px solid rgba(255,0,102,0.3) !important;
  color: var(--pink) !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  font-family: var(--mono) !important;
  box-shadow: 0 0 8px rgba(255,0,102,0.2) !important;
}

/* Slot badges */
.my-slots-badge {
  font-size: 0.7rem !important;
  color: var(--neon) !important;
  font-weight: 600 !important;
  font-family: var(--mono) !important;
}
.limit-badge {
  font-size: 0.68rem !important;
  color: var(--pink) !important;
  font-weight: 600 !important;
  font-family: var(--mono) !important;
}

/* Joined ribbon */
.joined-ribbon {
  position: absolute !important;
  top: 8px !important; right: 8px !important;
  background: var(--neon) !important;
  color: #000 !important;
  font-size: 0.58rem !important;
  font-weight: 800 !important;
  padding: 0.15rem 0.45rem !important;
  border-radius: 2px !important;
  z-index: 5 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  font-family: var(--mono) !important;
  box-shadow: 0 0 10px var(--neon-glow) !important;
}

/* Pills row */
.card-meta,
body .card-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.35rem !important;
  margin: 0 !important;
}
.card-meta .pill,
body .card-meta .pill {
  background: rgba(0,220,255,0.05) !important;
  border: 1px solid rgba(0,220,255,0.15) !important;
  border-radius: 3px !important;
  color: var(--neon-dim) !important;
  font-size: 0.7rem !important;
  padding: 0.12rem 0.5rem !important;
  font-family: var(--mono) !important;
}

/* Progress bar */
.progress-track,
body .progress-track {
  background: var(--surface) !important;
  border-radius: 0 !important;
  height: 2px !important;
  overflow: hidden !important;
  margin: 0.1rem 0 !important;
}
.progress-fill,
body .progress-fill {
  background: linear-gradient(90deg, var(--neon), var(--pink)) !important;
  height: 100% !important;
  box-shadow: 0 0 6px var(--neon) !important;
  transition: width 0.4s ease !important;
}

/* Open slots text */
.raffle-card-body > .muted,
.small-space {
  font-size: 0.72rem !important;
  color: var(--muted) !important;
  margin: 0 !important;
  font-family: var(--mono) !important;
}

/* Action button */
.card-actions,
body .card-actions {
  margin-top: auto !important;
  padding-top: 0.6rem !important;
}
.card-actions .ghost-btn {
  width: 100% !important;
  text-align: center !important;
  padding: 0.45rem !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.08em !important;
  border-color: rgba(0,220,255,0.2) !important;
}
.card-actions .ghost-btn:hover {
  border-color: var(--neon) !important;
  color: var(--neon) !important;
  box-shadow: 0 0 16px var(--neon-glow) !important;
}
.card-actions .btn-disabled {
  border-color: rgba(255,0,102,0.15) !important;
  color: var(--pink) !important;
  opacity: 0.5 !important;
}


/* ── WAGER BUTTONS EXPLICIT ENABLED STATE ── */

.wager-btn:not(:disabled) {

  pointer-events: all !important;

  cursor: pointer !important;

  opacity: 1 !important;

}

.wager-btn:disabled {

  pointer-events: none !important;

  cursor: not-allowed !important;

  opacity: 0.3 !important;

}


/* ── MAGIC 8 FULL LAYOUT FIX ── */
.magic-layout {
  display: grid !important;
  grid-template-columns: 1fr 320px !important;
  gap: 1rem !important;
  align-items: start !important;
}

.magic-panel-main {
  padding: 1.5rem !important;
}

/* Orb — contained, not overflowing onto buttons */
.orb-stage {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 1.5rem auto !important;
  width: 120px !important;
  height: 120px !important;
  overflow: visible !important;
  z-index: 1 !important;
}

.orb-halo {
  position: absolute !important;
  inset: -20px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(0,220,255,0.15) !important;
  animation: none !important;
  box-shadow: 0 0 30px rgba(0,220,255,0.08) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.magic-orb {
  position: relative !important;
  z-index: 2 !important;
  width: 100px !important;
  height: 100px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 35% 35%, #0d1a2e, #020208) !important;
  border: 2px solid var(--neon-dim) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 0 30px var(--neon-glow), inset 0 0 20px rgba(0,220,255,0.05) !important;
  pointer-events: none !important;
}

.magic-orb span {
  font-size: 1.8rem !important;
  font-weight: 900 !important;
  color: var(--neon) !important;
  text-shadow: 0 0 16px var(--neon) !important;
  line-height: 1 !important;
}

.magic-orb small {
  font-size: 0.6rem !important;
  color: var(--neon-dim) !important;
  text-align: center !important;
  padding: 0 8px !important;
  font-family: var(--mono) !important;
}

/* Wager buttons — clear stacking context, fully clickable */
.magic-actions {
  display: flex !important;
  gap: 0.5rem !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  margin: 1rem 0 !important;
  position: relative !important;
  z-index: 10 !important;
}

.wager-btn {
  position: relative !important;
  z-index: 10 !important;
  pointer-events: all !important;
  background: var(--surface) !important;
  border: 1px solid rgba(0,220,255,0.2) !important;
  border-radius: var(--r-sm) !important;
  color: var(--text) !important;
  padding: 0.5rem 1rem !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  font-family: var(--mono) !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
  min-width: 52px !important;
}

.wager-btn:not([disabled]):hover {
  border-color: var(--neon) !important;
  color: var(--neon) !important;
  background: var(--neon-sub) !important;
  box-shadow: 0 0 14px var(--neon-glow) !important;
}

.wager-btn[disabled] {
  opacity: 0.25 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  border-color: var(--border) !important;
  color: var(--muted) !important;
}

/* Result card */
.magic-result-card {
  border-radius: var(--r) !important;
  padding: 1rem !important;
  border: 1px solid var(--border) !important;
  background: var(--surface) !important;
  margin-top: 1rem !important;
}
.magic-result-card.win {
  border-color: rgba(0,255,136,0.3) !important;
  background: rgba(0,255,136,0.05) !important;
  box-shadow: 0 0 20px rgba(0,255,136,0.1) !important;
}
.magic-result-card.lose {
  border-color: rgba(255,0,102,0.3) !important;
  background: rgba(255,0,102,0.05) !important;
}
.magic-result-card h3 {
  font-family: var(--mono) !important;
  font-size: 0.9rem !important;
  margin-bottom: 0.4rem !important;
}
.magic-result-card.win h3 { color: var(--success) !important; }
.magic-result-card.lose h3 { color: var(--pink) !important; }

/* Side panel */
.magic-panel-side {
  padding: 1.25rem !important;
}
.magic-stat-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0.5rem !important;
  margin-bottom: 1rem !important;
}

@media (max-width: 900px) {
  .magic-layout { grid-template-columns: 1fr !important; }
}

/* ── SLOT CAP STATE ── */
.slot.slot-cap {
  opacity: 0.2 !important;
  cursor: not-allowed !important;
  border-color: var(--border) !important;
}
.slot.slot-cap:hover {
  border-color: var(--border) !important;
  color: var(--muted) !important;
  background: var(--surface) !important;
  box-shadow: none !important;
}

/* ── RAFFLE CARD ART — CENTERED ── */
.raffle-art-wrap {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 160px !important;
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border) !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}
.raffle-art-wrap img {
  max-height: 130px !important;
  max-width: 75% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;
  filter: drop-shadow(0 0 14px rgba(0,220,255,0.15)) !important;
}

/* ════════════════════════════════════
   MOBILE EXPERIENCE — FULL OVERHAUL
   Targets: ≤768px phones, ≤900px tablets
════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── HIDE DESKTOP-ONLY ELEMENTS ── */
  .activity-shell,
  .activity-rail,
  .topbar-wallet { display: none !important; }

  /* ── HEADER ── */
  .topbar-row1 {
    padding: 0 0.85rem !important;
    height: 48px !important;
  }
  .topbar-row2 {
    padding: 0 0.5rem !important;
    height: auto !important;
    min-height: 36px !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    gap: 0 !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .topbar-row2::-webkit-scrollbar { display: none !important; }

  .brand-name { font-size: 0.78rem !important; }
  .brand-mark  { width: 22px !important; height: 22px !important; }

  .nav-pill {
    padding: 0.2rem 0.6rem !important;
    font-size: 0.68rem !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  #logoutBtn, #logoutBtn.ghost-btn {
    padding: 0.22rem 0.55rem !important;
    font-size: 0.68rem !important;
  }
  .discord-topbar-btn {
    padding: 0.22rem 0.55rem !important;
    font-size: 0.68rem !important;
  }

  /* ── HUD BAR ── */
  .persistent-hud-shell {
    top: 84px !important;
    padding: 0.4rem 0.85rem !important;
  }
  .hud-bar-card, .top-hud-card {
    min-width: 120px !important;
    padding: 0.25rem 0.5rem !important;
  }

  /* ── MAIN CONTENT ── */
  .main-content { padding: 0.75rem !important; }

  /* ── DASHBOARD GRID ── */
  .dashboard-grid {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }

  /* ── WALLET TILES ── */
  .wallet-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.4rem !important;
  }
  .wallet-tile {
    padding: 0.55rem 0.5rem !important;
  }
  .wallet-tile strong {
    font-size: 1.1rem !important;
  }
  .wallet-label {
    font-size: 0.55rem !important;
  }

  /* ── PANELS ── */
  .panel, .premium-card, .panel-tall {
    border-radius: var(--r) !important;
    padding: 1rem !important;
  }

  /* ── RAFFLE CARDS ── */
  .raffles-list {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }
  .raffle-art-wrap {
    height: 120px !important;
  }
  .raffle-card-body {
    padding: 0.75rem !important;
  }
  .raffle-topline h3 {
    font-size: 0.88rem !important;
  }

  /* ── SLOT MAP ── */
  .slot-map {
    grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)) !important;
    gap: 0.35rem !important;
  }
  .slot {
    font-size: 0.68rem !important;
    padding: 0.3rem !important;
  }

  /* ── JOIN PANEL ── */
  .join-panel {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }
  .join-actions {
    display: flex !important;
    gap: 0.5rem !important;
  }
  .join-actions button {
    flex: 1 !important;
  }

  /* ── MAGIC 8 ── */
  .magic-layout {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }
  .magic-actions {
    gap: 0.35rem !important;
    flex-wrap: wrap !important;
  }
  .wager-btn {
    padding: 0.4rem 0.65rem !important;
    font-size: 0.76rem !important;
    min-width: 44px !important;
  }
  .orb-stage {
    margin: 1rem auto !important;
    width: 90px !important;
    height: 90px !important;
  }
  .magic-orb {
    width: 80px !important;
    height: 80px !important;
  }
  .magic-orb span { font-size: 1.4rem !important; }

  /* ── SERVICES FORM ── */
  .services-layout,
  .services-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── SECTION HEADS ── */
  .section-head h2 {
    font-size: 1rem !important;
  }
  .section-kicker {
    font-size: 0.55rem !important;
  }

  /* ── BUTTONS ── */
  .cta-btn, .primary-btn, .premium-btn {
    padding: 0.5rem 0.9rem !important;
    font-size: 0.78rem !important;
  }
  .ghost-btn {
    padding: 0.4rem 0.75rem !important;
    font-size: 0.74rem !important;
  }

  /* ── HELP/HOW IT WORKS ── */
  .help-grid {
    grid-template-columns: 1fr !important;
    gap: 0.6rem !important;
  }

  /* ── NOTIFICATIONS ── */
  #notifList > div {
    flex-direction: column !important;
    gap: 0.4rem !important;
  }

  /* ── FUNDING BOX ── */
  .funding-box {
    flex-direction: column !important;
    gap: 0.5rem !important;
    padding: 0.75rem !important;
  }

  /* ── METRICS GRID ── */
  .metrics-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.4rem !important;
  }
  .metric-value { font-size: 1.2rem !important; }

  /* ── DETAIL PANEL ── */
  .detail-meta {
    flex-direction: column !important;
    gap: 0.4rem !important;
  }
}

/* ── VERY SMALL PHONES ── */
@media (max-width: 380px) {
  .nav-pill { padding: 0.18rem 0.45rem !important; font-size: 0.62rem !important; }
  .wallet-tile strong { font-size: 0.95rem !important; }
  .wallet-grid { gap: 0.3rem !important; }
  .topbar-row1 { padding: 0 0.65rem !important; }
  .brand-name { display: none !important; }
  .wager-btn { padding: 0.35rem 0.5rem !important; font-size: 0.7rem !important; }
}

/* ── MOBILE WALLET BAR ── */
.mobile-wallet-bar {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.4rem 1rem;
  background: rgba(0,220,255,0.05);
  border-bottom: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 0.78rem;
}
.mwb-item { display: flex; align-items: center; gap: 0.25rem; }
.mwb-label { font-size: 0.6rem; font-weight: 700; opacity: 0.5; text-transform: uppercase; }
.mwb-val { font-weight: 700; font-variant-numeric: tabular-nums; }
.mwb-item.gold   .mwb-val { color: var(--neon);   text-shadow: 0 0 8px rgba(0,220,255,0.4); }
.mwb-item.silver .mwb-val { color: var(--purple);  text-shadow: 0 0 8px rgba(153,69,255,0.4); }
.mwb-item.copper .mwb-val { color: var(--pink);    text-shadow: 0 0 8px rgba(255,0,102,0.4); }
.mwb-sep { color: var(--muted); }

@media (max-width: 768px) {
  .mobile-wallet-bar { display: flex !important; }
}

/* ── EXCHANGE RATE CARDS ── */
.rate-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.rate-card:hover {
  border-color: rgba(0,220,255,0.3);
  box-shadow: 0 0 12px rgba(0,220,255,0.07);
}
.rate-name {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rate-cat {
  font-size: 0.66rem;
  color: var(--muted);
  margin: 1px 0;
  font-family: var(--mono);
}
.rate-val {
  font-size: 0.74rem;
  font-family: var(--mono);
  color: var(--neon);
  margin-top: 2px;
}