/* ============================================
   PROPIX — PREMIUM DARK DESIGN SYSTEM
   ============================================ */

:root {
  --bg-primary: #0a0a0f;
  --bg-secondary: #111118;
  --bg-card: #13131c;
  --bg-elevated: #1a1a26;
  --bg-hover: #1e1e2e;

  --purple-primary: #7c3aed;
  --purple-light: #9d6ef5;
  --purple-glow: rgba(124, 58, 237, 0.35);
  --purple-subtle: rgba(124, 58, 237, 0.12);

  --green-hit: #22c55e;
  --green-glow: rgba(34, 197, 94, 0.3);
  --yellow-close: #eab308;
  --yellow-glow: rgba(234, 179, 8, 0.3);
  --red-miss: #ef4444;
  --red-glow: rgba(239, 68, 68, 0.3);

  --nuke-gold: #4B0082;
  --nuke-glow: rgba(75, 0, 130, 0.6);
  --problem-red: #8B0000;
  --problem-glow: rgba(139, 0, 0, 0.5);
  --sixth-cyan: #FFD700;
  --sixth-glow: rgba(255, 215, 0, 0.4);
  --sleeper-green: #39FF14;
  --sleeper-glow: rgba(57, 255, 20, 0.4);
  --potential-gray: #C0C0C0;
  --potential-glow: rgba(192, 192, 192, 0.4);

  --text-primary: #f1f1f8;
  --text-secondary: #9898b0;
  --text-muted: #5a5a78;
  --text-purple: #a78bfa;

  --border-subtle: rgba(255,255,255,0.06);
  --border-purple: rgba(124, 58, 237, 0.3);

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;

  --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 14px;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ============================================
   SCROLLBAR
   ============================================ */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--purple-primary); border-radius: 4px; }

/* ============================================
   LAYOUT
   ============================================ */
#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  max-width: 1400px;
  margin: 0 auto;
}

/* ============================================
   TOP BAR
   ============================================ */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 56px;
  background: rgba(10, 10, 15, 0.95);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  z-index: 100;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}

.logo {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 1px;
  color: var(--text-primary);
}
.logo span { color: var(--purple-primary); }

.topbar-center {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.icon-btn {
  position: relative;
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 6px;
  border-radius: var(--radius-sm);
  transition: color 0.2s;
  display: flex;
  align-items: center;
}
.icon-btn:hover { color: var(--text-primary); }
.icon-btn svg { width: 20px; height: 20px; }

.badge {
  position: absolute;
  top: 2px; right: 2px;
  background: var(--purple-primary);
  color: white;
  font-size: 9px;
  font-weight: 700;
  width: 14px; height: 14px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}

.avatar-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-md);
  transition: background 0.2s;
}
.avatar-wrap:hover { background: var(--bg-elevated); }

.avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--purple-primary), #5b21b6);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: 13px;
  border: 2px solid var(--purple-primary);
}

.crown { font-size: 11px; color: var(--nuke-gold); }

/* ============================================
   MAIN CONTENT AREA
   ============================================ */
.main-content {
  margin-top: 56px;
  margin-bottom: 72px;
  padding: 20px;
  flex: 1;
}

/* ============================================
   BOTTOM NAV
   ============================================ */
.bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 68px;
  background: rgba(10, 10, 15, 0.97);
  backdrop-filter: blur(20px);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 8px 8px;
  z-index: 100;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 20px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s;
  color: var(--text-muted);
  border: none;
  background: none;
  min-width: 60px;
}
.nav-item:hover { color: var(--text-secondary); }
.nav-item.active { color: var(--purple-light); }
.nav-item svg { width: 22px; height: 22px; }
.nav-item span { font-size: 10px; font-weight: 600; letter-spacing: 0.5px; }
.nav-item.active .nav-dot {
  display: block;
  width: 4px; height: 4px;
  background: var(--purple-primary);
  border-radius: 50%;
  margin: 2px auto 0;
}
.nav-dot { display: none; }

/* ============================================
   PAGE PANELS
   ============================================ */
.page { display: none; }
.page.active { display: block; }

/* ============================================
   SECTION HEADERS
   ============================================ */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.section-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.view-all {
  font-size: 11px;
  color: var(--purple-light);
  cursor: pointer;
  font-weight: 600;
}
.view-all:hover { text-decoration: underline; }

/* ============================================
   CARDS / TILES
   ============================================ */
.tile {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 16px;
}

.tile-sm {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 12px;
}

/* ============================================
   BUTTONS
   ============================================ */
.btn-primary {
  background: var(--purple-primary);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  padding: 10px 20px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s;
  width: 100%;
}
.btn-primary:hover {
  background: var(--purple-light);
  box-shadow: 0 0 20px var(--purple-glow);
}

.btn-outline {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 8px 16px;
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-outline:hover {
  border-color: var(--purple-primary);
  color: var(--purple-light);
}

.btn-ghost {
  background: var(--purple-subtle);
  color: var(--purple-light);
  border: 1px solid var(--border-purple);
  border-radius: var(--radius-md);
  padding: 8px 16px;
  font-weight: 600;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-ghost:hover { background: var(--purple-glow); }

/* ============================================
   RARITY COLORS & GLOWS
   ============================================ */
.rarity-nuke { color: var(--nuke-gold); }
.rarity-problem { color: var(--problem-red); }
.rarity-sixth { color: var(--sixth-cyan); }
.rarity-sleeper { color: var(--sleeper-green); }
.rarity-potential { color: var(--potential-gray); }

.glow-nuke { box-shadow: 0 0 20px var(--nuke-glow), inset 0 0 20px rgba(75,0,130,0.06); border-color: var(--nuke-gold) !important; }
.glow-problem { box-shadow: 0 0 20px var(--problem-glow), inset 0 0 20px rgba(139,0,0,0.06); border-color: var(--problem-red) !important; }
.glow-sixth { box-shadow: 0 0 20px var(--sixth-glow), inset 0 0 20px rgba(255,215,0,0.05); border-color: var(--sixth-cyan) !important; }
.glow-sleeper { box-shadow: 0 0 20px var(--sleeper-glow), inset 0 0 20px rgba(57,255,20,0.05); border-color: var(--sleeper-green) !important; }
.glow-potential { box-shadow: 0 0 8px var(--potential-glow); border-color: var(--potential-gray) !important; }

/* ============================================
   PROGRESS BARS
   ============================================ */
.progress-track {
  height: 4px;
  background: var(--bg-elevated);
  border-radius: 4px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--purple-primary), var(--purple-light));
  border-radius: 4px;
  transition: width 0.6s ease;
}

/* ============================================
   HOME PAGE
   ============================================ */
.home-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}

.pack-card {
  background: var(--bg-card);
  border: 1px solid var(--border-purple);
  border-radius: var(--radius-lg);
  padding: 16px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  transition: all 0.2s;
}
.pack-card:hover { background: var(--bg-elevated); }

.pack-visual {
  width: 64px; height: 80px;
  background: linear-gradient(135deg, #1a0a2e, #0d0520);
  border: 2px solid var(--purple-primary);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 16px var(--purple-glow);
  position: relative;
  overflow: hidden;
}
.pack-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, var(--purple-glow) 0%, transparent 70%);
}
.pack-logo {
  font-size: 20px;
  font-weight: 900;
  color: var(--purple-light);
  z-index: 1;
  text-shadow: 0 0 12px var(--purple-primary);
}

.pack-locked .pack-visual {
  border-color: var(--border-subtle);
  box-shadow: none;
}
.pack-locked .pack-visual::before { display: none; }

.pack-info { flex: 1; }
.pack-name { font-size: 13px; font-weight: 700; margin-bottom: 2px; }
.pack-status { font-size: 11px; color: var(--purple-light); font-weight: 600; margin-bottom: 8px; }
.pack-status.locked { color: var(--text-muted); }
.pack-countdown { font-size: 11px; color: var(--nuke-gold); margin-top: 4px; }

.fragment-progress {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  margin-bottom: 16px;
}
.fragment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.fragment-label { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text-secondary); }
.fragment-count { font-size: 13px; font-weight: 700; color: var(--purple-light); }
.fragment-hint { font-size: 11px; color: var(--text-muted); margin-top: 6px; }

/* Top Props */
.prop-row {
  display: flex;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-subtle);
  gap: 12px;
  cursor: pointer;
  transition: background 0.15s;
}
.prop-row:last-child { border-bottom: none; }
.prop-row:hover { margin: 0 -16px; padding: 10px 16px; background: var(--bg-elevated); border-radius: var(--radius-sm); }

.team-badge {
  width: 32px; height: 32px;
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.prop-info { flex: 1; min-width: 0; }
.prop-player { font-size: 13px; font-weight: 600; }
.prop-meta { font-size: 11px; color: var(--text-muted); }

.prop-line { font-size: 12px; font-weight: 600; color: var(--text-secondary); white-space: nowrap; }
.prop-odds { font-size: 11px; color: var(--text-muted); }

.hit-rate {
  font-size: 12px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 20px;
  white-space: nowrap;
}
.hit-rate.high { background: rgba(34,197,94,0.15); color: var(--green-hit); }
.hit-rate.mid { background: rgba(234,179,8,0.15); color: var(--yellow-close); }
.hit-rate.low { background: rgba(239,68,68,0.15); color: var(--red-miss); }

/* Mini bar chart */
.mini-bars {
  display: flex;
  gap: 2px;
  align-items: flex-end;
  height: 20px;
  flex-shrink: 0;
}
.mini-bar {
  width: 5px;
  border-radius: 2px;
  min-height: 4px;
}
.mini-bar.green { background: var(--green-hit); }
.mini-bar.yellow { background: var(--yellow-close); }
.mini-bar.red { background: var(--red-miss); }

/* Horizontal reference line on detail chart at prop line value */
.chart-ref-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  border-top: 1.5px dashed rgba(255, 255, 255, 0.55);
  pointer-events: none;
  z-index: 5;
}

/* Community pulls */
.community-feed {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.community-feed::-webkit-scrollbar { display: none; }

.community-card {
  flex-shrink: 0;
  width: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.silhouette-card {
  width: 72px; height: 96px;
  border-radius: var(--radius-md);
  border: 2px solid;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background: #080810;
}
.silhouette-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center bottom, var(--glow-color, var(--purple-glow)) 0%, transparent 65%);
}
.silhouette-figure {
  width: 36px; height: 60px;
  background: rgba(20,20,35,0.9);
  border-radius: 3px 3px 0 0;
  clip-path: polygon(35% 0%, 65% 0%, 75% 15%, 70% 30%, 95% 45%, 100% 100%, 0% 100%, 5% 45%, 30% 30%, 25% 15%);
  z-index: 1;
}
.community-user { font-size: 10px; font-weight: 600; color: var(--text-secondary); text-align: center; }
.community-pull { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.community-time { font-size: 9px; color: var(--text-muted); }

/* Challenges */
.challenge-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.challenge-item:last-child { border-bottom: none; }
.challenge-icon {
  width: 36px; height: 36px;
  background: var(--purple-subtle);
  border: 1px solid var(--border-purple);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 16px;
}
.challenge-info { flex: 1; }
.challenge-name { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.challenge-desc { font-size: 11px; color: var(--text-muted); margin-bottom: 6px; }
.challenge-progress {
  display: flex;
  align-items: center;
  gap: 8px;
}
.challenge-frac { font-size: 11px; font-weight: 700; color: var(--purple-light); white-space: nowrap; }

/* Recent activity */
.activity-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.activity-item:last-child { border-bottom: none; }
.activity-dot {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}
.activity-info { flex: 1; }
.activity-text { font-size: 12px; font-weight: 500; }
.activity-time { font-size: 11px; color: var(--text-muted); }

/* ============================================
   RESEARCH PAGE
   ============================================ */
.research-header {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 10px 14px;
}
.search-bar input {
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 13px;
  flex: 1;
  outline: none;
}
.search-bar input::placeholder { color: var(--text-muted); }
.search-icon { color: var(--text-muted); }
.search-icon svg { width: 16px; height: 16px; }

.sport-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex-wrap: nowrap;
}
.sport-tabs::-webkit-scrollbar { display: none; }
.sport-tab {
  padding: 7px 16px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  border: 1px solid var(--border-subtle);
  background: none;
  color: var(--text-muted);
  transition: all 0.2s;
}
.sport-tab.active {
  background: var(--purple-primary);
  border-color: var(--purple-primary);
  color: white;
}
.sport-tab:hover:not(.active) {
  border-color: var(--purple-primary);
  color: var(--purple-light);
}

.market-scroll {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}
.market-scroll::-webkit-scrollbar { display: none; }
.market-pill {
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border-subtle);
  background: none;
  color: var(--text-muted);
  white-space: nowrap;
  transition: all 0.2s;
  flex-shrink: 0;
}
.market-pill.active {
  background: var(--purple-subtle);
  border-color: var(--purple-primary);
  color: var(--purple-light);
}
.market-pill:hover:not(.active) { color: var(--text-secondary); }

/* Research table */
.research-table-header {
  display: grid;
  grid-template-columns: 1fr 100px 70px 60px 60px 60px;
  padding: 8px 12px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-subtle);
}

.research-row {
  display: grid;
  grid-template-columns: 1fr 100px 70px 60px 60px 60px;
  padding: 12px;
  border-bottom: 1px solid var(--border-subtle);
  align-items: center;
  cursor: pointer;
  transition: background 0.15s;
  gap: 8px;
}
.research-row:hover { background: var(--bg-elevated); border-radius: var(--radius-sm); }
.research-row:last-child { border-bottom: none; }

.research-player { font-size: 13px; font-weight: 600; }
.research-sub { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.research-matchup { font-size: 12px; color: var(--text-secondary); }
.research-line { font-size: 13px; font-weight: 600; }
.research-odds { font-size: 11px; color: var(--text-muted); }
.research-dvp { font-size: 12px; font-weight: 600; }
.research-dvp.good { color: var(--green-hit); }
.research-dvp.mid { color: var(--yellow-close); }
.research-dvp.bad { color: var(--red-miss); }

/* Confidence badge */
.confidence-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  background: var(--purple-subtle);
  border: 1px solid var(--border-purple);
  color: var(--purple-light);
}

/* ============================================
   PACKS PAGE
   ============================================ */
.packs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 20px;
}

.pack-hero {
  background: var(--bg-card);
  border: 1px solid var(--border-purple);
  border-radius: var(--radius-xl);
  padding: 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.pack-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--purple-primary), transparent);
}
.pack-hero.locked {
  border-color: var(--border-subtle);
  opacity: 0.8;
}
.pack-hero.locked::before { display: none; }

.pack-hero-visual {
  width: 100px; height: 130px;
  background: linear-gradient(160deg, #150830, #0a0418);
  border: 2px solid var(--purple-primary);
  border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 30px var(--purple-glow), 0 0 60px rgba(124,58,237,0.1);
}
.pack-hero-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 60%, var(--purple-glow) 0%, transparent 70%);
}
.pack-hero-logo {
  font-size: 28px;
  font-weight: 900;
  color: var(--purple-light);
  text-shadow: 0 0 20px var(--purple-primary);
  z-index: 1;
}
.pack-hero.locked .pack-hero-visual {
  border-color: var(--border-subtle);
  box-shadow: none;
}
.pack-hero.locked .pack-hero-visual::before { display: none; }

.pack-hero-name { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.pack-hero-subtitle { font-size: 11px; color: var(--purple-light); margin-bottom: 12px; font-weight: 600; }
.pack-hero-subtitle.locked { color: var(--text-muted); }
.pack-hero-timer { font-size: 11px; color: var(--text-muted); margin-top: 8px; }

.fragments-display {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 16px;
  margin-bottom: 16px;
}
.fragments-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.fragment-gem {
  font-size: 32px;
  line-height: 1;
}
.fragments-info { flex: 1; }
.fragments-count {
  font-size: 20px;
  font-weight: 800;
  color: var(--purple-light);
}
.fragments-label { font-size: 12px; color: var(--text-muted); margin-bottom: 8px; }
.fragments-hint { font-size: 11px; color: var(--text-muted); margin-top: 6px; }

/* Pack odds display */
.odds-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-top: 12px;
}
.odds-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 10px 6px;
  text-align: center;
  transition: all 0.2s;
}
.odds-silhouette {
  width: 44px; height: 58px;
  border-radius: var(--radius-sm);
  border: 1.5px solid;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 6px;
  position: relative;
  overflow: hidden;
  background: #050510;
}
.odds-silhouette::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, var(--sil-glow, var(--purple-glow)) 0%, transparent 70%);
}
.odds-figure {
  width: 22px; height: 36px;
  background: rgba(10,10,20,0.85);
  clip-path: polygon(35% 0%, 65% 0%, 75% 15%, 70% 30%, 95% 45%, 100% 100%, 0% 100%, 5% 45%, 30% 30%, 25% 15%);
  z-index: 1;
}
.odds-logo {
  position: absolute;
  bottom: 4px;
  font-size: 6px;
  font-weight: 900;
  color: white;
  opacity: 0.7;
  z-index: 2;
}
.odds-rarity { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.odds-pct { font-size: 14px; font-weight: 800; margin: 2px 0; }
.odds-tier { font-size: 9px; color: var(--text-muted); }

/* ============================================
   PACK OPENING ANIMATION
   ============================================ */
.pack-open-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(5, 5, 12, 0.97);
  z-index: 200;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.pack-open-overlay.show { display: flex; }

.opening-pack {
  width: 140px; height: 180px;
  background: linear-gradient(160deg, #1a0a30, #0a0418);
  border: 2px solid var(--purple-primary);
  border-radius: var(--radius-xl);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  overflow: hidden;
  animation: packPulse 1.5s ease-in-out infinite;
}
.opening-pack::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(124,58,237,0.4) 0%, transparent 70%);
  animation: glowPulse 1.5s ease-in-out infinite;
}
@keyframes packPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 30px var(--purple-glow); }
  50% { transform: scale(1.03); box-shadow: 0 0 60px var(--purple-glow), 0 0 100px rgba(124,58,237,0.2); }
}
@keyframes glowPulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

.opening-logo { font-size: 36px; font-weight: 900; color: var(--purple-light); z-index: 1; text-shadow: 0 0 30px var(--purple-primary); }

.opening-stage { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted); }
.opening-title { font-size: 18px; font-weight: 700; color: var(--text-primary); }

.opening-btn {
  background: var(--purple-primary);
  color: white;
  border: none;
  border-radius: var(--radius-lg);
  padding: 14px 40px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 0 20px var(--purple-glow);
}
.opening-btn:hover { background: var(--purple-light); box-shadow: 0 0 40px var(--purple-glow); }

/* Revealed card */
.revealed-card {
  width: 200px; height: 280px;
  border-radius: var(--radius-xl);
  border: 2px solid;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  position: relative;
  overflow: hidden;
  animation: cardReveal 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes cardReveal {
  0% { transform: scale(0.5) rotateY(90deg); opacity: 0; }
  100% { transform: scale(1) rotateY(0deg); opacity: 1; }
}
.revealed-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, var(--card-glow, var(--purple-glow)) 0%, transparent 70%);
}
.revealed-rarity { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; z-index: 1; }
.revealed-player { font-size: 22px; font-weight: 800; text-align: center; z-index: 1; line-height: 1.2; }
.revealed-line { font-size: 13px; font-weight: 600; color: var(--text-secondary); z-index: 1; margin-top: 4px; }

/* ============================================
   SHOP PAGE
   ============================================ */
.shop-tabs {
  display: flex;
  gap: 0;
  background: var(--bg-elevated);
  border-radius: var(--radius-md);
  padding: 3px;
  margin-bottom: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.shop-tabs::-webkit-scrollbar { display: none; }
.shop-tab {
  flex: 1;
  min-width: 60px;
  padding: 8px 10px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  border-radius: calc(var(--radius-md) - 3px);
  transition: all 0.2s;
  color: var(--text-muted);
  border: none;
  background: none;
  white-space: nowrap;
}
.shop-tab.active {
  background: var(--purple-primary);
  color: white;
  box-shadow: 0 0 12px var(--purple-glow);
}
.shop-xp-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  background: var(--bg-elevated);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  gap: 12px;
}
.shop-xp-name { font-size: 13px; font-weight: 700; color: var(--text-primary); margin-bottom: 2px; }
.shop-xp-desc { font-size: 11px; color: var(--text-muted); }
.shop-xp-btn {
  padding: 8px 14px;
  font-size: 11px;
  font-weight: 700;
  background: var(--purple-primary);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.shop-xp-btn.xp-btn-gold {
  background: linear-gradient(135deg, var(--nuke-gold, #f0a500), #e8820a);
  color: #000;
}

/* ============================================
   TRADE PAGE
   ============================================ */
.trade-tabs {
  display: flex;
  gap: 0;
  background: var(--bg-elevated);
  border-radius: var(--radius-md);
  padding: 3px;
  margin-bottom: 16px;
}
.trade-tab {
  flex: 1;
  padding: 8px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  border-radius: calc(var(--radius-md) - 3px);
  transition: all 0.2s;
  color: var(--text-muted);
  border: none;
  background: none;
}
.trade-tab.active {
  background: var(--purple-primary);
  color: white;
  box-shadow: 0 0 12px var(--purple-glow);
}

.rarity-filter {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  margin-bottom: 16px;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.rarity-filter::-webkit-scrollbar { display: none; }
.rarity-chip {
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid var(--border-subtle);
  background: none;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.2s;
}
.rarity-chip.active { border-color: var(--purple-primary); color: var(--purple-light); background: var(--purple-subtle); }
.rarity-chip.nuke { border-color: var(--nuke-gold); color: var(--nuke-gold); }
.rarity-chip.problem { border-color: var(--problem-red); color: var(--problem-red); }
.rarity-chip.sixth { border-color: var(--sixth-cyan); color: var(--sixth-cyan); }
.rarity-chip.sleeper { border-color: var(--sleeper-green); color: var(--sleeper-green); }

.trade-card-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 0.2s;
}
.trade-card-row:hover { border-color: var(--purple-primary); }

.trade-mini-card {
  width: 44px; height: 58px;
  border-radius: var(--radius-sm);
  border: 1.5px solid;
  display: flex; align-items: center; justify-content: center;
  font-size: 8px;
  font-weight: 700;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  background: #080810;
}
.trade-mini-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, var(--card-glow, var(--purple-glow)) 0%, transparent 70%);
}

.trade-info { flex: 1; }
.trade-player { font-size: 13px; font-weight: 600; }
.trade-meta { font-size: 11px; color: var(--text-muted); }
.trade-from { font-size: 11px; color: var(--text-secondary); }
.trade-time { font-size: 11px; color: var(--yellow-close); font-weight: 600; }

.review-btn {
  background: var(--purple-subtle);
  border: 1px solid var(--border-purple);
  color: var(--purple-light);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}
.review-btn:hover { background: var(--purple-glow); }

.trade-summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 16px;
}
.trade-stat {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.trade-stat-label { font-size: 11px; color: var(--text-muted); }
.trade-stat-val { font-size: 14px; font-weight: 700; color: var(--purple-light); }

/* ============================================
   LEADERBOARD PAGE
   ============================================ */
.lb-period-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
}
.lb-tab {
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid var(--border-subtle);
  background: none;
  color: var(--text-muted);
  transition: all 0.2s;
}
.lb-tab.active {
  background: var(--purple-primary);
  border-color: var(--purple-primary);
  color: white;
}

.season-banner {
  background: linear-gradient(135deg, rgba(124,58,237,0.15), rgba(91,33,182,0.08));
  border: 1px solid var(--border-purple);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.season-label { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text-secondary); }
.season-name { font-size: 18px; font-weight: 800; color: var(--purple-light); }
.season-ends { font-size: 11px; color: var(--text-muted); }
.season-timer { font-size: 20px; font-weight: 800; color: var(--nuke-gold); text-align: right; }
.season-timer-label { font-size: 10px; color: var(--text-muted); }

/* Top 3 podium */
.podium {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
  margin-bottom: 20px;
  padding: 16px;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
}
.podium-place {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1;
}
.podium-place.first { order: 2; }
.podium-place.second { order: 1; }
.podium-place.third { order: 3; }

.podium-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--bg-elevated);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  border: 2px solid;
}
.podium-place.first .podium-avatar { width: 54px; height: 54px; border-color: var(--nuke-gold); }
.podium-place.second .podium-avatar { border-color: var(--text-secondary); }
.podium-place.third .podium-avatar { border-color: #cd7f32; }

.podium-name { font-size: 11px; font-weight: 700; text-align: center; }
.podium-pts { font-size: 13px; font-weight: 800; color: var(--green-hit); }
.podium-wr { font-size: 10px; color: var(--text-muted); }

.podium-bar {
  width: 100%;
  border-radius: 4px 4px 0 0;
  background: var(--bg-elevated);
}
.podium-place.first .podium-bar { height: 50px; background: linear-gradient(180deg, rgba(245,158,11,0.3), transparent); }
.podium-place.second .podium-bar { height: 35px; background: linear-gradient(180deg, rgba(156,163,175,0.2), transparent); }
.podium-place.third .podium-bar { height: 25px; background: linear-gradient(180deg, rgba(205,127,50,0.2), transparent); }

.lb-table-header {
  display: grid;
  grid-template-columns: 40px 1fr 80px 70px;
  padding: 8px 12px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-subtle);
}
.lb-row {
  display: grid;
  grid-template-columns: 40px 1fr 80px 70px;
  padding: 12px;
  border-bottom: 1px solid var(--border-subtle);
  align-items: center;
  transition: background 0.15s;
}
.lb-row:hover { background: var(--bg-elevated); }
.lb-row.you { background: rgba(124,58,237,0.08); border-color: var(--border-purple); }
.lb-row:last-child { border-bottom: none; }

.lb-rank { font-size: 13px; font-weight: 700; color: var(--text-muted); text-align: center; }
.lb-rank.top { color: var(--nuke-gold); }
.lb-user { display: flex; align-items: center; gap: 8px; }
.lb-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--bg-elevated); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; border: 1px solid var(--border-subtle); }
.lb-name { font-size: 13px; font-weight: 600; }
.lb-tier { font-size: 10px; color: var(--text-muted); }
.lb-pts { font-size: 13px; font-weight: 700; color: var(--green-hit); text-align: right; }
.lb-wr { font-size: 13px; font-weight: 600; color: var(--text-secondary); text-align: right; }

/* ============================================
   PROFILE DROPDOWN OVERLAY
   ============================================ */
.profile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 150;
}
.profile-overlay.show { display: block; }

.profile-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5,5,12,0.7);
}

.profile-menu {
  position: absolute;
  top: 60px; right: 16px;
  width: 260px;
  background: var(--bg-card);
  border: 1px solid var(--border-purple);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 30px var(--purple-glow);
}

.profile-menu-header {
  padding: 20px;
  background: linear-gradient(135deg, rgba(124,58,237,0.15), transparent);
  border-bottom: 1px solid var(--border-subtle);
  text-align: center;
}
.profile-menu-avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--purple-primary), #5b21b6);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 700;
  margin: 0 auto 10px;
  border: 3px solid var(--purple-primary);
  box-shadow: 0 0 20px var(--purple-glow);
}
.profile-menu-name { font-size: 16px; font-weight: 700; }
.profile-menu-level { font-size: 12px; color: var(--purple-light); margin-bottom: 4px; }
.profile-menu-title { display: inline-block; background: var(--purple-subtle); color: var(--purple-light); border: 1px solid var(--purple-primary); border-radius: 20px; font-size: 9px; font-weight: 700; padding: 2px 10px; letter-spacing: 0.05em; margin-bottom: 8px; }
.profile-xp-bar { margin: 0 auto; max-width: 160px; }

.profile-menu-items { padding: 8px; }
.profile-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.15s;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}
.profile-menu-item:hover { background: var(--bg-elevated); color: var(--text-primary); }
.profile-menu-item.danger { color: var(--red-miss); }
.profile-menu-item svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ============================================
   NOTIFICATIONS OVERLAY
   ============================================ */
.notif-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 150;
}
.notif-overlay.show { display: block; }

.notif-panel {
  position: absolute;
  top: 60px; right: 16px;
  width: 320px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  max-height: 480px;
  display: flex;
  flex-direction: column;
}
.notif-header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.notif-title { font-size: 14px; font-weight: 700; }
.notif-mark { font-size: 11px; color: var(--purple-light); cursor: pointer; }
.notif-list { overflow-y: auto; flex: 1; }
.notif-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-subtle);
}
.notif-item.unread { background: rgba(124,58,237,0.05); }
.notif-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--purple-primary); flex-shrink: 0; margin-top: 4px; }
.notif-text { font-size: 12px; line-height: 1.5; flex: 1; }
.notif-time { font-size: 10px; color: var(--text-muted); white-space: nowrap; }

/* ============================================
   STATS OVERVIEW TILES
   ============================================ */
.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}
.stat-tile {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 10px;
  text-align: center;
}
.stat-val { font-size: 18px; font-weight: 800; color: var(--purple-light); }
.stat-label { font-size: 10px; color: var(--text-muted); margin-top: 2px; }

/* ============================================
   FOOTER BAR (info strip)
   ============================================ */
.info-strip {
  display: flex;
  gap: 20px;
  padding: 12px 0;
  border-top: 1px solid var(--border-subtle);
  overflow-x: auto;
  scrollbar-width: none;
  margin-top: 12px;
}
.info-strip::-webkit-scrollbar { display: none; }
.info-item {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.info-item-icon { font-size: 16px; }
.info-item-text { }
.info-item-title { font-size: 11px; font-weight: 700; color: var(--purple-light); }
.info-item-sub { font-size: 10px; color: var(--text-muted); }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 640px) {
  .main-content { padding: 12px; }
  .home-grid { grid-template-columns: 1fr; }
  .packs-grid { grid-template-columns: 1fr; }
  .stats-row { grid-template-columns: repeat(2, 1fr); }
  .research-table-header,
  .research-row { grid-template-columns: 1fr 80px 60px 50px; }
  .research-table-header .col-dvp,
  .research-row .col-dvp { display: none; }
  .lb-table-header,
  .lb-row { grid-template-columns: 32px 1fr 70px; }
  .lb-table-header .col-wr,
  .lb-row .col-wr { display: none; }
  .odds-grid { grid-template-columns: repeat(5, 1fr); gap: 4px; }
  .trade-summary-grid { grid-template-columns: 1fr; }
}

/* ============================================
   LOGO PROMINENCE (item 18)
   ============================================ */
.logo {
  font-size: 24px;
  font-weight: 900;
  letter-spacing: 2px;
  display: flex;
  align-items: baseline;
  gap: 0;
  filter: drop-shadow(0 0 8px var(--purple-glow));
}
.logo-prop {
  color: var(--text-primary);
  font-size: 24px;
  font-weight: 900;
}
.logo-ix {
  color: var(--purple-primary);
  font-size: 24px;
  font-weight: 900;
  text-shadow: 0 0 16px var(--purple-glow);
}

/* ============================================
   INFO STRIP SPACING FIX (item 11)
   ============================================ */
.info-strip {
  gap: 28px;
  padding: 16px 0;
}
.info-item {
  gap: 10px;
  min-width: 120px;
}
.info-item-icon { font-size: 18px; }

/* ============================================
   CARD OF THE DAY (item 19)
   ============================================ */
.cotd-tile {
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
  border-color: var(--border-purple);
}
.cotd-tile:hover {
  border-color: var(--purple-primary);
  box-shadow: 0 0 20px var(--purple-glow);
}
.cotd-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.cotd-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--purple-light);
  text-transform: uppercase;
}
.cotd-inner {
  display: flex;
  align-items: center;
  gap: 16px;
}
.cotd-mystery-card {
  width: 64px;
  height: 88px;
  border-radius: var(--radius-md);
  border: 2px solid var(--purple-primary);
  background: linear-gradient(160deg, rgba(124,58,237,0.15), rgba(10,0,16,0.9));
  box-shadow: 0 0 20px var(--purple-glow);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  animation: cotdPulse 3s ease-in-out infinite;
}
@keyframes cotdPulse {
  0%, 100% { box-shadow: 0 0 20px var(--purple-glow); }
  50%       { box-shadow: 0 0 36px rgba(124,58,237,0.6); }
}
.cotd-question {
  font-size: 32px;
  font-weight: 900;
  color: var(--purple-primary);
  opacity: 0.7;
}
.cotd-info { flex: 1; }
.cotd-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 6px;
}
.cotd-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Card of the Day modal overlay */
.cotd-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
}
.cotd-overlay.show { display: block; }
.cotd-modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(340px, calc(100vw - 40px));
  background: var(--bg-card);
  border: 1px solid var(--border-purple);
  border-radius: var(--radius-xl);
  padding: 28px 24px;
  text-align: center;
  box-shadow: 0 24px 80px rgba(0,0,0,0.8);
  z-index: 1;
}

/* ============================================
   ALL GAMES DROPDOWN (item 2)
   ============================================ */
.all-games-dropdown {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 8px;
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.game-pill {
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.game-pill:hover,
.game-pill.active {
  border-color: var(--purple-primary);
  color: var(--purple-light);
  background: var(--purple-subtle);
}
.pill-odds {
  display: block;
  font-size: 10px;
  font-weight: 400;
  color: var(--text-muted);
  margin-top: 2px;
  letter-spacing: 0.02em;
}
.game-odds-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  margin-bottom: 10px;
  font-size: 12px;
}
.gob-team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-weight: 600;
  color: var(--text-primary);
  font-size: 13px;
}
.gob-ml {
  font-size: 11px;
  font-weight: 500;
  color: var(--purple-light);
}
.gob-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.gob-ou {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}
.gob-spread {
  font-size: 10px;
  color: var(--text-muted);
}

/* ============================================
   FRAGMENT GEM SVG (item 7)
   ============================================ */
.fragment-gem-svg {
  flex-shrink: 0;
  filter: drop-shadow(0 0 8px rgba(124,58,237,0.5));
  width: 40px;
  height: 52px;
}

/* ============================================
   RESEARCH DETAIL PANEL (item 5)
   ============================================ */
.detail-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 180;
  background: var(--bg-primary);
  overflow-y: auto;
}
.detail-overlay.show { display: block; }

.detail-panel {
  max-width: 600px;
  margin: 0 auto;
  padding: 16px 20px 32px;
}
.detail-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-subtle);
  position: sticky;
  top: 0;
  background: var(--bg-primary);
  z-index: 10;
}
.detail-back-btn {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  font-size: 18px;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s;
}
.detail-back-btn:hover { background: var(--bg-hover); }
.detail-player-name { font-size: 16px; font-weight: 800; }
.detail-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.detail-rarity-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid currentColor;
  text-transform: uppercase;
  white-space: nowrap;
}
.detail-section-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}

/* Detail chart */
.detail-chart {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 96px;
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none;
  padding-bottom: 4px;
  justify-content: space-evenly;
}
.detail-chart::-webkit-scrollbar { display: none; }
.detail-bar-wrap {
  flex: 1;
  min-width: 20px;
  max-width: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  height: 80px;
  justify-content: flex-end;
}
.detail-bar {
  width: 100%;
  border-radius: 3px 3px 0 0;
  min-height: 4px;
  transition: height 0.3s ease;
}
.detail-bar.green { background: var(--green-hit); }
.detail-bar.yellow { background: var(--yellow-close); }
.detail-bar.red { background: var(--red-miss); }
.detail-bar-val {
  font-size: 9px;
  font-weight: 700;
  color: var(--text-secondary);
  position: relative;
  z-index: 10;
}
.detail-bar-opp {
  font-size: 8px;
  color: #e5e7eb;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  max-width: 24px;
}

/* Stats grid */
.detail-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.detail-stat-cell {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 10px 8px;
  text-align: center;
}
.detail-stat-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--text-muted);
  text-transform: uppercase;
}
.detail-stat-val {
  font-size: 18px;
  font-weight: 800;
  color: var(--purple-light);
  margin: 4px 0 2px;
}
.detail-stat-sub {
  font-size: 10px;
  color: var(--text-muted);
}

/* Line movement */
.line-movement-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.lm-cell { text-align: center; }
.lm-label {
  font-size: 10px;
  color: var(--text-muted);
  margin-bottom: 4px;
  letter-spacing: 0.5px;
}
.lm-val {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-primary);
}
.lm-arrow {
  font-size: 18px;
  color: var(--text-muted);
  flex: 1;
  text-align: center;
}
.lm-move {
  font-size: 12px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
}
.lm-move.up   { color: var(--green-hit);   background: rgba(34,197,94,0.1); }
.lm-move.down { color: var(--red-miss);    background: rgba(239,68,68,0.1); }
.lm-move.flat { color: var(--text-muted);  background: var(--bg-elevated); }

/* Injury */
.injury-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
}
.injury-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.injury-dot.green  { background: var(--green-hit);  box-shadow: 0 0 6px var(--green-glow); }
.injury-dot.yellow { background: var(--yellow-close); box-shadow: 0 0 6px var(--yellow-glow); }
.injury-dot.red    { background: var(--red-miss);   box-shadow: 0 0 6px var(--red-glow); }

/* Ladder */
.ladder-grid { display: flex; flex-direction: column; gap: 8px; }
.ladder-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: var(--bg-elevated);
}
.ladder-tier {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  width: 70px;
  flex-shrink: 0;
}
.ladder-tier.safer      { color: var(--green-hit); }
.ladder-tier.main       { color: var(--purple-light); }
.ladder-tier.aggressive { color: var(--red-miss); }
.ladder-line {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-primary);
  width: 70px;
  flex-shrink: 0;
}
.ladder-desc {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
}

/* Locked why tile */
.locked-why-tile {
  background: linear-gradient(135deg, rgba(124,58,237,0.08), rgba(10,0,16,0.4));
  border: 1px solid var(--border-purple);
  border-radius: var(--radius-lg);
  padding: 16px;
}
.locked-why-inner {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

/* ============================================
   CHALLENGES PAGE (item 16)
   ============================================ */
.challenges-back-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-subtle);
}
.back-btn {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.15s;
}
.back-btn:hover { color: var(--text-primary); border-color: var(--purple-primary); }

/* Streak shield banner */
.streak-shield-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, rgba(124,58,237,0.12), rgba(10,0,16,0.2));
  border: 1px solid var(--purple-primary);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin-bottom: 16px;
}
.shield-badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--purple-light);
  border: 1px solid var(--purple-primary);
  border-radius: var(--radius-sm);
  padding: 3px 7px;
  white-space: nowrap;
}

/* Streak tile */
.streak-tile { }
.streak-dots {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.streak-dot {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  transition: all 0.2s;
}
.streak-dot.filled {
  background: var(--purple-primary);
  border-color: var(--purple-primary);
  box-shadow: 0 0 6px var(--purple-glow);
}
.streak-dot.shield {
  background: var(--nuke-gold);
  border-color: var(--nuke-gold);
  box-shadow: 0 0 6px var(--nuke-glow);
}

/* Lifetime category tabs */
.lt-tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  margin-bottom: 12px;
  padding-bottom: 2px;
}
.lt-tabs::-webkit-scrollbar { display: none; }
.lt-tab {
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  background: transparent;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}
.lt-tab:hover { color: var(--text-secondary); }
.lt-tab.active {
  background: var(--purple-subtle);
  border-color: var(--purple-primary);
  color: var(--purple-light);
}

/* Challenge items */
.ch-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.ch-item:last-child { border-bottom: none; }
.ch-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.ch-icon.complete {
  background: rgba(34,197,94,0.1);
  border-color: var(--green-hit);
}
.ch-body { flex: 1; min-width: 0; }
.ch-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.ch-desc {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 6px;
  line-height: 1.4;
}
.ch-progress-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ch-frac {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-secondary);
  white-space: nowrap;
}
.ch-xp {
  font-size: 10px;
  font-weight: 700;
  color: var(--purple-light);
  white-space: nowrap;
}
.ch-difficulty {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  border-radius: 10px;
  text-transform: uppercase;
}
.ch-difficulty.easy { background: rgba(34,197,94,0.12); color: var(--green-hit); }
.ch-difficulty.hard { background: rgba(239,68,68,0.1);  color: var(--red-miss); }
.ch-complete-badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 2px 7px;
  border-radius: 10px;
  background: rgba(34,197,94,0.12);
  color: var(--green-hit);
  border: 1px solid rgba(34,197,94,0.3);
}

/* Milestone items */
.milestone-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: var(--bg-elevated);
  margin-bottom: 8px;
}
.milestone-item:last-child { margin-bottom: 0; }
.milestone-reward {
  text-align: center;
  flex-shrink: 0;
  width: 48px;
}
.milestone-reward-icon { font-size: 24px; }
.milestone-reward-label {
  font-size: 9px;
  font-weight: 700;
  color: var(--purple-light);
  margin-top: 2px;
}
.milestone-body { flex: 1; min-width: 0; }
.milestone-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.milestone-desc {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 6px;
}

/* ============================================
   TRADE COOLDOWN (items 14, 15)
   ============================================ */
.cooldown-tile {
  background: var(--bg-card);
  border: 1px solid var(--border-purple);
  border-radius: var(--radius-lg);
  padding: 16px;
}
.cooldown-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.cooldown-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}
.cooldown-desc {
  font-size: 11px;
  color: var(--text-muted);
}
.cooldown-timer {
  font-size: 22px;
  font-weight: 900;
  color: var(--yellow-close);
  margin-bottom: 12px;
  text-align: center;
}
.cooldown-xp-section { }
.cooldown-xp-btns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.xp-shortcut-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 8px;
  border-radius: 10px;
  border: 1px solid #ffd700;
  background: linear-gradient(135deg, #b8860b 0%, #ffd700 100%);
  cursor: pointer;
  transition: all 0.2s ease;
  gap: 2px;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(255,215,0,0.3);
}
.xp-shortcut-btn:hover { transform: scale(1.03); box-shadow: 0 6px 18px rgba(255,215,0,0.45); filter: brightness(1.08); }
.xp-shortcut-btn:active { transform: scale(0.97); }
.xp-shortcut-btn.xp-gold {
  border-color: #fff7aa;
  box-shadow: 0 4px 18px rgba(255,215,0,0.5);
}
.xp-shortcut-btn.xp-gold:hover { filter: brightness(1.1); }
.xp-cost {
  font-size: 11px;
  font-weight: 700;
  color: #1a1000;
}
.xp-shortcut-btn.xp-gold .xp-cost { color: #1a1000; }
.xp-result {
  font-size: 10px;
  color: rgba(26,16,0,0.75);
  font-weight: 600;
}

/* ============================================
   ADMIN PANEL (item 20)
   ============================================ */
.admin-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 250;
  background: rgba(0,0,0,0.8);
  backdrop-filter: blur(8px);
}
.admin-overlay.show { display: flex; align-items: center; justify-content: center; }
.admin-panel {
  width: min(480px, calc(100vw - 32px));
  max-height: 90vh;
  overflow-y: auto;
  background: var(--bg-card);
  border: 1px solid var(--border-purple);
  border-radius: var(--radius-xl);
  padding: 0 0 20px;
}
.admin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-subtle);
  position: sticky;
  top: 0;
  background: var(--bg-card);
  z-index: 1;
}
.admin-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--purple-light);
}
.admin-close-btn {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.admin-close-btn:hover { color: var(--text-primary); border-color: var(--red-miss); }
.admin-section {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-subtle);
}
.admin-section:last-child { border-bottom: none; }
.admin-section-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.admin-section-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 4px;
}
.admin-input {
  width: 100%;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  border-radius: var(--radius-md);
  padding: 9px 12px;
  font-size: 13px;
  font-family: var(--font);
  outline: none;
  transition: border-color 0.15s;
  appearance: none;
}
.admin-input:focus { border-color: var(--purple-primary); }
.admin-input::placeholder { color: var(--text-muted); }

/* ============================================
   PACK ODDS RARITY SILHOUETTES (item 6)
   ============================================ */
.odds-silhouette.rarity-nuke {
  border-color: var(--nuke-gold) !important;
  background: linear-gradient(160deg, rgba(75,0,130,0.12) 0%, rgba(10,0,16,0.9) 100%);
  box-shadow: 0 0 14px rgba(75,0,130,0.4);
}
.odds-silhouette.rarity-problem {
  border-color: var(--problem-red) !important;
  background: linear-gradient(160deg, rgba(139,0,0,0.12) 0%, rgba(10,0,16,0.9) 100%);
  box-shadow: 0 0 14px rgba(139,0,0,0.35);
}
.odds-silhouette.rarity-sixth {
  border-color: var(--sixth-cyan) !important;
  background: linear-gradient(160deg, rgba(255,215,0,0.10) 0%, rgba(10,0,16,0.9) 100%);
  box-shadow: 0 0 14px rgba(255,215,0,0.3);
}
.odds-silhouette.rarity-sleeper {
  border-color: var(--sleeper-green) !important;
  background: linear-gradient(160deg, rgba(57,255,20,0.08) 0%, rgba(10,0,16,0.9) 100%);
  box-shadow: 0 0 14px rgba(57,255,20,0.3);
}
.odds-silhouette.rarity-potential {
  border-color: var(--potential-gray) !important;
  background: linear-gradient(160deg, rgba(192,192,192,0.08) 0%, rgba(10,0,16,0.9) 100%);
  box-shadow: none;
}
/* Silhouette figure per rarity */
.odds-silhouette .odds-figure {
  width: 30px;
  height: 48px;
  background: currentColor;
  opacity: 0.18;
  clip-path: polygon(40% 0%, 60% 0%, 70% 20%, 65% 45%, 80% 100%, 20% 100%, 35% 45%, 30% 20%);
}
.odds-silhouette.rarity-nuke .odds-figure    { color: var(--nuke-gold); }
.odds-silhouette.rarity-problem .odds-figure  { color: var(--problem-red); }
.odds-silhouette.rarity-sixth .odds-figure    { color: var(--sixth-cyan); }
.odds-silhouette.rarity-sleeper .odds-figure  { color: var(--sleeper-green); }
.odds-silhouette.rarity-potential .odds-figure { color: var(--potential-gray); }

/* ============================================
   PASS 1 — SKELETON LOADING
   ============================================ */
@keyframes shimmer {
  0%   { background-position: -300px 0; }
  100% { background-position:  300px 0; }
}
.skeleton {
  background: linear-gradient(90deg, var(--bg-elevated) 0px, rgba(255,255,255,0.05) 150px, var(--bg-elevated) 300px);
  background-size: 300px 100%;
  animation: shimmer 1.5s infinite linear;
  border-radius: var(--radius-sm);
}

/* ============================================
   PASS 1 — LOGO IMAGE STYLES
   ============================================ */
.topbar-logo-img {
  height: 26px;
  width: auto;
  mix-blend-mode: screen;
  display: block;
}
.pack-logo-img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  mix-blend-mode: screen;
  z-index: 1;
  position: relative;
}
.pack-hero-logo-img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  mix-blend-mode: screen;
  z-index: 1;
  position: relative;
}
.opening-logo-img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  mix-blend-mode: screen;
  z-index: 1;
  position: relative;
}

/* ============================================
   PASS 1 — PERIOD TOGGLE BUTTONS
   ============================================ */
.period-toggles {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.period-toggle-btn,
.player-prop-tab {
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  background: transparent;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  letter-spacing: 0.5px;
  white-space: nowrap;
  flex-shrink: 0;
  user-select: none;
}
.period-toggle-btn:hover,
.player-prop-tab:hover { color: var(--text-secondary); }
.period-toggle-btn.active,
.player-prop-tab.active {
  background: var(--purple-subtle);
  border-color: var(--purple-primary);
  color: var(--purple-light);
}

/* ============================================
   PASS 1 — DETAIL PANEL NAV ARROWS
   ============================================ */
.detail-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.detail-nav-btn {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  line-height: 1;
}
.detail-nav-btn:hover { color: var(--text-primary); border-color: var(--purple-primary); }
.detail-nav-pos {
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 600;
  min-width: 28px;
  text-align: center;
}

/* ============================================
   PASS 1 — INFO STRIP SPACING FIX (justify)
   ============================================ */
.info-strip {
  justify-content: space-between;
}

/* ============================================
   PASS 1 — ML / TOTALS DETAIL VARIANTS
   ============================================ */
.ml-team-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 8px;
}
.ml-team-cell {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 12px;
}
.ml-team-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.ml-team-record {
  font-size: 18px;
  font-weight: 800;
  color: var(--purple-light);
  margin-bottom: 2px;
}
.ml-team-rank {
  font-size: 10px;
  color: var(--text-muted);
}

/* ============================================
   PASS 2 — FULL-PAGE OVERLAYS
   ============================================ */
.fullpage-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: var(--bg-primary);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}
.fullpage-overlay.show { transform: translateX(0); }
.fullpage-panel { display: flex; flex-direction: column; height: 100%; }
.fullpage-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-secondary);
  flex-shrink: 0;
}
.fullpage-title { font-size: 14px; font-weight: 700; letter-spacing: 0.04em; color: var(--text-primary); }
.fullpage-body { flex: 1; overflow-y: auto; padding: 16px; -webkit-overflow-scrolling: touch; }

/* ============================================
   PASS 2 — ONBOARDING
   ============================================ */
.onboarding-overlay {
  position: fixed; inset: 0; z-index: 400;
  background: var(--bg-primary);
  display: flex; align-items: center; justify-content: center;
}
.onboarding-overlay.hidden { display: none; }
.onboarding-panel {
  width: 100%; max-width: 420px;
  padding: 40px 28px 32px;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  position: relative;
}
.onboarding-screen { display: none; width: 100%; flex-direction: column; align-items: center; }
.onboarding-screen.active { display: flex; }
.ob-logo-wrap { margin-bottom: 24px; }
.ob-logo { height: 52px; width: auto; mix-blend-mode: screen; }
.ob-icon { font-size: 52px; margin-bottom: 20px; }
.ob-title { font-size: 22px; font-weight: 800; color: var(--text-primary); margin-bottom: 12px; line-height: 1.2; }
.ob-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.7; margin-bottom: 28px; }
.ob-btn { width: 100%; margin-bottom: 10px; }
.ob-skip { width: 100%; font-size: 12px; color: var(--text-muted); }
.ob-steps { display: flex; flex-direction: column; gap: 14px; margin-bottom: 28px; text-align: left; width: 100%; }
.ob-step { display: flex; gap: 12px; align-items: flex-start; font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.ob-step strong { color: var(--text-primary); }
.ob-step-num { width: 24px; height: 24px; border-radius: 50%; background: var(--purple-subtle); color: var(--purple-light); font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
.ob-rarities { display: flex; flex-direction: column; gap: 8px; margin-bottom: 28px; width: 100%; }
.ob-rarity { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-radius: var(--radius-md); border: 1px solid var(--border-subtle); font-size: 13px; font-weight: 600; }
.ob-rarity span { font-size: 11px; font-weight: 400; }
.ob-rarity.potential { color: var(--potential-gray); border-color: var(--potential-gray); }
.ob-rarity.sleeper   { color: var(--sleeper-green); border-color: var(--sleeper-green); }
.ob-rarity.sixth     { color: var(--sixth-cyan); border-color: var(--sixth-cyan); }
.ob-rarity.problem   { color: var(--problem-red); border-color: var(--problem-red); }
.ob-rarity.nuke      { color: var(--nuke-gold); border-color: var(--nuke-gold); }
.ob-dots { display: flex; gap: 8px; margin-top: 28px; }
.ob-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border-subtle); transition: background 0.2s; }
.ob-dot.active { background: var(--purple-light); }

/* ============================================
   PASS 2 — PROFILE OVERVIEW
   ============================================ */
.profile-ov-banner {
  height: 80px;
  background: linear-gradient(135deg, #1a0a3a 0%, #2d1060 50%, #1a0a3a 100%);
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 0;
}
.profile-ov-avatar-ring {
  position: relative;
  bottom: -36px;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--bg-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.profile-ov-avatar { width: 68px; height: 68px; border-radius: 50%; background: var(--purple-subtle); border: 2px solid var(--purple-primary); display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 800; color: var(--purple-light); }
.profile-ov-name { font-size: 17px; font-weight: 800; color: var(--text-primary); text-align: center; margin-bottom: 2px; }
.profile-ov-title-badge { display: inline-block; background: var(--purple-subtle); color: var(--purple-light); border: 1px solid var(--purple-primary); border-radius: 20px; font-size: 10px; font-weight: 700; padding: 2px 10px; letter-spacing: 0.05em; margin-bottom: 2px; }
.profile-ov-archetype { font-size: 11px; font-weight: 600; color: var(--purple-light); text-align: center; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 20px; }
.profile-ov-path-section { background: var(--bg-elevated); border-radius: var(--radius-md); padding: 14px; margin-bottom: 12px; }
.profile-ov-path-label { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; color: var(--text-muted); text-transform: uppercase; margin-bottom: 4px; }
.profile-ov-path-name { font-size: 15px; font-weight: 700; color: var(--text-primary); margin-bottom: 2px; }
.profile-ov-path-level { font-size: 11px; color: var(--purple-light); margin-bottom: 8px; }
.profile-ov-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 16px 0; }
.profile-ov-stat { background: var(--bg-elevated); border-radius: var(--radius-md); padding: 12px 8px; text-align: center; }
.profile-ov-stat-val { font-size: 20px; font-weight: 800; color: var(--text-primary); }
.profile-ov-stat-label { font-size: 10px; color: var(--text-muted); margin-top: 2px; }
.profile-ov-streak { display: flex; align-items: center; gap: 10px; background: var(--bg-elevated); border-radius: var(--radius-md); padding: 12px 14px; margin-bottom: 12px; }
.profile-ov-streak-num { font-size: 32px; font-weight: 900; color: var(--purple-light); }
.profile-ov-shield { background: rgba(124,58,237,0.2); border: 1px solid var(--purple-primary); border-radius: 6px; padding: 2px 8px; font-size: 10px; font-weight: 700; color: var(--purple-light); margin-top: 4px; display: inline-block; }
.profile-ov-activity { margin-top: 8px; }
.profile-ov-activity-item { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border-subtle); }
.profile-ov-activity-item:last-child { border-bottom: none; }

/* ============================================
   PASS 2 — COLLECTIONS
   ============================================ */
.collections-filter-bar { padding: 10px 16px 0; flex-shrink: 0; }
.collections-search-wrap { margin-bottom: 8px; }
.collections-search-wrap input { width: 100%; background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: 8px; padding: 9px 12px; color: var(--text-primary); font-size: 13px; outline: none; }
.collections-chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; }
.collections-chips::-webkit-scrollbar { display: none; }
.collection-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--bg-elevated); border-radius: var(--radius-md); margin-bottom: 10px; border: 1px solid var(--border-subtle); position: relative; }
.collection-card.nuke     { border-color: var(--nuke-gold); box-shadow: 0 0 8px rgba(75,0,130,0.3); }
.collection-card.problem  { border-color: var(--problem-red); box-shadow: 0 0 8px rgba(139,0,0,0.35); }
.collection-card.sixth    { border-color: var(--sixth-cyan); box-shadow: 0 0 8px rgba(255,215,0,0.25); }
.collection-card.sleeper  { border-color: var(--sleeper-green); box-shadow: 0 0 8px rgba(57,255,20,0.25); }
.collection-card.potential { border-color: var(--potential-gray); }
.collection-card-figure { width: 44px; height: 56px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0; }
.collection-card-info { flex: 1; min-width: 0; }
.collection-card-player { font-size: 14px; font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.collection-card-stat { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.collection-card-meta { display: flex; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.collection-card-serial { font-size: 10px; color: var(--text-muted); }
.collection-card-date { font-size: 10px; color: var(--text-muted); }
.collection-card-status { font-size: 10px; font-weight: 700; }
.collection-card-status.hit  { color: var(--green-hit); }
.collection-card-status.miss { color: var(--red-miss); }
.collection-card-status.pending { color: var(--text-muted); }
.collection-share-btn { position: absolute; top: 10px; right: 10px; background: var(--bg-hover); border: 1px solid var(--border-subtle); border-radius: 6px; padding: 5px 8px; font-size: 11px; color: var(--text-secondary); cursor: pointer; }
.collection-share-btn:hover { color: var(--purple-light); border-color: var(--border-purple); }
.origins-badge { font-size: 9px; font-weight: 700; color: #f59e0b; background: rgba(245,158,11,0.12); border: 1px solid rgba(245,158,11,0.35); border-radius: 4px; padding: 1px 5px; letter-spacing: 0.04em; }
.sport-tag { font-size: 9px; font-weight: 700; color: var(--text-muted); background: var(--bg-hover); border-radius: 3px; padding: 1px 4px; margin-left: 4px; vertical-align: middle; }
.collection-empty { display: flex; flex-direction: column; align-items: center; padding: 48px 24px; text-align: center; }
.collection-empty img { height: 52px; width: auto; mix-blend-mode: screen; margin-bottom: 20px; opacity: 0.6; }
.collection-empty-title { font-size: 15px; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; }
.collection-empty-desc { font-size: 12px; color: var(--text-muted); line-height: 1.6; }

/* ============================================
   PASS 2 — SETTINGS
   ============================================ */
.settings-section { background: var(--bg-elevated); border-radius: var(--radius-md); padding: 16px; margin-bottom: 14px; }
.settings-section-title { font-size: 11px; font-weight: 700; color: var(--text-muted); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 12px; }
.settings-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border-subtle); }
.settings-row:last-child { border-bottom: none; }
.settings-label { font-size: 13px; color: var(--text-primary); }
.settings-value { font-size: 12px; color: var(--text-muted); }
.settings-sublabel { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.settings-toggle-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border-subtle); }
.settings-toggle-row:last-child { border-bottom: none; }
.settings-link-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border-subtle); cursor: pointer; font-size: 13px; color: var(--text-primary); text-decoration: none; }
.settings-link-row:last-child { border-bottom: none; }
.settings-link-row:hover { color: var(--purple-light); }
/* Toggle switch */
.toggle-switch { position: relative; width: 44px; height: 24px; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider { position: absolute; cursor: pointer; inset: 0; background: var(--bg-hover); border-radius: 12px; transition: 0.2s; border: 1px solid var(--border-subtle); }
.toggle-slider::before { content: ''; position: absolute; width: 18px; height: 18px; border-radius: 50%; background: var(--text-muted); top: 2px; left: 2px; transition: 0.2s; }
.toggle-switch input:checked + .toggle-slider { background: var(--purple-primary); border-color: var(--purple-primary); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(20px); background: #fff; }

/* ============================================
   PASS 2 — LOCK SHEET
   ============================================ */
.lock-sheet-overlay {
  position: fixed; inset: 0; z-index: 350;
  background: rgba(0,0,0,0.6);
  display: flex; align-items: flex-end;
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s;
}
.lock-sheet-overlay.show { opacity: 1; pointer-events: all; }
.lock-sheet {
  width: 100%; max-width: 480px; margin: 0 auto;
  background: var(--bg-elevated);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding: 24px 20px 32px;
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.lock-sheet-overlay.show .lock-sheet { transform: translateY(0); }
.lock-sheet-title { font-size: 16px; font-weight: 800; color: var(--text-primary); text-align: center; margin-bottom: 6px; letter-spacing: 0.04em; }
.lock-sheet-prop { font-size: 14px; font-weight: 700; color: var(--text-primary); text-align: center; margin-bottom: 4px; }
.lock-sheet-line { font-size: 12px; color: var(--text-muted); text-align: center; margin-bottom: 20px; }
.lock-sheet-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 8px; }
.lock-btn-over  { padding: 14px; border-radius: var(--radius-md); background: rgba(34,197,94,0.12); border: 2px solid var(--green-hit); color: var(--green-hit); font-size: 14px; font-weight: 800; letter-spacing: 0.08em; cursor: pointer; transition: background 0.15s; }
.lock-btn-over:hover  { background: rgba(34,197,94,0.25); }
.lock-btn-under { padding: 14px; border-radius: var(--radius-md); background: rgba(239,68,68,0.12); border: 2px solid var(--red-miss); color: var(--red-miss); font-size: 14px; font-weight: 800; letter-spacing: 0.08em; cursor: pointer; transition: background 0.15s; }
.lock-btn-under:hover { background: rgba(239,68,68,0.25); }

/* ============================================
   PASS 2 — LOCK FLASH ANIMATION
   ============================================ */
.lock-flash-overlay {
  position: fixed; inset: 0; z-index: 360;
  background: rgba(124,58,237,0.15);
  pointer-events: none; opacity: 0;
}
@keyframes lockFlash {
  0%   { opacity: 0; }
  30%  { opacity: 1; }
  100% { opacity: 0; }
}
.lock-flash-overlay.flash { animation: lockFlash 0.6s ease-out forwards; }

/* ============================================
   PASS 2 — SETTLEMENT ANIMATIONS
   ============================================ */
.settle-overlay {
  position: fixed; inset: 0; z-index: 370;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; opacity: 0;
}
.settle-overlay.show { opacity: 1; }
.settle-inner { text-align: center; }
@keyframes settleHit {
  0%   { opacity: 0; transform: scale(0.5); }
  40%  { opacity: 1; transform: scale(1.2); }
  70%  { transform: scale(0.95); }
  100% { opacity: 0; transform: scale(1); }
}
@keyframes settleMiss {
  0%   { opacity: 0; transform: scale(1); }
  20%  { opacity: 1; }
  80%  { opacity: 0.6; }
  100% { opacity: 0; transform: scale(0.8); }
}
.settle-overlay.hit  .settle-inner { animation: settleHit  0.9s ease-out forwards; }
.settle-overlay.miss .settle-inner { animation: settleMiss 0.9s ease-out forwards; }
.settle-hit-text  { font-size: 52px; font-weight: 900; color: var(--green-hit); text-shadow: 0 0 40px var(--green-glow); }
.settle-miss-text { font-size: 48px; font-weight: 900; color: var(--red-miss); text-shadow: 0 0 30px var(--red-glow); }

/* ============================================
   PASS 2 — SHARE SHEET
   ============================================ */
.share-sheet-overlay {
  position: fixed; inset: 0; z-index: 380;
  background: rgba(0,0,0,0.6);
  display: flex; align-items: flex-end;
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s;
}
.share-sheet-overlay.show { opacity: 1; pointer-events: all; }
.share-sheet {
  width: 100%; max-width: 480px; margin: 0 auto;
  background: var(--bg-elevated);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding: 24px 20px 32px;
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.share-sheet-overlay.show .share-sheet { transform: translateY(0); }
.share-sheet-title { font-size: 15px; font-weight: 700; text-align: center; margin-bottom: 16px; }
.share-card-preview { background: var(--bg-card); border-radius: var(--radius-md); padding: 20px; margin-bottom: 16px; text-align: center; min-height: 100px; }
.share-toggle-row { display: flex; justify-content: center; margin-bottom: 16px; }

/* ============================================
   PASS 2 — LOCK BUTTON ON PROP ROWS
   ============================================ */
.prop-row-lock-btn {
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  color: var(--purple-light);
  font-size: 10px;
  font-weight: 700;
  padding: 4px 8px;
  cursor: pointer;
  letter-spacing: 0.05em;
  flex-shrink: 0;
  transition: border-color 0.15s, background 0.15s;
}
.prop-row-lock-btn:hover { border-color: var(--purple-primary); background: var(--purple-subtle); }

/* ============================================
   PASS 2 — BORDER variable alias
   ============================================ */
:root { --border: var(--border-subtle); }

/* ============================================
   PASS 3 — FEED PAGE
   ============================================ */
.feed-post-card { padding: 14px; }
.feed-post-header { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.feed-post-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--purple-subtle); color: var(--purple-light);
  font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.feed-post-author { font-size: 13px; font-weight: 700; color: var(--text-primary); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.feed-author-title { font-size: 9px; font-weight: 700; color: var(--purple-light); background: var(--purple-subtle); border: 1px solid var(--purple-primary); border-radius: 10px; padding: 1px 7px; letter-spacing: 0.03em; }
.feed-post-type { font-size: 10px; color: var(--text-muted); margin-top: 1px; }
.feed-post-time { font-size: 10px; color: var(--text-muted); white-space: nowrap; }
.feed-post-body { font-size: 13px; color: var(--text-secondary); line-height: 1.6; margin-bottom: 12px; }
.feed-reactions-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.feed-reaction-btn {
  display: flex; align-items: center; gap: 4px;
  background: var(--bg-elevated); border: 1px solid var(--border-subtle);
  border-radius: 20px; padding: 4px 10px; font-size: 12px; cursor: pointer;
  color: var(--text-secondary); transition: background 0.15s;
}
.feed-reaction-btn:hover { background: var(--purple-subtle); border-color: var(--purple-light); }
.feed-reaction-btn span { font-size: 11px; }
.feed-comments-section { padding-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.feed-comment { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; padding: 8px; background: var(--bg-base); border-radius: 6px; }
.feed-comment-author { font-weight: 700; color: var(--text-primary); }
.feed-comment-text { color: var(--text-secondary); flex: 1; }
.feed-comment-time { color: var(--text-muted); font-size: 10px; white-space: nowrap; }
.feed-comment-input { outline: none; }

/* ============================================
   FEED V1 — Full Feed Tab
   ============================================ */

/* Subtabs */
.feed-subtabs {
  display: flex; overflow-x: auto; gap: 2px;
  background: var(--bg-secondary); border-bottom: 1px solid var(--border-subtle);
  padding: 0; margin: 0 -16px; padding: 0 16px;
  scrollbar-width: none;
}
.feed-subtabs::-webkit-scrollbar { display: none; }
.feed-subtab {
  flex-shrink: 0; padding: 10px 14px; font-size: 11px; font-weight: 700;
  letter-spacing: 0.05em; color: var(--text-muted);
  background: transparent; border: none; border-bottom: 2px solid transparent;
  cursor: pointer; white-space: nowrap; position: relative; transition: color 0.15s;
}
.feed-subtab.active { color: var(--purple-light); border-bottom-color: var(--purple-primary); }
.feed-notif-badge {
  display: inline-flex; align-items: center; justify-content: center;
  background: #ef4444; color: #fff; font-size: 9px; font-weight: 700;
  border-radius: 10px; padding: 1px 5px; margin-left: 4px; min-width: 16px; height: 16px;
}

/* Nav notification badge */
.nav-notif-badge {
  position: absolute; top: -2px; right: -4px;
  background: #ef4444; color: #fff; font-size: 8px; font-weight: 700;
  border-radius: 10px; padding: 1px 4px; min-width: 14px; height: 14px;
  display: flex; align-items: center; justify-content: center;
}

/* Feed list */
.feed-list { display: flex; flex-direction: column; gap: 10px; padding: 12px 0 80px; }
.feed-loading { text-align: center; padding: 40px; color: var(--text-muted); font-size: 12px; }
.feed-empty-state { text-align: center; padding: 60px 20px; color: var(--text-secondary); font-size: 13px; }

/* Post card enhancements */
.feed-post-card { padding: 14px; }
.feed-post-meta { font-size: 10px; color: var(--text-muted); margin-top: 1px; }
.feed-type-tag { font-size: 10px; }

/* Action buttons row */
.feed-actions-row {
  display: flex; gap: 4px; padding-top: 10px;
  border-top: 1px solid var(--border-subtle); margin-top: 10px;
}
.feed-action-btn {
  display: flex; align-items: center; gap: 5px;
  background: transparent; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 12px; padding: 5px 10px;
  border-radius: 6px; transition: color 0.15s, background 0.15s; flex: 1; justify-content: center;
}
.feed-action-btn:hover { background: var(--bg-elevated); color: var(--text-secondary); }
.feed-action-btn--active { color: #ef4444 !important; }
.feed-action-btn--saved { color: var(--purple-light) !important; }

/* Comments */
.feed-comments-section { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.feed-comment { display: flex; gap: 8px; align-items: flex-start; padding: 8px; background: var(--bg-elevated); border-radius: 8px; }
.feed-comment-avatar {
  width: 24px; height: 24px; border-radius: 50%; background: var(--bg-hover);
  color: var(--text-muted); font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.feed-comment-author { font-size: 11px; font-weight: 700; color: var(--text-primary); }
.feed-comment-text { font-size: 12px; color: var(--text-secondary); }
.feed-comment-time { font-size: 10px; color: var(--text-muted); white-space: nowrap; }
.feed-comment--reply { margin-left: 30px; margin-top: 4px; background: var(--bg-base); }
.feed-comment-reply-btn { background: none; border: none; color: var(--text-muted); font-size: 10px; font-family: var(--font); cursor: pointer; padding: 2px 0; margin-top: 2px; }
.feed-comment-reply-btn:hover { color: var(--purple-light); }
.feed-comment-reply-input-row { display: flex; gap: 6px; margin-top: 6px; margin-left: 0; }
.feed-comment-reply-input-row input { flex: 1; background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: 8px; color: var(--text-primary); font-size: 11px; padding: 5px 10px; outline: none; font-family: var(--font); }
.tennis-subtab { background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: 16px; color: var(--text-muted); font-size: 11px; font-weight: 600; padding: 4px 12px; cursor: pointer; flex-shrink: 0; }
.tennis-subtab.active { background: var(--purple-primary); border-color: var(--purple-primary); color: #fff; }
.feed-comment-input-row input {
  flex: 1; background: var(--bg-elevated); border: 1px solid var(--border-subtle);
  border-radius: 8px; color: var(--text-primary); font-size: 12px;
  padding: 7px 12px; outline: none; font-family: var(--font);
}

/* Prop card in feed */
.feed-prop-card {
  background: var(--bg-elevated); border-radius: 10px;
  border-left: 4px solid var(--purple-primary); padding: 12px 14px;
  margin: 8px 0; cursor: pointer; transition: background 0.15s;
}
.feed-prop-card:hover { background: var(--bg-hover); }
.feed-prop-player { font-size: 15px; font-weight: 800; color: var(--text-primary); margin-bottom: 4px; }
.feed-prop-line { font-size: 13px; color: var(--purple-light); font-weight: 700; margin-bottom: 4px; }
.feed-prop-conf { font-size: 11px; color: var(--text-muted); }
.feed-prop-conf strong { color: var(--purple-light); }
.feed-prop-team { font-size: 10px; color: var(--text-muted); margin-top: 2px; }
.feed-prop-caption { font-size: 13px; color: var(--text-secondary); line-height: 1.5; margin-bottom: 6px; }

/* Poll */
.feed-poll-wrap { background: var(--bg-elevated); border-radius: 10px; padding: 12px 14px; margin: 8px 0; }
.feed-poll-question { font-size: 13px; font-weight: 700; color: var(--text-primary); margin-bottom: 10px; }
.feed-poll-options { display: flex; flex-direction: column; gap: 6px; }
.feed-poll-option-btn {
  background: var(--bg-hover); border: 1px solid var(--border-subtle); border-radius: 8px;
  color: var(--text-secondary); font-size: 12px; padding: 8px 14px; cursor: pointer; text-align: left;
  transition: background 0.15s, border-color 0.15s; font-family: var(--font);
}
.feed-poll-option-btn:hover { background: var(--purple-subtle); border-color: var(--purple-primary); color: var(--text-primary); }
.feed-poll-result {
  position: relative; background: var(--bg-hover); border-radius: 8px;
  overflow: hidden; padding: 8px 14px; font-size: 12px;
  display: flex; align-items: center; justify-content: space-between;
}
.feed-poll-result-bar {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--purple-subtle); border-radius: 8px; transition: width 0.4s ease;
}
.feed-poll-result-label { position: relative; color: var(--text-primary); font-size: 12px; font-weight: 600; }
.feed-poll-result-pct { position: relative; font-size: 11px; font-weight: 700; color: var(--purple-light); }
.feed-poll-total { font-size: 10px; color: var(--text-muted); margin-top: 6px; text-align: right; }

/* Trade post */
.feed-trade-card { background: var(--bg-elevated); border-radius: 10px; padding: 12px 14px; margin: 8px 0; }
.feed-trade-items { display: flex; gap: 8px; margin-bottom: 10px; }
.feed-trade-item {
  flex: 1; padding: 8px 12px; border-radius: 8px; font-size: 12px;
  display: flex; flex-direction: column; gap: 2px;
}
.feed-trade-gave { background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.2); }
.feed-trade-got { background: rgba(34,197,94,0.08); border: 1px solid rgba(34,197,94,0.2); }
.feed-trade-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
.feed-trade-votes { display: flex; gap: 8px; }
.feed-trade-vote-btn {
  flex: 1; padding: 8px; border-radius: 8px; font-size: 12px; font-weight: 700;
  cursor: pointer; transition: opacity 0.15s; font-family: var(--font); border: none;
}
.feed-trade-w { background: rgba(34,197,94,0.15); color: var(--green-hit); }
.feed-trade-l { background: rgba(239,68,68,0.15); color: var(--red-miss); }

/* Meme */
.feed-meme-img-wrap { border-radius: 10px; overflow: hidden; margin: 8px 0; }
.feed-meme-img { width: 100%; max-height: 300px; object-fit: cover; display: block; }

/* FAB */
.feed-fab {
  position: fixed; bottom: 72px; right: 20px; z-index: 200;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--purple-primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  border: none; cursor: pointer; box-shadow: 0 4px 20px var(--purple-glow);
  transition: transform 0.15s, box-shadow 0.15s;
}
.feed-fab:hover { transform: scale(1.08); box-shadow: 0 6px 28px var(--purple-glow); }

/* Post creation overlay */
.feed-create-overlay {
  position: fixed; inset: 0; z-index: 600;
  background: rgba(0,0,0,0.75); backdrop-filter: blur(4px);
  display: flex; align-items: flex-end; justify-content: center;
}
.feed-create-panel {
  background: var(--bg-secondary); border-radius: 20px 20px 0 0;
  padding: 20px 16px 32px; width: 100%; max-width: 480px;
  max-height: 85vh; overflow-y: auto;
}
.feed-create-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.feed-create-title { font-size: 15px; font-weight: 800; color: var(--text-primary); }
.feed-type-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.feed-type-btn {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 16px 12px; background: var(--bg-elevated);
  border: 1px solid var(--border-subtle); border-radius: 12px;
  cursor: pointer; color: var(--text-secondary); font-size: 12px; font-weight: 600;
  transition: background 0.15s, border-color 0.15s; font-family: var(--font);
}
.feed-type-btn:hover { background: var(--purple-subtle); border-color: var(--purple-primary); color: var(--text-primary); }
.feed-textarea {
  width: 100%; background: var(--bg-elevated);
  border: 1px solid var(--border-subtle); border-radius: 10px;
  color: var(--text-primary); font-size: 13px; padding: 12px;
  resize: none; height: 100px; font-family: var(--font); outline: none;
  box-sizing: border-box; line-height: 1.5;
}
.feed-textarea:focus { border-color: var(--purple-primary); }
.feed-char-count { font-size: 10px; color: var(--text-muted); text-align: right; margin-top: 4px; }
.feed-form-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
.feed-upload-area {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 2px dashed var(--border-subtle); border-radius: 12px;
  padding: 32px; cursor: pointer; margin-bottom: 10px;
  transition: border-color 0.15s;
}
.feed-upload-area:hover { border-color: var(--purple-primary); }
.feed-search-input {
  width: 100%; background: var(--bg-elevated); border: 1px solid var(--border-subtle);
  border-radius: 10px; color: var(--text-primary); font-size: 13px;
  padding: 10px 14px; outline: none; font-family: var(--font); box-sizing: border-box;
}
.feed-search-input:focus { border-color: var(--purple-primary); }
.feed-prop-search-wrap { position: relative; margin-bottom: 4px; }
.feed-prop-results {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 50;
  background: var(--bg-elevated); border: 1px solid var(--border-subtle);
  border-radius: 10px; overflow: hidden; max-height: 200px; overflow-y: auto;
}
.feed-prop-result-item {
  padding: 9px 14px; font-size: 12px; color: var(--text-secondary);
  cursor: pointer; border-bottom: 1px solid var(--border-subtle);
  display: flex; flex-direction: column; gap: 2px;
}
.feed-prop-result-item:last-child { border-bottom: none; }
.feed-prop-result-item:hover { background: var(--bg-hover); }
.feed-poll-option {
  width: 100%; background: var(--bg-elevated); border: 1px solid var(--border-subtle);
  border-radius: 8px; color: var(--text-primary); font-size: 13px;
  padding: 9px 12px; outline: none; font-family: var(--font);
  box-sizing: border-box; margin-bottom: 6px;
}
.feed-poll-option:focus { border-color: var(--purple-primary); }

/* Prop search result internals */
.feed-prop-result-name { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.feed-prop-result-meta { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.feed-sport-tag {
  display: inline-block; font-size: 9px; font-weight: 700; letter-spacing: 0.06em;
  background: var(--purple-subtle); color: var(--purple-light);
  border: 1px solid var(--border-purple); border-radius: 4px;
  padding: 1px 5px; margin-left: 6px; vertical-align: middle;
}

/* Selected prop card in creation overlay */
.feed-prop-card--selected {
  border: 1px solid var(--purple-primary) !important;
  border-left: 4px solid var(--purple-primary) !important;
  background: var(--purple-subtle);
}

/* Post card hover on desktop */
@media (hover: hover) {
  .feed-post-card:hover { background: var(--bg-elevated) !important; }
}

/* Avatar color variants by initial */
.feed-avatar-a, .feed-avatar-b { background: rgba(124,58,237,0.22); color: #a78bfa; }
.feed-avatar-c, .feed-avatar-d { background: rgba(6,182,212,0.18); color: #22d3ee; }
.feed-avatar-e, .feed-avatar-f { background: rgba(34,197,94,0.15); color: #4ade80; }
.feed-avatar-g, .feed-avatar-h { background: rgba(245,158,11,0.15); color: #fbbf24; }
.feed-avatar-i, .feed-avatar-j { background: rgba(239,68,68,0.15); color: #f87171; }
.feed-avatar-k, .feed-avatar-l { background: rgba(16,185,129,0.15); color: #34d399; }
.feed-avatar-m, .feed-avatar-n { background: rgba(168,85,247,0.18); color: #c084fc; }
.feed-avatar-o, .feed-avatar-p { background: rgba(59,130,246,0.18); color: #60a5fa; }
.feed-avatar-q, .feed-avatar-r { background: rgba(251,146,60,0.15); color: #fb923c; }
.feed-avatar-s, .feed-avatar-t { background: rgba(124,58,237,0.18); color: #a78bfa; }
.feed-avatar-u, .feed-avatar-v { background: rgba(6,182,212,0.15); color: #22d3ee; }
.feed-avatar-w, .feed-avatar-x, .feed-avatar-y, .feed-avatar-z { background: rgba(34,197,94,0.12); color: #4ade80; }

/* Mobile responsive feed */
@media (max-width: 480px) {
  .feed-create-panel {
    border-radius: 0; max-width: 100%; min-height: 100vh;
    padding: 16px 12px env(safe-area-inset-bottom, 24px);
  }
  .feed-create-overlay { align-items: stretch; }
  .feed-fab { right: 20px; bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
  .feed-actions-row .feed-action-btn { padding: 5px 6px; font-size: 11px; }
  .feed-trade-items { flex-direction: column; }
}

/* Notifications */
.feed-notif-item {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 14px; background: var(--bg-card);
  border-radius: 10px; cursor: pointer; border-left: 3px solid transparent;
  transition: background 0.15s;
}
.feed-notif-item:hover { background: var(--bg-elevated); }
.feed-notif-unread { border-left-color: var(--purple-primary); background: var(--bg-elevated); }
.feed-notif-icon { font-size: 18px; flex-shrink: 0; }
.feed-notif-body { flex: 1; min-width: 0; }
.feed-notif-content { font-size: 13px; color: var(--text-secondary); line-height: 1.4; }
.feed-notif-time { font-size: 10px; color: var(--text-muted); margin-top: 2px; }
.notif-subtabs::-webkit-scrollbar { display: none; }
.notif-subtab {
  flex-shrink: 0; padding: 5px 10px; font-size: 11px; font-weight: 600;
  border-radius: 20px; border: 1px solid var(--border-subtle);
  background: none; color: var(--text-muted); cursor: pointer; white-space: nowrap;
  transition: all 0.15s;
}
.notif-subtab.active { background: var(--purple-primary); border-color: var(--purple-primary); color: #fff; }
.notif-subtab:hover:not(.active) { border-color: var(--purple-light); color: var(--purple-light); }

/* ============================================
   PASS 4 — PROGRESSION PAGE
   ============================================ */
.prog-path-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 14px;
  margin: 0 0 10px 0;
}
.prog-path-card.prog-equipped {
  border-color: var(--purple-primary);
  box-shadow: 0 0 0 1px var(--purple-primary), 0 0 12px rgba(108,63,255,0.15);
}
.prog-path-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
.prog-path-name { font-size: 13px; font-weight: 700; color: var(--text-primary); margin-bottom: 2px; }
.prog-path-title { font-size: 11px; color: var(--purple-light); font-weight: 600; }
.prog-path-level { font-size: 18px; font-weight: 900; color: var(--purple-light); }
.prog-levels-row { display: flex; gap: 4px; margin-bottom: 8px; }
.prog-pip { flex: 1; height: 6px; border-radius: 3px; background: var(--border-subtle); transition: background 0.2s; }
.prog-pip.filled { background: var(--purple-primary); }
.prog-bar-wrap { height: 4px; background: var(--border-subtle); border-radius: 2px; margin-bottom: 6px; overflow: hidden; }
.prog-bar-fill { height: 100%; background: linear-gradient(90deg, var(--purple-primary), var(--purple-light)); border-radius: 2px; transition: width 0.4s; }
.prog-meta { font-size: 11px; color: var(--text-muted); }
.prog-select {
  width: 100%; background: var(--bg-elevated); border: 1px solid var(--border);
  color: var(--text-primary); border-radius: var(--radius-sm); padding: 8px 10px;
  font-size: 12px; outline: none;
}

/* ============================================
   PASS 3 — PROFILE WALL TABS
   ============================================ */
.profile-ov-tab {
  flex: 1; padding: 10px; background: transparent; border: none;
  color: var(--text-muted); font-size: 13px; font-weight: 600;
  cursor: pointer; border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.profile-ov-tab.active { color: var(--purple-light); border-bottom-color: var(--purple-light); }

/* ML W/L boxes */
.ml-wl-box {
  width: 28px; height: 28px; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; letter-spacing: 0;
}
.ml-wl-box.win  { background: var(--green-hit);  color: #fff; }
.ml-wl-box.loss { background: var(--red-miss);   color: #fff; }

/* ============================================
   PASS 5 — CHIPS SYSTEM
   ============================================ */
.chips-display {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(124, 58, 237, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 20px;
  padding: 4px 10px 4px 6px;
  cursor: pointer;
  transition: all 0.2s;
}
.chips-display:hover { background: rgba(124, 58, 237, 0.25); }
.chips-icon {
  width: 16px; height: 16px;
}
.chips-count {
  font-size: 12px; font-weight: 700;
  color: #f59e0b;
  font-family: var(--font);
}

/* Chips Shop */
.chips-tier-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.chips-tier-card {
  background: linear-gradient(135deg, #b8860b 0%, #ffd700 100%);
  border: 1px solid #ffd700;
  border-radius: var(--radius-md);
  padding: 14px 12px;
  text-align: center;
  cursor: pointer;
  transition: all 0.18s ease;
  box-shadow: 0 4px 12px rgba(255,215,0,0.3);
  font-weight: 700;
}
.chips-tier-card:hover { transform: scale(1.03); box-shadow: 0 6px 20px rgba(255,215,0,0.45); filter: brightness(1.08); }
.chips-tier-card:active { transform: scale(0.98); }
.chips-tier-card.featured { border-color: #fff7aa; box-shadow: 0 4px 18px rgba(255,215,0,0.5); }
.chips-tier-amount { font-size: 18px; font-weight: 800; color: #1a1000; margin-bottom: 2px; }
.chips-tier-bonus { font-size: 10px; color: #1a1000; font-weight: 700; margin-bottom: 6px; opacity: 0.8; }
.chips-tier-price { font-size: 14px; font-weight: 700; color: #1a1000; }

/* Bundles */
.chips-bundle-row {
  background: linear-gradient(135deg, #b8860b 0%, #ffd700 100%);
  border: 1px solid #ffd700;
  border-radius: var(--radius-md);
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all 0.18s ease;
  box-shadow: 0 4px 12px rgba(255,215,0,0.3);
}
.chips-bundle-row:hover { transform: scale(1.02); box-shadow: 0 6px 18px rgba(255,215,0,0.45); filter: brightness(1.08); }
.chips-bundle-row:active { transform: scale(0.99); }
.chips-bundle-info .bundle-name { font-size: 14px; font-weight: 800; color: #1a1a1a; }
.chips-bundle-info .bundle-desc { font-size: 11px; color: rgba(26,26,26,0.75); margin-top: 2px; font-weight: 600; }
.chips-bundle-cost { display: flex; align-items: center; gap: 5px; }
.chips-bundle-cost .cost-num { font-size: 13px; font-weight: 800; color: #1a1a1a; }

.shop-purchase-btn {
  cursor: pointer;
  background: linear-gradient(135deg, #b8860b, #ffd700);
  border: 1px solid #ffd700;
  border-radius: 10px;
  padding: 12px 20px;
  font-weight: 800;
  color: #1a1a1a;
  text-shadow: none;
  box-shadow: 0 4px 12px rgba(255,215,0,0.3);
  transition: all 0.2s ease;
}
.shop-purchase-btn:hover { transform: scale(1.03); box-shadow: 0 6px 20px rgba(255,215,0,0.5); }

/* Chipsearn float animation */
@keyframes chipsEarnFloat {
  0% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-40px); }
}
.chips-earn-float {
  position: fixed;
  font-size: 13px; font-weight: 800;
  color: #f59e0b;
  pointer-events: none;
  z-index: 9999;
  animation: chipsEarnFloat 1.2s ease-out forwards;
}

/* ============================================
   PASS 5 — PRESTIGE
   ============================================ */
.prestige-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: linear-gradient(135deg, #7c3aed, #f59e0b);
  border-radius: 12px;
  padding: 2px 7px;
  font-size: 9px; font-weight: 800;
  color: #fff;
  letter-spacing: 0.05em;
}
.prestige-full-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: radial-gradient(ellipse at center, rgba(124,58,237,0.9) 0%, rgba(0,0,0,0.95) 100%);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  animation: prestigeFull 0.5s ease-out;
}
@keyframes prestigeFull {
  0% { opacity: 0; transform: scale(0.8); }
  60% { opacity: 1; transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}
.prestige-full-title {
  font-size: 48px; font-weight: 900;
  background: linear-gradient(135deg, #a78bfa, #f59e0b);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  margin-bottom: 12px;
}
.prestige-full-level { font-size: 20px; color: #f59e0b; font-weight: 700; margin-bottom: 24px; }
.prestige-full-sub { font-size: 14px; color: rgba(255,255,255,0.7); margin-bottom: 40px; }

/* ============================================
   PASS 5 — PATH TITLES (colored glowing)
   ============================================ */
.path-title-badge {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.04em;
  display: block;
  margin-top: 1px;
}
.path-title-badge.path-PRECISION  { color: #F59E0B; text-shadow: 0 0 8px rgba(245,158,11,0.5); }
.path-title-badge.path-STREAK     { color: #F97316; text-shadow: 0 0 8px rgba(249,115,22,0.5); }
.path-title-badge.path-NUKE       { color: #EAB308; text-shadow: 0 0 8px rgba(234,179,8,0.5); }
.path-title-badge.path-TRADE      { color: #22C55E; text-shadow: 0 0 8px rgba(34,197,94,0.5); }
.path-title-badge.path-UNDERDOG   { color: #14B8A6; text-shadow: 0 0 8px rgba(20,184,166,0.5); }
.path-title-badge.path-CHALLENGE  { color: #EF4444; text-shadow: 0 0 8px rgba(239,68,68,0.5); }
.path-title-badge.path-COLLECTOR  { color: #A855F7; text-shadow: 0 0 8px rgba(168,85,247,0.5); }
.path-title-badge.path-RESEARCH   { color: #3B82F6; text-shadow: 0 0 8px rgba(59,130,246,0.5); }
.path-title-badge.path-SPECIALIST { color: #06B6D4; text-shadow: 0 0 8px rgba(6,182,212,0.5); }
.path-title-badge.path-default    { color: var(--purple-light); text-shadow: 0 0 6px rgba(124,58,237,0.4); }

/* ============================================
   PASS 5 — WELCOME MISSIONS
   ============================================ */
.welcome-missions-panel {
  background: var(--bg-card);
  border: 1px solid rgba(124,58,237,0.25);
  border-radius: var(--radius-lg);
  padding: 16px;
  margin-bottom: 16px;
}
.welcome-missions-title {
  font-size: 12px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--purple-light);
  margin-bottom: 10px;
}
.welcome-mission-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.welcome-mission-row:last-child { border-bottom: none; }
.welcome-mission-check {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--border-subtle);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; flex-shrink: 0;
}
.welcome-mission-check.done { border-color: var(--green-hit); background: rgba(34,197,94,0.15); color: var(--green-hit); }
.welcome-mission-label { font-size: 12px; color: var(--text-secondary); flex: 1; }
.welcome-mission-chips { font-size: 11px; font-weight: 700; color: #f59e0b; }

/* ============================================
   PASS 5 — PROFILE IDENTITY
   ============================================ */
.profile-avatar-img {
  width: 56px; height: 56px; border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--purple-primary);
}
.social-links-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.social-link-icon {
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary); font-size: 14px;
  text-decoration: none; cursor: pointer;
  transition: all 0.2s;
}
.social-link-icon:hover { border-color: var(--purple-primary); color: var(--purple-light); }

/* ============================================
   PASS 5 — FOLLOW SYSTEM
   ============================================ */
.follow-btn {
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 12px; font-weight: 700;
  border: 1px solid var(--purple-primary);
  background: var(--purple-primary);
  color: #fff; cursor: pointer; transition: all 0.2s;
}
.follow-btn.following {
  background: transparent;
  color: var(--purple-light);
}
.follow-stats-row {
  display: flex; gap: 20px; margin-top: 6px;
}
.follow-stat { text-align: center; }
.follow-stat-num { font-size: 16px; font-weight: 800; color: var(--text-primary); }
.follow-stat-label { font-size: 10px; color: var(--text-muted); }

/* ============================================
   PASS 5 — SEARCH
   ============================================ */
.search-overlay {
  position: fixed; inset: 0; z-index: 800;
  background: var(--bg-primary);
  display: flex; flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.search-overlay.show { transform: translateY(0); }
.search-header {
  display: flex; align-items: center; gap: 10px;
  padding: 16px;
  border-bottom: 1px solid var(--border-subtle);
}
.search-input {
  flex: 1; background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--text-primary); font-size: 14px;
  padding: 10px 14px; outline: none;
  font-family: var(--font);
}
.search-input:focus { border-color: var(--purple-primary); }
.search-tabs { display: flex; padding: 10px 16px 0; gap: 6px; border-bottom: 1px solid var(--border-subtle); }
.search-tab {
  padding: 6px 12px; font-size: 11px; font-weight: 700;
  border-radius: 16px; cursor: pointer; border: none;
  background: transparent; color: var(--text-muted);
  transition: all 0.2s;
}
.search-tab.active { background: var(--purple-subtle); color: var(--purple-light); }
.search-results { flex: 1; overflow-y: auto; padding: 12px 16px; }
.search-result-item {
  padding: 10px 0; border-bottom: 1px solid var(--border-subtle);
  display: flex; align-items: center; gap: 10px;
}
.search-result-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--purple-subtle);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: var(--purple-light);
  flex-shrink: 0;
}
.search-result-name { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.search-result-sub { font-size: 11px; color: var(--text-muted); }
.search-empty { text-align: center; padding: 40px 20px; color: var(--text-muted); font-size: 13px; }

/* ============================================
   PASS 5 — CARD BACK VIEW
   ============================================ */
.card-back-overlay {
  position: fixed; inset: 0; z-index: 850;
  background: var(--bg-primary);
  overflow-y: auto;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.card-back-overlay.show { transform: translateY(0); }
.card-back-header {
  display: flex; align-items: center; gap: 12px;
  padding: 16px; border-bottom: 1px solid var(--border-subtle);
  position: sticky; top: 0; background: var(--bg-primary); z-index: 1;
}
.card-back-content { padding: 16px; }
.card-back-section {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 14px;
  margin-bottom: 12px;
}
.card-back-section-title {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--text-muted);
  margin-bottom: 10px;
}
.card-back-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.card-back-stat { text-align: center; }
.card-back-stat-val { font-size: 18px; font-weight: 800; color: var(--text-primary); }
.card-back-stat-label { font-size: 9px; color: var(--text-muted); text-transform: uppercase; }
.card-back-dvp {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 0; border-bottom: 1px solid var(--border-subtle);
}
.card-back-dvp:last-child { border-bottom: none; }
.card-back-dvp-label { font-size: 12px; color: var(--text-secondary); }
.card-back-dvp-val { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.card-back-dvp-rank { font-size: 10px; color: var(--text-muted); }
.confidence-circle {
  width: 80px; height: 80px; border-radius: 50%;
  border: 3px solid var(--purple-primary);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  margin: 0 auto 8px;
}
.confidence-circle-val { font-size: 22px; font-weight: 900; color: var(--text-primary); }
.confidence-circle-label { font-size: 8px; color: var(--text-muted); }
.why-engine-text {
  font-size: 12px; line-height: 1.8;
  color: var(--text-secondary);
}
.why-engine-text strong { color: var(--text-primary); }
.h2h-bar-mini { display: flex; gap: 3px; align-items: flex-end; height: 40px; margin-bottom: 8px; }
.h2h-bar-mini .bar {
  flex: 1; min-width: 8px;
  border-radius: 2px 2px 0 0;
  transition: height 0.3s;
}
.h2h-bar-mini .bar.over { background: var(--green-hit); }
.h2h-bar-mini .bar.under { background: var(--red-miss); }

/* ============================================
   PASS 5 — TRADE REPUTATION
   ============================================ */
.trade-rep-bar {
  display: flex; align-items: center; gap: 8px;
}
.trade-rep-track {
  flex: 1; height: 4px; background: var(--border-subtle);
  border-radius: 2px; overflow: hidden;
}
.trade-rep-fill { height: 100%; background: var(--green-hit); border-radius: 2px; }
.trade-rep-pct { font-size: 11px; font-weight: 700; color: var(--green-hit); }

/* ============================================
   PASS 5 — ANIMATION SYSTEM
   ============================================ */
@keyframes packOpenPulse {
  0%,100% { transform: scale(1); box-shadow: 0 0 0 rgba(124,58,237,0); }
  50% { transform: scale(1.04); box-shadow: 0 0 30px rgba(124,58,237,0.6); }
}
@keyframes packTear {
  0%,100% { transform: translateX(0); filter: brightness(1); }
  20% { transform: translateX(-4px) rotate(-1deg); filter: brightness(1.3); }
  40% { transform: translateX(4px) rotate(1deg); filter: brightness(1.5); }
  60% { transform: translateX(-3px); filter: brightness(1.2); }
  80% { transform: translateX(2px); filter: brightness(1.1); }
}
@keyframes cardFlip {
  0% { transform: rotateY(0deg); }
  100% { transform: rotateY(180deg); }
}
@keyframes rarityBurst {
  0% { transform: scale(0.8); opacity: 0; }
  60% { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes settlementHit {
  0% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
  50% { box-shadow: 0 0 40px 10px rgba(34,197,94,0.5); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}
@keyframes settlementMiss {
  0%,100% { box-shadow: 0 0 0 rgba(239,68,68,0); }
  50% { box-shadow: 0 0 30px rgba(239,68,68,0.5); }
}
@keyframes lockConfirm {
  0% { transform: scale(1); }
  30% { transform: scale(1.06); box-shadow: 0 0 20px rgba(124,58,237,0.7); }
  100% { transform: scale(1); box-shadow: none; }
}
@keyframes levelUp {
  0% { transform: scale(1); }
  40% { transform: scale(1.12); filter: drop-shadow(0 0 10px #f59e0b); }
  100% { transform: scale(1); }
}
@keyframes challengeComplete {
  0% { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); }
}
@keyframes streakCelebrate {
  0%,100% { filter: brightness(1); }
  50% { filter: brightness(1.4) drop-shadow(0 0 8px #f97316); }
}
@keyframes welcomeComplete {
  0% { transform: scale(0.5); opacity: 0; }
  70% { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); }
}

/* ============================================
   PASS 5 — COMMUNITY GUIDELINES PAGE
   ============================================ */
.community-wrap { max-width: 680px; margin: 0 auto; padding: 32px 20px 80px; }
.community-back { display: inline-flex; align-items: center; gap: 6px; color: var(--purple-light); font-size: 13px; font-weight: 600; margin-bottom: 28px; text-decoration: none; cursor: pointer; }
.allowed-item, .notallowed-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--border-subtle);
  font-size: 13px; line-height: 1.5; color: var(--text-secondary);
}
.allowed-item .mark { color: var(--green-hit); font-weight: 700; flex-shrink: 0; }
.notallowed-item .mark { color: var(--red-miss); font-weight: 700; flex-shrink: 0; }

/* ============================================
   PASS 5 — FEED POLLS
   ============================================ */
.poll-container {
  margin-top: 10px;
  border: 1px solid rgba(124,58,237,0.3);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.poll-question { font-size: 13px; font-weight: 700; color: var(--text-primary); padding: 10px 12px 8px; }
.poll-option {
  position: relative; overflow: hidden;
  padding: 8px 12px; cursor: pointer;
  border-top: 1px solid var(--border-subtle);
  font-size: 12px; color: var(--text-secondary);
  transition: background 0.2s;
  display: flex; align-items: center; justify-content: space-between;
}
.poll-option:hover { background: var(--bg-hover); }
.poll-option-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: rgba(124,58,237,0.15); z-index: 0;
  transition: width 0.4s;
}
.poll-option-label { position: relative; z-index: 1; }
.poll-option-pct { position: relative; z-index: 1; font-size: 11px; font-weight: 700; color: var(--purple-light); }

/* ============================================
   PASS 5 — PLAYER FOLLOW STAR
   ============================================ */
.player-follow-star {
  background: none; border: none; cursor: pointer;
  font-size: 14px; padding: 4px; color: var(--text-muted);
  transition: color 0.2s, transform 0.2s;
}
.player-follow-star.active { color: #f59e0b; }
.player-follow-star:hover { transform: scale(1.2); }

/* ============================================
   PASS 5 — COLLECTION SCORE
   ============================================ */
.collection-score-badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(245,158,11,0.12);
  border: 1px solid rgba(245,158,11,0.3);
  border-radius: 12px; padding: 3px 10px;
  font-size: 11px; font-weight: 700; color: #f59e0b;
}

/* ============================================
   PASS 5 — JERSEY NUMBER CIRCLE
   ============================================ */
.jersey-circle {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800;
  color: #fff; flex-shrink: 0;
}

/* ============================================
   COMPREHENSIVE PASS — INJURY & LINEUP BADGES
   CSS overlay only — never part of generated image
   ============================================ */

/* Questionable badge — amber pulse, top-right */
.badge-questionable {
  position: absolute;
  top: 4px; right: 4px;
  background: #f59e0b;
  color: #000;
  font-size: 9px; font-weight: 800;
  padding: 2px 5px;
  border-radius: 8px;
  z-index: 10;
  animation: badge-pulse 2s infinite;
}

/* Lineup pending badge — gray, top-left */
.badge-lineup-pending {
  position: absolute;
  top: 4px; left: 4px;
  background: #6b7280;
  color: #fff;
  font-size: 8px; font-weight: 700;
  padding: 2px 5px;
  border-radius: 8px;
  z-index: 10;
  white-space: nowrap;
}

/* Out badge — red, top-right */
.badge-out {
  position: absolute;
  top: 4px; right: 4px;
  background: #dc2626;
  color: #fff;
  font-size: 9px; font-weight: 800;
  padding: 2px 6px;
  border-radius: 8px;
  z-index: 10;
}

/* Voided overlay — full card gray, reduced opacity */
.badge-voided {
  position: absolute;
  inset: 0;
  background: rgba(17, 17, 24, 0.82);
  border-radius: inherit;
  display: flex; align-items: center; justify-content: center;
  z-index: 20;
  pointer-events: none;
}
.badge-voided-text {
  color: #6b7280;
  font-size: 14px; font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  border: 2px solid #6b7280;
  padding: 4px 12px;
  border-radius: 6px;
}

@keyframes badge-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* ============================================
   GRAPH BAR DISTRIBUTION — EVENLY FILL WIDTH
   ============================================ */

/* Short views (H2H, L5, L10) — flex evenly, no scroll */
.detail-chart.no-scroll {
  justify-content: space-evenly;
  overflow-x: hidden;
  flex-wrap: nowrap;
}
.detail-chart.no-scroll .detail-bar-wrap {
  flex: 1;
  min-width: 0;
  max-width: 60px;
}

/* Long views (L20, Season) — scroll horizontally */
.detail-chart.scroll-x {
  justify-content: flex-start;
  overflow-x: auto;
}
.detail-chart.scroll-x .detail-bar-wrap {
  min-width: 28px;
  flex-shrink: 0;
}

/* Two-line bar label: opp on first line, date on second */
.detail-bar-opp {
  font-size: 8px;
  color: #e5e7eb;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  max-width: 32px;
  text-align: center;
  line-height: 1.2;
}
.detail-bar-date {
  font-size: 7px;
  color: #d1d5db;
  text-align: center;
  line-height: 1.2;
  max-width: 32px;
}

/* Season → Playoffs / Playoffs → Season separators in the detail chart */
.playoff-sep-marker,
.season-sep-marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 0 3px;
  min-width: 24px;
}
.playoff-sep-marker span {
  font-size: 7px;
  font-weight: 700;
  color: #a78bfa;
  letter-spacing: 0.04em;
  white-space: nowrap;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  border-left: 1.5px solid #a78bfa;
  padding-left: 3px;
  height: 52px;
}
.season-sep-marker span {
  font-size: 7px;
  font-weight: 700;
  color: #60a5fa;
  letter-spacing: 0.04em;
  white-space: nowrap;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  border-left: 1.5px solid #60a5fa;
  padding-left: 3px;
  height: 52px;
}

/* ============================================
   LINEUP STATUS DOTS — RESEARCH TAB
   ============================================ */

.lineup-status-dot {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  margin-bottom: 6px;
}
.lineup-status-dot.projected {
  background: rgba(107,114,128,0.2);
  color: #9ca3af;
}
.lineup-status-dot.confirmed {
  background: rgba(16,185,129,0.15);
  color: #10b981;
}
.lineup-status-dot.questionable {
  background: rgba(245,158,11,0.15);
  color: #f59e0b;
  animation: badge-pulse 2s infinite;
}
.lineup-status-dot.key-out {
  background: rgba(220,38,38,0.15);
  color: #dc2626;
}
.lineup-status-dot::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* ============================================
   GAME STATUS MESSAGES
   ============================================ */

.game-status-msg {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-secondary);
}
.game-status-msg .status-emoji {
  font-size: 32px;
  margin-bottom: 12px;
}
.game-status-msg h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.game-status-msg p {
  font-size: 13px;
  color: var(--text-muted);
  max-width: 280px;
  margin: 0 auto;
}

/* ============================================
   VISUAL DESIGN PASS — KEYFRAME ANIMATIONS
   ============================================ */

@keyframes packOpenPulse {
  0%   { transform: scale(0.8); opacity: 0; filter: brightness(1); }
  50%  { transform: scale(1.05); filter: brightness(1.3); }
  100% { transform: scale(1.0); opacity: 1; filter: brightness(1); }
}

@keyframes packTear {
  0%   { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); opacity: 1; }
  40%  { clip-path: polygon(0 0, 100% 0, 100% 60%, 55% 55%, 45% 65%, 0 60%); opacity: 1; }
  100% { clip-path: polygon(0 0, 100% 0, 100% 0%, 55% 0%, 45% 0%, 0 0%); opacity: 0; }
}

@keyframes cardFlip {
  0%   { transform: perspective(800px) rotateY(90deg) scale(0.85); opacity: 0; }
  50%  { transform: perspective(800px) rotateY(15deg) scale(1.02); opacity: 1; }
  100% { transform: perspective(800px) rotateY(0deg) scale(1); opacity: 1; }
}

@keyframes rarityBurst {
  0%   { transform: scale(0.6); opacity: 0; filter: brightness(2) blur(4px); }
  40%  { transform: scale(1.15); opacity: 1; filter: brightness(1.4) blur(0); }
  70%  { transform: scale(0.97); }
  100% { transform: scale(1); opacity: 1; filter: brightness(1); }
}

@keyframes rarityRing {
  0%   { transform: scale(0.8); opacity: 0.9; }
  100% { transform: scale(2.2); opacity: 0; }
}

@keyframes nukeShimmer {
  0%   { box-shadow: 0 0 30px rgba(75,0,130,0.8), 0 0 60px rgba(75,0,130,0.4); border-color: #6A0DAD; }
  50%  { box-shadow: 0 0 50px rgba(168,85,247,0.7), 0 0 100px rgba(75,0,130,0.6); border-color: #9d4edd; }
  100% { box-shadow: 0 0 30px rgba(75,0,130,0.8), 0 0 60px rgba(75,0,130,0.4); border-color: #6A0DAD; }
}

@keyframes settlementHit {
  0%   { transform: scale(1); box-shadow: none; }
  30%  { transform: scale(1.08); box-shadow: 0 0 24px rgba(34,197,94,0.7); }
  60%  { transform: scale(0.98); box-shadow: 0 0 12px rgba(34,197,94,0.4); }
  100% { transform: scale(1); box-shadow: 0 0 8px rgba(34,197,94,0.25); }
}

@keyframes settlementMiss {
  0%   { transform: translateX(0); }
  15%  { transform: translateX(-8px); }
  30%  { transform: translateX(8px); }
  45%  { transform: translateX(-5px); }
  60%  { transform: translateX(5px); }
  100% { transform: translateX(0); }
}

@keyframes lockConfirm {
  0%   { transform: scale(1); }
  25%  { transform: scale(0.92); }
  60%  { transform: scale(1.06); filter: brightness(1.2); }
  100% { transform: scale(1); filter: brightness(1); }
}

@keyframes levelUp {
  0%   { transform: scale(1) translateY(0); filter: brightness(1); }
  20%  { transform: scale(1.12) translateY(-6px); filter: brightness(1.4); }
  50%  { transform: scale(1.05) translateY(-2px); filter: brightness(1.2); }
  80%  { transform: scale(1.08) translateY(-4px); filter: brightness(1.3); }
  100% { transform: scale(1) translateY(0); filter: brightness(1); }
}

@keyframes chipsEarnFloat {
  0%   { opacity: 1; transform: translateY(0) scale(1); }
  60%  { opacity: 1; transform: translateY(-28px) scale(1.1); }
  100% { opacity: 0; transform: translateY(-48px) scale(0.9); }
}

@keyframes prestigeFull {
  0%   { filter: hue-rotate(0deg) brightness(1); }
  25%  { filter: hue-rotate(90deg) brightness(1.3); }
  50%  { filter: hue-rotate(180deg) brightness(1.5); }
  75%  { filter: hue-rotate(270deg) brightness(1.3); }
  100% { filter: hue-rotate(360deg) brightness(1); }
}

/* ============================================
   CARD SYSTEM
   ============================================ */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
  padding: 12px 0;
}

/* ── Card flip container ───────────────────────────────────────────────────── */
.card-flip-container {
  perspective: 1000px;
  position: relative;
}

.card-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 14px;
  overflow: hidden;
}

.card-face-front  { transform: rotateY(0deg); }
.card-face-back   { transform: rotateY(180deg); }

.card-flip-container.flipped .card-face-front { transform: rotateY(-180deg); }
.card-flip-container.flipped .card-face-back  { transform: rotateY(0deg); }

/* ── Legacy .card-front (collection grid) ─────────────────────────────────── */
.card-front {
  width: 280px;
  height: 392px; /* 280 × 3.5/2.5 = 392 */
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  font-family: inherit;
}
.card-front:hover {
  transform: translateY(-4px) scale(1.02);
}

.card-grid .card-front {
  width: 100%;
  height: auto;
  aspect-ratio: 5/7; /* 2.5:3.5 */
}

.card-art-area {
  position: relative;
  flex: 0 0 60%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-art-area .card-silhouette {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 90%;
}

.card-art-area .jersey-overlay {
  position: absolute;
  bottom: 10px;
  right: 10px;
  font-size: 48px;
  font-weight: 900;
  line-height: 1;
  opacity: 0.25;
  color: #fff;
  font-style: italic;
}

.card-info-area {
  flex: 0 0 40%;
  background: rgba(15, 15, 20, 0.92);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.card-info-area .card-player-name {
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.02em;
}

.card-info-area .card-team-pos {
  font-size: 10px;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.card-info-area .card-stat-line {
  font-size: 15px;
  font-weight: 700;
  color: #e5e7eb;
  margin-top: 2px;
}

.card-info-area .card-opponent {
  font-size: 10px;
  color: rgba(255,255,255,0.45);
  margin-top: auto;
}

.card-info-area .card-confidence-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.card-info-area .card-conf-label {
  font-size: 10px;
  color: rgba(255,255,255,0.5);
}

/* ============================================
   RARITY PILLS AND GLOWS
   ============================================ */

.rarity-pill {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 3px 8px;
  border-radius: 20px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  z-index: 10;
  border: 1px solid rgba(255,255,255,0.2);
}

.rarity-pill-common    { background: rgba(107,114,128,0.85); color: #e5e7eb; }
.rarity-pill-uncommon  { background: rgba(34,197,94,0.85);  color: #fff; }
.rarity-pill-rare      { background: rgba(59,130,246,0.85); color: #fff; }
.rarity-pill-epic      { background: rgba(139,92,246,0.85); color: #fff; }
.rarity-pill-legendary { background: rgba(234,179,8,0.85);  color: #1a1108; }
.rarity-pill-nuke      { background: rgba(75,0,130,0.92);   color: #e0b4ff; }
/* Propix 5-tier rarity pills */
.rarity-pill-potential { background: rgba(192,192,192,0.85); color: #1a1a1a; }
.rarity-pill-sleeper   { background: rgba(57,255,20,0.85);   color: #0a1a05; }
.rarity-pill-sixth     { background: rgba(255,215,0,0.9);    color: #1a1400; }
.rarity-pill-problem   { background: rgba(139,0,0,0.88);     color: #ffb0b0; }

.rarity-glow-common    { }
.rarity-glow-uncommon  { box-shadow: 0 0 16px rgba(34,197,94,0.35); }
.rarity-glow-rare      { box-shadow: 0 0 20px rgba(59,130,246,0.45); }
.rarity-glow-epic      { box-shadow: 0 0 24px rgba(139,92,246,0.5); }
.rarity-glow-legendary { box-shadow: 0 0 30px rgba(234,179,8,0.55); }
.rarity-glow-nuke      { animation: nukeShimmer 2s ease-in-out infinite; }
/* Propix 5-tier rarity glows */
.rarity-glow-potential { box-shadow: 0 0 10px rgba(192,192,192,0.3); }
.rarity-glow-sleeper   { box-shadow: 0 0 16px rgba(57,255,20,0.35); }
.rarity-glow-sixth     { box-shadow: 0 0 20px rgba(255,215,0,0.4); }
.rarity-glow-problem   { box-shadow: 0 0 24px rgba(139,0,0,0.45); }

.rarity-ring {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  border: 2px solid currentColor;
  animation: rarityRing 0.6s ease-out forwards;
  pointer-events: none;
  z-index: 20;
}

/* ============================================
   NUKE CARD EFFECTS
   ============================================ */

.nuke-card {
  animation: nukeShimmer 2s ease-in-out infinite;
}

.nuke-shimmer {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background: linear-gradient(
    135deg,
    transparent 30%,
    rgba(168,85,247,0.18) 50%,
    transparent 70%
  );
  background-size: 200% 200%;
  animation: shimmerSlide 2.5s linear infinite;
  pointer-events: none;
  z-index: 5;
}

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

/* ============================================
   PACK DESIGNS
   ============================================ */

.pack-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.pack-visual {
  width: 180px;
  height: 260px;
  border-radius: 16px;
  border: 2px solid rgba(255,255,255,0.15);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  cursor: pointer;
  transition: transform 0.15s ease;
}
.pack-visual:hover { transform: scale(1.03); }

.pack-visual .pack-label {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(255,255,255,0.9);
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}

.pack-visual .pack-icon {
  font-size: 56px;
  line-height: 1;
}

/* Daily pack — deep purple */
.pack-daily {
  background: linear-gradient(160deg, #4c1d95 0%, #7c3aed 50%, #4c1d95 100%);
  border-color: #7c3aed;
  box-shadow: 0 8px 32px rgba(124,58,237,0.4);
}

/* NBA pack — blue */
.pack-nba {
  background: linear-gradient(160deg, #1e3a5f 0%, #1d4ed8 50%, #1e3a5f 100%);
  border-color: #1d4ed8;
  box-shadow: 0 8px 32px rgba(29,78,216,0.4);
}

/* MLB pack — green */
.pack-mlb {
  background: linear-gradient(160deg, #14532d 0%, #16a34a 50%, #14532d 100%);
  border-color: #16a34a;
  box-shadow: 0 8px 32px rgba(22,163,74,0.4);
}

/* Challenge pack — gold/purple */
.pack-challenge {
  background: linear-gradient(160deg, #3b0764 0%, #7c3aed 30%, #d97706 70%, #78350f 100%);
  border-color: #d97706;
  box-shadow: 0 8px 32px rgba(217,119,6,0.5), 0 0 20px rgba(124,58,237,0.3);
}

/* WNBA pack — orange/white */
.pack-wnba {
  background: linear-gradient(160deg, #7c2d12 0%, #ea580c 50%, #7c2d12 100%);
  border-color: #ea580c;
  box-shadow: 0 8px 32px rgba(234,88,12,0.4);
}

/* Soccer / MLS / FIFA pack — green/white */
.pack-soccer {
  background: linear-gradient(160deg, #14532d 0%, #15803d 40%, #166534 100%);
  border-color: #22c55e;
  box-shadow: 0 8px 32px rgba(34,197,94,0.4);
}

/* NHL pack — ice blue/white */
.pack-nhl {
  background: linear-gradient(160deg, #0c1a2e 0%, #0369a1 50%, #0c1a2e 100%);
  border-color: #38bdf8;
  box-shadow: 0 8px 32px rgba(56,189,248,0.4);
}

/* NFL pack — brown/green */
.pack-nfl {
  background: linear-gradient(160deg, #1a2e0a 0%, #4d7c0f 40%, #7c2d12 100%);
  border-color: #a3e635;
  box-shadow: 0 8px 32px rgba(163,230,53,0.3);
}

/* Shake animation for pack idle */
@keyframes packIdleShake {
  0%   { transform: translateX(0) rotate(0deg); }
  15%  { transform: translateX(-4px) rotate(-1.5deg); }
  30%  { transform: translateX(4px) rotate(1.5deg); }
  45%  { transform: translateX(-3px) rotate(-1deg); }
  60%  { transform: translateX(3px) rotate(1deg); }
  75%  { transform: translateX(-1px) rotate(-0.5deg); }
  90%  { transform: translateX(1px) rotate(0.5deg); }
  100% { transform: translateX(0) rotate(0deg); }
}

.pack-idle-shake {
  animation: packIdleShake 0.6s ease-in-out;
}

@keyframes pack-shake {
  0%   { transform: rotate(0deg) translateX(0); }
  25%  { transform: rotate(-3deg) translateX(-4px); }
  50%  { transform: rotate(3deg) translateX(4px); }
  75%  { transform: rotate(-2deg) translateX(-2px); }
  100% { transform: rotate(0deg) translateX(0); }
}

.pack-shake {
  animation: pack-shake 0.4s ease-in-out;
}

.pack-art-container {
  width: 120px;
  height: 168px;
  overflow: hidden;
  border-radius: 10px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.pack-art-container:hover { transform: scale(1.04); }

.pack-art-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 12px;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}

.pack-art-label {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-align: center;
  position: absolute;
  bottom: 14px;
  left: 0;
  right: 0;
  text-transform: uppercase;
  z-index: 2;
}

/* Pack back face */
.pack-back {
  background: linear-gradient(160deg, #1f2937 0%, #374151 50%, #1f2937 100%);
  border-color: #4b5563;
}

.pack-back::after {
  content: '';
  position: absolute;
  inset: 12px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.08);
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 8px,
    rgba(255,255,255,0.03) 8px,
    rgba(255,255,255,0.03) 16px
  );
}

/* ============================================
   PACK SHOP CAROUSEL
   ============================================ */
.pack-carousel-item {
  flex-shrink: 0;
  transform-origin: center center;
  will-change: transform, opacity;
}

.pack-carousel-info-bar {
  text-align: center;
  padding: 10px 16px 4px;
  min-height: 60px;
}

/* No DVP column for soccer (FIFA / MLS) */
.no-dvp-col .research-table-header,
.no-dvp-col .research-row { grid-template-columns: 1fr 100px 70px 60px 60px; }
.no-dvp-col .col-dvp { display: none; }

/* Holographic foil shimmer */
@keyframes packFoilShimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.pack-foil-shimmer {
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.07) 50%, transparent 65%);
  background-size: 200% 100%;
  animation: packFoilShimmer 3s linear infinite;
  border-radius: 10px;
}

/* Challenge pack gold pulse */
@keyframes challengePulse {
  0%, 100% { box-shadow: 0 0 20px rgba(245,158,11,0.4), 0 8px 32px rgba(0,0,0,0.8); }
  50% { box-shadow: 0 0 44px rgba(245,158,11,0.9), 0 0 60px rgba(245,158,11,0.3), 0 8px 32px rgba(0,0,0,0.8); }
}

/* Swipe-to-open pack wrapper */
.pack-swipe-wrapper {
  position: relative;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.pack-swipe-wrapper:active { cursor: grabbing; }
.pack-half {
  position: absolute;
  inset: 0;
  will-change: transform, clip-path;
}

/* Particle canvas overlay */
#pack-particle-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
}

/* Card reveal rarity effects */
.rarity-reveal-sixth {
  animation: rarityGreenRing 0.7s ease-out;
}
.rarity-reveal-starter {
  animation: rarityBlueFlash 0.4s ease-out;
}
.rarity-reveal-allstar {
  animation: rarityGoldShimmer 2.5s ease-in-out infinite;
}
.rarity-reveal-problem {
  animation: rarityRedPulse 2s ease-in-out infinite;
}
.rarity-reveal-nuke {
  animation: rarityNukePurple 0.5s ease-out;
}

@keyframes rarityGreenRing {
  0% { box-shadow: 0 0 0 0 rgba(34,197,94,0.9); }
  100% { box-shadow: 0 0 0 24px rgba(34,197,94,0); }
}
@keyframes rarityBlueFlash {
  0% { filter: brightness(2) drop-shadow(0 0 8px rgba(59,130,246,0.9)); }
  100% { filter: brightness(1) drop-shadow(0 0 0 transparent); }
}
@keyframes rarityGoldShimmer {
  0%, 100% { filter: brightness(1) drop-shadow(0 0 4px rgba(245,158,11,0.4)); }
  50% { filter: brightness(1.25) drop-shadow(0 0 14px rgba(245,158,11,0.9)); }
}
@keyframes rarityRedPulse {
  0%, 100% { box-shadow: 0 0 18px rgba(239,68,68,0.4); }
  50% { box-shadow: 0 0 50px rgba(239,68,68,0.9), 0 0 80px rgba(239,68,68,0.4); }
}
@keyframes rarityNukePurple {
  0% { filter: brightness(3) hue-rotate(0deg); }
  33% { filter: brightness(1) hue-rotate(180deg); }
  66% { filter: brightness(2.5) hue-rotate(90deg); }
  100% { filter: brightness(1) hue-rotate(0deg); }
}

/* ============================================
   ORIGINS BADGE
   ============================================ */

.origins-badge {
  position: absolute;
  bottom: 8px;
  left: 8px;
  height: 16px;
  width: 40px;
  border-radius: 4px;
  background: linear-gradient(90deg, #d97706, #fbbf24);
  border: 1px solid rgba(255,255,255,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #1a0f00;
  text-transform: uppercase;
  z-index: 10;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

/* ============================================
   INJURY BADGE (CARD)
   ============================================ */

.injury-badge-card {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 3px 6px;
  border-radius: 4px;
  background: rgba(220,38,38,0.9);
  font-size: 8px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.05em;
  z-index: 10;
  border: 1px solid rgba(255,255,255,0.2);
}

/* ============================================
   CHIPS EARN FLOAT
   ============================================ */

.chips-float-label {
  position: fixed;
  font-size: 16px;
  font-weight: 800;
  color: #fbbf24;
  text-shadow: 0 0 8px rgba(251,191,36,0.6);
  pointer-events: none;
  z-index: 9999;
  animation: chipsEarnFloat 1.1s ease-out forwards;
}

/* ============================================
   SETTLEMENT ANIMATION CLASSES
   ============================================ */

.settle-hit-anim  { animation: settlementHit  0.55s ease-out forwards; }
.settle-miss-anim { animation: settlementMiss 0.45s ease-out forwards; }
.lock-confirm-anim { animation: lockConfirm   0.4s ease-out forwards; }
.level-up-anim    { animation: levelUp        0.7s ease-out forwards; }
.card-reveal-anim { animation: rarityBurst    0.5s ease-out forwards; }
.card-flip-anim   { animation: cardFlip       0.45s ease-out forwards; }

/* ── Filter tabs (below detail chart, above graph key) ─────────────────────── */
.detail-filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
  min-height: 0;
}
.filter-tab {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 99px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-elevated);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  user-select: none;
}
.filter-tab:hover { border-color: var(--purple-light); color: var(--purple-light); }
.filter-tab.active {
  background: var(--purple-light);
  color: #fff;
  border-color: var(--purple-light);
}

/* ── Player prop tabs (Other Props horizontal scroll) ───────────────────────── */
/* .player-prop-tab visual styles are shared with .period-toggle-btn above */
.player-prop-tabs {
  display: flex;
  overflow-x: auto;
  gap: 6px;
  padding-bottom: 8px;
  margin-bottom: 4px;
  scrollbar-width: none;
  flex-wrap: nowrap;
}
.player-prop-tabs:empty { display: none; margin: 0; padding: 0; }
.player-prop-tabs::-webkit-scrollbar { display: none; }

/* ── Lineup tab layout (lu-* = lineup) ──────────────────────────────────────── */
.lineup-grid { padding: 4px 0 2px; }
.lu-header {
  display: flex;
  align-items: center;
  padding: 2px 0 8px;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 2px;
}
.lu-team-name {
  flex: 1;
  font-size: 12px;
  font-weight: 800;
  color: var(--purple-light);
  letter-spacing: 0.06em;
}
.lu-team-name.right { text-align: right; }
.lu-vs {
  font-size: 10px;
  font-weight: 800;
  color: var(--text-muted);
  padding: 0 10px;
  flex-shrink: 0;
  letter-spacing: 0.08em;
}
.lu-row {
  display: grid;
  grid-template-columns: 1fr 24px 1fr;
  gap: 4px;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.lu-row:last-child { border-bottom: none; }
.lu-pos {
  font-size: 8px;
  font-weight: 800;
  color: var(--text-muted);
  text-align: center;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 3px;
  padding: 2px 1px;
  letter-spacing: 0.04em;
}
.lu-cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lu-cell-right { align-items: flex-end; }
.lu-cell.lu-empty { opacity: 0.3; }
.lu-name {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: var(--purple-light);
  background: rgba(139, 92, 246, 0.08);
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: 5px;
  padding: 2px 7px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  transition: background 0.15s;
  user-select: none;
}
.lu-name:hover { background: rgba(139, 92, 246, 0.18); }
.lu-stats {
  font-size: 9px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  padding: 0 2px;
}
.lu-footer {
  font-size: 9px;
  color: var(--text-muted);
  text-align: center;
  padding: 8px 0 2px;
  opacity: 0.8;
}

/* ── Lineup two-column layout (lu-col-* = new two-col design) ──────────────── */
.lu-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 2px 0;
}
.lu-col { min-width: 0; }
.lu-col-header {
  font-size: 11px;
  font-weight: 800;
  color: var(--purple-light);
  letter-spacing: 0.08em;
  padding: 2px 6px 4px;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 1px;
}
.lu-player-row {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 4px 6px;
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: background 0.15s;
  border-radius: var(--radius-sm);
}
.lu-player-row:hover { background: var(--bg-elevated); }
.lu-player-row.lu-empty { cursor: default; opacity: 0.35; }
.lu-player-row.lu-empty:hover { background: transparent; }
.lu-row-top {
  display: flex;
  align-items: center;
  gap: 4px;
}
.lu-pos-badge {
  font-size: 7px;
  font-weight: 800;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 3px;
  padding: 0 3px;
  flex-shrink: 0;
  line-height: 1.6;
}
.lu-full-name {
  font-size: 10px;
  font-weight: 700;
  color: var(--purple-light);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
  line-height: 1.3;
}
.lu-avg {
  font-size: 8px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

/* ── Filter stat overlay on individual bars ────────────────────────────────── */
.filter-val-overlay {
  position: absolute;
  bottom: 3px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.80);
  border-radius: 3px;
  padding: 1px 3px;
  pointer-events: none;
  white-space: nowrap;
  z-index: 5;
  line-height: 1.1;
}
.detail-bar { position: relative; }

/* ── Bar boxscore popup ────────────────────────────────────────────────────── */
.bar-boxscore-popup {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  width: min(96vw, 480px);
  max-height: 65vh;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.55);
  z-index: 9999;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.bbs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}
.bbs-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}
.bbs-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 16px;
  cursor: pointer;
  padding: 2px 6px;
  line-height: 1;
}
.bbs-body {
  overflow-y: auto;
  padding: 10px 14px 14px;
  flex: 1;
  scrollbar-width: thin;
}
.bbs-team-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--accent-blue);
  margin: 8px 0 4px;
}
.bbs-team-label.highlighted { color: var(--purple-light); }
.bbs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 10px;
}
.bbs-table th {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  text-align: right;
  padding: 2px 4px;
  border-bottom: 1px solid var(--border-subtle);
}
.bbs-table th:first-child { text-align: left; }
.bbs-table td {
  text-align: right;
  padding: 3px 4px;
  color: var(--text-secondary);
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.bbs-table td:first-child { text-align: left; color: var(--text-primary); font-weight: 600; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bbs-table tr.bbs-highlight td { background: rgba(124,58,237,0.13); color: var(--purple-light); font-weight: 700; }
.bbs-table tr.bbs-highlight td:first-child { color: var(--purple-light); }
.bbs-loading { text-align: center; color: var(--text-muted); font-size: 12px; padding: 20px 0; }

/* clickable bar styling */
.detail-bar-wrap.bar-clickable { cursor: pointer; }
.detail-bar-wrap.bar-clickable:hover .detail-bar { filter: brightness(1.25); }
.detail-bar-wrap[onclick] { cursor: pointer; }
.detail-bar-wrap[onclick]:hover .ml-wl-box { filter: brightness(1.2); }